利用Photoshop设计简洁的绿色调网页

本教程由阿呆翻译自http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-make-a-green-sleek-web-layout-in-photoshop/

在这个教程中,你将学习到如何在Photoshop中创建一个漂亮简洁的绿色基调的网页布局。

最终效果

先看看我们最终的成果,单击图片可查看完整比例的设计图。

green_and_sleek_final_result_small.jpg

设置Photoshop文档

1、在Photoshop中新建一个宽980像素,高830像素的文档。背景色为白色。

2、如果你的Photoshop界面中没有显示标尺,选择视图>标尺打开(Ctrl + R也可打开或关闭标尺)。

3、在画布上拖出两条垂直辅助线和两条水平辅助线(点击标尺后保持不放,然后拖向画布),分别放置到文档的边缘。在这些辅助线之间,我们将为内容创建背景。
Setting up the Photoshop document
创建背景

4、选择圆角矩形工具(U),设置半径为10像素,颜色为#E0E0AC,然后在整个画布上创建一个圆角矩形(从画布左上角拖至右下角)。命名图层为”bg“。

5、现在,我们打算让画布变得大一点。首先,我们将在文档的顶端腾出点空间,以放置网站的标记。点击图像>画布大小(Alt + Ctrl + C),按照下图的设定其中参数。

Green and Clean Photoshop tutorial image
6、再次选择图像>画布大小(Alt + Ctrl + C) ,按照下图进行设定。

7、单击激活图层面板中的背景图层,设置前景色为#6C821C,使用油漆桶工具(G)填充背景图层。

8、在“背景”图层之上创建一个新图层,命名为”渐变”。

9、选择渐变工具,在“渐变”图层上从上至下使用由白到黑的渐变。

10、设置“渐变”图层的模式为叠加,不透明度为10%。

11、确定当前图层为”渐变” ,选取图层>图层蒙版>显示全部。

12、选择渐变工具,从文档底部从下到上进行由黑到透明的填充。

13、在”渐变”图层上单击右键,选择“转换为智能对象”。

14、执行“滤镜>杂色>添加杂色”操作,使用如下参数(数量为1.8%,平均分布)。

15、新建图层,选择画笔工具,设置颜色为白色,主直径为300像素,在画布的上部创建一条白线。

16、将刚才的图层命名为“高光”,设置不透明度为50%。

17、在“bg”图层下新建一图层,按“D”键重置前景色为黑色,背景色为白色,执行“滤镜>渲染>云层”。

18、右键单击该图层,选择“转换为智能对象”,并将图层命名为“纹理”。

19、确保“纹理”图层已被选择,执行“滤镜>模糊>动态模糊”。其中角度为90,距离为549像素。

20、执行“滤镜>锐化>锐化”。

21、为“纹理”图层增加图层蒙版(图层>图层蒙版>显示全部)。

22、选择渐变工具,从文档底部从下到上进行由黑到透明的填充。

23、将“纹理”图层的模式设置为重叠,不透明度为40%。

设置文档内容的背景

24、双击“bg”图层,打开图层样式窗口,勾选外发光,设置混合模式为“正片叠底”、不透明度为10%,发光颜色为#33302e,图素大小为12像素,其余为默认值。

25、创建新图层,命名为“阴影”。设置前景色为#2A2009,选择铅笔工具,设置主直径为25像素,在圆角矩形的底部创建一个圆点。

26、右键单击“阴影”图层,选择“转换为智能对象”。

27、执行“编辑>自由变形”(Ctrl + T),将圆点拉伸为至圆角矩形宽度类似的位置。

28、执行“滤镜>模糊>高斯模糊”,半径为7.6像素。

29、设置“阴影”图层的模式为“正片叠底”,不透明度为30%,并置于“bg”图层之下。

创建导航条

30、现在,我们开始制作导航条。选择矩形工具,颜色设置为#D8D8A5。

31、在前面创建的大圆角矩形之上新建一高度为60像素的矩形,并命名图层为“导航条”。

提示:按F8打开信息面板以便查看高度等信息。

32、在图层面板中双击“导航条”图层,打开图形样式窗口。设置参数如下图。

33、你可能注意到了,添加了导航条之后,大圆角矩形的顶部已不再圆滑。为了纠正这个问题,我们即将使用剪贴蒙版。右键单击“导航条”图层,选择“创建剪贴图层”。

34、现在,我们将创建当前页面按钮的背景。选择矩形工具,设定颜色为#A6A43F,生成一个高60像素的小矩形。

35、设定图层的名称为“当前页面按钮”,不透明度为15%。

36、右键单击“当前页面按钮”图层,选择“创建剪贴蒙版”。

37、按住Ctrl键,在图层面板上选择最上面的四个图层,按Ctrl + G将其命名为“背景和导航条”。

38、按T键选择文字工具,为导航条增加文字内容,颜色设定为#A6A43F。字体按照你的喜好自由设定。

定义“首页特写”区域图案

39、现在,我们将创建一个图案。新建一个5px*5px的文档,背景为透明。

40、设定前景色为#2A2009,选择铅笔工具,将其主直径设为1像素,在文档中央创建一个正方形。

41、然后执行“编辑>定义图案”,注意命名尽可能的容易记忆和识别。然后就可以关闭这个文档了。

创建“首页特写”区域

42、选择矩形工具,创建一高度为330像素的矩形,颜色随意。

43、在刚才生成的图层上双击,打开图层样式窗口,按照下图设定参数。(将高级混合中的不透明度设为0,再选择之前定义的图案进行叠加,不透明度设为5%。)

44、将刚才的图层命名为“图案”。

