13 Preparing Files for the Web

Lesson overview

In this lesson, you’ll learn how to do the following:

  • Use the Frame tool to create a placeholder for a layout.

  • Create and stylize a button for a website.

  • Use layer groups and artboards.

  • Optimize design assets for the web.

  • Record an action to automate a series of steps.

  • Play an action to affect multiple images.

  • Save entire layouts and individual assets using Export As.

  • Design for multiple screen sizes with multiple artboards.

This lesson will take about an hour to complete. To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/PhotoshopCIB2020. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

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.

Image

PROJECT: MUSEUM WEBSITE
It’s often necessary to create separate images for buttons or other objects in a website. The Export As workflow 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 an 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) to restore the default preferences. (See “Restoring Default Preferences” on page 5.)

  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.

  5. View the 13End.psd file in Bridge.

Image Note

If Bridge isn’t installed, the File > Browse in Bridge command in Photoshop will start the Creative Cloud desktop app, which will download and install Bridge. After installation completes, you can start Bridge. For more information, see page 3.

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.

  1. Double-click the 13Start.psd thumbnail to open the file in Photoshop. Click OK if you see the Missing Profile dialog box.

    Image

    Image Note

    If Photoshop displays a dialog box telling you about the difference between saving to Cloud Documents and Your Computer, click Your Computer. You can also select Don’t Show Again, but that setting will deselect after you reset Photoshop preferences.

  2. Choose File > Save As, rename the file 13Working.psd, and click Save. Click OK in the Photoshop Format Options dialog box.

Creating placeholders with the Frame tool

When you lay out objects for a print, web, or mobile device project, it’s common to design the layout before you have the final graphics for it. You could add temporary graphics that you plan to replace later with final graphics, but this requires additional file management. You can simplify the design process by creating placeholder shapes, called frames, during the early stages of design. As you refine the design and as final graphics become available, it’s easy to place graphics directly into a placeholder frame.

You create frames using the Frame tool. A frame can contain an imported graphic, Smart Object, or a pixel layer. When you create a frame, it appears in the Layers panel, because a frame is like a layer group with a vector mask.

The document 13Working.psd contains empty gray boxes. The gray boxes exist only to help you position new frames that you’ll create for this lesson. When you create your own designs, you can design using the Frame tool alone.

Image Tip

A quick way to change the unit of measure is to right-click (Windows) or Control-click (Mac) the rulers.

  1. Choose Edit > Preferences > Units & Rulers (Windows) or Photoshop > Preferences > Units & Rulers (Mac). In the Units area of the dialog box, make sure Pixels is selected in the Rulers menu, and then click OK.

    Images

You want to work in pixels because this document is intended to be a web page.

  1. Choose Window > Info to open the Info panel.

Image Tip

To customize the Info panel display of the color values under the pointer, click either of the eyedropper icons in the Info panel, and choose the display option you want.

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 values of colors under the pointer.

Image Tip

The keyboard shortcut for showing or hiding rulers is Ctrl+R (Windows) or Command+R (Mac).

  1. If the rulers aren’t visible, choose View > Rulers.

Adding a frame

Frames are easy to add, because you create them in the same way you’d create a shape such as a rectangle or circle.

Image Tip

You can create an elliptical or circular frame by selecting the Elliptical Frame icon in the options bar for the Frame tool.

  1. In the Tools panel, select the Frame tool ().

  2. Drag to create a rectangular frame over the large gray rectangle at the top of the document.

    Images

Image Tip

To create a frame of any shape, such as a star, first draw the shape using the Pen tool or a shape tool. Then, with the shape layer selected in the Layers panel, choose Layer > New > Convert to Frame.

The frame appears as a rectangle with an X inside it. The X indicates that it’s not just a vector shape, but a placeholder frame. As a placeholder, it’s ready to contain a graphic at any time.

Adding a graphic to a frame

When you finalize the images and other graphics that go into a document, you can add them to the placeholder frames you’ve created.

  1. In the Layers panel, make sure the Frame 1 layer is still selected.

  2. Choose File > Place Linked.

  3. Navigate to the Lesson13/Art folder, select the NorthShore.jpg file, and click Place.

    Image

