网易微专业前端工程师学习笔记

1.1

1.1.1.1 工具、画板、视图

鉴于前端人员多数情况下使用的图片的参数多位像素，所以首先我们通过 “编辑 → 首选项 → 单位与标尺” 中的单位选择像素
常用面板有：
- 工具
  - 移动工具
  - 矩形选框工具
  - 魔棒工具
  - 剪裁工具 + 切片工具
  - 缩放工具
    - 可以使用： Alt + 滚轮前后
    - 缩放到100%：Ctrl + 1
    - 放大：Ctrl + 加号
    - 缩小：Ctrl + 减号
  - 取色器
- 选项
- 信息（F8）
- 图层（F7）
- 历史记录
  - 撤销 Ctrl + Z
  - 连续撤销 Ctrl + Alt + Z

设置完常用面板后我们可以通过 “窗口 → 工作区 → 新建工作区” 来保存

辅助试图
在视图下开启：
- 对齐
- 标尺 Ctrl + R
- 显示 > 参考线 Ctrl + ;（需要勾选显示额外内容）

1.1.2.1 测量、取色

获取信息

尺寸信息 —- 测量 —→ width: 200px;
- 测量：
  所有数字都需要测量包括：
  - 宽度、高度
  - 内外边距
  - 边框
  - 定位
  - 文字大小
  - 行高
  - 背景图位置（background-position）
我们可以通过矩形选框工具 & 信息面板来测量
- 选区：
  - 添加到选区：按住Shift
  - 从选区减去：按住Alt
  - 与选区交叉：同时按住Shift和Alt
颜色信息 —-取色—→ color: #ffcc00;
- 取色：
  - 边框色
  - 背景色
  - 文字色
我们可以通过拾色器&吸管工具来取色
- 取色工具巧用：
  - 确定背景是否为纯色：吸管工具
  - 确定是否是线性渐变：魔棒工具

1.1.3.1 切图

切图之前
哪些是需要切出来的？
- 修饰性的（一般用在background属性）
  - 图标、Logo
  - 有特殊效果的按钮、文字等
  - 非纯色的背景
- 内容性的（一般用在img标签）
  - Banner、广告图片
  - 文章中的配图…
- 有些从后台直接拉取的不需要切图，留一个img标签占位就好
切出来的图片存为那种类型？
- 修饰性的：
  - PNG24 图片质量较高
  - PNG8
    它俩都支持全透明，不同的是PNG24支持半透明（IE6不支持）而PNG8不支持半透明。
- 内容性的：
  - JPG
    为了最大限度的保持图的色彩，有时也会进行压缩来保证图片大小不会太大。
切图
- 若文字为独立图层，隐藏文字图层
- 若文字和背景合并，平铺背景覆盖文字
  - 矩形选框工具
  - 自由变换（Ctrl + T）
    使用移动工具 + Alt
- PNG24
  - 移动工具选中所需图层（按住Ctrl多选）
  - 右键合并图层（Ctrl + E）
  - 再右键复制图层到新文件
    或直接拖至已有文件（新建：Ctrl + N）
- PNG8
  - 合并（可见）图层（shift + Ctrl + E）
  - 矩形选框工具选择内容
  - 魔棒工具去除多余部分
    - 从选区中减去：按住Alt
- 可平铺背景的图
  - 用矩形选框工具选取一块区域
  - 复制粘贴到新文件中
    平铺内容充满文件的宽（x轴）或高（y轴）
- 切片工具
  适用于可以一刀切的活动页
  - 拉参考线
  - 选择切片工具
  - 点击“基于参考线的切片”按钮
  - 保存（全选切片，同意设置存储格式）

1.1.4.1 保存

存储所需内容

　复制、　新建、　粘贴
（Ctrl + C Ctrl + N Ctrl + V ）
存储为web所用格式
（Alt + Shift + Ctrl + S）

1.1.5.1 修改、维护

更改画布大小
移动图标
- 若建立为独立图层，则用移动工具拖动即可
- 若图标为非独立图层
  - 用选区工具选中图标区域
  - 用移动工具拖动图标
减小画布到指定区域
- 选定选区
- 剪裁

注意事项：修改PNG8的图片需要更改颜色模式为：RGB颜色
PNG8格式的图片默认是“索引颜色”不是“RGB颜色模式”

JPG、PNG8、PNG24这些格式分别适合保存什么特点的图片？

JPG：适合图片色彩丰富，无透明效果要求，但需要对品质进行修改达到压缩目的，最佳是60-80。如：网页配图，banner等

