PS设计教程网欢迎你!

Photoshop设计活泼手绘风格网页界面(2)

文章来源于 PS真功夫,感谢作者 熊玩意 给我们带来经精彩的文章!
设计教程/PS教程/设计教程2010-11-21
HEADER部分 第四步:导航条设计 顶部的导航区域部分我们放置了一条条状的带子。我们可以看到这种带状风格在很多网站都有应用,不过我们这里用到的有一点不同。由于BoxedArt 想要将这个设计看起来像用来发送邮件的盒

HEADER部分

第四步:导航条设计

顶部的导航区域部分我们放置了一条条状的带子。我们可以看到这种带状风格在很多网站都有应用,不过我们这里用到的有一点不同。由于BoxedArt 想要将这个设计看起来像用来发送邮件的盒子。为了创建这个导航条我们需要从bigstockphotos.com上下载一个带状的图片,使用自由变换工具(在编辑菜单下选择自由变换或者快捷键CTRL+T)沿着顶部的区域伸展开来 。接下来创建透明效果我们要把图层样式设置为线性加深。

下面就是效果:

Photoshop设计活泼手绘风格网页界面

第五步:老邮票导航按钮

停留在盒子主题,我们要让这个导航按钮看起来有点破旧磨损邮票。为了达到这种效果列,我们需要一张老邮票(还是在 bigstockphotos.com上下载)。下载后第一步是描出邮票的路径,从背景中提出来,邮票上依然有图像。为了覆盖邮票上的图像,我们用一张黄色的纸张粘贴在上面也就是添加一个纹理效果。

下一步,我们要给导航按钮添加一些颜色来区别各种不同类的导航,我们在邮票上添加一些装饰花纹效果,在你完成创建好颜色盒子后,我们把这个层的样式修改为线性加深以便颜色能与老照片混合在一起。然后我们增加另一个新层自上而下颜色为黑白我们给这个图层添加胶片颗粒艺术效果设置如下,最后我们把图层设置为正片叠底,把这个不透明度设置为60%。

Photoshop设计活泼手绘风格网页界面

Photoshop设计活泼手绘风格网页界面

Photoshop设计活泼手绘风格网页界面

注意:您可以在上述屏幕快照看到创建的邮票图层。

第六步应用导航按钮到导航条上

现在我们已经创建好了几个不同颜色的邮票按钮,是时候来完成最后header部分的准备工作了,把导航按钮应用到导航条上,我们通过给每个导航按钮应用由mathilde设计的Sketchy icons图标来添加一些手写效果。这些icon图标是放置在每个颜色盒子,并调整了中心图标的位置。同样的步骤把icon应用到每个邮票上去。

Photoshop设计活泼手绘风格网页界面

下一步,对每个邮票使用自由变换工具(CTRL+T),将他们调整不同的朝向给他们一种拍打的效果。这一步后,我们切换到文字工具,每个分类使用一种手写字体。这里我用到的是 “Loved by the King”.最后我们的导航条就完成了。

Photoshop设计活泼手绘风格网页界面

第七步开始顶部介绍区域

首先创建一个新层(CTRL+SHIFT+N)在工具栏中选择矩形选框工具。现在在页面上创建一个矩形使用白色来填充。这块区域将被用来当做一张白纸。

Photoshop设计活泼手绘风格网页界面

好了我们已经完成白色纸张部分了,在白纸图层下面创建另一个新层然后填充黑色,这个将用来创建阴影。完成之后我们转到滤镜>模糊>高斯模糊半径设置为6.5.之后把这个层的不透明度设置为20%,向右移动5pixels。然后添加主要的文字,这样的话短语”Simplify and Save”会被用到,位于顶部纸张部分。

Photoshop设计活泼手绘风格网页界面

现在你看在白纸下面有阴影,但是纸张并不是粘在哪里的。所以我们在纸张的一边来添加一些胶带,如先前的教程一样,我们在另一边添加了一个邮戳来保持画面的平衡。在你的纸张完成后,我们选择一些手写字体来添加一些文字。看起来的话想事包裹上的信息。最后加亮这些图层按下CTRL+T自由变换工具,角度设为 -1.5 degrees 使它看起来更加具有真实效果。

Photoshop设计活泼手绘风格网页界面

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa