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

免费素材 xs1Photoshop设计活泼手绘风格网页界面image/image/20120128776最终效果：image/image/20120128776 align=“center”image/image/20120128776背景image/image/20120128776第一步：创建一个画布image/image/20120128776首先，打开photoshop创建一个新的项目。你可以点击文件>新建或按下CTRL+N快捷键来创建。我们选择一个普通的画布大小1000×900，当然这些设置可以在后期增加。image/image/20120128776 align=“center”第二步：应用渐变image/image/20120128776既然我们的画布已经创建了，是时候开始背景的设计了。创建一个新层(快捷键CTRL+SHIFT+N)。接着给这个图层从左往右添加渐变前景色设置为#edd8af背景色为 #ede4c9.这个颜色用来表示盒子的颜色。image/image/20120128776 align=“center”第三步：添加纹理image/image/20120128776我们想要BoxedArt背景设计看起来像厚纸板的效果。创建另一个新层，颜色填充为#bcb6a9。下一步应用胶片颗粒艺术效果设置参数如下。接着为了使它看起来粗糙一点，我们给它应用一点高斯模糊效果。image/image/20120128776 align=“center”以下就是我们应用这些效果后背景图层看起来的效果。image/image/20120128776 align=“center”image/image/20120128776HEADER部分image/image/20120128776第四步：导航条设计image/image/20120128776顶部的导航区域部分我们放置了一条条状的带子。我们可以看到这种带状风格在很多网站都有应用，不过我们这里用到的有一点不同。由于BoxedArt 想要将这个设计看起来像用来发送邮件的盒子。为了创建这个导航条我们需要从上下载一个带状的图片，使用自由变换工具(在编辑菜单下选择自由变换或者快捷键CTRL+T)沿着顶部的区域伸展开来 。接下来创建透明效果我们要把图层样式设置为线性加深。image/image/20120128776下面就是效果：image/image/20120128776 align=“center”第五步：老邮票导航按钮image/image/20120128776停留在盒子主题，我们要让这个导航按钮看起来有点破旧磨损邮票。为了达到这种效果列，我们需要一张老邮票(还是在 上下载)。下载后第一步是描出邮票的路径，从背景中提出来，邮票上依然有图像。为了覆盖邮票上的图像，我们用一张黄色的纸张粘贴在上面也就是添加一个纹理效果。image/image/20120128776下一步，我们要给导航按钮添加一些颜色来区别各种不同类的导航，我们在邮票上添加一些装饰花纹效果，在你完成创建好颜色盒子后，我们把这个层的样式修改为线性加深以便颜色能与老照片混合在一起。然后我们增加另一个新层自上而下颜色为黑白我们给这个图层添加胶片颗粒艺术效果设置如下，最后我们把图层设置为正片叠底，把这个不透明度设置为60%。image/image/20120128776 align=“center”注意：您可以在上述屏幕快照看到创建的邮票图层。image/image/20120128776第六步应用导航按钮到导航条上image/image/20120128776现在我们已经创建好了几个不同颜色的邮票按钮，是时候来完成最后header部分的准备工作了，把导航按钮应用到导航条上，我们通过给每个导航按钮应用由mathilde设计的Sketchy icons图标来添加一些手写效果。这些icon图标是放置在每个颜色盒子，并调整了中心图标的位置。同样的步骤把icon应用到每个邮票上去。image/image/20120128776 align=“center”下一步，对每个邮票使用自由变换工具(CTRL+T)，将他们调整不同的朝向给他们一种拍打的效果。这一步后，我们切换到文字工具，每个分类使用一种手写字体。这里我用到的是 Loved by the King.最后我们的导航条就完成了。image/image/20120128776 align=“center”第七步开始顶部介绍区域image/image/20120128776首先创建一个新层(CTRL+SHIFT+N)在工具栏中选择矩形选框工具。现在在页面上创建一个矩形使用白色来填充。这块区域将被用来当做一张白纸。image/image/20120128776 align=“center”好了我们已经完成白色纸张部分了，在白纸图层下面创建另一个新层然后填充黑色，这个将用来创建阴影。完成之后我们转到滤镜>模糊>高斯模糊半径设置为6.5.之后把这个层的不透明度设置为20%，向右移动5pixels。然后添加主要的文字，这样的话短语Simplify and Save会被用到，位于顶部纸张部分。image/image/20120128776 align=“center”现在你看在白纸下面有阴影，但是纸张并不是粘在哪里的。所以我们在纸张的一边来添加一些胶带，如先前的教程一样，我们在另一边添加了一个邮戳来保持画面的平衡。在你的纸张完成后，我们选择一些手写字体来添加一些文字。看起来的话想事包裹上的信息。最后加亮这些图层按下CTRL+T自由变换工具，角度设为 -1.5 degrees 使它看起来更加具有真实效果。image/image/20120128776 align=“center”image/image/20120128776第八步 贴上一个便签image/image/20120128776我们使用了一个便签设计来分开空间来介绍我们网站的优惠注册信息。这个在整个盒子主题上运用的非常好，设计这样一个便签效果需要创建另一个新的图层，选择钢笔工具使用钢笔工具来绘制一个方形区域如下图所示image/image/20120128776 align=“center”在你完成之后转到路径面板，按住CTRL键点击路径图层，接着你会看到方形区域已经载入选区了，之后使用前景色#fffb78背景色#fffcd1从左上角到右下角绘制渐变。你将会看到这样一个熟悉的黄色便签纸形状。image/image/20120128776 align=“center”第九步image/image/20120128776现在我们需要再一次添加阴影效果，给这个便签纸添加深度，所以创建另一个新层(CTRL+SHIFT+N)。过程如之前给白纸创建阴影差不多，但是是将不透明度设置为40%。你需要变换一下阴影来创建一种倾斜效果，轻微的拖动一下如图所示。image/image/20120128776 align=“center”第十步给便签纸添加内容image/image/20120128776下一步，给便签纸添加一些文字，在我们的便签纸中我们要添加一些加入等按钮，为了创建相似的按钮首先我们绘制一个盒子使用绿色填充，然后添加一个蒙板选择一种grudge 笔刷。下一步遮住按钮的一些部分看起来就像破损一样，这就是我们创建邮戳的效果。image/image/20120128776 align=“center”这个是最后呈现的效果。image/image/20120128776 align=“center”BODY 部分image/image/20120128776第十一步卷曲胶带纸标题image/image/20120128776我们转到body的内容部分。在这个设计中，我们要创建2栏和一些图标。我们使用的是已经有的图标因为我们喜欢这种手写效果包括Handy Icons and Sketchy icons.。在body开始的区域我们要一个标题栏用来罗列我们网站的内容。我们把这个header部分做成卷曲效果。至于说到透明胶带我们使用的来自 bigstockphoto 的图片。为了增加胶带的深度，我使用矩形选框工具来选择胶带的一些区域。在选中选区后我们复制这个图层按下ALT+SHIFT向左边移动，然后在向右移动一下使它看起来显得长一些。为了避免缝隙的产生我们使用图章工具里拼合这些缝隙。可以查看下面的效果。image/image/20120128776 align=“center”第十二步预览下的小图标image/image/20120128776BoxedArt网站的内容区域包含很多网页模板的预览。创建这种效果我们需要选中矩形选框工具创建一个小的矩形，然后使用颜色#123057填充。 这些按钮我们只要复制第一个图层，移动它到第一个图层下面，设置这个图层的透明度这里我们设置的为40%。重复同样的步骤处理余下的按钮。image/image/20120128776 align=“center”第十三步使用针脚线来分开这些区域image/image/20120128776为了分开这些主要的分类，为了创建这些虚线我们可以文字工具角度为90，把这些图层的样式设置为叠加，为了使这些显眼点我们只需复制这个图层2-3次至于颜色多深取决于你自己。image/image/20120128776 align=“center”image/image/20120128776第十四步填充额外的内容image/image/20120128776添加剩下的内容就非常简单了，我们只需使用直线工具来分开每个部分，在添加些图标和文字，这里我们用到的是一种干净的字体Helvetica Condensed,。下图就是body部分的整体效果了。image/image/20120128776 align=“center”第十五步—底部广告部分image/image/20120128776我们已经到了底部放置广告部分了，这里的带状条将会再一次应用起来，使用先前有的图片作为起点，下一步，我们要使用圆角矩形工具，前景色设置为白色半径为5px。接着我们需要在设置一些小的圆角矩形，颜色设置为#f8f7f3边框用深灰。你可以在下图的图层样式中设置边框(就是一种描边效果)。image/image/20120128776 align=“center”这就是我们完成后创建的效果image/image/20120128776 align=“center”现在让我们来添加标题和广告到每个盒子中，效果如下图：image/image/20120128776 align=“center”第十六步 公告部分image/image/20120128776公告部分我们采取的是和header部分相似蒙板的方法，当然还有订阅新闻通讯等区域也是这样的方法，就像纸张粘上去的一样。首先我们给 header部分添加一种厚纸张效果，这个和body部分的方法基本一样。至于内容部分，选中矩形选框工具在右下角绘制小盒子颜色填充为#f9e5a6。完成按下CTRL-D取消选区，在选择加深工具，笔刷大小设置为35pixels加深棕色盒子的边角区域就像下图所示image/image/20120128776 align=“center”最后我们把图层的不透明度设置为60%再双击图层在图层样式中添加一些阴影效果，参数设置如下图，然后在添加一些内容。image/image/20120128776 align=“center”完成后的效果很不错哦image/image/20120128776 align=“center”image/image/20120128776FOOTER部分image/image/20120128776第十七步网页底部image/image/20120128776到了我们创建底部的部分了，首先我们使用矩形选框工具，在页面上选择下图这样一个区域，使用颜色#462d0f填充，选择直线工具绘制一条直线颜色设置为#a05d18。image/image/20120128776 align=“center”到了底部的分类部分了，我们要又一次绘制一个大的选框，颜色填充为#472a0b ，图层的不透明度度设置为78%，接着创建另一个图层颜色填充为#fffcd1。下一步添加胶片颗粒效果最后把图层的不透明度设置为30%图层样式为正片叠底。image/image/20120128776 align=“center”完成后你应该看到的样子image/image/20120128776 align=“center”最后我们只需重复我们在footer部分的操作或者复制图层把它移到底部，这样你就可以添加内容了。看下下面的预览图，是否有些启示列，希望你喜欢。image/image/20120128776 align=“center”恭喜!你已经圆满完成这个教程我们在这个BoxedArt 网站设计中也学到一些有用的photoshop技巧知识。image/image/20120128776进入论坛交作业：25个你可能不知道的photoshop快捷键在阅读本教程前建议您安装Photoshop CS5，并且打开软件随时验证，还要在Photoshop首选项中启用OpenGL绘图。因为本文的许多快捷键仅仅存在于photoshop CS5。我相信很多设计师都有过目不忘的好记性，但看完再用，终究比不上边学边用，同时还可以验证本文中的快捷键是否正确。因为能力有限，错误之处还请大家指点，可随意转载,无需注明出处.以下为翻译正文：本文中列举了很多有用的Photoshop快捷键，使用这些快捷键可以加快您的工作流程。有一部分快捷键人们很少注意到，而另一些则被普遍使用，还有一部分仅仅存在于Photoshop cs5中。希望本文能对大家有所助益。1.拖动以缩放按下Ctrl+空格+鼠标单击并向左或向右拖动(Mac下为Command+空格+鼠标单击)，向左为缩小，向右为放大，这是一个仅使用一个快捷键就能快速对图像进行缩放的方法(该快捷键仅存在于Photoshop CS5，并且要启用OpenGL绘图。)注：在其他的Photoshop版本中，按下空格键+Ctrl键的同时在画布上框选一个区域，就可以快速放大该区域。2.HUD拾色器Alt+Shift+右击(windows)或者Control+Option+Command+单击(Mac)，一个漂亮的带有色轮的拾色器就出现了。(该快捷键同样仅存在于Photoshop CS5，并且要启用OpenGL绘图。使用选区工具时该快捷键不可用)注：你可以在编辑-首选项-常规对话框中设置HUD拾色器的样式。3.鸟瞰视图在把一张图片放大了很多倍在当前屏幕只能看到图片的局部的情况下，按下H键并单击画布可以快速的把图片按屏幕大小缩放以预览全局，此时不要放开鼠标，在手形光标的下面有一个黑色小框，将光标移动到你要在图片上放大的区域，此时放开鼠标，当前区域就被放大了。当您在调整一幅较大的图片中的很小的局部时，该快捷键会非常有用。注：该快捷键同样仅存在于Photoshop CS5中，也需要启用Open GL绘图。4.画笔尺寸和硬度Ctrl+Alt+鼠标右击(Windows)或者Control+Option+单击(Mac)，此时不要放开鼠标，向左/右拖动鼠标以缩小/放大画笔尺寸，向上/下拖动鼠标以增加/减少画笔的硬度。在Photoshop CS5中尺寸和硬度均可以调整，而在CS4中只能调整画笔的尺寸注：该快捷键同样需要启用Open GL绘图。5.画直线在拖动鼠标的同时按下Shift键，适用于绝大部分的绘图工具。(这个很多人都知道的)6.移动工具按下Ctrl键可以将当前工具临时切换为移动工具。7.同时缩放多个窗口的内容按Shift+Ctrl+空格(Mac环境下为Shift+Command+空格)的同时单击鼠标以同时放大多个窗口的内容，按下Shift+Alt+空格(Mac环境下为shift+Option+空格)的同时单击鼠标则是同时缩小多个窗口的内容。8.隐藏调板按下Tab键可以快速隐藏界面中的所有调板，再次按下Tab键就可重新显示调板。9.在MiniBridge调板中全屏浏览文件先点击窗口-扩展功能-MiniBridge，打开MiniBridge调板，选择一个包含很多图片的文件夹，在调板中点选一个文档，按下空格的同时按方向键，就可以在全屏的视图下浏览文档，该快捷键同样适用于Bridge。注：在Photoshop CS5中集成了MiniBridge调板。10.文本尺寸选取要修改尺寸的文本，按下Ctrl+Shift+,(或.)以减小(或增大)文本尺寸。Mac下的快捷键为Command+Shift+,(或.)11.将文本设置为全部大写选取文本，按下ctrl+shift+K。Mac下的快捷键为Command+Shift+K。12.字间距使用文本工具将光标放置在要调整间距的文字之间，按下Alt+左右方向键(Mac下为Option+左右方向键)以减小或增大文字的间距，每按一次将使文字间距减小或增大20个数值。而按下Ctrl+Alt+左右方向键则可以使文字间距减小或增大100个数值。(Mac下为Command+Option+左右方向键)13.行间距选取多行文本，按下Alt+上下方向键以减小或增大行距。Mac下的快捷键为Option+上下方向键。14.基线偏移选取文本，按下Shift+Alt+上下方向键以上下移动基线，Mac下的快捷键为Shift+Option+上下方向键。15.填充Ctrl+Backspace(Mac下为Command+Backspace)填充背景色，Alt+Backspace(Mac下为Option+Backspace)填充前景色。Shife+Backspace，打开填充选项。该快捷键同样可以快速修改文本对象或矢量形状的颜色。16.重置对话框打开一个对话框后，譬如曲线或色阶，按下Alt键(Mac下为Option)的同时点击取消按钮就可以重置对话框，比之于点击取消之后重新打开对话框可以大大节省时间和精力。17.不透明度和填充点选一个图层之后按下数字键可以快速调整被选图