Tools Photoshop CS6
上周我们已经将产品原型基本完成了, 本周我们就按照原型图绘制出设计图, 工具当然是大家最熟悉不过的PS(因为 不太会用Sketch) 作为一名开发者, 花个一周时间来学习入门一下PS还是很有必要的, 好了 话不多说, 进入到我们今天的工作中来.
当我们拿到原型图的时候 需要分析原型图中的所有元素, 定下色彩标准和字体的标准. 当然, 不同的项目, 也需要根据不同的情况来制定标准. 由于整套原型图的内容较多, 所以今天就把首页来绘制出来.PS 中有很多的快捷键 能够大幅的提高我们的工作效率.
首先我们打开Photoshop 新建一个画布(CMD + N), 名称就和控制器名字相同即可, 因为一般来说都是一个页面对应一个控制器的, 像iOS端就是ViewController, Android就叫Actitity. 在项目中名称统一 很有必要!! 由于目前中国市场Android的设计都是跪舔iOS的 所以我们的宽高比就按照iPhone5S的来 由于iOS是单位是点, PS的单位是像素所以宽高需X2 也就是所谓的@2x 二倍图. 分辨率我们选择72 颜色选择8位 RGB即可 (如需出图请选择分辨率300 颜色8位CYMK)
新建画布 依照我的习惯, 网格(CMD + “)和标尺(CMD + :)先给出来, 设置网格大小可以进入首选项调节(CMD + K)图片可以从华盖图库或者花瓣网中捡取. 图片大小使用变化选区(CMD + T)调节到想要的位置. 记住, 所有的图片必须要风格一致, 这样才不会给人感觉到突兀.
网格和标尺 按照原型图来看 有一个版弧的浮层, 这个怎么做呢, 首先我们需要使用选区工具(M) 选择圆形选取工具(shift + M) 画一个大圆, 使用选区的BOOL运算(shift / option) 来控制增加和减少选区 , 绘制出半圆后选择图层样式如下图所示, 就能够出现效果啦.
图层样式 效果是不是还不错, 接下来我们在浮层上新建一个图层(CMD + shift + N) 绘制 PageControl, 选择画笔工具(B) 硬度选到最硬(shift + ]) 打开画笔菜单(F5) 调节间距 安卓shift键拖拽 PageControl就完成了
浮层效果 然后我们来做搜索栏, 根据标尺左右空出8也就是16px (padding == 8 是苹果在AutoLayout中推荐的间距) 选择圆角矩形工具, 路径转选区, 图层选项内描边,文本输入框就完成了, 放大镜 我们使用选区的BOOL运算也能够搞定, 接下来我们绘制Cell部分, 绘制完成后使用组合(CMD + G) 然后复制(CMD + J) 可以复用对应元素.
接下来我们来做Tabbar 部分 Tabbar 的高度是49 对应Retina屏幕就是98px 使用标尺定位. 对应的icon, 除了Discover是用选区的BOOL运算的做得, 其他两个都魔棒工具抠图填充而来的. 这里的关键是要大小一致(60px 乘以 60px) 既符合了iOS原生控件尺寸, 也可以方便切图.
Tabbar 最后我们将Post按钮使用选区的BOOL运算, 调节透明度完成后最终效果如下:
最终效果 本文仅为本码农一周工作之余所学PS心得, 水文一篇, 不对之处也请各位设计师们不吝惜之出!! 本文相关psd, 请到github上进行下载!