Photoshop

张东红

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


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

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


Photoshop的工作界面由以下几个部分组成:
图片描述

菜单栏:

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

工具属性栏:

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

工作区:

 平时可以缩放图像来进行细致操作。也可以把其他的都隐藏起来只剩下中间的,但你必须对PS极其熟练,
 对各种快捷键了如指掌。

浮动窗口:

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

图片描述

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

图片描述

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

图片描述

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

图片描述


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

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

2.使用ps制作精灵图
步骤演示:
1.)新建一个透明图层
图片描述

2.)使用alt+鼠标滚动建,放大图层
3.) 新建参考线(点击切片工具在图层上面右键选划分切片)
图片描述
在实际测量小图大致宽高后,就开始建立参考线。比如,我的图大致为25px25px(宽高不超过25px25px)。
所以,我在参考线取向上水平方向建立了3条参考线(25像素、50像素、75像素);垂直方向建立了3条参考线
(25像素、50像素、75像素)。

4.)根据参考线放入各个小图标
图片描述

3.使用代码显示精灵图
图片描述
代码如下:

<style type="text/css">

   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>

2、精灵图的优势和缺点
优势:

1.)加快网页加载速度 
  浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,
  加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染
  
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.移动区:分别是 图层移动 、文字移动、选择移动
图片描述

2.选区工具:分别是矩形选择工具(选区为正方形或者长方形)、椭圆选择工具(选区为圆形或者椭圆形)
、单行选择工具(选区为横线)、单列选择工具(选区为竖线)选择区域,就是对想修改或者编辑的图片或
者内容进行选择。
图片描述

3.套索工具:分别是多边形套索、圆形套索、磁性套索。(是指像素、颜色自动选择)
图片描述

4.快速选择工具和魔棒选择工具:调节工具的大小,(工具大的话选择的快一些,小的话可以更精准)。根据
处理的图片选择快速选择工具的大小。如果多选或者少选可以添加选区,从选区减去。
图片描述

5.裁剪工具、透视裁剪工具、切片工具、切片选择工具(根据做图需求对图片进行裁剪.图片尺寸的工具,使
它选择的图像为保留图象,图像为选择的就会被删除)。
图片描述

6.吸管工具:分别有吸管工具、3d材质吸管工具、颜色取样器工具、标尺工具、注释工具、计算工具
图片描述

7.图象修复工具 :分别是污点修复画笔工具(用来修复图片内相近颜色中的瑕疵)、修复画笔工具(多用
于修复人脸上的瑕疵)、修补工具(把别地方的图象用到想修复的地方)、内容告知磁性移动工具、红眼工
具(移去用闪光灯拍摄的人物照片中的红眼,也可以移去用闪光灯拍摄的动物照片中的白色或绿色反光)
图片描述

8.画笔工具、铅笔工具、颜色替换工具、混合器画笔工具 (绘制你喜欢的图像)
图片描述

9.图章工具:分别是仿制图章工具、图案图章工具。(按住“Alt”键选取源的点(按住Alt键点按以定义作为
源的点),然后后开始涂抹。PS:下图就是做好之后的效果图。)
图片描述

10.画笔工具:历史记录画笔工具、历史记录画笔工具
图片描述

11.橡皮擦工具:分别是橡皮擦工具、背景橡皮擦工具、魔术橡皮擦工具
图片描述

12.油漆桶:分别是渐变工具、油漆桶工具、3d材质拖放工具
图片描述

13.模糊工具、锐化工具、涂抹工具
图片描述

14.减淡工具、加深工具、海绵工具
图片描述

15.钢笔工具,绘制钢笔路径的工具(图象处理中常用)、自由钢笔工具:不规则绘制钢笔路径的工具(不常
用)、添加锚点工具,控制路径形状的点、删除锚点工具、转换工具
图片描述

16.文字工具:分别是 横排文字工具、直排文字工具、横排文字蒙版工具、直排文字蒙版工具、(横向或竖
向写文字。 ●向文字排列蒙板和竖向文字排列蒙板,也是横向或竖向写文字,但出现的结果是蒙板图层、就是
定义只显示选区的图层)
图片描述

17.选择工具:分别是路径选择工具、直接选择工具
图片描述

18.形状工具:分别是矩形工具、椭圆矩形工具、椭圆形工具、多边形工具、自定形工具(可绘制形状
图层和形状路径)
图片描述

19.工具:分别是抓手工具、旋转视图工具
图片描述

20.放大工具:分别是放大缩小
图片描述

21.背景工具:分别是前图层后图层
图片描述

22.快速蒙版选项:分别是 被蒙版区域、所选区域
图片描述

23.全屏模式:分别是标准屏幕模式(当前屏幕)、带有菜单栏的全屏模式
图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

阅读 836
1 声望
1 粉丝
0 条评论
1 声望
1 粉丝
宣传栏