The JPEG image you selected appears inside the selected frame, and is automatically sized to fit the frame.

You can also drag an image from Bridge or the desktop and drop it into a frame in a Photoshop document window; this embeds the image. To link an image you drag into a Photoshop document window, hold down Alt or Option as you drag.

Editing frame attributes with the Properties panel

When a frame is selected in the Layers panel, you can see and edit frame attributes in the Properties panel. You can take advantage of this to change a frame after you create it.

  1. With the Frame tool, draw a rectangle frame between the row of four gray squares and the bottom of the document. The exact size and position isn’t important, because you’re about to edit it.

    Images

    Image Tip

    As in the Control panel, you can change the unit of measure in a Properties panel field by right-clicking (Windows) or Control-clicking (Mac) the field. Or you can override a field’s unit of measure by typing the unit after the value; for example, 4 in.

  2. With the frame selected, enter the following values in the Properties panel:

    • Width: 180

    • Height: 180

    • X: 40

    • Y: 648

    Images

After you apply all of the values, the size and position of the frame should now match the first gray square.

Duplicating frames

The other three squares in the row are the same size, so instead of drawing all four squares manually, you can simply duplicate them. Duplicating a frame is similar to duplicating a layer, because frames appear in the Layers panel.

  1. In the Layers panel, drag the Frame 1 layer, and drop it on the Create a New Layer button (). The duplicate layer, Frame 1 Copy, appears in the Layers panel.

    Images
  2. With the Frame 1 Copy layer selected, in the Properties panel change the X value to 300: This makes the duplicate square frame line up with the second gray square.

  3. Repeat step 1 to create two more duplicate frames. In the Properties panel, change the X value of the third frame to 550 and the X value of the fourth frame to 800.

You’ve created a complete row of four placeholder frames.

Images

Adding images to frames

When graphics become available to use in the layout, you can quickly add them to each frame. One convenient way is by using the Properties panel.

  1. Make sure the first square frame (Frame 1) is selected.

  2. In the Properties panel, click the Inset Image menu, and choose Place from Local Disk - Linked.

    Images
  3. Navigate to the Lesson13/Art folder, select the Beach.jpg file, and click Place.

The Beach.jpg file is scaled to fit the frame, the name of the frame changes to Beach Frame, and the Properties panel displays the folder path to the linked document that’s placed in the frame.

Images
  1. Repeat step 2 for the other three square frames, placing the files NorthShore.jpg, DeYoung.jpg, and MaineOne.jpg. Remember that you can also add a linked image to a frame by Alt-dragging (Windows) or Option-dragging (Mac) an image from the desktop and dropping it into a frame.

    Images

    Image Tip

    If you want to select just the frame, click the frame edge with the Move tool. This works best when there aren’t nearby objects or guides that might become selected instead.

  2. In the Layers panel, click to select the frame layer thumbnail (the right thumbnail with the link icon) of the MainOne Frame layer. This selects just the contents of the frame. (Clicking the left thumbnail would select the frame.)

    Image Note

    If you can’t select a frame or its contents with the Move tool, make sure Auto-Select Layer is enabled in the options bar when the Move tool is selected. When Auto-Select Layer is not enabled, you must click the thumbnail of the frame or the contents in the Layers panel.

  3. Choose Edit > Free Transform, drag the image or any of its edge handles to improve the composition of the image within the frame, and press Enter or Return when you’re done.

    Images

After adding graphics to frames, it’s always a good idea to inspect all of the frames to make sure the graphics are well-composed within them. Feel free to adjust any of the other images within their frames.

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 export assets later.

The four frames you created now 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.

  1. Choose Window > Info to open the Info panel, if it isn’t already open.

    Image Tip

    If you have trouble positioning the horizontal ruler guide precisely, zoom in.

  2. Position the pointer over the horizontal ruler, and drag a ruler guide down until the Y value in the Info panel is 795 pixels.

    Images

You’ll use this guide to draw a band across the bottom of the image for the label.

  1. Zoom in on the first square image, of the man on the beach. Then select Beach Frame in the Layers panel.

You’ll use this image to design the first button.

