开始前端开发(PhotoShop切图)

HTML+CSS+PS

开始之前……

  1. 这篇文章并不是教你如何美化图片的,它针对前端开发的图片操作。
  2. 这篇文章注重细节,像是工具类文章。所以需要耐心读下去,耐心练习。
  3. 这算是一篇课程笔记,来自网易前端开发微专业,所以难免遇到一些细节问题。
  4. 这篇文章特点是涉及多个概念,比如单独图层,说这个的目的是我在文中并没有解释,需要自己查阅学习。

一般在互联网公司里面,都会有专业的设计师产出设计稿,交给前端开发工程师,那么,前端工程师拿到设计稿之后,会对这个设计稿进行切图工作,之后才开始进行下一步的编码。下面就是我们要进行的切图学习……

文章目录

  • 基础 :使用PS工具
  • 进阶: 测量、取色
  • 核心: 切图
  • 收获: 保存
  • 后期: 修改、维护
  • 后期: 图片优化与合并
什么是切图?(What?)

切图是指将设计稿切成便于制作成页面的图片,并完成HTML+CSS布局的静态页面。通俗来讲,就是把一张设计图利用切片工具,把自己所需要的效果切成一张张小图,然后用DIV+CSS完成静态页面书写,完成CSS布局。

为什么需要切图?(Why?)

给网页提供图片素材。有时候要实现网页上的特殊效果,但是依靠HTML+CSS很难实现那种效果,就算实现也很难做到兼容。所以这个时候可以引用图片资源的方式来实现这些效果。接下来,我们就开始进行学习吧……

使用PS工具

  • ps首选项设置
    编辑 > 首选项 > 单位与标尺 > 把文字和标尺设置成像素单位 > 确定

  • 面板
    在“窗口”菜单开启:
    工具、选项、信息(F8)、图层(F7)、历史记录 。

    工作区

    这些开启之后,就要保存下来。**窗口 > 工作区 > 新建工作区 > 保存 **
    下次进来,就可以在这个工作区进行操作。

  • 工具
    切图常用工具:
    移动工具、矩形选框工具、魔棒工具、裁剪工具+切片工具、缩放工具 、取色器。

  • 辅助视图
    在“视图”菜单下开启:
    对齐、标尺(Ctrl+R)、显示 > 参考线(Ctrl + ;)
    注意一点是需要勾选显示额外内容,才会显示参考线。


测量 、取色

打开设计稿,获取信息,这些信息都能对应到CSS 。

  • 尺寸信息
    测量获得:width:200px;
  • 颜色信息
    取色获得 : color:#fff;

哪些要测量?
标签的宽度、高度、内边距、边框、定位、文字大小、行高、背景图位置等等,凡是需要数值型,都要进行测量。

测量需要用到?

矩形选框工具&信息面板。需要注意的是要把画布尽量放大,来减少我们测量的误差。

操作演示

下面我们专门讲讲如何测量文字大小,有两种情况:

1:第一种是单独图层,我们直接用文字工具

操作演示

2:第二种情况是,你的文字被合并在背景图中。
这里我们还要用到的是矩形选框工具,进行测量。首先用矩形选框工具把要测量的字进行框住,然后在信息面板上,我们就会看到“H”高度后边的数字,那就是字体大小了。

操作演示

其它操作也是要用到矩形选框工具……

取色

哪些要取色?凡是颜色都要取色。具体有边框色、背景色、文字色
工具:拾色器&吸管工具

工具演示

如果我们想知道文字的颜色,和上面的测量文字一样,如果是独立图层,我们直接在选区上,就能看到文字颜色了。同样的,如果你的文字被合并在背景图当中,首先我们要把画布放大,然后用吸管工具,点击要取色的文字,我们就看到文字颜色了。

这里会有另外一种情况,比如我们选中的文字是一个独立的图层,当我们选中时,我们就会在选区面板看到文字的颜色,可是却和我们实际看到的颜色大相径庭,比如我们看到的是黄色,但是选区面板却给我们呈现的是鲜艳的红色。这是怎么回事呢?因为这个文字图层下面有一些叠加的效果。对于这种情况,用文字工具获取颜色就不适用了。我们还是选择用取色器进行取色,记得要把画布放大哦。

