二次开发photoshop_Photoshop 101：Web开发人员简介

二次开发photoshop

介绍 (Introduction)

Often, when working as web developer, we need to integrate templates. They can be from Photoshop or other software. In this article, we will have a look at the basics of Photoshop for web developers.

通常，在作为Web开发人员工作时，我们需要集成模板。 它们可以来自Photoshop或其他软件。 在本文中，我们将为Web开发人员介绍Photoshop的基础知识。

This content was initially written for a workshop for DAMDigital London.

此内容最初是为DAMDigital London的研讨会编写的。

Adobe Photoshop is a raster graphics editor software, meaning it is a program that allows users to create and edit images.

Adobe Photoshop是一个光栅图形编辑器软件，这意味着它是一个允许用户创建和编辑图像的程序。

It was released in 1988 and has grown to be the industry standard for graphics software.

它于1988年发布，现已发展成为图形软件的行业标准。

You can download a free trial version of Photoshop on the Adobe website.

您可以在Adobe网站上下载Photoshop的免费试用版。

工作空间 (Workspace)

Photoshop’s workspace is modular, so you can adapt it depending on the work you are doing. Some default workspaces are already set up in Photoshop. In this article, I’m using the Graphic and Web one. To change to this workspace, go into Window/workspace/Graphic and Web.

Photoshop的工作区是模块化的，因此您可以根据自己的工作进行调整。 在Photoshop中已经设置了一些默认工作区。 在本文中，我将使用“ Graphic and Web 。 要更改此工作空间，请进入Window/workspace/Graphic and Web 。

Let’s have a look at our workspace:

让我们看一下我们的工作空间：

• A — Menu bar: This is where you’ll find most photoshop options.

  A —菜单栏 ：您可以在其中找到大多数photoshop选项。

• B — Options bar: This bar will give you all the options for the currently selected tool.

  B —选项栏 ：此栏将为您提供当前所选工具的所有选项。

• C — Toolbox: This panel contains all the available tools from photoshop. Related tools are grouped together, and you can long click on one of them to see all the tools.

  C —工具箱 ：此面板包含photoshop中所有可用的工具。 相关工具组合在一起，您可以长按其中之一以查看所有工具。

• D — Panels: It is the area where you have your basic panels open, such as Layers, History, and so on. To open a panel, just go into Window/(Panel that you want to open)

  D —面板 ：这是您打开基本面板(例如Layers ， History等等)的区域。 要打开面板，只需进入“ Window/(Panel that you want to open)要打开的面板Window/(Panel that you want to open)

创建一个新文件 (Create a new file)

When creating a new file in Photoshop, you first need to know for what medium the design is going to be used — meaning, is it going to be used for a screen (web, film, or video) or for print?

在Photoshop中创建新文件时，您首先需要知道设计将使用哪种媒体，即是将其用于屏幕(网页，电影或视频)还是用于印刷？

Depending on the answer to this question, you will need to change the PPI (Pixels Per Inch) value.

根据此问题的答案，您将需要更改PPI(每英寸像素)值。

Pixels per inch (PPI) is a measurement used to define the resolution of a computer display. This metric evaluates the picture/image quality that a particular computing or output display device is able to display. Pixels per inch is also known as pixel density. Techopedia

每英寸像素数(PPI)是用于定义计算机显示器分辨率的度量。 该度量评估特定的计算或输出显示设备能够显示的图片/图像质量。 每英寸像素数也称为像素密度。 技术百科

For print, you normally need 300PPI, but it actually depends on the printer and the size of the printed document. You should change your colour to CMYK as well, but again that depends on how you print your document. If you want to learn more about RGB and CMYK colours, check out this article.

对于打印，您通常需要300PPI，但这实际上取决于打印机和打印文档的大小。 您也应该将颜色更改为CMYK，但同样取决于您打印文档的方式。 如果您想了解有关RGB和CMYK颜色的更多信息，请查阅本文 。

For screens and web ?, you need 72PPI and RGB colour. Then you need to specify your screen size. I would recommend designing first for mobile, then tablet and desktop.

对于屏幕和Web？，您需要72PPI和RGB颜色。 然后，您需要指定屏幕尺寸。 我建议先设计移动设备，然后再设计平板电脑和台式机。

As a web developer, you might not need to create a new file. Chances are that you will need to work with a design provided by web designers.

作为Web开发人员，您可能不需要创建新文件。 您可能需要使用Web设计师提供的设计。

We are now going to look at an existing .psdtemplate and work with it to have a look around Photoshop.

