存储为web所用格式(ps切片工具的使用,存储为web格式)

圈圈笔记 51

大家好,我是小江,今天小江分享Photoshop的配置技巧,非常适合新手方便学习UI设计的

虽然说是移动界面设计,但同样适用于其它设计工作,比如网页、平面、插画设计等等,好了废话不多说,快让我们开始吧。

Photoshop新建文档设置

首先,在设计UI界面时,要先建立UI界面尺寸规范,尤其是面对两种系统,ios和 Android。

现在Ps2019新建菜单文档类型里的移动应用程序设计中都有可选规范,在这里小江选择ios的界面规范 。

然后还要选择画板大小,ps画板大小有许多对应的手机尺寸大小,

如:iPhone8/7/6(750,1334)

iPhoneX(1125,2346)等等,

小江我通常选择iPhone8/7/6(750,1334)的画板尺寸。如果喜欢iPhoneX也可以尝试一下。

因为UI界面就是手机APP界面,所以选择分辨率时,要按照手机分辨率来设置。

通常小江选用分辨率为72像素/英寸(ppi),颜色模式为RGB颜色,背景内容为白色

配置如下图:

对齐设置

小江以前刚开始接触PS时,操作图层对齐,总是要花费一些时间去慢慢的调整对齐,

现在小江运用PS不会把时间放在这上面了O(∩_∩)O~~,因为小江有小小的绝招,帮助自己,不用花心思对齐了。

首先在菜单栏一条找到视图,打开找到对齐,把它点开,然后在把下面的对齐到打开,点选全部就OK了,非常简单又实用的技巧。

这个就是当你使用图层、形状等操作时自动对齐网格,画矢量图不怕模糊边缘,确保每个像素保持清晰。

配置如下图:

首选项设置

建立完后,小江喜欢打开首选项,重新设置一下,好方便自己设计,小江打开首选项通常都是按快捷键Ctrl+k,方便快捷。

打开后在工具选项中关掉启用轻击平移,这只是一个滑移效果,占内存又不能提高操作效率,所以小江建议关掉。

然后打开,根据HUD垂直移动来改变圆形画笔硬度,这小江首推功能挺好用的,按Alt+右键左右/上下移动可以分别改变画笔的大小和硬度。

在然后打开,将矢量工具与变换与像素网格对齐,这个小江强烈建议UI设计开启这个功能,这个让你来矢量也不会产生半像素虚边,十分好用。

但在需要微调整时可暂时关闭它。

配置如下图:

文本设置

字体上小江一般把字体设置为犀利,如果你是Photoshop CC版本,它有一个Windows LCD/Mac LCD抗锯齿功能,文字可以为网页一样效果了,所以小江建议把photoshop升级到Photoshop CC吧。

配置如下图:

全局光

如果设计苹果iOS人机交互界面时,小江喜欢在菜单栏的图层选项中的图层样式打开选择全局光,灯光设置为90°。(如下图)

配置如下图:

网格设置

网格设置博大精深,小江有现在水平全靠对网格的利用。

面对现在设计iOS界面都要兼容视网膜(Retina),所以小江把每个网格设置为2像素,这样小江就不怕图像在视网膜设备(手机)下变得模糊了。

首先打开首选项快捷键(Ctrl+k),在参考线、网格和切片里,选择网格线间隔设置

为4像素;子网格2。

或者网格线间隔:2像素;子网格1。

我喜欢前者^_^

配置如下图:

导出设置

以前小江不熟悉PS,是直接在文件选项中点导出来导出图像,现在小江喜欢按三个大键加S(快捷键shift+ctrl+alt+s),来导出图像。

因为不管我们是做网页还是设计iOS APP应用程序时,导出图像最好使用存储为Web所用格式来导出。

这里小江通过存储为Web格式…导出PNG-24为例,其中默认设置比较重要,关掉转换为 sRGB品质设置为两次立方

配置如下图:

Retina显示器设置

如果你是使用带Retina视网膜的MacBook Pro,你应该确保你是使用2800×1800像素

操作:Apple菜单 → 系统偏好设置 → 显示 → 最适合显示器

颜色配置

颜色配置是极为复杂的一个操作,如果你不是这领域的大神,那么还是老老实实的用推荐的配置吧,这里小江选择了MarcEdwards的颜色配置选项。

因为小江也玩不转颜色设置,差点都调不回来了。

配置如下图:

总结

本次是小江针对UI设计的Phtoshop基本设置介绍,除了以上这些技巧外,大部分设计师都会有自己的设计配置小技巧,所以如果你有一些好用的技巧设置,欢迎在下方留言处分享给贪心的小江和其它设计师们。

本文章于微信公众号同步推送。

上一篇:

下一篇:

  推荐阅读

分享