用PS制作风格化电子商务网站首页

摘要：在做网站前，都要先设计好内容布局，做好设计效果图，一方面方便我们按图修改，敲代码时不用考虑太多设计的问题，一方面可以准备好网站素材，方便后面切图。这篇教程将为大家介绍网页设计一个风格统一的电子商务网站首页。

效果图

第1步：创建画布，白色背景，根据需要设定画布大小。选择圆角矩形工具，圆角大小为3个像素，绘制矩形，完成网站整体布局的架构。

第2步：为这些矩形添加图层样式，设置如下。

右键图层-混合选项-投影：

渐变叠加：

渐变条设置如下：

描边：

效果如下：

第3步：制作矩形中的图标内容细节。

1）按住CTRL键，并点击图层。

得到相应矩形选区。

创建新图层，选择椭圆选框工具，并将顶部状态栏设置为“与选区交叉”。

在如下位置绘制一个圆。

这是你将得到如下选区。

选择油漆桶工具，用白色填充选区。然后添加图层样式。

投影：

描边，这里我们将描边大小设为5像素，位置“内部”。

描边类型设为“渐变”，渐变条设置如下：

这时我们得到如下效果：

2）选择-修改-收缩，收缩量为5像素（同描边大小相同）。创建新的图层并用白色填充选区，添加图层样式。

投影：

内阴影：

斜面和浮雕：

颜色叠加：

描边：

效果如下：

3）复制图层，通过改变颜色叠加和描边设置，得到如下效果：

4）添加导航按钮和导航文字。

第4步：放入素材，将需要用的LOGO和素材图片添加到适当位置，以及在适当位置添加文字内容。

完成！

结语：只要先定好一个自己想要的风格，并完成一个素材后，其他同样形状的素材只需复制即可达到风格统一的效果；不同形状的素材只要定好形状后，套用之前制作好的图层样式，同样可以制作出风格统一的图标素材来，这样整个网站的风格就可以很好的统一了。

更多相关教程：

版权说明：

本文为作者分享，翼虎网鼓励从业者分享原创内容，翼虎网不会对原创文章作任何内容编辑修改！如作者有特别标注，请按作者说明转载，如无说明，则转载此文章须经得作者同意，并请附上出处(翼虎网)及本页链接。

原文链接：http://www.yiihuu.com/twjc/29547.html

,,

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。