PS绘制IOS7风格倒数计时器

冰雪悟霜1028

冰雪悟霜1028

2016-04-05 14:32

下面图老师小编跟大家分享一个简单易学的PS绘制IOS7风格倒数计时器教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

PS绘制IOS7风格倒数计时器

  这篇教程PS鼠绘学习者们使用PS绘制IOS7风格倒数计时器,教程严格来说算是一个ICON制作教程吧,教程难度一般

  我们先来看看最终的效果图吧:

PS绘制IOS7风格倒数计时器  图老师

  图00

  具体的绘制步骤如下:

  步骤 1

  打开Photoshop,新建画布,尺寸730像素×410像素。然后我们通过标志工具,定位画布从的水平和垂直中心位置。设置效果如下图所示。

PS绘制IOS7风格倒数计时器

  图01

  步骤 2

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

  选择椭圆工具,创建一个尺寸为120像素×120像素的正圆,隐藏填充图层,描绘路径5像素和颜色选择#e1e1e1。椭圆设置如图02所示,绘制效果如图03所示。

PS绘制IOS7风格倒数计时器

  图02

PS绘制IOS7风格倒数计时器

  图03

  步骤 3

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

  使用PS导航器放大1200%,使用直线工具,绘制一条1像素宽的直线,然后如下图放置。

PS绘制IOS7风格倒数计时器

  图04

  步骤 4

  这时直线可能还没有达到底部。按Ctrl+T调出自由变换菜单,你会看到如下图所示的变换控制点。找到直线底部的控制点,按着Alt一直拖拉到底。效果图如下图所示。

PS绘制IOS7风格倒数计时器

  图05

  步骤 5

  拉长之后,不要马上按回车确定。再调整直线的角度,顺时针10°,按两次回车。设置效果如下图所示。

PS绘制IOS7风格倒数计时器

  图06

  步骤 6

  这一步就按Alt拖直线图层,然后再按Ctrl+T调整角度,直至直线呈放射性分布在圆圈内。效果如下图所示。

PS绘制IOS7风格倒数计时器

  图07

  然后改变直线的颜色为白色,效果如下图所示。

PS绘制IOS7风格倒数计时器

  图08

  步骤 7

  将最先绘制的正圆复制一次,然后放置在图层面板顶层,这个复制的正圆就是用来做旋转指示器。

PS绘制IOS7风格倒数计时器

  图09

  调出正圆的图层样式混合选项,勾选渐变叠加,渐变的设置颜色如下图所示。

PS绘制IOS7风格倒数计时器

  图10

  步骤 8

  下面在正圆图层设置蒙版,按照下面显示的15分钟遮蔽四分之一。效果如下图所示。tulaoShi.com

PS绘制IOS7风格倒数计时器

  图11

  步骤 9

  选择文字工具,添加文字,具体文字内容,以及文字字体、颜色、大小等如下图所示。

PS绘制IOS7风格倒数计时器

  图12

  Final 步骤

  最后将刚才做的图案复制3次,分别按照17日、9时、32分的顺序排列并修改文字和蒙版,这样就能完美显示时间啦。

PS绘制IOS7风格倒数计时器

  图13

  下面来看看笔者的最终效果图吧,很有科技感有木有。这里笔者添加了iOS7的背景壁纸,圆圈外围添加了阴影,看上去有质感和立体化。你也来试试制作自己的iOS7风格设计吧。

PS绘制IOS7风格倒数计时器

  图14

        :更多精彩教程请关注图老师photoshop教程栏目,图老师PS群:182958314欢迎你的加入

展开更多 50%)
分享

猜你喜欢

PS绘制IOS7风格倒数计时器

电脑网络
PS绘制IOS7风格倒数计时器

Photoshop设计iOS7风格倒数计时器

PS PS基础
Photoshop设计iOS7风格倒数计时器

s8lol主宰符文怎么配

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

Photoshop设计iOS7风格倒数计时器教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop设计iOS7风格倒数计时器教程

灵活运用PowerPoint绘制比赛计时器

电脑入门
灵活运用PowerPoint绘制比赛计时器

lol偷钱流符文搭配推荐

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

PS教程!快速学会用PS绘制一个计时器图标

PS PS教程
PS教程!快速学会用PS绘制一个计时器图标

Photoshop绘制逼真的计时器UI图标教程

PS PS基础
Photoshop绘制逼真的计时器UI图标教程

lolAD刺客新符文搭配推荐

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

PS简单营造泛黄怀旧复古色调照片效果调色教程

PS简单营造泛黄怀旧复古色调照片效果调色教程

Photoshop给草地人物照片加上淡橙色技巧

Photoshop给草地人物照片加上淡橙色技巧
下拉加载更多内容 ↓