Designing in 2x Photoshop Files

Topics covered in this Photoshop for Web Design tutorial:

Designing at 2x versus 1x, Turning a wireframe into a real design, Setting anti-aliasing & hyphenation, Aligning to a selection, Using clipping masks to crop an image

Exercise Preview

Exercise Overview

In the previous exercises, you learned about 1x and 2x graphics. The NYC page we’ve been working on was created at 1x. Now that you’ve seen the 1x workflow, we want you to see what it’s like to work at 2x. Most things will be the same, but a few differences will arise throughout the following exercises. After seeing both workflows, you can decide which works best for you. For an in-depth comparison of working in 1x or 2x Photoshop files, read tinyurl.com/ps-1x-2x

In this exercise, you’ll start turning a wireframe into a finished design. Wireframing is a part of the design process that focuses on content and hierarchy. Instead of thinking of fonts, colors, and visual design issues, you focus on content, structure, and relationships to help plan how you want users to process the information. To save time, we’ve already created a wireframe (at 2x size) for you to turn into a full-fledged design. Wireframing mostly involves creating placeholder rectangles and text, so there aren’t many new Photoshop features to cover. We also have some bonus wireframing exercises if you want to learn more about them.

Working in 1x or 2x Files

1. In Photoshop, close any files you have open.

2. Hit Cmd–O (Mac) or Ctrl–O (Windows).

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

4. Go to File > Save As and:
   • Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > iTastify.
   • Name the file: yourname-iTastify design.psd
   • Make sure Format (Mac) or Save as type (Windows) is set to Photoshop.
   • Click Save.

The Bootstrap template files we used to create the NYC page are supplied as both 1x and 2x, so we used the 2x version for this file. It has the same grid as the 1x file, but the file dimensions are twice the 1x file. In the provided Bootstrap 4 Grid Template for Photoshop, by Dan Rodney folder there is a 2x Retina Size folder that contains the 2x versions. Each filename also ends in @2x as an additional reminder.

The Bootstrap template for extra large screens (desktops) refers to a container of 1140px (width) x 800px (height). This refers to CSS pixels used when coding the website. The actual pixel dimensions of the Photoshop file are twice that: 2280px x 1600px.

The pixels that webpages refer to via CSS are referring to non-Retina (non hi-res) pixels. 2x is twice those amounts. The way that hi-res devices map physical hardware pixels to software CSS pixels can vary. Some devices are mapped at 1:1, 1:2, 1:3 or potentially higher. The device itself knows how many hardware pixels are used to represent software CSS pixels.

Adding the iTastify Logo

This new webpage design will be for an iPhone app called iTastify. We’ll start at the top (with the logo) and work our way down.

1. Zoom in so you can see the top of the page better.

2. Choose the Move tool .

3. At the top left of the Options bar, make sure:

   • Auto-Select is NOT checked.

   • The menu to its right is set to Layer.

4. Cmd–click (Mac) or Ctrl–click (Windows) on the Logo text at the top left of the page to select it.

5. We don’t actually need this placeholder anymore so just delete it by pressing Delete (Mac) or Backspace (Windows).

6. If the guides are not visible, show them by hitting Cmd–; (Mac) or Ctrl–; (Windows).

7. Go to File > Place Embedded.

8. Navigate into Class Files > yourname-Photoshop for Web Class > iTastify and double–click itastify-logo.ai.

9. In the dialog that opens, click OK.

10. Drag the logo to the top left of the document around where the placeholder was.

    We could resize it manually, but we have an exact size in mind, so there’s a better way. We want to show you how to enter a specific size.

11. In the Options bar at the top of the screen, make sure the Link icon has an outlined dark background (which indicates it’s checked). If it does not have a dark background, click the Link icon to turn it on.

12. Though the width and height are shown as percentages, we can actually type in pixel dimensions as well!

    Next to H type 100 px and hit Return (Mac) or Enter (Windows) twice to apply it.

13. Move the logo so it’s aligned with the left side of the first gray column. As you position it, notice there’s not much whitespace above/below the logo. Let’s move everything below the nav down a bit.

14. Hide the guides by hitting Cmd–; (Mac) or Ctrl–; (Windows).

15. In the Layers panel hide the columns layer.

16. In the Layers panel select the masthead folder.

17. Shift–click on the footer folder.

18. Make sure you’re still using the Move tool .

19. Hit the Down Arrow key twice to see it moves down, but barely.

20. We’d like to move a bit faster. Hold Shift and hit the Down Arrow key twice. That’s better.

    Holding Shift while hitting the Arrow keys moves 10 pixels at a time, while hitting just the Arrow keys alone moves 1 pixel at a time.

21. Cmd–click (Mac) or Ctrl–click (Windows) on the iTastify logo to select it.

22. Use the Arrow keys to vertically center it between the top of the page and the masthead.

Designing the Navbar Text Links

1. We want to zoom to accurate size. Now that we’re in a 2x file we zoom to accurate size differently than we did in the NYC file. Read carefully!
   • 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).

