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