Photoshop绘制立体效果的原型开关教程

2016-02-16 03:09 33 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享Photoshop绘制立体效果的原型开关教程,希望可以对大家能有小小的帮助。

【 tulaoshi.com - PS 】

先看看效果图

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

一,创建背景

创建一个宽高1000px,72PPI的文件

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

二,应用背景图案

建新组命名Background。下载Vertical cloth Pattern(素材包里有),用矩形工具画个矩形,将下载的图案应用到矩形中。

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

1,创建按钮

创建一个新组命名Button。用椭圆工具画一个正圆形,颜色#0e0f0f。应用下列图层样式。然后透明度设为20%。

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

2现在做另一个圆,比上一个小一点,颜色#222429然后应用图层样式。

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

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

3,应用纹理

在附件PSD中有Grunge texture,设置混合选项为点光,透明度10%。创建剪贴蒙板。

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

4用椭圆工具U做另一个正圆比前一个小点,颜色#0d0d0e然后应用样式。笔刷B大小200px,硬度0%颜色白#ffffff画个白点混合选项柔光,透明度80%,转换为剪贴蒙版。再新建图层,笔刷一样的颜色黑#000000在圆的底部画。转换为剪贴蒙版。

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

5再用U画个正圆比上一个只小一些像素颜色#1a1a1b,用直接选择工具将下顶点上移一些像素。应用图层样式(如图)。导入Grunge texture。设置线性减淡透明度10%。新建图层笔刷一样的用#ffffff刷形状的下面,混合选项柔光,创建剪贴蒙版。

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

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

6文字工具T字体Myriad Pro,Bold并且大小48pt,写字母I,颜色#969696应用下列样式。另建文字O颜色#fefefe,右键点图层栅格化文字,按CTRL/CMD+T然后按住CTRL/CMD+SHIFT+ALT拖动左下角顶点往左一点,应用下列样式。OK了

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

最终效果

Photoshop绘制立体效果的原型开关教程,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1567308.html

延伸阅读
标签: PS PS基础
  本教程主要使用Photoshop绘制立体效果的火箭图标教程,绘制的效果还是不错的,喜欢的朋友一起来学习吧。附件赠送长阴影动作。 附送动作: 长投影PS动作.rar
标签: PS PS基础
效果进化图: 绘制步骤详解:
标签: PS PS基础
如果你是设计师,那么创建界面元素是非常重要的技能。本次教程中,我们会创建一个简单漂亮的切换开关按钮。切换开关经按钮常用于某项功能的启用与关闭,他们经常出现在UI设计与网页应用设计中,好了,来开始我们的教程吧。 先看看效果图 下面是教程 第1步: 打开Photoshop,Ctrl+N新建一个文档,尺寸选择600×500px。 第2步: 按住...
Photoshop制作立体效果的UI开关按钮   最终效果 1、先建立一个1136 * 640的Tulaoshi.Com画布。 2、在这个画布上,用椭圆工具勾绘出一个圆形,作为按钮侧面,命名图层为按钮-下。 3、建立一个新图层,画一个同样大小的同心圆,再选中底边锚点,向上拖到锚点位置如图,作为按钮正面,命名图层为按钮-上。 ...
标签: PS PS基础
做这个教程,其实是自己练习着玩,也正好模仿一位大神的一个简单的作品,第一次为猫视觉写教程,比较简单,希望在今后的练习中能做出更好的教程给大家。 我们先来看下原作和我这个山寨的区别: 接下来我们讲解教程: 1. 首先创建一个尺寸为400*300的文件(尺寸随意) 2. 然后找一张木板作为背景,主要你觉得适合随便都可以,找不到合适的...

经验教程

22

收藏

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