tutorialninja.com

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:


2. 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!

I'm sorry but WHA!T! .... WAY to many slices....
Its not like correct for real web design. it would be great to see this broken up as a real method of floating images and clean CSS code....

Is there anyway you can try and make a tute for that ?

heh:) read the later part - we get rid of many of the slices.
you only get about 9 images in the end:)

i personally hate the code photoshop generates, I prefer to code my own:)

I'll build a css tut at some point:)

If you could . Focus on things like, saving masks and breaking apart grounps for things like tileing images ever expanding borders, or prepareing for blocks that will be in PNG format or not.

Their is so much more indepth stuff yet to read ... hmmmm

ninja thnx a million this helped me a lot. i had to guess on a copuple things not covered but they weren't so big i had to hold my breathe

<Monkey>

Since most people who created decals are probably done go ahead and post them in here. In one week from today we will vote for the decals to get made. We can probably get 3 to 4 different designs made.