Images
  1. Click the Create a New Layer button () at the bottom of the Layers panel. The new layer is named Layer 2 and appears directly above the Beach Frame layer. Rename it band.

  2. 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 33 pixels high. Make sure the selection lines up with the frame along the sides and bottom.

  3. 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 close the Color Picker, and then click OK to close the Fill dialog box and apply the fill.

    Images

A dark blue band appears at the bottom of the image, where you made your selection. You’ll add text to it next.

  1. Choose Select > Deselect.

  2. 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

  3. 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.

    Images

    Image Tip

    The keyboard shortcut for creating a layer group out of selected layers is Ctrl+G (Windows) or Command+G (Mac).

  4. Select the GALLERY ONE and band layers in the Layers panel, and choose Layer > Group Layers.

Photoshop creates a group named Group 1.

  1. 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.

    Images
  2. Drag the Gallery 1 layer group up so that it’s above all of the frame layers.

    Images
  3. Choose File > Save.

Duplicating button bands and text

You’ve designed the label for one button. You could go through all those steps again to create the band and text for each of the other buttons, but it will be faster to duplicate the layer group you created for the first band and text, and then edit the copies as needed.

  1. In the Layers panel, make sure the Gallery 1 layer group is selected.

  2. With the Move tool selected, make sure Auto-Select is not selected in the options bar.

    Images
  3. With the Move tool, hold down the Alt (Windows) or Option (Mac) key as you drag the Gallery One button to the right, and drop it when it snaps into alignment with the second square frame and its guides.

    Images

Holding down Alt or Option creates a copy of the selected layer group as you drag it with the Move tool. When you release the mouse button, the copy (Gallery 1 copy) should be selected in the Layers panel.

  1. Repeat step 3 by Alt-dragging (Windows) or Option-dragging (Mac) a copy of the second button over the third square frame, and then do it one more time to copy the third button over the fourth square frame, completing the row.

Now edit the text in the three copies to match their images.

  1. With the Horizontal Text tool, select the ONE text in the second button, and change ONE so that it now says GALLERY TWO.

    Images
  2. Repeat step 5 for the third and fourth buttons so that they say GALLERY THREE and GALLERY FOUR, respectively.

  3. After you finish editing the GALLERY FOUR text, commit the last text edit by selecting the Move tool.

    Images
  4. In the Layers panel, rename the layer groups to be consistent with their contents:

    • Double-click the name of the “Gallery 1 copy” layer group, and name it Gallery 2.

    • Double-click the name of the “Gallery 1 copy 2” layer group, and name it Gallery 3.

    • Double-click the name of the “Gallery 1 copy 3” layer group, and name it Gallery 4.

Image Tip

These steps are easier if you make the Layers panel taller, so that you can see multiple expanded layer groups at once.

Now move each button image into its layer group.

Image Note

When dragging layers in step 9, position the pointer over the layer name, not the thumbnails, before dragging.

  1. In the Layers panel, do the following:

    • Drag the Beach Frame layer into the Gallery 1 layer group, below the GALLERY ONE and band layers.

      Images
    • Drag the upper NorthShore Frame layer into the Gallery 2 layer group, below the GALLERY TWO and band layers.

    • Drag the DeYoung Frame layer into the Gallery 3 layer group, below the GALLERY THREE and band layers.

    • Drag the MaineOne Frame layer into the Gallery 4 layer group, below the GALLERY FOUR and band layers.

  2. Click the arrow next to each of the Gallery layer group icons to collapse them, simplifying the Layers panel display.

    Images

Now you’ll add a drop shadow and stroke to improve the appearance of the button.

  1. Select the Gallery 1 layer group in the Layers panel. Then, click the Add a Layer Style button () at the bottom of the Layers panel, and choose Drop Shadow.

  2. In the Layer Style dialog box, change the following settings in the Structure area:

    • Opacity: 27%

    • Distance: 9 px

    • Spread: 19%

    • Size: 18 px

    Image

    Image 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.

  3. With the Layer Style dialog box still open, select Stroke on the left, making sure that it’s enabled, 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.

  4. Click OK to apply both layer styles.

    Images

