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

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

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

【 tulaoshi.com - PS 】

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

最终效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/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教程,图老师教程网

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

延伸阅读
先看效果图 新建文档600x600像素,背景白色,新建图层填充黑色,添加直线渐变样式,效果如下。 新建图层画一黑色正圆。 添加图层样式。 效果如下。 复制一层,清除图层样式,将此层缩小。 再复制一层,颜色改为白色,稍微缩小一点点,不透明度改为10%。 复制这个白色层,添加蒙版黑白斜线渐变。 不透明度...
本教程的图标有点卡通的味道,光感部分不需要太逼真,有点高光即可。制作的时候主要是用钢笔勾出形状,然后拉上渐变即可。 最终效果 1、新建一个500 * 500 像素的文件,选择渐变工具,颜色设置如图1,拉出图2所示的径向渐变。 图1 图2 2、新建一个图层,选择钢笔工具勾出锥形瓶的路径,按Ctrl + Enter 转为选区,如图3,选...
控件需要制作的部分较少:有底座、面板、控键等几部分。制作的时候只需要用路径等工具做出各部分的形状,然后用图层样式加上质感和颜色即可。 最终效果 新建一个256 * 256像素文件,分辨率为300,如下图。 1、使用圆角矩形工具,设置半径值为60像素,按住Shift键绘制带有圆角的正方形,如下图。 2、为底层添加渐变样式...
标签: PS PS基础
先看效果图: 新建文档450x450像素,背景白色,新建图层填充黑色,添加渐变叠加样式,设置很简单,我就不截图了。 建新层前景色#8c0000画一个正圆。 添加图层样式。 效果如下。 只保留投影效果的显示,然后减法模式用钢笔做如下路径,只保留左上角部分。 Ctrl+T选择缩放位置如下。 选择第一步画的正圆图层,...
标签: PS PS教程
今天给大家演示商业网页制作过程。会网页的朋友们应该知道Photoshop在这过程中的重要性,因为它是网页制作基础。所以笔者准备了这套教程,其目的希望初学的朋友们能够更加深刻的了解制作过程,在以后的日子里小弟我会多准备一些,相对于宣传画册,公益海报等,制作的过程。我们现在就开始吧! 我们先来看看最终的效果图: 图(1)...

经验教程

489

收藏

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