技术派社区»论坛 › 技•综合 › Photoshop › photoshop制作一款时尚简洁的蓝色网页模板 ...

发布主题

[PS教程] photoshop制作一款时尚简洁的蓝色网页模板

[复制链接]

笪茹薇 2013-12-4 21:35:59

完成图：

过程：
步骤1 背景
创建一文档，见下图：

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

设定前景色#5398B8，填充文档。滤镜>杂色>加上杂色，设定参数见下图：

步骤2: 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在刚才直线的右半新建相同长度的直线。

步骤3: lines
创建图层组，取名“直线”。像刚才新建垂直线相同做水平线。建议：做直线时按住shift键。

步骤4：“My Works”Block
创建一图层组取名“我的作品”。之后从Flavours图标中选取case图标。拖动在第一条参考线下的20px处。之后键入“MY WORDS”，字体设定与步骤2:header中“Portfolio”相同。

设定前景色#000000，圆角矩形工具，半径5px做一按钮见下图：

降低不透明度为20%，从Flavours 图标集中选取blue plus按钮，调节W与H大小，拖动到前面做的按钮上。设定前景色#2a2a2a，选取Myrid Pro14pt大小字体。键入“see all works”，拖动地方见下图：

单击“see all works”图层，设定混合选项。

这是使用阴影然后的效果

设定前景色#487f99，选取圆角矩形工具半径5px。做一大概190px的box。

选取导航图层组，单击在这个层的按钮，拷贝图层样式。选取先前在“my works”图层组中的box层。粘贴图层样式。

拷贝图层，放置它们见下图：

选择你作品中的三个照片，调节它们的大小拖动到boxes。见下图：

设定前景色#2a2a2a，选取横排文字工具，Myriad Pro字体，大小16pt。写下关于项目的简洁说明。之后在第二张照片上使用阴影选项。

拷贝描使用了阴影的说明层，拖动到其它作品的下面

创建一图层，拖动到“my works”图层组全部图层的下面。选取矩形选取工具选取在第一与第二条参考线内的所有区域。填充黑色#000000.见下图：

单击创建的图层使用渐变叠加，设定如下：

降低不透明度到30%，你把得到下方的效果

选取来自Flavours图标集中的button fast forward blue 与button rewind blue 图标。调节大小到60%，放置见下图：

步骤5:“Twitter”Block
创建一图层组命名“Twitter block”，选取twitter图标，放到第三与第四条参考线之间，之后设定前景色#ffffff，选取圆角矩形工具，半径5px，画大概750px长50px高的box。

单击“box”层，设定混合选项。

降低不透明度为20%，前景色为#245166,选取横排文字工具，Georgia字体，大小18pt，写下文本

步骤6: “Blog News” Block
创建一图层组取名“Blog news”，从Flavours图标集中选取aurora图标。放置见下图。选取横排文字工具写下“News from blog”,之后使用步骤:header的图层样式。

设定前景色#2a2a2a，选取Myriad Pro字体，大小18pt，写下博客的打字标题。使用阴影选项，像步骤4:my works中的“see all works”.

写下一点Blog的文字，运用Arial 12pt大小的字体，留右半的空间给社交媒体板块。

在Blog news图层组中创建一组“read more”。设定前景色黑色。选取圆角矩形工具，设定半径10px，画一按钮。

降低不透明度为20%，选取“check”图标，调节大小为60%拖动到按钮上。之后用Myriad Pro字体，大小14pt，写上“read more”。使用博客标题相同的图层样式。

设定前景色#487f99。选取铅笔工具，设定笔刷大小1px，画垂直线分开“Blog news”与“social media ”。之后设定前景色#a4bfcc画一样长的直线，可是朝右拖动1px。
步骤 7: “Social Media” Block
创建一图层组“Social Media”，选取coffee图标，防止在分割线右半50px处，之后用Nevis字体，大小30pt，写下“Become my friend”。使用与步骤 2: Header中 “Portfolio”文本相同的图层样式与排版。