22 {{ upvoteCount | shortNum }}
22 {{ upvoteCount | shortNum }}

PSD - HTML

by Markod123
19 replies
Does anybody create a website in photoshop and then slice it and convert to HTML?
is there a reason why this may not be a good idea in terms of SEO?

Any help/advice/guidance would be much appreciated.


many thanks in advance

Marko
#html #psd
  • Profile picture of the author CyberSorcerer
    Photoshop to HTML, and even building a website in general, has nothing to do with SEO.

    SEO has to do with your content, keywords, and how to structure your content on your site.

    When you start putting content on your site, the HTML and general layout of the site is already set your just putting in content. It's like when you download, or purchase, a ready made site. All the layout and HTML is already done your just filling in all the major spots with content.
    {{ DiscussionBoard.errors[3964698].message }}
    • Profile picture of the author jeskola
      Originally Posted by CyberSorcerer View Post

      Photoshop to HTML, and even building a website in general, has nothing to do with SEO.
      WRONG.

      Actually it's a key part in proper SEO. Proper use of H tags is one of the many ways Google looks at how to rank your page. It's how the spiders crawl the content.
      Signature

      Don't look to MAKE money - look to HELP people and you will make all the money you can ever want.

      {{ DiscussionBoard.errors[4257154].message }}
      • Profile picture of the author Richest
        I have one website made by photoshop, but the problem is, it always create gaps between slices every time I updated some page. So I have to repair it again and again, i.e. re-slice and save as HTML, then re-upload to hosting server. What an extra job

        So I think PSD - HTML kind of website is good if it is just static web, but if it's dynamic, then use wordpress, joomla, drupal or other cms.

        Just my 2 cents
        Signature
        Jasa Paspor Jakarta
        {{ DiscussionBoard.errors[4257845].message }}
  • Profile picture of the author Tracy411
    OK guys, I have a question. What do you mean when you say 'slice it and convert to html'? What is 'slice'? And how would one convert to html from psd? I realize these maybe newbie graphics questions, but I don't have experience using Photoshop myself. I use other programs. If the process is too lengthy to write out, I would appreciate a web resource I could check it out on. Thanks in advance.
    {{ DiscussionBoard.errors[3964829].message }}
  • Profile picture of the author PPC-Coach
    Here you go, couple youtube tutorials at the top:

    photoshop slicing websites - Google Search
    Signature
    {{ DiscussionBoard.errors[3964833].message }}
  • Profile picture of the author jrodriguez315
    Using photoshop, assuming you know what you are doing, will certainly be helpful to making a "pretty" site but you will still need TEXTUAL CONTENT to feed the search engines and get ranking.
    Signature

    I'm saving 50% to 90% off all marketing tools & software tools at The Daily Gangster!

    Real people. Trusted Warriors, Making real money online, now reveal their Best Online Business Blueprint! Click here to learn more . . .

    {{ DiscussionBoard.errors[3964884].message }}
  • Profile picture of the author WillR
    Most graphical based websites you see nowadays would have started out as nothing more than an image in Photoshop. It then all gets sliced up and converted to HTML. As someone else rightly pointed out, the slicing has nothing to do with SEO. The SEO comes into play when you do the actual coding. You want to include things such as meta tags, h1,h2,h3 heading tags, alt image tags, etc, etc.

    As someone else rightly pointed out, the best thing you can do for SEO purposes when slicing up your Photoshop file is to keep as little text as graphics as possible. Search engines cannot read the text in images so you want to make sure as much of the text on your webpage is readable by the search engines.
    Signature

    .


    .

    {{ DiscussionBoard.errors[3965799].message }}
  • Profile picture of the author cjreynolds
    Originally Posted by Markod123 View Post

    Does anybody create a website in photoshop and then slice it and convert to HTML?
    is there a reason why this may not be a good idea in terms of SEO?

    Any help/advice/guidance would be much appreciated.


    many thanks in advance

    Marko
    ARGHHHHHHH!!!!!!!! While I agree with the other warriors on this thread that SEO shouldn't be affected by using image slicing (if done right), it's a TERRIBLE way to build a website!

    I used to be a web programmer, and anytime I ran into a website done with image slicing, blood issued from my eyes!

    These things are a nightmare to work with. Basically, if you want to make even the most minor change in the graphic layout, you have to go back into PS and re-slice the whole image and rebuild the site. It builds dozens of little tables with little bits of the image in them. If you make any changes to the content of those tables, you risk throwing the whole layout off-kilter.

    I know techniques like this are temptingly easy, but there are far better methods to design a website that aren't that hard.

    I actually do use PS to lay out my designs, but then I create JPGs or GIFs from the elements of the design (buttons, banners, background, etc.) and then build the webpage with them - I use a plain text editor for that, but Dreamweaver is an excellent tool if you're not HTML-savy.

    But whatever you do, don't image slice - stay away from the dark side!

    Hope that helps,

    joe
    Signature

    I just added this sig so I can refer to it in my posts...

    {{ DiscussionBoard.errors[3966206].message }}
    • Profile picture of the author WillR
      Originally Posted by cjreynolds View Post

      ARGHHHHHHH!!!!!!!! While I agree with the other warriors on this thread that SEO shouldn't be affected by using image slicing (if done right), it's a TERRIBLE way to build a website!

      I used to be a web programmer, and anytime I ran into a website done with image slicing, blood issued from my eyes!

      These things are a nightmare to work with. Basically, if you want to make even the most minor change in the graphic layout, you have to go back into PS and re-slice the whole image and rebuild the site. It builds dozens of little tables with little bits of the image in them. If you make any changes to the content of those tables, you risk throwing the whole layout off-kilter.

      I know techniques like this are temptingly easy, but there are far better methods to design a website that aren't that hard.

      I actually do use PS to lay out my designs, but then I create JPGs or GIFs from the elements of the design (buttons, banners, background, etc.) and then build the webpage with them - I use a plain text editor for that, but Dreamweaver is an excellent tool if you're not HTML-savy.

      But whatever you do, don't image slice - stay away from the dark side!

      Hope that helps,

      joe
      Joe,

      I think I get a little confused between the two. Yes, I don't mean cutting up the whole photoshop file and making the webpage out of it - that's the sort of thing a lot of mini-site designers will do. But yes, you use photoshop to create the design and from there you turn that into an html/css file (the proper way) as Joe has suggested.

      The great thing is nowadays there are a lot of websites that will do this for you. You provide them with your PSD and they will turn it into a fully compliant and fully validated html/css or xhtml/css webpage.

      The site I have been using for years is xhtmlteam.com. Great service offered by those guys.
      Signature

      .


      .

      {{ DiscussionBoard.errors[3966229].message }}
      • Profile picture of the author cjreynolds
        Originally Posted by WillR View Post

        Joe,

        I think I get a little confused between the two. Yes, I don't mean cutting up the whole photoshop file and making the webpage out of it - that's the sort of thing a lot of mini-site designers will do. But yes, you use photoshop to create the design and from there you turn that into an html/css file (the proper way) as Joe has suggested.

        The great thing is nowadays there are a lot of websites that will do this for you. You provide them with your PSD and they will turn it into a fully compliant and fully validated html/css or xhtml/css webpage.

        The site I have been using for years is xhtmlteam.com. Great service offered by those guys.
        I'm on board with that.

        CSS - Good!
        Signature

        I just added this sig so I can refer to it in my posts...

        {{ DiscussionBoard.errors[3966277].message }}
        • Profile picture of the author Bradley J Anderson
          A lot of these PSD-based sites nowadays are just one giant image map with a bunch of hotlinks anchored to the various parts of the pic, and image maps went out of style quite a few years ago now.

          People that use them tend to be those who are more concerned with putting up something quick and 'pretty', rather than taking the time to do the job properly.

          From a website design perspective, it makes me want to cringe, too. I agree with the last poster: CSS = good.

          From an SEO standpoint, if your 'website' is nothing but a giant picture with links on it (and I've seen quite a few of these), there's not a whole lot for the search engines to read, so that will definitely hurt your ranking.

          As an example, this is a PSD-based site with a bunch of hot-links that is NOT going to do well SEO-wise (and for a number of other reasons, as well):

          Signature
          BRADLEY ANDERSON - Tips, reviews & resources to make your online business more profitable.
          {{ DiscussionBoard.errors[3966436].message }}
    • Profile picture of the author Your Brand Ebooks
      Originally Posted by cjreynolds View Post

      These things are a nightmare to work with. Basically, if you want to make even the most minor change in the graphic layout, you have to go back into PS and re-slice the whole image and rebuild the site.
      Joe,

      That's not the case when an experienced designer slices and builds a site. He/she will, for example, plan how they will slice the header area. One entire row across might include the menu buttons, then later if graphic changes are needed, the designer can go back to the PSD file and re-do those buttons then, using the previously setup snap-to guides, easily re-save only that section of the site. The html doesn't need to change. And the rest of the site's images/slices don't need to be touched. And a properly sliced design might also include a sliced row across the top (with subslices) to include the helpdesk link, login box and so forth.

      Originally Posted by cjreynolds View Post

      It builds dozens of little tables with little bits of the image in them. If you make any changes to the content of those tables, you risk throwing the whole layout off-kilter.
      When doing web editing in WYSWYG mode, moving a photo or button just slightly to the left or right, often results in the editor software building some crazy table with for example 23 columns most of which contain invisible image spacer graphics. Lots of people who edited their sites in FrontPage wound up with an html mess of nasty huge complex tables.

      .. > It builds dozens of little tables
      .. > with little bits of the image in them

      If that's happening with designers who are slicing from PSD then they're not very experienced.


      Originally Posted by cjreynolds View Post

      But whatever you do, don't image slice - stay away from the dark side!
      Joe, with all due respect, that's not accurate. (a) Virtually all awesome sites classified as "killer content" aka "killer design" were done by full image slicing.

      And (b) the thousands of professionally designed sites sold at TemplateMonster (designed by scores of professional designers) were designed using the full image slicing method. And (c) the thousands and thousands of WordPress templates, at ThemeForest and elsewhere, were also designed using the full image slicing method.

      Originally Posted by cjreynolds View Post

      I actually do use PS to lay out my designs, but then I create JPGs or GIFs from the elements of the design (buttons, banners, background, etc.) and then build the webpage with them - I use a plain text editor for that, but Dreamweaver is an excellent tool if you're not HTML-savy.
      That is a good way to build/design sites. But unfortunately that technique won't produce killer design sites (well in most cases) or produce the type of sites desired by corporate type clients.
      Signature
      ONCE UPON A TIME there was a Warrior named Bob. He was sad. And frustrated. You see, Warrior Bob spent every last nickel on Internet Marketing e-books. But nothing panned out. No traffic. No sales. He was one sad Bob. Then one day Bob found a bottle. He rubbed it and out came a Genie who granted him 3 wishes. For Wish #1 Bob asked for a pet Dragon. Wish Granted. For Wish #2, Bob wanted Warriors' websites seen by 53 million TV viewers, for under $5 per broadcast. The Genie said... (click here)
      {{ DiscussionBoard.errors[3966668].message }}
      • Profile picture of the author cjreynolds
        Originally Posted by Your Brand Ebooks View Post

        When doing web editing in WYSWYG mode, moving a photo or button just slightly to the left or right, often results in the editor software building some crazy table with for example 23 columns most of which contain invisible image spacer graphics. Lots of people who edited their sites in FrontPage wound up with an html mess of nasty huge complex tables.

        .. > It builds dozens of little tables
        .. > with little bits of the image in them

        If that's happening with designers who are slicing from PSD then they're not very experienced.
        Thanks for the update! The last time I messed w/image slicing, PS was still in ver. 5.5 - Maybe I need to re-visit the subject...

        joe
        Signature

        I just added this sig so I can refer to it in my posts...

        {{ DiscussionBoard.errors[4256134].message }}
        • Profile picture of the author Anthony C
          I also do layout in photoshop then break off the elements (header, footer, info bar, side bar, etc) into separate gifs and jpegs and then import them into xsitepro for building out the pages.
          {{ DiscussionBoard.errors[4257079].message }}
          • Profile picture of the author therealdeal
            Originally Posted by marucho View Post

            I also do layout in photoshop then break off the elements (header, footer, info bar, side bar, etc) into separate gifs and jpegs and then import them into xsitepro for building out the pages.

            This is also how I build a lot of my sites and it's pretty easy to do once you know how. I use a simple but powerful Free html editor called trellian webpage.

            You can find it here: Trellian WebPage - Trellian Software

            I never hear anyone recommending it and there may be a reason for that but it has always worked very well for me and didn't cost a cent to use.

            Of course you can always setup a wordpress blog and customize it with a theme... This is really the easiest way and google loves the blog...

            Consistently blogs rank higher than plain old html sites... (My experience)
            Signature
            The Best Hosting Company Hands Down...
            http://newhostnow.com
            Enter the coupon code: 1cent             for your first months hosting for just $0.01 cent. Yep it's that easy!
            {{ DiscussionBoard.errors[4257146].message }}
  • Profile picture of the author nelsonbiglar
    I prefer PSD to PHP using CSS to bring it all together.
    Signature

    On the other side:
    www.fishingnorthernontario.com

    {{ DiscussionBoard.errors[3966221].message }}
  • Profile picture of the author Presto Smith
    Wow this is an interesting thread. I have built sites in a variety of ways and using this manner is personally one of my favorite. I feel that I have a great amount of control over the site and code when I start it from PSD then convert to HTML. Although, after reading through this post I can see that there are some definite downsides to this method.

    For me personally, it depends upon the type of site I am building. If it is going to be a simple niche landing page that I want to have a clean and clear look this may be a good way to go about it. Rather if I am trying to create a blog or larger site which needs a CMS platform then I may develop via Wordpress, Joomla or similar. Any thoughts?
    Signature
    Presto! Web Developers at Your Service.
    Like Us | We Need Some Fans :) Help a Brother Out and Like Us on Facebook.
    Secure Clickbank Product Delivery | follow link for the WSO (unbeatable price)
    {{ DiscussionBoard.errors[3966482].message }}
  • Profile picture of the author Karan Goel
    Here's something to help you out:

    Top 5 Helps To Convert PSD To Wordpress Theme
    Signature
    Penalty Safe, Long Term, 100% Whitehat Backlinks
    Love your site? Then check out SafeSpokes!
    ~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_
    karan996@irchiver.com karan997@irchiver.com
    {{ DiscussionBoard.errors[3966621].message }}
  • Profile picture of the author qubesys
    nice posting

    I am loving it, I think SEO factor is there, you have to take care of it.

    Hope to see more such posting from your side

    cheers
    {{ DiscussionBoard.errors[5203312].message }}

Trending Topics