Building HTML From Illustrator or Photoshop

If graphic designers supply you artwork in Illustrator or Photoshop you need to make these basic checks before writing HTML.

• Ask for a layout that shows the most irregular layout of content.
  • Very short and very long menu items.
  • When there are lists of items, make some items very long and others very short.

• Check all fonts are available at Google fonts, Edge fonts or licensed. Licensed fonts needs to come as WOFF and EOT formats.
• Items that are on top of each other or overlap must be separate layers.
• All blank space must be transparent.
• All images that are not square and filled with a fixed colour should be in a Photoshop layer that is transparent.
• Guidelines should be set up in accordance with standards. We prefer the Foundation grid.

You need to make these checks after writing HTML:

• Make sure all text in any section had bold, links and bullet points and these are styled correctly.
• Add images to all sections that could have them covering left indented, right indented and images below. Also define whether there are captions.
  
• Make sure a Photoshop overlay has been added over a browser view of the page and items line up correctly.

Making these checks up front will save a lot of time when building HTML.