Pixel perfect web layouts

By Computer Arts on June 11, 2009

Anthony Zinni shows you how to set colour profiles in 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.

Click here to download the support files (4.15MB)

Click here to download the tutorial for free