FrontEnd笔记 -- PhotoShop
文章目录
- 简介
- 基本使用
- 精灵图
- 去除水印
- 彩色CD
简介
- 基本概念
| 概念 | 说明 |
|---|---|
| PS | PhotoShop简称PS，由美国Adobe开发的一款用来处理图像（位图）的软件 |
| AI | Adobe Illustrator简称AI与加拿大开发的CorelDRAW，都是用来作图（矢量图）的软件 |
| 位图 | 由像素点组成的，文件较大，放大会失真，一般用来表示人物、风景等 |
| 矢量图 | 由线条组成的，文件较小，放大后不会失真，一般用来表示工程图等，是由若干个几何图形拼接而成 |
| 分辨率 | 又叫解析度、解像度。可分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等 |
| 图像分辨率 | 单位英寸中所包含的像素点数，分辨率越高意味着图像越清晰，但这个图像文件也越大 |
| 位分辨率 | 又叫色彩深度或位深度，指一个像素中，每个颜色分量(Red,Green,Blue,Alpha通道)的比特数 |
| 栅格化 | 把文字转换为一般图层 |
- 位分辨率
位数越高，颜色越接近生活中的真彩色，但文件也就越大。
| 位数 | 说明 |
|---|---|
| 1位 | 2种颜色（黑白二色） |
| 2位 | 4种颜色 |
| 3位 | 8种颜色，早期的电脑显示器 |
| 8位 | 256种颜色（灰阶有256种灰色） |
| 16位 | 可以组合出64k种颜色 |
| 24位 | 真彩色，主要用于拍摄照片 |
- 图片格式
| 格式 | 说明 |
|---|---|
| .jpg | 24位压缩格式的图片 |
| .png | 无损压缩的位图图形格式；背景为透明效果，使彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘 |
| .gif | 可以存多幅彩色图像，但也可以为静态图像 |
| .svg | HTML5新增的矢量图，一般用作图标字符 |
| .base64(图像编码) | 把图像解析成字符编码，浏览器会自动将其还原成图像 |
| .ico/.cur | 图标文件，一般用作网站的logo |
- 颜色模式
| 模式 | 说明 |
|---|---|
| 位图 | 黑白图 |
| 灰度 | |
| RGB | 显示色，用于屏幕显示（网页采用的是这种颜色模式） |
| CMYK | 油墨色，也叫打印色 |
- 分辨率设置
| 分辨率 | 说明 |
|---|---|
| 72ppi | 用于显示 |
| 170ppi | 用于打印 |
| 300ppi | 用于高精度打印 |
基本使用
- 操作快捷键
| 操作 | 快捷键 |
|---|---|
| 缩放 | Alt+滚轮 |
| F7 | 打开/隐藏图层调板 |
| Alt+Delete | 前景色填充 |
| Ctrl+Delete | 背景色填充 |
| x | 交换前景色和背景色颜色 |
| d | 前景色和背景色还原为黑白色 |
| Ctrl+d | 取消选区 |
| Ctrl+t | 变换图像大小和旋转方向（按Shift键等比缩放，按Alt+Shift沿中心等比缩放） |
| v | 切换到移动工具 |
| z | 切换到缩放工具 |
| c | 切换到切片工具 |
| h | 切换到抓手工具 |
| t | 切换到文字工具 |
| g | 切换到渐变工具 |
| F5 | 画笔调板 |
| F6 | 颜色调板 |
| F7 | 图层调板 |
| F8 | 信息调板 |
| F9 | 动作调板 |
| Ctrl+e | 向下合并图层 |
- 左侧工具栏
| 区块 | 说明 |
|---|---|
| 1 | 选框或选择工具区 |
| 2 | 绘图区（编辑区） |
| 3 | 绘矢量图区和文字编辑区 |
| 4 | 缩放、颜色、蒙版区 |
- 图层操作
| 操作 | 说明 |
|---|---|
| 新建图层 | Ctrl+Alt+Shift+N |
| 复制选中的图层 | Ctrl+J |
| 合并选中的图层 | Ctrl+E |
| 合并可见图层 | Ctrl+Shift+E |
| 组合选中图层 | Ctrl+G |
| 快速选择图层 | Ctrl+单击鼠标左键 |
| 连续多选图层 | Shift+单击鼠标左键 |
| 拖动并复制图层 | Alt+拖动 |
精灵图
雪碧图也称精灵图（英文：Sprites），是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星小图片都包含到一张大图中。
- 应用场景
- 一般只有描述性图片用来制作雪碧图，比如页面中使用的各种小图标
- 按钮背景图及其各种效果的图片，适合做成雪碧图
- 对于img标签设置的内容性图片，是不能合成到雪碧图的
- 开发游戏使用的素材图片不适合做成精灵图
- 制作规范
- 图片在合并之前必须保留空隙
- 图片排列方式有横向和纵向
- 合并分类的原则
- 把同属一个模块的图片进行合并
- 把大小相近的图片进行合并
- 把色彩相近的图片进行合并
- 必须保存为png格式的图片
- 演示视频
ps
去除水印
前两个工具需配合Alt键使用
ps
彩色CD
ps
FrontEnd笔记 -- PhotoShop相关推荐
- 图片处理笔记 Photoshop 去除水印、背景色 、合并图
哎,今年公司干了5年的老美工走了 ,后来招的新人,技术水品太差,压力又大,来来回回换了好几个,现在连美工都没了,被迫自学ps ,自己处理一些简单的图片.学了老忘,晚上没事学习下,并做下笔记加深下记忆. ...
- FrontEnd笔记 -- JavaScript
文章目录 简介 基本语法 关键字 保留字 数据类型 运算符 运算符优先级 流程控制语句 高阶内容 函数 对象 数组 展开运算符 类 事件 小练习 面向对象 Global Math 工厂模式 构造函数 ...
- 机器学习 反向传播_机器学习中的神秘化反向传播：您想了解的隐藏数学
机器学习 反向传播 By Ibrahima "Prof" Traore, ML expert at Wildcard / w6d.io 作者:Wildcard / w6d.io的 ...
- 自学 Photoshop 2022 Mac版-笔记1
最近开始系统学习 photoshop. 非设计专业,工作跟设计部门接触过,最近想自己也能上手操作一些修图做图的操作,想看看学习多久能达到熟练的水平. 我用的是 PS 2022 Mac 版. 用输出倒逼 ...
- photoshop读书笔记
photoshop读书笔记 一 PS设计基础 1.1.工作区和工作流程 PS可以分为三个部分: 最左边是PS的工具,可切换为两列或一列. 上面为工具的选项面板,会随着工具变换而发生变换. 默认的 ...
- 李涛Photoshop笔记之基础篇
李涛Photoshop笔记 1.Photoshop是一个二维的图像合成(含义:在已有的素材基础上进行义艺术再加工)软件: 2.色彩的三个属性:H--色相.S--饱和度.B--明度:HSB是一种色彩模式 ...
- Photoshop CS5自学学习笔记
Photoshop CS5学习笔记 常宝龙 2014年6月 引言 一直以来都对Photoshop非常感兴趣,每当在网上看到一些Photoshop大神做出的很神奇的图片时,都会莫名其妙的从心底里 ...
- PhotoShop自学笔记
PhotoShop笔记整理 教程-B站 P3 A03_认识主界面 P4 A04_新建文档_参数设置 P5 A05_新建文档_文档大小 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 ...
- Photoshop 读书笔记
Photoshop学习笔记 第一章 PS设计基础 1.1工作区和工作流程 工作区的介绍 工作区称操作页面,photoshop的工作页面主要分为五个部分: 1.工具栏:默认位于界面的左侧,工具栏中包含了 ...
最新文章
- jquery实现心算练习
- 使用DotNetCharting控件生成报表统计图总结
- SQLServer常用的日期和时间函数梳理
- 微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色
- eclipse中配置spring约束schema
- HDU 5978 2016ICPC大连 H: To begin or not to begin
- pythonz字体颜色以及终端不显示颜色的解决办法
- Have Fun with Numbers及循环链表（约瑟夫问题）
- 多元函数的牛顿迭代法
- html 页面跳转 加载效果,好看的html页面加载源码带跳转
- HTTP协议的基本格式
- 网易回应暴力裁员事件并道歉了！连发两声明：当事人绩效确不合格...刘强东说了这句话，意外上热搜...
- 白盒测试技术——语句覆盖、判定覆盖、条件覆盖
- 传说中的蝴蝶效应？－－MAC地址克隆竟然惹祸了！
- 2019 TIP之ReID：Learning Modality-Specific Representations for Visible-Infrared Person Re-Identificati
- 如何用计算机名称获取计算机ip
- Spark基础编程实践
- 传奇从这里诞生--JAVA的N个十
- JavaWeb|浅谈Cookie
- cocos-2d 游戏开发