80

Technique

Dreamweaver and Photoshop CS4

Anthony Zinni shows you how to set colour profiles in Photoshop for sliced web layouts that hold up on any computer or browser
Slicing Photoshop files for use in Dreamweaver is the first step in turning your web design creations into functional works of code. This step may seem simple but there are a number of tips and tricks used by web experts to ensure the highest level of production values. Learning these best practices will ensure your web design projects maintain their creative edge throughout the production process. This tutorial will show you how properly setting the colour profile of your Photoshop file prior to slicing will ensure correct colour matching of images with HTML hex codes. We will also use a combination of file formats to optimise image compression and add transparency to images. We will then add the images to our HTML and CSS files using Dreamweaver, creating a near pixel-perfect version of the layout.

Pixel perfect web layouts

Start by opening the DoubleTap.psd file from this issues disc. After opening the file in Photoshop, select Edit>Color Settings and set Settings to North America Web/ Internet. This will ensure that the file is set to the correct colour space for the most consistent results across web browsers. Ideally this would be done prior to design.

01

02

Next select View>Proof Setup and select Monitor RGB from the drop-down list, making sure Proof Colors is also checked. Using Proof Setup, we are able to see the approximate differences in colour that occur between Macs and Windowsbased computers.

Anthony Zinni Chicago-based art director Anthony is a partner at the design firm AssociaDirect, which focuses on delivering intelligent design solutions to non-profit organisations and associations. In his spare time he writes about graphic design on his blog. See more at www.associa direct.com and www.positivespace blog.com

On the disc The files accompanying the tutorial can be located at DiscContents\ Resources\ working_files

Time needed 45 minutes Skills  Setting colour profiles Slicing files for  pixel-perfect results  Using transparent PNG files

Turn on the layer named slice guide (highlighted orange) in the Layers panel by clicking where the eye icon should be. Use the Slice tool from the Tools panel to draw a slice around the highlighted area surrounding the double tap logo. Zooming in to 600% in Photoshop CS4 will show the pixel grid, making it easier to make precise slices.

03

Computer Arts May 2009

www.computerarts.co.uk

ART161.tut_dw 80

10/3/09 12:40:7 pm

81

05
Continue by drawing slices around the Purchase Now button, the check marks and the header background. Turn off the iPhone Layer group and draw a slice around the background illustration from the bottom of the white header area, as pictured. Next, turn off the slice guide layer and select File>Save for Web & Devices.

04

After the Save for Web & Devices window opens, make sure that Embed Color Profile is unchecked, the Convert to sRGB box is unchecked and Preview is set to Monitor Color. Next, click on the slices you have made and set them to JPEG at a Quality of 80. After setting the slices quality, you may finally click the Save button.

When prompted, select User slices only from the drop-down list and save it to the working_files folder copied from the CD. This will create a folder named images that contains images of all the slices.

06

Getting colour correct when working on a Mac

When working on web design projects it is important to view your work in the same way as the majority of users. For Mac users, this means calibrating your monitor correctly. Prior to working on a project, you should configure your monitor to have a gamma of 2.2 and to use a D65 white point. This can be achieved in the Displays section of Systems Preferences.

08
Return to the Photoshop file and select View>Clear Slices. After clearing the slices, turn off all the layers except the iPhone layer group and the slice guide layer. Create a slice around the area for the iPhone, as pictured.

07

It is important that only the iPhone layer group is visible prior to saving, in order to save the slice as PNG with a transparent background. After doing so, repeat the process outlined in Steps 5 and 6 to save for web. However, this time select PNG 24 as the file type and make sure that the checkbox next to Transparency is checked.

10

Open the screen.css file in Dreamweaver and follow the instructions in the file to add the links to the images. After linking the image files to the CSS, open the index.html file and add the iPhone PNG image to the file by entering the code: <img src=image/iPhone.png width=282 height=516 alt=WARRIORS iPhone Game />

09

Navigate to the images folder containing all the sliced images, and rename them in a more appropriate way. Doing this now will make finding the correct file in Dreamweaver much easier later.

Save and open the index.html file in your web browser to see the result.

www.computerarts.co.uk

Computer Arts May 2009

ART161.tut_dw 81

10/3/09 12:40:9 pm