Slicing nav bar from illustrator file

**Red Kittie Kat** · 07-12-2012, 05:36 AM

Welcome Aboard!

In honor of your membership you are here by given a stack of waffles!

When you get settled please read this as well as these very important threads. They will give you all the info you need on how the forum runs, the rules and regs, and give you some background info on our long running, inside jokes

**KitchWitch** · 07-12-2012, 11:59 AM

Welcome.

I don't have a lot of experience with what you're trying to do, but I'm sure someone will be along shortly with ideas.

Paj · 07-13-2012, 12:10 PM

Are you trying to slice this nav bar so you can use the fonts you have used in your artwork?

You are better off using CSS for this. Try creating a single image for use as a background (it only needs to be 1px wide, and and high as your nav bar is), and then creating a class or id for your navigation items in CSS.

Then you can define the background gradient in there, something like the following:

.nav {
background: url(your image name.jpg);
}

Then, any navigation items that you assign the .nav class to will use that JPG as a background.

Theres more you could do too - you could also add left and right margins for each <li> or <a> element in your nav, so they are spaced apart properly. This depends on how you want it to look of course - without seeing the whole sit design its difficult to tell.

Cosmo · 07-13-2012, 05:26 PM

Why slice it at all? Something like that is easy enough to do with CSS.

tZ · 07-14-2012, 03:38 PM

Originally posted by Cosmo

Why slice it at all? Something like that is easy enough to do with CSS.

Agreed. The only issue would be the font. I would make that sacrifice though.

dlm56 · 07-16-2012, 08:50 PM

Thanks for the advice everyone. I feel semi-retarded at this point haha. I think what I'm going to do is use one gradient image for the background and simply use separate images with transparent backgrounds for each nav button. Once again, thanks for helping me not get caught up in trying to slice up the image for hours on end. Cheers

Cosmo · 07-17-2012, 12:20 AM

Originally posted by dlm56 View Post

Thanks for the advice everyone. I feel semi-retarded at this point haha. I think what I'm going to do is use one gradient image for the background and simply use separate images with transparent backgrounds for each nav button. Once again, thanks for helping me not get caught up in trying to slice up the image for hours on end. Cheers

You don't even need to do that. That entire nav bar can be done without a single image - only CSS.

Paj · 07-19-2012, 11:37 AM

Have a look at this

http://www.css3.me/

darkwolf29a · 07-19-2012, 02:31 PM

That is very cool Paj. Thanks for posting that link.

I agree with Cosmo....you do not need to add any overhead to this. In fact, you would do better without any slicing at all. CSS is your friend...just learn a little bit of it and you are golden.

tZ · 07-20-2012, 06:40 AM

I link this one more, though a fan of paul irish so maybe a tad bias.

css3please

Slicing nav bar from illustrator file

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment