学习笔记前端开发调试工具与PS切图技巧

Posted 2020-09-11

【学习过程遇到疑问和延伸阅读】

1.Sublime Text 安装插件的方式

一开始以为直接安装。原来在安装丰富的插件之前，Sublime Text需要通过Package Control这个插件来管理。作为基础插件来管理其他的插件。安装成功之后在菜单栏Preferences下才会有Package Control。

 “Sublime Text 2 也拥有良好的扩展功能，这就是安装包(Package)；通过 Sublime Package Control，安装、升级和卸载 Package 也变得轻松写意了”。

-引用自http://www.cnblogs.com/way-peng/articles/2469000.html

 

2.文本编辑器类 、IDE类有什么区别

http://blog.csdn.net/gqqnb/article/details/7948725，

该文章有比较深刻的对比思考。分别从创建程序(自动补全、用法提示、重构)和编辑文件的两大角度说明。

作者对两类工具都有较深入的使用了，才能够总结和思考两者优劣，

最终目的是结合个人和项目的情况，采用更好的工具，提高工作效率。

 

3.Sublime Text常用快捷键操作陌生感

多使用，多熟悉界面即可解决。

 

4.png8和png24的区别？

（1）生成图像的模式：png8生成图像是索引模式；png24生成图像是rgb模式；

（2）生成图像的数据量：png8生成图像较小；png24生成图像较大；

（3）生成图像的透明特性：png8只支持完全透明的图像；png24即支持完全透明的图像，也支持半透明（apha通道）图像

（4）png8的特点：png8与gif模式有相似之处，都是索引模式，只支持像素级的纯透明，不支持alpha通道。

视频中提到的图片的全透明，半透明为两者的一个特性区分。

 

5.png和jpg的区别？

png即可移植网络图形格式，也是一种位图文件存储格式，可以进行无损压缩。

而jpg是我们最常见的图片格式了，图片占用存储较少，但是也牺牲了图片质量。

简单地说就是一个无损，一个有损。

 

6.为什么需要带背景切图？

 由于IE6不支持png24半透明，所以切图的时候切两份。

针对IE切带背景png8格式的图，其余采用png24格式-高级浏览器用CSS3属性，低级浏览器用切图的方式。

 

7.平铺切图铺满x和y的方向，为什么需要充满，原理是什么？

 

8.图片精灵sprite

 原理：把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

//目前只能了解到原理，在具体项目中，切图技巧需要和具体css一起配合达到最终的页面效果。

所以，在学习css阶段，还需要进行回顾切图技巧。

 

【新概念，重要概念】

命令行面板 :Sublime Text的一个特色功能。键盘输入来模糊匹配即可，不需逐一寻找每个菜单选项。

图片精灵sprite

 

【实操知识点脉络】

1.前端开发工具Sublime text

1.1工具分类：
文本编辑器类 、IDE类(集成开发环境)

了解各种工具

1.2安装Sublime text

到官网下载，已完成安装。

1.3实践操作，熟悉常用快捷键

1.3.1 查找(Ctrl + P) ，Goto everything

以下为可追加的快捷键

(1)冒号: ＋行号

(2)艾特@ ＋ js函数名，css选择器名

(3)井号# ＋ 具体关键字

1.3.2 命令面板（Ctrl＋Shift ＋P）

1.3.3多行选择同时编辑（Ctrl＋D，Ctrl ＋ Shift ＋ L）

2.调试工具

2.1浏览器自带的调试工具

兼容各浏览器Chrome,firefox,safari,IE

2.2Chrome调试工具

熟悉Element面板的调试操作

Element,Network,Sources,Console,Resources,Timeline,Profiles,Audit

 

2.3IE的调试

IETester工具：可以查看IE各版本的页面效果

IE6 的页面开发调试：需安装IE Developer Toolbar 插件

 

 3【切图工作背景了解】

3.1Photoshop切图
设计稿（视觉设计师产出）
↓
设计稿切图-使用工具Photoshop（前端工程师）
↓
页面编码

 

3.2关于切图的几个问题
what-
从设计稿里面切出网页素材，
比如按钮，图标，背景图，logo，内容图片等，
产出以 .png/.jpg为格式的图片文件
why-
给网页编写提供图片素材，通过引入资源的方式
涉及概念：图片精灵sprite
how-
分解操作步骤
使用PS工具/使用背景图/图片合并方案/浏览器兼容

3.3进入PS工具的操作内容

 

4【根据演示操作来熟悉】
4.1打开PS，设置首选项
修改“单位与标尺”单位里的“标尺+文字”为像素px
css使用最多的单位为像素，设计稿测量和读取的值都是以px为单位
4.2了解面板
与切图相关面板有，工具-选项-图层-信息-历史记录
信息和历史信息面板需要设置，才显示
4.3保留切图工作相关的面板设置
涉及到“工作区”的概念
可以新建，切换不同的工作区，方便使用不同操作
4.4操作工具面板的常用工具
打开演示图片，
移动，“组”和“图层”的概念
画笔，撤销快捷键ctrl+z(撤销一步)ctrl+alt+z(往前撤销多步)
矩形选择，信息面板同步显示长宽
魔棒，“容差”“消除锯齿”“连续”的概念，
裁剪，
缩放，alt+鼠标滚轮
取色器，前景色的概念
4.5辅助视图
标尺 ctrl+r，拖出参考线，显示额外内容开启
参考线 ctrl+；
对齐 移动图层靠近边缘时有吸附作用

 

