13. Preparing Files for the Web
Lesson overview
In this lesson, you’ll learn how to do the following:
• Create and stylize a button for a website.
• Use layer groups.
• Optimize images for the web and make good compression choices.
• Record an action to automate a series of steps.
• Play an action to affect multiple images.
• Save assets using Adobe Generator.
• Evaluate assets and revise them with Generator.
• Design for multiple screen sizes with multiple artboards and test them with Adobe Preview CC.
This lesson will take about an hour to complete. Download the Lesson13 project files from the Lesson & Update Files tab on your Account page at www.peachpit.com, if you haven’t already done so. As you work on this lesson, you’ll preserve the start files. If you need to restore the start files, download them from your Account page.
PROJECT: MUSEUM WEBSITE
Often, you need to create separate images for buttons or other objects in a website. Adobe Generator, built into Photoshop, makes it easy to save layers, layer groups, and artboards as separate image files.
Getting started
In this lesson, you will build buttons for the home page of a Spanish art museum’s website, and then generate appropriate graphics files for each button. You’ll use layer groups to assemble the buttons, and then create actions to prepare a set of images for use as a second group of buttons. First, you’ll view the final web design.
1. Start Photoshop, and then immediately hold down Ctrl+Alt+Shift (Windows) or Command+Option+Shift (Mac OS) to restore the default preferences. (See “Restoring default preferences” on page 4.)
2. When prompted, click Yes to delete the Adobe Photoshop Settings file.
3. Choose File > Browse In Bridge.
4. In Bridge, click Lessons in the Favorites panel. Double-click the Lesson13 folder in the Content panel.
Note
If Bridge isn’t installed, you’ll be prompted to install it when you choose Browse In Bridge. For more information, see page 3.
5. View the 13End.psd file in Bridge.
There are eight buttons at the bottom of the page, arranged in two rows. You’ll transform images into buttons for the top row, and use an action to prepare the buttons for the second row.
6. Double-click the 13Start.psd thumbnail to open the file in Photoshop. Click OK if you see the Missing Profile dialog box.
7. Choose File > Save As, and rename the file 13Working.psd. Click OK in the Photoshop Format Options dialog box.
Using layer groups to create button graphics
Layer groups make it easier to organize and work with layers in complex images, especially when there are sets of layers that work together. You’ll use layer groups to assemble the layers that make up each button, and they’ll come in handy when you save assets using Adobe Generator later.
Four images have been arranged in the start file to serve as the basis for buttons. You’ll add a label to each, identifying the gallery it represents, and then add a drop shadow and a stroke.
Creating the first button
You’ll design the first button, and then duplicate layers and edit them to quickly apply the same treatment to the other three. First, you’ll change the units of measurement to pixels.
1. Choose Edit > Preferences > Units & Rulers (Windows) or Photoshop CC > Preferences > Units & Rulers (Mac OS). In the Units area of the dialog box, choose Pixels from the Rulers menu, and then click OK.
2. Choose View > Snap to turn off snapping. (A check mark appears next to Snap when it’s enabled.)
3. Choose Window > Info to open the Info panel.
The Info panel displays information dynamically as you move the pointer or make selections. Which information it displays depends on the tool that is selected. You’ll use it to determine the position of the ruler guide (based on the Y coordinate) and the size of an area you select (based on the width and height). It’s also very handy for seeing the RGB and CMYK values of colors in an image.
4. Choose View > Rulers. Then drag a ruler guide down until the Y value reported in the Info panel is 795 pixels.
You’ll use this guide to draw a band across the bottom of the image for the label.
5. Zoom in on the first image, the image of the man. Then select Image 1 in the Layers panel.
You’ll use this image to design the first button.
6. Click the New Layer button (
) at the bottom of the Layers panel. The new layer is named Layer 13 and appears directly above the Image 1 layer. Rename it band.
7. Select the Rectangular Marquee tool (
) in the Tools panel. Then, drag a selection across the bottom of the image, as indicated by the guides. The selection should be 180 pixels wide and 32 pixels high.
8. Choose Edit > Fill. In the Fill dialog box, choose Color from the Contents menu, and then, in the Color Picker, select a dark blue (R=25, G=72, B=121). Click OK to apply the fill.
A dark blue band appears at the bottom of the image, where you made your selection. You’ll add text to it next.
9. Choose Select > Deselect.
10. Select the Horizontal Type tool, and select the following settings in the options bar:
• Font Family: Myriad Pro
• Font Style: Regular
• Font Size: 18 pt
• Anti-aliasing: Strong
• Alignment: Center
• Color: White
11. Click in the center of the blue band, and type GALLERY ONE. Use the Move tool to adjust the position of the type layer if necessary.
The label is in place. Now you’ll add a drop shadow and stroke to improve the appearance of the button.
12. Select the Image 1 layer in the Layers panel. Then, click the Add Layer Style button (
) at the bottom of the Layers panel, and choose Drop Shadow.
13. In the Layer Style dialog box, change the following settings in the Structure area:
• Opacity: 27%
• Distance: 9 px
• Spread: 19%
• Size: 18 px
14. With the Layer Style dialog box still open, select Stroke on the left, and apply the following settings:
• Size: 1 px
• Position: Inside
• Color: Click the color swatch to open the Color Picker. Then click the blue band to sample its color, and click OK to select it.
Note
Be sure to click the word Stroke. If you click only the check box, Photoshop applies the layer style with its default settings, but you won’t see the options.
15. Click OK to apply both layer styles.
The button looks good. Now you’ll assemble all of its layers into a single group.
16. Select the GALLERY ONE, band, and Image 1 layers in the Layers panel, and choose Layer > Group Layers.
Photoshop creates a group named Group 1.
17. Double-click the Group 1 layer group, and rename it Gallery 1. Then expand the group. The layers you selected are indented, indicating they’re part of that group.
18. Choose File > Save.
Duplicating buttons
You’ve designed the initial button. You could go through all those steps again to create each of the other buttons, but it will be faster to duplicate layers or even layer groups, and then edit them as necessary.
1. Click the Create A New Group button at the bottom of the Layers panel. Name the group Gallery 2.
2. Drag Image 2 into the Gallery 2 layer group, and then press Alt or Option as you drag the Effects line or the symbol from Image 1 to Image 2.
The drop shadow and stroke you applied to Image 1 are applied to both images now.
3. Select the band layer, and choose Duplicate Layer from the Layers panel menu. Name it band 2, and drag it into the Gallery 2 layer group above the Image 2 layer.
4. Select the Move tool, and then, in the image window, drag the duplicate band layer from the first image to the second one.
Tip
You can also duplicate layers by dragging a layer down to the New Layer icon in the Layers panel.
5. Select the GALLERY ONE layer, and choose Duplicate Layer from the Layers panel menu. Name the duplicate layer GALLERY TWO, and drag it into the Gallery 2 layer group above the band 2 layer.
6. Use the Move tool to drag the duplicate type from the first image to the band on the second image. Then select the Horizontal Type tool, and change the type to GALLERY TWO.
Tip
Press the Shift key as you move the type to drag it in a straight line.
The second button is done. You’ll create the third button by duplicating the entire layer group and making the necessary changes.
7. Select the Gallery 2 layer group, and choose Duplicate Group from the Layers panel menu. Rename the group Gallery 3.
8. Delete the Image 2 layer in the Gallery 3 layer group, and then drag Image 3 into the group, below the band 2 layer.
9. Press Alt or Option as you drag the layer effects from the Image 2 layer (in the Gallery 2 group) onto the Image 3 layer to copy them.
10. In the Gallery 3 group, rename the band 2 layer band 3, and select it. Then, in the image window, drag the blue band from the second image to the third image.
11. Rename the type layer in the Gallery 3 group GALLERY THREE. Then select the layer, and drag the duplicate type from the second image to the blue band on the third image. Finally, select the Horizontal Type tool, and change the type to GALLERY THREE.
12. Repeat steps 1-6 or steps 7-11 to copy the design elements for the fourth button.
13. Save the file, and then close it.
Automating a multistep task
An action is a set of one or more commands that you record and then play back to apply to a single file or a batch of files. In this exercise, you’ll create an action to prepare a set of images to serve as buttons for additional galleries on the web page you’re designing.
Tip
You can create conditional actions that change their behavior based on criteria you define.
Recording an action
You’ll start by recording an action that resizes an image, changes its canvas size, and adds layer styles, so that the additional buttons match the ones you’ve already created. You use the Actions panel to record, play, edit, and delete individual actions. You also use the Actions panel to save and load action files.
There are four images in the Buttons folder that will serve as the basis for new gallery buttons on your website. The images are large, so the first thing you’ll need to do is resize them to match the existing buttons. You’ll perform each of the steps on the Gallery5.jpg file as you record the action. You’ll then play the action to make the same changes on the other images in the folder automatically.
1. Choose File > Open, and navigate to the Lesson13/Buttons folder. Double-click the Gallery5.jpg file to open it in Photoshop.
2. Choose Window > Actions to open the Actions panel. Close the Default Actions folder to keep the Actions panel tidy.
3. Click the Create New Set button (
) at the bottom of the Actions panel. In the New Set dialog box, name the set Buttons.
Photoshop comes with several prerecorded actions, all in the Default Actions set. You can use actions sets to organize your actions so that it’s easier to find the one you want.
4. Click the Create New Action button (
) at the bottom of the Actions panel. Name the action Resizing and Styling Images, and click Record.
It’s a good idea to name actions in a way that makes it clear what the actions do so you can find them easily later.
Don’t let the fact that you’re recording rush you. Take all the time you need to do the procedure accurately. The speed at which you work has no effect on the amount of time required to play a recorded action.
You’ll start by resizing and sharpening the image.
5. Choose Image > Image Size. Choose Pixels from the Units menu for the Width, and then change the Width to 180. By default, the Width and Height values are linked. Confirm that the Height changes to 180 pixels, too. Then click OK.
6. Choose Filter > Sharpen > Smart Sharpen, apply the following settings, and click OK:
• Amount: 100%
• Radius: 1 px
You need to make some additional changes to the image that you can’t make as long as the Background layer is locked. You’ll convert it to a regular layer.
7. Double-click the Background layer name in the Layers panel. In the New Layer dialog box, name the layer Button, and click OK.
When you rename a Background layer, you’re converting it to a regular layer, so Photoshop displays the New Layer dialog box. But the new layer replaces the Background layer; Photoshop doesn’t add a layer to the image.
Now that you’ve converted the Background layer, you can change the canvas size and add layer styles.
8. Choose Image > Canvas Size, and do the following:
• Make sure the canvas is measured in pixels.
• Change the Width to 220 pixels and the Height to 220 pixels.
• Click the center square in the anchor area to ensure the canvas is extended evenly on all sides.
• Click OK.
9. Choose Layer > Layer Style > Drop Shadow.
10. In the Layer Style dialog box, apply the following settings:
• Opacity: 27%
• Angle: 120°
• Distance: 9 px
• Spread: 19%
• Size: 18 px
11. With the Layer Style dialog box still open, select Stroke on the left, and apply the following settings:
• Size: 1 px
• Position: Inside
• Color: Click the color swatch to open the Color Picker. Then click the blue band to sample its color, and click OK to select it.
Note
Be sure to click the word Stroke. If you click only the check box, Photoshop applies the layer style with its default settings, but you won’t see the options.
12. Click OK to apply both layer styles.
13. Choose File > Save As, choose Photoshop for the Format, and click Save. Then close the file.
14. Click the Stop Recording button at the bottom of the Actions panel.
The action you just recorded (Resizing and Styling Images) is now saved in the Buttons set in the Actions panel. Click the arrows to expand different sets of steps. You can examine each recorded step and the specific selections you made.
Batch-playing an action
Applying actions is a timesaving process for performing routine tasks on files, but you can streamline your work even further by applying actions to multiple files at once. You’ll apply the action you’ve created to the three remaining images.
1. Choose File > Open, and navigate to the Lesson13/Buttons folder. Shift-select the Gallery6.jpg, Gallery7.jpg, and Gallery8.jpg files, and click Open.
2. Choose File > Automate > Batch.
3. In the Batch dialog box, do the following:
• Confirm that Buttons is chosen in the Set menu and Resizing and Styling Images—the action you just created—is chosen in the Action menu.
• Choose Opened Files from the Source menu.
• Make sure None is chosen for the Destination.
• Click OK.
Photoshop plays the action, applying its steps to all the files that are open. You can also apply an action to an entire folder of images without opening them.
Because you saved the file and closed it while you were recording the action, Photoshop saves each of the images as a PSD file in its original folder, and then closes the file.
Placing files in Photoshop
The four additional button images are ready to be placed into the design. You probably noticed that each already has a blue band with its gallery name included in the image, so you don’t need to perform those steps. They’re ready to go.
1. Choose File > Open, navigate to the Lesson13 folder, and double-click the 13Working.psd file to open it in Photoshop.
2. In the Layers panel, select a layer group name or the logo layer. New layers are added above the selected layer; don’t add them to the Gallery 4 layer group.
3. Choose File > Place Embedded.
You’ll place these files as embedded Smart Objects. Because they’re embedded, the entire image is included in the Photoshop file.
4. In the Place Embedded dialog box, navigate to the Lesson13/Buttons folder, and double-click the Gallery5.psd file.
Photoshop places the Gallery5.psd file in the center of the 13Working.psd file. But that’s not where you want it to go. You’ll move it.
5. Drag the image into position below the Gallery One button. Use the guides to place the image. When it’s in position, press Enter or Return to commit the change.
6. Repeat steps 2–4 to place the Gallery6.psd, Gallery7.psd, and Gallery8.psd files so that they line up below the Gallery Two, Gallery Three, and Gallery Four buttons.
7. Choose File > Save to save your work so far.
Saving assets with Adobe Generator
When you’re preparing files for a website, often you need to create separate image files for buttons and other content. With Adobe Generator, you can easily generate a JPEG, PNG, or GIF image from the contents of a layer or layer group in a Photoshop file simply by renaming the layer or layer group. You can append the appropriate file extension to save an image with default settings, but you can also specify quality and size parameters for the image, all determined by how you name it.
Renaming layers and layer groups
You’ll generate assets from the 13Working.psd file for a website. Initially, you’ll save only one of the buttons, so you can preview the generated image and see if it meets your needs.
1. Choose File > Generate > Image Assets.
Once you’ve enabled Generator, it continues to be enabled for the current document until you disable it again. It’s a document-specific setting, which means it can be enabled for one PSD file you’re working in but not for another.
2. In the Layers panel, double-click the Gallery 1 layer group name, and rename it gallery1.jpg5.
The JPG extension specifies that the resulting asset should be a JPEG file. The 5 specifies a quality of 50%. (See the sidebar “Specifying quality and size parameters in generated assets” for more information.)
Note
Your layers may be in a different order, depending on how you copied the gallery folders and placed the gallery files. Any layer order is fine.
3. Rename the New Wing layer new-wing.gif.
When you’re naming layers and layer groups to generate assets, it’s a good idea to use names that don’t include spaces or special characters.
4. Rename the Logo layer logo.jpg5.
You won’t see any changes in the Photoshop file itself when you generate assets. But Adobe Generator has saved the renamed layer or layer group in the specified format to a subfolder alongside the source PSD file. In this case, the assets you’ve generated have been saved to the Lesson13/13Working-assets folder.
If you generate an asset from a layer group, the group is flattened to produce the resulting image.
Evaluating and revising generated assets
Look at the assets that were generated, to ensure they meet your needs. You can quickly evaluate them using Bridge.
1. Choose File > Browse In Bridge to open Adobe Bridge.
2. Navigate to the Lesson13/13Working-assets folder.
There are three images in the folder: gallery1.jpg, logo.jpg, and new-wing.gif. Each of the images is surrounded by a white border. That’s fine for the buttons and the logo, because they’re on a white background on the site. But the New Wing artwork overlaps another image, so the white border won’t work. Additionally, the images all appear pixelated. The file sizes are currently very small, so there’s room to increase the file resolutions. You’ll return to Photoshop and generate the assets again, using different settings.
First, you’ll increase the quality of the gallery button and logo files from 50% to 100%.
3. In Photoshop, rename the gallery1.jpg5 layer group gallery1.jpg10. Then rename the logo.jpg5 layer logo.jpg10.
Next, you’ll try a different format for the New Wing image. GIF images are saved with a white border, but PNG files have a semitransparent background and shadows.
4. Rename the new-wing.gif layer new-wing.png.
5. Return to Bridge.
The images look better. Their files sizes are much larger, but they’re still reasonable for use on the web. These settings should work.
6. Return to Photoshop, and rename each of the gallery layer groups and the layers for galleries 5-8, appending .jpg10 to each one to generate the rest of the buttons.
Generating assets is as simple as renaming layers and layer groups, but the renaming process can still be tedious if you have a large number of layers to rename. To reduce possible frustration, test your settings on a single layer or layer group first, before renaming them all.
Generating multiple image sizes and formats from the same layer
If you’re preparing images for print, you know how people will view them, and you can be sure that one size and format will work well. However, the web is a very different environment. People view websites on a variety of devices, from cellphones to desktop computers, and webmasters construct their sites in different ways. You often need to provide the same image in multiple sizes and formats, so that the appropriate one is available for any particular viewing environment.
You can use Adobe Generator to create multiple versions of a single asset by adding image filenames to the layer or layer group name. You need only separate them with a comma for Generator to recognize that you want to generate multiple assets.
For this project, you’ll generate multiple versions of the logo so that it can be used on various sites that promote the museum.
1. Expand the Layers panel to make it wider so that you can see a long layer name.
2. Rename the logo.jpg10 layer with the following name: 300% logo.jpg8, 100% logo.gif, 50% logo.png24.
Photoshop generates a logo.jpg file that is an 80% quality JPEG image scaled to 300%, a logo.gif file that is a GIF image scaled to 100%, and a logo.png file that is a 24-bit PNG image scaled to 50%.
The first image is a larger version of the logo that will work for a full-page web banner. Because the original logo layer is a Smart Object, it can be resized to 300% without losing resolution.
Previewing images in a browser
A web browser displays all image files at 72 dpi. You can compare the logo assets you generated to see how they have been scaled.
1. Open a web browser.
2. Choose File > Open File, and then navigate to the Lesson13/13Working-assets folder.
3. Double-click the logo.jpg file to open it.
The logo is three times its original size, but kept the same resolution.
4. Open the logo.png file.
It’s half the size it was in the Photoshop file.
You’ve successfully generated the images you need to build the website.
5. Return to Photoshop. Choose File > Generate > Image Assets.
The assets you generated are unaffected, but Generator is disabled.
6. Save the file, and then close it.
Designing for mobile devices with artboards
1. Open 13End.psd, and save it with a new name.
2. Choose Select > All Layers.
3. Choose Layer > New > Artboard From Layers, name it Museo Arte Computer, and click OK. This website design is for a computer.
4. With the Museo Arte Computer artboard selected in the Layers panel, choose Layer > Duplicate Artboard. Name it Museo Arte iPhone 6 Plus, and click OK.
5. With the new artboard still selected in the Layers panel, choose the Artboard tool, hidden under the Move tool, and then Shift-drag the artboard to the right to move it away from the original artboard.
6. Make sure the Artboard tool is active, and then in the options bar choose iPhone 6 Plus (1242, 2208) from the Size menu.
7. In the Layers panel, expand the Museo Arte iPhone 6 Plus artboard, and Shift-click the first and last layers in just that artboard to select all of its layers. Choose Edit > Free Transform, Shift-drag the bottom right handle to size the width of the design for that artboard, and then press Enter or Return.
Testing artboard designs with Adobe Preview CC
1. Choose Window > Device Preview. If you don’t already have Adobe Preview CC installed on your device, click the Get the App link and install it.
2. On your device, open the Adobe Preview CC app. If necessary, sign in to your Creative Cloud account in the app.
3. The Photoshop document should appear automatically in Preview CC on your device. Choose an artboard to preview by choosing it from the menu at the top of the app. If you don’t see the menu, tap the device’s screen.
4. In Photoshop, edit the layers in the artboard you’re previewing. For example, hide or move a layer. You’ll see that your changes appear quickly on the device.
Review questions
1. What is a layer group?
2. What is an action? How do you create one?
3. How can you generate assets from layers and layer groups in Photoshop?
Review answers
1. A layer group is a group of layers. Layer groups make it easier to organize and work with layers in complex images, especially when there are sets of layers that work together.
2. An action is a set of one or more commands that you record and then play back to apply to a single file or a batch of files. To create one, click the Create New Action button in the Actions panel, name the action, and click Record. Then perform the tasks you want to include in your action. When you’ve finished, click the Stop Recording button at the bottom of the Actions panel.
3. Use Adobe Generator to generate assets from layers and layer groups in Photoshop. First, enable Generator for your document by choosing File > Generate > Image Assets. Then rename layers or layer groups to append file format extensions (.jpg, .png, or .gif), as well as size and quality parameters.