Proper strategies for setting up a webpage template in Photoshop

Source

Opening your template

This tutorial will assume that you have already purchased a template from a professional web designer or a template site such as www.designz23.com. If you are building your own template the same organizational strategies can be used.

Ensure that your template opens to Photoshop

Once you have the file you need to ensure that it opens in Photoshop. If you have received an HTML file then the odds are that you will have a bit of trouble in getting your file into photoshop. More than likely you will get this message

Photoshop cannot directly import HTML so if your template is only in that, you have a problem.
Photoshop cannot directly import HTML so if your template is only in that, you have a problem.

It is all about organization

When using a template, it is common to need to do adjustments within the design in order to accommodate the needs of your business. Hence, they are a template and not a customized website from a web design professional or a graphic designer. The problem that tends to arise, especially if you are delegating the task of customization to another person, is that the website’s template is disorganized and information is not easily changed. I recently had a website template presented to me to fix that had over 200 layers without identifying names. They were simply labeled layer 001 to layer 200.


How to fix the HTML template problem

If this is the case you will need to either:

  • Obtain a PSD file from the original vendor
  • Open the template in a web designing program (such as Adobe Muse) and save out all the elements.
    • If you are extracting the elements using a web designing software, ensure that you place all the images in the same location and that you give them meaningful names to better identify what you have. IMG0120 does not tell you anything.

This is an example of the craziness you may get when opening a template for the first time. You need to ensure that your templates are well organized in order to be able to customize the information in the future.
This is an example of the craziness you may get when opening a template for the first time. You need to ensure that your templates are well organized in order to be able to customize the information in the future.

Setting up the hierarchy

When you have opened the template, you will note that the layers panel will be full of information. I have found that it is easiest to go through and HIDE EVERYTHING. You can do this by clicking on the eye beside each layer. Once everything has been hidden start at the bottom and click the eye again to reveal the layer.

(NOTE: At the base of the layers you will have a Background layer. This is not necessarily the background of the template. If it is a white layer without any content, double click the layer to unlock it and then delete it by clicking on the trash can at the bottom of the layers panel.)

When I name my layers I typically use a format as such

Bg_background

Bg_middle_ground

Bg_forground

In most sites you have elements that are in the front middle and back of your background. Unless you only have one graphic it is important that you distinguish the graphic elements. If you have only one image (perhaps a photo) which is to be used for the background simply make it Background and lock the layer at the bottom of the layers.

Layers should move from top to bottom in the layers panel. This being that the thing that is presented in the front of the page should be at the top with all other elements going in chronological order down to the background.

Folders and Layer Considerations

I tend to organize my templates in folders. I believe that this give you the presence of a web design professional rather than that of someone that is trying to pass of as one. Folders also greatly minimize the clutter in the layers area. You need not go overboard but a typical landing page would do well to have folders called:

Fonts

Social Link Icons

Buttons

Graphics

Background (if you have multilayers in the background)

From this example you can see how 200 misplaced layers can be easily organized into 5 folders. This makes for easy navigation and customization.

Layers should be clearly identified. By default Photoshop just uses the text that you typed as the identifier for the layer. This can be confusing if you typed:

HTML coding classes are a great way to help you learn the ins and outs of your page.

And then you typed

HTML templates can be found in a multitude of places such as those found in search results from bing or those offered by Wordpress, weebly, and other such sites. Keep in mind that templates vary in complexity and you should really research what customization is available so as to match the template with your needs.

In both cases HTML was used as the first word. Photoshop would then make the layers HTML coding and HTML templates. However, this is all dependent upon the width you have set your layers panel to. If it is thinner in width you could end up seeing only HTML and HTML.

I find that it is best to put a locator_subject_content layout to my layers. Here is an example:

Tr_HTML_Coding Class

True, you may get TR HTML from this, but with the identifier you will know that the text is in the top right, that it references HTML and that it is about Coding classes.

Order Matters!

The layers and the folder order matters critically in the organization as well as the visual presentation of your website. If a layer is misplaced then the item may not get seen (or coded into the website if you have a coder that does not check for hidden layers and objects). This could result in hours of fixes and money and time lost.

The bottom line is that you need to ensure that you can easily navigate the template, that whoever you hand off the template to in the future will be able to do so without getting frustrated and that everything remains professional in scope.

Of course the best action is to try to find a professional template that is set up in both HTML as well as PSD format so that you can easily customize the content. Ask the company from whom you are buying your template to present you with a screen shot of the layers of the PSD file. Most professional sites will not have a problem doing this. If the template is disorganized consider finding a better provider or asking for a lower rate on the template (as you will have to spend time and money in organizing the file).

Here is an example of  professional web design template. Even something as complex as this can be set up in layers that are easily customized so that it can be handed off to the graphics department or another designer later without problems.
Here is an example of professional web design template. Even something as complex as this can be set up in layers that are easily customized so that it can be handed off to the graphics department or another designer later without problems. | Source

Learn about Photoshop layers

Your thoughts please

Was this tutorial helpful

  • Yes
  • No
  • Yes, but I still have questions
  • Not at all..you should take a bat to your computer
See results without voting

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working