Photoshop to html

Photoshop is a fine piece of software for manipulating images etc and using it to export files as html.  There are however pros and cons to using Photoshop.  The biggest one is that Photoshop will only export html with table layout and not CSS layout.

Pro and cons of exporting html from Photoshop.

Pros:

  • It allows you to have live pages in seconds
  • Photoshop does have a lot of add-ons which will aid you in creating a HTML mock up, giving very detailed effects and textures with an easy user interface.
  • There are a lot of tutorials online for Photoshop and exporting you HTML from it.  There are multiple online posts on the subject too.
  • In just about every book shop there are magazines and books on the subject of creating HTMLs with Photoshop and exporting them with Photoshop.
  • Photoshop will make it easy to do anything with the graphics on your HTML.
  • Photoshop will seamlessly integrate with other applications created by adobe.  Things like InDesign and Illustrator, so that you may create “Smart Objects”.
  • Photoshop has things like ImageReady which can be used to slice up images and then compressing them for use on HTMLs.

Cons:

  • You may only have your live pages in table layout
  • Photoshop will take more time to learn, as it is more difficult.
  • When optimising and preparing images for the internet you will need “Image Ready”
  • Photoshop is expensive
  • Photoshop was not designed with being used for web graphics.  It is more of a graphic arts program.

Photoshop uses a table design, so when comparing the table design to CSS, we can see why maybe it is not such a good idea to use Photoshop.  The difference between CSS and table design are:

  • CSS has faster page loading times
  • CSS has redesigns that are more efficient
  • CSS has redesigns that cost less
  • CSS is more consistent visually which is maintained through the html
  • CSS is better for search engine optimization
  • CSS is better for accessibility and has a competitive edge
  • CSS has quick website wide updates
  • CSS is easier for groups and teams to update
  • CSS has better usability than table designs
  • CSS has more complex designs and layouts
  • CSS has no spacer gifs

It is best practice to use CSS (version 2 and above). If you are a designer one great solution I can give you is to use an online service the slice up your PSD, and add it to your expenses. Photoshop is an amazing software, but it is not an html editor, so don’t use it even if it is very tempting, in the long run it will not work.