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.
This content was initially written for a workshop for DAMDigital London.
Adobe Photoshop is a raster graphics editor software, meaning it is a program that allows users to create and edit images.
It was released in 1988 and has grown to be the industry standard for graphics software.
You can download a free trial version of Photoshop on the Adobe website.
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.
Let’s have a look at our workspace:
- A — Menu bar: This is where you’ll find most photoshop options.
- B — Options bar: This bar will give you all the options for the currently selected tool.
- 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.
- D — Panels: It is the area where you have your basic panels open, such as
History, and so on. To open a panel, just go into
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?
Depending on the answer to this question, you will need to change the PPI (Pixels Per Inch) value.
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
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.
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.
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.
We are now going to look at an existing
.psdtemplate and work with it to have a look around Photoshop.
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).
You can open the layer panel in
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.
Photoshop comes with a load of tools. I’m going to show you a few useful ones that will help you ?.
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.
We are going to see some of the most useful tools you’d use to integrate a template:
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 & Rulersthen set your units to pixels.
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 — 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 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.
- 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.
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
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.
You can move existing guides using the
To create new guides, you will need to open your ruler:
R. The ruler will appear in your workspace. Then from the ruler, you can drag a new guide into your canvas.
To remove a guide, use the
move tool(v) and put the guide back in the ruler.
To hide and show all your guides, you can just use
H, or go to
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
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.
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.
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.
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.
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.
Export our canvas
To export the canvas, just follow these steps:
- Go to
File/Export/Save for Web
- Pick file format
- Pick image size
- Pick quality
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.
We can also export folders.
What’s an action in 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:
- Download a bunch of images from https://unsplash.com/
- Open one of those images
- Open the
- 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.
- 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)/
- Select the crop icon and set the ratio to 1x1 and crop the image/
- Now we want to export our image,
File/Export/Save for Web, select
JPG, quality 50% and width 500px.
- Click save and pick your destination folder.
- Close your image without saving it.
- 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:
- Go to
- Select the
- Select our action
- Click on
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 ?.