Go Back   iGuides Webmasters and Business Talk > Forum > iGuides Tutorials > Designing Tutorials
  Forgotten Your Password?

Welcome to the iGuides Webmasters and Business Talk

+ Reply to Thread
Page 1 of 2 1 2 Last»
Results 1 to 15 of 20
  1. #1
    tech3 is offline Newbie tech3 is on a distinguished road
    Join Date
    Feb 2008
    Posts
    3

    Default Converting PSD to HTML

    Hi, here is a tutorial for you guys to convert PSD to HTML/CSS

    In this tutorial, We will be discussing how to convert a PSD to HTML/CSS format. For the conversion, you would obviously require a PSD, already made in Photoshop, Photoshop to alter and handle the PSD, and a text-editor for HTML and CSS coding. The basic steps, for the conversion are stated below, followed by detailed steps and screenshots.

    Step 1) This step is about thinking of the design and planning the product
    Step 2) This step is about handling the PSD.
    Step 3) This step is about integrating the PSD parts into HTML/CSS code for the final result.


    Lets start with the first step

    Planning and Design

    This step is mainly about thinking about how you would like to use this PSD into your web document, and how will you go about doing the stuff. This is the planning phase which lets you decide what you would be doing with the PSD and integrate it with the web code. Basically, this step is about overall planning.

    Handling the PSD

    Open the PSD in Photoshop, ready for editing and making the changes as shown below.



    Now, we will have to slice the entire scene into different parts. These parts will then be individually saved, and used in our final product.

    For this, we use the Slice Tool, which can be selected by using the K key or by clicking in the interface as below.



    A slice is created by clicking and dragging the desired area with the slice tool. After the slice is ready, we right click on it and give it a name.



    After the slicing has been done, and your are ready with the individuals, we save this PSD and all its slices. Go to File>Save for Web , click Save, and confirm the settings as shown below and again click on Save



    Now, we are done with the slices, and we will move forward to their usage in the HTML/CSS code.

    The HTML/CSS code

    After you have saved the PSD into a folder, create two files, namely abc.html and styling.css
    You will get a folder like this..



    Now, the file abc.html is programmed with the following code in the editor.



    The below code is inserted in the styling.css file.



    Using the codes above, we get a layout in the web document as below.



    You can follow the regular coding techniques now, and the website will code on the layout that you have achieved with the PSD to web code conversion. The level of conversion depends upon the amount of slicing, and you can include icons too, by slicing them from PSD, and placing them individually into the webcode using CSS.

    By iGuides' Tutorial Writer: Jitesh Banga

    Source: iGuides.org Webmasters Talk
    Last edited by iGuides; 03-03-2008 at 05:12 PM.

  2. #2
    sizzler_chetan is offline Banned
    Recent Blog: $blogTitle
    sizzler_chetan is on a distinguished road
    Join Date
    Sep 2007
    Location
    India
    Posts
    356

    Default

    Wow something really good to learn there..
    A good tutorial, will go read it again slowly and try to make a html page from one of the psd's that i have.

  3. #3
    tech3 is offline Newbie tech3 is on a distinguished road
    Join Date
    Feb 2008
    Posts
    3

    Default

    Hey, thanks for ur response, i would be adding a part two of this tutorial, where i would detail the initial design steps, and would also include XHTML/CSS coding.. Coming soon!

  4. #4
    iGuides's Avatar
    iGuides is offline Administrator
    Recent Blog: $blogTitle
    iGuides is on a distinguished road
    Join Date
    Sep 2007
    Posts
    1,165

    Default

    That's nice tutorial, we will be anxiously waiting for the next part(s) for the same, good work!
    "Enhance Online Business with iGuides Webmasters and Business Talk"

  5. #5
    adimoga is offline Newbie adimoga is on a distinguished road
    Join Date
    Nov 2007
    Posts
    3

    Default

    nice tutorial, thanks for share it

  6. #6
    van_theman is offline Newbie van_theman is on a distinguished road
    Join Date
    Oct 2007
    Posts
    6

    Default

    good tutorial i find it thanks

  7. #7
    urlstand is offline Moderator urlstand is on a distinguished road
    Join Date
    Sep 2007
    Posts
    10

    Default

    This is a nice tutorial, I have posted in in Webmasters news and buzz / Published News / Tutorials and Tips

  8. #8
    bcdxer is offline iGuides Addict bcdxer is on a distinguished road
    Join Date
    Dec 2007
    Posts
    52

  9. #9
    linkingpro's Avatar
    linkingpro is offline Elite
    Recent Blog: $blogTitle
    linkingpro is on a distinguished road
    Join Date
    Oct 2007
    Location
    Lost.....
    Posts
    560

    Default

    Thats good. Let me start with slicing them first. I have 3 psds with me for waste. I can atleast learn from them I guess.

  10. #10
    EXleader is offline Newbie EXleader is on a distinguished road
    Join Date
    Jun 2008
    Posts
    16

    Default

    There is a part of Photoshop called Image Ready. Open the edited .psd in Image Ready and then save it into HTML (as a web page)

  11. #11
    iGuides's Avatar
    iGuides is offline Administrator
    Recent Blog: $blogTitle
    iGuides is on a distinguished road
    Join Date
    Sep 2007
    Posts
    1,165

    Default

    Quote Originally Posted by EXleader View Post
    There is a part of Photoshop called Image Ready. Open the edited .psd in Image Ready and then save it into HTML (as a web page)
    If slicing a PSD was so easy and software generated, there were no web design services

    The way you mentioned is to show the preview of web page in HTML format, it does not slice up every thing from PSD to HTML
    "Enhance Online Business with iGuides Webmasters and Business Talk"

  12. #12
    kakashoy is offline Newbie kakashoy is on a distinguished road
    Join Date
    Oct 2008
    Posts
    1

    Default

    is really useful for me, I am glad to read it here.

  13. #13
    Nikita is offline iGuides Addict Nikita is on a distinguished road
    Join Date
    Jan 2010
    Posts
    61

    Default

    I did not know about that, even i am not used to Photoshop and Image ready. I would like to try this.

  14. #14
    psdtohtmlcss is offline Newbie psdtohtmlcss is on a distinguished road
    Join Date
    Jul 2010
    Posts
    2

    Default

    Great Tutorials!
    More Resource of PSD to HTML / XHTML , PSD to CSS, PSD to Joomla, PSD to Wordpress, PSD to Drupal, PSD to Magento, Custom Web Design Services, Dynamic Web Development, PSD to Oscommerce, Social Media Marketing Services with best quality.

  15. #15
    seopiper is offline Newbie seopiper is on a distinguished road
    Join Date
    Jun 2010
    Posts
    11

    Default

    this is a good tutorial... i never thought that there's a way of converting PSD to HTML. pretty cool! thanks for the share!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts