Someone please explain PSD to HTML to me.

15 replies
  • WEB DESIGN
  • |
So, I've been reading around on the forum, looking for ideas on how I can work from home. I've heard mention, a couple times now, of something along the lines of PSD to HTML.

As I understand it, PSD is simply a Photoshop picture. Can you tell me, that this is an actual service that people pay for? I've been building websites for years, I started back when Angelfire had free hosting, unlimited storage, and unlimited bandwidth. My problem has always been the -design part of web design.

So, if I understand this process correctly, it basically boils down to this:
-Someone sends me a picture they drew up representing the website they want built, and a check.
-I work a few hours writing code that turns the picture into a website, and deliver the HTML file back to the client.

Is this how it works? If this is actually a "thing," if this is basically how it works, and is something that people actually pay for, I have found my niche, I've found my service.

Please explain this to me, the code is the easy part for me. It's always been the design part that stumps me. If I can just code other people's designs, then I've found my dream job...
#explain #html #psd
  • Profile picture of the author john13kran
    You've been bulding site for years, and you dont exactly understand what is converting psd to html ????

    Well, yes, you take the psd from your client.
    You slice it, into html.
    You have to slice it into valid html and test to all browsers for css fix.
    The html have to look the same in all major browsers.
    Also, you have to make it "play".

    So, you have to put all the neccesary javascript, rollovers, effects etc.

    Also, keep in mind that is good to make table-less. Use only divs instead of tables.
    {{ DiscussionBoard.errors[8548252].message }}
    • Profile picture of the author 8BuckBiz
      Originally Posted by john13kran View Post

      You've been bulding site for years, and you dont exactly understand what is converting psd to html ????
      I guess I should stipulate; I've been building my own websites for years, I've never actively sought out clients to build for. In one and only one instance, I was contracted by a retail store to build a website to take orders. They gave me complete freedom in setting it up, and paid me a lump sum once I deployed the HTML files to their host of choice. So yes, I've been building HTML for over 15 years now, and don't exactly understand converting PSD to HTML.

      Well, yes, you take the psd from your client.
      You slice it, into html.
      You have to slice it into valid html and test to all browsers for css fix.
      The html have to look the same in all major browsers.
      Also, you have to make it "play".

      So, you have to put all the neccesary javascript, rollovers, effects etc.
      Take the PSD from the client, check. "Slice" it, into HTML, check.

      "Valid" HTML, test cross-broswer compatibility, especially in Cascading Style Sheets, and make it function with neat mouseover and hover effects. Well, this is standard in writing code, whether HTML, Java, C++, ForTran, Basic/QBasic, Perl/Ruby, any language. You have to test and debug your code to make sure it works, not just slap a bunch of commands and syntax together and call it "a program."

      Also, keep in mind that is good to make table-less. Use only divs instead of tables.
      This is something new to me, and I'm assuming it's in regard to mobile accessibility? Tables work fine, especially when you use calculated dimensions instead of static ones. Of course, if you tell a program to draw something that is 1280 or 1366 pixels long, it's gonna look like crap if someone tries to view it from a screen resolution of 680 pixels. Or, am I totally missing your point against tables?

      By the way, thanks for your input!
      {{ DiscussionBoard.errors[8548323].message }}
      • Profile picture of the author SunilTanna
        Yes you basically described what PSD to HTML is

        PSD is basically a picture in bitmap (made out of pixels) format.

        There is a little complication, in that it has "layers", basically it's made of several bitmaps overlaid on top of each, but that's incidental in this application And you know what HTML is. PSD File Format

        So basically you take the PSD, and cut it up into pieces to make an HTML page with the graphics in the same places as in the picture, but clickable (e.g. hyperlinks to particular pages), and usually a space for the text, etc. to be inserted.
        Signature
        ClickBank Vendor?
        - Protect Your Thank You Pages & Downloads
        - Give Your Affiliates Multiple Landing Pages (Video Demo)
        - Killer Graphics for Your Site
        SPECIAL WSO PRICES FOR WARRIORS + GET THE "CLICKBANK DISCOUNT" TOO!
        {{ DiscussionBoard.errors[8548378].message }}
      • Profile picture of the author arojilla
        Originally Posted by 8BuckBiz View Post

        This is something new to me, and I'm assuming it's in regard to mobile accessibility? Tables work fine, especially when you use calculated dimensions instead of static ones. Of course, if you tell a program to draw something that is 1280 or 1366 pixels long, it's gonna look like crap if someone tries to view it from a screen resolution of 680 pixels. Or, am I totally missing your point against tables?
        Tables must be used only for data presentation, never for design. If they work for you that's fine but if you want to find clients and compete with others they are outdated.

        And I don't see how it can mean nothing to you that there are already dozens of paid ads from experienced people offering exactly what you pretend to offer... Think about it.
        Signature

        [...]

        {{ DiscussionBoard.errors[8548439].message }}
        • Profile picture of the author 8BuckBiz
          Originally Posted by arojilla View Post

          Tables must be used only for data presentation, never for design. If they work for you that's fine but if you want to find clients and compete with others they are outdated.
          I guess I'll take some perceived insights here, and google "why are tables outdated in HTML?" since I'm sure that's the answer I would get, if I blatantly asked this question, instead of inferring it as I did above...

          And I don't see how it can mean nothing to you that there are already dozens of paid ads from experienced people offering exactly what you pretend to offer... Think about it.
          I think I understand what you are hinting at, but I'm not interested. I'm not "pretending" to offer anything. I'm not going to find someone to do this work for $10, build a page with WordPress, talking about how great I am, charge people $15 for someone else's service, and pocket the difference. I didn't do this as a mechanic, I don't do it in my retail store, and I refuse to do it online. If that's how you make a bazillion dollars, I'm really glad for you. And as a matter of fact, I haven't even eluded to going into business with this yet, or even begun to formulate a business around this service. I simply asked if I understood the concept, and if anyone had insights as to whether or not this is a highly valuable skill to market or not. If the answer to that is "Dozens of people already do it, so it's a waste of time" then I leave you with this:

          McDonald's, Burger King, Wendy's, What-A-Burger, Fudrucker's, Jack-In-The-Box, Carl's JR./Hardee's, and Sonic (just off the top of my head) are NATIONAL Hamburger chains. And my town of 30,000 people has at least one of each of these chains, minus Carl's JR./Hardee's, and 3 other locally owned hamburger joints. And Carl's JR. is coming soon...
          {{ DiscussionBoard.errors[8548531].message }}
          • Profile picture of the author arojilla
            :confused:

            I don't understand your attitude, you talk to me as if I insulted you or something. Ok, don't worry, I'll waste my time somewhere else. Have a nice day.
            Signature

            [...]

            {{ DiscussionBoard.errors[8548721].message }}
      • Profile picture of the author Istvan Horvath
        Originally Posted by 8BuckBiz View Post

        This is something new to me, and I'm assuming it's in regard to mobile accessibility? Tables work fine, especially when you use calculated dimensions instead of static ones. Of course, if you tell a program to draw something that is 1280 or 1366 pixels long, it's gonna look like crap if someone tries to view it from a screen resolution of 680 pixels. Or, am I totally missing your point against tables?
        1. If you ask questions about stuff you don't know - no need to comment and argue with all of them. Just read them and try to learn...

        2. If you know how to build websites and have never used PhotoShop (PSD is a Photoshop file, btw) - that's absolutely fine. You are not alone

        3. Not knowing that tables are for tabular data and not for design... after so many years, it's sad. No, tables do NOT work fine - only ignorant people think they do.

        4. Mobile sites especially don't use tables - try to learn about responsive web design to get an idea how the same content is presented on different devices. It has nothing to do with tables... and yes, you missed the web design basics for years.

        ===================
        Nowadays the expectation is that in a well designed site the content (e.g. text) and the HTML code is completely separated from the "design"; i.e. the CSS.

        To get an idea of this concept I stronly recommend you visit sites like CSS Zen Garden: The Beauty of CSS Design where you can admire the same content presented in many different layouts (designs) - no tables... just solid, correct html and various CSS design applied to it.
        Signature

        {{ DiscussionBoard.errors[8551530].message }}
    • Profile picture of the author arojilla
      Yes, it's strange that someone that has been building websites for years and never heard of this... :confused:

      Anyway, just google psd to html and you'll get dozens of links and paid ads offering this service. So yes, it's a thing (and has been for years). These are the companies you'll compete against so have a look at what they offer and for how much. In my humble opinion it's going to be a tough fight with so many people already in and established, so you better have a lot of money to invest (pay more than what they are actually paying for their ads) or be outstanding or go dirty cheap (Fiverr and the like) at least in the beginning. Or you could apply for a job in one of those companies.
      Signature

      [...]

      {{ DiscussionBoard.errors[8548342].message }}
      • Profile picture of the author 8BuckBiz
        Originally Posted by arojilla View Post

        Yes, it's strange that someone that has been building websites for years and never heard of this... :confused:
        It's not strange at all. Do you drive an automobile? (I'm going to assume yes, although you may ride the bus/bicycle/walk, you at least understand the premise of operating a motorized vehicle.) Do you know how the gasoline or diesel gets from the ground to the gas station? I'd bet not. Or even more so, do you understand the intricate details of the modern, 4-stroke engine, and "why and how" you drive forward when you mash the accelerator? Again, I'd wager no. Yes, it is quite strange indeed that someone has been driving cars for years and doesn't understand how oil is refined, or how a stoichiometric vapor is introduced to pressure and spark, to convert stored chemical energy into mechanical energy.... :confused:

        Anyway, just google psd to html and you'll get dozens of links and paid ads offering this service. So yes, it's a thing (and has been for years). These are the companies you'll compete against so have a look at what they offer and for how much. In my humble opinion it's going to be a tough fight with so many people already in and established, so you better have a lot of money to invest (pay more than what they are actually paying for their ads) or be outstanding or go dirty cheap (Fiverr and the like) at least in the beginning. Or you could apply for a job in one of those companies.
        Maybe my newcoming to the "internet marketing" world is clouding my judgement, but it doesn't seem logical to assume that just because there are ads for something, mean it's highly in demand, or even remotely sought after. Case in point, google AC to DC Adapter and you'll get literally millions of pages. Does that mean millions of companies are producing adapters? Not even close. Does it mean millions of people need to purchase an adapter, highly unlikely. Does it even mean that people are willing to pay online for an adapter, when they can easily purchase a replacement from the manufacturer, or a local electronics shop? Not necessarily. But thanks for the insights, you've really helped me out!

        Edit:
        Originally Posted by SunilTanna View Post

        Yes you basically described what PSD to HTML is

        PSD is basically a picture in bitmap (made out of pixels) format.

        There is a little complication, in that it has "layers", basically it's made of several bitmaps overlaid on top of each, but that's incidental in this application And you know what HTML is. PSD File Format

        So basically you take the PSD, and cut it up into pieces to make an HTML page with the graphics in the same places as in the picture, but clickable (e.g. hyperlinks to particular pages), and usually a space for the text, etc. to be inserted.
        Thank you, this is exactly the answer I was looking for. You didn't make some snide comment about the field, or about how it's hard to imagine someone who knows HTML but has never heard of building code from scratch to emulate a picture file. My sincere thanks, for not trying to assert your superiority, and just simply answering the question. You are a wonderful huiman being!
        {{ DiscussionBoard.errors[8548407].message }}
    • Profile picture of the author mmbill00
      Originally Posted by john13kran View Post

      You've been bulding site for years, and you dont exactly understand what is converting psd to html ????

      Well, yes, you take the psd from your client.
      You slice it, into html.
      You have to slice it into valid html and test to all browsers for css fix.
      The html have to look the same in all major browsers.
      Also, you have to make it "play".

      So, you have to put all the neccesary javascript, rollovers, effects etc.

      Also, keep in mind that is good to make table-less. Use only divs instead of tables.
      Thanks for your answer john13kran
      {{ DiscussionBoard.errors[8548428].message }}
  • Profile picture of the author Andrew H
    You can't handle this job. Move on....
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[8549322].message }}
    • Profile picture of the author Brandon Tanner
      I can relate to building websites for several years and not knowing anything about "PSD to HTML", per se (I've developed a lot of websites and scripts over the years using HTML/CSS/Javascript/jQuery/PHP, but I've never even touched a PSD file).

      What's much harder to believe is that you've been building websites for that long but don't know that tables should never be used for layout/positioning! It's a cross-browser nightmare (especially on mobile devices). All layout/positioning should be done via div's and CSS.

      This is an old article, but it makes a lot of good points...

      Web Page Layouts Shouldn't Use Tables - Avoid Tables for Web Page Layout

      But back to your original question... yeah, from what I understand, "PSD to HTML" basically just means slicing up Photoshop images and positioning them correctly within a HTML document. Child's play, for a seasoned web designer.
      Signature

      {{ DiscussionBoard.errors[8549609].message }}
  • Your converting a simple image over to "HTML"...

    PM me for more details
    Signature
    WebDevelopmentGroup NYC & CA- Small Business Web Development, App Development, WordPress Development, Graphic Designs, Online Marketing, Local Marketing & more!. "Call us 1.800.219.1314 or message us!". Visit us today! "Now On Live Chat Mon-Fri.". www.WebDevelopmentGroup.org
    (Whitelable our Services)
    ===================================
    ==> #1 OFFLINE MARKETING FORUM ON THE WEB! <==
    www.OFFLINEMARKETINGFORUM.com
    (Register Now)
    {{ DiscussionBoard.errors[8549538].message }}
  • Profile picture of the author Jim Thorpe
    So, I'm not the only one who was wondering about that?
    {{ DiscussionBoard.errors[8549899].message }}
  • Profile picture of the author stellajohn
    I would like to explain you clearly about the difference between PSD & HTML. PSD means a website layout that is only in Photoshop graphic form. That will mean you need to code everything yourself to turn it into a fully functioning site.
    HTML is a site with all the backend coding already done, although it doesn’t have a content management system like WordPress, Joomla, Drupal, Magento, etc.. with it. We can use the CSS, Javascript, Jquery, Ajax in HTML site creation as per our website needs and requirements. Hope this post will make you clear the difference between both.
    Signature

    Best Web Hosting Provider in India | Best Shared Web Hosting in India | Best VPS Hosting in India-http://www.ihostingreviews.in

    {{ DiscussionBoard.errors[8550783].message }}

Trending Topics