Resolution and dimensions for the Web

Resolution and dimensions for the Web

Choosing the correct fi le resolution for Web output is a no-brainer: It’s always 72 ppi.
Choosing the correct dimensions for Web output requires a little more forethought, because it depends on how your Photoshop images are ultimately going to be used in the Web page layout. To quickly create a document with the proper dimensions
and resolution for Web output, choose a preset in step 3 at right. To determine a maximum custom size for a Photoshop image to be displayed on a Web page, fi rst estimate how large your user’s browser window is likely to be, then calculate how
much of that window the image is going to fi ll.
Currently, the most common monitor size is 1024 pixels wide by 768 pixels high. Most viewers have their browser window open to a width of approximately 1000 pixels. If you subtract the space occupied by the menu bar, scroll bars, and other
controls in the browser interface, you’re left with an area of up to 800 x 600 pixels; you can use those dimensions as a guideline. If your Photoshop fi le is going to be used as a small element in a Web page layout, you can choose smaller dimensions.

Creating a new, blank document
In these instructions, you will create a new, blank document. You can drag and drop or copy and paste imagery into this document from other fi les,or draw or paint imagery by hand using brushes. Th e images can then be edited with Photoshop commands, such as eff ects and fi lters.

To create a new, blank document:
 
1. Choose File > New (Ctrl-N/Cmd-N). Th e New dialog opens.A

2. Type a name in the Name fi eld.

3. Do either of the following: Choose a preset size option from one of the three categories on the Preset menu: the Default Photoshop Size; a paper size for commercial and desktop printers; or a screen size for Web, mobile, fi lm, and video output. Next,choose a specifi c size for that preset from the
Size menu.
Choose a unit of measure from the menu next to the Width fi eld; the same unit will be chosen automatically for the Height (or to change the unit for one dimension only, hold down Shift while choosing it). Next, enter custom Width and Height values (or use the scrubby sliders).

 


4. Enter the Resolution required for your target output device — be it an imagesetter or the Web. For the Web, enter 72; for print output,see our discussion of resolution on page 20.You can use the scrubby slider here, too.

5. Choose a document Color Mode (RGB Color is recommended), then from the adjacent menu,choose 8 bit or 16 bit as the color depth. You can convert the image to a diff erent color mode later, if needed (see “Photoshop document color modes” on pages 3–4).

6. Note the Image Size, which is listed on the right side of the dialog. If you need to reduce that size, you can choose smaller dimensions,a lower resolution, or a lower bit depth.

7. For the Background of the image, choose Background Contents: White or Background
Color; or choose Transparent if you want the bottommost tier of the document to be a layer.(To choose a Background color, see Chapter 11. To learn about layers, see Chapter 8.)

8. Click the Advanced arrowhead, if necessary, to display additional options, then choose a Color Profi le. Th is list of profi les will vary depending
on the document Color Mode.
(Note: you can also assign or change the profi le later in the Edit > Assign Profi le dialog. To learn more about color profi les,) For Web or print output, leave the Pixel Aspect Ratio on the default setting of Square Pixels.For video output, choose an applicable option

9. Click OK. A new, blank document window appears onscreen. To save it, see page 24.
➤ To force the New dialog settings to match those of an existing open document, open the New dialog, then from the bottom of the Preset menu, choose the name of the document that has the desired dimensions.
➤ If the Clipboard contains graphic data (say,that you copied from Adobe Photoshop or Illustrator), the New dialog will automatically display the dimensions of that content.Choosing Clipboard from the Preset menu in the New dialog accomplishes the same thing. If you want to prevent the Clipboard dimensions from displaying, and display the last-used fi le dimensions instead, hold down Alt/Option as
you choose File > New.