当前位置:首页>ps实例教程>ps网页设计>网页图片>教程内容

网页设计实例:女性购物网站导航条制作

来源:不详 作者:佚名 学习:639人次
网页设计实例:女性购物网站导航条制作

这一个商品类网站的教程,发给大家一起学习。注:学习本教程请用PSCS2。

效果图:

按此在新窗口浏览图片

1.新建一文档,宽度自己可以选择,我设为500*110大小。建立一个和画布一样大小的图层,用纯色填充背景

按此在新窗口浏览图片

2.用矩形工具绘制一个矩形

按此在新窗口浏览图片

3.选择上面的添加形状按钮,用椭圆形工具建立一个椭圆形.

按此在新窗口浏览图片

按此在新窗口浏览图片

4.用矩形工具建立一个垂直的比较窄的矩形

按此在新窗口浏览图片

5.按Ctrl J 和Ctrl T键向又移动几个像素.重复按Ctrl J 和 Ctrl T键得到如图所示的图形.(注:这里按Ctrl J的意思是复制图层,这里的Ctrl T只是代替了移动键“V”键)

按此在新窗口浏览图片

6.选择并合并这些窄的图层.命名为“line”把图层样式改为overlay.中文意思“叠加”

按此在新窗口浏览图片

7.Ctrl 单击 

按此在新窗口浏览图片

8.把该图层把透明度调为20%

按此在新窗口浏览图片

9.用自定义图形 画一个方框.

按此在新窗口浏览图片

注:如果你的自定义图形中没有这个图形,可以通过以下方法加入。

按此在新窗口浏览图片

按Ctrl T.又击选择歪曲(英文为warp).右击选择弓形设置如图所示的参数

按此在新窗口浏览图片

按此在新窗口浏览图片

复制图层,按Press Ctrl T.右击选择垂直翻转,变成如图所示的形状

按此在新窗口浏览图片

按上面的方法做你需要的按钮

按此在新窗口浏览图片

把要链接的名字打在按钮上

按此在新窗口浏览图片

右击文本层,选择弓行文本,设置如下图所示参数:

按此在新窗口浏览图片

按此在新窗口浏览图片

用同样的方法在其他的按钮上写上相应的文字,调节文本的弯曲度和按纽的弯曲度相同

按此在新窗口浏览图片

在槽部和顶部插入我们要的文字或图片

按此在新窗口浏览图片

还是选用自定义图形建立一个大的正方框旋转45°

按此在新窗口浏览图片

把图层模式改为overlay降低透明度为30.

按此在新窗口浏览图片

把图层复制两次,如图把图层按比例缩小

按此在新窗口浏览图片

插入一幅漂亮的图片或者是公司的产品

按此在新窗口浏览图片

在右侧底部插入公司的logo

按此在新窗口浏览图片



学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
天际2007-08-23 11:17
不错,很不错,谢谢楼主的分享!!!

关注大神微博加入>>

网友求助,请回答!