45、选择圆角矩形工具,半径设为8像素,颜色设定为#A6A43F,创建一高度为240像素、宽度为940像素的圆角矩形。

46、命名图层为“特写背景”,将不透明度设定为50%。

47、选择矩形工具,颜色设定为#A6A43F,创建一宽610像素高220像素的矩形作为特写图片的背景。命名当前图层为“图片背景”。

48、使用移动工具插入你中意的图片。

49、将图片放置在刚才创建的矩形中,右键单击图片图层,选择“创建剪贴蒙版”,然后命名为“图片”。

50、选择文字工具(T),在特写区域的右侧增加一些文字。文字大小、颜色以及字体尽量接近下图设定。将这些文字图层组合成“特写区文字”组。

创建回应按钮

51、我们现在开始制作位于特写区下部的两个按钮。选择圆角矩形工具,设定半径为8像素,颜色为A6A42F,创建一个小圆角矩形,命名图层为“按钮一”。

52、我们想把按钮顶部的圆角弄直,为了达到这个目的:

  1. 确保按钮图层为当前图层。
  2. 选择“路径选择工具”,点击按钮,每个圆角上出现了两个锚点。
  3. 选择“转换点工具”,依次点击按钮上方的四个锚点。
  4. 选择“直接选择工具”,按住Shift键,挪动圆角锚点,形成直角。

53、设定“按钮一”图层的不透明度为30%。

54、然后使用文字工具增加内容,颜色为#EAEAB7。

55、你还可以增加图标。我使用的是Function网站发布的免费图标。

56、将文字、图标以及按钮图层放在一个名为“按钮一”的组中。

57、按照上述步骤,使用不同文字和图标,生成另一个按钮。

58、为了有效组织文件,将有关特写的图层都组合在一起,并命名为“首页特写”。

创建3D丝绸带

59、选择“矩形工具”,创建一高度为130像素的矩形,颜色为#A6A43F,命名图层为“丝带背景”。

60、选择“圆角矩形工具”,设定半径为10px,在刚才创建的丝带背景的左侧创建一圆角矩形。你可以拖出一些辅助线以便提供一些便利。

61、点击激活刚才创建的圆角矩形的矢量蒙版,然后选择“圆角矩形工具”,在选项栏中选择“从形状区域减去”,在圆角矩形左上方新建一圆角矩形。

62、创建一新图层,右键单击,选择“创建剪贴蒙版”。

63、然后选择“渐变”工具,从左到右填充由白色至透明色的渐变。可参考下图。

64、设定图层模式为“叠加”,不透明度为30%,命名为“高光”。

65、选择“圆角矩形工具”,设定颜色为#878533,在“丝带背景”图层之上创建一圆角矩形。

66、然后选择矩形工具,在选项工具条中选择“从形状区域减去”,在我们不需要的绿色圆角矩形区域创建矩形。

67、然后双击图层打开图层样式窗口,设定内阴影,不透明度设为10%,角度120度,距离4像素,大小5像素,混合模式为“正片叠底”,其余为默认值。

68、在丝带右侧重复上述步骤。

69、将刚才和丝带有关的图层组合成“丝带”组。

70、在“丝带背景”图层下创建一新图层,利用前面叙述的方法生成阴影。

71、选择“圆角矩形工具”,半径为8像素,颜色为#E1E0C1,创建四个220px*110px的圆角矩形。

72、将这四个图层的不透明度调为50%,并组成“图片”组。

73、选择“横排文字工具”,在文档底部增加一些文字。你还可以参考之前的做法添加一些图标。

74、使用文字工具,颜色为#E0E0A,在文档顶端创建站点名称。

75、双击图层,设定图层样式,添加渐变叠加,其中模式为叠加,不透明度15%,其余为默认值。

77、最后,在丝带中将放入四张图片,基本完成页面设计。

恭喜!我们终于完成了这个教程。

译后记

————————
译者的话:经过1个下午的翻译,这篇教程终于完工。最大的感受就是教程制作是一件耗时费力的工作,高手能把自己的一些工作流程做成教程分享给大家,实在是一个高尚的行为,向作者致敬!

“利用Photoshop设计简洁的绿色调网页”的95个回复

  1. 如果我有作者一半的文笔,我就可以用这本小说中的人物写出至少5本小说,而且都是用从本书中读出的情节,不用自己演绎加上别的情节,以前经常上这里找资料www.22ok.cn全免费的,我挺喜欢

  2. 年年圆满如意,月月事事顺心,日日喜悦无忧,时时高兴欢喜,刻刻充满朝气,月圆人圆花好,事顺业顺家兴!

  3. 安玉良严格的说不是骗子,因为他没有骗,他只是卖给你一堆垃圾而已,仅此而已!
    此人日复一日的发送着大量垃圾邮件,仅仅为了那千分之一的回访,尊严什么的都可以不要了.
    自己站还挂着GGAD,您的教程要真赚钱,还需要挂GG?
    您要是真的忍不住想要骗点钱花,那么请再次提高骗术.

  4. 博客不错,收藏了几篇。支持下。我还会继续关注博主的…..壬辰年(龙)二月初一 2012-2-22

  5. 博主博客的文章确实很精彩啊,留个脚印下来慢慢阅读,….壬辰年(龙)三月初十 2012-3-31

  6. 需要一百万个喷水带,可绕地球十圈的那种,霍建华需要每厘米三个。话说,我给一叨和二叨出给题吧:求霍建华的身高。一叨,二叨你们算得出来么

  7. 需要一百万个喷水带,可绕地球十圈的那种,霍建华需要每厘米三个。话说,我给一叨和二叨出给题吧:求霍建华的身高。一叨,二叨你们算得出来么

评论已关闭。