Photoshop制作一个精细的导航按钮

2016-02-02 15:26 33 1 收藏

每个人都希望每天都是开心的，不要因为一些琐事扰乱了心情，闲暇的时间怎么打发，关注图老师可以让你学习更多的好东西，下面为大家推荐Photoshop制作一个精细的导航按钮，赶紧看过来吧！

【 tulaoshi.com - PS 】

网页设计中按钮的制作非常重要，精致的按钮会给网页增色不少。下面的教程介绍一款非常不错的按钮的制作方法。制作过程比较简单：先用图形工具制作出按钮的形状，然后加上一些简单的图像样式做底色。然后再加上高光及文字等即可完成效果。最终效果

1、打开photoshop，然后新建一个文档250*150，并填充背影:#252a38。

2、在工具箱上选择椭圆图标并设置如图。

3、新建一个图层，然后填充一个颜色。

4、在调色板上设置如下。

5、使用渐变拉出线性渐变，渐变效果如下。

6、双击图层，打开图层样式，给图层添加阴影和描边，参数及效果如下图。

7、在工具箱上选择加深和减淡工具，设置如图。

8、然后在图所标识的地方，涂沫如下。

9、选择椭圆选区，作出效果如下。

10、添加渐变，设置如图，从上而下线性渐变。

11、按ctrl+D取消选区，并更改图层的不透明度：40%,，混合模式为“叠加”。

12、现在使用文字工具，添加文字并设置图层样式，参数及效果如下图。

13、添加下面的文字，效果如下。

14、在文字前面加上自己喜爱的图标，按ctrl+U调整色相/饱和度，设置如下，再把图层混合模式改为“叠加”，完成最终效果。

其它颜色的按钮制作方法相同。

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

上一篇： Photoshop制作简单的蓝色导航按钮
下一篇： Photoshop制作漂亮的绿色水晶导航按钮

看过《Photoshop制作一个精细的导航按钮》的人还看了以下文章更多>>

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

标签： PS PS基础 PS效果

本教程介绍非常漂亮的导航图示按钮制作方法。按钮的效果非常大气及精美，利用图示图形来制作提示效果，感觉非常的生动。最终效果 1、首先我们在PS里新建一文件，大小为 500x500px，白色背景。 2、使用圆角矩形（半径为10px），绘制我们的质感图标的轮廓。 3、随后我们使用钢笔工具为每条边的中点增加一个矢量点，随后用直接...

Photoshop快速制作透明的导航按钮教程

标签： PS PS基础 ps平面设计教程 ps去水印教程

来源：站酷作者：邵飞Design 透明物体是通过背景进行参照，体现出质感。而本例里是讲解白色透明背景，如果背景太亮，会导致对比不明显。最终效果 1、打开下图所示的背景素材，选择菜单：滤镜模糊高斯模糊，数值稍微大一点，效果如下图。 2、把前景色设置为绿色，用圆角矩形工具拉一个合适的圆角矩形，然后选择钢笔工具，在属性栏...

Photoshop制作漂亮的绿色水晶导航按钮

标签： PS PS基础 PS效果

按钮是网页中不可缺少的部分，好的按钮可以给网页增色不少。下面的教程介绍水晶风格的导航按钮制作。制作的时候先制作按钮的一部分，然后再复制组成导航栏。最终效果 1、新建文件，大小500x 200px ，选择渐变工具(G)，(径向渐变)从#363636到#252525。最左边拖动到右下角。 2、新建层，选择选区工具(M)，固定大小为100 x 40px角...

Photoshop制作透明大气的导航按钮

标签： PS PS基础

透明物体是通过背景进行参照，体现出质感。而本例里是讲解白色透明背景，如果背景太亮，会导致对比不明显。最终效果 1、打开下图所示的背景素材，选择菜单：滤镜模糊高斯模糊，数值稍微大一点，效果如下图。 2、把前景色设置为绿色，用圆角矩形工具拉一个合适的圆角矩形，然后选择钢笔工具，在属性栏选择合并形状，勾出底...

Photoshop制作质感的斜纹网页导航按钮

标签： PS PS基础

效果图：大家好，下面由我来开始教如何做上图效果的简单按钮： 1.首先打开photoshop软件，Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件： ①.我们先在图层面板新建一个新的图层，然后把背景图层删除(可按del键快捷键) ②.接着在导航器把界面放到最大可按ctrl+"+" 快捷键，然后选择矩形选框工具，再选择上面的添加到选...

查看更多精彩>>