如何用photoshop设计绿色时尚的Web版面

在这个网页设计教程里，您将学习到如何在photoshop里设计一个漂亮绿色时尚的网站。您将了解到流行的设计技法，如建立一个三维色带和具有专业外观的颜色渐变。

Final Result 最终效果

下面的效果正是我们要一起完成的。不要忘记点击图片查看网页的完整全尺寸版本。

设置Photoshop的文件

1、在Photoshop 中创建一个新文件，文件>新建（按Ctrl + N的） ，大小为980px的830px 。

2、如果您没有看到文件界面边儿上标尺，可以选择视图>标尺（按Ctrl + R键切换标尺和关闭） 。

3、拖出两个纵向参考线和两个横向参考线（单击并按住标尺，然后拖动到画板） ，使他们在您画布的边缘。这些参考线的中间，我们将为页面内容添加背景。

创建布局的背景

4、新建图层为“bg”， 选择圆角矩形工具（ U） ，设置半径为10px和颜色#E0E0AC ，在整个画面创建一个圆角矩形（从左上角开始开始拖动，到底部的右下角）。

5、现在，我们要作更大的版面。首先，我们在文件的顶部留一些空间，以便我们可以把标志放在那。图像>画布大小（按Alt + Ctrl + C ）使用如下的设置。

6、再次选择图像>画布大小（按Alt + Ctrl + C ），使用的设置如下。

7、点击图层面板的背景层的激活它，设置前景颜色为#6C821C ，使用油漆桶工具（ g ）填充。

8、创建一个新的图层在背景层上方，并将其命名为“渐变” 。

9、选择渐变工具（ G ），在“渐变”层中，从文件顶部到底部拖出一个由白到黑洞渐变。

10、设置的“渐变”图层的混合模式的为叠加 ，不透明度为10 ％ 。

11、选择“渐变”图层，图层 > 图层蒙版 > 显示全部。

12 、选择渐变工具（ G ）和从文件底部到顶部拖拽出一个从黑色到透明的渐变。看看下面的图片，以供参考。

13 、右键单击“渐变”层，然后选择转换为智能对象。

14 、滤镜 >  杂色 > 添加杂色，使用下面图片的设置。

15、创建一个新层“highlight”，选择画笔工具（ B组） ，选择一个白色的软刷，设置直径300px ，在画板顶部画一个白线。

16、设置的不透明度为50%。

17、创建一个新层在“bg”层的下方，击中的D键来重置您的前景颜色为黑色和背景颜色为白色，然后转到过滤 > 渲染 > 云彩。

18、右键单击该层，并选择转换为智能对象，然后将其命名为“texture” 。

19、选择“纹理”层，选择滤镜 > 模糊 > 动感模糊，设置如下。

20、滤镜 > 锐化 > 锐化。

21、为“texture”层添加蒙版（图层“图层蒙版”显示所有） 。

22、选择渐变工具（ G ），从文件底部到顶部拖拽一个由黑到透明的渐变。

23、设置的图层混合模式为“叠加”，不透明度40% 。

设置内容的背景

24、双击“bg”层，打开图层样式窗口的设置，设置外发光图层样式如下。

25、创建一个新层，设置前景颜色为#2A2009 ，选择画笔工具（ b ）从工具面板中，选择一个直径为25px的硬画笔 ，最后，创建一个圆圈在圆角矩形的底部。

26、右键单击该层，并选择转换为智能对象。

27、编辑 > 自由变换（ Ctrl + T ），伸展圆圈，如下。

28、滤镜 > 模糊 > 高斯模糊,设置如下。

29、设置这一层的混合模式为“整片叠底”，不透明度为30%。最后，命名此层的为“shadow” ，并把它拖“bg”层的下面。

Creating the navigation bar 创建导航栏

30、现在，我们要创建的导航栏。选择矩形工具（ u ）和设置颜色#D8D8A5 。 

31、建立新层，创建一个高度60px的矩形的在大圆角矩形的顶部，并命名此层为“navigation bar” 。

注：打开信息面板（ F8键） ，这样你创建矩形的时候就可以看到它的高度。

32 Double-click on the "navigation bar" layer to open the Layer Style window and use the settings from the following image.

32、双击“navigation bar”层，打开图层样式窗口，选择斜面浮雕和渐变叠加设置如下。

33、您可能注意到，大圆角矩形顶部因为导航栏而没有了圆角。要纠正它，我们要使用裁剪面具。右键单击“navigation bar”层，然后选择“创建裁贴蒙版”。

34、现在我们要创建一个当前页按钮的背景。建一新层，选择矩形工具（ ü ） ，设置颜色为#A6A43F ，并创建一个小矩形的高度60px 。

35、设置的不透明性度15% ，并将其命名为“current page button”。 

36、然后右键单击在此层，并选择创建裁剪面具。

37、选择第一个层，按住Ctrl键，依次点击图层面板的下面三个层，然后按Ctrl + G将编成一组。命名组为“bg & navigation bar” 。

38、选择文字工具（ T ）和为您的导航菜单添加文字项目，使用颜色#A6A43F 。我在这里使用的字体是Avenir LT 65 中等，如果您没有这个字型，可使用任何其他的你想要的字体。（中文的还是选择“宋体”或“黑体”）

为我们的“特色项目”区定义一个图案

