dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: HELP! What is the best method to convert a PSD to an HTML page?

  1. #1
    Join Date
    Apr 2014
    Posts
    2

    HELP! What is the best method to convert a PSD to an HTML page?

    Hi,

    I have been given an important project and need to demonstrate my skill in designing a working web page from a PSD file.

    What is the most efficient way or industry method of converting a PSD page created by someone and turn it into a functional web page (I have dreamweaver).

    Do i have to slice the buttons in photoshop first and other content which may be used?

    There are also form fields in the PSD file, that seem styled and fancy - how would i go on about creating useable forms?

    Do I need to give the whole layout any divs? Or just convert it into an HTML & Images page then add links to the buttons which will be pictures that I Have sliced up?

    I have a general idea but if someone who knows about this could assist me then that would be great.

    Thanks,

    TheJCD

  2. #2
    Join Date
    Apr 2014
    Location
    Abu Dhabi, UAE
    Posts
    47
    slicing the whole matching template what you want to make clearly make the html and css

  3. #3
    Join Date
    Mar 2012
    Posts
    1,835
    You need to clarify whether you are allowed to use the PSD merely as a guideline, or whether you are literally expected to build the page from it? Also, is the page required to be responsive? I.e.

    1. If given the choice I would use the PSD as no more that a guide, but it is pointless doing that if you are tasked to build the page from it!

    2. In either case, bodies of text should NOT be presented as images. They score badly as the web rating bots cannot read them!

    3. If you are tasked to build the page from the PSD (Ugh), then I would suggest:
    a) Identify all the elements that need to respond to user input, and crop each of them and save as JPEGs.
    b) Blank out any bodies of text. These will need to be added as machine readable text.
    c) Convert the PSD to a JPEG at a range of qualities, e.g.: 80%, 70%, 60% and 50%.
    d) Do A:B comparisons of the JPEGs to the original at 2x magnification.
    e) Choose the JPEG where the degradation of the quality is acceptable given the design criteria. (Some clients may require photo-realistic quality, others may prefer a quicker load time).
    e) Save the JPEGs in case the client is not satisfied with the quality or load time achieved. You may then easily substitute as required.

    4. Build the page using position:absolute. This will allow you to overlay text and graphics freely.

  4. #4
    Join Date
    Jul 2012
    Location
    kolkata
    Posts
    2
    hi

    if you like i could built it for you

  5. #5
    Join Date
    Mar 2014
    Location
    UAE
    Posts
    98
    their is a lot of websites which is doing this job but i do automaticly converter from this website
    http://psd2htmlconverter.com/en/

  6. #6
    Join Date
    Apr 2014
    Location
    Bangalore, India
    Posts
    101
    Hi,Even I am looking for the same,thank you for the post,I got useful information through this post.

  7. #7
    Join Date
    Apr 2014
    Location
    Indonesia
    Posts
    3
    Quote Originally Posted by Digitalgarden View Post
    their is a lot of websites which is doing this job but i do automaticly converter from this website
    http://psd2htmlconverter.com/en/
    I am looking for the same information, the information thanks
    This could be one of my references

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
  •  
HTML5 Development Center



Recent Articles