PSD to HTML conversion

Discussion in 'HTML & Website Design' started by vaayaaedu, Aug 15, 2012.

  1. #1
    I am using manual coding to convert psd design to HTML. Is there any better technique or method.
     
    vaayaaedu, Aug 15, 2012 IP
  2. yho_o

    yho_o Well-Known Member

    Messages:
    354
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    #2
    no there is no better technique for converting psd files

    the more pro you are the less problems you face the less time you use to finish the file converting job
     
    yho_o, Aug 15, 2012 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Yeah, don't start from some inaccessible static inflexible PSD that likely has more accessibility failings that if you crapped out the page with a WYSIWYG from a decade ago.

    Start out with your actual content, or at very least a reasonable facsimile, markup that content semantically, create your layouts (yes, plural) with CSS, and then bring in the artist to make the graphics you hang on the layout... being ready to kick them square in the junk when they try to introduce elements that are fixed width, fixed height, or cannot be done without a fixed font size.

    This entire "draw a pretty picture" first approach is full on idiotic rubbish that results in broken and ultimately useless pages, no matter what the art-CFA's tell you. How the hell said nonsensical approach to making a page even came to be accepted as the norm is mind-blowing, until you account for the stupidity of the average suit and how easily they're blown away by something flashy, no matter how little substance is under it.

    Simple fact is, people visit websites for the CONTENT, so that is where you should start -- NOT the goof-assed bandwidth wasting decorations and even dumber animooted nonsense you hang around it. This is where 90% of websites tread down the road to failure as sure, the artists often make things that are very pretty, but when the 'pretty' gets in the way of actually using the site, what in blazes good is it?

    Get your content, make it usable and easy to navigate, THEN make it pretty... Starting out with a picture of a website? That's just, well... I lack the words in polite company.
     
    deathshadow, Aug 15, 2012 IP
  4. MrTuthaus

    MrTuthaus Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I think slicing is the best option but for me I prefer using Dreamweaver for CSS and HTML and an occasional of photoshop designs for the backgrounds, banners and etc.
     
    MrTuthaus, Aug 16, 2012 IP
  5. SitesTen

    SitesTen Active Member

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    75
    #5
    Truly you cannot automate it, use slicing and then manual HTML/CSS modificatoins.
     
    SitesTen, Aug 16, 2012 IP
  6. richardm55

    richardm55 Active Member

    Messages:
    762
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    65
    #6
    I don't understand why people use Photoshop for designing their website. Is not easier to use such a program like Dreamweaver for making layout and coding and to use Photoshop for all graphics; logo, background images and other.
     
    richardm55, Aug 16, 2012 IP
  7. nandanamnidheesh

    nandanamnidheesh Active Member

    Messages:
    376
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #7
    dint understood what your mean.

    easier way is to slice and save for web and device :p but tht su...zzz soo please use only manual way. and if you want any framework for css try some grid system. (will save a lot of time)
     
    nandanamnidheesh, Aug 16, 2012 IP
    premd likes this.
  8. premd

    premd Member

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #8
    Hi,

    I dont think for automatic conversion if there is somthing like that, it will not be like manual.

    regards
    premd
     
    premd, Aug 16, 2012 IP
  9. kdb_bdk

    kdb_bdk Active Member

    Messages:
    163
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    55
    #9
    I think there is no other solution
     
    kdb_bdk, Aug 16, 2012 IP
  10. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #10
    There is lot of online software accessible on internet but do not use them if, you will need your website as per the SEO friendly. The manual is great technique nowadays to develop a website design.
     
    creativewebmaster, Aug 17, 2012 IP
  11. MrTuthaus

    MrTuthaus Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Truly,

    And develop your own website. You don't need to be good in programming to create a website you just need to enjoy what your doing.
     
    Last edited: Aug 17, 2012
    MrTuthaus, Aug 17, 2012 IP
  12. ayushsocial

    ayushsocial Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #12
    I think you're a newbie...
    I'm a web designer and what I do is described below:

    1. First I create PSD file and slice it.
    2. To save my time I use 960 grid system layout, which is one of the best layout used by 90% of web designer to save time. (basically it is used for layout, you don't have to create layout and saves a lot of time)
    3. After that I will style it.

    Thats all 3 simple steps.
     
    ayushsocial, Aug 17, 2012 IP
  13. dareknyght

    dareknyght Banned

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #13
    You are doing nothing wrong! Converting it manually is the best option. If you have good XHTML/CSS skills then it's well and good. If not you will gain more practice and skills :)
    I myself convert it manually, all you need is notepad++ just for the ease in coding :)
     
    dareknyght, Aug 17, 2012 IP
  14. LozarD

    LozarD Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    You can use css framework instead of code your css from scratch. If you want to opt for software, I would recommend Artisteer. You have to pay for it though.
     
    LozarD, Aug 17, 2012 IP
  15. vaayaaedu

    vaayaaedu Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    i have used 960gs but have looked at artisteer, will check it out.
     
    vaayaaedu, Aug 17, 2012 IP
  16. richardm55

    richardm55 Active Member

    Messages:
    762
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    65
    #16
    I can admit that I am newbie in web designing. I have created my first website with help of weebly editor. Now I am in process building another website just from scratch with Dreamweaver.
    What I said about website design and development because I did not realize design and coding are made by completely people and teams. So I can understand why design is done with Photoshop and then project is sliced for coding it.
    By the way, what is 960 grid system layout and how is it realized?
     
    richardm55, Aug 17, 2012 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #17
    Funny, your response makes me think you're either a nube, or just don't care about your clients when it comes to accessibility, usability, or sustainability. I'm sure your work is very pretty and flashy, I'm also willing to bet that to visitors like myself, it's ultimately a useless inaccessible train wreck filled with nonsense that has no place on a website in the first place... like fixed widths, fixed metric fonts, fixed height elements, and page load sizes that take 10 to 30 seconds due to having too many separate files.

    ... which is all I've EVER seen from the "start out with a goofy PSD and slice it up" approach -- especially now that we should be doing things like responsive layout for mobile, massive screens, etc, etc... Not everyone is going to have 30ms ping time, 1 gigabit fiber, and the magical combination of screen size and font metric your PSD was designed for.

    Of course, you go ahead and use that idiotic bloated steaming pile of shit grid framework nonsense, which effectively pisses all over accessibility since it defeats every improvement of site building methodologies of the past decade and a half... Since pretty much by definition it uses presentational classes to the point you might as well go back to HTML 3.2 for all the good it does you.

    Between the artsy-fartsy PSD's "WCAG, what's that?" and Grid 960's "Separation of presentation from content and leveraging caching models, what's that?" you've in two sentences described everything WRONG with web design today.

    Which is why I say kick the PSD jockey right square in the junk, and put them at the back of the line -- NOT the front!
     
    deathshadow, Aug 17, 2012 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Which usually means, ESPECIALLY if you use the WYSIWYG or waste time dicking with it's preview pane, means you're going to have just as much of a steaming pile as you did with weebly.

    No offense... But such 'tools' are sleazy half-assed shortcuts that pretty much boil down to nube predation at best, a complete failure to put in what's really needed to have a good website at worst.
     
    deathshadow, Aug 17, 2012 IP