How do I put this in CSS?[Photoshop Slicing Question]

mitchbones · 01-20-2008, 02:12 PM

Hey guys, I'm working on my first website right now. I just made the navigational bar in photoshop, and I used the slice tool, but I don't know how to make it output it in CSS which I heard it could.

This is the picture in question I'm talking about http://flickr.com/photos/mitchbones/2205469126/

Thanks.

BurningApple · 01-20-2008, 06:16 PM

I'm not entirely sure what your question is, but I would code the header you made up and then code the body and put the code together in notepad or Dreamweaver.

mitchbones · 01-20-2008, 09:03 PM

I figured out how to do it. After I did an individual "slice" (box) for each button I did File > Save for Web & Devices > Save as html and images

you may have to tell it to save as "other" then change some of the settings to get it output it in css

Purpleoctopussy · 01-21-2008, 12:37 AM

Another way to build your navigation bar for css, for an example say you have three buttons make each the same size say 40px wide by 24px high. Save each image as a .png. Create rollover images as well by simply changing the color of text. Save those as .png as well.

Once in Dreamweaver go to Insert-----> Image Object------> Rollover Image, enter each image in the appropriate spot and you are finished.

mitchbones · 01-27-2008, 06:50 PM

I found a good tutorial on slicing, but I still feel very overwhelmed with this site. I guess thats to be expected with your first.

http://mitchbones.com/Home_ver3%20copy.png Is what im trying to do right now.

Aarlev · 01-29-2008, 07:12 AM

Quote:

Originally Posted by Purpleoctopussy

Another way to build your navigation bar for css, for an example say you have three buttons make each the same size say 40px wide by 24px high. Save each image as a .png. Create rollover images as well by simply changing the color of text. Save those as .png as well.

Once in Dreamweaver go to Insert-----> Image Object------> Rollover Image, enter each image in the appropriate spot and you are finished.

The problem with the .PNG format is that it doesn't work in IE6 and older browsers. Unless you use thealpha transparency fix for example. Why use PNG? Just use GIF or JPEG. I'd just cut the buttons in Photoshop (use the rulers and guides and then you can cut by using the marquee tool and letting it snap to guides and then go CTRL+Shift+C then Ctrl+N and then CTRL+V) and use a CSS list instead or do it with good old javascript as Purpleoctopussy also mentions.

http://css.maxdesign.com.au/listamatic/horizontal26.htm

UpandUp · 01-29-2008, 06:50 PM

its good that resources are here for beginners like mitchbones good luck

Purpleoctopussy · 02-08-2008, 07:50 PM

Quote:

Originally Posted by Aarlev

The problem with the .PNG format is that it doesn't work in IE6 and older browsers. Why use PNG?

Very true about the EI6 and older browsers!

But the reason I choose to use .png is because they do not get pixelated like .gif's and jpg's and the colors are better!!!

Distill · 02-08-2008, 08:14 PM

I like .png because it handles transparency well (when necessary).

mitchbones · 02-08-2008, 10:44 PM

Quote:

Originally Posted by Purpleoctopussy

Very true about the EI6 and older browsers!

But the reason I choose to use .png is because they do not get pixelated like .gif's and jpg's and the colors are better!!!

Also png are a small file size but have great quality. How big is the IE6 demographic anyways?

01-20-2008, 02:12 PM	#1
mitchbones Intern Join Date: Jan 2008 Posts: 10	How do I put this in CSS?[Photoshop Slicing Question] Hey guys, I'm working on my first website right now. I just made the navigational bar in photoshop, and I used the slice tool, but I don't know how to make it output it in CSS which I heard it could. This is the picture in question I'm talking about http://flickr.com/photos/mitchbones/2205469126/ Thanks.

02-08-2008, 08:14 PM	#9
Distill Designer/Copywriter Join Date: Jan 2008 Location: DePere, WI Posts: 93	I like .png because it handles transparency well (when necessary). __________________ Brand Consultant, Designer, Copywriter . . . All-around Good Guy my blog \| my site

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode


Welcome to our Graphic Design Forums! Your Design Forums has active graphic design forums where community members discuss graphic design related topics.

01-20-2008, 06:16 PM	#2
BurningApple Intern Join Date: Dec 2007 Posts: 21	I'm not entirely sure what your question is, but I would code the header you made up and then code the body and put the code together in notepad or Dreamweaver.

01-20-2008, 09:03 PM	#3
mitchbones Intern Join Date: Jan 2008 Posts: 10	I figured out how to do it. After I did an individual "slice" (box) for each button I did File > Save for Web & Devices > Save as html and images you may have to tell it to save as "other" then change some of the settings to get it output it in css

01-27-2008, 06:50 PM	#5
mitchbones Intern Join Date: Jan 2008 Posts: 10	I found a good tutorial on slicing, but I still feel very overwhelmed with this site. I guess thats to be expected with your first. http://mitchbones.com/Home_ver3%20copy.png Is what im trying to do right now.

01-29-2008, 06:50 PM	#7
UpandUp Designer Join Date: Dec 2007 Location: Toronto, ON, Canada Posts: 80	its good that resources are here for beginners like mitchbones good luck