Exporting Assets from a 2x Design

Topics covered in this Photoshop for Web Design tutorial:

How exporting assets in a 2x file differs from a 1x file, Slicing, Layer based slices, Custom sized slices

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to use Adobe Generator in a 2x file (in the previous exercise you were in a 1x file). You’ll also learn about one last technique to export graphics: Slices.

Exporting Assets from a 2x File

1. In Photoshop, close any files you have open.
2. Go to File > Open or hit Cmd–O (Mac) or Ctrl–O (Windows).

3. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > iTastify and open iTastify Ready to Slice.psd.

   NOTE: We’re only going to work in the top portion of the page, so we cropped the file down to speed things up for you.

4. In the Layers panel expand the features folder.

5. We’re in a 2x file, so all graphics exported at the current size will be @2x files. Rename the app-icon layer to app-icon@2x.png-8

   Once again, for a website this should be exported as SVG, but it’s a vector smart object so we’d have to use Illustrator to do that. Let’s see how to make a PNG (which can be useful for HTML emails, apps, etc.) using Adobe Generator.

6. To create a 1x version of this logo, we need to scale it down to half the size (50%). Add the following bold text to the app-icon@2x.png-8 layer name, so you end up with the following layer name:

   • app-icon@2x.png-8, 50% app-icon.png-8
7. To export the files, choose File > Generate > Image Assets to check it on.
8. Switch to the Desktop (hide or minimize Photoshop).
9. Navigate to Class Files > yourname-Photoshop for Web Class > iTastify.

10. A yourname-iTastify Sliced assets folder was automatically created (the folder has the same name as the Photoshop file). Go into that folder and see what files are inside.

    You should see the 2x and 1x versions of the app-icon graphic.

11. Keep this folder open, but switch back to Photoshop.

12. Let’s export the handheld iPhone photo. In the Layers panel go into the masthead folder and rename the iphone-hand-mockup layer to iphone-hand-mockup.jpg

13. Switch back to the yourname-iTastify Sliced assets folder you should still have open on the Desktop.

14. Take a quick look at iphone-hand-mockup.jpg as follows:
    • Mac: Press the Spacebar to open the file in Quick Look.
    • Windows: Double–click on the file to open it in Photoshop or your default image program.

15. In the preview, notice there is too much empty background.

    Adobe Generator is including the background, but we only want the hand and iPhone. You can sometimes use layer masking to limit what Photoshop exports, but let’s see one last technique (called slicing) for exporting graphics.

16. Close the file/preview when done.

17. Switch back to Photoshop.

18. Choose Edit > Undo Name Change so Photoshop won’t continue exporting this layer with Adobe Generator.

19. Let’s also turn off Adobe Generator, so the app-icon we’ve already exported won’t get messed up by the changes we’re about to make. Choose File > Generate > Image Assets to uncheck it.

Slicing

1. Make sure the iphone-hand-mockup layer is still selected.

2. We could manually draw a slice with the Slice tool , but let’s see if Photoshop can draw it for us. Choose Layer > New Layer Based Slice.

   The slice lines up with all the sides except for the bottom. The left may look a bit off, but if you zoom in closely you’ll see it’s correctly including the blurred edge of the hand.

   Sometimes layer based slices are perfect, but we’ll need to customize this one. Layer based slices are tied to a layer, so their size updates as the layer changes. In order to change the size we’ll need to promote it to a custom slice, which Photoshop calls a user slice.

3. Choose the Slice Select tool . You’ll probably have to click and hold on the Crop tool to find it.
4. Click on the outlined slice to select it. Notice there are no resize handles for a layer based slice.
5. In the Options bar, click the Promote button.
6. Now the slice has resize handles. Grab the bottom handle and pull it up so it snaps to the bottom of the hand. You may have to zoom in to make sure you’re accurate.
7. Each slice will be exported as a separate file, so let’s define the name. Double–click anywhere on the slice.

8. A Slice Options window should appear. Set the name to iphone-hand@2x

   NOTE: We do not add the file extension here. Photoshop will add that based on the image optimization settings we’ll set in a moment.

9. Click OK.

10. The text on the left extends into this slice area, but we don’t want it included in the exported graphic. Before we export the slice we’ll have to hide the text.

    To hide multiple layers that are next to each other, you can drag through the eye column to hide/show multiple layers. You don’t need to click each one individually!

    In the Layers panel, hide the following two layers. They are in the masthead group:

    • Never forget your restaurant…
    • Be Your Own Food Critic

11. We export slices using Save for Web. Choose File > Export > Save for Web (Legacy).

    Be patient when the window first opens. The initial optimization may take a while because we have a larger 2x file.

12. In the Optimized tab, zoom to an accurate size as follows:

    • Low-Res Screen: Zoom to 50% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows), then hitting Cmd–Minus(-) (Mac) or Ctrl–Minus(-) (Windows) two times.
    • Hi-Res Screen: Go to View > 100% or hit Cmd–1 (Mac) or Ctrl–1 (Windows).

13. Click on the iPhone to make sure that slice is selected. If it’s not on-screen, you can scroll over to it by holding the Spacebar and dragging on the image.

    The slice that you just clicked on (the iPhone slice you just created) should appear normally. The other slices will be slightly lighter/washed out (to help you focus on the selected slice).

14. At the top right of the window, go into the Preset menu and choose JPEG Medium.

15. Check on Progressive, which makes it smaller.

16. We’re done, so at the bottom right click Save.

17. By default Slices is set to All Slices. Photoshop has automatically created some slices for parts surrounding ours, but we only want ours. Change Slices to All User Slices.

18. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class.

    NOTE: We’ll save the slices into the yourname-Photoshop for Web Class folder so they don’t get mixed up with the rest of the images in the iTastify folder. We’re only doing this so they’ll be easier to find.

19. Click Save.

Slicing: Creating 1x Versions

We made the 2x file, but what about the 1x version? Let’s see how to create that.

1. Choose File > Export > Save for Web (Legacy) again.

2. On the right of the window, under Image Size set Percent to 50% and hit Tab to apply it.

3. Zoom to an accurate size as follows:
   • Low-Res Screen: Zoom to 100% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows).
   • Hi-Res Screen: Zoom to 200% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows), then hitting Cmd–Plus(+) (Mac) or Ctrl–Plus(+) (Windows) once.

4. We’ll have to name the slice differently, so double–click on the slice.

5. Remove the @2x, so the name is iphone-hand

6. Click OK.

7. Change the JPEG Quality to 60

8. We’re done, so at the bottom right click Save.

9. If you’re not still in the yourname-Photoshop for Web Class folder, navigate into Desktop > Class Files > yourname-Photoshop for Web Class.

10. Click Save.

11. Switch to the Desktop (hide or minimize Photoshop).

12. Navigate to Class Files > yourname-Photoshop for Web Class > images.

13. You should see iphone-hand.jpg and iphone-hand@2x.jpg.

14. To take a quick look at the files, do the following:
    • Mac: Hit Spacebar to open/close files in Quick Look.
    • Windows: Double–click a filename to open it in Photoshop or your default image preview program. Close them when done.
15. Switch back to Photoshop.
16. To hide the slice guides, go to View > Show > Slices

17. In the Layers panel, show the following two layers. They are in the masthead group:

    • Never forget your restaurant…
    • Be Your Own Food Critic

18. Save the Photoshop file and close it.