2018-08-14 15:14:13 jiayuan237513457 阅读数 4126
  • 响应式网站切图实操

    本课程讲以互动的方式与学员共同打造一个网站,从创意开始,一直到整体页面被呈现出来。从原生的方式到主流的UI开发过程。一切从零开始,只要你有HTML5基础,通过22学时的努力,你将走向前端工程师的行列。

    7737 人正在学习 去看看 姜威

蓝湖使用环境,需要在 PSCC2015以上版本使用,需要官方提供的压缩工具才能打开。

官网直接下载安装,结束后可直接在PS,窗口-->扩展工具中打开。

切图及标注使用方法:

扩展中打开,登录蓝湖账号密码;

选择当前设计稿的设计尺寸,一般情况下移动端手机设计稿是iPhone 6尺寸设计稿750*1334选择 Ios @2x ;

当前页面的切图,找到需要切图的图层部分标记一下,会出现一个虚线框;

切图完成后 选择上传到全部画板,就会把设计图上传到蓝湖的Web端,开发可以在Web端 查看设计稿的标注、切图、颜色、代码等内容,切图有@1x,@2x,@3x,型号,点击需要切图的位置就可以下载。

交互原型使用方法:

在所有设计稿上传到蓝湖Web端后,可以用交互工具将设计稿交互连接起来,直接预览最终交互效果;

还可以手机下载蓝湖APP,在手机上查看带交互的设计稿,更容易展示给用户观看。

2018-05-11 15:45:06 T_yoo_csdn 阅读数 923
  • 响应式网站切图实操

    本课程讲以互动的方式与学员共同打造一个网站,从创意开始,一直到整体页面被呈现出来。从原生的方式到主流的UI开发过程。一切从零开始,只要你有HTML5基础,通过22学时的努力,你将走向前端工程师的行列。

    7737 人正在学习 去看看 姜威

移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 

 

切片要求:

1、    设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X1334,图片资源尺寸则是2倍图尺寸,在二倍图的基础上压缩成50%,图片资源尺寸则是1倍图尺寸;

2、产品效果图独立切片,即是每张效果图独立建立一个文件夹(命名以效果图名称为准),文件夹内容包含1倍图文件、2倍图文件、                                     3倍图文件和标识文件

3、图片命名要求语义化,格式为png;

4、图片资源需要备有1倍图、2倍图、3倍图,3倍图命名规则为:添加后缀@3x;2倍图命名规则为:添加后缀@2x;例如:1倍图:abg.png,2倍图则为:abc@2x.png,3倍图则为:abc@3x.png;

5、字体:IOS默认字体—— 英文  HelveticalNeue   中文 黑体;字体大小采用点pt,设计稿以相对单位px,字体大小需要进行转化,转化公式为:px*72/96=pt(eg:12px*72/96=9pt), 字体颜色只需给出rgb值(eg:color:rgb(255,255,255));

6、页面纯色背景需标出rgb值,如果有透明度则需标出rgba值,其他特殊背景直接切图;

7、页面的图标、色块、按钮的高度都必须是4的倍数,最小像素不能低于44px,如不够可以添加补白;

8、页面外边距留白为10px;

9.启动图标1024*1024,png格式,不能透明底,透明的部分补白色。

 

IOS切图规范:

设计图:1242X2208

三倍图:按1242X2208来切  iphone plus

二倍图:将整个设计图压缩成750X1334 按750X1334切

一倍图:在二倍图的基础上压缩成50%一倍图 

 

Ios启动图

  1. 图标按照最大1024*1024来设计,之后按照比例缩小到每个尺寸,再进行调整,提交没有高光和阴影的直角方形图即可;
  2. 29*29
  3. 58*58
  4. 40*40
  5. 80*80 

 