2. Scroll to the top right of the file so you can see the navbar text.
3. In the Layers panel, in the nav folder select the Testimonials layer.
4. Hold Shift and click on the About layer so all 3 nav text layers are selected.
5. Choose the Type tool .

6. In the Options bar, change the font to Arial Bold at 36 px.

   Important: Translating Type Size into CSS

   When designing in a hi-res (2x/Retina) file, everything is double the pixel size of a low-res (1x) file.

   When coding type size in CSS, browsers make sure the size appears the same on hi-res and low-res displays. CSS was first created for low-res displays, so type size always refers to a 1x type size. This ensures type appears the same size across all screen resolutions. Unfortunately this is not how Photoshop works. Photoshop is more literal, so type sizes appear differently in different resolution files. In a 2x file, Photoshop’s type size is twice what it will be in a webpage’s CSS. Therefore you must always choose even type sizes, otherwise you’ll end up with undesirable half pixel sizes. For example, in a Photoshop 2x file, 20px will be 10px in CSS.

7. Choose the Move tool .
8. With the type layers still selected in the Layers panel, in the Options bar, click the Distribute Horizontally icon to make even out the spacing between the 3 pieces.
9. Choose the Type tool .

10. Anti-aliasing determines how text looks—sharpnesss, thickness, etc. We want to use the kind that best mimics how the type looks in a web browser. In the Options bar, set Anti-aliasing to Mac LCD (Mac) or Windows LCD (Windows).

    NOTE: Photoshop can replicate Mac or Windows system anti-aliasing for fonts. Assuming text will remain text (not flattened into an image), Photoshop’s anti-aliasing is just for preview purposes. The final text rendering will be handled by the web browser (styled with CSS), or by the operating system if you’re designing an app. You can only choose the anti-aliasing for your system, so if you’re on a Mac you can choose Mac, but not Windows (and vice versa). Which should you choose?

    • For web design the best option is Mac LCD or Windows LCD because they replicate a web browser’s default text appearance.

    • For iOS apps (iPhone/iPad) the best option is Mac. If you’re designing for iOS on Windows, Mac is not available, so Crisp or Smooth are probably the closest.

    • To learn more, refer to the sidebars at the end of this exercise.

11. In the Options bar, click the text Color swatch.
12. Do not click OK until we say so! Set the color to #959595

13. We’d like to remember this color, so click Add to Swatches and:

    • Name it text gray
    • Uncheck Add to my current library.
    • Click OK once.
14. Click OK a second time.
15. Open the Swatches panel (Window > Swatches).

16. In the Swatches panel, notice at the bottom there’s a new gray swatch. Hover over it and you’ll see it’s named text gray.

Setting Anti-Aliasing & Hyphenation for the Entire Document

1. All the text layers in this file must be set to use the proper anti-aliasing. Instead of changing one layer at a time, we can change them all at once! In the Layers panel select the topmost content, the nav folder.
2. Shift–click on the bottommost content, the footer folder.
3. Make sure you’re still in the Type tool .
4. In the Options bar, set Anti-aliasing to Mac LCD (Mac) or Windows LCD (Windows).
5. While we have all the text layers still selected, go to the Paragraph panel (not the Paragraph Styles) and notice that Hyphenate is checked.
6. Web browsers do not hyphenate text, so uncheck it!
7. Choose Select > Deselect Layers.

Designing the Navbar’s Download Button

1. At the top right of the navbar, select the Download button text.
2. In the Options bar, change the font to Arial Bold at 36 px.
3. We want to refine the background of the navbar’s Download button. Let’s make it the same color as the iTastify logo, so make sure you can see them both on-screen.
4. In the Layers panel, go into the nav folder, then find the Download Button folder.
5. In the Download Button folder, double–click the layer thumbnail of Download bg.
6. With the Color Picker open, click on the iTastify logo to sample its color.
7. Make sure the color in the dialog is #e24637

8. Click Add to Swatches and:

   • Name the swatch iTastify
   • Uncheck Add to my current library.
   • Click OK.
9. Click OK again to close the Color Picker.
10. Let’s round the edges of the rectangle. Toward the bottom of the Properties panel, make sure the Link icon is depressed.

11. Hover over the Top left corner radius icon so that you see the hand pointer, as shown below:

    

12. Watching the file, drag to the right until the button’s corners reach maximum roundness.
13. The client just asked us to change the button to say Download Now. No problem. Choose the Type tool .
14. Hover over the text. If the cursor has a circle around it press Return (Mac) or Enter (Windows) to deselect the vector background.
15. Click into the Download text and change the button text to: Download Now
16. Select the Move tool .
17. Cmd–click (Mac) or Ctrl–click (Windows) the button background.
18. Show the guides by hitting Cmd–; (Mac) or Ctrl–; (Windows).
19. Hit Cmd–T (Mac) or Ctrl–T (Windows) to start a free transform.