39、现在，我们要创造一种图案。创建一个新的Photoshop文件，文件>新建（按Ctrl + n ），尺寸5px的5px ，为透明背景。

40、设置前景颜色为#2A2009 ，从工具面板选择铅笔工具（ b ），选择一个直径1px的矩形刷，并在画板中创建一个矩形。

41、编辑 > 定义图案，给您的图案起一个令人难忘的名字，然后单击确定。您现在可以关闭该文件。

创建“特色项目”区

42、选择矩形工具（ u ），选择“形状图层”，建立一个高度330px的长方形，可以使用任何你想要的颜色。

43、双击您在前面的步骤中创建的矩形，打开图层样式窗口的设置如下。

44、命名此层为“pattern”

45、选择圆角矩形工具（ ü ） ，设置半径为8px ，设置颜色为#A6A43F ，并创建一个宽度为940px和高度为240px的圆角矩形。

46、设置的不透明性这层至50% ，并将其命名为“featured project bg” 。

47、选择矩形工具（ ü ） ，设置颜色为#A6A43F，并创建一个尺寸为610px的220px的矩形 。这是精选项目的背景。命名此层“image bg ”。

48、使用移动工具（V）插入您想要的任何图像文件到您的设计中 （我用的屏幕截图Envato网站） 。 

49、把图片层放在你上一步中建立的“image bg”层的上方，右键单击图片层，选择创建裁剪面具。命名此层为“image” 。

50、选择文字工具（ T ），精选部分右侧添加一些文字。在下面的图中，我写了我的文字的字体的名称，颜色和大小。这些文字层编组取名为“text” 。

创建鼓动性按钮

 51、我们要在精选项目部分的底部建立两个按钮。选择圆角矩形工具（ ü ） ，设置半径为8px和颜色#A6A42F ，创造一个小圆角矩形。命名此层“button 1” 。

52、我们希望按钮顶端的角是直的。要做到这一点：

    1 。确保形状图层“按钮1 ”层的被选中（如果不是的话，在图层调板选中它） 。
    2 。选择路径选择工具（ A ）和点击路径，你看到按钮周围的路径，现在你应该看到每一个角都有两个定位点。
    3 。选择转换点工具（它在钢笔工具的里面） ，然后点击按钮上方的四个定位点。
    4 。再次选择直接选择工具（A）按住Shift键并创建直角。

53、设置“button 1”的不透明度为30%。

54、使用的文字工具（ T ）添加一些文本，颜色#EAEAB7 。

55、您还可以添加一个图标。

56、按住Ctrl键并单击图层面板的文字层，图标层，以及“button 1”层，将其编组，然后将其命名为组“button 1 ” 。

57、同上述步骤，使用不同的图标和文字，创建其他按钮。

58 、保持我们的Photoshop文件的组织性，选择精选项目下面的图片及所有组，和成一个组，命名为“featured project” 。

创建三维带

59、选择矩形工具（ u ），使用颜色#A6A43F，建立一个高度130px的长方形的 。命名此层“ribbon background” 。

60、选择圆角矩形工具（ ü ） ，设置半径为10px和创建一个圆角矩形在你上一步创建大矩形的左侧。您还可以拖动一些参考线的在画布上，以帮助您在以下步骤中定位。

61、选中您已经在上一步创建的形状图层的圆角矩形，然后选择圆角矩形工具（ ü ） ，从按钮图示中选择“从形状领域减去”，在上方创建一个圆角矩形。看看以下的图片，以供参考。

62、创建一个新层，右键单击它并选择创建裁剪面具。

63、然后选择渐变工具（ G ），像下面图片看到的那样，拖出一个白色到透明的渐变。

64、设置这一层混合模式为叠加，不透明度30 %，并将其命名为“highlight” 。
65、选择圆角矩形工具（ ü ） ，设置颜色为#878533 ，并创建一个高于“带背景”层的圆角矩形。
66、选择矩形工具（ ü ） ，点击选项栏中的“从形状区域减去”，并建立一个矩形的绿色圆角矩形隐藏我们并不需要的领域。
67、然后双击在此层，打开图层样式窗口，内阴影设置如下。

68、重复上述步骤，但是这一次是在右侧。

69、这一部分所有的层编成一组，并命名为“ribbon” 。

70、创建一个新层在“ribbon background”层的下方，制作阴影，和上面讲的做底部的阴影的方法一样，根据“制作导航条和内容背景。”的下方。

71、选择圆角矩形工具（ ü ） ，设置半径为8px ，颜色为# E1E0C1 ，并创造四个220px ×110px的圆形矩形 。

72、设置这些层的不透明度为50%，将他们全部选中Ctrl + G编组，命名为"images" 。

73、选择文字工具（ T ），在页面下方添加一些文字。您也可以使用一些图示功能图标设置功能，一如我们的鼓动性按钮。

74、使用文字工具（ T ）及颜色# E0E0AC写下站点的名称，在文件的顶部

75、双击这一层的设置渐变叠加如下。

76、再次使用文字工具（ T ）写标语。

77、所有的东西都完成后，您可以添加4个图像文件，将它们放在你的色带上。

恭喜，我们就大功告成了！

如果您跟着教程做的，你应该有所示的大致相同的图。点击图片，查看完整尺寸。