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

Adobe Photoshop基础_第1张图片

2.2 编缉

  • 变换 ctrl+T

  • 首选项——单位与标尺

2.3 图像

  • 图像大小 crlt+alt+i

  • 画布大小 crtl+ alt+c

  • 裁剪

  • 裁切

 Adobe Photoshop基础_第2张图片

2.4 选择

  • 反选 ctrl+shift+I

  • 取消选择 ctrl+D

Adobe Photoshop基础_第3张图片 

 

2.5 视图

  • ctrl+R 标尺

  • 清除参考线

  • 清除切片

Adobe Photoshop基础_第4张图片

 

2.6 窗口

  • 图层F7

  • 信息面板 F8

  • 扩展或功能

Adobe Photoshop基础_第5张图片

三、常用工具

3.1 移动工具

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

  • 对齐

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

Adobe Photoshop基础_第6张图片 

 

3.2 选区

  • 新选区

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

  • 固定大小,固定比例

Adobe Photoshop基础_第7张图片

 

3.3 放大镜

  • 放大、缩小画布(默认放大,配合alt缩小)

  • ctrl+加号 ctrl+减号 缩放

  • alt+鼠标滚轮滚动( 向前放大,向后缩小)

Adobe Photoshop基础_第8张图片

 

3.4 抓手工具

  • 移动画布

    任何工具下按下空格键(转换为抓手工具)

Adobe Photoshop基础_第9张图片 

3.5 文字工具

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

  • 复制、粘贴文字

Adobe Photoshop基础_第10张图片 

3.6 切片工具

右键

编缉切片选

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

Adobe Photoshop基础_第11张图片 

划分切片

  • 右键划分切片(水平、垂直)

 Adobe Photoshop基础_第12张图片

 

存储

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

  • 所有用户切片

Adobe Photoshop基础_第13张图片

图片命名

Adobe Photoshop基础_第14张图片

images文件夹

Adobe Photoshop基础_第15张图片 

四、Cutterman插件

4.1 介绍

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

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

4.2 下载

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

4.3 安装

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

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

  3. 点击安装即可

4.4 启用

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

  • 注:需要登录

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

 Adobe Photoshop基础_第16张图片

4.5 设置输出路径

Adobe Photoshop基础_第17张图片 

4.6 一键切图

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

Adobe Photoshop基础_第18张图片 

支持各种图片格式输出  

Adobe Photoshop基础_第19张图片

多个图层合并、单独输出

Adobe Photoshop基础_第20张图片 

固定尺寸输出

Adobe Photoshop基础_第21张图片 

五、图片格式

在保证视觉效果的情况下,选择最小的图片格式与图片质量(通常选择 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

  • 兼容

Adobe Photoshop基础_第22张图片 

 

你可能感兴趣的:(photoshop,ui)