现在，我们将查看现有的.psd模板，并使用它来浏览Photoshop。

You can download and open this PSD template from Luis Costa.

您可以从Luis Costa下载并打开此PSD模板 。

层数 (Layers)

One of the core features of Photoshop is layers. Layers are like a stack of sheets, and you can see through transparent areas or area with low opacity (partially transparent).

Photoshop的核心功能之一是图层 。 图层就像一叠纸，您可以看到透明区域或不透明性较低的区域(部分透明)。

You can open the layer panel in Window/Layers.

您可以在“ Window/Layers打开图层面板。

The top layer in this panel will be placed over all the other layers underneath. Layers can be organized as well in folders. It is important to correctly name layers and folders. That will help during integration.

此面板中的顶层将放置在其下的所有其他层之上。 也可以在文件夹中组织层。 正确命名图层和文件夹很重要。 这将有助于集成。

Next to each folder and layer, you have an eye icon. This allows you to toggle their visibility.

在每个文件夹和图层旁边，都有一个眼睛图标。 这使您可以切换其可见性。

Your PSD might have a lot of layers and documents. One way to quickly find a layer is to select the move tool (v). Right click on the canvas where you want to find your layer. You will get all the layers in the area where you have right clicked. By clicking on one, it will select this layer in your layer panel.

您的PSD可能包含很多图层和文档。 快速找到图层的一种方法是选择move tool (v) 。 右键单击要在其中找到图层的画布。 您将获得右键单击区域中的所有图层。 通过单击一个，它将在“图层”面板中选择该图层。

工具箱 (Toolbox)

Photoshop comes with a load of tools. I’m going to show you a few useful ones that will help you ?.

Photoshop带有大量工具。 我将向您展示一些有用的方法，这些方法可以帮助您？

First, if you just install Photoshop CC 2018, you will need to restore all tools. So go to Edit > Toolbar and click on the Restore Defaults button.

首先，如果仅安装Photoshop CC 2018，则需要还原所有工具。 因此，转到“ Edit > Tool栏”，然后单击“恢复默认值”按钮。

We are going to see some of the most useful tools you’d use to integrate a template:

我们将看到一些您用来集成模板的最有用的工具：

A —选择工具 (A — Selection tools)

• Move: Allows the user to move a layer around the canvas. As we saw earlier, it can be used as well to find a layer if you right click on your canvas.

  移动 ：允许用户在画布上移动图层。 正如我们之前看到的，如果右键单击画布，它也可以用于查找图层。

• Rectangular Marquee: This tool is used to select an area of the canvas to copy and paste, fill it in, and so on. It can be used as well to measure. When your selection is done, you can find the size of the selected area in Window/Info. You might need to change the default unit in photoshop Edit/preferences/general/Unit & Rulers then set your units to pixels.

  矩形选框 ：此工具用于选择画布上要复制和粘贴，填充等的区域。 它也可以用来测量。 选择完毕后，您可以在Window/Info找到所选区域的大小。 您可能需要在photoshop的“ Edit/preferences/general/Unit & Rulers更改默认单位，然后将单位设置为像素。

B —裁剪和切片工具 (B — Crop and Slice tools)

• Crop: This tool can… crop an image ?. In the tool settings (Options Bar), you can set an aspect ratio that you want to keep.

  裁剪 ：此工具可以…裁剪图像？ 在工具设置(选项栏)中，可以设置要保留的纵横比。

C —测量工具 (C — Measuring tools)

• Eyedropper: The eyedropper allows you to quickly get a color reference in your design. Just click where you want the color. Then at the bottom of your toolbox, the foreground color will change to the selected color. If you click on the foreground color, it will open the color picker window. From there you can get the value of your color.

  吸管 ：吸管可让您快速获得设计中的颜色参考。 只需单击您想要的颜色。 然后，在工具箱的底部，前景色将更改为所选颜色。 如果单击前景色，它将打开color picker window 。 从那里您可以获取颜色的价值。

• Color Sampler: When integrating your design, you might need to select multiple colors. We are going to use the info window again Window/Info. This tool allows us to create a color sampler. Just click on the area of the image you want to get the colors from. You will get each color in the info panel. You can change the color type to web by clicking on the Eyedropper icon under the number.

  颜色采样器 ：集成设计时，您可能需要选择多种颜色。 我们将再次使用信息窗口Window/Info 。 该工具使我们可以创建颜色采样器。 只需单击要从中获取颜色的图像区域。 您将在信息面板中获得每种颜色。 您可以通过单击数字下方的吸管图标将颜色类型更改为Web。