5【操作设计稿，获取信息】
5.1获取信息
尺寸，颜色信息→css的属性
尺寸可以测量，颜色可以通过取色
5.2原则：尽可能百分百还原设计稿
所有数字都要测量
所有颜色都要取色

5.3测量工具
5.3.1PS矩形选框工具+PS信息面板
5.3.2测量注意，图片尽可能放大，来减少测量误差
5.3.3测量文字
5.3.3.1字号
文字图层，使用文字工具查看文字大小
单独图层，使用矩形选框工具测量文字高度（不同文字有一定误差）
5.3.3.2行高，行高的概念（第一行下面到第二行下面）line height
文字图层，使用文字工具查看文字，属性面板，有显示行高
单独图层，使用矩形选框工具测量文字行高
5.3.4测量背景图
小图标，左边，上面

5.3.5测量工具的使用技巧
矩形选框工具技巧
shift 添加
alt 减去
shift+alt 交集
巧用 ：测量放大的画布的宽度

5.4取色工具（css能接受颜色值的属性）
拾色器+吸管工具
点击相应位置，从拾色器读取
5.4.1文字取色
文字工具的选项中，可以获取颜色信息（文字图层可能叠加导致最终效果颜色不准）
最后直接对页面文字进行取色
5.4.2取色工具的巧用
确定背景色
是否纯色（点击多处取色判断）
是否线性渐变（利用魔棒工具的容差特性）

6.切图
6.1哪些图片需要切出来？
(1)修饰性css属性，
(2)内容性html的img元素(对于服务器的内容，不用切，只占位)
6.2切出来的图片存为哪些类型？
修饰性：PNG24（半透明，IE6不支持）PNG8
6.3切图的具体步骤
切背景图
（1）隐藏文字只留背景
隐藏文字的图层
文字和背景图层合并时，使用矩形选择区域+拉伸ctrl+T（适用纹理相同的背景）
文字和背景图层合并时，背景有纹理，不可拉伸，遮盖文字适用移动工具保持水平移动（shift）+Alt
（2）选择留下的内容，放到新的文件里
a.内容在单独图层情况：复制图层-新建文件-矩形选择区域-图像菜单下选择裁剪
内容在多个图层的情况：则先需要合并图层（ctrl+E）后，进行以上的操作，拖到已有的文件中去

b.保存为png8的为例，带背景切图，png8不支持半透明的效果
很多小图标有半透明的像素点，这时候是需要带着背景切
合并可见图层-矩形选择区域-可以直接拖动所需要的内容

c.不规则的小图标带背景切时，可以用矩形选框工具选择区域，再用魔棒工具，同时按住alt来去除多余的部分。最后ctrl+c，ctrl+v到新文件中去。

d.可平铺背景的切图方式，
针对css的background属性repeat
矩形选框选取一块区域，复制黏贴到新文件中
注意：平铺内容充满保存后文件的宽（沿着x轴平铺）或者高（沿着y轴平铺），切不满需要拉伸充满。

e.切片工具
适用于可以一刀切的活动页
拉参考线-选择切片工具-点击“基于参考线的切片”
-保存（格式文件下-存储为web所用格式-统一设置存储格式）

 

7保存
如何对切出来的内容进行保存
1.ctrl+n新建文件，拖动独立图层的内容到文件中（或者ctrl+c，ctrl+v）
2.存储为web所用格式（alt+shift+ctrl+s）
3.保存为哪种格式
类型一JPG
当图片色彩丰富且无透明要求时，
建议保存为JPG格式并选择合适的品质
类型二PNG8
当图片色彩不太丰富时无论有无透明要求
请保存为PNG8格式

类型三PNG24
当图片有半透明要求
请保存为PNG24格式
类型四PSD
为保证图片质量（能不被压缩），保留单独的图层，
保留一份PSD，在PSD上进行修改

8图片的修改和维护
8.1更改画布大小，
在原有的文件下，添加更多的素材
注意：需要设置定位为“左上角”，
这样画布会向右和向下扩大画布，
使得我们已经在使用的图片，在css下的背景图的位置不需要更改。
8.2移动图标
区分单独图层和合并图层
8.3减小画布，去掉空白区域
（1）图像菜单-裁剪
（2）裁剪工具
注意，画布一般都会比内容大一点，并不会对图片大小造成影响
会有更好的可维护性，
8.4维护png8图片
注意：修改png8图片，颜色模式从索引颜色更改为RGB颜色（图像-模式-RGB颜色）
打开png8的图片，会看到标题名旁边有索引的标志。

9如何从代码中使用我们的图片呢？
图片合并方案
什么是Sprite拼图？
把对图片进行合并，把网页上的比如图标，按钮，logo合并在一个文件里进行使用
为什么要拼图？
好处：减少网络请求，提升网页加载速度

图片优化合并，从两方面进行考虑
-大小与质量的平衡与取舍
压缩工具（无损，有损）

-合并，
图片之间必须保留空隙，考虑可维护性，容错性

排列方式，
横向排列、纵向排列

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

合并推荐
-只本页用到的图片合并
-有状态的图标合并

浏览器兼容方案
-IE6不支持PNG24半透明（存2份：sprite.png 24 和sprite_ie.png 8）
-CSS3+切图（高级浏览器用CSS3，针对低级浏览器做切图和hack，或者优雅降级的做法）