P. 1
Web.design.for.Developers

Web.design.for.Developers

|Views: 205|Likes:
Published by Vladislav Sirenko

More info:

Published by: Vladislav Sirenko on Oct 24, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

11/14/2012

pdf

text

original

Open your mock-up file. We’re going to grab some images from this file

using the Slice and Slice Select tools, and Photoshop will do all the

graphics optimization for us, as long as we give it a little direction. We

don’t want to transform the entire mock-up into a web page automat-

ically; rather, we want a few images that we can use from our style

sheets.

Double-Checking the Mock-Up

We need to make sure that all our elements are within the gridlines.

We’ll use the gridlines as guides to create slices, and we don’t want to

accidentally slice off part of a word or image. Zoom in to about 300%,

and then hold down the Spacebar to activate the Hand tool. Click and

drag with the mouse pointer to pan around the canvas and make sure

that your logo, headings, and images are all contained within gridlines.

You don’t want the edges of your fonts or images to overlap any grid-

lines. You can see an example of what you want to avoid in Figure 10.3,

on the next page.

If you do find something that crosses a gridline, select the Move tool and

right-click (Windows) or Command-click (Mac) the section of the canvas

that overlaps the line. This brings up a context menu that shows the

layers underneath the cursor. Select the layer for the offending element,

and then use the arrow keys to nudge it in small increments until the

image is where it needs to be.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->