day07

项目切图规范

PS常用工具

移动工具
- 移动工具主要负责图层、选区、等的移动、复制操作。
- 快捷键：v
抓手工具
- 快捷键：h
- 空格 + 鼠标左键拖动，空格键可临时转换为抓手工具。
放大镜工具
- 放大镜工具可以放大或缩小图像。
- 放大：点击放大工具，点击图像。Ctrl+ 加号。按住 alt+ 鼠标滚动滚轮。
- 缩小：点击缩小工具，点击图像。Ctrl+ 减号。按住 alt+ 鼠标滚动滚轮。
文字工具
- 快捷键：t
- 文字工具是用来输入文本的。
吸管工具
- 快捷键：i
标尺工具
- 标尺工具可以用来测量图像的高度或者宽度。
- 属性栏： x 和 y：绘制的起点坐标。 W：标尺投射到 x 轴上的宽度。 H：标尺投射到 y 轴上的高度。（正负仅代表方向，x 轴方向向右，y 轴方向向下）。
切片工具
- 根据用户需求截出图片中的任何一部分，同时一张图上可以切多个地方。另存为 web 所用格式的时候能将所切的各个部分分别保存成一张图片，完全区分开来。保存时可选择图片格式以及切片类型。
制作表情包
- 将表情素材调入PS中；
- 再找一张脸部细节丰富的人物照片，同样调入PS里；
- 利用套索工具，将人物中表情部分扣取下来，拖入表情素材内。Ctrl+T调整一下表情的尺寸，让它和素材大小协调；
- Ctrl+Shift+U首先对表情部分去色，然后按下Ctrl+M调出曲线工具，将对比度压低，整个表情打亮。这里特别说一下，挑选素材图时一定要注意去找那些面部打光均匀的照片，避免存在明暗过渡明显的“阴阳脸”，否则会给后期图片处理带来很多麻烦；
- 双击表情图层，然后按住Alt键依次拖动混合颜色带右侧两个高光滑杆，你会发现表情就完美地嵌入到素材中了；

常见的图片格式和特点

格式	优点	缺点	使用场景
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
gif	文件小，支持动画、透明，兼容性比较好	只支持256种颜色	色彩简单的logo/icon/动图
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

CSS精灵

什么是 CSS 精灵

英文叫法 CSS sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位“

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 50px;height: 50px;background-image: url(./images/jingling.jpg);}.box1 {background-position: -150px 0;}.box2 {background-position: -200px -50px;}</style>
</head>
<body><img src="./images/jingling.jpg" alt=""><div class="box box1"></div><div class="box box2"></div>
</body>
</html>

CSS 精灵优缺点
- 优点：
  - 减少网页的 http 请求，从而大大的提高页面的性能；
  - 图片命名上的困扰；
  - 更换风格方便。
- 缺点：
  - 必须要限定容器大小符合背景图元素位置，需要计算

CSS小箭头

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body {background-color: blue;}* {padding: 0;margin: 0;}.box1 {width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent transparent transparent red;position: absolute;top: 0;}.box2 {width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent transparent transparent blue;position: absolute;top: 0;left: -10px;}.wrap {width: 100px;height: 200px;margin: 0 auto;position: relative;}</style>
</head>
<body><div class="wrap"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

BFC (Block Formatting Context) 块级格式化上下文

什么是bfc？
- Formatting Context：指页面中的一个渣染区域，并且拥有一套渣染规则，他决定了其子标签如何定位，以及与其他标签的相互关系和作用。
  
  BFC块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
怎样生成BFC
- 根标签
- float的值不为none
- overflow 的值不为 visible
- display 的值为 inline-block
- position 的值为 absolute 或 fixed
BFC的特性
- 内部的标签默认会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。
- 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
- BFC 的区域不会与 float 的标签区域重叠。
- 计算BFC的髙度时，浮动子标签也参与计算。
- BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然。
BFC解决的问题
- 外边距塌陷
- 清浮动
- 两栏或者三栏自适应布局

阿里矢量图标

https://www.cnblogs.com/xiaonian0327/p/7735799.html

day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标相关推荐

点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用
一.css其他属性 1.vertical-align属性设置元素的垂直对齐方式,适用于行级元素.行块级元素. (1)语法 vertical-align: top | bottom | middle ...
七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用...
此文转载自:https://blog.csdn.net/qq_52426181/article/details/110228561 一.css其他属性 1.vertical-align属性设置元素的 ...
【CSS】PhotoShop 切图 ① ( 常见的图片格式 - jpeg、gif、png、psd | PhotoShop 切片工具 )
文章目录一.常见的图片格式 - jpeg.gif.png.psd 二.PhotoShop 切片工具 1.导入素材 2.选择切片工具 3.选择切片工具样式 4.改变切片大小 5.改变切片位置一.常见 ...
APP UI设计及切图规范--2016
1.概述 1.1 编写目的该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档. 1.2 读者对象项目实施工作组UI/UE设计人员. 2.色值规范 ...
Android切图规范
Android端切图规范v1.0 1.容器的概念 UI设计师在拿到产品经理的原型图后,应该对每张原型图进行分组分类. 具体的分类方法如下: 1.每一个功能界面对应一个文件夹 2 ...
Android端切图规范
Android端切图规范v1.0 1.容器的概念 UI设计师在拿到产品经理的原型图后,应该对每张原型图进行分组分类. 具体的分类方法如下: 1.每一个功能界面对应一个文件夹 2.对原型图中的界面进行整 ...
iOS设计规范、切图规范与需求
iOS设计规范.切图规范与需求最后更新于 2016年1月22日一.设计规范 1. 常见iPhone尺寸与分辨率等设备尺寸分辨率(px) 分辨率(pt) 状态栏高度(20pt) 导航栏高度(4 ...
android 系统的切图方式_UI设计切图规范
移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度.设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力 ...

day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标

文章目录

day07

项目切图规范

PS常用工具

常见的图片格式和特点

CSS精灵

CSS小箭头

BFC (Block Formatting Context) 块级格式化上下文

阿里矢量图标

day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标相关推荐

最新文章

热门文章