2016-12-21 11:15:00 weixin_30338743 阅读数 7
  • 响应式网站切图实操

    本课程讲以互动的方式与学员共同打造一个网站,从创意开始,一直到整体页面被呈现出来。从原生的方式到主流的UI开发过程。一切从零开始,只要你有HTML5基础,通过22学时的努力,你将走向前端工程师的行列。

    7737 人正在学习 去看看 姜威

 

这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍。这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用。

这里我们只说iOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱。1

Part 1 项目立项

文件结构

项目名称v1.0 -> 01_源文件psd 
02_效果图jpg 
03_标注图png 
04_标注源文件 
05_切片资源png 
原型.rar

工具:

界面设计:PS, AI

标注:PxCook(Windows), Sketch(Mac)

切图:Cutterman(PS插件), Assistor PS(PS插件)

Part 2 Photoshop

设计尺寸

  1. 640*960 4时代的尺寸

  2. 640*1136 5/5S/5C

  3. 750*1334 6 目前我做设计稿的设计尺寸,IPhone6的尺寸,向下可以适配4,5,向上可以适配6 plus。我记得IP6推出后,我问总监应该用什么尺寸设计,他说用IP6的吧,好适配,切出来就是@2x了,改一改上下都能照顾到。 
    ps setting - iPhone 6 
    推荐做设计稿的时候使用IPhone6的尺寸进行设计。

参考线

文档建立之初就设置好参考线是个很好的工作习惯。上下的参考线很容易设置,因为是根据iPhone自身系统设置的,左右的参考线我习惯设置为24px,也就是显示内容距离边框的距离。这不是绝对的,我和总监研究过,究竟是设置为左右30px还是24px比较好,通过对国内国外各种APP的对比,觉得24px更适合一些,不宽不窄,这个完全是设计师个人的设计习惯,所以不要当成什么规范,确切的说,整个屏幕你都可以随便做,但是我们这里说的是正常页面。

pt和px

公式一:

1pt= (DPI / 72) px

当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 ), 1pt=1px; 当新建画布分辨率为72*2=144ppi时,1pt=2px。

附与尺寸有关的定义:

px:pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元

pt: point,点,印刷行业常用单位,等于1/72英寸

ppi: pixel per inch,每英寸像素数,该值越高,则屏幕越细腻

dpi: dot per inch,每英寸多少点,该值越高,则图片越细腻

dp: dip,Density-independent pixel, 是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度

sp: scale-independent pixel,安卓开发用的字体大小单位。2

Part 3 页面标注

标注颜色

颜色用16进制和RGB表示都可能用得到,建议标注颜色时,两种色值表达都标上(16进制&RGB)。

标注内容

文字需要提供:字体大小(px),字体颜色;

顶部标题栏的背景色值,透明度;

标题栏下方以及Tab bar上方其实有一条分割线,需要提供色值;

内容显示区域的背景色;

底部Tab bar的背景色值。

页面需要标注的地方

所有元素统一距离屏幕最左24px。

1、标题栏:背景色,标题栏文字大小,文字颜色;

2、Banner:所有撑满横屏的大图,不需要横向尺寸,把高度标出了就可以了;

3、菜单图标:

图标的大小和图标的可点击区域不一定一致。

也就是说,图标可以做的很小,但是为了保证点击的准确性和流畅性,工程师可以把可点击区域设置的很大,这样标注和切图的时候就要注意,标注的是可点击区域的大小,切图切的也是可点击区域的大小,也就是用透明区域去补上,否则图片会模糊。

4、模块间隔:这个位置其实不是太重要,我习惯标注上这里,麻烦能少则少。

5、图片+文字:这个应该比较常见,只标注一个单位(图+文)就可以了。

图片需要标注宽高。

图片距离上下左右的距离,文字大小颜色,这里的文字其实算两个控件,标题文字以及说明文字,需要单独标出。

6、Tab Bar:这个位置其实比较特殊,你可以单独标注图标大小+文字大小;还可以图标+文字算作一个控件,整个切出来;我们工程师的习惯是用整个的,也就是图标+文字算作一个ICON。

