194 lines
9.6 KiB
Markdown
194 lines
9.6 KiB
Markdown
|
---
|
|||
|
title: Photoshop
|
|||
|
localeTitle: Photoshop中
|
|||
|
---
|
|||
|
## Photoshop中
|
|||
|
|
|||
|
Adobe Photoshop是一种基于光栅(像素)的图像编辑软件,可供各种内容创建者用于图形/照片的创建和编辑。开发人员或设计人员通常使用Photoshop来创建或修改网站的资产和照片。一些开发人员还将photoshop用于网站设计和模型,但其他工具(如Adobe Experience Design和Sketch)正变得越来越常用。 Adobe Photoshop适用于Windows和Mac,但目前不适用于Linux。
|
|||
|
|
|||
|
开发人员可以在photoshop中执行的常见操作是修改图像的像素大小和分辨率(网页为72dpi)以便正确使用Web,并修改图像以具有透明背景(使用文件类型.gif和.png)。通常的做法是将图像的大小减小到需要在网站上使用的最大尺寸。这减少了服务器空间和加载时间,Photoshop是实现这一目标的工具。
|
|||
|
|
|||
|
### 概要
|
|||
|
|
|||
|
* 基于光栅的图像编辑软件
|
|||
|
* Photoshop文件是.psd,可以导出到大多数图像文件类型。
|
|||
|
* Photoshop使用像素。确保创建足够大的资产,因为在不降级的情况下不可能扩大规模。
|
|||
|
* 可通过Adobe订阅下载适用于Windows和Mac的下载。
|
|||
|
* 变得不常用于网站/用户界面模型。
|
|||
|
* 许多用于照片编辑的高级工具和功能,开发人员可能不需要。
|
|||
|
|
|||
|
Photoshop创建于1988年,是各种图像处理任务的行业标准,例如:
|
|||
|
|
|||
|
* 照片处理,如裁剪图像,快速改变颜色
|
|||
|
* 设计[的实物模型](https://en.wikipedia.org/wiki/Mockup)的网站或应用
|
|||
|
* 设计徽标1
|
|||
|
* 创建[样式图块](http://styletil.es/)
|
|||
|
* 设计图标
|
|||
|
|
|||
|
Photoshop由网页设计师,移动应用程序设计师,用户体验设计师和摄影师以及其他行业专业人士使用。
|
|||
|
|
|||
|
### Photoshop与其他工具有何不同?
|
|||
|
|
|||
|
开始的设计师通常想知道Photoshop和Illustrator之间的区别,以了解使用哪个工具:
|
|||
|
|
|||
|
Photoshop会创建光栅图像,这意味着如果您进行近距离放大,则可以看到图像上的像素。
|
|||
|
|
|||
|
另一方面,Illustrator创建矢量图形。矢量图形可以调整为任何形状,没有任何像素化。
|
|||
|
|
|||
|
例如:
|
|||
|
|
|||
|
![矢量vs光栅示例](https://raw.githubusercontent.com/cecyc/textures/master/vector-vs-raster.jpg)
|
|||
|
|
|||
|
照片是光栅图像,插图是矢量图像。
|
|||
|
|
|||
|
当您需要使用多种媒体格式(照片,文本)或不关心无需像素化的大小调整时,请选择Photoshop。
|
|||
|
|
|||
|
### 安装
|
|||
|
|
|||
|
Adobe Photoshop是Creative Cloud程序套件的一部分。您可以[通过Adobe网站](https://www.adobe.com/products/photoshop/free-trial-download.html)安装免费的7天Photoshop试用版。试用后,您需要选择适合您的价格选项。
|
|||
|
|
|||
|
如果你需要的只是Photoshop,你可以选择单应用程序选项,每月19.99美元,它包括访问TypeKit(一个很好的字体来源)和20GB的存储空间。
|
|||
|
|
|||
|
学生和老师可以[在这里](http://www.adobe-students.com/creativecloud/buy/students.html)获得[教育折扣](http://www.adobe-students.com/creativecloud/buy/students.html) 。
|
|||
|
|
|||
|
### 基本
|
|||
|
|
|||
|
#### 开始一个新文件
|
|||
|
|
|||
|
首次打开Photoshop时,您可能会看到一个对话框,询问您是否要:
|
|||
|
|
|||
|
* 打开现有文档
|
|||
|
* 创建一个新文档
|
|||
|
|
|||
|
如果您没有看到,可以转到`File` > `New...`或使用`CMD` / `ctrl` + `N`键盘快捷键。
|
|||
|
|
|||
|
对于Web项目,您需要选择较低的分辨率或dpi(每像素点数)。标准是72 dpi。
|
|||
|
|
|||
|
对于打印项目,您应该选择更高的分辨率。建议至少300 dpi。
|
|||
|
|
|||
|
#### 概观
|
|||
|
|
|||
|
![Photoshop窗口视图](https://raw.githubusercontent.com/cecyc/textures/master/photoshop-view.png)
|
|||
|
|
|||
|
当您打开Photoshop时,您将看到几个主要组件。
|
|||
|
|
|||
|
左侧的工具调色板和右侧的调色板部分。
|
|||
|
|
|||
|
工具选项板具有操作或编辑图像所需的所有工具(请参阅下面的“工具”部分)。
|
|||
|
|
|||
|
有些工具有自己的调色板,您将在右侧的调色板部分看到。您可以通过转到“ `Window`并切换可用的各种调色板来控制在调色板视图中看到的调色板。
|
|||
|
|
|||
|
画布是项目的工作区。您可以在画布周围移动元素,并调整画布大小。不在画布上的任何东西都是不可见的。
|
|||
|
|
|||
|
#### 工具
|
|||
|
|
|||
|
![Photoshop工具调色板](https://raw.githubusercontent.com/cecyc/textures/master/tools-palette.png)
|
|||
|
|
|||
|
1. 移动工具:在画布周围移动元素。
|
|||
|
|
|||
|
2. 选框工具:在图层上标记和编辑矩形或圆形选区。
|
|||
|
|
|||
|
3. 套索工具:可用于绘制选区的自由形式选择工具。
|
|||
|
|
|||
|
4. 魔棒工具:从图像中的特定颜色中进行选择。
|
|||
|
|
|||
|
5. 裁剪工具:裁剪画布的大小。
|
|||
|
|
|||
|
6. 滴管工具:从图像中选择一种颜色并将其加载到调色板中。
|
|||
|
|
|||
|
7. 点修复画笔工具:从图像克隆区域,并将其混合到图像的不同部分。用它来修饰和混合。
|
|||
|
|
|||
|
8. 画笔工具:自由形式绘图。
|
|||
|
|
|||
|
9. 克隆图章工具:复制并粘贴图像中的某些像素。用它来修饰。
|
|||
|
|
|||
|
10. 历史记录笔刷:根据历史记录将图像的颜色和其他属性恢复。用它来纠正错误。
|
|||
|
|
|||
|
11. 橡皮擦工具:自由形式擦除。
|
|||
|
|
|||
|
12. 油漆桶工具:用颜色填充选择(默认前景色)。
|
|||
|
|
|||
|
13. 模糊工具:图像的自由形式模糊。
|
|||
|
|
|||
|
14. 减淡工具:减轻图像的一部分。
|
|||
|
|
|||
|
15. 钢笔工具:用于绘制路径或以更精确的方式进行选择。
|
|||
|
|
|||
|
16. 水平类型工具:在水平线上键入文本(默认前景色)。
|
|||
|
|
|||
|
17. 路径选择工具:选择绘制路径。
|
|||
|
|
|||
|
18. 自定义形状工具:从各种形状预设中选择以绘制到画布上。
|
|||
|
|
|||
|
19. 手工工具:在画布上移动。
|
|||
|
|
|||
|
20. 放大镜工具:放大或缩小画布。
|
|||
|
|
|||
|
|
|||
|
在最底部,您可以设置前景色和背景色。您可以通过按`x`键快速切换前景色和背景色。
|
|||
|
|
|||
|
#### 图层
|
|||
|
|
|||
|
可以从调色板部分窗口的右侧访问图层调色板。
|
|||
|
|
|||
|
项目由多个层组成。项目中的每个元素都是自己的图层。图层是可堆叠的。
|
|||
|
|
|||
|
在下面的示例中,“圆”图层位于图层调板上的“A”图层顶部。这意味着圆圈呈现在画布上的字母“A”之上。
|
|||
|
|
|||
|
每次要防止图层进行随意调整时,可以通过从图层窗口中选择并按下锁定按钮来锁定图层。
|
|||
|
|
|||
|
您还可以为每个图层指定标题。当您使用复杂的合成时,这是一种很好的做法。只需双击图层窗口中的图层标题即可重新命名。哪个是使用文件夹的好方法,你也应该为大项目中的良好实践做些什么。
|
|||
|
|
|||
|
![图层调色板](https://raw.githubusercontent.com/cecyc/textures/master/layers.png)
|
|||
|
|
|||
|
#### 导入字体
|
|||
|
|
|||
|
Photoshop Creative Cloud许可证附带免费的[Typekit](https://typekit.com/)帐户。 Typekit是一种字体代工厂,您可以在其中找到用于数字或打印用途的字体。
|
|||
|
|
|||
|
要从Typekit添加字体:
|
|||
|
|
|||
|
1. 从“工具”选项板中选择“水平类型工具”。
|
|||
|
2. 单击左上角的字体选择器下拉菜单。
|
|||
|
3. 单击`add fonts from Typekit`
|
|||
|
|
|||
|
![从Typekit添加字体](https://raw.githubusercontent.com/cecyc/textures/master/add-from-typekit.png)
|
|||
|
|
|||
|
这将打开一个浏览器窗口并带您进入Typekit网站,您可以在其中向Photoshop Creative Cloud帐户添加字体(确保使用您的Adobe帐户凭据登录)。添加到您的帐户后,使用“类型”工具时,您可以使用这些字体。
|
|||
|
|
|||
|
#### 导出文件
|
|||
|
|
|||
|
单击`File` > `Export` 。
|
|||
|
|
|||
|
然后,您可以选择`Quick export to PNG` ,这在大多数情况下适合Web使用。
|
|||
|
|
|||
|
如果需要其他格式,请选择“ `File` >“ `Export` >“ `Export as...` 。在那里,您可以选择`PNG` , `JPG`或`GIF` 。
|
|||
|
|
|||
|
### Photoshop键盘快捷键
|
|||
|
|
|||
|
|工具快捷方式| MAC |赢| | -------------------------- | ------ | ------ | |移动工具| V | V |
|
|||
|
|矩形选框工具| M | M |
|
|||
|
|椭圆选框工具| M | M | |套索工具| L | L | |多边形套索工具| L | L | |磁性套索工具| L | L | |魔杖工具| W | W | |快速选择工具| W | W | |裁剪工具| C | C | |切片工具| C | C | |切片选择工具| C | C | |吸管工具|我|我| |彩色采样器工具|我|我| |标尺工具|我|我| |注意工具|我|我| |计数工具|我|我| |斑点修复刷工具| J | J | |治疗刷工具| J | J | |补丁工具| J | J | |红眼工具| J | J | |画笔工具| B | B | |铅笔工具| B | B | |颜色替换工具| B | B | |搅拌机刷工具| B | B | |克隆邮票工具| S | S | |图案印章工具| S | S |
|
|||
|
|
|||
|
### Photoshop的替代品
|
|||
|
|
|||
|
* [Pixelmator](http://www.pixelmator.com/mac/) (仅适用[于](http://www.pixelmator.com/mac/) Mac)
|
|||
|
* [GIMP](https://www.gimp.org/) (Mac和PC)
|
|||
|
|
|||
|
### Photoshop的在线替代品
|
|||
|
|
|||
|
* [的Pixlr](https://pixlr.com/)
|
|||
|
* [Photopea](https://www.photopea.com/) (编辑.psd文件的唯一在线工具)
|
|||
|
|
|||
|
#### 脚注
|
|||
|
|
|||
|
1. 虽然您可以在Photoshop中设计徽标,但大多数设计师选择使用Illustrator作为徽标,因为Illustrator会创建矢量图像,以便更轻松地为多种用途调整徽标的大小,例如用于名片的小徽标或用于横幅标记的大徽标。
|
|||
|
2. 您可以使用“笔刷预设”选项在Photoshop中创建自己的笔刷。您还可以导入画笔。这允许您不限制自己使用默认画笔。
|
|||
|
3. 如果您使用图形平板电脑制作艺术品,使用Photoshop会更容易也更好,因为您有多种画笔选项,而Illustrator中没有。
|
|||
|
|
|||
|
#### 更多信息:
|
|||
|
|
|||
|
* [官方网站](https://www.adobe.com/products/photoshop.html)
|
|||
|
* [光栅与矢量图形](https://www.psprint.com/resources/difference-between-raster-vector/)
|
|||
|
* [学习和支持](https://helpx.adobe.com/support/photoshop.html?promoid=5NHJ8FD2&mv=other)
|
|||
|
|
|||
|
替代方案:Gimp(Linux和免费提供)
|