Jump to content


Photoshop Layout Coding


5 replies to this topic

#1 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 20 June 2007 - 03:16 PM

Attached File  homepage.jpg   565.15K   108 downloads
Would anybody know how to code this photoshop layout or know of any tutorials that could help me code this?

#2 Tirus

    P2L Jedi

  • Members
  • PipPipPip
  • 764 posts
  • Gender:Male
  • Location:Montreal, Canada
  • Interests:Web Design, Programming, Music, Martial Arts

Posted 20 June 2007 - 10:55 PM

start with http://www.slicingguide.com (go through all the lesson)

basically, you will be saving your images individually in photoshop and then importing them 1 by 1 into (for example) Dreamweaver. Your layout could be coded with divs (one for the top banner and navigation), then 3 beside each other for your main content and 1 at the bottom (if you want some content at the bottom). Otherwise, you could build your layout with tables, have a row for the banner, another for the navigation, a third row split in 3 columns (within which you will have to insert new tables for your vertically extending content) and a fourth optional row if you plan on putting something at the bottom.

oh, and if everything i just wrote seems a little confusing, you will understand it much better (specifically the table design) after going through the Slicing Guide.

Edited by Tirus, 20 June 2007 - 10:56 PM.


#3 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 21 June 2007 - 04:07 PM

yah i followed this guide and it worked out good and gave me a much better idea of what i can do between photoshop and dreamweaver. thnx. it was much harder following and coding the photoshop files using divs i find this much easier.

Edited by Plastered, 21 June 2007 - 04:08 PM.


#4 Tirus

    P2L Jedi

  • Members
  • PipPipPip
  • 764 posts
  • Gender:Male
  • Location:Montreal, Canada
  • Interests:Web Design, Programming, Music, Martial Arts

Posted 21 June 2007 - 04:31 PM

View PostPlastered, on Jun 21 2007, 05:07 PM, said:

yah i followed this guide and it worked out good and gave me a much better idea of what i can do between photoshop and dreamweaver. thnx. it was much harder following and coding the photoshop files using divs i find this much easier.

glad to hear it. :D

people do generally (or so I believe) start coding layouts with tables as it is simpler, and they later on move to using divs and much more css as they gain experience. It is a bit harder, but you can get some great results. Either way, there are plenty of tutorials on both coding methods so I think you have your work cut out for you. Good luck! :)

Edited by Tirus, 21 June 2007 - 04:32 PM.


#5 Maximus

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 02 July 2007 - 11:01 AM

Hello

Just In Photoshop go to file >>> save for web >>> then Just click save

#6 Diaz

    Young Padawan

  • Members
  • Pip
  • 76 posts

Posted 02 July 2007 - 04:34 PM

^ I beg, please dont code your layouts using the ps html.

Its awful and you won't understand it.

In dreamweaver create the layout using tables, as most newbies learning xhtml etc find it easier to create layouts using tables due to the visual aids dreamweaver gives.

Once you've got tables mastered learn how to make pure CSS webpages, although you will find it difficult at first, compared to tables the versatility you get using pure css in awesome.

gl





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users