UI设计PS配置技巧.docx

UI设计Photoshop配置技巧如果你是设计移动UI界面又是Photoshop新手，那么今天分享的技巧教程很适合你，虽然说是移动 界面设计，但同样适用于其它设计工作，比如网页设计、平面设计等等，让我们开始吧Photoshop新建文档设置操作：菜单一文件一新建宽度：640像素高度：1136像素（4英寸iPhone设备）分辨率：72像素/英寸（ppi）颜色模式：RGB颜色背景内容：白色（可选）颜色配置文件：不要色彩管理此文件（更多颜色设置后）像素长宽比：方形像素配置如下图:对齐设置这个处就是当你使用图层、形状等操作时自动对齐网格，画矢量图不怕模糊边缘，确保每个像素保持 清晰设置：菜单f视图一对齐菜单一视图一对齐到f全部选择⑶滤镜(!)视图②窗口 (些)带助(H)校样设S(U) > .校样颉色(L) Ctrl+Y矿治(图层 2, RGB/8) * :色域警告(W) Shift+Ctil+Y像素长宽比(5) 像素长宽比技正(P)放大⑴缩小(0)按屏幕大小缩放(F) 实际像素(A) 打印尺寸(Z)Ctrl++ Ctrl+- Ctrl+0 Ctrl+1屏幕模式(M)>9显示额外内容(X)Cbl+H显示(H)►标尺(R)Ctrl+RV对齐(N)Shift+Ctrl+;9慢定参考箕(G)Afc+Orl+;潘除参考统(。

)新建参考线(E)...32位预览选项…谀定切片(K) 潜除切片(C)图层(I) >71首选项设置操作：菜单f编辑f首选项一常规，建议按下图设置启用轻击平移仅仅是一个滑移效果，占内存又不能提高操作效率，建议关掉根据HUD垂直移动来改变圆形画笔硬度功能挺好用的，按Alt+右键左右/上下移动可以分别改变画笔的大小和硬度将矢量工具与变换与像素网格对齐这个强烈建议UI设计开启这个功能，这个让你来矢量力不会产生半像素虚边，十分好用但在需要 微调整时可暂时关闭它首选项常规界面文件处理性能光标透明度与色域单位与标尺参考线、网格和切片增效工具文字拾色器(0： | AdobeHUD拾色器(ti)： |色相条纹(4、) 3图像播值(I)： |两次立方(自动) 3选项厂自动更新打开的文档(A)r完成后用声音提示q)何动态预色滑块(Y)17导出贴枝(X)17使用Shift铤切换工具Q2)17在置入时调整图像大小(Q)r带动画效果的缩放(乙)|7缩放时调整窗口大小低)r用滚抡缩放(9厂将单击点缩敖至中心(K)r启用《击平移(日何根据HUD垂直移动来改变圆形画笔硬度Q将翻格化国像作为智能对象置入或拖动Q)P格矢量工具与变换与像素网格对齐r- F历史记录(L)将记录项目存储到；G元数«(M)r文本文件(T) 选取(Q)…编辑记录项S(£)： I仅限工作进程三］文本设置字体我一般把字体设置为犀利，如果你是Photoshop CC版本，它有--个Windows LCD/Mac LCD抗锯 齿功能，文字可以为网页一样效果了，所以建议升级到Photoshop CC吧。

操作：首先选定文本一字符工具(AA)选择Windows LCD/Mac LCDS^(L) 缨(Y) 踌(S) 顺(I) 3D(D) 赠(V) ®n(W)藉助(H)▼ Regular ▼ 迎12像素 ▼ aaWindows LCD :萋参耋■Windows LCD全局光继苹果iOS人机界面指南，你应该把灯光设置为90° 操作：图层一图层样式一全局光90°图像(D图层(D 文字(Y)选择(9 滤镜(！)视图(Y) ®n(w)帮助(d)新建(N)复制图层(D)...1删除重命名图房…1图层样式(Y)>11智能滤镜新建埴充囹层(W)►新建调整图层)1图层内容选项(0)..，►图层蒙版(M)>矢量登版(V)►创建眄贴鼓旗(C)AR+Ctrl+G智能对象►视频图层►删格化(Z)►新建基于囹层的切片，(8)图层触(G)Qrl+G取消图层疆短(U) 隐旅图层(R)Shift+Ctrl+G排列(A)>|合并形状(H)>1混合选项(N)..・层3 R(400全局光(L)...斜面和浮 锄(K)... 内阴影⑴... 内发光(W)...光泽⑴…颜色叠加(V).., 渐变叠加(G)... 图案叠加(Y).., 外发光(O)...投影(D)...拷贝图层样式(C) 粘贴图层样式(P) 清除魄样式(A)龌破(R) 陷藏所有效果(H) 88放效果(F).“明度：loo%网格设置现在设计iOS界面都要兼容视网膜(Retina),所以我把每个网格设置为2像素，这样我就不怕图像在 视网膜设备下变得模糊了。

操作：菜单一编辑一首选项一参考线、网格和切片，网格线间隔：4像素;子网格2或者网格 线间隔：2像素;子网格1我喜欢前者导出设置不管我们是做网页不审设计iOS APP应用程序时，导出图像最好是使用”存储为Web所用格式”来导 出这里通过”存储为Web格式…”导出PNG-24为例，其中默认设置比较重要，如下图：操作：菜单一文件一存储为Web格式所用格式预设：PNG-24透明：勾选交错：未勾选嵌入颜色配置文件：未勾选（Photoshop CC版本才有）转换为sRGB：未勾选质量：两次立方Retina显示器设置如果你是使用带Retina视网膜的MacBook Pro,你应该确保你是使用2800X1800像素(1440X900点)操作：Apple菜单一系统偏好设置一显示一最适合显示器Built-in Retina Display| ColorResolution: • Best for display 0 ScaledBrightness:， 〔Automatically adjust brightnessAirPlay Display: No Dt viccs Detected/Show mirroring options in the menu bar when available颜色配置颜色配置是极为复杂的一个操作，如果你不是这领域的大神，那么还是老老实实的用推荐的配置吧, 这里我选择了 Marc Edwards (http: //b jango. com/articles/photoshop)的颜色配置选项。

总结本指南针是针对UI设计的Phtoshop基本设置介绍，除了以上这些，大多数设计师都会有自己使用的 自定义设置，所以如果你有一些技巧设置，欢迎在下方留言处分享给设计达人网和其它设计师们。