摘要：在做网站前，都要先设计好内容布局，做好设计效果图，一方面方便我们按图修改，敲代码时不用考虑太多设计的问题，一方面可以准备好网站素材，方便后面切图。这篇教程将为大家介绍网页设计一个风格统一的电子商务网站首页。
效果图
第1步：创建画布，白色背景，根据需要设定画布大小。选择圆角矩形工具，圆角大小为3个像素，绘制矩形，完成网站整体布局的架构。
第2步：为这些矩形添加图层样式，设置如下。
右键图层-混合选项-投影：
渐变叠加：
渐变条设置如下：
描边：
效果如下：
第3步：制作矩形中的图标内容细节。
1）按住CTRL键，并点击图层。
得到相应矩形选区。
创建新图层，选择椭圆选框工具，并将顶部状态栏设置为“与选区交叉”。
在如下位置绘制一个圆。
这是你将得到如下选区。
选择油漆桶工具，用白色填充选区。然后添加图层样式。
投影：
描边，这里我们将描边大小设为5像素，位置“内部”。
描边类型设为“渐变”，渐变条设置如下：
这时我们得到如下效果：
2）选择-修改-收缩，收缩量为5像素（同描边大小相同）。创建新的图层并用白色填充选区，添加图层样式。
投影：
内阴影：
斜面和浮雕：
颜色叠加：
描边：
效果如下：
3）复制图层，通过改变颜色叠加和描边设置，得到如下效果：
4）添加导航按钮和导航文字。
第4步：放入素材，将需要用的LOGO和素材图片添加到适当位置，以及在适当位置添加文字内容。
完成！
结语：只要先定好一个自己想要的风格，并完成一个素材后，其他同样形状的素材只需复制即可达到风格统一的效果；不同形状的素材只要定好形状后，套用之前制作好的图层样式，同样可以制作出风格统一的图标素材来，这样整个网站的风格就可以很好的统一了。
更多相关教程：
版权说明：
本文为作者分享，翼虎网鼓励从业者分享原创内容，翼虎网不会对原创文章作任何内容编辑修改！如作者有特别标注，请按作者说明转载，如无说明，则转载此文章须经得作者同意，并请附上出处(翼虎网)及本页链接。
原文链接：http://www.yiihuu.com/twjc/29547.html
,photoshop网页设计,PS图像设计
