Photoshop网页制作教程

查查 · 发表于 2007-5-6 11:11:34

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

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

x

效果图： 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117232945121.gif">步骤 1 创建 750x500px 画布，并将前景色设为白色。 创建新的图层，利用矩形选框工具创建如下选区。 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233003928.gif">步骤 2 用白色填充选区。图层 >> 图层样式 >> 投影。设置如下： 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233003279.gif">描边：大小 1像素，颜色 #939393 不透明度 44%。 步骤 3 创建新图层，再次利用矩形选框工具在画布顶端建立如下矩形选框。（注意：为了实现网页的层次感，这次的矩形边框与之前的矩形左右两边各空出2个像素） 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233005957.gif">步骤 4 为选区填充 #2061A8。 步骤 5 
图层 >> 图层样式 >> 投影。设置如下： 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233006878.gif">
 渐变叠加： 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233011297.gif">
 图案叠加： 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233012735.gif">
步骤 6 为网站添加文字LOGO 。 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233014337.gif">
 步骤 7 创建新的图层。 步骤 8 按照与步骤 3相同的方法在画布底部建立矩形。 步骤 9 填充颜色（#2061A8），并添加投影效果。 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233016976.gif">
 图层 >> 图层样式 >> 投影。
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233017580.gif">
 步骤 10 利用圆角矩形工具绘制如下形状。
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233018228.gif">
 步骤 11 图层 >> 图层样式 >> 投影。 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233020392.gif">
渐变叠加：
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233021249.gif">
 步骤 12 为导航栏添加文字。 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233024234.gif">
步骤 13 按照如上方法建立其余导航条。 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233025649.gif">
 步骤 14 现在我们开始制作内容框，利用圆角矩形绘制如下矩形框。 
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233028718.gif">
 将图层面板的填充属性设为 0%。
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233034965.gif">
 图层 >> 图层样式 >> 渐变叠加。
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233035143.gif">
 步骤 15 按照之前的方法建立另一个内容框。  
<IMG src="http://www.cgfancy.com/Article/UploadFiles/200611/20061117233041750.gif"> 
<SCRIPT language=JavaScript src="http://www.16xx8.com/bbs/10.js"></SCRIPT>

晴风 · 发表于 2007-10-8 13:43:03

这个教程好象没说完吧

癫癫不癫 · 发表于 2007-11-11 07:09:28

估计是下课时间到了！~下课休息

lqme123 · 发表于 2007-11-11 10:32:10

不错.

支持..

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

[网页图片] Photoshop网页制作教程

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

回复楼主的帖子

[网页图片] Photoshop网页制作教程

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

回复 楼主 的帖子

回复楼主的帖子