PDA

View Full Version : psd to html/css worries??..



newborn.aviator
Sep 22nd, 2009, 03:54 AM
hey everyone!

i'm new at html/css and facing a lot of problem on making a photoshop design a reality..what is the best way of incorporating the photoshop design into a html/css web page??..

help will be appreciated.

linzy
Sep 22nd, 2009, 04:16 AM
I do like Photoshop for laying out new websites. The good news is, you've already got your design done and all your site's images are ready! Now all you have to do is make it functional.

First of all, what will you be using for making the website itself? Obviously, if you're new at html/css, you won't be coding it by hand in Notepad... Do you have Dreamweaver?


Anyway, I don't know what your site looks like so I can't give you step-by-step instructions, but the most important thing to remember is that basic html (the kind you'll probably be using) makes a website out of a grid, or a lot of blocks all pieced together. Try to isolate all of your "pieces" -- for instance, if you have a button that says "Contact Me", that's one piece. If you've got a photo, that's another piece. However, a nice big block of solid color (for instance, the background, or a floating block of color that makes up the main body of your page) can be created directly with the code. Make a new image file for each piece, and take note of the dimensions. Some good filetypes for the web are .GIF, .JPG, and .PNG (try going to the file menu and select "Save For Web").

Once you have all your pieces ready, start putting them into a webpage, starting with the top. Dreamweaver is especially good for this, if you don't have much experience working with the code directly. For anything that gets more complicated (like centering, defining the font, etc) there are some good tutorials to be found online. I would suggest practicing by making very simple webpages that use only one or two elements, just to get an idea of how things work.


My last suggestion is this: don't rely too heavily on Dreamweaver or any other website building program to do everything for you. For one thing, using the buttons Dreamweaver provides to change fonts and colors leads to an unholy mess of redundant coding. For another, it'll be much easier for you to debug your websites if you know how to read the code.

Good luck!

airforce1
Sep 22nd, 2009, 09:25 AM
Simple speaking, you should firstly slice the photoshop design into pieces and then export them in html or image formats. And open the slices in DW for adding other page elements or styling the page. :)

newborn.aviator
Sep 22nd, 2009, 10:16 PM
thank you..i'll take a note of ur advices..it was really helpful..

tejas
Nov 9th, 2009, 07:03 AM
The following tutorials could be of help

http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

http://www.bolducpress.com/tutorials/from-psd-to-html/

OGGordon
Nov 9th, 2009, 08:58 AM
The following tutorials could be of help

http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

http://www.bolducpress.com/tutorials/from-psd-to-html/

great websites!

follow these sites and what airforce and linzy said and should be golden :thumbsup:

newborn.aviator
Nov 10th, 2009, 07:20 PM
well..these are nice urls..thank u!..