Cutting Images For Web Design

[SFC]

I am intersted in learning a new technique when developing my sites... Most of my sites are pretty simple as seen at www.fullmoonadventuresinc.com Simple header, buttons, etc.

But I would like to have the header image be part of the menu bar. Such as this site: http://www.charlotteharboroutfitters.com/index.html





My question is.. Do I cut the image in photoshop.. how do I keep everything in line? Is there a tutorial you can send me too.. It seems pretty simple...

Thanks
Mike

[evilregis]

Are you wanting to create the site using tables for layout?

[SFC]

I know how to create the table.. but how would I cut the image so that the the bottom part lines up with my menu navigation bar perfectlY? I'm not sure If I'm explaining correctly.

Mike

[SFC]

Here's another example http://www.wantsomegetsomecharters.com/

[Jazzee]

As long as you make the table cells the right sizes, the images should line up. Maybe I don't get what you are asking ?

[gorillaboy]

You probably have an extra <tr> in there.

[SFC]

I've never used the slice tool to cut up my images... I'll mess with it tonigth and ask some more specific questions...

THanks

[littleFella]

Paintshop Pro does the whole thing automatically; outputs an entire html code for the table and chopped pictures. I think Photoshop can do that too.

[Jazzee]

Yea, but the code is ugly. Much better off coding it yourself.

[evilregis]

Jazzee is right. I've never used PSP's slicer, but I've seen Photoshop's in action and it names all the images ##.[jpg|gif|png] and creates horrible code. Perhaps PSP is better, but I doubt it.

[littleFella]

I'm really at a loss here. I can't imagine a lot of beauty in a simple html table code.

just did this:

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="249" HEIGHT="200">
  
  <TR>
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="66">
  	<IMG NAME="Image120" SRC="Image12_1x1.gif" WIDTH="83" HEIGHT="66" BORDER="0">
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="66">
  	<IMG NAME="Image121" SRC="Image12_1x2.gif" WIDTH="83" HEIGHT="66" BORDER="0">
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="66">
  	<IMG NAME="Image122" SRC="Image12_1x3.gif" WIDTH="83" HEIGHT="66" BORDER="0">
  </TR>
  
  <TR>
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="67">
  	<IMG NAME="Image123" SRC="Image12_2x1.gif" WIDTH="83" HEIGHT="67" BORDER="0">
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="67">
  	<IMG NAME="Image124" SRC="Image12_2x2.gif" WIDTH="83" HEIGHT="67" BORDER="0">
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="67">
  	<IMG NAME="Image125" SRC="Image12_2x3.gif" WIDTH="83" HEIGHT="67" BORDER="0">
  </TR>
  
  <TR>
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="67">
  	<IMG NAME="Image126" SRC="Image12_3x1.gif" WIDTH="83" HEIGHT="67" BORDER="0">
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="67">
  	<IMG NAME="Image127" SRC="Image12_3x2.gif" WIDTH="83" HEIGHT="67" BORDER="0">
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="83" HEIGHT="67">
  	<IMG NAME="Image128" SRC="Image12_3x3.gif" WIDTH="83" HEIGHT="67" BORDER="0">
  </TR>
  
  </TABLE>

The code looks as pretty as can be. The 12 seconds it took to generate the code and sliced images more than makes up for some future prettyfying, no?

[Jazzee]

Originally Posted by littleFella

The code looks as pretty as can be. The 12 seconds it took to generate the code and sliced images more than makes up for some future prettyfying, no?

There is a lot of unnecessary code in there.

Also, if you plan to use xhtml, the code cannot be in ALL CAPS like that.

[littleFella]

Originally Posted by Jazzee

There is a lot of unnecessary code in there.

Sure, I would get rid of *SPAN in most cases. Height and width might have to stay anyway, especially if you want top treat the sliced mage as a background.

Originally Posted by Jazzee

Also, if you plan to use xhtml, the code cannot be in ALL CAPS like that.

In my editor I did:

CTRL+A
CTRL+F5

And voila! all text in lower case. Total 3 seconds on a bad day. Typing would take a few seconds longer.

Of course I agree that the fastest way is the way you know. I like doing my work the way I know how and preferably fast.

[SFC]

where is this automatic slicer in photoshop?

Thanks

[docquesting]

Automatic slicer yes where is it and what is it?

[Atom]

Originally Posted by SFC

where is this automatic slicer in photoshop?

Thanks

Third tool down on the right, in the tools palette.

[Atom]

Originally Posted by docquesting

Automatic slicer yes where is it

Third tool down on the right, in the tools palette.

Originally Posted by docquesting

and what is it?

help/photoshop help/index/S/scroll down to the word slice



You use slices to divide a source image into functional areas. When you save the image as a Web page, each slice is saved as an independent file that contains its own settings, color palette, links, rollover effects, and animation effects. You can use slices to achieve faster download speeds. Slices are also advantageous when working with images that contain different types of data. For example, if one area of an image needs to be optimized in GIF format to support an animation, but the rest of the image is better optimized in JPEG format, you can isolate the animation using a slice.

etc...

[docquesting]

Ok cool Ill have to play around with that.

[DaveyBoy]

i hate using PS to make my rollovers and menus and stuff, makes about 4326526 tiny superfluous gif's most of the time.

[SN3]

Originally Posted by evilregis

Jazzee is right. I've never used PSP's slicer, but I've seen Photoshop's in action and it names all the images ##.[jpg|gif|png] and creates horrible code. Perhaps PSP is better, but I doubt it.

Hand coding is the way to go. PS makes white spaces images, crazy.