PSD to HTML

Discussion in 'Graphic Design' started by 0amanda, Jul 1, 2008.

to remove all ads.
  1. 0amanda

    0amanda New Member

    Messages:
    1
    Hi all, I'm new to web design. I wanna do a new theme for my blog (powered by wordpress) and I've finished the design with photoshop. Now I wonder how to convert the PSD to HTML? Any help?:(
     
  2. suz

    suz New Member

    Messages:
    378
    You could try to find a free wordpress theme with similar layout to the one you designed and substitute their images with your images.
     
  3. PCC_Australia

    PCC_Australia New Member

    Messages:
    28
  4. lookgood_cool

    lookgood_cool New Member

    Messages:
    11
    after designing in photoshop you slice it in photoshop with slice tool and save it in save for web option. with slicing you could cut the images into pieces and you use dreamweavour software to convert into html coding - either use table layout or AP DIVS.
    CSS also best method make layout
     
  5. nighthawks

    nighthawks New Member

    Messages:
    21
  6. Lally Nettie

    Lally Nettie New Member

    Messages:
    5
    you got to slice your images up and then insert them into a <td> or <div> tag to make it appear in a html file, also these images have to be converted to a gif, png or jpeg.
     
  7. inline853

    inline853 New Member

    Messages:
    21
    there is no simple way to do this. you cant use Save for Web in ImageReady cause you need to code it in CSS for the WordPress theme.

    Heres a quick guide of how to do this:
    Learn CSS
    Learn how to slice PSD
    Slice up the layout.
    Learn how to create WordPress theme.
    Put slices in approriate divs
    Voila! You're done.

    All sarcasm aside there is no easy way to do this. Hire a wordpress designer to slice it up and code it for you. Be prepared to pay upwards of $1500 for a good designer
     
  8. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Like many have said, you need to cut up your PSD image/design with the slice tool. One method I have found to work very well, is using the guides to set up your slice cutting. Meaning drag out guides from the ruler on the left and top of your window and set them to the areas you will cut with the slice tool. Using the "Snap" feature will also make the cutting easier as the slices will snap to the guides. Try to cut slices in area where say two colors meet, or any other logical/visual border exists. Ideally you want to use as little images as possible, not meaning make large slices, but use HTML to for text (unless it is an elaborate font) and large flat color areas. There is no point making your site larger with images that can be created the same with code.

    W3 schools would be a great training place and there are many others, like this:

    http://www.metacafe.com/watch/564070/tutorial_photoshop_slice_tool/.


    If you are using pre-CS3 version of PS you will have Image Ready and that will help will the HTML setup. However I prefer to gather all my slices and then build it in DW (dreamweaver).
     
  9. conor

    conor New Member

    Messages:
    348
    wordpress themes are tough for beginners. they include a lot of php, i recommend just geting the standard kubrick theme and editing it to your needs. Try to not touch the php code unless you know what your doing - or else you could mess something up.
     
  10. flipboy

    flipboy New Member

    Messages:
    45
    yeah slicing the image and putting it into divs is the best way
     
  11. Mirronto

    Mirronto New Member

    Messages:
    1
    one more way - simply use one of the so-called psd-to-html or psd-to-wordpress services.

    Good luck
     
    Last edited by a moderator: Sep 6, 2009
  12. orangecopper

    orangecopper New Member

    Messages:
    327
    basically you could slice your PSD using photoshop and convert to a html pages and that could be easily done, just search for slicing tutorial in google. Once you have the HTML pages you could convert HTML to wordpress using the plugin and tutorial that could be found here on How to convert static HTML website to wordpress

    Hope this helped
    cheers
    Josh
     
  13. pdesigner2010

    pdesigner2010 New Member

    Messages:
    2
    If you want help with learning how to slice a PSD template and use CSS, I recommend going to www.templateconnection.com/free-templates and signing up (ignore the free templates, since you already have one). There are free video tutorials sent to your e-mail address showing you how to slice a PSD and use HTML and CSS.
     
  14. reverseengineer

    reverseengineer New Member

    Messages:
    219
    Check out line25.com, they have numerous PSD to HTML tuts that are EXTREMELY easy to understand.
     
  15. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    in fact contrary to what has been said here, using psd slices is poor technique and creates useless unusable css. it either places it as a table or AP elements both of which are not the preferred way of doing things.

    I know it'll hurt, but you simply must use css and steer clear of ANY program that claims to be able to do it for you.

    put it this way, you've just spent hours slicing a really complicated psd. then your boss says he wants it green instead of blue? what do you do? start again and reslice all those images with green now instead of blue.
    or edit a few lines in your css changing the appropriate elements from green to blue?
    if anyone needs any help with this I'd be more than happy to show you the CORRECT way, just a straight cut, slice, auto div creation and bam theres your webpage does not do you or your company any professional service. it shows only one thing - that you do not understand css, and you are behind the eight ball, coding in an archaic way. you'll lose the job to someone who can actually take a psd and create a webpage from it. not just slice it.
     
  16. Kat- EtherClear

    Kat- EtherClear New Member

    Messages:
    4
    If you can format the images into functioning HTML, it's simple enough to slot in the PHP code to turn it into WordPress. You just need to make the right files for page.php, single.php, index.php etc, as in the default WordPress theme's files, and copy in the basic code, such as the if and else codes to show the posts.

    It's simple enough once you've studied WordPress for a bit. I got up to making a theme from scratch but was a list of words with no CSS, but if you've got that, it's easy to slot the PHP in.

    Good luck!
     

Share This Page