New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

前端技能之切图 #2

Open
xiangpaopao opened this Issue Apr 23, 2014 · 28 comments

Comments

Projects
None yet
@xiangpaopao
Owner

xiangpaopao commented Apr 23, 2014

为何会有此文

Web界面构建过程中,切图是常是必不可少的一步,我认为做好这个工作需要做到:

  • 清楚的知道需要切出什么样的图
  • 熟悉一款图像处理的工具

剩下的基本就是体力活了。很多团队是没有“页面重构师”这一职位的,有时会把切图任务分配给UI设计师,而由于构建出某种样式界面的方法也多样的、并且大部分设计师没有界面开发经验,所以设计师往往不明确究竟要切出什么样的图,这一点在移动端体现的更为明显。

例如设计稿中有这样一个按钮:背景为有描边的圆角矩形,按钮上有一个icon和文字。大家在构建UI时会如何实现呢。

image

我想到的几种方法:

  • 直接切出包含所有信息的一张图片

  • 切出可伸缩的背景图,通过代码自动伸缩,然后切出icon 并打上文字

    背景图和icon: image   image

    (为了能看清icon 我把透明的背景填充成了灰色)

  • 通过代码绘制出背景、圆角、描边样式,icon采用图标字体 (关于图标字体,可以了解一下 http://iconfont.cn/ http://fontawesome.io/这两个项目)

暂且不讨论各种方法的优劣,在实际项目中三种方式都会有人使用,恐怕很多设计师是不了解UI构建中这些细节的,这就需要工程师和设计师描述清楚每一张图的需求,增加了沟通成本,切图稍有不慎会影响显示效果。

相比而言,我认为工程师自己学习一下图像工具的使用可以达到事半功倍的效果,于是便有了此文。

第一次写技术博客,受限于本人水平,有写的不如意的地方还请见谅和指正,本文适合不太会切图的工程师们阅读。

PS中相关功能

关于切图的工具,这里我们使用Photoshop(以下以Photoshop CC版本为例,不同版本可能存在一些差异),因为他更灵活、适用场景更广。
介绍一下使用PS切图时常用到的功能:
首先是图像菜单中的命令

image

图像>图像大小

这个好理解,就是修改图像的尺寸

image

需要注意的就是 一般情况下,为防止图像调整尺寸时失真,我![image]们会锁定宽高比(图中锁的按钮),另外用于屏幕上显示的图像分辨率一般设为72。想了解更多关于图像和分辨率知识 建议阅读 http://helpx.adobe.com/cn/photoshop/using/image-size-resolution.html

图像>画布大小

画布大小是图像的完全可编辑区域。好比你在一张纸上作画,发现纸张不够大时,可以通过这个选项来扩大可绘区域。

例如,下面200 * 200的图像中心有一个圆,当我把画布大小调整后,图像大小变为300 * 200,而图像中的圆的尺寸并未发生变化。你可以通过“定位”来编辑新画布的位置。

image   image

image

图像>裁剪

这条命令用来从图像中裁剪出所需部分。
使用方法:用选区工具从图像中选出要保留的部分,执行“图像”>“裁剪”命令。

image

image

image

图像>裁切

常用于移去图像中不需要的透明区域。如下图,透明的背景上有一个球,画布的大小比球所需的区域大得多,使用“图像”>“裁切”命令可以得到非透明像素的最小区域图像。

image

image

image

通过勾选“顶”、“底”、“左”、“右”可以选择需要修正的区域。

该命令同样适用于非透明背景的图像,选择“左上角像素颜色”或“右下角像素颜色”可从图像中移去左上角或右下角像素颜色的区域。

再看到工具栏中切图相关的工具:

image

裁剪工具

image 裁剪工具的使用和“图像>裁剪”命令类似。
选择裁剪工具后,可以在图像中框选出一块区域,双击后图像会移去未选中的区域。

image

在框选过程中可以通过工具栏中的参数来限定区域。如限定宽高、限定宽高比。

image

切片工具&&切片选择工具

而在实际项目中,往往遇到的是一整个设计稿中有大量图片需要切出来,这就需要用到切片工具了。
选择切片工具image可以在图像中划分出若干个区域,如下图:

image

蓝色标注的区域我我划分出的切片,灰色标注的为PS自动产生的切片。

使用image可以编辑已经划分出的切片,你可以调整他的位置、大小和对齐。如需更精准的控制你的切片,可以右击该切片在“切片选项”中通过数值设置。“名称”选项既输出图片的文件名。

image

文件>存储为 Web 和设备所用格式

调整好图像,就可以开始输出了,使用“存储为 Web 和设备所用格式”命令,可以得到更优化、更适合用于构建UI的图片。执行该命令后可以对文件的格式、压缩率等参数进行配置。(想了解关于格式,推荐阅读一下这篇博文 http://ued.taobao.org/blog/2010/12/jpg_png/)如果图像中包含切片,你可以选取你所需要输出的切片,也可以选择输出用户切片或者全部切片。

image

切图实战

我使用了来自freewebsitetemplates.com的素材用来演示一下切图,你可以从 http://www.freewebsitetemplates.com/preview/zerotype/获取到该素材。下面介绍一下我常使用的三种切图方法,仅以素材中的首页做个示范。
打开下载到的资源,可以看到里面有一个PSD文件及若干html文件,打开PSD文件,分析下,大概有这几个地方需要输出切图:

image

普通切图法

普通切图方法就是使用切片工具&&切片选择工具,在设计稿上调整好切片然后输出。

下面开始划分出我们需要的切片(注意:设计稿中已经包含原作者留下的切片,为防干扰最好使用切片选择工具把这些切片删除)。早期的浏览器对含透明通道的PNG图支持不好,所以处理含透明通道的图时我们一般使用GIF,或者索性把图形连同背景合并到一起输出不透明的图。而随着前端技术的发展和古老浏览器的淘汰,现在更好的做法是使用透明通道的PNG图片,既保证了图像质量又保证了图片在不同页面中都能适应。

要输出透明的切图,我们需要把PS中显示背景的图层隐藏。找这些填充背景的图层,点击“小眼睛”隐藏图层(图层是PS中比较重要的概念,建议阅读http://helpx.adobe.com/content/help/cn/photoshop/topics/layers.html了解更多)。

image

页面上这个按钮的处理,为了页面的可读性和图片能复用,我们只需要背景,所以也把文字隐藏。

现在手中的设计稿应该变成这个样子了

image

可以输出切图了,使用“文件>存储为 Web 和设备所用格式”命令,简单配置一下图片选项,然后选择一个路径,保存“所有用户切片”。

image

还没完,为了更好的体验,网页中的按钮是需要有悬停效果的,有经验的设计师早就准备好了,只不过这些效果的图层没有显示。找到并显示这个图层:

image

再次使用“文件>存储为 Web 和设备所用格式”命令,不过这次我们只要存这一张图就行了,在“存储为 Web 和设备所用格式”对话框中使用切片选择工具选中改切片,然后保存“选中的切片”。

image

文艺切图法

可以看到,普通切图法需要手动编辑切片,耗时耗力,当设计稿元素较多时容易出错。其实在处理大量图片时,我们常用到PS的脚本功能来对图像进行批处理,切图这一工作也可以通过脚本来实现半自动化。PS中预置了一些脚本,你也可以自己录制脚本,例如有时需要把一批大尺寸的图按比例转换成小尺寸图,就可以通过脚本来实现。(想更多了解PS中脚本功能 建议阅读 http://helpx.adobe.com/content/help/cn/photoshop/topics/automation.html

“文件>脚本>将图层导出到文件”这条命令是PS中预置的一个脚本,正如你想要的,他会把设计稿中的图层输出成图片。用这种方式切图,为了不破坏设计稿、脚本运行速度更快,我建议新建一个文档来进行。

新建一个尺寸为800*800的文档,把需要切图的元素拖动到这个文档中来,位置随意摆放,因为这个脚本会将“图层导出到文件”,所以有些元素可能包含多个图层的要使用“图层>合并图层”将他们合并。你现在的文档和图层管理器应该是这样的:

image

image

执行“文件>脚本>将图层导出到文件”

image

ok,在PS自动执行一系列操作后,就得到所有的切图了。

2B切图法

2B切图法就是使用裁剪工具,将设计稿中的每个元素分别提取出来并单独存储,仅需要输出少量图片或是要对图像局部调整时才使用此方法。

后话

在我看来,切图本身并没有多少技术含量,但这个环节却经常出问题。经常见到设计师抱怨开发人员没能还原设计稿中的效果,其中一条重要原因就是:设计师不明确切图的所有需求,而工程师们又不会或不愿意自己切图。这就好多人共同开发产品时,前端和后端都各人自扫门前雪,这样工作是很难协作下去的。

Over!Thanks GitHub! Thanks Freewebsitetemplates!

@toby941

This comment has been minimized.

Show comment
Hide comment
@toby941

toby941 Jun 20, 2014

学习了

toby941 commented Jun 20, 2014

学习了

@hahamy

This comment has been minimized.

Show comment
Hide comment
@hahamy

hahamy May 1, 2015

早看到就好了,摸索了好久,耽误了好多时间,才明白你文章中说的这些

hahamy commented May 1, 2015

早看到就好了,摸索了好久,耽误了好多时间,才明白你文章中说的这些

@sonnyzhou

This comment has been minimized.

Show comment
Hide comment
@sonnyzhou

sonnyzhou May 25, 2015

怎么找到有悬停效果的图层

sonnyzhou commented May 25, 2015

怎么找到有悬停效果的图层

@WenTao-Love

This comment has been minimized.

Show comment
Hide comment
@WenTao-Love

WenTao-Love Jul 19, 2015

感谢 很实用。。

WenTao-Love commented Jul 19, 2015

感谢 很实用。。

@frankxin

This comment has been minimized.

Show comment
Hide comment
@frankxin

frankxin Aug 11, 2015

感谢 ~ mark一下

frankxin commented Aug 11, 2015

感谢 ~ mark一下

@Kanepan

This comment has been minimized.

Show comment
Hide comment
@Kanepan

Kanepan Sep 3, 2015

收藏了, 接私活必备

Kanepan commented Sep 3, 2015

收藏了, 接私活必备

@luckymore

This comment has been minimized.

Show comment
Hide comment
@luckymore

luckymore commented Oct 10, 2015

@Kanepan yeah!!yeah

@williamdu2877

This comment has been minimized.

Show comment
Hide comment
@williamdu2877

williamdu2877 Nov 15, 2015

好东西啊,自己会切图,就不用每次都找美术要很简单的图了

williamdu2877 commented Nov 15, 2015

好东西啊,自己会切图,就不用每次都找美术要很简单的图了

@zhxxmu

This comment has been minimized.

Show comment
Hide comment
@zhxxmu

zhxxmu Jan 14, 2016

只会2B切图法的前来学习

zhxxmu commented Jan 14, 2016

只会2B切图法的前来学习

@jdk137

This comment has been minimized.

Show comment
Hide comment
@jdk137

jdk137 Feb 25, 2016

赞!
个人学习过程中遇到的一些操作问题以及解决方案:
取消: ESC, ctrl-z, ctrl-alt-z
拖动一个文档的图层到另一个文档: 1. 确保打开两个窗口:右击另一个文档的头部页签,“移动到新端口”;2. 调整好两个窗口的位置,拖动。
复制一个文档的图层到另一个文档: 右击图层 -》 复制图层 -》设置目标文档
找到某个图片的图层: 选择“移动工具”, 右击图片,就会显示该位置点所有相关的显示图层,其中有一个是图片图层。
清除所有自定义切片: 顶部菜单“视图“, > "清除切片"

jdk137 commented Feb 25, 2016

赞!
个人学习过程中遇到的一些操作问题以及解决方案:
取消: ESC, ctrl-z, ctrl-alt-z
拖动一个文档的图层到另一个文档: 1. 确保打开两个窗口:右击另一个文档的头部页签,“移动到新端口”;2. 调整好两个窗口的位置,拖动。
复制一个文档的图层到另一个文档: 右击图层 -》 复制图层 -》设置目标文档
找到某个图片的图层: 选择“移动工具”, 右击图片,就会显示该位置点所有相关的显示图层,其中有一个是图片图层。
清除所有自定义切片: 顶部菜单“视图“, > "清除切片"

@flyingrx

This comment has been minimized.

Show comment
Hide comment
@flyingrx

flyingrx commented Mar 11, 2016

nice

@v4xyz

This comment has been minimized.

Show comment
Hide comment
@v4xyz

v4xyz Apr 19, 2016

唉 切一次忘一次 多谢楼主

v4xyz commented Apr 19, 2016

唉 切一次忘一次 多谢楼主

@zjhui

This comment has been minimized.

Show comment
Hide comment
@zjhui

zjhui Jun 16, 2016

一直在使用2B切图法的路过。

zjhui commented Jun 16, 2016

一直在使用2B切图法的路过。

@zhuwei05

This comment has been minimized.

Show comment
Hide comment
@zhuwei05

zhuwei05 Jul 15, 2016

多谢楼主,摸索中

zhuwei05 commented Jul 15, 2016

多谢楼主,摸索中

@pod4g

This comment has been minimized.

Show comment
Hide comment
@pod4g

pod4g Jul 16, 2016

从来不切图的前端路过。想学习一下PS。另,弱弱地问句:啥是2B切图法?

pod4g commented Jul 16, 2016

从来不切图的前端路过。想学习一下PS。另,弱弱地问句:啥是2B切图法?

@techbirds

This comment has been minimized.

Show comment
Hide comment
@techbirds

techbirds commented Jul 20, 2016

赞。

@jacken-deng

This comment has been minimized.

Show comment
Hide comment
@jacken-deng

jacken-deng Jul 26, 2016

切图出来后怎么压缩呢?

jacken-deng commented Jul 26, 2016

切图出来后怎么压缩呢?

@xiangpaopao

This comment has been minimized.

Show comment
Hide comment
@xiangpaopao
Owner

xiangpaopao commented Jul 28, 2016

@yeshuoer

This comment has been minimized.

Show comment
Hide comment
@yeshuoer

yeshuoer Sep 15, 2016

简单明了,讲解的非常不错!3q!

yeshuoer commented Sep 15, 2016

简单明了,讲解的非常不错!3q!

@hiro1vv

This comment has been minimized.

Show comment
Hide comment
@hiro1vv

hiro1vv Feb 20, 2017

非常详细,不过淘宝UED的那篇文章链接无法访问了
http://ued.taobao.org/blog/2010/12/jpg_png/

hiro1vv commented Feb 20, 2017

非常详细,不过淘宝UED的那篇文章链接无法访问了
http://ued.taobao.org/blog/2010/12/jpg_png/

@guaneagler

This comment has been minimized.

Show comment
Hide comment
@guaneagler

guaneagler May 7, 2017

非常感谢

guaneagler commented May 7, 2017

非常感谢

@BreezeDealer

This comment has been minimized.

Show comment
Hide comment
@BreezeDealer

BreezeDealer May 24, 2017

作为切图仔的我表示这些技能多少会一点(滑稽

BreezeDealer commented May 24, 2017

作为切图仔的我表示这些技能多少会一点(滑稽

@jiaxiuya

This comment has been minimized.

Show comment
Hide comment
@jiaxiuya

jiaxiuya Jun 7, 2017

thankyou very much

jiaxiuya commented Jun 7, 2017

thankyou very much

@gabygoole

This comment has been minimized.

Show comment
Hide comment
@gabygoole

gabygoole commented Jun 22, 2017

感谢

@rain-js

This comment has been minimized.

Show comment
Hide comment
@rain-js

rain-js Oct 20, 2017

mark 切图

rain-js commented Oct 20, 2017

mark 切图

@JserJser

This comment has been minimized.

Show comment
Hide comment
@JserJser

JserJser commented Apr 7, 2018

REPOST

@KirinHuang

This comment has been minimized.

Show comment
Hide comment
@KirinHuang

KirinHuang May 17, 2018

mark,写的非常不错

KirinHuang commented May 17, 2018

mark,写的非常不错

@13122310958

This comment has been minimized.

Show comment
Hide comment
@13122310958

13122310958 commented Jul 26, 2018

mark 切图

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment