Photoshop. Artboards

Create a new file in Photoshop 

Рис. 1. Clipboard.

Рис. 1. Copy the image to the Clipboard.

There are several ways to create a new file in Photoshop. The first way is to create a file using the clipboard.
I found the image I needed on the Internet. Next, I copy it to the clipboard via the context menu called by the right mouse button. I go to Photoshop and open (Menu: File→New) or the [Ctrl + N] hotkey. Try to memorize the keyboard shortcuts or, to begin with, write them down, and immediately get used to using them in your work. Firstly, hotkeys significantly speed up work, and secondly, it is a sign of professionalism.

Рис. 2. Clipboard.

Рис. 2. Transferring an image via the Clipboard.

In the dialog box, Photoshop offers ways to create a file, and the "Clipboard" comes first. All are correctly set at once parameters, namely size, resolution, color palette.
The newly created file is empty, with a single "Background" layer. Paste the file from the clipboard, hotkey [Ctrl + V]. The image rises to a new layer. Now you can work with it or just save it.

The second way to create a file is a custom file, i.e. a file created with our parameters/settings. In the right in the dialog box panel, we set the file parameters: these are the dimensions (width and height) of the "Canvas", you can set in any units of measurement (I'll make a reservation right away that it's convenient to use the metric system for printing – it's mm or cm, and it's convenient to use pixels for the WEB);
Image resolution is traditionally measured in ppi (pixels per inch or pixels per inch). For printing - it is from 150 to 300 ppi, for the WEB – it does not matter;
Color palette: for printing it is CMYK, for WEB – RGB;
And also the background color.

Растрирование

Подробности читайте в большой статье, посвящённой одному из «китов» современной полиграфии – растрированию. Из статьи Вы подробно узнаете: о понятии линиатура (частота растра); о связи частоты растра и разрешения; о зависимости частоты растра от печатной машины и типа бумаги…

Перейти…

Рис. 3. File Template.

Рис. 3. Saving the file template in Photoshop.

But the most interesting thing is not that you can create a file with the necessary parameters, but that the settings we often use can be save them as a template and use them in subsequent work.
For example, let's create a setup of a standard A4 sheet of printing quality, with a resolution of 300 dpi, in the CMYK palette.
In this field, enter the name of our saved. If there is already a template with this name, then Photoshop does not allow you to re-enter it.

Custom templates are placed on the "Saved" tab. As you can see, to delete the template, you need to click on the "trash" icon.
The template header displays not only the name, but also the main parameters, which allows you to quickly navigate and find the desired template.

If only one parameter changes in your work, then you should not start a bunch of templates. I'll explain. Let's say I'm working with I have the same printing quality files, Resolution and color palette, but only the format (file size) changes. In this case, I will use one A4 template, recently created, and just quickly change the dimensions in it – it will still be faster, than to look for a template with the right sizes, if I have 20 pieces of them.

The "Recent" tab displays the history of the files we create, again, if our work is cyclical, it is convenient to get templates from here.
And besides, Photoshop provides a large selection of standard templates that you can use if convenient.

Let's create a file from our template. The new file always has a standard "Background" layer, which has an opaque fill.

But Photoshop does not lag behind other manufacturers and keeps up with the times, so here, as in other programs, I mean not only Adobe products, "Artboard" appeared. I see surprise and dislike on the part of printers-before printers, but do not rush to judge, let's see what they are needed for and how to work with them.

The Artboards in Photoshop 

Рис. 4. Artboard.

Рис. 4. Create an Artboard in Photoshop.

Let's create "Artboard" via the context menu. In the name "Artboard" it is immediately convenient to describe its dimensions. Why this is necessary will be clear in the future.

The size of the Artboard can be adjusted with the mouse, and the size values are displayed in the Info panel. The size is specified in the units of measurement that we have set in the Settings. Let's fix them. Menu: Edit→Settings→Units and Rulers… Or hotkeys [Ctrl +K].
When we create a file for the WEB, it is convenient to use pixels. Why? Yes, because in the WEB, our output field is the screen, and the dimensions are areas of the screen are expressed in pixels. Even if we do not specifically prepare images for the WEB, but stupidly post them on social networks networks, anyway, it is convenient to control the size, and hence the quality of images, through pixels.

Рис. 5. Ruler Settings.

Рис. 5. Ruler Settings in Photoshop.

So, we change the Ruler parameter to "pixels".

Back to the process of editing the size of the Artboard. Now our hint is also in the Info panel The size of the Artboard is displayed in pixels.
There is also an option for more precise adjustment of the size of the Artboard - by numbers, we'll talk about it a little later.

The number of Artboards is limited by the physical limits of the Arttable on which they are located. Portable is very large and much larger than in Illustrator, but these limits exist and they can be reached. However, in real tasks, I have never run into the limits of Photoshop.

Рис. 6. Artboard Structure.

Рис. 6. Artboard structure in Photoshop.