• Ruler: helps you to measure your template. All the info will appear in your info window. Maintain Shiftwhen measuring, so your ruler stays straight. You can get angles also.

  标尺 ：帮助您测量模板。 所有信息将出现在您的信息窗口中。 测量时保持Shift ，使标尺保持笔直。 您也可以获取角度。

G —导航工具 (G — Navigation tool)

• Hand: This tool helps you to get around the canvas. You can access this tool at any time by holding the spacebar and dragging it with your mouse.

  手 ：此工具可帮助您在画布上四处走动。 您可以随时按住空格键并用鼠标拖动它来访问此工具。

• Zoom: Allows you to zoom in and out (you can you Ctrl + +, or Ctrl + - too).

  缩放 ：可以放大和缩小(也可以Ctrl + +或Ctrl + - )。

导游 (Guides)

As you might have noticed when opening our PSD file, we have some green lines on our template. They are guides. They are basically helpers that will help you build or measure things around your canvas.

正如您在打开PSD文件时可能已经注意到的那样，模板上有一些绿线。 他们是向导。 他们基本上是帮手，可以帮助您在画布上构建或度量事物。

You can move existing guides using the move tool(v).

您可以使用move tool (v)移动现有参考线。

To create new guides, you will need to open your ruler: View/Ruler or Ctrl + R. The ruler will appear in your workspace. Then from the ruler, you can drag a new guide into your canvas.

要创建新指南，您需要打开标尺： View/Ruler或Ctrl + R 标尺将出现在您的工作区中。 然后从标尺中将新的参考线拖到画布中。

To remove a guide, use the move tool(v) and put the guide back in the ruler.

要删除参考线，请使用move tool (v)，然后将参考线放回标尺中。

To hide and show all your guides, you can just use Ctrl + H, or go to View/Extras.

要隐藏和显示所有指南，只需使用Ctrl + H或转到“ View/Extras 。

智能对象 (Smart objects)

What are smart objects?

什么是智能对象？

Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer. Adobe

智能对象是包含来自光栅或矢量图像的图像数据的图层，例如Photoshop或Illustrator文件。 智能对象会保留图像的原始内容及其所有原始特征，从而使您可以对图层执行非破坏性编辑。 土坯

Smart objects can be recognized in your layers when they have the following icon in their thumbnails:

当智能对象的缩略图中具有以下图标时，便可以在图层中识别它们：

Smart objects are really handy if you work with vector-type images (SVG, EPS, AI), but are also useful with other complex raster files.

如果使用矢量类型的图像(SVG，EPS，AI)，则智能对象非常方便，但对于其他复杂的光栅文件也很有用。

Let’s try to import a smart object into our PSD. Download an SVG file from flaticon. To import our SVG in our canvas, just drag the file into the canvas. We can now edit our SVG in illustrator, or any other vector software, by double-clicking on the thumbnail or our smart object. Changes will appear in our PSD.

让我们尝试将一个智能对象导入到我们的PSD中。 从flaticon下载SVG文件。 要将SVG导入画布中，只需将文件拖动到画布中即可。 现在，我们可以通过双击缩略图或智能对象来在illustrator或任何其他矢量软件中编辑SVG。 更改将出现在我们的PSD中。

Smart objects can do way more than that, though. If you want to learn more about them, check out 10 Things You Need to Know About Smart Objects in Photoshop.

不过，智能对象的作用远不止于此。 如果要了解有关它们的更多信息，请在Photoshop中查看关于智能对象需要了解的10件事 。

出口资产 (Export assets)

First, just a reminder that photoshop is a raster software, not a vector software. This means we “can’t” export SVG files from photoshop. To do so, you will need to export these kinds of files from Illustrator or Inkscape, for example.

首先，提醒一下，Photoshop是光栅软件，而不是矢量软件。 这意味着我们“无法”从photoshop导出SVG文件。 为此，例如，您将需要从Illustrator或Inkscape导出此类文件。

On the web, we want to have light image files. For photography, we would use a compressed .jpg file. If you need to use transparency (Alpha channel) we would use .png file. For an animated image, we would use a .gif. If you need a vector image (icons, for example) the best is to export your file as .svg. If you want to have more information about all the files available in Photoshop, you can check out "file formats" in the Adobe's website.

在网络上，我们希望拥有浅色的图像文件。 对于摄影，我们将使用压缩的.jpg文件。 如果您需要使用透明度(Alpha通道)，我们将使用.png文件。 对于动画图像，我们将使用.gif 。 如果需要矢量图像(例如，图标)，最好是将文件导出为.svg 。 如果您想获得有关Photoshop中所有可用文件的更多信息，可以在Adobe网站上查看“文件格式” 。