PNG8：适合图片色彩不太丰富，无论透明效果要求，且不需要压缩，图片较小，适合web传输。如：logo，按钮，小图标等

PNG24：适合有半透明效果要求，图片相对于PNG8的格式较大，不支持压缩。如：阴影效果的按钮等

1.1.6.1 图片优化与合并

使用背景图代码

Sprite的使用：
HTML：
<button class="u-btn">点我</button>
CSS：
.u-btn{background:url(images/btn.png) no-repeat 0 -50px
!!! 最后的0表示图片顺着横坐标移动的多少，-50px表示图片顺着y轴移动的多少（向下） !!!

Sprite拼图的好处：
减少网络请求，提升网页加载速度

压缩工具：

无损 Minimage
有损 TinyPng

图片合并：图片之间必须保留空隙
图片排列：横向与纵向

合并分类：

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

由于IE6不支持PNG24半透明
一般处理方法为存两份图，一份PNG24的sprite.png，一份PNG8的sprite_ie.png

网易微专业前端工程师学习笔记相关推荐

网易微专业之《前端开发工程师》学习笔记（1）
何为网易微专业? 微专业是由网易云课堂联合各领域知名专家,以就业为导向,精心打造的职业培训方案. 按要求完成学习,考试通过可获得专业认定证书,令你求职或加薪多一份独特优势. 一个微专业包含了多门必修课 ...
网易微专业python爬虫工程师_ai工程师自然语言处理
该楼层疑似违规已被系统折叠隐藏此楼查看此楼我这有这些课程微专业 1.Android 2.c++系统工程师 3.iOS开发工程师 4.Java web开发:聚焦Java开发工程师必知必会的知识技能 ...
网易微专业web前端开发课程视频教程分享
网易微专业web前端开发课程链接:点此下载密码:oeqx 限时领取视频教程
网易微专业python数据分析统计服_40套大数据云计算高级实战精品，数据分析，数据仓库，数据爬虫，项目实战，用户画像， ......
40套大数据云计算高级实战精品,数据分析,数据仓库,数据爬虫,项目实战,用户画像,日志分析,Hadoop,Flink,Spark,Kafka,Storm,Docker,ElaticStack等视频教程 ...
软考信息安全工程师学习笔记汇总
软考信息安全工程师学习笔记汇总 https://www.moondream.cn/?p=178 2020年软考信息安全工程师备考学习资料包 1.<信息安全工程师教程>重点标记版 2.& ...
软考信息安全工程师学习笔记目录
软考信息安全工程师学习笔记目录欢迎加入最棒的信息安全工程师社群,分享信息安全工程师备考干货资料. 备考交流QQ群:39460595 2019年软考信息安全工程师备考学习资料包 1.<信息安全工 ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
（*长期更新）软考网络工程师学习笔记——Section 6 网络层上篇
目录一.网络层的定义二.IPv4数据报三.IPv4 (一)分类依据 (二)IP地址分类 (三)网络.主机号位数 (四)特殊IP地址四.划分子网五.子网掩码 (一)默认子网掩码 (二)VLSM ...
软考网络工程师学习笔记6-无线通信网
软考网络工程师学习笔记6-无线通信网 1.无线移动通信各种移动通信标准: 1G:第一代模拟蜂窝:频分双工FDD 2G: 第二代数字蜂窝 (1)GSM 全球移动通信采用TDMA (2)CDMA 码分 ...
软考网络工程师学习笔记4-局域网与城域网
软考网络工程师学习笔记4-局域网与城域网 1.局域网体系和标准局域网就是单一机构所拥有的专用计算机网络,中等规模地理范围,实现多种设备互联.信息交换和资源共享. 局域网体系结构在OSI模型中的数据链 ...

网易微专业前端工程师学习笔记

1.1

1.1.1.1 工具、画板、视图

1.1.2.1 测量、取色

1.1.3.1 切图

1.1.4.1 保存

存储所需内容

1.1.5.1 修改、维护

1.1.6.1 图片优化与合并

使用背景图代码

网易微专业前端工程师学习笔记相关推荐

最新文章

热门文章

网易微专业 前端工程师 学习笔记

1.1

1.1.1.1 工具、画板、视图

1.1.2.1 测量、取色

1.1.3.1 切图

1.1.4.1 保存

存储所需内容

1.1.5.1 修改、维护

1.1.6.1 图片优化与合并

使用背景图代码

网易微专业 前端工程师 学习笔记相关推荐

最新文章

热门文章

网易微专业前端工程师学习笔记

网易微专业前端工程师学习笔记相关推荐