便捷贴士:在Photoshop中设计一个美观的下拉按钮


今天,我将告诉你们如何在Photoshop中设计一个有些与众不同,也很美观的按钮。虽然这看起来很简单,但这种按钮比其他按钮多了下拉菜单,这是一个带下拉菜单的按钮。准备好了吗? 我们开始吧!

1. 制作基本按钮

打开Photoshop 新建一个文档,我使用的文档大小为600x350px



选择圆角矩形工具,设置半径为2px。这会让按钮看起来简洁圆润。圆角矩形多大都可以,只要不要太大挤满画布就行。 我绘制的按钮为104x30px。


2. 添加细节

现在,开始给按钮添加一些样式。 先给按钮加上渐变叠加让按钮看起来立体一些。 这是设置的参数。



接着添加描边,以免和背景混在一起。 使用如下设置,颜色为#F8F8F8。(ps:实际上不是F8F8F8,我用的9c9b9b)



添加内发光,让按钮看起来有光泽(ps:没有卵用,请帮我@眼医)。 设置如下:

添加文字后,按钮看起来应该是这样。


3. 下拉菜单

观察一下这个蓝色的下拉菜单,用钢笔工具来绘制会有点复杂。 如果你对钢笔工具不熟练,睁大眼睛看清楚。
你可以直接复制这个按钮,也可以新建一个圆角矩形。 我会新建一个圆角矩形,和之前的方法一样。 不过,新建的圆角矩形要比原来的小一些。最好不要宽过100px,因为要让它看上去像是在按钮的下面。 给它填充颜色#57A0FA。 现在看起来应该是这样:


4. 参考线

选择钢笔工具,用来改变一下圆角矩形的形状。 确保你使用的是钢笔工具下的添加锚点工具,选中新建的圆角矩形图层。 为了让新生做起来简单些,我们设置一些参考线。 拖出一条参考线到按钮的中间,在这条线的两旁再分别拖出一条。 看起来是这样:


5. 突起的三角

把画布放大一些,在参考线处添加三个锚点。 选择中间的锚点,把它向下拖拽一些。 几个像素就够了



为了让它看起来更好看,我们在中间添加一个小洞。 给图层添加图层蒙版,使用选区工具画一个圆形选区。 点击删除键,这样就能把洞画出来。 看起来像这样:


6.下拉栏样式

为了让下拉栏看起来好看些,并且和按钮搭配。我们要添加一些图层样式。 添加描边,设置如下:




添加内发光,使用如下设置:



不出意料,结果看起来应该是这样的,如果不是,你可能哪一步做错了。

7. 鼠标划过

复制一层下拉栏,把它的高变大就行了。 添加上文字就算完成了。


8. 更多颜色

改变下拉栏的颜色可以获得各式各样的按钮。


最后

这个教程是我翻译tutsplus上的一篇文章,我的表达能力有限,有需要的同学可以去看一看原文。原文右边有一个翻译按钮,如果你觉得有更合适的翻译请点进去更新翻译。
另外这篇教程很多具体操作没有说明,新手看来不懂可以百度一下提到的工具的用法。感谢你们的阅读!
原文地址
在这里更新翻译

如果你不介意关注我的微信公众平台的话,帮忙扫描一下二维码或者搜索 AcornLab 我会不定时更新一些和设计、web,motion graph有关的文章哦。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容