所有的页面标注总结起来就是:标文字,标图片,标间距,标区域;

切图的时候记得输出个偶数尺寸的切片。

Part 4 切片资源的输出

全局性的切图常见问题

① 你的所有设计尺寸,包括图形效果,应该尽量使用偶数。

技术开发使用的尺寸是设计稿像素尺寸的一半,也就是说,如果你用24px的字体,技术那边就是设置为12px。

② 切图尺寸应该提供几套?

*.png IPhone2G,3G,3GS使用(好像没人用这手机了吧)

*@2x.png IPhone4,5,6优先加载此尺寸图片(不是必须使用这个尺寸,是优先加载调用这个尺寸)

*@3x.png IPhone6 plus使用的尺寸

可以简单的理解为倍数关系(其实是为了满足不同分辨率,我觉得不用过于深究),如果你使用IPhone 6尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。

理论上,为了达到最好的视觉效果,你应该输出三套尺寸,推荐输出三种尺寸的切片资源。

另外现在几乎看不到3GS了,所以需不需要提供一倍图,还是要和工程师讨论一下~

@1x @2x @3x是开发工具Xcode软件需要的UI资源,命好名称后,IOS设备会自动的选取合适尺寸。

③共用资源的图片,输出一张就可以

类似重复的按钮之类的,只要提供一张共用的资源就可以了;上面的文字是技术写上去的。

理论上按照最佳视觉效果,你应该提供多尺寸的图片;但通常我只提供最大尺寸的一张图片即可,这一点要和你的搭档沟通好,却问他需要什么方式。

④切片的输出格式

位图格式:PNG 24,PNG 8,JPG

在JPG和PNG两种格式图片大小相差不是很大的情况下,推荐使用PNG;如果图片大小相差很大,使用JPG。

欢迎页面,ICON一定要使用PNG格式,在不影响视觉效果的前提下,可以考虑使用PNG 8;

矢量图格式:PDF,SVG

IOS原生支持的两种矢量图片格式,但是支持的一般,并不能保证100%把所有图片效果渲染出来;为了保险起见,我通常不使用这两种格式,推荐还是使用位图,如果以后技术提升,100%支持SVG和PDF这种矢量格式图,那个时候也许不用提供这么多套尺寸了~

⑤图标的点击区域

最小点击区域问题:

IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点),在设备上1 point等于1像素,所以转换成像素就是44*44像素,换算成物理尺寸大概是7mm左右吧(人机工效学研究中得出的结论:用食指操作,触击范围在7mm左右合适;用拇指操作,范围在9mm左右合适)。

⑥图片图标的不同状态

按钮可能有正常(normal),按下(pressed),选中(selected),禁用(disabled)等多种状态。

切片的命名规则

切片种类+功能+图片描述(可有可无)+状态.png

名称应使用英文命名(中文不识别,推荐小写字母),不要以数字或者符号当作开头,使用下划线进行连接。

切图常用命名习惯

举个例子:一个首页的处于正常状态的确定按钮

btn_sure_nor.png

btn_sure_nor@2x.png

切片种类是按钮(btn);功能是确定(sure);状态是normal(正常)

Tab bar(底部栏)

图标+文字的模式,图标最好单独切,文字后面程序加上去。另外记住,同一模块的图标切片大小保持一致。

Part 5 工作常用数据

你需要使用的字体

如果是用Mac设计的小伙伴,直接就用苹果黑体字就好了;不过用Windows的就没那么幸运了,PC上还没和IPhone默认字体效果完全一样的字体,通常都是拿其他字体代替。

苹果丽黑 Hiragino Sans GB W3(普通)/W6(粗体) 比较接近IPhone字体的一款字体,这是我之前一直使用的设计字体。

黑体-简 STHeitiSC-Light Mac里面拷出来的苹果黑体,比较贴近IPhone手机字体,目前在用。