取色工具巧用

用取色工具确定背景是否为纯色。

操作演示

我们凭肉眼看过去,它就是一种红色,但是当我们用取色器点击这个红色区域时,颜色是不停变化的。


切图

在切图之前,我们需要明确哪些是需要切出来的?
网页中的图片可以分为两类,一类是修饰性图片,一般用于CSS当中的background属性上面,主要有一些图标、网站的Logo,还有一些特殊效果的按钮、文字等以及非纯色的背景。另外一类是内容性的图片,内容性的图片一般我们应用在HTML标签 img 上,比如网站上的广告图片以及一些网站文章中的配图……

下面,我们以设计稿为例,哪些东西是需要切出来的?


操作演示

我们看到这张设计稿当中,用红线框中的,有网站的Logo、有小图标,以及我们看到的纯色的背景,这些都是需要我们切出来的。这张设计稿当中还有很多内容性的图片,就是用黑线框中的。在这个项目里面,这些内容性的图片是从服务器端加载过来数据,所以是不需要切图操作的。

在我们了解了哪些内容需要切图操作之后,我们进行下一步骤:切出来的图片,存为哪种类型?

请记住下面几条切图原则:

  1. 内容性的图片颜色比较丰富,那我们存为JPG格式情况比较多,必要的话要做一下压缩,保证图片不要太大。

  2. 对于修饰性的图片我们一般保存为PNG24格式或者是PNG8格式,两种格式都支持全透明,但是PNG24格式支持半透明的 ,PNG8不支持 。

切图主要步骤:

  1. 隐藏文字只留背景
隐藏前

那么,我们为什么要把文字隐藏掉呢?因为文字是作为网页内容需要写到HTML标签里面的。除非是一些特殊情况的文字,比如文字上面有一些特殊的效果,我们是没有办法用代码来实现,这个时候,我们才需要把文字切成图片。如何隐藏文字,分为两种情况。

第一种是情况是若文字为独立图层,解决方案是隐藏文字图层。
首先找到文字图层,然后去掉眼睛图标。这样就会把文字给隐藏掉了。

第二种情况是文字和背景合并。这里又分为两种情况,如果你的背景是可以平铺的 ,解决方案是平铺背景覆盖文字。
首先用到矩形选框工具在这个背景上画一个矩形框,然后在编辑下面选择自由变换(Ctrl+T),进行拉伸,在操作完成后,双击拉伸后的区域,就可以了。

如果你的背景图不适合拉伸,判断是否适合拉伸要看图片的特性。比如一张纹理特性的图片,我们进行以上操作后,图片不像使我们要的,那么这个时候就不适用了。和上面步骤有些不一样,也是先选用矩形选框工具,然后画一个矩形框,使用移动工具+Alt,进行间歇式拉伸,有纹理的图片才是我们想要的效果,

隐藏后

隐藏文本结束后,我们要把自己进行修改后的文件重新放到新的文件里。在图层面板找到图层右击复制图层,然后在文档框选择新建,填好名称后。我们就会看到一个新的文件了。

以上操作是单独图层情况下,假如我们所需要的效果分布在多个图层上,这个时候要进行第二部操作,就是把需要的图层进行一个合并。我们以回到顶部图层为例:

操作演示

我们看到一个回到顶部的图层,当我们动态的点击箭头时,它是一个独立的图层,点击蓝色条时,它也是一个单独的图层。实际项目开发中,我们需要的是看到的整个图层。我们在图层面板看到,这是一列列图层列表。我们要找到这个层级的父节点,然后右击合并图层,最后进行同样的复制操作。以上是保存为png24格式的具体操作。

切图png8格式

这里主要是带背景切,因为png8格式不支持半透明效果。像有些小图标有很多半透明的像素点,这个时候我们需要带着背景切。

  • 首先把文件进行合并(合并可见图层)
  • 矩形选框工具选择内容
  • 然后用魔棒工具去除多余部分(从选区减去:按住Alt)
