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

2016-02-15 23:32 24 1 收藏

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

【 tulaoshi.com - PS 】

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

最终效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Photoshop制作简单时尚的网页开关图标,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教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160215/1565316.html

延伸阅读
本教程的图标有点卡通的味道,光感部分不需要太逼真,有点高光即可。制作的时候主要是用钢笔勾出形状,然后拉上渐变即可。 最终效果 1、新建一个500 * 500 像素的文件,选择渐变工具,颜色设置如图1,拉出图2所示的径向渐变。 图1 图2 2、新建一个图层,选择钢笔工具勾出锥形瓶的路径,按Ctrl + Enter 转为选区,如图3,选...
标签: PS
Photoshop制作蓝色时尚的立体图标   本教程主要是用一个很小的例子教你使用Photoshop制作一枚质感立体图标,通过体验我们才能知道tuLaoShi.com设计师们制作这样一枚枚小小图标的不容易,感谢原作者的制作:                   
标签: PS
Photoshop制作简单的木质音响图标   制作图标之前,先认真分析图标的构成。然后由底层开始慢慢制作,用形状工具画出形状,再用图层样式增加质感和颜色即可。 最终效果 1、新建一个1000×1000 px 的画布,填充颜色#7b7776。 2、创建一个512×512像素,圆角半径为90px的圆角矩形,并置入木纹素材,然后...
最终效果: 第一步:打开CDR用矩形工具画一个方框,大小自己定,填充5%的黑,点形状工具,四个角的圆滑度都为20,如下图 第二部:按住Shift键,点鼠标左键向内复制,在不松开左键的同时点右键复制 松开鼠标如下图,描边1mm的黑。 第三部:按住Ctrl+Shift键,绘制一个正圆,不要太大,更具自己图的比例,填充渐变30%的黑到白色渐变...
标签: PS PS教程
今天给大家演示商业网页制作过程。会网页的朋友们应该知道Photoshop在这过程中的重要性,因为它是网页制作基础。所以笔者准备了这套教程,其目的希望初学的朋友们能够更加深刻的了解制作过程,在以后的日子里小弟我会多准备一些,相对于宣传画册,公益海报等,制作的过程。我们现在就开始吧! 我们先来看看最终的效果图: 图(1)...

经验教程

872

收藏

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