简易百科旧版 >>所属分类 >> 网页设计 PS 技术经验

Photoshop做活泼手绘风格网页设计稿

标签: PS 网页设计

顶[0] 分享到发表评论(0) 编辑词条

　这是一篇用Photoshop做网页视觉设计稿的教程，文章将一步步介绍如何在Photoshop中做一个活泼的手写风格网页设计稿。设计过程主要分为以下几个部分：背景、header部分、body部分、footer部分。

　　下面是效果图预览。

alt=Photoshop做活泼手写风格网页设计稿_完成效果_天极设计在线整理
图01

　　背景描绘

　　第一步：创建画布

　　首先，打开photoshop创建一个新的项目。你可以点击文件>新建或按下CTRL+N快捷键来创建。我们选择一个普通的画布大小1000×900，当然这些设置可以在后期增加。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图01

　　第二步：应用渐变

　　既然我们的画布已经创建了，是时候开始背景的设计了。创建一个新层(快捷键CTRL+SHIFT+N)。接着给这个图层从左往右添加渐变前景色设置为#edd8af背景色为#ede4c9。这个颜色用来表示盒子的颜色。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图02

　　第三步：添加纹理

　　我们想要BoxedArt背景设计看起来像厚纸板的效果。创建另一个新层，颜色填充为#bcb6a9。下一步应用胶片颗粒艺术效果设置参数如下。接着为了使它看起来粗糙一点，我们给它应用一点高斯模糊效果。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图03

web
图04

web
图05

　　以下就是我们应用这些效果后背景图层看起来的效果。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图06

web
图07

　　请点击“下一页”，我们看下一个步骤。

2网页头部

　　HEADER部分

　　第四步：导航条设计

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

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图08

　　第五步：老邮票导航按钮

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

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

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图09

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图10

web
图11

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

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

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

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图12

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

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图13

　　第七步：开始顶部介绍区域

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

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图14

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

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图15

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

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图16

　　第八步：贴上一个便签

　　我们使用了一个便签设计来分开空间来介绍我们网站的优惠注册信息。这个在整个盒子主题上运用的非常好，设计这样一个便签效果需要创建另一个新的图层，选择钢笔工具使用钢笔工具来绘制一个方形区域如下图所示

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图17

　　在你完成之后转到路径面板，按住CTRL键点击路径图层，接着你会看到方形区域已经载入选区了，之后使用前景色#fffb78背景色#fffcd1从左上角到右下角绘制渐变。你将会看到这样一个熟悉的黄色便签纸形状。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图18

　　第九步：添加阴影效果

　　现在我们需要再一次添加阴影效果，给这个便签纸添加深度，所以创建另一个新层(CTRL+SHIFT+N)。过程如之前给白纸创建阴影差不多，但是是将不透明度设置为40%。你需要变换一下阴影来创建一种倾斜效果，轻微的拖动一下如图所示。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图19

　　第十步：给便签纸添加内容

　　下一步，给便签纸添加一些文字，在我们的便签纸中我们要添加一些加入等按钮，为了创建相似的按钮首先我们绘制一个盒子使用绿色填充，然后添加一个蒙板选择一种grudge笔刷。下一步遮住按钮的一些部分看起来就像破损一样，这就是我们创建邮戳的效果。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图20

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图21

　　这个是最后呈现的效果。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图22

　　请点击“下一页”，我们看下一个步骤。

3网页主体部分

　　BODY 部分

　　第十一步：卷曲胶带纸标题

　　我们转到body的内容部分。在这个设计中，我们要创建2栏和一些图标。我们使用的是已经有的图标因为我们喜欢这种手写效果包括Handy Icons and Sketchy icons.。在body开始的区域我们要一个标题栏用来罗列我们网站的内容。我们把这个header部分做成卷曲效果。至于说到透明胶带我们使用的来自bigstockphoto

　　的图片。为了增加胶带的深度，我使用矩形选框工具来选择胶带的一些区域。在选中选区后我们复制这个图层按下ALT+SHIFT向左边移动，然后在向右移动一下使它看起来显得长一些。为了避免缝隙的产生我们使用图章工具里拼合这些缝隙。可以查看下面的效果。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图23

　　第十二步：预览下的小图标

　　BoxedArt网站的内容区域包含很多网页模板的预览。创建这种效果我们需要选中矩形选框工具创建一个小的矩形，然后使用颜色#123057填充。这些按钮我们只要复制第一个图层，移动它到第一个图层下面，设置这个图层的透明度这里我们设置的为40%。重复同样的步骤处理余下的按钮。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图24

　　第十三步：使用针脚线来分开这些区域

　　为了分开这些主要的分类，为了创建这些虚线我们可以文字工具角度为90，把这些图层的样式设置为叠加，为了使这些显眼点我们只需复制这个图层2-3次至于颜色多深取决于你自己。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图25

　　第十四步：填充额外的内容

　　添加剩下的内容就非常简单了，我们只需使用直线工具来分开每个部分，在添加些图标和文字，这里我们用到的是一种干净的字体Helvetica Condensed,。下图就是body部分的整体效果了。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图26

　　第十五步：—底部广告部分

　　我们已经到了底部放置广告部分了，这里的带状条将会再一次应用起来，使用先前有的图片作为起点，下一步，我们要使用圆角矩形工具，前景色设置为白色半径为5px。接着我们需要在设置一些小的圆角矩形，颜色设置为#f8f7f3边框用深灰。你可以在下图的图层样式中设置边框(就是一种描边效果)。

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图27

　　这就是我们完成后创建的效果

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图28

　　现在让我们来添加标题和广告到每个盒子中，效果如下图：

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图29

　　第十六步：公告部分

　　公告部分我们采取的是和header部分相似蒙板的方法，当然还有订阅新闻通讯等区域也是这样的方法，就像纸张粘上去的一样。首先我们给header部分添加一种厚纸张效果，这个和body部分的方法基本一样。至于内容部分，选中矩形选框工具在右下角绘制小盒子颜色填充为#f9e5a6。完成按下CTRL-D取消选区，在选择加深工具，笔刷大小设置为35pixels加深棕色盒子的边角区域就像下图所示

Photoshop做活泼手写风格网页设计稿_天极设计在线整理
图30