可平铺背景的切图

这种切图方式主要针对CSS里面 background-repeat 这个属性的切图方式,步骤分为两步:

  • 用矩形选框工具选取需要区域
  • 复制粘贴到新文件中

操作当中需要注意的是,如果你平铺内容是沿x轴平铺的,那么你需要把平铺的内容充满你的文件的宽,如果是沿着 y 轴平铺的,那么就充满文件的高,什么意思呢?看具体演示。

操作演示
切片工具

适用于一刀切的应用场景,比如我们将要讲到的活动页。具体步骤如下:

  • 根据需要的区域,分别拉参考线;
  • 选择切片工具
  • 点击“基于参考线的切片”按钮
  • 保存 (全选切片,统一设置存储格式)
操作演示

还是不会?没事,下面我们重点用文字描述一下具体步骤。我们看到了PS当中有一张活动页;

  • 首先拉参考线到我们需要独立成图的区域,像上面演示一样,我们总共拉了3条参考线;
  • 接着我们在工具面板选择切片工具,然后点击选项面板的“基于参考线的切片”;
  • 接着点击切片工具层级下面的选择切片的工具,然后分别双击要独立成图的活动页,设置名称;
  • 最后就是点击文件,选择存储为Web所用格式。这里要注意的是选择JPEG格式进行保存。因为这张活动页色彩比较鲜艳。

保存

我们从设计稿里面切出我们需要的图片后,如何保存呢?前面我们已经零零散散的进行了保存操作,下面专门说说保存。保存分为两个步骤:

  • 第一步:如果是独立图层,采用复制(Ctrl+C)、新建(Ctrl +N)、粘贴(Ctrl+V)或者直接将内容拖至新文件。如果是背景合并在一起的图层,我们采用三个快捷键连用的方式进行保存。
  • 第二步:存储为Web所用格式(Alt+Shift+Ctrl+S)
保存为哪种格式?

我们切出来的图片是不是要保存为统一的类型呢,比如都保存为JPG格式,答案是否定的,因为我们需要根据图片本身的一些特点以及项目实际情况,对图片进行一个保存。

  • 保存类型一

当图片色彩丰富无透明要求时,建议保存为JPG格式并选择合适的品质。有一点需要提及的是图片品质的选择,如果品质值越大,相当于这个图片的质量就越高。相应的,图片文件也就越大。我们设置图片的原则是不要设置为100。因为设置为100,就相当于图片没有任何压缩。我们切出来的图片,最终是要用到网络中的,所以必须要考虑网络传输问题。一般80的品质已经是相当高的质量了。

操作演示
  • 保存类型二

当图片色彩不太丰富时无论有无透明要求,建议保存为PNG8格式。PNG8格式一个特点是只有256种颜色,所以它的文件都会比较小,是比较适合网络传输的。另外保存为PNG8格式时,要进行一些设置。主要设置杂边(选择无),无仿色两项就可以了。

操作演示
  • 保存类型三

当图片有半透明要求,建议保存为PNG24格式。特点是对图片不进行压缩,所以文件比较大。采用默认设置就可以。

操作演示
  • 保存类型四

为了保证图片质量,在实际项目中,都会对我们使用的这份文件保留一份PSD,后面任意的修改都是在PSD上进行修改的。这样做的好处是PSD源文件是可以保留图层的,也就是可以保存一个个单独的图层,这对于后期的维护,是相当方便的。

操作演示

五 : 修改、维护

当我们需要新的功能时,需要加一些图标,改一些图片效果,这个时候我们又该如何操作呢?通常有以下几种情况:

  • 放更多图片?更改画布大小

在选项面板选择图像下面的画布大小,会弹出一个窗口。

操作演示

有一个需要注意的地方,就是要把定位选在左上角。这样做的好处是使得已经存在的图片,在CSS里面保持位置不变。

  • 移动图标

若图标为独立图层,则用移动工具拖动即可。若图标为非独立图层,首先用选区工具选中图标区域,然后用移动工具拖动图标。

  • 减小画布到指定区域

