Slicing Tutorial: Photoshop

Slicing Tutorial: Photoshop
1. Here is a few simple things to watch out for when using ‘Slices’ for your web designs/layouts.

Click here to Preview the Mock Layout.
2. Organization and Naming Conventions

The above is an example of a single page layout.

Iv’e got all my layers organized into Folders for easy management. And i also have them properly named so that I can easily find them.

The naming also helps in the final stage of slicing. Any future changes of any particular layer will have to be considered in the final html page, because Photoshop/ImageReady automatically generates the proper javascript as you specify with your slices.

You can also ‘Color Code’ each ‘Layer’ for further organization, by simply right clicking (Mac: Shift Click) on a ‘Layer’ (or ‘Layer Set’) and choose a ‘Color’ from the ‘Layer Properties’ dialog. (Color coding a set automatically sets the color code to the Layers within that set.)

more details…


Leave a comment

No comments yet.

Comments RSS TrackBack Identifier URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s