关于字体大小的问题

顶部操作栏文字大小 34-38px

标题文字大小 28-34px

正文文字大小 26-30px

辅助性文字大小 20-24px

Tab bar文字大小 20px

文字大小只是一个范围,这要根据设计的视觉效果来决定,不要死记硬背,但是切记,字体大小要用偶数。

你需要知道的IPhone设计尺寸(这里是一个整屏的尺寸包括了状态栏)

320*480 IPhone3GS (我没见过3GS实体机,只在网上见过图片,但你需要知道这个尺寸)

640*960 IPhone 4/4s (4时代的设计尺寸)

640*1136 IPhone 5/5s/5c (5时代的设计尺寸,虽然现在出来6/6 plus,但还有人再用这个尺寸设计)

750*1334 IPhone 6 (目前最新的设计尺寸,基本上现在做IOS的APP设计,用这个的应该最多)

1242*2208 IPhone6 plus (这是标准分辨率,也就是设计需要的尺寸;另外还存在物理分辨率是1080*1920,这并不需要深入理解。plus还涉及到横屏,横屏是是没有状态栏的,设计横屏时可以参考IPad的设计模式)

你需要提交的启动页面

依据开发工具Xcode提供的LaunchImage(启动页面)的各项尺寸:

320*480 IPhone3GS (我没见过3GS实体机,只在网上见过图片,但你需要知道这个尺寸)

640*960 IPhone 4/4s (4时代的设计尺寸)

640*1136 IPhone 5/5s/5c (5时代的设计尺寸,虽然现在出来6/6 plus,但还有人再用这个尺寸设计)

750*1334 IPhone 6 (目前最新的设计尺寸,基本上现在做IOS的APP设计,用这个的应该最多)

1242*2208 IPhone6 plus (这是标准分辨率,也就是设计需要的尺寸;另外还存在物理分辨率是1080*1920,这并不需要深入理解。plus还涉及到横屏,横屏是是没有状态栏的,设计横屏时可以参考IPad的设计模式)

完整列表如下:

iPhone尺寸规格

设备iPhone宽Width高Height对角线Diagonal逻辑分辨率(points)Scale Factor设备分辨率(pixel resolution)PPI
1st gen(includs 1/1G/2G) 2.4 inches (61 mm) 4.5 inches (115 mm) 3.5-inch 320*480 @1x 320*480 163
3G(s) 2.44 inches (62.1 mm) 4.55 inches (115.5 mm) 3.5-inch 320*480 @1x 320*480 163
4(s) 2.31 inches (58.6 mm) 4.54 inches (115.2 mm) 3.5-inch 320x480 @2x 640x960 326
5c 2.33 inches (59.2 mm) 4.90 inches (124.4 mm) 4-inch 320x568 @2x 640x1136 326
5(s) 2.31 inches (58.6 mm) 4.87 inches (123.8 mm) 4-inch 320x568 @2x 640x1136 326
6(s) 2.64 inches (67.0 mm, 67.1 mm for 6s) 5.44 inches (138.1 mm, 138.3 mm for 6s) 4.7-inch standard mode 375x667(zoomed mode 320x568) @2x standard mode 750x1334(zoomed mode 640x1136) 326
6(s) Plus 3.06 inches (77.8 mm), 3.07 inches (77.9 mm) for 6s plus 6.22 inches (158.1 mm), 6.23 inches (158.2 mm) for 6s plus 5.5-inch standard mode 414x736(zoomed mode 375×667) @3x standard mode 1242x2208(zoomed mode 1125×2001) downsampled / 1.15(× 0.96) -> 1080x1920 401

iPad尺寸规格