一开始,我们可能会把画布设置的特别大,后面有了明确的需求后,就不需要这么大的画布,这个时候我们就要进行画布的裁剪操作了。首先用矩形选框工具选定选区,在图像菜单下,找到裁剪按钮,然后制作你想要的大小。


图片优化与合并

在前面的操作中,我们已经把需要的内容进行切图操作,保存成了一份文件。那么,到底如何在我们的代码中使用我们切出来的图片呢?

使用背景图

<button class="u-btn">点我</button>
/*按钮背景是单独图片情况下,直接引用图片*/
.u-btn{background:url(images/btn.png)no-repeat 0 0;}
/*按钮图标和别的图标合并在一起,需要设置图标定位*/
.u-btn{background:url(images/sprite.png)no-repeat 0 -50px;}

** 图片合并方案**

一个页面上往往有很多张图片,实际项目开发中并不会把每个图片切出来保存为单独的一份文件。而是把这些图片合并在同一份文件里面来使用。

什么是拼图?为什么要拼图?
简单说就是把设计稿里面的每一个小图标拼合到同一张图片上,然后使用的时候引用这张图片。本来我们可以把这些小图标单独保存为一份文件,单独引用图片。但是实际我们并不会这么做,而是把它们拼合在一起,然后在代码中使用。因为这样会减少网络请求,提升网页加载速度。多张图片的加载速度是会大于我们拼合之后的图片加载速度的。另外浏览器对并行的请求是有个数限制的。所以实际项目中都是对图片进行合并的。进行图片的合并中,有一些我们要遵循的原则。

一 :大小质量

在进行图片优化的时候,需要平衡取舍图片的大小与质量,如果想要很高的图片质量,势必会导致图片文件会比较大,不利于网络传输。同样,如果过分对图片进行压缩,就会导致我们的图片失真。最终需要根据你的项目实际需求来做合适的调整。我推荐使用两款压缩工具,一种是无损Minimage,对图片的大小压缩是比较不明显的。另外一种是有损TinyPng,它对图片的影响是很大的,也就是说,通过有损压缩,会把图片压缩的比较小。开发中,可以使用这两种工具来辅助开发。

二 :** 合并**

图片合并需要遵循的一个原则是图片之间必须保留空隙,主要是考虑到图片的容错性和可维护性。

(1)排列

排列从方向上有横向排列纵向排列两种

操作演示

(2)分类

图片分类合并遵循的原则:

  • 把同属于一个模块的图片进行合并
操作演示
  • 把大小相近的图片进行合并
操作演示
  • 把色彩相近的图片进行合并
操作演示
  • 综合以上方式合并
操作演示
  • 合并推荐

(1)只本页用到的图片合并
(2)有状态的图标合并(有很多小图标是有交互状态的,比如鼠标Hover上去,图标颜色会变化)

最后

到了这里,前端开发之PhotoShop 切图就讲完了,我们需要做的就是熟悉切图的几种操作即可。这些技术可以更好的辅助我们前端开发。

明日预告:开发、调试工具。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 1.三问切图 什么是切图?从设计稿(如.psd文件)中切出图片素材(如.png、.jpg文件)DIV+CSS切图1...
    LuckyPandaLee阅读 2,162评论 0 14
  • 如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平。绝对不是广告噢。 常见技巧 经典的Photoshop技...
    打豆豆阅读 9,252评论 0 81
  • 对于佛,障,虽说要相信科学,但,多多少少受了影响。前几天,陪着爸妈在街上瞎逛。走过一处草坛,几个女人正在吃...
    阿莫K阅读 191评论 0 0
  • 清明时节雨纷纷 心里念起已故人 蒸上油蒿煮鸡蛋 吃完喝完去上坟
    田园姑娘木子姐阅读 221评论 0 0
  • 风 掀起夜色一角 露出隐藏经年的 秘密 却不被知晓 也无人能懂 那是月亮和星星的约定
    VGuo阅读 328评论 0 0