Let's create another Artboard and name it according to the same principle, i.e. we will specify the size of the area in the name.

The ideology of Artboards Photoshop is some structures that exist above groups. In other words, it is entities with the highest status.
This way of organizing Artboard differs from the ideology of the Illustrator and even more so from the ideology adopted by in Indesign, although the programs are distributed by one company.

Рис. 7. Artboard Tool.

Рис. 7. The Artboard tool in Photoshop.

Another way to create an Artboard is to create using a tool. That's what the tool is called "Artboard" is hidden on the top shelf, under the "Move" tool. The tool allows you to draw Artboards of arbitrary sizes. By clicking on the "+" you can quickly multiply Artboards.

Рис. 8. Reproduction of Artboards.

Рис. 8. Reproduction of Artboards in Photoshop.

In the Properties panel, you can edit some of the Artboard parameters, for example, such as: Change the template; Background color; as well as the Width and X-axis offset.

I have prepared a file in which a real example shows how to use Artboards in practice. The essence of this the trick is that when it is necessary to create a banner design of different sizes for a Site, we do not create a bunch of separate files with different sizes, and we create one file with several Artboards.
One more time. For adaptive layout on the WEB, it is necessary to create banners of the same design, but of different sizes. It may also be necessary and for advertising modules that are placed in different areas of the site or are placed on different sites where the placement areas may vary.
And either we work the old-fashioned way, create a separate file for each size, and output a standard to the second monitor. Either we work in a new way, creating the required number of Artboards and design everything at once. So not only the design banners are obtained faster and better, but we also get a significant acceleration at the stage of creating ready-made files, i.e. files directly for the WEB.

YouTube-Channel XpertPRESS

Photoshop lessons from a professional polygraphist is a practical course for those who want to master Photoshop and/or hone their skills in it. We will tell and show Photoshop from the basics to the most difficult practical techniques. Let's explain the basic concepts of raster graphics and printing qualities. Techniques for working with objects, with color, design chips, animation, RAW and many others. We will work out and fix hotkeys, keys other methods of fast and high-quality work, i.e. professional skills. Welcome to the Channel…

Перейти…

The technology of working with Artboards in Photoshop 

Let's take a concrete example. I have a website with different advertising areas, with different sizes of advertising modules. I created Artboards for these sizes.
At some point, the behavior of Artboard resembles the behavior of a Canvas. Indeed, the image coming out beyond the Canvas, as well as the image that goes beyond the Artboard, ceases to be visible. However, if you output for If the whole image is Artboard, then it becomes visible again and can safely exist outside of the Artboard. Moreover, this zone is huge (unlike Illustrator) and you can throw a bunch of auxiliary material here, which is difficult it can be done in an Illustrator with large files and is almost impossible to do in an Indesign.
For this Photoshop respect and respect!

In Artboard, as in a regular file, you can work with individual layers, or link layers for ease of moving around several necessary objects. And you can also combine layers into groups. All hierarchies created in Artboard also continue exist outside of the Artboard on the Art table, as well as in another Artboard.

The "Move" tool with Artboard works the same way as in a regular file, all modes are fully supported, including the "Auto-selection" of the layer.

Рис. 9. Export Settings.

Рис. 9. Setting up Quick export in Photoshop.

But the most delicious thing about technology for creating WEB banners is Fast export. Quick Export Options they are configured in (Menu: Edit→Settings→Export), or via the hotkey [Ctrl + K].
In the "Quick Export format" block, select the file format. Photoshop does not offer us anything superfluous, but only supported WEB formats. Let me remind you that the RGB color palette and certain formats are used for the WEB. Let's briefly consider them.
JPG - does not support transparency, but the main advantage is a powerful compression engine.
PNG - less efficient at compression, but supports transparency.
GIF is intended for animation, and SVG is a vector format, Photoshop just supports it, but it cannot write vectors into it.
In another block of settings, you can specify the location where the export files are saved. This is either the same place where the working file is saved., or a manual place, i.e. a place of our choice.

And so, jpg or PNG is suitable for our example. The optimal JPG, but for example I use PNG.

Through the context Menu, it is possible to use not all Artboards for "Quick export", but only selected ones. To select, use the "Move" tool. If there are no dedicated Artboards, then "Quick Export" via The context menu does not work. But it will work through the menu (Menu: File→Export→Quick export to ...). In this in case the export applies to all Artboards.

In the dialog box, select the location of the export files, according to the settings made earlier. And here it is a trick! We immediately we get the right number of files (according to the number of Artboards) in the right format and, most importantly, with the right name. Please note that the files are named after Artboards. And the trump card up our sleeve has now played to our advantage.

Video version of the lesson in Photoshop 

You can watch the video version of the lesson on our YouTube channel. Don't forget to subscribe, like and wait for the release of the next series.

Download working files  

You can download working files with layers in PSD format by following the link.

Download the archive

00172

Archive Preview