Adobe Photoshop基础

本次讲解是以ps2019版本为基础的，不同版本之间可能有些不同但不会相差太大

一、PS简介

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

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。

ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

前端程序员使用PS主要是用来测量盒子大小，距离，截取图片等

二、常用快捷方式

2.1 文件

• 新建 ctrl+n

• 打开 ctrl + o

• 关闭 ctrl+w

• 保存 ctrl+s

• 另存 ctrl+shift+s

• 存储为web所用格式 ctrl+alt+shift+s

2.2 编缉

• 变换 ctrl+T

• 首选项——单位与标尺

2.3 图像

• 图像大小 crlt+alt+i

• 画布大小 crtl+ alt+c

• 裁剪

• 裁切

 

2.4 选择

• 反选 ctrl+shift+I

• 取消选择 ctrl+D

 

 

2.5 视图

• ctrl+R 标尺

• 清除参考线

• 清除切片

 

2.6 窗口

• 图层F7

• 信息面板 F8

• 扩展或功能

三、常用工具

3.1 移动工具

• 自动选择——图层【分组】

• 对齐

  • 选中图层——选择对齐方式

 

 

3.2 选区

• 新选区

• 是否羽化（提示0像素，某些同学会出现松开鼠标测量结果 不准确注意此处设置）

• 固定大小，固定比例

 

3.3 放大镜

• 放大、缩小画布（默认放大，配合alt缩小）

• ctrl+加号 ctrl+减号 缩放

• alt+鼠标滚轮滚动（ 向前放大，向后缩小）

 

3.4 抓手工具

• 移动画布

  任何工具下按下空格键（转换为抓手工具）

 

3.5 文字工具

• 查看文字大小、字体、颜色

• 复制、粘贴文字

 

3.6 切片工具

右键

编缉切片选

• 修改位置 x，y，修改大小 w，h

 

划分切片

• 右键划分切片（水平、垂直）

 

 

存储

• ctrl+alt+shift+s存储为web所用格式

• 所有用户切片

图片命名

images文件夹

 

四、Cutterman插件

4.1 介绍

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

4.2 下载

官网：Cutterman - 最好用的切图工具

4.3 安装

1. 下载对应工具的一键安装程序

2. 解压下载的安装包, 里面是一个可执行文件, 双击打开

3. 点击安装即可

4.4 启用

• 安装完成后重启PS, 从菜单栏 -> 窗口 -> 扩展里头打开

• 注：需要登录

  安装完成后重启PS, 从菜单栏 -> 窗口 -> 【扩展功能】-> 【cutterman】打开。

 

4.5 设置输出路径

 

4.6 一键切图

点击导出选中图层，可以自动输出所需的各种图片。

 

支持各种图片格式输出  

多个图层合并、单独输出

 

固定尺寸输出

 

五、图片格式

在保证视觉效果的情况下，选择最小的图片格式与图片质量（通常选择 70-80 之间），以减少加载时间。

5.1 PSD

Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。

5.2 JPG

• 色彩丰富 【不支持透明】

• 压缩比高，生成文件体积小，

• 支持多种压缩级别可以控制文件大小

• 色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））

5.3 GIF

• 支持动画

• 支持透明（全透明）

• 颜色不够丰富，只支持256种颜色、文件小

• 适用于：色彩简单的logo/icon/动图

5.4 PNG

• 颜色丰富

• 支持alpha透明（全透明和全不透明，半透明）

• 早期的浏览器不支持PNG图像

• 适用于：透明背景图片【投影，发外光, 线条复杂（文字）】

5.5 WebP

谷歌（google）10年推出一种新型图片格式

• 文件小，支持有损和无损压缩，支持动画、透明

• 但并不是所有浏览器都支持 webp

• 兼容