The drop shadow and stroke appear on the button’s layer group in the document, and also in the Layers panel.

  1. In the Layers panel, position the pointer over the fx icon next to the Gallery 1 layer group. Then hold down the Alt (Windows) or Option (Mac) key as you drag the fx icon and drop it on the Gallery 2 layer group. This is a quick way to copy layer effects to another layer or layer group.

    Images
  2. Repeat step 15 to copy the layer effects to the Gallery 3 and Gallery 4 layer groups.

  3. In the Layers panel, expand the Button Art layer group, and then click the eye icon for the Navigation layer to make it visible. Then collapse the Button Art layer group.

This layer represents the navigation among sections of the museum website.

Images
  1. 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.

Image 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 set (folder); you’ll create and use your own set for this lesson.

  3. Click the Create New Set button () at the bottom of the Actions panel. In the New Set dialog box, name the set Buttons, and click OK.

    Images

Photoshop comes with several prerecorded actions, all in the Default Actions set. You can use action sets to organize your actions so that it’s easier to find the one you want.

  1. 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.

At the bottom of the Actions panel, the Begin Recording button turns red to let you know that recording is in progress.

Image

Don’t let the fact that you’re recording rush you. Take all the time you need to perform the procedure accurately. Actions don’t record in real time; they record steps as you complete them, but they play them back as quickly as possible.

You’ll start by resizing and sharpening the image.

  1. Choose Image > Image Size, and do the following:

    • Make sure Resample is selected.

    • For Width, choose Pixels from the units menu, and then change the Width to 180.

    • Confirm that the Height has changed to 180 pixels. It should, because original proportions are preserved using the Constrain Aspect Ratio link icon to the left of the Width and Height values, which is selected by default.

    Images
  2. Click OK.

  3. Choose Filter > Sharpen > Smart Sharpen, apply the following settings, and click OK:

    • Amount: 100%

    • Radius: 1.0 px

    Image

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.

  1. Double-click the Background layer name in the Layers panel. In the New Layer dialog box, name the layer Button, and click OK.

    Images

Image Tip

If you want to convert a background layer to a regular layer and you don’t need to name it, simply click the Background layer’s lock icon in the Layers panel.

When you rename a Background layer, you’re converting it to a regular layer, so Photoshop displays the New Layer dialog box. But no layers are added; the Background layer becomes the new layer.

Image Tip

Use Canvas Size when you want to add area to or remove area from a document; use Image Size when you want to resample, change the physical dimensions, or change the resolution of a document.

Now that you’ve converted the Background layer, you can change the canvas size and add layer styles.

  1. Choose Image > Canvas Size, and do the following:

    • Make sure the unit of measure is set to 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.

    Images
  2. Choose Layer > Layer Style > Drop Shadow.

  3. In the Layer Style dialog box, apply the following settings:

    • Opacity: 27%

    • Angle: 120°

    • Distance: 9 px

    • Spread: 19%

    • Size: 18 px

    Image

    Image 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.

  4. With the Layer Style dialog box still open, select Stroke on the left, and apply the following settings:

    • Size: 1 px

    • Position: Inside

    • Color: If the color swatch doesn’t already match the other blue band you made, click the color swatch and sample the blue band as you did earlier.

  5. Click OK to apply both layer styles.

    Images
  6. Choose File > Save As, choose Photoshop for the Format, and click Save. Click OK if the Photoshop Format Options dialog box appears.

  7. Close the file. The Home screen appears, so click the Photoshop icon so that you can see the Actions panel again.

    Image
  8. Click the Stop Playing/Recording button at the bottom of the Actions panel.

    Images

Image Tip

As you review an action, you can edit the sequence by dragging steps, edit steps by double-clicking them (if applicable), or remove unneeded steps by deleting them.

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. Ctrl-select (Windows) or Command-select (Mac) 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.

    Images

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.

Image Note

If you get an error when running an action, click Stop. There may be a problem with the action that was recorded, especially if you had to correct a mistake while recording. Try troubleshooting or re-recording the action.

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. After Photoshop closes the last file, Photoshop displays the Start workspace.

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. If the file 13Working.psd is in the Recent list in the Home screen, click its name to reopen it. If not, choose File > Open to open it.

  2. In the Layers panel, select the Gallery 4 layer group name. This ensures that the files about to be placed are not added inside any layer groups, because new layers are added above the selected layer.

  3. Choose File > Place Embedded.

