Photoshop制作漂亮的左侧导航按钮

2016-02-02 19:05 39 1 收藏

下面图老师小编要跟大家分享Photoshop制作漂亮的左侧导航按钮,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

【 tulaoshi.com - PS 】

本教程介绍非常漂亮的导航图示按钮制作方法。按钮的效果非常大气及精美,利用图示图形来制作提示效果,感觉非常的生动。
最终效果

1、首先我们在PS里新建一文件,大小为 500x500px,白色背景。

2、使用圆角矩形(半径为10px),绘制我们的质感图标的轮廓。

3、随后我们使用钢笔工具为每条边的中点增加一个矢量点,随后用直接选择工具将四条边的中点向外拖动一点距离,目的是让图形轮廓感觉更圆润。

4、为轮廓使用图层样式。

5、加上样式后的效果。

6、按ctrl+j复制图层,将复制出的图层上的图层样式全部去掉,然后按ctrl+t将复制出的图层缩小到原来的94%左右。

7、随后为复制出的图层添加如下新样式:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)

8、再次按ctrl+j复制图层,去掉其上的图层样式,随后按ctrl+t缩小到原来的93%大小,之后用直接选择工具拖动上面的矢量路径节点,使其变成如下形状:

9、随后栅格化图层(在图形上按鼠标右键选栅格化图层),并将其填充为白色:

10、从右向左制作渐变效果,并设置不透明度,使其能出现如下效果:

11、使用自定义形状工具,选中一个形状:

12、为之前的质感轮廓添加一个图形,颜色为白色:

13、现在完成了图形的制作,我们将来制作右边的文字按钮,先用圆角工具,颜色为黑色,半径为7px,制作如下区域,只需要保证区域不要超过我们的图形轮廓高度。

14、为其增加图层样式。

15、添加文字。

16、为文字增加图层样式,使文字效果与左边的图标效果相似。

17、在大标题下增加小文字,颜色为#1d70e1。

18、为小文字添加阴影样式:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)19、我们上面只是介绍了导航中的 一个按钮的做法,下图为完整版的导航按钮,这里使用的不同颜色相同色调,看上去依然十分的协调!

来源:https://www.tulaoshi.com/n/20160202/1535074.html

延伸阅读
标签: PS PS基础 PS效果
网页设计中按钮的制作非常重要,精致的按钮会给网页增色不少。下面的教程介绍一款非常不错的按钮的制作方法。制作过程比较简单:先用图形工具制作出按钮的形状,然后加上一些简单的图像样式做底色。然后再加上高光及文字等即可完成效果。 最终效果 1、打开photoshop,然后新建一个文档250*150,并填充背影:#252a38。 2...
标签: PS PS基础 PS效果
本教程介绍非常实用的导航按钮的制作方法。效果图看上去非常简单,不过还是有很多细节需要用心去处理,如果按钮的高光及倒影部分。教程只是一个提示,学会了就可以作者其它类似的效果。 最终效果 1、新建一个120 * 50的文档,背景填充颜色:#838383,选择圆角矩形工具,半径设置为10像素。然后拖曳出一个大小适当的圆角矩形,位置偏上...
标签: PS PS基础
先看效果图。 新建文档1280x1024像素,背景白色,建新层,填充黑色,添加图层样式。 效果如下。 建新层,画一个黑色圆角矩形。 添加图层样式。 效果如下。 建新层,用钢笔画出下图所示路径,转为选区填充白色,图层模式叠加,不透明度20%,填充75%。 建新层,用矩形工具做如下选区,填充0082f0,去掉选区用...
标签: PS PS基础
先看看效果图 1.填充背景为深灰色,设置前景色,新建图层1,绘制圆色矩形 2.为图层1添加图层样式(投影,内阴影,外发光,渐变叠加,描边); 3.选择图层1,使用滤镜杂色添加杂色(根据情况调整杂色的数量); 4.按CTRL键点击图层1,调出图层1的图形选区之后,新建图层2,填充任意色彩,选择矩形选框工具,按向上方向键,将选区向上移动1个像...
标签: PS PS基础 PS效果
水晶按钮的制作关键是把水晶质感渲染出来。可能勾出的图层较多,注意好每一个图层都需要用图层样式等添加光感,然后再根据光源方向设定好高光位置,这样做出的按钮不仅质感好,而且比较合逻辑。 最终效果 1、新建文档,800x600像素,背景白色,画2个矩形,分别添加样式。 2、底部矩形样式。 3、上部矩形样式。 4...

经验教程

539

收藏

45
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部