前端切图

前端技能之切图
如何一稿适配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件事-优设
理解使用智能对象-太平洋