Photoshop制作简单时尚的网页开关图标

WHouAWJCou

WHouAWJCou

2016-02-15 23:32

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是Photoshop制作简单时尚的网页开关图标,一起来学习了解下吧!

制作之前我们先找一些实物照片来分析一下开关的质感,色彩表现等。然后分解开关,了解它的结构。再设定材质为塑料,设定好光源位置就可以绘制了。

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

最终效果

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

1、先建立一个1136 * 640的画布。

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

2、在这个画布上,用椭圆工具勾绘出一个圆形,作为按钮侧面,命名图层为按钮-下。

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

3、建立一个新图层,画一个同样大小的同心圆,再选中底边锚点,向上拖到锚点位置如图,作为按钮正面,命名图层为按钮-上。

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

4、编辑按钮-上,绘制开关按钮正面的形状和质感,图层样式如下图。

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

5、接着我们编辑按钮-上,绘制开关按钮侧下方的形状和质感,图层样式如下。

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

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

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

6、接着我们画用来按钮按钮的凹槽位。同样的方法我们画一个稍大一些的同心圆,图层名凹槽,然后添加下图所示的样式。

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

7、至此,我们已经完成了70%了,需要再加上阴影。阴影层,我使用了一个稍微瘦一些的椭圆形状,这样形成的阴影看起来更加真实。

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

8、最后我们再打上OFF,ON的字样,再增加一点泛红光的效果,完成最终效果。

Photoshop制作简单时尚的网页开关图标,PS教程,图老师教程网

展开更多 50%)
分享

猜你喜欢

Photoshop制作简单时尚的网页开关图标

PS PS基础
Photoshop制作简单时尚的网页开关图标

Photoshop简单的制作时尚的开关效果

PS PS基础
Photoshop简单的制作时尚的开关效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop制作圆形开关图标 简洁大气

PS教程
Photoshop制作圆形开关图标  简洁大气

Photoshop制作简洁大气的圆形开关图标

电脑网络
Photoshop制作简洁大气的圆形开关图标

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PS教程 Photoshop制作圆形简洁开关图标

电脑网络
PS教程 Photoshop制作圆形简洁开关图标

Photoshop制作放大缩小网页图标

PS PS基础
Photoshop制作放大缩小网页图标

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Photoshop调出小路女孩清新唯美效果

Photoshop调出小路女孩清新唯美效果

Photoshop详细解析主要颜色的选择方法

Photoshop详细解析主要颜色的选择方法
下拉加载更多内容 ↓