Photoshop实例教程:设计博客界面

[导读]本教程将告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。我们可以重点关注制作的步骤以及一些细节的修饰和处理。做好psd后，就为切片做好了准备。
　　我们会从零开始告诉大家如何从一个空白的画布来一步步的制作出整个界面。
　　如果你想学习这个界面设计完成后接下来如何切片，请点击：

131235F2F3950-1OY.jpg (35.59 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F2F3950-1OY.jpg
图1
　　这是我为Springy Developments的一个WordPress主题项目中的一个特别的设计，将来我想我们一起来看看如何将这个设计转化为编码的过程以及最后如何将他们制作成最终的产品。
　　牢记最初的概念设计稿，下面的教程将会一步一步来明确这个过程。想要一个好的设计，大量的试验和一些元素的重新安排是不可或缺的，因为这将让我们很好的理解为什么使用这些工具，为什么这样布局来设计这样一个产品。
　　下面开始制作：
　　1、打开PS然后创建一个空白文档。我比较喜欢在一个大一点宽屏文档上面开始制作。切记使用RGB色彩模式以及设置为72DPI就好，因为我们紧紧是在屏幕上使用（注：一般印刷是300dpi，而屏幕只要72就够了，CMYK为印刷色）。

131235F2V11F-24456.jpg (29.31 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F2V11F-24456.jpg
图2
　　2、首先我们来处理页面的背景，这个地方没什么特别有趣的填充物。给背景选择一个素色，然后从上面使用放射性渐变工具一直拖到中间。当然你也可以选用自己喜欢的颜色，在这里我就选择了我选择的是蓝绿色的渐变。
131235F33MI0-34D7.jpg (21.5 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F33MI0-34D7.jpg
图3
　　3、打开一个牛皮纸素材，我们将用它来为背景增加一些有趣的材质效果。
131235F3MX40-4T45.jpg (31.24 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F3MX40-4T45.jpg
图4
　　4、将材质去色 (CTRL+SHIFT+U),然后选择高斯模糊用大一点的像素来抹掉牛皮纸上面的一些细节。
131235F455O0-52196.jpg (20.4 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F455O0-52196.jpg
图5
　　5、将修改过的牛皮纸材质放在渐变的背景色上面，然后选择混合模式的叠加选项，再修改透明度为90%。
131235F4D4920-DU8.jpg (12.91 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F4D4920-DU8.jpg
图6
　　6、在一个网页设计中设计合理的用户范围是网页布局一个重要的步骤。除非另有要求，我一般都是将分辨率调整到1024×768，因此我在文档的中部将参考线设置为960px宽，两边空白处各有20px宽，这是为了以防一些元素超出之前设置的屏幕分辨率。
131235F4NX30-O058.jpg (14.66 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F4NX30-O058.jpg
图7

[1]
     
                  

         
[导读]本教程将告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。我们可以重点关注制作的步骤以及一些细节的修饰和处理。做好psd后，就为切片做好了准备。
　　7、使用圆角矩形工具画一个内容区域如所示，颜色为浅灰色（#eeeeee)，圆角半径为20px。注意在这种情况下圆角矩形并不要两边顶满，因为下面右侧还要添加一些东西。
131235F4YJ40-W550.jpg (14.44 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F4YJ40-W550.jpg
图8
　　8、双击圆角矩形图层然后添加8白色描边，宽度为8px，混合模式为叠加然后调整透明度为30%，这样就会有一个很酷的透明效果。
131235F500VZ-bI7.jpg (22.87 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F500VZ-bI7.jpg
图9
　　9、再次为这个圆角矩形添加一个内发光，白色的5像素即可，这样会让边线产生一个很细小的倾斜效果。
131235F5121T0-10M33.jpg (23 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F5121T0-10M33.jpg
图10
　　10、最后添加一个外发光，黑色的15%透明度的，于是一个淡淡的内容区的阴影就这样出现了。
131235F5234960-11KJ.jpg (30.08 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F5234960-11KJ.jpg
图11
　　11、新建一层，再画一个圆角矩形宽度一样，但这次要改改圆角半径，10px足矣。在下面给这个灰色区域添加一点点渐变让他有一种倾斜度。
131235F555IZ-125H2.jpg (11.95 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F555IZ-125H2.jpg
图12
　　12、复制一个之前的内容区域，然后用橡皮工具从中间将两侧的边线擦出一个渐变来。（注：这里最好选择一个图层蒙版然后用渐变做，橡皮的透明度不好控制。）
131235F5B2460-133O4.jpg (8.8 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F5B2460-133O4.jpg
图13
　　13、在整个边线上再用铅笔工具画1px的垂线。这里可以按住shift来保持角度和垂直。
131235F5K60F-1442Q.jpg (9.91 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F5K60F-1442Q.jpg
图14
   
[2]
   
                  

         
[导读]本教程将告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。我们可以重点关注制作的步骤以及一些细节的修饰和处理。做好psd后，就为切片做好了准备。
　　14、还是要慢慢擦出来渐变（其实这一步可以在擦边线之前做好然后再套上图层蒙版做渐变。）
131235F5T22Z-152304.jpg (8.99 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F5T22Z-152304.jpg
图15
　　15、这样一个巨大的灰色内容区就这么的呈现在眼前了，并且下部还有些渐变哦。回顾下来看看，顶端的圆角要比下面的大，边线是在中部渐变透明的。
131235F623XF-1C321.jpg (13.94 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F623XF-1C321.jpg
图16
　　16、将一个纸张的材质盖住内容区头部的一部分。可以用色相/饱和度（ctrl+U）将其调整为蓝绿色。
131235F6343360-1K2L.jpg (12.05 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F6343360-1K2L.jpg
图17
　　17、按住CTRl然后点右边图层中内容区的缩略图，可以创建一个选框，然后反选（CTRL+ALT+I）然后删除多于的部分（注：这里更推荐另一种方法，首先确定纸张层与内容层相邻并且纸张层在内容层上面，然后在纸张层上右键，创建图层蒙版，就可以出现类似的效果，后面调整起来比较方便），然后还是擦出一条渐变来。
131235F6449450-1Qb8.jpg (12.93 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235F6449450-1Qb8.jpg
图18
　　18、用铅笔工具在头部的下面画一条1px的横线。
131235FAU010-194H3.jpg (11.31 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FAU010-194H3.jpg
图19
　　19、选择内容图层然后用上面的方法建立一个选取，按住ALT键来缩小选区如上图。然后新建一个图层在这个选区内填充上白色并且改变透明度为90%这样然后略微做一下渐变，这样就在头部添加了一点高光。
131235FBH50-204910.jpg (14.67 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FBH50-204910.jpg
图20
　　20、继续用矩形选框工具在内容区域上面画一个侧边栏。依旧填充灰色背景（#eeeeee）
131235FCM620-2191P.jpg (11.82 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FCM620-2191P.jpg
图21
   
[3]
   
                  

         
[导读]本教程将告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。我们可以重点关注制作的步骤以及一些细节的修饰和处理。做好psd后，就为切片做好了准备。
　　21、添加一个透明的边框，跟上面做的方法差不多选择描边选项即可。
131235FDVE0-22S21.jpg (21.07 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FDVE0-22S21.jpg
图22
　　22、继续用外发光来添加一个浅灰色的边，调整扩展值到最大这样我们可以得到一个双边线效果。
131235FF15230-233517.jpg (21.07 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FF15230-233517.jpg
图23
　　23、再用内发光工具给侧边栏添加一个白色的边线效果，方法跟上面的一样。调整阻塞选项到最大值，可以让光出现的比较柔和。
131235FJ9E10-243927.jpg (24.79 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FJ9E10-243927.jpg
图24
　　24、最后在侧边栏上添加一个从白色到灰色的渐变来增加些细节和层次。
131235FL443F-25J46.jpg (25.03 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FL443F-25J46.jpg
图25
　　25、将侧边栏裁开，因为之前计划的是每一个菜单目录都是一个单独的区域。
131235FME040-2D641.jpg (12.38 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FME040-2D641.jpg
图26
　　26、日志区的设计方法跟前面的很类似，每一日志都需要有一个自己的封闭区域。画一个矩形来模拟这些区域。
131235FNG110-2O157.jpg (15.72 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FNG110-2O157.jpg
图27
　　27、填充上白色，然后右键点击侧边栏将他的图层样式拷贝走然后粘贴到这个日志区域图层上。（偷懒的方法一定不要忘记哦）
131235FP002Z-2V343.jpg (12.76 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FP002Z-2V343.jpg
图28
　　28、到这一步基本上框架已经搞定了，下面我们在页面上做一些文本测试来看看我们的颜色和大小有没有问题。
131235FQ121Z-2b331.jpg (15.15 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FQ121Z-2b331.jpg
图29
　　29、创建一个导航区域，注意要有渐变，做法参照头部的方法。输入导航文字。
131235FR21S0-302093.jpg (15.24 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FR21S0-302093.jpg
图30
　　30、随便扒拉一篇你要发布的日志复制过来，调整颜色和大小和行间距。标题是相当重要的元素所以必须要粗点颜色要醒目点。一些作者信息例如时间日期等到时不重要的，所以他们可以小一点颜色浅一点。
131235FS51350-31Kb.jpg (36.42 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FS51350-31Kb.jpg
图31
　　31、在内容区域底部画一个浅色矩形。
131235FU250P-325396.jpg (24.57 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FU250P-325396.jpg
图32
　　32、用一些看起来很棒而且免费的按钮来设置一些函数，添加一些次级信息例如留言数，继续阅读等。这些信息对访客来讲还是很有用的所以将他们另外隔开放到另一个地方来。
131235FV55350-33bQ.jpg (28.46 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FV55350-33bQ.jpg
图33
　　33、最后添加写其他页面原色比如订阅啦等。RSS你可以在教程很多地方找到例如a tutorial和free icon set。（国内的站酷不错）。
131235FX2T10-34L31.jpg (21.26 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FX2T10-34L31.jpg
图34
　　34、最后，一个华丽丽拥有良好的页面信息和清楚的框架结构的界面设计就这样的出来了。下文我们会讲解如何将这个设计稿转化为真正的网页。
131235FYB610-355146.jpg (23.48 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 05:02 上传

点击文件名下载附件
131235FYB610-355146.jpg
图35
     
[4]