Photoshop设计网页按钮_非常精致蓝色水晶按钮

2016-03-18 05:48 41 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐Photoshop设计网页按钮_非常精致蓝色水晶按钮,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - PS 】

来源:PConline 作者:李华仁
水晶按钮是非常常用的,制作方法按个人操作也有一些区别。下面的教程是用图层样式来完成主体操作。制作的时候只需用选区工具做出想要的按钮形状,然后添加图层样式和高光即可。
最终效果


1、打开Adobe Photoshop,执行菜单:“文件”/“新建”(快捷键Ctrl+N),弹出新建对话框,设置名称:按钮,宽度:570像素,高度:400像素,分辨率:72像素/英寸,颜色模式:RGB颜色、8位,背景内容:白色,设置完毕后单击确定按钮,如图1所示。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)
图1
2、在图层面板上单击创建新图层按钮,新建一个图层4,再工具箱选择圆角矩形工具,并按住键盘中Shift不放在工作区拖出一个圆角矩形,按键盘快捷键Ctrl+Enter转换为选区,设置前景色为蓝色,按键盘快捷键Ctrl+D取消选区,如图2所示。效果图如图3所示。


图2


图3

3、接着右击图层4,选择混合选项,进入到图层样式,分别勾选投影、外发光、内发光、斜面与浮雕、光泽、渐变叠加选项,设置图层样式各项的值,参考下面的设置值,然后点击确定按钮,如图4、5、6、7、8、9所示。效果图如图10所示。


图4


图5


图6


图7

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


图9


图10

4、选择图层4,复制一个图层4副本并给图层4副本添加蒙版,如图11所示。


图11
5、单击工具箱中的横排文字工具 ,输入school,然后在工具选项栏上设置字体参考图12,如图12所示。


图12
6、在图层控制面板新www.Tulaoshi.com建一个图层或者(按快捷键Shift+Ctrl+N),接着在工具箱中选择钢笔工具,在属性栏中设置钢笔为路径,接着再工作区绘制出一个不规则的形状,按键盘快捷键Ctrl+Enter转换为选区,设置前景色为白色,按键盘快捷键Ctrl+D取消选区,并设置不透明度为20%。如图13所示。调整后的效果图如图14所示


图13


图14

来源:https://www.tulaoshi.com/n/20160318/1873766.html

延伸阅读
最终效果 1) 利用圆角矩形工具建立一条路径;使用转换点工具移动左上角路径节点,使其产生卷页的形状; 2) 用任意一种色彩填充工作路径;再复制下半部分;对其添加图层样式,如图所示. 3) 用任意一种色彩绘制一个圆角矩形;将其图www.tulaoshi.com层移至红色矩形之后;添加图层样式,如图所示. 4) 再新建一层,绘制圆色矩形,颜色为黑...
 网页设计越来越注重细节的完美,一种好的字体效果或一个比较精致的按钮会让你的网页增色不少。下面我们来探讨这种按钮的制作方法。 1:打开Photoshop新建一个200像素*200像素的文件,颜色最好是用RGB格式,前景颜色为黑色,用圆角矩形工具半径设为4个像素绘制如图1所示的图形。 图1 2:删格化图层(方法在图2所示的蓝色地方按...
本教程介绍非常简单的水晶按钮的制作方法。制作的时候只要用圆角矩形拉出按钮的大www.tulaoshi.com小,然后加上图层样式和高光即可。教程只是个参考,其他形状的按钮制作方法类似。 最终效果 1、新建一个大小自定的文件,选择圆角矩形工具,半径设置为15像素,前景颜色设置为蓝色,拉出一个圆角矩形,然后双击图层调出图层样式,参数设置如下...
来源:站酷 作者:Linjiaboy 效果图看上去有点复杂,其实构成非常简单,由金属边框及中间水晶部分构成。制作之前可以先看一下作者的分解图,然后由底部开始慢慢制作即可。 最终效果 1、制作之前先来拆分一下按钮,大致由一下几部分构成Tulaoshi.Com。 2、新建大小适当的文档,新建一个图层,用椭圆选框工具拉一个正圆选区,填充黑色,如...
   先看看最终效果吧,哈哈是不是有点复杂. 不过不要急,心情放松...注意力集中...现在我们就来"肢解"他.不难看出这个按钮主要由3部分构成:背景,水晶按钮及文字,下面我们就开始动手. 一.背景的制作: 1.打开photoshop 新建一个400*400的文件 最好是"RGB"颜色 用黑白圆形渐变绘制如图2所示渐变 图1 图2 2.选择滤镜 杂色 ...

经验教程

42

收藏

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