You’ll place these files as embedded Smart Objects. Because they’re embedded, the entire image is copied into the Photoshop file.

  1. 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, so you’ll move it.

Image Note

The bounding box of the placed image is larger than the button, because the bounding box includes the complete extent of the drop shadow.

  1. Drag the image into position below the Gallery One button. Use the guides to align the image with the one above. When it’s in position, commit the change by pressing Enter or Return.

    Images

    Image Tip

    You can also place embedded files by dragging them into the Photoshop document from the desktop or from other applications. You can drag multiple images to place at once; after you commit one image the next will be placed.

  2. Repeat steps 3–5 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.

    Images
  3. Save your work and close the file.

Designing with artboards

When you’re designing websites or user interfaces for mobile devices, you may need to create separate image files for buttons and other content. In Photoshop, you can use the Export As feature to export an entire document or individual layers to web- and mobile-friendly formats including PNG, JPEG, GIF, or SVG. In addition to being able to export multiple layers to individual files at once, Export As makes it possible to export to multiple sizes at once if you need to produce sets of images for low- and high-resolution displays.

Image Tip

If you need advanced control over how layers are exported for web and mobile user interfaces, you may be interested in Adobe Generator. When Adobe Generator is on, Photoshop automatically exports and optimizes layers based on how the layers are named.

You may need to coordinate different ideas for a single design, or design variations for different display sizes. This is easier when you use artboards, which are like multiple canvases in a single Photoshop document. You can also use Export As to export entire artboards.

Image Tip

You may notice or have been taught to use the older Save for Web command in Photoshop. Although that command is still available under File > Export > Save for Web (Legacy), Save for Web can’t export multiple layers, artboards, or scaling factors, while Export As can.

With Export As, you control what gets exported by selecting artboards or layers in the Layers panel.

Duplicating an artboard

You’ll use artboards to adapt the design of the museum website for a different screen size. Later, you’ll export both designs at once.

  1. In the Photoshop Home screen, click Open. Navigate to the Lesson13 folder, and open the file 13Museo.psd.

    Image
  2. Choose File > Save As, rename the file 13Museo_Working.psd, and click Save. Click OK in the Photoshop Format Options dialog box.

This is a web page that’s being adapted for a responsive web design so that it will work well on display sizes from desktops to smartphones.

  1. Choose Select > All Layers.

    Images
  2. Choose Layer > New > Artboard From Layers, name the new artboard Desktop, and click OK. The artboard name appears above the new artboard, and also on its new artboard group in the Layers panel.

    Image
  3. Make sure the Artboard tool () is selected; it’s grouped with the Move tool in the Tools panel. Then Alt/Option-click the Add Artboard button to the right of the artboard to duplicate both the Desktop artboard and its contents.

    Images
  4. In the Layers panel, double-click the name of the Desktop Copy duplicate artboard, and name it iPhone.

    Image Tip

    You can choose artboard presets from the Size menu in the options bar when the Artboard tool is selected. If none of the artboard presets match the display you’re designing for, such as a newer model, you can always enter your own values for Width and Height in the options bar or Properties panel.

    Image
  5. In the Properties panel, click the Set Artboard to Preset menu, and choose iPhone 8/7/6. That artboard preset applies the pixel dimensions of an iPhone 8, iPhone 7, and iPhone 6 (750 pixels wide by 1334 pixels tall). Now you can develop a design for that iPhone size, using the elements of the Desktop design. It will also be easier to maintain design consistency, since both the desktop and mobile designs are in the same document.

  6. Save your work.

Creating a design variation with artboards

