Slice Your web graphic properly.

Rate this tutorial:
  • Currently Note: 3/5
  • 1
  • 2
  • 3
  • 4
  • 5

Tip: Check Your works at least on three most popular browsers.

opera msie

This tutorial will teach You how to slice Your web graphic with future xHTML and CSS in mind.


For this tutorial I'll use nice, clean vertical menu which You can make yourself with this tutorial.

Nice, clean menu

First, we have to hide text layers (we leave only "Menu" text) , then we have to think how to slice this menu. Our goal is minimum graphic and small size. You can use graphic bellow for this tutorial if You don't have PSD file from previous nice, clean vertical menu tutorial.

Clean menu

First, we know, that we want to keep "Menu" text Anti Aliased. That means, that the text will be a graphic. Top rouded corner will stay too. We take first separator line too. That will be our first slice (1).
Next we want our menu to be resizable, we will use 1 px height strip - second slice (2) (CSS have repeat-y value).
We don't need a graphic for "bullets" because we can make them using CSS (border-left)
We do need separator strips, we will use 1 px x 2px rectangle, because CSS have repeat-x value - our third slice (3).
Next thing is bottom part with rounded corner - fourth slice (4).
Last thing is hoover effect. We don't need whole hoover gradient, just 1 px height strip (Again CSS will allow us to repeat-y this strip) - final fifth slice (5)

All slices

Now go to File -> Save For Web...
First, we can click right mouse button and select "Hide Auto Slices" ... this will make our image easier to "read".
Now we can name our slices and select format/compression.

First Top part (1 on last picture). Click on it Twice and name it as You want.I will name it menu_1. Next from right menu select GIF, because it seems that this format is best (less size).
Next body strip (2). Zoom on it using Zoom Tool (Z), click twice, give a name (for me menu_2), and select format. Again GIF will be the best one.
Now the separator 1 px x 2px rectangle (3). Zoom on it , click twice, give a name (menu_3) and select format. This time GIF wins too.
Zoom out if You want and click twice on bottom part (4). Give a name (menu_4), and select format... again GIF is the smallest one.
The last thing is hoover gradient strip (5). Zoom in, click twice, name it (menu_5), and select format. This time JPG seems to be a better choice (Quality around 60).
Now hit Save. Than from settings set Slices: to All user slices, and Images Only.

Now You have 5 images

1 menu_1

2 menu_2

menu_3

4 menu_4

menu_5


Whole menu graphic is now only 2kb - that's verry nice result.
On my next tutorial I'll show You how to code CSS graphic menu with rollovers

Comments

Vick

2007-10-08

Thats Too Complicated for meh lol. I dont get the cut tool...its really weird...so its whatever I guess hehe.

James

2007-10-08

Um... What was that? Incredibly difficult to understand.

magdy 2007

2007-10-15

very good

D

2007-10-18

Why not just use CSS?

crouch

2007-10-19

Very useful tutorial. Thanx.

ginux 26

2007-11-01

thanks for the "tuts", its useful...

Sajid

2007-11-21

It was a nice 1...very easy indeed but it would be a good practice if a CSS coding for this menu also written here...

Nick

2007-12-21

Nice tutorial. Your grammar and spelling could use a little work though.

amrinz

2008-05-06

very nice tutorial. can I translate it and post it in my blog: www.lombokmedia.web.id ?

reshma

2008-07-31

superb!!! u sloved my problem

Willys

2008-11-30

help me alot, Thank you.

megan

2009-01-21

That's very nice tutorial but I guess I've got one advice to improve your work. Because edges are white on the colored background. They should be transparent. And that's reason to use PNG format for the images.

I'm very sorry for my english:)

barat

2009-03-17

well ... PNG have one disadvantage - It's not IE6 compatible ... You have to use fixes etc. But if You want, use PNG's :)

Anand

2009-07-23

Thanks

Anand Singh

2009-07-23

This is very cheap

rus

2009-08-24

rus

2009-08-24

good tutorial! hello from russia ))

S??rgio

2009-11-18

Good!Very Good!

Hello from Brazil!!!

Lena

2010-05-15

I didn't understand anything

I'm from Brazil too

Alex

2010-05-16

It's a good tutorial! Thank u!

coaster

2010-08-27

much help for me,thank you!

Maggie

2010-11-05

Thank you! I love this tutorial! And your English is just fine, just as good if not better than many!

dhana

2011-10-24

i love india

senthil

2011-10-24

i love this site

h ha ha ha ha ha ah

2011-10-24

he he he he he he eh

daksh

2011-12-08

very good to learn n understand.

Terrence

2011-12-22

Wow Smart, cool, and very Talented, thanks for sharing

grr

2012-04-01

fgutt

Gerelf

2015-10-29