tutorialninja

getting designs ready for the web

Tuesday ~ April 04, 2007 by admin Posted in Photoshop, basics

getting designs ready for the web can be a difficult task - thats why were here to help!

there are several things to remember before we start:

text: your browser displays it as “normal” you won’t get the “sharp” affect.
images: there are still people on dial up, be gentle:P optimize your images. no one format is best, i use gif for very small images or images with few colors, png for medium size images and jpg for large images. (watch out, jpg has many different levels, don’t use the highest ones unless needed)
also it depends on your purposes, you need hi-res images for wallpaper downloads for example.

also: avoid using transparent gifs - they just don’t work!

remember: ctrl+z (undo) and ctrl++(zoom) are your friends, you’ll need to use them while slicing.

when saving gifs remember to check preserve exact colors if the option is there.

1. first, you need to slice your layout, to start click the pen tool:

now, drag around the areas that you need.
remember, you can always set something as the background, so if possible only use a segment!
for example, from:

you can simply grab a 1px wide segment and set as background!

I’ve made my first selection, encompassing my logo and text, notice that the current selection is made in red.
photoshop automatically divides everything up when you make a selection.

next divide up your entire layout, i made some notes for you to follow:) (not as complex as it first appears)

2. cleaning it all up.
you have many many images you don’t need and none of them needed! lets fix that.
bring up your pen tool again. right click the slice you want to modify and select edit slice options

check your modifying the right slice, the current slice is red.

if this is a slice you need (if its blue) give it a name, something that can help you identify it when your coding.
don’t change anything else!

repeat this for all your blue slices.

now for your gray slices bring up slice options again and change type from image to no image.

notice it should change to blue but with a different icon:

do this for all your grey slices.

mine now looks like this:

3. saving, heres when it starts;)
bring up save for web:

select a file format thats good for you, edit your color settings.

then hit save!

select images only as the html is worthless for this. photoshop automatically creates an images folder and dumps all your images into it:)

done!
your folder should look a bit like this:

best of luck!

Leave a Reply

You must be logged in to post a comment.