PS按钮制作高级教程之制作左侧导航按钮（共9篇）由网友“李进步”投稿提供，下面是小编给大家整理后的PS按钮制作高级教程之制作左侧导航按钮，欢迎大家借鉴与参考，希望对大家有所帮助。
篇1：PS按钮制作高级教程之制作左侧导航按钮
本教程介绍非常漂亮的导航图示按钮制作方法，按钮的效果非常大气及精美，利用图示图形来制作提示效果，感觉非常的生动。
最终效果
1、首先我们在PS里新建一文件，大小为 500x500px，白色背景。
2、使用圆角矩形（半径为10px），绘制我们的质感图标的轮廓。
3、随后我们使用钢笔工具为每条边的中点增加一个矢量点，随后用直接选择工具将四条边的中点向外拖动一点距离，目的是让图形轮廓感觉更圆润。
4、为轮廓使用图层样式。
5、加上样式后的效果，
6、按ctrl+j复制图层，将复制出的图层上的图层样式全部去掉，然后按ctrl+t将复制出的图层缩小到原来的94%左右。
7、随后为复制出的图层添加如下新样式：
8、再次按ctrl+j复制图层，去掉其上的图层样式，随后按ctrl+t缩小到原来的93%大小，之后用直接选择工具拖动上面的矢量路径节点，使其变成如下形状：
9、随后栅格化图层（在图形上按鼠标右键选栅格化图层），并将其填充为白色：
10、从右向左制作渐变效果，并设置不透明度，使其能出现如下效果：
篇2：PS按钮制作高级教程之制作导航按钮
网页设计中按钮的制作非常重要，精致的按钮会给网页增色不少，
PS按钮制作高级教程之制作导航按钮
。下面的教程介绍一款非常不错的按钮的制作方法。制作过程比较简单：先用图形工具制作出按钮的形状，然后加上一些简单的图像样式做底色。然后再加上高光及文字等即可完成效果。最终效果
1、打开photoshop，然后新建一个文档250*150，并填充背影:#252a38。
2、在工具箱上选择椭圆图标并设置如图。
3、新建一个图层，然后填充一个颜色。
4、在调色板上设置如下。
5、使用渐变拉出线性渐变，渐变效果如下。
6、双击图层，打开图层样式，给图层添加阴影和描边，参数及效果如下图。
7、在工具箱上选择加深和减淡工具，设置如图。
8、然后在图所标识的地方，涂沫如下，
9、选择椭圆选区，作出效果如下。
10、添加渐变，设置如图，从上而下线性渐变。
11、按ctrl+D取消选区，并更改图层的不透明度：40%,，混合模式为“叠加”。
12、现在使用文字工具，添加文字并设置图层样式，参数及效果如下图。
13、添加下面的文字，效果如下。
14、在文字前面加上自己喜爱的图标，按ctrl+U调整色相/饱和度，设置如下，再把图层混合模式改为“叠加”，完成最终效果。
其它颜色的按钮制作方法相同。
篇3：PS按钮制作高级教程之制作常用水晶按钮
本教程主要是介绍水晶按钮的制作，主要难点是要把按钮的高光和暗调调和谐！
最终效果
1.新建一个300 * 200像素的文件，定义圆角矩形大小为250 * 120
2.复制圆角矩形图层并缩小
3.给底部圆角矩形加个渐变叠加，这里具体颜色头可以先不管，是同一色相调整不同明度就可以了，
4.这是是具体的简便颜色设置
5.给上边的矩形添加样式
6.设置前景颜色为白色，用椭圆工具画出如图形状并设置不透明度为50%，操作如下图
7.载入上部矩形为选区并新建图层用白色描边，并给该图层添加一个蒙版用渐变工具作出下图效果
8.隐藏背景图层，盖印图层，并用自由变换工具做成倒影，
9.加上文字。
10.最后添加一个色相饱和度可以调成自己喜爱的颜色。
篇4：PS按钮制作高级教程之制作木头风格按钮
最终效果图
1.新建文件，使用矩形选区工具绘制一个矩形按钮,前景色设置为#990000 ，背景色设置为#660000，选择反射渐变工具，填充，并使用自由变换工具对按钮进行扭曲，效果如下：
2.选择按钮底层，调出选区，将选区缩进5个像素（选择-修改-缩小）。新建层，命名为按钮皮肤。按下X键将前景色和背景色进行调换。依旧选择渐变工具从上到下进行渐变。
3.执行滤镜――杂色――添加杂色，数量：15.54，分布：高斯分布。如下图：
4.再执行滤镜――模糊――动感模糊，角度：0，距离：18像素，还有图层样式中的阴影及外发光，参数如下设置：
图层样式中的阴影，参数如下设置：
图层样式中的外发光，参数如下设置：
5.点击滤镜-纹理-纹理化，参数如下进行设置：
最终效果就出来了~你可以自己在上面添加文字
另一个效果：）希望你也能做出自己的木风格按钮
篇5：PS按钮制作高级教程之制作vista风格按钮
最终效果图
1、新建画布，大小随意，然后新建圆角矩形图形，如图所示：
2、圆角矩形属性，
3、画一个吧，高 宽自定。
4、接下来要出玻璃效果就是靠图层属性设置，选择蒙板图层右键混合属性，描边设置：
5、渐变叠加设置：
6、渐变值：
7、内发光设置： 玻璃效果的好坏跟图素值有关系，可以试一下，
8、内阴影设置： 想要玻璃表面粗糙一些，可以在正常模式下设置一下内阴影的大小。
9、投影设置：使按钮能有光感。
10、调整颜色：最后可以添加一个色相/饱和度图层，用来调整按钮整体颜色。
11、取值随意。
最终效果图
篇6：PS按钮制作高级教程之制作人像网页按钮
最终效果图
1、新建一个文档，填充自己喜欢的颜色，
2、按Shift+M，直到切换到随圆选框为止，按住Shift键不放，在文 拖出一个圆形选区，如图所示：
3、打开一幅素材图，最好是人物表情生动的，然后全选。如图所示：
注：第一张新建的圆形选区保持不变。
4、回到第一张图（保持选区），将美女图全选后，同时按Shift+Ctrl+V三个键，美女就被粘贴到圆圈中了，面且您还可以随意移动，直到您最舒服的角度。如图所示：
5、进入美女图的通道，找到“图1蒙版”点下面的小圆键，将载入选区，然后回到图层，这时，大图中的美女的边己经被选中，成蚂蚁线状，如图所示：
6、先点图层0，按Ctrl+J复制圆圈部分两次，如图所示，得到图层2及图层2副本后，均保持选区不变，将四个图层的顺序如下图排列。
7、将在最上面的图层圆圈进行“斜面和浮雕”操作，调整值如图所示，您也可根据自己的喜好进行设置，
这时仅作一个参考。
8、紧接上一步骤，效果如图所显示。
9、点“选择”菜单中的“修改”然后“收缩”，收缩量约为12像素左右，这时，我们看到选区己从原先的在圆圈边缩进了一部分，效果如图。
10、按Shitt+M，直到出现矩形工具为上，然后按Alt键，用光标在你觉得合壬适的位置拖出一个矩形，当您释放鼠标左键时，该矩形区域将被从圆形选区中删除，只留下顶部约一半多的部分被选中，这就是我们要把美女放在这里的位置。
11、对话框1中：点图层2，然后选编辑中的“清除”，刚才那个半圆部分被删走了，如对话框2所示，这时，还是不能看到美女，别急，回到最顶的图层，将“填充”100%降低到0%，呵呵，美女马上对您笑了。
注：操作时，一定要保留半圆形的选区。
12、除图层0外（点图层前的小眼睛），合层所有图层，然后添加阴影，设置的值自定，最后在按钮的空处加上喜欢的文字，完成。
篇7：PS按钮制作高级教程之美女水晶按钮
最终效果图
制作工具：Photoshop CS
制作过程：
1、打开一幅图片，效果如图01所示做为底图，
图01
2、设置前景色为蓝色1E5F96。选择工具箱中的“圆角矩形工具”，设置半径为150，在窗口中绘制如图02所示的形状，命名生成图层为图层1。
图02
3、双击图层1，打开图层样式对话框，选择“投影”样式，设置参数如图03所示，图像效果如图04所示。
图03
图04
4、创建新图层，命名为图层2。设置前景色为亮蓝色00DDFE，背景色设置为深蓝色0260AA，如图05所示。选择工具箱中的“渐变工具”，选择图层2，按Ctrl键单击图层1，载入图层1的选区，从下至上拖动鼠标绘制渐变，取消选择，效果如图06所示。
图05
图06
5、单击图层面板下方的“添加图层蒙版”按钮，为图层2添加蒙版。然后设置背景色和前景色为黑色和白色，选择渐变工具，选择前景色到透明，从左至右，从右至左各拖动一次，图像效果如图07所示。
图07
6、新建图层，命名为图层01，
按住Ctrl键单击图层2，载入选区。设置前景色为白色，按Alt+Delete键填充白色，如图08所示。
图08
7、为图层01添加图层蒙版，选择工具箱中的渐变工具，设置成从黑色到透明，从右到左绘制渐变，使左边显示为纯白色，效果如图09所示。
图09
8、选择菜单栏中的“编辑”“自由变换”命令，在属性栏中设置W为95%，H为95%，然后按确认，效果如图10所示。
图10
9、单击工具箱中的移动工具，再按向左键2次，效果如图11所示。
图11
10、设置该图层的不透明度为70%，效果如图12所示。
图12
11、复制图层01，命名为图层02。按Ctrl+T键，将选择图像的大小缩小为97%，再将图像向左移动2像素，对准到图层01的左侧部分，图像效果如图13所示。
图13
12、复制图层01，命名为图层03，并移动到图层的最上方。选择菜单栏中的“编辑”“变换”“水平翻转”命令，向右移动2像素，并将不透明度设置为40%，效果如图14所示。
图14
篇8：PS按钮制作高级教程之网页常用水晶按钮
最终效果图
1、新建一个文件，在工具箱中选择圆角矩形工具，如下图所示设置：
2、新建一个图层后，在画布上拉出一个长方形，就得到这样的结果，（为了更好的给大家讲解，这个图放大了400%显示）
如果大家得到这样的结果。
就需要将“对齐像素”的选项给勾上。
3、为这个图层添加图层样式。
得到结果如图所示，顺便在样式调板中存储着这个样式。
4、使用矩形选框工具，绘制出一个矩形的选区，
5、新建图层后，填充黑色到白色的径向渐变。
6、并将该图层的混合模式改为：柔光，不透明度：60%。
7、新建图层，再绘制出一个矩形选区。
8、填充成白色。
9、并将该图层的混合模式改为：线性减淡，不透明度：30%。
10、使用文字工具写上要的文字，注意在这里要将字体的边缘设置为：无。
11、之前我们创建过一个样式，还记得吗，给文字应用这个样式就可以了。
后面的工作就是换换颜色，改改文字就可以了。
篇9：PS按钮制作高级教程之播放器按钮的制作
最终效果
1.新建一个大小为300*300像素文件，用线性渐变工具(设置如图1)由下至上绘制渐变，效果如图2
图1
图2
2.新建一个图层层，创建如图3所示的选区填充白色,效果如图4。按Ctrl + D 取消选区
图3
图4
3.将白色层的透明度调为30%，点击菜单 滤镜 模糊 高斯模糊，数值为2得到图5所示的效果。
图5
4.在最上面再新建一个图层，在正中心用椭圆工具，绘制一个正圆。
图6
4.在最上面再新建一个图层，在正中心用椭圆工具，绘制一个正圆效果如图7。再填充颜色(R:91 G:135 B:206)
图7
图8
5.不要取消选区，再新建一层，选择喷枪工具设置如图9，喷出如图10所示的图形.
图9
图10
6.不要取消选区，选择 菜单 滤镜 模糊 动感模糊 设置如图11，得到图12所示的效果
图11
图12
9.按 Ctrl + D 取消选区，按“v” 选择选取工具，
按键盘上的上上键往上移4下---即4个象素,得到图13的效果
图13
10.选择 菜单 滤镜 模糊 高斯模糊 数值为5得到图14的效果
图14
11.在最上面新建一个图层，按住Ctrl 点一下“图层2”的图层区域调出它的选区,效果如图15.然后选择菜单 选择 修改 收缩 数值为6 得到图16的效果
图15
★ PS制作网页界面
【PS按钮制作高级教程之制作左侧导航按钮（共9篇）】相关文章：
PS绘制简洁漂亮的端午节海报2022-04-30
FLASH制作个性的旋转圆形网页导航2022-05-06
使用Photoshop制作金色华丽的端午节艺术字的方法2023-09-27
教你用PS工具制作凹陷/下凹立体文字效果2022-11-19
高级批处理的教学2022-09-21
《画笔工具的运用》教学设计2022-04-30
Illustrator 打造浪漫情人节壁纸2023-04-24
教案：海报制作《开演了》2022-09-28
PS制作闪烁星光动画教程2022-08-28
美图秀秀自动抠图教程2023-07-20