网易前端微专业《网页制作》之Photoshop切图

《网页制作》之Photoshop切图

工具、面板、视图

什么是切图?

  1. 从设计稿(.psd文件)里切出网页素材(.png/.jpg文件);
  2. 编写代码,在代码中引入切图,实现静态页面。

为什么要切图?

给网页提供图片素材:

  • HTML:img
  • CSS:background

如何切图?—使用PS工具(Photoshop)

PS首选项设置:

   编辑>首选项>单位与标尺: 将单位(标尺/文字)改成像素。

面板:

   在“窗口”菜单下开启:工具/选项/信息(F8)/图层/历史记录

调整面板后,需要保存工作区:窗口>工作区>新建工作区

切图常用工具:

  • 移动工具:在选项面板中设置:自动选择,图层。
  • 矩形选框工具
  • 魔棒工具
  • 裁剪工具+切片工具
  • 缩放工具:快捷键:放大:Ctrl + 加号;缩小:Ctrl+减号;100%:Ctrl + 1;
  1. Alt +鼠标滚轮(顺滑/逆滑)
  • 取色器:吸取颜色
  • 撤销:Ctrl+Z;连续撤销:Ctrl+Alt+Z;在历史记录面板里选择。

辅助视图

在“视图”菜单下开启:对齐/标尺(Ctrl+R)/显示>参考线(Ctrl+;)

需要开启视图菜单下的显示额外内容,才能看到画布里的参考线和网格。

测量、取色

获取设计稿信息:

  • 尺寸信息:通过“测量”获取
  • 颜色信息:通过“取色”获取

测量(所有数字都要测量):

  • 测量方式:矩形选框工具&信息面板
  • 测量数据:高度、高度/内边距、外边界/边框、定位、文字大小、行高、背景图位置。

矩形选框工具:

矩形选框工具

选择页面较大区域方法:在左侧画一个小矩形框,在右侧再画一个小矩形框,在信息视图里显示相关区域的大小。

取色:

  • 取色方式:“拾色器&吸管工具”:
  • 吸取:边框色/背景色/文字色。

取色工具巧用:使用“魔棒工具”来确定是否是线性渐变。

切图

切图及切图的各种操作:隐藏文字(独立图层和非独立图层的不同操作方法)、png8和png24格式的切图方式、可平铺背景的切图方式及活动页的切图方式

切图之前

哪些是需要切出来的?
修饰性的(一般用在background属性) 内容性的(一般用在img标签)
  • 图标、logo
  • 有特殊效果的按钮、文字等
  • 非纯色的背景
  • Banner、广告图片
  • 文章中的配图……
切出来的图片存为哪种类型?
修饰性的 内容性的
  • PNG24(IE6不支持半透明)
  • PNG8
一般存为JPG

切图步骤

一、隐藏文字只留背景
A: 若文字为独立图层,隐藏文字图层

  • 找到文字图层
  • 去掉眼睛图标
B:若文字和背景合并,平铺背景覆盖文字

  • 矩形选框工具
  • 自由变换(Ctrl+T)–(背景图像可以拉伸)
  • 使用移动工具+Alt –(背景图像不能拉伸)
二、切图
(一)PNG24/PNG8格式的切图方法
PNG24格式 PNG8格式
  1. 单图层:
  • 移动工具选中所需图层;
  • 再右键复制图层到新文件,或直接拖至已有文件(新建:Ctrl+N)
  1. 多图层:
  • 移动工具选中所需图层(按住Ctrl多选);
  • 右键合并图层(Ctrl+E);
  • 再右键复制图层到新文件,或直接拖至已有文件(新建:Ctrl+N)
带背景切图:

  • 合并(可见)图层(Shift+Ctrl+E);
  • 矩形选框工具选择内容
  • 魔棒工具去掉多余部分(从选区中减去:按住Alt)
  • 再右键复制图层到新文件,或直接拖至已有文件(新建:Ctrl+N)
(二)可平铺背景的切图用矩形选框工具选取一块区域

复制粘贴到新文件中(平铺内容充满文件的宽(X轴)或高(Yz轴))

(三)活动页的切图——适用于可以一刀切的活动页

  • 拉参考线
  • 选择切片工具
  • 点击“基于参考线的切片”按钮
  • 为切片命名
  • 保存(全选切片,统一设置存储格式)

 

保存

存储所需内容

复制(Ctrl+C)、新建(Ctrl+N)、粘贴(Ctrl+V)

存储为web所用格式(Alt+Shift+Ctrl+S)

 

保存类型:

A:当图片色彩丰富且无透明要求时,建议保存为JPG格式并选择合适的品质(60-80)。

