Photoshop绘制出精细的iphone4手机界面效果
互联网 & 08-26 09:43:20 & 作者：佚名 &
iPhone 是一款苹果公司出品创新的可触摸宽屏iPod以及具有桌面级电子邮件、网页浏览、 搜索和地图功能的突破性因特网通信设备这三种产品完美地融为一体的移动电话。用户界面设计主要包括可 多点触控的屏幕、可视化的虚拟键盘并非真实存在。
今天我们将学习如何在Photoshop中制作Iphone4。我们使用一些基本的绘图工具和图层样式来尽量营造 手机的真实感。iPhone 是一款苹果公司出品创新的可触摸宽屏iPod以及具有桌面级电子邮件、网页浏览、 搜索和地图功能的突破性因特网通信设备这三种产品完美地融为一体的移动电话。用户界面设计主要包括可 多点触控的屏幕、可视化的虚拟键盘并非真实存在。本教程所展示的技巧可以帮助你设计任何设备，比如壁 挂电视、掌上电脑等。希望你能喜欢，我们开始教程吧。 最终效果预览
第一步。 首先我们在Photoshop中新建文件，宽6.33cm、高7.79cm，分辨率300dpi。双击背景层解锁，然后应用渐 变叠加（渐变色由上到下依次设置为#9d9d9d-#cecece-#ffffff）如下：
第二步。 在Photoshop中打开从Stock.Xchng下载的纹理图片，置于背景层的上方，降低不透明度为8%。
第三步。 导入从苹果官网apple.com下载的iphone照片，然后给手机的边缘和屏幕绘制参考线。
第四步。 把前景色设为黑色，沿着外圈参考线，使用圆角矩形工具（圆角半径：27px）绘制手机外形，把该图层 重命名为&body&。
第五步。 给&body&图层添加渐变描边，参数设置如下：
给&body&图层添加投影，参数设置如下：
第六步。 使用矩形工具绘制一些小的黑色凹痕。
第七步。 在&body&图层下方，绘制四个矩形作为手机的按钮。
对左侧3个按钮按钮应用渐变叠加（渐变色从左到右依次设置为#515050-#a29f9f-#d9d5d5-#545353- #ecebeb-#5f5f5f） 参数设置如下：
对顶端按钮应用渐变叠加（渐变色从左到右依次设置为#7f7b7b-#a29f9f-#d9d5d5-#aeabab-#ecebeb- #979696） 参数设置如下：
对全部4个按钮应用1px的内描边，描边颜色#716f6f。
第八步。 新建Home按钮，使用椭圆工具按住Shift键绘制正圆。
大家感兴趣的内容
12345678910
最近更新的内容这里主要与大家分享一款为UI设计者私人定制的设计软件-Sketch。以及在实际工作中UI设计的常识与一些你想知道却还不知道的干货。
@iUI：我一名Mac流 Ui设计师，在这里首先要向大家道个歉，我并没有贬低PS的意思，其实他们也是伴随我一路生成长的小伙伴，我内心其实很感谢Adobe的。
& & & &这种感觉就像你刚到大学时会怀念高中的热血青春和是青涩懵懂，但真正融入了大学生活，有种专注和广袤同样会吸引着你。而Sketch的恰到好处的就在于从事UI设计的App和Web界面了。
& & & &Sketch是由国外的Bohemian Coding团队开发的一款矢量绘图软件，也是目前国内外知名互联网公司如腾讯、小米、苹果、谷歌等设计团队的主要工作软件，可见其强大不言而喻。
& & & &1、首先Sketch操作便捷，能达到事半功倍的效果，如果你会熟练使用ps和ai的话，那么不到半天你就能对他的基本操作有所了解，并且它兼容ps和ai。
& & & &2、由于是UI设计师的“私人订制”，他拥有大量提高工作效率的特性。切图、标注、组件库、插件等，它功能之强大，有时候只需一键就能得到你想要的效果。
& & & &3、整体性与连贯性，打个比方的话就像看推理小说似的，比如每一页就是一个APP界面，ps的话可能浏览到一半，看糊涂了想要看看之前的线索就还得往后一页页去翻。sketch则是把每一页都摘下来放在一个工作区域，回顾的时候自然是一目了然，整体思路也特别清晰。这里的页叫做Artboard，Artboard下级还可以在分组分层。
& & & &以上也是我对Sketch的一个整体认识吧，它本事其实就是一个很棒的UI典范，包括设计和交互，如果你真的接触到了，也会对它产生一种依赖性，一种归属感。
& & & &首先我们就从app设计的基础说起，从零开始了解它，从App的分辨率、字体、尺寸单位、切图输出资源、标注，到设计规范以及Sketch的应用来系统的聊一聊它，我也整合了一些数据下面会与大家分享。
& & & &1、分辨率
& & & &Android分辨率比较杂，但据网上数据统计一般为480*640、720**1920等几种最为常见。
& & & &IOS分辨率为640*960／4s，640*1336／5s，750*40*2208／6 plus（为渲染尺寸）。
& & & &因为手机的页面的浏览为上下滑动，所以高度是不稳定的，那么我们去掉高度，两种系统的分辨率就剩下了480、640、720、750、1080。如果这五个数字是个规律测试题，那么你会发现480、720、1080的关系了吧，720除以1.5为480，720乘以1.5为1080。那我为什么省去了中间的数字呢，其实很简单，实际体验中，在手机上相差几十个像素人眼是识别不到的。直接为倍数关系也是为了方便切图输出，更好的上下适配，提高工作效率，因此切三套或两套素材就可以实现了。
& & & &2、切图资源
& & & &IOS系统开发工程师设定的图片尺寸为苹果手机本身尺寸的一半。所以你设计的图片、banner、icon、文字都要为偶数。以p6为模板举例子，在750*1334的设计稿中，一个640*400的素材，工程师再上传中这个素材会被默认为320*200的，（原因就是初代手机为iPhone 3GS分辨率为320*480，也就是IOS开发软件Xcode上传图片默认的原始尺寸，也就是一倍图一直沿用至今。）因此在在输出的时候，原始的图片后缀要加上@2x（2倍图@2x包含了4s、5s、6的尺寸）。输出6s尺寸的时候为原始图片的1.5倍后缀名为@3x，并且以png为主。
& & & &Sketch的切图工具是本身自带的，在属性栏的右下角，默认设置了多倍图，你只需点击你绘制的icon和图片便能自动生成后缀名为xx@2x和xx@3x的图片，其中文件名不能有中文，需简要表明文件特性，状态等以便开发人员调用。相比ps中的Cutman更加方便，省去了新建在导出的这一步骤。（需要详细了解切图的同学，我会录制视频讲解）
& & & &Android系统开发平台其实与IOS大相径庭，例如以720*1280为模板，本身切图原始尺寸后缀名为xhdpi，扩大1.5倍为的尺寸后缀名为xxhdpi。
& & & &需要注意的是切图过程中要勤于与开发人员沟通，遇到问题及时解决。避免不必要的返工与误会。
& & & &总结：IOS:一般以750*1334为模板，状态栏高度：40px，导航栏高度：88px，标签栏高度：98px。切图输出的@2x属于4s、5s、6。@3x属于6s。Android：一般以720*1280为模板，状态栏高度：50px，导航栏高度：96px，标签栏高度：96px。xhdpi属于720*1280，xxhdpi属于。（当然如果用Sketch做app界面的话这些都是有现成模板，如图只需要control+c，control+v就能从组件库里调用）
& & & &3、字体
& & & &IOS:中文字体Heiti SC（苹果黑体），英文字体Helvetica Neue LT。Android：Droid Sans Fallback。在Mac中这两种字体是系统自带的的，PC上则需要用其他字体代替了如苹果丽黑和黑体-简，需要的话可以私密我。 &
& & & &字号大小也是在一个范围内而且要用偶数，如标题文字 28-34px，正文文字 26-30px，辅助性文字 20-24px，Tab bar文字 20px。 & &
& & & &4、尺寸单位 pt ppi dp px sp & &
& & & &pt: IOS系统字号定义单位
& & & &ppi：译为屏幕像素密度，屏幕上每英寸可以显示的像素点的数量，它与dp密切相关。
& & & &dp：Android系统字号单位，以160ppi为标准，则1dp=1px，dp与px的换算公式为：1dp*ppi/160=1px,如果屏幕ppi为320，那么1dp=2px。一般为App界面中的字体单位。
& & & &sp：Android系统字号单位，一般为手机本身系统界面自带的一种字体单位，有小、中、大、超大等，可以再系统设定中更改。
& & & &5、标注
& & & &说道标注不得不夸一下Sketch中强大的第三方插件Sketch Toolbox。下载地址Sketchtoolbox.com，可爱点的你可以把他想象成lolbox，哈哈~你可以从这里下载卸载你需要的插件，下载之前还可以预览它的功能特性，从而能更快捷简便的做你需要的东西，实际上有了它会上你的工作效率会更上一层楼，比如你想做头像列表或节目列表，画完了box list全选中就能直接赋予他们头像或其他种类的图片了，文字也是同理，一键就可以哦~~，而PS的步骤我就不敢恭维了，找图、导入、调整、蒙版....
& & & &标注也是sketch toolbox中的一个插件名为Sketch Measure，它与PXCooK的差别就在于它可以同时标注16进制和RGB，背景色的透明度，字号大小以及行间距。省去了我们还要在PXCooK中手动添加的麻烦。
& & & &文字标注：字体大小、颜色、文本行高、上下间距
& & & &图片标注：尺寸大小、距离左或右的边距、与文字间距、上下间距
& & & &间距标注：分割线的高度、颜色、模块间隔、整体界面左右空白间距，一般为24px
& & & &区域标注：背景色、透明度、点击区域的长宽
当然Sketch Measure中这些都是可以自动生成的不用去自己测量，系统自动会给你标注好，你只需要轻轻的点一下，就可以去喝咖啡了~~
& & & &给大家简单看一下sketch的页面吧
& & & &如果你对这套软件感兴趣那么请关注我的微信公众号，在那里我会不定期更新与大家分享，如果需要我也会录制一系列教程与大家探讨~
可以记录推荐数据哦！
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)PS Play – 在手机同步显示PSD利器 | 盒子UI
&保持登录状态
您可以用合作网站帐号登录(免注册):
PS Play – 在手机同步显示PSD利器
各平台版本不同
win7 / win8 / Mac
腾讯出品的一个可在手机、PAD上查看PSD效果的APP，有了它，再也不用在手机、电脑上来回传图片看效果了。
如何确定你的Photoshop是什么版本？
Photoshop & 帮助 & 系统信息…
Ps Play找到连接后如何获取密码？
密码是开启Photoshop远程连接时自己设置的，如果遗忘可以自己在[Photoshop & 编辑 & 远程连接…]中重新设定。
如何获取本机IP地址？
[Photoshop & 编辑 & 远程连接…]设定界面中就有“IPv4地址”
我的台式电脑没有无线网卡，如何连接Ps Play？
如果你是通过同一个路由设备连接电脑和iPhone手机时，就无需无线网卡。
Windows系统第一次连接不上？
可以检查一下 [控制面板 & 系统和安全 & Windows防火墙 & 允许程序通过Windows防火墙] 里是否允许Photoshop通过。
为什么偶尔会断开连接？
Photoshop远程连接功能限制，在软件中有弹出窗口时会中断连接（如远程连接设置界面、图层样式界面等），可以尝试打开/关闭Ps Play自动刷新功能化解这个问题。
如何更改Ps Play画布背景？
Ps Play首页 & 设置 & 背景，可全局设定，也可以在每个连接的设置里单独设定。
「1:1实际像素」有什么用？
帮你快速切换到实际像素预览模式。
「适配屏幕」有什么用？
帮你快速切换到全屏（以手机宽度数值为准）预览模式。
「快照截屏」有什么用？
帮你截屏记录当前预览画面，并保存到手机相簿中。
「快照历史」有什么用？
可最多记录10张历史快照截屏，方便你对比前后设计差异。
「上传」有什么用？
上传功能可以方便你将移动设备的图片快速传到电脑Photoshop中直接打开图档。
「分享」有什么用？
可将截图通过QQ、微信、Email等快速分享给你的小伙伴们。
下载地址：求用PS做一个苹果4手机的界面，直接给界面文件就行_百度知道
求用PS做一个苹果4手机的界面，直接给界面文件就行
我有更好的答案
设置-通用-辅助功能-肢体活动里面的assistiveTouch 把这个打开就可以了
1条折叠回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Photoshop绘制逼真的苹果手机详细教程
& 07-05 17:06:58 & 作者：南辰翻译 &
本教程Photoshop主要使用图层样式和圆角矩形绘制逼真的苹果手机教程，教程不算太难，喜欢的朋友可以一起来学习
　　第1步：　　打开Photoshop，Ctrl+N新建文件。　　第2步：　　利用圆角矩形工具创建出iPhone的轮廓。这里我使用的圆角为50px。　　第3步：　　为iPhone添加图层样式如下。先添加外发光，然后进行描边。　　第4步：　　在iPhone的顶部及左右两侧创建颜色为#52524e的矩形。　　第5步：　　继续利用圆角矩形工具在iPhone中创建半径为50px的圆角矩形。填充为黑色。　　然后为其添加图层样式。　　第6步：　　利用圆角矩形工具在手机左侧创建按钮，半径选择2px。并双击图层，为其添加渐变及描边样式。将此按钮图层置于手机图层下方。　　渐变色值如下。　　添加描边。　　第7步：　　在按钮下方再创建一个小按钮，并添加渐变及描边样式。　　
大家感兴趣的内容
12345678910
最近更新的内容}