创建IOS7风格的倒数计时器

最近iOS7.1降临地球，小伙伴你升了么？回归正题：本教程很适合初学者学习哦~

Step 1

打开ps创建一730px * 410px的文档，在中心部分添加水平和垂直的辅助线：

Step 2

使用椭圆工具Ellipse Tool (U)绘制一120px * 120px的原型，不填充颜色，描边为5px的#e1e1e1，放在画布的中央：

Step 3

将画布放大到1200%左右，然后使用直线工具Line Tool (U)从圆圈的顶部到中心点绘制一条1px的直线：

Step 4

Ctrl + Alt + T出现自由变换该直线外框，看到直线中心点木有？按住shift+Alt，鼠标拖动中心点移到直线的最下方（记住拖到下方的中心时先不要着急按回车键哦）：

Step 5

嗯，现在把旋转角度值改为10°，然后按enter键两次：

Step 6

现在按下Shift + Ctrl + Alt + T复制该直线，直到得到一个完整的螺旋线形状：

改变填充颜色为白色：

Step 7

复制一层最原始的的圆圈，放在所有图层的上方，我们要在这个圆圈上做渐变处理：

为该圆圈添加如下渐变叠加样式：

Step 8

蒙版处理掉四分之一不显示的区域：

Step 9

使用文字工具Text Tool (T)添加日期、时、分、秒，注意数字和标签以及渐变颜色的一一对应：

最后一步！

为刚才所创建的所有图层编组，然后复制出另外3个编组，4个编组之间的水平间距是20px，分别调整相应的内容，使之形成完整的ios7倒数计时器：

然后我又不甘于白色的背景了。Ios7不是有很多壁纸么？我把一张图片设置15%的模糊度作为该计时器的背景了，看看最终效果吧：

怎么可以我有壁纸你没有呢？！赶紧的看看下面的壁纸。

钢铁侠

纸飞机

Windmills

Hot air balloon

Vintage Camera

Air Plane

Space Shuttle

iOS7 Wallpaper

教程结束，很简单有木有^_^（想看英文教程视频的可以到原文看哦）

1stwebdesigner
优设网翻译：@写说说

================关于学ui网================

xueui.cn 学ui网发布高质量ui设计教程和设计分享，希望打造一个最好的ui学习教程平台！

QQ群：36013311     APP截图站：app.xueui.cn海量APP截图，让你灵感爆发！

赞 (0)

相关推荐

  • 如何创建品牌风格指南?

    品牌风格指南承载您的品牌的核心和灵魂 – 您的使命,愿景和价值 – 并将其转化为设计.它也告诉每个人确切的怎么和你的品牌交流.那么如何创建它?我们会教你! -什么是品牌风格指南? -为什么品牌风格指南 ...

  • Apple TV最新测试版更新汇总 iOS7风格图标和字体更新介绍

    根据Apple TV最新测试版发布的相关新闻介绍，现在让你们看看新测试版究竟更新了什么内容，首先从界面上来说，整体更加简洁，与iPhone、iPad和iMac的风格靠拢，全体都是iOS8扁平化风格，请 ...

  • 华为 C8812 ROM 采用IOS7风格Android2.3.7省电

    操作方法 01 ROM介绍 1.全新的IOS7界面,流畅美观,流畅度较原版提升了50%,占用运存更小了,调整运存管理机制,理论上较原版减小了2.7倍的运存占用率 2.大幅度增强了GPS和AGPS的使用 ...

  • 画回形针，玩转形状工具

    这个教程将教会你如何使用形状的切割,做一个回形针,小小的回形针,可有来头,学问可大了,新手来学学吧~!~! 相关教程: 创建IOS7风格的倒数计时器 如何用几何形切割出精美的小图形(PSD下载) 教你 ...

  • 创建优秀UI的7条准则

    前言 1. 文章适用对象 1. 需要做出好看UI设计的工程师们: 2. 希望自己的产品结构演示比五角楼风格幻灯片更好看的:以及明确知道自己产品的用户体验很棒,如果有更好的UI设计包装,会卖得更好的UX ...

  • 电脑秒表计时器软件

    电脑秒表计时器软件

    软件功能1.高级闹钟设置无论您的日程安排多么复杂,Hot Alarm Clock软件都具有随时间变化所需的一切.您可以设置一次性警报或定期警报,也可以使用任意一组日期和时间.它的丰富设置肯定会让您设置 ...

  • 风格指南里该有什么，如何执行？

    每个网站都需要一套风格指南.原因很简单,如果想要在整个项目中贯彻一致性,让所有人达成共识,风格指南的价值是无可估量的. 既然如此,我们先把它放在一旁,指南中究竟应该包含哪些东西?如何确保团队成员遵守规 ...

  • 专业的网页风格指南应该如何制作？

    规范化设计下的网页,通常都会有系统的网页风格指南.如果你想确保你的网页设计能够更加一致,并确保每个参与者和使用者都能在规范的框架内设计.开发和使用,那么风格指南的存着就相当有意义了. 既然我们要设计风 ...

  • WinNTSetup 3.0正式版发布 最强大的系统安装器

    WinNTSetup是一个可以让你轻松安装Windows 2000、XP、2003、2008、2012、Vista、Win7、Win8(包括Win8.1)等Windows系统的安装工具，换句话，除了使 ...