Photoshop制作ipad界面

2016-04-05 15:40 28 1 收藏

下面图老师小编要向大家介绍下Photoshop制作ipad界面,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - ps鼠绘 】

Photoshop制作ipad界面

  在Photoshop中重构一个产品有很大的挑战,但同时也乐趣无穷。今天我们就将重构苹果公司一款最漂亮的革命性产品-ipad。它融合突破性的技术于双手间,它简洁、干净、线条流畅。这个iPad允许你上网、看书、打游戏、看电影、操作电子邮件、听音乐等,你还可以从程序商店下载超十五万程序扩充其功能。我们开始教程吧。

Photoshop制作ipad界面 图老师教程

  最终效果预览

  1、在Photoshop中新建文件宽624px、高921px,背景色设为白色,分辨率72dpi。添加从上到下,蓝到白渐变。选择圆角矩形工具,圆角半径设为22px,绘制如下图所示的形状,把该图层重命名为border。

02

  02

  在border图层上抠出边框来。按住Ctrl键单击bordertuLaoShi.com图层缩略图,取得选区,执行选择-修改-缩减,缩减6px,按Delete删除。

03

  03

  使用索讨工具单击border内部取得选区,新建图层填充黑色,把该图层重命名为Black Glass。新建图层,重命名为screen,使用矩形工具绘制屏幕,到目前为止我们得到4个图层,background、border、 black glass、screen。

04

  04

Photoshop制作ipad界面(2)

  2、我们回过头来处理border图层。选中图层,添加图层样式。斜面/浮雕、颜色叠加和描边。

05

  05

06

  06

07

  07

08

  08

09

  09

  选中black blass图层,添加线性渐变叠加,颜色设置为:#5b5c60-# 000000。

10

  10

  3、现在我们添加屏幕壁纸。首先我们下载pkarwowski 提供的背景图,导入到Photoshop中,置于screen图层的上方,然后按住Alt+Ctrl+G创建剪贴蒙版。

11

  11

  4、前景色设为白色,新建图层,重命名为Dock,画一个长方形,然后执行编辑-变形-扭曲,拖动上方的两个角点向中间移动如下图:

12

  12

  选中Dock图层,添加图层样式渐变叠加,颜色设置为#454637到#fafbfc的渐变。

13

  13

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

  把dock图层不透明度降低为58%。我们继续制作屏幕顶部的信息栏并且添加ipad图标。

14

  14

  5、现在我们添加些Icon图标到桌面,下载本文所用图标(当然您可以使用谷歌搜索满意的图标)。打开下载好的 Safari 图标,把它导入Photoshop并且放置在dock层的上方,调整其大小。

19

  15

  为 Safari 图标创建倒影。复制图标,然后执行编辑-变形-垂直翻转

20

  16

  降低图层的不透明度为21%,创建黑色到透明的渐变叠加。

13

  17

  选取并删除溢出屏幕的倒影部分。

21

  18

  重复相同的过程,为桌面添加其他3个图标。

16

  19

  6、下面来添加按钮以完善我们的ipad界面。画一个白色的圆作为开始按钮,然后继续在其内部画一个圆角半径为2px的圆角矩形。

22

  20

  对小圆应用渐变叠加,颜色设置如下:#4c4d51-#060606。然后给小的圆角矩形添加描边和渐变叠加,同时降低图层不透明度到19%。

23

  21

  7、选择圆角矩形工具,圆角半径设为2px,然后分别绘制按钮A和按钮B。

17

  22

  制作按钮C时,首先在顶部-圆角矩形工具设置面板上选择形状图层(最左侧的一个),然后设置圆角半径2px 画出按钮C。

29

  23

  使用钢笔工具为按钮C增加锚点如下图所示,然后使用直接选择工具选中锚点,按左方向键向左侧移动3个像素。最后把所有按钮都置于border层的下方。

18

  24

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

  教程结束,希望您能喜欢。

  译文地址:http://www.olihe.com/?p=8658

来源:http://www.tulaoshi.com/n/20160405/2125321.html

延伸阅读
标签: PS PS基础
那些制作精良的时尚摄影和商业大片,一直走在摄影潮流前沿,很多画面充满创意,但是却不知道怎么制作的,今天我们有眼福啦!特别邀请修图师灵动空,为我们揭秘时尚广告大片的PS后期制作方法,希望能有所启发。 一、调整皮肤的颜色 1.基本修整图片完成后,我们开始对肤色的调整,首先使用曲线工具适当压暗肤色。 2.这一步是最简单而...
标签: PS PS基础
制作炫酷的UI界面可以说是刚需,尤其是对于从事游戏UI设计和电商设计的同学而言。这次畅游VC给我们带来的UI界面设计教程就是与此有关。最终效果可能并不符合你的需求,但是最重要的是学习制作的思路和方法。 先看一下最终效果 1.创建画布 新建一张790*400的画布(不要忘记文件命名哈~) 2.制作背景 Alt+Delete 填充背景色为 #1c46e3,...
最终效果图 ipad电脑图片 #3a3a3a,#111111。以增加背景的层次感。 新建图层,用矩形工具拉出一个矩形框,使用渐变来填充矩形框。 用矩形选择工具选中ipad显示屏区域,添加一些好看的图片进去 文本区域看起来很单调,最好的方法是加入一些按钮与图标等,这里先加入以个圆角矩形按钮 加入一些图标 ...
效果图制作并不难,都是一些常用的图形及效果制作。不过需要很深的界面设计功底,要能根据用户习惯,把一些最常用的功能用简洁的实用的方式表现出来。 最终效果 1、打开Photoshop并新建一个600*800 px 的新文件。 2、选择“矩形工具”,创建一个大矩形,填充颜色# 920049。 3、创建一个新的图层,并填充颜色# ffffff...
由于移动设备的普及,移动APP界面设计需求越来越多,而且不少于网站数量,因为应用不仅仅是一个企业宣传,也可以是游戏、社交工具、娱乐休闲等等,而且大部分都是创新的东东,所以这个十分考验ui设计师的创新能力。 设计应用除了界面好看外,交互也是十分重要的,好在Dribbble上有很多不同的例子给我们参考,这里我们整理了37个友好的iPhone/i...

经验教程

445

收藏

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