photoshop设计蓝色风格系列二网页教程

photoshop设计蓝色风格效果图：

步骤：

Step1 背景

新建一个文档，如图：

视图新建参考线，垂直50px，950px。水平参考线在102px,404px,497px,832px.

设置前景色#5398B8，填充文档。滤镜杂色添加杂色，设置参数如图：

Step2: header

制作logo和其它图标时将使用到发布在Smashing杂志的Flavours 图标集，下载Nevis字体。

把Tablet图标如下图放置，选择Nevis字体然后写下一些东西，例如“portfolio”，然后如图设置：

点击“portfolio”文本层，选择混合选项。进行设置如图：

在参考线上方40px处写上文本

新建一个图层组，命名“导航”，然后选择18pt大小的Myriad Pro字体和#2a2a2a的颜色制作导航。“home”选择白色#ffffff.

复制导航层移动到原来层下方，然后反向更改文本颜色，把颜色是#ffffff改变为#2a2a2a。把颜色是#2a2a2a改变为#ffffff。然后把图层向下和向右各移动1px。然后改变不透明度40%。

新建一个图层（shift+ctrl+N）,移动到文本层下方。选择圆角矩形工具，设置半径5px前景色3487f99制作按钮。

点击按钮层设置图层混合选项，运用下面的设置

你的导航应该看起来像这个样子：

设置前景色#487f99，点击铅笔工具，设置笔刷1px，创建40px长度的垂直线。然后设置前景色#a4bfcc在刚刚直线的右边创建一样长度的直线。

Step3: lines

新建图层组，取名“直线”。像刚刚创建垂直线一样制作水平线。建议：制作直线时按住shift键。

Step4：“My Works”Block

新建一个图层组取名“我的作品”。然后从Flavours图标中选择case图标。移动在第一条参考线下的20px处。然后输入“MY WORDS”，字体设置和step2:header中“Portfolio”一样。

设置前景色#000000， 圆角矩形工具，半径5px制作一个按钮如图：

降低不透明度为20%，从Flavours 图标集中选择blue plus按钮，调整W和H大小，移动到之前制作的按钮上。设置前景色#2a2a2a，选择Myrid Pro14pt大小字体。输入“see all works”，移动位置如图所示：

点击“see all wm.tulaoshi.comorks”图层，设置混合选项。

这是运用阴影之后的效果

设置前景色#487f99，选择圆角矩形工具半径5px。制作一个大约190px的box。

选择导航图层组，点击在这个层的按钮，复制图层样式。选择先前在“my works”图层组中的box层。粘贴图层样式。