Photoshop

时间 2019-11-16

标签 photoshop 繁體版

原文原文链接

内容介绍
1.精灵图(雪碧图)的原理以及实现
2.Photoshop基本切图css

Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。web

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，能够有效地进行图片编辑
工做。Photoshop有不少功能，在图像、图形、文字、视频、出版等各方面都有涉及。浏览器

Photoshop的工做界面由如下几个部分组成：
网络

菜单栏：工具

菜单栏为整个环境下全部窗口提供菜单控制，包括:文件、编辑、图像、图层、选择、滤镜、视图、
 窗口和帮助九项。 
 Photoshop经过两种方式执行全部命令，一是菜单，二是快捷键。

工具属性栏：布局

会根据工具箱的不一样工具出现不一样的属性

工做区：url

平时能够缩放图像来进行细致操做。也能够把其余的都隐藏起来只剩下中间的，但你必须对PS极其熟练，
 对各类快捷键了如指掌。

浮动窗口：spa

由三大块组成，第一块颜色和色板，这个主要就是选择和调节颜色很简单。第二块调整和样式，这个菜
 单栏都有，只是这些比较经常使用，放在这里方便使用，你也能够把你经常使用的添加上去。

第三大块要单独说，首先说图层，图层能够说是PS中极其重要的精华之所在，能够把各类不一样的操做分红
 不一样的层，哪一层要调整或删除就弄哪一层，对别的层没有影响，极其方便，靠上一点一个能够调节图层
 模式，另外一个能够调节不透明度的百分比，这两个也常常用到。

通道是指RGB通道，也就是红，绿，蓝三个通道，能够利用通道抠图，通道磨皮等等，而路径就用的比较少了，在用钢笔工具时可能要用的多点。

最下面一排小图标也是对图层的各类操做，有删除图层，新建图层，添加图层蒙版，还有图层调节样式等，这些也都是常常要用到的。

1、精灵图(雪碧图)的原理以及实现
一、什么是精灵图设计

精灵图直译为“精灵”，也被称为一般被解释为“图像拼合”、“贴图定位”或“图片精灵”、“雪碧图”
，是一种网页图片应用处理方式。其实就是把一个页面涉及到的全部零星图片都包含到一张大图中去，这样一
来，当访问该页面时，载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。3d

2.使用ps制做精灵图
步骤演示：
1.）新建一个透明图层

2.）使用alt+鼠标滚动建，放大图层
3.）新建参考线（点击切片工具在图层上面右键选划分切片）

在实际测量小图大体宽高后，就开始创建参考线。好比，个人图大体为25px25px（宽高不超过25px25px）。
因此，我在参考线取向上水平方向创建了3条参考线（25像素、50像素、75像素）；垂直方向创建了3条参考线
（25像素、50像素、75像素）。

4.）根据参考线放入各个小图标

3.使用代码显示精灵图

代码以下：

div{
        background-image: url(./images/1.png);
        background-repeat: no-repeat;
        width: 25px;
        height: 25px;
        margin: 15px;
        /* display: inline-block; */
   }
   .pictrue1{
       background-position: 0px -25px;
   }
   .pictrue2{
       background-position: 0px -50px;
   }
   .pictrue3{
       background-position: -25px 0px;
   }
</style>

二、精灵图的优点和缺点
优点：

1.）加快网页加载速度 
  浏览器接受的同时请求数是10个，若是图片过多会影响总体的视觉效果，并且对于不稳定的网络带宽，
  加载起来更是噩梦，因此把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染
  
2.）后期维护简单 
 该工具能够直接经过选择图片进行图片的拼接，固然你也能够本身挪动里面的图片，本身去布局你的雪
 碧图，直接生成代码，简单易用

缺点：

图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会
出现没必要要的背景，若是留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出
现拼合相邻图片，干扰图片的状况;

2、Photoshop基本切图
切图分为俩种：一种是自动化切图，一种是手动切图
1.自动化切图
动化顾名思义就是不用咱们人工去操做的，经过计算机脚本帮助咱们进行切图，这样作的好处是十分精准和方便。可是若是切去的图片较多的时候是十分适宜的，可是若是只切去一小部分的图片。

步骤以下：
首先打开一张PSD文件，这里强调必定要是PSD文件。由于脚本的运行依据是图层，只有PSD文件才存在图层这种说法

第一步选择以下说是：