设备iPad宽Width高Height对角线Diagonal逻辑分辨率(point)Scale Factor设备分辨率(pixel)PPI
mini 1 5.3 inches (134.7 mm) 7.87 inches (200 mm) 7.9-inch 768*1024 @1x 768*1024 163
mini 2(3) 5.3 inches (134.7 mm) 7.87 inches (200 mm) 7.9-inch 768*1024 @2x 1536x2048 326
mini 4 5.3 inches (134.8 mm) 8 inches (203.2 mm) 7.9-inch 768*1024 @2x 1536x2048 264
Air(Air 2) 6.6 inches (169.5 mm) 9.4 inches (240 mm) 9.7-inch 768*1024 @2x 1536x2048 264
Pro 8.68 inches (220.6 mm) 12 inches (305.7 mm) 12.9-inch 1024x1366 @2x 2048x2732 264

注意,启动页面一定要是PNG格式的。

图标的提交尺寸

IOS系统可以自动把图片裁剪为圆角,所以提交图标的时候,你只需要提交正方形的PNG图片即可。

因为需要的图标非常多,不可能全部加进去,只能选择最好的尺寸,我们的工程师要求我提供以下图标尺寸:

1024*1024 Retina APP Icon for APP Store(高清屏的APP Store)

512*512 APP Icon for APP Store(普通屏幕的APP Store)

120*120 6的主屏幕尺寸

114*114 5/4s/4的主屏幕图标尺寸

57*57 3GS的主屏幕图标尺寸

58*58 Retina Settings图标尺寸

29*29 Settings图标尺寸

提交的图标尺寸不是固定的,所以,去找和你搭档的工程师,让他给你出一份需要提交的图标尺寸文档。


  1. “纯干货!一款APP从设计稿到切图过程全方位揭秘” http://www.uisdc.com/from-design-to-slice 
  2. “扒一扒那些px、pt、ppi、dpi、dp、sp之间的关系” http://design.jobbole.com/92179/ 
 
 

转载于:https://www.cnblogs.com/gongyuhonglou/p/6206973.html

2016-10-09 21:21:00 aaa1231722 阅读数 2
  • 响应式网站切图实操

    本课程讲以互动的方式与学员共同打造一个网站,从创意开始,一直到整体页面被呈现出来。从原生的方式到主流的UI开发过程。一切从零开始,只要你有HTML5基础,通过22学时的努力,你将走向前端工程师的行列。

    7737 人正在学习 去看看 姜威

用脚本来简化iOS美术同学的工作

问题

我们知道,在 iOS 开发中,为了使我们的 app 能够同时支持 iPhone 的 Retina 屏幕和普通屏幕,美术同学需要对 UI 设计稿中的每个元素进行 2 次切图。苹果要求对图片元素的命名分别为 name.png 和 name@2x.png,带 @2x 的表示是 Retina 屏幕的贴图,不带 @2x 的同名文件为普通屏幕的贴图。

我在开发的时候发现很难要求美术同学按照开发的要求来对图片命名。她们通常对于切图的命名是例如登录按钮大 .png , 登录按钮小 .png登录按钮按下大 .png 登录按钮按下小 .png 这样的形式。于是,对这些文件按照苹果的要求进行重命名就成了我这个码农的一个体力活。

解决方案

有什么方法能减少开发和美术的体力活呢?想到因为 name@2x.png 的图片是 name.png 图片的 2 整倍,所以,我们完全可以让美术只切 @2x 的大图,而我们使用脚本来生成小图。于是我写了下面这样的一个脚本,我只需要将所有的大图按照类似 name-1@2x.png , name-2@2x.png 方式命名,然后脚本就会自动帮我生成对应的名为 name-1.png 和 name-2.png 的小图。

#! /bin/bash
# File name : convertImage.sh
# Author: Tang Qiao
#

# print usage
usage() {
cat << EOF
Usage:
convertImage.sh <src directory> <dest directory>
EOF
}

