教你用Photoshop来绘制立体质感的网页开关按钮

如果你是设计师,那么创建界面元素是非常重要的技能。本次教程中,我们会创建一个简单漂亮的切换开关按钮。切换开关经按钮常用于某项功能的启用与关闭,他们经常出现在UI设计与网页应用设计中,好了,来开始我们的教程吧。
先看看效果图

操作方法

  • 01

    第1步: 打开Photoshop,Ctrl+N新建一个文档,尺寸选择600×500px。

  • 02

    第2步: 按住Alt键双击背景图层,将其转换为普通图层。再次双击,打开图层样式面板,为其添加由#f6fcff到#bbddff的径向渐变。

  • 03

    第3步: 利用圆角矩形工具在画布中央创建一个半径为50px的圆角矩形。颜色设置为 #aec24e。

  • 04

    第4步: 双击圆角矩形图层,为其添加图层样式。

  • 05

    第5步: 使用椭圆工具,按住Shift键在圆角矩形右侧创建出一个正圆。

  • 06

    然后为其添加图层样式。

  • 07

    第7步: 在圆形按钮下方新建一个图层,用黑色柔边画笔绘制出阴影。

  • 08

    第8步: 在圆形按钮上方再创建一个圆形。为其添加图层样式。

  • 09

    第9步: 利用文字工具在滑动凹槽键输入ON。字体选用Myriad Pro,图层混合模式设置为亮光。为文字添加投影。

(0)

相关推荐

  • 教你用Photoshop制作3D立体字体效果

    教你用Photoshop制作3D立体字体效果 操作方法 01 打开PS,新建画布,输入文字. 02 载入3d效果. 03 调整各种参数渲染. 04 回到图层面板,复制一个,Ctrl+T垂直翻转,降低不 ...

  • Photoshop绘制金属质感的网页界面设计教程

    效果图 操作方法 01 1. 首先给大家看下整体效果. 02 2. 启动本教程你将需要创建一个新文件.使用任何你想要的值,但是我建议你创建一个文件的最小宽度为1100*1163像素.背景填充# 252 ...

  • 怎样使用Photoshop软件绘制出一本书的效果

    教大家使用Photoshop软件绘制一本简单有立体效果的书籍.学习使用"钢笔工具". 操作方法 01 打开Photoshop软件,创建一个新的空白文件.将背景层填充为淡蓝色,在图层 ...

  • 教你用Photoshop绘制金属质感按钮UI图标

    绘制金属质感按钮UI图标 操作方法 01 新建1000*800PX白色画布,创建一个渐变填充调整层,参数设置如下:右键将图层转换为智能对象,执行滤镜-杂色-添加杂色,数量为2,平均分布. 02 选择圆 ...

  • 教你用Photoshop绘制指纹质感UI图标

    绘制指纹质感UI图标 操作方法 01 新建800*800PX白色画布,鼠标双击图层添加渐变叠加图层样式 02 选择圆角矩形形状工具,半径120像素,绘制一个512*512PX的正方圆角矩形,然后添加& ...

  • 使用Photoshop绘制金属质感文字

    今天给大家带来的Photoshop教程是绘制金属质感文字,利用简单的图层样式调整数值方式即可完成绘制操作,下面教你详细的制作步骤,一起学起来吧. PS绘制金属质感文字 01 进入PS界面新建一张画布, ...

  • 使用Photoshop绘制金属质感字效

    当我们在看一些字体设计的时候,有的人就喜欢看一些金属感比较重的字体,感觉看起来很有一种舒服的感觉,今天给大家带来的教程就是如何用Photoshop绘制金属质感字体. 金属质感字效绘制 01 进入PS界 ...

  • 教你用Photoshop绘制逼真的眼泪

    教你怎么用ps绘制逼真的眼泪 操作方法 01 首先我们打开一张妹子图片,图片最好就是这种类型的,一种不怎么开心的感觉. 然后我们双击背景图层解锁之后[ctrl+j]复制一层(习惯备份)接着我们新建一图 ...

  • 教你用photoshop塑造小锦旗

    教你用photoshop塑造小锦旗 操作方法 01 新建文件,给背景填充你喜欢的颜色 02 首先选择圆角矩形工具,画一个圆角矩形,去掉描边,设置填充颜色 03 选择矩形工具,画一个矩形,去掉描边,设置 ...