You now have different artboards for desktop and smartphone display sizes; the next task is to fit the desktop-sized objects within the width of the smartphone display’s pixel dimensions.

  1. In the Layers panel, expand the iPhone artboard, and Shift-select the first and last layers in that artboard only. Don’t select the artboard name itself.

    Images
  2. Choose Edit > Free Transform.

  3. In the options bar, do the following:

    • Click the Toggle Reference Point checkbox to select it; this makes the reference point visible in the transformation bounding box, and makes it possible for you to reposition the reference point.

      Image Tip

      You can position the reference point anywhere inside or outside the transformation bounding box by dragging it

    • Select the top left square of the reference point location option. Scaling, rotating, or other transformations will now be performed from the top left corner of the bounding box (instead of the center) until the transformation is committed.

    • Make sure the Maintain Aspect Ratio button (the link icon) is selected, so that the selected layers will scale proportionally.

    • Enter 726px for W (Width).

    Images
  4. Press Enter or Return to apply the new settings. (Press Enter or Return only once, to apply the value in the options bar. If you press Enter or Return a second time it will commit the transformation.)

Those settings proportionally scale the selected layers to 726 pixels wide, from the top left corner of the selection, to better fit the artboard.

  1. Position the pointer inside the Free Transform bounding box, and then Shift-drag the selected layers down until you can see the entire Museo Arts logo at the top of the page.

    Images
  2. Press Enter or Return to exit Free Transform mode, and choose Select > Deselect Layers.

  3. In the Layers panel, select the Logo layer, and choose Edit > Free Transform.

  4. Drag the bottom right handle on the Free Transform bounding box until the transformation values next to the pointer indicate that the logo is 672 pixels wide, matching the width of the other elements. Then press Enter or Return. This width makes the logo more readable on a smartphone screen.

    Images
  5. In the Layers panel, select the Banner Art, Left Column, and Right Column layers.

  6. With the Move tool, Shift-drag the selected layers down until the top is even with the top of the blue button stack on the left.

    Images

Now you’ll take the two-column layout and make each column fill the width of the artboard. But first you’ll need to accommodate them by making the artboard taller.

Image Tip

You can also change the height of an artboard by entering a new Height in the Properties panel when an artboard is selected.

Image Note

If a document uses artboards, resize them only using the Artboard tool. The Image > Image Size and Image > Canvas Size commands work best with a Photoshop document that doesn’t use artboards.

  1. Select the iPhone artboard in the Layers panel, and then, with the Artboard tool, drag the bottom handle of the iPhone artboard until the transformation values next to the pointer indicate that it’s 2800 px tall.

    Images
  2. Select the Right Column layer group in the Layers panel, and then choose Edit > Free Transform.

  3. In the options bar, do the following:

    • Make sure the Toggle Reference Point checkbox is selected, and then select the top right square of the reference point location option.

    • Make sure the Maintain Aspect Ratio (link) button is selected, and enter 672px for Width.

    • Press Enter or Return to apply the new width.

    Images
  4. Position the pointer inside the Free Transform bounding box, and then Shift-drag the selected layer group down until the transformation values next to the pointer indicate a vertical move of 1200 px (the Y value in the options bar should say about 1680 px when the top right square of the reference point locator is selected). Press Enter or Return to commit and exit the transformation.

    Images
  5. Select the Left Column layer group in the Layers panel, and then choose Edit > Free Transform.

  6. In the options bar, do the following:

    • Make sure the Toggle Reference Point checkbox is selected, and then select the top left square of the reference point location option.

    • Make sure the Maintain Aspect Ratio (link) button is selected, and enter 672px for Width.

    • Press Enter or Return to apply the new width.

    • Then press Enter or Return to commit and exit the transformation.

    Images

Image Tip

To nudge selected layers or layer groups when the Move tool is active, press the arrow keys. When Free Transform is active, you can also nudge by clicking in a number field and pressing the up arrow or down arrow key.

Feel free to adjust the positioning and the vertical spacing among the layer groups and layers.

  1. Choose View > Fit on Screen to see both artboards at once, and then save your work.

    Images

You’ve adapted a desktop-sized multi-column web page layout for a single-column smartphone-sized layout, and both layouts exist on two artboards in one Photoshop document.

Exporting artboards with Export As

When it’s time to have a client review your designs, you can use the Export As command to easily export any artboard, layer, or layer group into its own file. You’ll export the complete desktop and smartphone artboards, and then you’ll export the layers of each artboard to their own folder.

  1. Choose File > Export > Export As. This command exports each whole artboard, so you see each artboard in the list on the left side of the Export As dialog box.

Image Note