if [ $# -ne 2 ]; then
usage
exit 1
fi

SRC_DIR=$1
DEST_DIR=$2

# check src dir
if [ ! -d $SRC_DIR ]; then
echo "src directory not exist: $SRC_DIR"
exit 1
fi

# check dest dir
if [ ! -d $DEST_DIR ]; then
mkdir -p $DEST_DIR
fi

for src_file in $SRC_DIR/*.* ; do
echo "process file name: $src_file"
# 获得去掉文件名的纯路径
src_path=`dirname $src_file`
# 获得去掉路径的纯文件名
filename=`basename $src_file`
# 获得文件名字 (不包括扩展名)
name=`echo "$filename" | cut -d'.' -f1`
# remove @2x in filename if there is
name=`echo "$name" | cut -d"@" -f1`
# 获得文件扩展名
extension=`echo "$filename" | cut -d'.' -f2`
dest_file="$DEST_DIR/${name}.${extension}"

convert $src_file -resize 50% $dest_file
done

脚本使用方法:将以上代码另存为 convertImage.sh,然后用以下方式调用此脚本,即可将源文件夹中所有以 @2x 结尾的图片文件转成一半大小的、去掉 @2x 的小图片。

convertImage.sh 源文件夹 目标文件夹 
```

使用以上脚本后,美术只用切一半的图了。因为给我的切图少了,所以我可以更加方便地找到对应的切图了。另外,我也减少了一半对切图进行重命名的工作。

## Tips

### imagemagick
如果你运行以上脚本失败,请先用 brew 或 port 安装 imagemagick。imagemagick 是一个相当强大的图象处理库。
``` bash
brew install imagemagick

检查图片

在使用该脚本一段时间后,我发现美术同学给我的大图的长宽常常不是偶数,这样造成缩小的图就不是原图的整倍数了。为了方便我检查美术给我的图片是否宽高都是偶数,我写了如下检查的脚本,这样就可以检查图片的宽高是否符合要求了。

#! /bin/bash
# File name : checkImageSize.sh
# Author: Tang Qiao
#

usage() {
cat <<EOF
Usage:
checkImageSize.sh <directory>
EOF
}

if [ $# -ne 1 ]; then
usage
exit 1
fi

SRC_DIR=$1

# check src dir
if [ ! -d $SRC_DIR ]; then
echo "src directory not exist: $SRC_DIR"
exit 1
fi

for src_file in $SRC_DIR/*.png ; do
echo "process file name: $src_file"
width=`identify -format "%[fx:w]" $src_file`
height=`identify -format "%[fx:h]" $src_file`
# check width
modValue=`awk -v a=$width 'BEGIN{printf "%d", a % 2}'`
if [ "$modValue" == "1" ]; then
echo "[Error], the file $src_file width is $width"
fi
# check height
modValue=`awk -v a=$height 'BEGIN{printf "%d", a % 2}'`
if [ "$modValue" == "1" ]; then
echo "[Error], the file $src_file height is $height"
fi
done

问题

我在使用以上方法时,发现由于 imagemagick 压缩比太高,生成的图片如果象素太小,它就会生成索引图片,而不知道何故,少量索引图片在 iPhone 3GS 上会显示出一条黑线在图片底部。对于这些图片,用 photoshop 将其模式改成 RGB 颜色即可。如下所示:

用脚本代替体力活是一件很 happy 的事情,因为你可以用省下来的时间多做一些有意思的事情了。

Have fun !

后记

在发表完这篇文章后,得到了很多反馈。

其中 李祎 同学提到了一个 iOS 独立开发者的解决思路:http://kevincao.com/2011/08/prepare-png-for-iphone-app/ ,我感觉该博客中提到的方法,或许更加适合美术同学,因为整个操作都是图形化的。所以附在这里,希望对大家有用。

另外,网易杭研院的 施强 同学推荐了一个用于缩图的软件:http://www.xnconvert.com/ ,据说也能很好的解决以上问题。一并在此推荐给大家作为参考。

转载于:https://www.cnblogs.com/LiLihongqiang/p/5943843.html

没有更多推荐了,返回首页