CSS Slicing things up

How do you create a slice from part of a image in photoshop, when you create a roll over it is aligned perfectly in CSS ? My problem is the cropping part so that it matches up anyone have any technique they would like to share ?

Here are two ways to do it. The first shows how to slice an image, and the second shows the way I prefer to do it…

http://www.visibilityinherit.com/code/photoshop/slice-images.php
http://www.visibilityinherit.com/code/photoshop/sprite-navigation-image.php

Very nice video tutorial, Eric! :tup:

Thanks Maleika - I appreciate that. :slight_smile:

Your (Eric) approach, is to make all the states in one giant image then (in-case I have forgotten) position them in CSS ? How is this done again ?

The first video, what is it showing is great but what if your working with a PSD file and you have to make a perfect hover piece ? Those videos show what I already know, unless I’m missing something ? If someone could point it out ?

If I have a PSD file and I just crop out the section, how do I know what is the exact size?

He makes certain part of hte images show via CSS sprites, where you basically use the background-position property to show only a certain image at a time :slight_smile:

http://www.visibilityinherit.com/code/sprites.php

Then you should not of asked… “How do you create a slice from part of a image in photoshop” and “My problem is the cropping part so that it matches up anyone have any technique they would like to share” because that’s what I showed you.

You pull out your calculator and add it up.

Your tutorial showed how to do it from scratch in a new photoshop document. Not from an existing mock-up. If I follow the first tutorial, I’m taking a section of the image creating a slice for the image, but how do I know how big the slice should be ? If I follow the second tutorial I’m taking the hover element and cloning it three times then trying to get it so that it aligns which could leave spaces when put into practice.

Bummer, guess your s**t out of luck then.

Well hopefully someone else knows how.

If you are asking a lot of questions about photoshop and slicing images there I’d recommend the graphics forum :slight_smile:

Yeah, I’ll have to repost ! I’ll leave this thread open for the time being :wink: