PS相关知识点_ps里的wywh

ps基础

【Adobe Photoshop，简称“PS”】，是由【Adobe】 开发和发行的【图像处理软件】。
Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。
ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mAPHY9Zm-1605793424951)(…/AppData/Roaming/Typora/typora-user-images/image-20201116135340523.png)]

菜单栏

文件

• ctrl+n 新建
• ctrl+o打开
• ctrl+w关闭 ctrl+alt+w关闭全部
• ctrl+s保存 ctrl+shift+s另存
• ctrl+alt+shift+s另存为web所用格式

编缉

首选项——单位与标尺 —— 像素

填充——内容识别

图像

图像大小 ctrl+alt+i

画布大小 ctrl+alt+c

裁切

裁剪

文字

字符面板（段落面板）

选择

ctrl+d 取消选区

ctrl+shift+i 反选

视图

清除切片

清除参考线

标尺（ctrl+R）

放大 ctrl+加号

缩小 ctrl+减号

窗口

图层面板(F7)

信息面板(F8)

历史记录

工作区——新建工作区（复位工作区）

工具栏

移动工具（v）——熟练

• 属性栏

  • 自动选择（图层）
  • 对齐
    • 选中元素（ctrl+左键点击点选任意图层，shift+点击连续选择，鼠标左键拖动）

• 复制

  • 选中图层,alt+鼠标左键拖动
  • alt+方向键

• 移动

  • 方向键（默认1像素，配合shift移动10像素）

选区工具(Ｍ)——熟练

新选区（加选、减选、交叉）

羽化（0）

样式（正常）

• 固定比例
• 固定大小

抓手工具(H)

移动画布：空格+鼠标左键拖动，

+空格键可临时转换为抓手工具。

放大镜（Z）

默认放大

配合alt缩小( 或配合鼠标滚轮-向前放大)

文字工具（T）——熟练

属性栏——字体，字号、颜色 、对齐（读取、修改）

​ 复制（ctrl+a,ctrl+c复制，ctrl+v粘贴）

标尺工具

x和y：绘制的起点坐标。
W：标尺投射到x轴上的宽度。
H：标尺投射到y轴上的高度。（正负仅代表方向，x轴方向向右，y轴方向向下）。
A：代表标尺和x轴的夹角，取值范围在-180°到+180°之间。
L1：表示标尺选段的长度。
L2：表示绘制第二条线段的长度（按住alt键可以继续绘制第二条线段，最多绘制两条线段，a为两天线段的夹角）

切片工具——熟练

绘制切片

• 鼠标右键-编缉切片选项（x,y左上角坐标，w,h切片宽高）
• 鼠标右键-右键划分切片

删除切片

• 右键——删除
• 选中——delete
• 视图—清除所有切片

选中切片

• 切片选择工具
• 切片工具+ctrl ——》转换为 临时切片选择工具

修改切片

• 右键——w\h
• 拖动控件手柄

保存切片

• crtl+alt+shift+s 存储为web所用格式
  • 存储—切片（所有用户切片，选中切片）
  • 设置— 其他——（命名、指定是否放入image文件夹）

图层面板

上（下）移图层 —— ctrl+ } crtl+ {

置顶（底 ）—— ctrl+shift+} ctrl+shift+}

合并图层 —— ctrl+E

盖印图层 —— ctrl+shift+alt+e

• 新建
• 删除
• 右键——删格化图层
• 显示、隐藏（点小眼睛） （配合alt显示隐藏其它）
• 填充（alt+del,crtl+del）
• 载入选区——选中图层 配合ctrl+鼠标左键点击

图层样式

• 颜色叠加
• 右键（拷贝图层样式——粘贴）

cutterman切图（熟练使用）

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

http://www.cutterman.cn/zh/cutterman

• PS版本要求 CC2014及以上
• 操作系统 win/mac

cutterman安装完成后重启PS, 从菜单栏 -> 窗口 -> 扩展打开（注册-登录）

• 导出单个图层

• 导出多个图层

• 导出合并图层（勾选合并图层）

• 导出选区内容

• 导出指定大小（宽度、高度）

• 导出不覆盖（设置—相同文件名—重命名）

• 导出不同格式

• 压缩品质

  • jpg (0-100) 通常（70-80）

图片格式

.psd（源文件）

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

.jpg

色彩丰富 【不支持透明】
压缩比高，生成文件体积小，
支持多种压缩级别可以控制文件大小

适用：色彩丰富的不透明的图片（摄影图像（产品图，照片，渐变））

.gif

颜色不够丰富，只支持256种颜色
【支持动画】
支持透明（【支持全透明】，不支持半透明）
文件小

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

.PNG

• png8
  • 支持透明【支持全透明】，不支持半透明
• png24
  • 支持alpha透明（全透明和全不透明，半透明）
  • 颜色丰富
  • 早期的浏览器不支持PNG图像（ IE6）
  • 色彩简单图片文件小，色彩丰富的图片文件大

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

.WebP

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SdSsYUqC-1605793424955)(…/AppData/Roaming/Typora/typora-user-images/image-20201116160956011.png)]

图片优化

• 选择合适的图片格式
• 精灵图、iconfont
• 分清背景图（小图标、纹理性背景）、前景图（产品图、广告图，展示性）
• 大图片分割
  • 静态大banner图处理

        1.根据有效区在图片中心填充白色区域（比有效区至小2-4个像素）

        2.前景图取大图的中心部分（按有效区大小）

        3.大背景图片要居中（center）,有效区内的图片处理居中（margin:0 auto;）
1
2
3
4
5

5793424955)]

图片优化

• 选择合适的图片格式
• 精灵图、iconfont
• 分清背景图（小图标、纹理性背景）、前景图（产品图、广告图，展示性）
• 大图片分割
  • 静态大banner图处理

        1.根据有效区在图片中心填充白色区域（比有效区至小2-4个像素）

        2.前景图取大图的中心部分（按有效区大小）

        3.大背景图片要居中（center）,有效区内的图片处理居中（margin:0 auto;）
1
2
3
4
5