Image Coding

[JustInCredible]

so me and a few buds are making a music website. i was wonderin if yall know how to image code. by that i mean to an image from photoshop and code it so that it is accesible to be used as a design for the site.

[Monroe]

Are you talking about designing a web layout in PS and then slicing and coding each section of it?

[JustInCredible]

yes

[Monroe]

Yeah I haven't done that in a while.

[JustInCredible]

lol anyone know how to do it

[Monroe]

I can do it. How big is the site?

[JustInCredible]

well just made it and theres nun on it. i want to build it myself so you got any advice?

[Monroe]

Well once you have your layout designed, you turn on Rulers if they're not on yet. Then use the guide lines to make boxes. Make a box around each image, each content area, and each navigation link. Then use the slice tool and make selections of each box. After you do this, every box that the guide lines make should be a sliced image over in your layers palette.

To save this for the web, go to File -> Save for web... Then the box should come up with the preview of your work. The only thing to worry about here is the file type you're saving it as. If it's a more simple site, not too extravagant, I would use GIF. But if you have a fancier design then save as JPEG.

Then another box will come up for you to name the file. Make sure you're saving it under HTML and Images. This way it will make an HTML document with the coding for you to customize and creates a folder with the sliced images. Then name it something like index.html.

Do you know HTML and CSS already?

[JustInCredible]

what do you mean by do i know HTML and CSS?

and that sounds complicated haha. so wait do i havta account for the content on the page when i make the boxes? do i just comply all the images together and cut it out or cut it out seperately?

[Monroe]

You have to know some HTML and CSS for this to work the way you want it to. Do you know any? Meaning, can you make a simple website with sections and borders and colors in Notepad without ever opening up PS?

It's easier if I see your layout. Then I can give you more specific advice. But yes, you do have to account for content. So you would make a slice (a box) where you want your content to be. It's sort of like creating a text area.

Once your design is finished in Photoshop (before slicing anything), I would Stamp Visible (Ctrl -> Alt -> Shift -> E) and then Cut and Paste it in a new document. Then you'll only have one layer. Then slice it up from there accordingly.