B:当图片色彩不太丰富时,无论有无透明要求,保存为PNG8格式。(需设置杂边:无;仿色:无仿色。)

C:当图片有半透明要求时,保存为PNG24格式。

D:为保证图片质量,需保留一份PSD, 在PSD上进行修改。

 

修改、维护

A: 更改画布大小: 图像>画布大小>更改尺寸,同时将“定位”选在左上角。

B:移动图标:

若图标为独立图层,则用移动工具拖动即可;

若图标为非独立图层,先选用矩形选框工具选中图层,在用移动工具拖动即可。

C:减小画布到指定区域:用矩形选框工具选定选区–裁剪(或直接用裁剪工具裁剪)

D:修改PNG8图像时,需要更改颜色模式为:RGB格式。(PNG8默认颜色为索引颜色,直接修改会使颜色失真。)

 

图片优化与合并

使用背景图

代码:

HTML

<button class=”u-btn”>点我</button>

CSS:背景图sprite

.u-btn{background:url(images/btn.png) no-repeat 0 0;}

.u-btn{background:url(images/sprite.png) no-repeat 0 -50px;}

 

图片合并方案

Sprite拼图:把设计稿里的小图标,拼合在一张图片上。

Sprite拼图好处:减少网络请求,提升网页加载速度。

 

图片优化合并:

大小与质量

  • 平衡与取舍:选择合适的图片大小与合适的图片质量
  • 压缩工具:无损压缩 Minimage;有损压缩 TinyPng

合并-排列:图片合并与排列

图片之间必须保留空隙(见参考1);

图片排列方式:

  • 横向排列
  • 纵向排列

 

图片合并-分类规则:

  • 把同属于一个模块的图片进行合并;
  • 把大小相近的图片进行合并;
  • 把色彩相近的图片进行合并;
  • 综合以上方式合并。

合并推荐:

  • 只本页面用到的图片合并;
  • 有状态的图标合并

浏览器兼容方案

  • IT6不支持PNG24半透明:存2份:png 24; sprite_ie.png 8.
  • CSS3&切图:

高级浏览器CSS3,低级浏览器用切图,hack处理;

优雅降级原则:都用CSS3处理,低级浏览器里没有效果。

参考:

1. 图片合并时保留空隙:

对于具体要保留多大的空隙呢,并没有一个明确的数值,遵循的一个宗旨就是保留的空隙足够后期维护就可以了。

如果是小图标,留的空隙可适当小一些,一般20像素左右;那如果是大图标,要留的空隙就要大一点,因为大图标在调整的时候,影响到的空间也会比较大。

2. 图片精灵:Sprite

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。

CSS Sprites原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites优点
1.利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2.个人认为能CSS Sprites能减少图片的字节,我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

CSS Sprites缺点
诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点:
1. 在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景;这些还好,做痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
2. CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!
3. CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无序改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,有只能(最好)往下加图片,这样图片的字节就增加了,还要改的css。

CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,在决定是不是应用CSS Sprites。

参考文章:http://www.css88.com/archives/756

案例地址:http://www.divcss5.com/rumen/r767.shtml

CSS Sprites图像拼接测量工具:http://www.spritecow.com/

3. png8和png24

Png8 VS png24

  • png8和png24的根本区别,不是颜色位的区别,而是存储方式不同。
  • png8有1位的布尔透明通道(要么完全透明,要么完全不透明),png24则有8位(256阶)的布尔透明通道(所谓半透明)。
  • 如果是半透明的图片存储为PNG8,图片四周会有锯齿,阴影也会不见.
  • png-8 和 gif 有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。

我们通常说的“IE6 不支持 PNG 透明”,是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明,就像支持 gif 的透明一样。

保存为何种格式

  • 色彩丰富的、大的图片切成jpg的;
  • 尺寸小的,色彩不丰富的和背景透明的切成gif或者png8的;
  • 半透明的切成png24。
  • 在ps里看图像—模式,png8当然只有8位/通道了。
  • 当打开png8的图片时,ps会默认给它的图片标题上加上“索引”两字,png24的则没有。

如何区别是PN8还是PNG24

  • 在ps里看图像—模式,png8当然只有8位/通道了。
  • 当打开png8的图片时,ps会默认给它的图片标题上加上“索引”两字,png24的则没有。

此文转自:http://www.xifengxx.com/web-front-end/study-web-front-end-engineer/1459.html

未经允许不得转载:花满楼博客 » 网易前端微专业《网页制作》之Photoshop切图

赞 (1) 评论 (0) 分享 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址