Create the Photoshop Website Design Template
Create the Photoshop website design template - Once you have put in all the images and text you can rearrange it to create a layout or a template for your website design that will be attractive and easy to use. Ensure that the layout passes the trunk test and has the basic layout elements like logo, byline, navigation, copyright, content area, heading and sub heading styles and link styles.
Ensure your layout/ template is something you can recreate in HTML and can be optimized to load fast.
Fonts for content should be one of the common fonts that are available on all computers. Arial or Verdana are usually easy to read on the computer. Logo fonts , button fonts and some title can use special fonts and effects but you will need to export all these as images and any change will have to be made within Photoshop and the images exported again. This is therefore more difficult to maintain, so use image text only when absolutely necessary.
Icons - Design any icons that you will use in your website.
HTML Elements - You can take a screen shot of other webpages with form fields etc. ['Prt Scr' key on your computer keyboard] and paste it into your layout to get an idea of how it will look in your layout.
Images - Resize your images and shape them to work with the rest of the elements of the layout. Check out Photoshop Tips and Tricks for additional ideas.
Flash - You can plan in space for any flash animation that you will be using, within your layout.
Using the shape tools, image editing tool, text tools etc. create a layout of what you would like your webpages to look like. You can also get premade Photoshop website layout designs and customize them.
Sample Photoshop Website Design Template
The layers panel is useful when there are many objects and you want to get to something behind. You can click on the "eye" icon to to hide a particular layer. You can move a layer over another to bring it in front.
Layers Panel
Once you are satisfied with the layout it is time to slice and export the images that you will be using in the html page.
Step 1: Create a new Photoshop document
Step 2: Insert images and text
Step 3: Create the website design template
Step 4: Slice and export the images
Project: Create a simple layout
Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.
