Photoshop教程:设计制作橙色网页导航条(3)

admin 1 0
作者:小鱼   出处:UCD博客

先看下效果吧 :)

Photoshop教程:设计制作橙色网页导航条(3)-第1张图片-快备云

第1步:新建文件,大小400 x 400px,背景为黑色。

Photoshop教程:设计制作橙色网页导航条(3)-第2张图片-快备云

第2步:选择圆角矩形工具(U)(半径为10px)

Photoshop教程:设计制作橙色网页导航条(3)-第3张图片-快备云


第3步:选择图层样式 >>颜色叠加 >>描边

Photoshop教程:设计制作橙色网页导航条(3)-第4张图片-快备云
 

Photoshop教程:设计制作橙色网页导航条(3)-第5张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第6张图片-快备云


第5步:使用矩形工具(U)创建一个矩形,选择图层样式 >>投影 >>渐变

Photoshop教程:设计制作橙色网页导航条(3)-第7张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第8张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第9张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第10张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第11张图片-快备云

第7步:新建层,选择钢笔工具(P),载入选区(ctrl+Enter)填充颜色,选择图层样式 >>渐变叠加

Photoshop教程:设计制作橙色网页导航条(3)-第12张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第13张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第14张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第15张图片-快备云
 


第8步:选择文本工具(T),输入标题文字,选择图层样式 >>渐变叠加

Photoshop教程:设计制作橙色网页导航条(3)-第16张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第17张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第18张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第19张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第20张图片-快备云

Photoshop教程:设计制作橙色网页导航条(3)-第21张图片-快备云

第9步:选择文本工具(T),输入文字,颜色为白色
 

Photoshop教程:设计制作橙色网页导航条(3)-第22张图片-快备云

小鱼已经完成PsP制作橙色盒子导航,您呢(*^__^*) 嘻嘻……



标签: 导航 网页 橙色 教程 设计制作 Photoshop

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~