20. The Link in the Options bar should still be turned on, which means resizing the button will change the width and height proportionally. We only want to change the width. Hold Shift–Option (Mac) or Shift–Alt (Windows) while you drag the right side’s middle handle… dragging it out to the rightmost guide.

    • We held Shift to resize unproportionally.
    • We held Option (Mac) or Alt (Windows) to resize from the center point so both sides (left/right or top/bottom) moved instead of just one side.
21. Hit Return (Mac) or Enter (Windows) to finish the transform.
22. To make sure the text is centered on the button background, in the Layers panel, select the Download Now text and Download bg.
23. In the Options bar:
    • Click the Align horizontal centers button .
    • Click the Align vertical centers button .

Aligning to a Selection

We want to make sure the nav links and Download button are all vertically aligned.

1. Hide the guides by hitting Cmd–; (Mac) or Ctrl–; (Windows).
2. Let’s vertically align the elements in the nav to its white bakground. Select the Rectangular Marquee tool .

3. Drag a selection box as shown (don’t worry about width, just make sure the height lines up with the top of the masthead background):

   

4. In the Layers panel, in the nav folder select the Testimonials layer.
5. Hold Shift and click on the Download Button folder so all 3 nav text layers and the Download Button group are selected.
6. Select the Move tool .

7. In the Options bar, click the Align vertical centers button .

   Check it out! Both the Download button and nav links are perfectly vertically aligned in the white space.

8. Get rid of the selection by choosing Select > Deselect or hitting Cmd–D (Mac) or Ctrl–D (Windows).

Adding & Cropping the Masthead Image

1. We’re done with the nav section so in the Layers panel, collapse any folders that are still expanded.
2. Choose the Move tool .
3. We can delete the App image placeholder. Cmd–click (Mac) or Ctrl–click (Windows) the App on Mobile Device text on the page and hit Delete.
4. Cmd–click (Mac) or Ctrl–click (Windows) the app screenshot background on the page and hit Delete.
5. In the Layers panel, select the masthead bg layer (in the masthead folder) so that the photo will be added above it in the masthead folder.
6. Go to File > Place Embedded.
7. Navigate into Class Files > yourname-Photoshop for Web Class > iTastify and double–click iphone-hand-mockup.psd.
8. It’s way too big for our layout. In the Options bar, set W to 68% (the Link icon should still be checked so H should change proportionally too).
9. Hit Return (Mac) or Enter (Windows) twice.
10. Notice this image has a white background. We’d prefer the background to be the same as in the wireframe. In the Layers panel, double–click the Smart Object thumbnail for the iphone-hand-mockup layer.
11. A new window should open with a large version of the image. Fortunately for us, this image has a separate background, which makes it easy for us to edit. Click the eye next to the bg color layer to hide it.
12. Go to File > Save.
13. Close the file.
14. Back in the wireframe document, notice that the image background is transparent!

15. With the Move tool selected, place the image approximately as shown:

    

    The bottom of the hand is currently hanging over the edge of the masthead background, but we don’t want that. We can clip the photo so that it’s only showing within the background dimensions.

16. In the Layers panel, find the iphone-hand-mockup layer.

17. Hold Option (Mac) or Alt (Windows) and Hover over the line between the iphone-hand-mockup and masthead bg layers until you see the icon shown below, then click:

    

18. The bottom of the hand should now be clipped off where the masthead bg ends. The layers will look like this:

    

19. With the iphone-hand-mockup layer selected, try moving the photo around to see that it is only visible in that space. Neat!
20. In the Layers panel, show the columns layer.
21. Move the photo so you leave one empty gray column on its right. Align the photo’s right edge with the right side of the gray column one over from the right.

22. Save your work by hitting Cmd–S (Mac) or Ctrl–S (Windows).

    To finish this design it would be more of this kind of work: importing graphics, adding the real text, styling text, etc. We won’t have you do all the tedious work, but in the next couple exercises we’ll explore some new features.

Optional Bonus: Adjusting the Placement of Assets

Now that we see the actual assets placed, we realize they are too far to the outside of the page. Let’s move them in a bit. We want to create something like the example below.

1. If the guides are not visible, show them by hitting Cmd–; (Mac) or Ctrl–; (Windows).

   We’ll start by moving in the elements on the left of the page. We’ll move them in so there’s one empty gray column on their left.

2. Cmd–click (Mac) or Ctrl–click (Windows) on the iTastify logo.
3. Shift–drag it one column to the right.
4. In the Layers panel, go into the masthead folder and select the Download button group.
5. Shift–click on the Tagline Lorem ipsum… text.
6. In the file hold Shift and drag them to the right by one gray column, so they align with the logo above.
7. In the Layers panel, in the nav folder select the Testimonials layer.
8. Hold Shift and click on the Download Button folder so all 3 nav text layers and the Download Button group are selected.
9. In the file, hold Shift and move them to the left by one gray column.

10. The layout should now look something like the following example. With so few elements, we think the tighter layout looks better. We don’t have to use all the columns just because they are available!

    

    Don’t worry about the tagline paragraph breaking onto three lines. Soon that will be replaced with real text and get styled.

11. Save your work by hitting Cmd–S (Mac) or Ctrl–S (Windows).