利用Photoshop制作风格化电子商务网站

查查 · 发表于 2007-5-6 11:20:21

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册

x

创建画布，背景为白色，根据需要设定画布大小，这里以 760 x 770 像素为例。
选择圆角矩形工具，圆角大小为3个像素，绘制矩形，完成网站整体布局的架构。
<IMG style="FILTER: ; WIDTH: 720px; HEIGHT: 729px" height=729 alt="" hspace=0 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163437844.gif" width=720 border=0>
为这些矩形添加图层样式。
图层 >> 图层样式 >> 投影：
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162801579.jpg" border=0>
渐变叠加： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162822836.jpg" border=0>
渐变条设置如下： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162843286.jpg" border=0>
描边：
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162852207.jpg" border=0>
我们将得到如下效果： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162902555.jpg" border=0>
 现在，我们来为这些矩形添加一些细节。
首先，按住 CTRL 键，并点击图层。
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162916433.jpg" border=0>
得到相应矩形选区。
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162926160.jpg" border=0>
创建新图层，选择椭圆选框工具，并将顶部状态栏设置为“交叉选区”。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162932879.jpg" border=0>
在如下位置绘制一个圆。
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162937824.jpg" border=0>
这是你将得到如下选区。
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162944834.jpg" border=0>
选择油漆桶工具，用白色填充选区。 图层 >> 图层样式 >> 投影。
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119162948807.jpg" border=0>
描边，这里我们将描边大小设为5像素，位置“内部”。
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163014287.jpg" border=0>
描边类型设为“渐变”，渐变条设置如下：
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163036956.jpg" border=0>
这时我们得到如下效果：
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163117532.jpg" border=0>
选择 >> 修改 >> 收缩，收缩量为5像素（同描边大小相同）。 创建新的图层并用白色填充选区，图层 >> 图层样式 >> 投影：
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163123797.JPG" border=0>
内阴影： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163140189.JPG" border=0>
斜面和浮雕： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163207227.JPG" border=0>
颜色叠加： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163236569.JPG" border=0>
描边： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163241139.JPG" border=0>
效果如下：
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163244107.jpg" border=0>
复制图层，通过改变颜色叠加和描边设置，得到如下效果：
<IMG style="FILTER: ; WIDTH: 720px; HEIGHT: 156px" height=156 alt="" hspace=0 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163247136.jpg" width=720 border=0>
添加导航按钮和导航文字。
<IMG style="FILTER: ; WIDTH: 720px; HEIGHT: 274px" height=274 alt="" hspace=0 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163440284.jpg" width=720 border=0>
将事先准备好的LOGO和素材图片添加到适当位置。  
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163318777.jpg" border=0>
最终效果如下，本教程只是起到一个抛砖引玉的左右，希望大家都能做出具有各自风格的网页。
<IMG style="FILTER: ; WIDTH: 720px; HEIGHT: 729px" height=729 alt="" hspace=0 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061119163338417.jpg" width=720 border=0> <script language="JavaScript" src="http://www.16xx8.com/bbs/10.js"></script>

鹏子 · 发表于 2008-6-23 17:19:33

讲得很仔细..我真的服了你了..确实学到了很多知识.呵呵.photoshop:0001 辛苦LZ,了.我也很辛苦的..因为是英文版的,所以我得查词典.

账号		自动登录	找回密码
密码			注册

[网页图片] 利用Photoshop制作风格化电子商务网站

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。