导出我们的画布 (Export our canvas)

To export the canvas, just follow these steps:

要导出画布，只需按照以下步骤操作：

1. Go to File/Export/Save for Web

   转到File/Export/Save for Web

2. Pick file format
   选择文件格式
3. Pick image size
   选择图像尺寸
4. Pick quality
   挑选品质
5. Save
   保存

仅从画布导出资产 (Export only an asset from the canvas)

You will probably need to export some assets of your template.

您可能需要导出模板的某些资产。

Let’s export the left arrow in the product carousel:

让我们导出产品轮播中的左箭头：

Using the move tool, we are going to find our layer. Right click on the arrow and select the layer Arrow Left. Now just right click on this layer in the layer panel. Select export as and select the type of file you need.

使用移动工具，我们将找到我们的图层。 右键单击箭头，然后选择图层Arrow Left 。 现在，只需在图层面板中右键单击该图层即可。 选择“ export as然后选择所需的文件类型。

We can also export folders.

我们还可以导出文件夹。

动作 (Actions)

What’s an action in Photoshop?

在Photoshop中有什么动作？

An action is a series of tasks that you playback on a single file or a batch of files — menu commands, panel options, tool actions, and so on. For example, you can create an action that changes the size of an image, applies an effect to the image, and then saves the file in the desired format. Adobe

操作是您在单个文件或一批文件上回放的一系列任务-菜单命令，面板选项，工具操作等。 例如，您可以创建一个动作来更改图像的大小，将效果应用于图像，然后以所需的格式保存文件。 土坯

This feature is really convenient if you want to resize a batch of images for the web!

如果您要为网络调整一批图像的大小，此功能非常方便！

Let’s create a new action to crop an image and export this one:

让我们创建一个新的动作来裁剪图像并将其导出：

1. Download a bunch of images from https://unsplash.com/

   从https://unsplash.com/下载一堆图像

2. Open one of those images
   打开其中一张图片

3. Open the Actions panel, Window/Actions,

   打开“ Actions面板，“ Window/Actions ，

4. Create a new action by clicking on the icon Create a new action (The one on the left of the bin icon). Let’s name this action Export for web — client name.

   通过单击图标创建新动作 (bin图标左侧的那个)来创建新动作 。 让我们将此操作命名为“ Web导出-客户名称”。

5. We are now recording our action. The record button will be red, and you can stop recording by clicking on the stop icon (square icon on the left)/
   我们现在正在记录我们的行动。 录制按钮将变为红色，您可以通过单击停止图标(左侧的方形图标)/
6. Select the crop icon and set the ratio to 1x1 and crop the image/
   选择裁剪图标并将比例设置为1x1并裁剪图像/

7. Now we want to export our image, File/Export/Save for Web, select JPG, quality 50% and width 500px.

   现在我们要导出图像， File/Export/Save for Web ，选择JPG ，质量为50％，宽度为500px。

8. Click save and pick your destination folder.
   单击保存，然后选择目标文件夹。
9. Close your image without saving it.
   关闭图像而不保存它。
10. To stop recording click on the stop icon (square icon on the left).
    要停止录制，请单击停止图标(左侧的正方形图标)。

We now have our action, so we can open an image and just “play” our action by clicking on the play button.

现在我们有了动作，因此我们可以打开图像，然后单击“播放”按钮来“播放”动作。

If we want to apply our action to a batch of images, just follow these steps:

如果我们要将操作应用于一批图像，请按照下列步骤操作：

1. Go to File/Automate/Batch

   转到File/Automate/Batch

2. Select the Source folder.

   选择Source文件夹。

3. Select our action
   选择我们的行动

4. Click on Ok

   点击Ok

And voilà! All your images are in the export folder.

和瞧！ 您所有的图像都在导出文件夹中。

I hope you’ve enjoyed this small Photoshop 101 introduction for web developers ?. If you want to have a 102 version, let me know what you would like to know or to read more about ?.

我希望您喜欢Web开发人员的这个小型Photoshop 101简介。 如果您想使用102版本，请让我知道您想知道什么或想进一步了解？。

• @vince_umo

  @vince_umo

• vincent-humeau.com

  vincent-humeau.com

翻译自: https://www.freecodecamp.org/news/photoshop-101-introduction-for-web-developers-62d55232e62b/

二次开发photoshop