Castie!

正态分布, 优劣伴生

北冥有鱼,其名为鲲(kūn)。鲲之大,不知其几千里也;化而为鸟,其名为鹏。鹏之背,不知其几千里也;怒而飞,其翼若垂天之云。是鸟也,海运则将徙于南冥。南冥者,天池也。


北海若曰:“井鼃不可以语于海者,拘于虚也;夏虫不可以语于冰者,笃于时也;曲士不可以语于道者,束于教也。今尔出于崖涘,观于大海,乃知尔丑,尔将可与语大理矣。

UI/UX 使用Ps 进行视觉设计

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上进行下载!

最近的文章

iOS 投机流实现 无限轮播图

在上周, 我们已经通过Ps将Lifestyle页面给设计出来了, 本周我们就可以按照设计图纸进行开工啦, 今天我们就按部就班的完成LifestyleViewController的第一个功能无限轮播图!!参考链接: iOS 做好开工前的准备 iOS 集成Reveal UI调试利器 UI/UX 产品原型 从Axure开始 UI/UX 使用Ps 进行视觉设计以下内容在上述文章基础上进行, 请事先查阅.无限轮播图, 这种简单的功能没什么技术含量, 实现的方式也各种各样, 技术含量较高的...…

移动开发继续阅读
更早的文章

UI/UX 产品原型 从Axure开始

Tools Axure RP 7.0俗话说的好, 不懂产品的设计师 不是一个好开发者! 作为一个iOS开发者, 也势必随波逐流的力争跻身全栈的行列, 话说产品是什么? 什么是产品? 什么是好产品? 好产品能为我们带来什么? 作为产品小白 还知知甚浅.. 但是我相信人人都是产品经理, 每个开发者都有一个做产品的心, 因为一个好产品背后带来的效应和效益是巨大的.接着上周的项目 上期我们已经把项目的基本框架给搭出来了,也集成了Reveal 可以实时监控UI的层次的变化 那Lifestyle到底是...…

UI设计继续阅读