Phone: (888) 281-7665 >> Email: info@calcoastwebdesign.com

News & Resources

/

Turning a Template or PSD Into an HTML Website

  • By calcoastwebdesign
  • 3 Tags
  • 0 Comments
  • 09 Jun 2010

Template Instructions

  1. Download the template file as necessary from favorite website like TemplatesBox.com
  2. Open template folder
  3. Install fonts (if not on your computer already)
  4. Open PhotoShop
  5. Open PSD file (*start here if creating own PSD image from scratch for design*)
  6. Change text to the names you need and feel free to move things around
  7. Change images and other layers in template if necessary
  8. Add additional buttons if necessary
  9. Change site colors

    *To change site colors: be on the layer you would like to change, go to layer, layer style, select color overlay, and chose your color.

    DO THIS FOR EACH LAYER IN WHICH YOU WOULD LIKE TO CHANGE THE COLOR

    *REMEMBER, TABLES WILL BE CREATED FOR EACH SECTION OF THE HTML DOCUMENT SO THEY WILL ONLY STRETCH SO FAR UNTIL THE SITE BECOMES DISTORTED

  10. Slice/Re-slice image if needed. Be certain to slice large areas where text goes! Be sure to use uniform columns and rows when dealing with navigation and framework of the site.
  11. When the PSD is to your liking and you are ready to create the html, first turn off the layers with actual text placeholders or elements to be separately inserted, and not part of the overall design of the site.
  12. Select “File – Save for Web” and then “Ctrl + A” to select all layers.

    Also be sure you are selecting “no dither” and “gif” saving options for all settings; change yours if they don’t match!

  13. Once you save this psd file, it will create the html document for you along with an “images” folder.

Making Rollovers

  1. Make your rollovers in the PSD by duplicating existing layers and then editing color, size, shape, etc accordingly
  2. Select “File – Save for Web” but this time DO NOT select “Ctrl + A” to select all layers. Instead, click each layer you want saved (rollover layers only) while holding shift to select multiple.

    Also be sure you are selecting “no dither” and “gif” saving options for all settings; change yours if they don’t match!

  3. Save the document with the name of the rollover versions of your images.


Content elements

  1. Open site in web editor like Dreamweaver
  2. Open the HTML file that was just created
  3. Center the main table so the site is justified in the middle, left or right; you decide
  4. Select top left image and then hold “shift” and select bottom right image (or first through last) and top and left align each one for consistency. You can update this as needed along the way.
  5. Get photo properties for large slices where tables/text will go and CHANGE THEM to background images instead of foreground images. Also delete images where bg color can replace and do so.
  6. Add fill in info such as text, tables for info, etc.

    *REMEMBER, TABLES WILL BE CREATED FOR EACH SECTION OF THE HTML DOCUMENT SO THEY WILL ONLY STRETCH SO FAR UNTIL THE SITE BECOMES DISTORTED

  7. Create rollovers and/or and links to pages
  8. Test and ensure each text area (INCLUDING NAV) is expandable exponentially without messing up the rest of the design!!!
  9. Add bottom copyright & footer links.
  10. Create and connect CSS
  11. Browser test!!
  12. Add description and meta tags
  • Looking to turn your favorite photo or custom image turned into a website?
  • Have a template you got for free but dont know how to turn it into a site?

  • Want to select a template site to save time and money and gain inspiration and have a professional turn it into a custom professional design for you at a lesser fee?

Contact Cal Coast Web Design for a quote on turning an image into a web design for you!

Click here to read more about our Template Website Packages or get a custom quote!

COMMENTS