前端技能之切图
如何一稿适配iOS、Android
Android适配的那些P事
切图的基本要素
清楚需要切出什么样的图片
- iphone 平台
| 倍率 | 机型 |
|---|---|
| @1x | 163 ppi、1～3gs |
| @2x | 326 ppi、4～6s |
| @3x | 401 ppi、plus系列 |
- android 平台
| 倍率 | 机型 |
|---|---|
| mdpi | 160 dpi、1倍 |
| hdpi | 240 dpi、1.5倍 |
| xhdpi | 320 dpi、2倍 |
| xxhdpi | 480 dpi、3倍 |
| xxxhdpi | 640 dpi、4倍 |
选取2倍率为基准。
熟悉一款图像处理工具
-
PhotoShop
PhotoShop是目前最广泛的图形处理软件。很多设计师也使用ps来制作设计稿，前端设计师经常需要对psd文件进行处理。
有以下几种方式可进行切图：
- 切片
使用切片工具对图层进行裁剪，然后存储为web所用格式。- 缺点：繁琐
- 转换成智能对象
在PhotoShop CS6 中，先选中图层，之后右击鼠标，选择转换为智能对象，之后双击该智能对象，将会在新窗口打开此智能对象，使用快捷键⌘+⇧+⌥+s打开存储为WEB所用格式。- 缺点：
- 快速导出为png
- 插件
- 切片
Sketch
待写
概念
9-patch(点9图)
常用于聊天对话框背景图片，android平台
- 点9图是用来表示那些需要做像素拉伸的图标的，它的表示方法是为了让机器能够识别对应的可拉升区域。
- 点9图是必须包含黑色的线的，该线必须1像素的厚度，纯黑色表示。
- 点9图总共有4条线，顶部和左侧的线负责标识可拉升区域，右侧和底部的线标识内容的存放区域
- 点9图的命名规则里头有一个.9，比如xxx.9.png
智能对像
智能对像是包含栅格或者矢量图像(如 Photoshop 或 Illustrator 文件)中的图像数据的图层。智能对象将保留图像的源内容及其所有原始特性，从而让您能够对图层执行非破坏性编辑。
无损处理
避免图像经过多次处理后变得模糊。-
批量处理
1. 一旦你把一个或者一组图层转换为智能对象，将其复制几份，然后对其中任意一份进行处理，其他几个都会发生相同的变化2. 双击一个智能对象图层的时候会打开一个.psb的新文档窗口，智能对象图层包含的内容都在里面。
3. 当处理完得到想要的效果后。请记得一定要保存这个.psb文件 (ctrl+s）如图五，这样在.psd文档里相应的对象及副本才会产生改变。
4. 每个智能对象.psb文件还可以单独存储起来，以便于在以后的设计中重复使用。
工具推荐
pxcook
assistor-ps
cutterman
browsersync
搜索结果
开发移动端页面 如何切图
点9图扫盲贴
点9图简单介绍和制作教程
Android-点9图制作
使用智能对象-Adobe
关于智能对象必知的10件事-优设
理解使用智能对象-太平洋
