ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Proper strategies for setting up a webpage template in Photoshop

Updated on February 18, 2015
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

See results

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)