The Export As dialog box doesn’t preview multiple Scale All options. Artboards are previewed at 1x.

You can preview the exported dimensions and file size of each item; the preview is determined by the settings on the right side of the Export As dialog box.

Images

Image Tip

Not sure about the best combination of format, compression, and visual quality? Click the 2-up tab at the top of the Export As dialog box to see two views. Select one view and change the settings, then select the other view and change its settings. Now you can compare their quality, and you can see the resulting file size below each preview.

  1. In the list on the left, click the iPhone artboard to select it, and then set the Export As options to the following:

    • In the Scale All section, make sure Size is set to 1x and the Suffix field is empty.

    • In the File Settings section, choose JPG from the Format menu, and enter 80% for Quality.

    • In the Color Space section, select Convert to sRGB.

    • Other settings can be left at defaults.

    Image Tip

    If you frequently use the Export As command with the same settings, choose File > Export > Export Preferences, and specify the settings you use the most. Now you can export to those settings in one step by choosing File > Export > Quick Export As, or choosing Quick Export As from the Layers panel menu.

  2. In the list on the left, click the Desktop artboard to select it, and apply the same settings as in step 2.

  3. Click Select All, click Export, navigate to the Lesson13 folder, double-click the Assets folder, and then click Save or Open.

    Images
  4. Switch to the desktop or Bridge, and open the Assets folder in the Lesson13 folder to see the Desktop.jpg and iPhone.jpg files representing each artboard. The filenames are based on the artboard names. You can send those files off for client review.

  5. Switch back to Photoshop.

Exporting layers as assets with Export As

If the client approves the design, you can then use Export As to create assets for each layer on each artboard, such as images or buttons. Those assets can be used by a web or application developer who executes the design in code.

  1. In the Layers panel, Shift-select all layers of the Desktop artboard.

  2. In the Layers panel menu, choose Export As. (Do not choose File > Export As.)

    Images

Notice that in the Export As dialog box, each layer is listed separately, because they will export separately.

Image Note

The Layer 0 thumbnail checkbox can’t be selected, and its thumbnail displays a checkerboard with a yellow triangle indicating that it won’t export. That’s because Layer 0 is a Solid Color layer type —it does not contain pixels or shapes to export.

  1. Click Button Art to highlight it, then hold down Shift and click Right Column to highlight the five top layers. Now when you adjust settings in the following steps, those changes will affect all highlighted layers.

  2. In the Export As dialog box, enter the same settings as you did in step 2 of the previous section (on page 346).

  3. Make sure Select All is enabled, click Export, navigate to the Assets_Desktop folder in the Lesson13 folder, and click Open or Save.

You have exported all assets for the Desktop artboard into a single folder.

  1. Repeat steps 1–5 for the iPhone artboard.

  2. Click Export, navigate to the Assets_iPhone folder in the Lesson13 folder, and click Open or Save.

    Image Tip

    If a developer asks for assets at multiple scale factors (for Retina/HiDPI display resolutions), in the Export As dialog box click the plus button in the Scale All section to add and specify additional scale factors (Size) such as 2x or 3x. Those will be exported at the same time. Be sure to specify the proper option in the Suffix field for each scale factor.

  3. In Photoshop, choose File > Browse in Bridge.

  4. Navigate to the Assets_Desktop folder in the Lesson13 folder, and inspect the images by browsing each folder with the Preview panel open. If you want, you can also inspect the assets you exported to the Assets_iPhone folder.

    Images

Each layer you exported is in its own file. You were able to quickly produce two different sets of files for two different screen sizes:

  • By using the file-based Export As command (File > Export > Export As), you created JPG images of the complete desktop and iPhone artboards.

  • By using the layer-based Export As command (on the Layers panel menu or Layer > Export As), you created assets from the individual layers of each artboard.

  1. In Photoshop, save your changes, and close the document.

Review questions

1 What is a layer group?

2 What is an action? How do you create one?

3 How can you create 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 the Export As command to create assets from artboards, layers, and layer groups in Photoshop. To create images of each whole artboard, choose the Export As command on the File menu (File > Export > Export As). To create assets from selected layers and layer groups, choose the Export As on the Layers panel menu or Layer menu (Layer > Export As).

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset