欢迎来到神秘园PS教程自学网,这里是Photoshop爱好者的乐园![登录][注册]

Photoshop网页效果设计之搜索按钮的制作

2014年04月07日03:55来源:互联网编辑:Dante

前面我们给大家讲了一个关于网页中搜索框的设计制作(Photoshop网页效果设计之搜索文本框),现在我们要做一个搜索按钮与之配套。效果如下:

按钮效果图

制作步骤如下:

第1步:打开Photoshop(本例使用CS5版本,不同版本操作略有不同),新建一个宽300px,高100px的白色背景画布,新建一个图层,使用矩形工具做一个长方形选区后填充一种颜色(颜色任意,后面将会在图层样式里使用渐变色覆盖);

填充一个矩形

第2步:双击矩形图层,打开图层样式。先给图层添加上渐变叠加新式,渐变颜色为下方#d4d4d4到上方#ffffff的渐变。(当然,你也可以尝试其他颜色!)

渐变叠加:

图层样式——渐变叠加

效果参考:

渐变叠加后的效果参考

第3步:设置好渐变后,我们再给其加个边框,即添加描边图层样式。大小为1像素(px),位置为内部,颜色选择#6a6a6a;

描边:

图层样式——描边

效果参考:

描边后的效果

第4步:为了让按钮具有立体感,我们再给其加上个投影,设置参考如图;并且我们还在左边框内部添加了一根白线,效果如图;

投影:

图层样式——投影

效果参考:

投影效果参考

第5步:按钮的主体部分已经做好了,之后我们再给其添加上文字即可;

添加上文字

第6步:配上之前制作的搜索框,再添加一个Logo与文字链接,一个很熟悉的网页效果就出来了!!

示例

教程由[www.Garden29.com]收集整理
ps教程自学网 ps照片 ps抠图教程 ps鼠绘教程 ps字体 ps技巧 ps入门 ps知识问答
下次找不到怎么办?★一键收藏分享★
更多
设计软件教程
PS网页设计效果图推荐>>
ps教程大全
ps教程入门
ps抠图专区
ps照片美化
关闭