当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop教程:绘制仿真塑料网页导航

Photoshop
Photoshop把制作好的平面图转换为网页HTML
Photoshop简单利用填充工具制作透明水印文字
Photoshop简单模拟电流击穿文字特效
PS照片教程:好看的黑白漫画网点特效图片
Photoshop打造耀眼的星光文字特效
PS调色教程:漂亮的徐若宣单色视觉海报效果
Photoshop教程:快速模拟普普风特效照片
Photoshop批处理制作照片蒙太奇效果
PS教程:周围镶满钻石金光闪闪文字特效
PS图片教程:制作背景黑白人物彩色的照片
Photoshop教程:打造锈泽金属文字特效
Photoshop照片教程:制作古典风景人物
PS照片教程:去除美眉皮肤上沾满的沙子
PS合成教程:透出光线的森林的绿色小精灵
Photoshop图片教程:柔和的梦幻紫红色调照片
PS基础教程:运用广色域与窄色域修补分离色阶
MAC系统下Photoshop打印网页点阵字形
Photoshop教程:惊人的求助创意超现实场景(2)
Photoshop支持RAW格式:Adobe DNG Converter
photoshop编辑ico文件:ICOFormat

Photoshop教程:绘制仿真塑料网页导航


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 154 ::
收藏到网摘: n/a

先看看效果吧!:)

 
 

第一步:新建文件800x259px,选择渐变(快捷键G)背景色#8caab8 ,前景颜色#e1e8eb
 

 
 

第二步:选择圆角矩形,大小为763x80px,颜色为#7fa1b3,然后选择图层样式>内阴影内阴影颜色#7dc8e8,如图所示:


 

第三步:在圆角矩形下面新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),填充颜色#86a6b5,取消选区(快捷键ctrl+D),选择滤镜>模糊>高斯模糊(值为1.8px),然后选择滤镜>模糊>动感模糊(值为90度,41px),再用高斯模糊(值为1.8px),设置该层的不透明度为85%。效果如图所示:
 

 
 

第四步:在圆角矩形下面新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),填充颜色为#678a9f,取消选区(快捷键ctrl+D),选择滤镜>模糊>高斯模糊(值为4.5px)效果如图:
 

 
 

第五步:在圆形矩形下面新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),向下移动10px,选择渐变工具(快捷键G),从透明到#6d838f,从左下角中步右下角拉渐变,如图箭头所示:
 

 
 

第六步:取消选择(快捷键ctrl+D),选择滤镜>模糊>高斯模糊(值为3.6px)。
 

 

第七步:在最上方新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),向下移动1px,选择渐变工具(快捷键G)从#92c2da到透明,从上到下10px左右高度内拉渐变,参考图:
 

 
 

第八步:新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),向上移动40px,选择渐变工具(快捷键G),从#bcd2db到透明,取消选区(快捷键ctrl+D)然后选择滤镜模糊高斯模糊(值为3.6),参考图:
 

 
 

第九步:新建层,使用45px软刷,颜色为#b8c9d1,然后选择滤镜>模糊>高斯模糊(值为4px),设置不透明度为50%,如图所示:
 

 
 

第十步:新建层,选择80px软刷,颜色为#d3e7f1,给导航增加反光效果,如图所示:

 

第十一步:新建层,载入圆角矩形选区(按ctrl+鼠标点击图层)向下移动1px,选择渐变(快捷键G),从#fbfcfd到透明(径向),取消选区(ctrl+D),选择 >滤镜 >模糊 >高斯模糊(值为3.0),用软刷在右上角增加反光,如图所示:
 

  

第十二步:输入自己喜欢的文字,选择图层样式>投影>外发光如图所示:
 

  
 

第十三步:输入第二种文字,设置图层样式>外发光>描边,设置如图:
 

 
 

第十四步:输入第三种文字,设置图层样式>外发光,如图所示:
 

 
 

看下最终效果吧!