PS基础使用方法-前端切图部分

PSD文件和非PSD文件的区别

psd文件为带有图层的文件,非PSD(jpg,png,gif)文件为没有图层的文件

PS图层的设置

对于前端来讲我们对于面板的设置一般为排版规则的选项

• 设置方法
  

  mark


• 打开信息面板，修改单位
  

  mark
  
  

  打开文件

  
  文件=>打开
  

  标尺、辅助线工具

  
  



• 标尺设置 视图 => 标尺


• 清除 辅助线 视图 => 清除参考线

矩形选框工具 拾取颜色 缩放工具

在 最左侧的工具栏里选取 快捷键依次是 M I Z

抓手工具

快捷键是H 但是我们通常使用的时候呢，是站住空格键加鼠标左键就能移动图片 当我们选取抓手工具的时候（此时已经按了H），我们左上方会有四个按钮

mark

第一个按钮实际像素 就是能显示出图片图片实际的大小 第二个按钮适合屏幕 就是能显示出图片在你PS工具上都能显示的合适大小 这两个是我们在开发中常用的两个按钮

移动工具（自动选择）

快捷键是V 当在图片上点击每一块区域时就能选中和移动这个图层。

注意：我们开发中会勾选自动选择

mark

切图及切图时图层注意事项

1. V 选择你要的图层


2. M 选取你要选取的范围


3. ctrl+c 复制


4. ctrl+n 新建一个文件


5. ctl+v 粘贴在这个文件上


6. 文件 储存为WEB所用格式 格式一般为 png jpg gif ，当你的背景为透明一定要选png24,存储，选择存储目录，确定（推荐） （第二种方法 选择目录 格式一般为 png jpg gif 确定 ）

以下是参考实例

1、打开文件

把图片拖拽到ps里 或者 文件--打开--找到这个文件--打开
2、修改单位
ctrl+k---单位与标尺---标尺 改为像素
3、放大镜 z 鼠标左键拖拽图片
4、移动工具v
放大 ctrl+"+"
缩小 ctrl+"-"
5、显示/隐藏 标尺 ctrl+r
6、显示/隐藏 辅助线 ctrl+;
7、矩形选框工具 M 测量大小
8、小手状态，拖拽图片： 按住空格+鼠标左键 拖拽
快捷键 H
9、还原图片大小 ctrl+1
10、图片适应窗口的大小 ctrl+0
11、吸管工具 i

切图：
1、切片工具 c
或者：左边工具栏 第五个选中点击右键 选中第三个 切片工具
2、保存切片
ctrl+alt+shift+s
3、选中所有的切片 预设：JPEG高 ----存储---文件名：img 选择：所有用户切片---保存

雪碧图精灵图制作

1 css精灵 雪碧图：
把多张图片放在一张图片中加载
好处：减少http的请求次数

2、制作雪碧图
新建一个psd ctrl+N 宽度200px 高度 100px 背景内容：透明
在原图上M 选择图标部分 ctrl+c
在新建的图像中ctrl+v

移动工具 ： 勾选自动选择 选择图层

M键小图标--》选择--》色彩范围 出现吸管工具 吸取白色的部分，---》按Delete键
ctrl+d 取消选区
v键 可以移动