第二步参数以下所示：
这里特别要注意的一点是第一个红色的方框必定要是英文，由于博主使用的是CS5版本，这样设置会发生错误，其余的版本就不清楚了。为了不出错，咱们统一使用英文命名，第二个方框我建议选择PNG，由于png支持背景透明，这个有利于咱们作自动切图

最终咱们在运行后的test文件夹下面打开效果以下，同时图片背景也是透明的

可是这样切图算是对计算机运算能力的考验，有时候PS软件还会出现假死的现象，因此在作切图的时候咱们须要在人工时间和计算机时间上面作一个权衡，毕竟不是什么都是自动化就是好的。

2.手动切图

1.）将准备好的详情页置入PS画布中
2.）选择工具栏中的“切片工具”，而后鼠标移动到画布中的时候，就会显示一个刀片的形状，并且会有数字
显示切片个数。
3.）在最上方开始，鼠标按住开始拖动，这样就造成了一个切片，在滚动鼠标时，在右侧位置会显示滑动过
得距离大小。
4.）当切片过程发生重叠现象，好比裁切到同一个部分时，须要将另一个切片移动位置，这时候能够选择
“切片工具”下方的“切片选择工具”再选择移动位置

5.）当须要删除切片时，选择切片，而后右键选择删除，或者直接按delete键删除。
6.）当须要所有删除切片时，这时选择工具栏中的“视图”-“清除切片”，这样就将切片所有清除掉了。
7.）当切片切完以后，就须要将切片导出。这时候选择工具栏中的“文件”-“导出”-“存储为Web所用格式”，
或快捷键ctrl+shift+alt+s
8.）在弹出的【存储为web所用格式】对话框中，下拉选择框选择JPEG格式
9.）按需求更改质量（低、中、高、很是高、最佳。这五个模式）

修图技巧
修图，是指对图像进行一些细微的调整，好比去除掉图像上一些不须要的元素，或者切图时想隐藏图层中的元素，可是UI使用的是合并了图层的元素，能够用修图技巧将这个元素去除掉。好比下面这张图片，按钮的文字和按钮合并图层了，咱们想去掉文字，能够用矩形选框，而后执行“自由变换”命令，就能够横向拖动覆盖掉文字。

图层操做
UI在设计效果图时，会创建不少特殊的图层，这些图层若是直接切图，每每是得不到咱们须要的图片，经常使用的操做是，须要把应用了图层样式的图层执行“栅格化图层样式”;须要把路径绘制的图层执行“栅格化图层”;须要把图层组执行“合并组”等操做，执行了这些操做后，把这些特殊图层转化为普通层，才能方便后续的切图操做。下面这张图片显示的是一个带图层的效果图的图层状况，咱们须要认识这些图层。

编辑文件快捷键
撤销 CTRL+Z
向前一步 CTRL+SHILT+Z
向后一步 CTRL+ALT+Z
退取 CTRL+ALT+F
剪切 CTRL+X
复制 CTRL+C
合并复制 CTRL+SHILT+C
粘贴 CTRL+V
原位粘贴 CTRL+SHILT+V
自由变换 CTRL+Y
在次变换 CTRL+SHILT+T
色彩设置 CTRL+SHILT+K

图像调整快捷键
调整-->色阶 CTRL+L
调整-->自动色阶 CTRL+SHILT+L
调整-->自动对比度 CTRL+SHILT+ALT+L
调整-->曲线 CTRL+M
调整-->色彩平衡 CTRL+B
调整-->色相/饱和度 CTRL+U
调整-->去色 CTRL+SHILT+U
调整-->反向 CTRL+L
提取 CTRL+ALT+X
液化 CTRL+SHILT+X

文件快捷键
新建 CTRL+N
打开 CTRL+O
打开为 ALT+CTRL+0
关闭 CTRL+W
保存 CTRL+S
另存为 CTRL+SHILT+S
另存为网页格式 CTRL+ALT+S
打印设置 CTRL+ALT+P
页面设置 CTRL+SHILT+P
打印 CTRL+P
退出 CTRL+Q

选择操做快捷键
全选 CTRL+A
取消选择 CTRL+D
所有选择 CTRL+SHILT+D
反选 CTRL+SHILT+L
羽化 CTRL+ALT+D

图层操做快捷键
新建图层 CTRL+SHILT+N
新建经过复制的图层 CTRL+J
与前一图层编组 CTRL+G
取消编组 CTRL+SHILT+G
合并图层 CTRL+E
合并可见图层 CTRL+SHILT+E

1.移动区：分别是图层移动、文字移动、选择移动