当前位置:首页ps教程Photoshop设计一个破旧的卡通网站布局
Photoshop设计一个破旧的卡通网站布局
°
  • 素材类型: 资源-素材
  • 上传时间:

本教程主要用Photoshop设计一个破旧的卡通网站模板教程,主要让大家来学习在设计模板过程中注意的布局.

最终图片预览

在我们开始之前,让我们看一下我们将要创建的图片。点击下面的图片可以查看完整大小的图片。和往常一样,PSDTUTS Plus会员可以下载完整的Photoshop文件。

Photoshop设计一个破旧的卡通网站布局

第1步

创建一个1024×768像素大小的网页文档。使用和下面的图片相似的颜色填充背景层。选择矩形选框工具画出一个矩形,这个矩形应该占据页面的大概一半大小,并且填充下面给出的颜色。然后对其进行栅格化。使用图层>栅格化>形状命令。

将其命名为”top layer”。使用套索工具,在矩形的下方画出一些形状,就像下面的图片那样。然后按Delete键,这样会从矩形中删除这些形状,这是创建这种效果的快捷方法。当然,如果你喜欢,你也可以使用蒙板。

Photoshop设计一个破旧的卡通网站布局

第2步

在”top layer”下方创建一个新的图层,选取笔刷工具,设置为Soft Mechanical,直径100像素,颜色为#484536,使用笔刷为”top-shadow”图层创建阴影的形状。你也许需要将其放大,弄脏,以得到更好的效果。

接下来我们应用一些图层样式,给上面的图层应用1个像素大小的外部,白色描边,然后应用图案叠加,柔光混合模式,使用锈迹图案。

小贴士:你最好自己画阴影,不要将阴影固定,要不然可能看上去不太自然。你可能需要一些时间来画这一部分,使其看上去更好一些。

Photoshop设计一个破旧的卡通网站布局

第3步

在”top layer”上方创建一个新的图层,然后按住option/Alt键在图层之间点击创建一个蒙板。使用相同的画笔,将颜色设置为#d8ce9d,沿着”top layer”的边缘画一遍,创建出高光效果。

Photoshop设计一个破旧的卡通网站布局

第4步 使用编辑自由变换命令,或cmd/Ctrl+T键,旋转到下方所示的角度,再次使用cmd/Ctrl+T,这次选择Warp,向下方所示那样拖曳右下角。 第5步 使用钢笔工具,在矩形形状下方画出阴影。应用5个像素的高斯模糊。然后

第4步

使用编辑>自由变换命令,或cmd/Ctrl+T键,旋转到下方所示的角度,再次使用cmd/Ctrl+T,这次选择Warp,向下方所示那样拖曳右下角。

Photoshop设计一个破旧的卡通网站布局

第5步

使用钢笔工具,在矩形形状下方画出阴影。应用5个像素的高斯模糊。然后将图层混合模式设置为正片叠底。

小贴士:将顶部的阴影去除以增加效果。

Photoshop设计一个破旧的卡通网站布局

第6步

首先,按住Cmd或Ctr键点击矩形,将其载入选区。应用选择>修改>收缩>10个像素。在其之上新建一个图层,填充为白色。然后放入任何你喜欢的图片。之后给新创建的图层增加一个蒙版。

使用多边形套索工具画出胶带。在其之上创建一个新的图层,将其填充为白色。将填充调整为47%。应用一个像素的内部描边,使用(#e4dec3)颜色,将不透明度调整为66%。然后将其复制一遍。将复制好的图层移动到左边,如下图那样旋转左边的胶带。

Photoshop设计一个破旧的卡通网站布局

第7步

使用画笔工具(B)为两块胶带创建阴影。设置如下图。

Photoshop设计一个破旧的卡通网站布局

第8步 键出网站标题。我这里使用的是Bernard MT Condensed字体,颜色为(#7a745e),72个像素大?=酉吕醇鲋鞯己嚼傅奈淖帧Uじ窕淖滞疾恪Q≡裣鹌すぞ撸褂肨B Grunge Brush,随机的擦拭文字,做出破损的效果。

第8步

键出网站标题。我这里使用的是Bernard MT Condensed字体,颜色为(#7a745e),72个像素大小。接下来键出主导航栏的文字。栅格化文字图层。选择橡皮工具,使用TB Grunge Brush,随机的擦拭文字,做出破损的效果。或者你更青睐于非破坏性的方法的话,也可以使用蒙版来创建出这种效果。

Photoshop设计一个破旧的卡通网站布局

第9步

使用铅笔工具(B),放大图片,画出一个箭头形状。向上一步做标题那样擦拭它。

Photoshop设计一个破旧的卡通网站布局

第10步

使用相同的技术,创建搜索区域,然后是RSS图标。我还给主导航标题旁边添加了一些文字。

Photoshop设计一个破旧的卡通网站布局

第11步 我们的页首部分已经完成。主要内容部分也已经作为背景部分已经完成,接下来我们开始做我们的页脚。选区矩形选区工具,在屏幕下方画一个大约40个像素高的矩形。将其填充为(#302e26)色。将其栅格化。选择图层

第11步

我们的页首部分已经完成。主要内容部分也已经作为背景部分已经完成,接下来我们开始做我们的页脚。选区矩形选区工具,在屏幕下方画一个大约40个像素高的矩形。将其填充为(#302e26)色。将其栅格化。选择图层>栅格化>形状命令。然后使用我们在创建”top layer”图层时相同的剪切技术。这次,我们会将其应用到上面的矩形。继续在上面的矩形中剪切出相同的形状。然后应用下面的图层样式。最后你的结果应当看起来和下面的图片差不多。

Photoshop设计一个破旧的卡通网站布局

最后的图片

现在我们快要完成了。最后我们只需要简单的添加三个矩形。然后应用投影图层样式效果。选择三幅图片添加上去。给它们添加剪贴蒙板使其适合白色矩形的边界。我们最后的图片如下。

Photoshop设计一个破旧的卡通网站布局

原文:Design a Cartoon Grunge Web site Layout

进入论坛参与讨论和交作业:http://www.missyuan.com/viewthread.php?tid=440568

温馨提示:

文章标题:Photoshop设计一个破旧的卡通网站布局

文章链接:https://www.4tu.cn/photoshop/39377.html

更新时间:2024年08月30日

文章版权声明
1、本网站名称:思图创意
2、本站永久网址:https://www.4tu.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
ps教程

Photoshop制作儿童老照片效果

2024-8-30 10:15:01

ps教程

Photoshop设计一个漂亮的3D木箱

2024-8-30 10:17:46

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
搜索