This tutorial will show you how to create high-end attractive websites using the Photoshop (.psd) templates produced by Template Monster, Design Galaxy, Boxed Art and many other template companies.

By following the simple instructions given in the next three steps you will customize this sample template (3.94MB; click to download) to produce a site for a fictitious "AcmeSoftware" company. You can see the way the sample template should look at the end of the tutorial by clicking here.



Overview of the Three Steps to Customize the Sample Template

» Step 1: Selecting a Template
In the first step you will learn how to use the Templates.net site in order to chose the web template that best suits your business. Full instructions on purchasing and unzipping the downloaded archive are included.

» Step 2: Editing your template
This section of the tutorial will give you a good idea of how to customize your template so that it suits the specific needs of your unique business.

» Step 3: Putting your new site on the web
With all your pages ready, it's time to purchase a domain name and choose a hosting company. After the pages are uploaded to your hosting company's server anyone can view them by typing your domain name in address line.



Step 1: Selecting a Template

This step points you in the direction of useful articles to help you find your template, and describes how to download it. You are not required to fulfill these actions but will be offered to download a .zip archive instead.

1. Go to our Template Guide and ensure that you understand all the relevant issues about the differences between different types of templates and the software required to customize your template. To help you narrow your search to one or two template suppliers, our article on choosing a template provider may be useful. You may also wish to review our suggested method for choosing your template itself.

2. Once you are sure that you have found the right template, buy it and click the download link that will arrive shortly afterwards. For some suppliers, this email arrives almost immediately, but for some others it can take longer - perhaps up to an hour. It depends on the credit card fraud prevention methods in use within the merchant system.

After clicking the download link, a dialog box will appear. Choose to save your zipped template file. If you are completing this tutorial, you can do this now with the sample template. Save it to its own directory somewhere on your hard drive.

3. Unzip the archive with WinZip, saving it in the same directory as your .zip file. (If you don't have WinZip, you can get it free from www.winzip.com. Mac users may use the free StuffIt Expander instead.)

4. Browse the unzipped files to find the following:

• FONTS folder that contains fonts. You will need these to edit the .psd source file. These fonts may or may not already be installed in your system.
  
• HTML folder with "index.htm" file and IMG folder - you can preview the page in a browser. You can use this folder if you wish to just customize HTML. Advanced users prefer to customize the Photoshop file and make HTML out of it. The HTML version of template contains buttons and other elements without text. This allows you to add custom text to empty images. (If you didn't understand any of that, don't worry. All will become clear!)
  
• JPEG folder with "TEMPLATE.jpg" file, which is a compressed image of your template.
  
• PSD folder with "TEMPLATE.PSD" file that allows you making ANY modifications to design of your web site. You can customize fonts, colors and do just about anything to make your website really unique. Later you will need to make HTML out of it and.... well, we're getting ahead of ourselves!
  
• RESOURCE folder contains files that you'll use in course of this tutorial.

By the way, the sample template is by Template Monster. Nice, isn't it? And it's actually not even close to being one of their best!



Step 2: Editing your Template

In this step you will customize the sample template in order to make it look like a site for a fictitious "AcmeSoftware" company. The list of template editing steps follows.

You should use Adobe Photoshop 7.0 or higher to gain access to all features described in this step. You can also use an earlier version of Photoshop or less expensive software that can edit .psd files, such as Jasc Paint Shop Pro 7 or Ulead PhotoImpact 7 & 8, but of course, those software packages operate slightly differently, so the tutorial will not be as useful.

Step 2.1: Preparing to edit text by installing new fonts to your system

Please follow the instructions in this step prior to editing text in your .psd template. If you do not, the fonts in the .psd file will reset.

1. Select Start»Settings»Control Panel»Fonts to open the needed system folder.
2. Select File»Install Font to open a Browse dialog box.
3. In the dialog box, locate your downloaded FONTS folder.
4. Click the Select All button and then OK.
5. Close the window displaying the ...\WINDOWS\FONTS folder.

Step 2.2: Editing the company name

In this step you will learn what layers are and how to find the one that you need. You will edit text on the layer and change its position.

1. In Windows Explorer, double-click on TEMPLATE.PSD to open it with Photoshop.
   
   
2. Make sure the Toolbox and Tool Options Bar are both visible. If not, select Window»Tools and Window»Options respectively to display them.
   
   
3. The TEMPLATE.PSD image might appear too big or too small. To adjust magnification, select the Zoom Tool from the toolbox. The options bar changes to reflect zooming options. Turn on the Resize Windows To Fit checkbox and click the Actual Pixels button.
   
   
4. Make sure that the Layers Tab is visible. If not, select Windows»Layers to display it.
   
   
5. Select the Move Tool and right-click the word "company" in the upper left corner. In the drop-down menu of layer names left-click on COMPANY. This layer will get selected in the Layers Tab. You may think of layers as transparent films with images and text placed on them. You can edit the contents of these "films" independently, change the order in which they are stacked, and lots of other things.
   
   
6. To make sure you have selected the correct layer, try making it invisible for a while by clicking the Eye Icon from the left of the layer name in the Layers Tab. The text should disappear. Click again to make it reappear and left-click on COMPANY to reselect it.
   
   
7. Double-click capital T in the toolbox. This switches you to the Type Tool and highlights the text. Go ahead and replace "company" with "AcmeSoftware" (or your actual company name if you are not just doing the tutorial).
   
   
8. Highlight the text you just typed in order to edit the font, size, style, and color. Use the drop-down boxes in the options bar to change the font to Arial, the size to 24pt, and the style to Bold Italic. Then press the green rectangle in the options bar to display the color dialog. Your mouse pointer turns into a snippet. There are many ways in Photoshop to specify color but for now just pick the white color from the upper left corner of the colors field and click OK.
   
   
9. Drag the layer with the edited text a little more to the left with the Move Tool . You will notice that other layers move as well. This is because the layers are linked. You can tell which layers are linked to the currently selected one by a link icon from the left of layer names. Turn off linking by clicking the icons and move the "AcmeSoftware" text independently. You may want to restore linking in order to handle the company name and the logo as a single unit some time later.

Step 2.3: Editing colors

In the previous step you edited text color. Now you will change the color of a graphical element on the template. (This step is seldom actually required.)

1. Select a layer named "news bar" with a green horizontal stripe on it.
   
   
2. Select the Paint Bucket tool. This tool repaints all pixels of similar color on a layer to match the foreground color.
   
   
3. Set the foreground color by clicking the upper color selection box in the toolbox and picking a color from the orange square near the company name.
   
   
4. With the Paint Bucket tool selected, click the news bar and watch it turn orange. Easy!

Step 2.4: Replacing an image

In this step you will hide some of the template layers and insert an additional layer with a different image in it.

1. Select File»Open to display an Open dialog box and browse to the "portrait.jpg" file in your downloaded "RESOURCE" folder.
   
   
2. Select Image»Image Size... to display the Image Size dialog.
   
   
3. Make sure that the checkboxes Constrain Proportions and Resample Image are on, resample mode is set to Bicubic, and the sizes in the Pixel Dimensions boxes display in pixels.
   
   
4. Enter "120" (without the quote marks) in the Width field and click OK.
   
   
5. Use Select»All and Edit»Copy to place the entire image in the memory buffer.
   
   
6. Close the "portrait.jpg" window. You do not need to save the changes.
   
   
7. Select Edit»Paste to insert the image into the template. A new layer is automatically created and given a default name.
   
   
8. Right click the new layer in the Layers Tab and choose Layer Properties... from the popup context menu. Enter "portrait" in the Name field for future reference. Click OK.
   
   
9. With the "portrait" layer selected use the Move Tool to place the image to the left of the welcome text.
   
   
10. Find the "man" and "man shadow" layers and make them invisible by clicking their eye icons.

Step 2.5: Inserting an additional image

In this step you will insert an additional graphic into the template by creating a new layer.

1. Select File»Open... to display an open dialog and browse to the "stripe.gif" file in your downloaded "RESOURCE" folder.
   
   
2. When the image opens use Select»All followed by Edit»Copy to place the entire image in the buffer.
   
   
3. Close the "stripe.gif" window.
   
   
4. Select Edit»Paste to insert the image into the template. A new layer is automatically created and given a default name.
   
   
5. Right click the new layer in the Layers Tab and choose Layer Properties... from the popup context menu. Enter "stripe" in the Name field for future reference. Click OK.
   
   
6. With the "stripe" layer selected use the Move Tool to place the stripe just under the company name in place of "logotype".
   
   
7. Find the "LOGOTYPE" layer and make it invisible by clicking the eye icon.

Step 2.6: Hiding extra navigation buttons

Templates are designed to suit a number of purposes. It may be that you don't need all the elements. In this step you will remove the "SOLUTIONS" button from the template's navigation bar.

1. Locate the "SOLUTIONS" layer and make it invisible by clicking the eye icon. Now there is an empty space in place of the unwanted button. It is better to shift the remaining buttons from the right by one position to the left side.
   
   
2. Select the "SERVICES" layer and unlink it from "COMPANY" and "PRODUCTS" layers by clicking the link icons. Note that the "SUPPORT" and "CONTACT" layers get unlinked as well.
   
   
3. Use the Move Tool to shift the buttons to the left. You can enlarge the image with the Zoom Tool to make sure that the button separators match.
   
   
4. Use the link icons to restore the links to the "COMPANY" and "PRODUCTS" layers for "SERVICES" layer. Note that the links for "SUPPORT" and "CONTACT" get restored as well.

Step 2.7: Hiding a portion of a layer

In the previous step you changed the visibility of a layer to get rid of extra graphical elements. Sometimes you may want to hide some elements but keep others within the same layer. In this step you will learn how to accomplish this via using layer masks. You will hide the end of "Welcome to Company website!" leaving just "Welcome to Company". Of course it would be much easier to simply edit the text, but this is just an exercise!

1. Choose Edit»Deselect to turn off any current selection.
   
   
2. Select the Rectangular Marquee tool and draw a box around "website!".
   
   
3. Choose Select»Inverse to invert your selection.
   
   
4. Press the Layer Mask button in the bottom of the Layers Tab to hide all parts of the layer that aren't selected - that is, the end of the caption that you selected in the second step, above.
   
   
5. If you ever want to get back what you just hid choose either Layer»Remove Layer Mask»Discard to completely delete the mask, or Layer»Disable Layer Mask to just turn it off without deleting it.

Step 2.8: Slicing and exporting HTML

In this step you will learn what slices are and how to create and edit them. You will slice the .psd image to produce an HTML page that can be viewed in an internet browser such as Internet Explorer.

Unlike images, which come in one piece, web pages consist of a large number of elements assembled together using HyperText Markup Language (HTML). Every image on a page is stored in a separate file. These files can have different formats but when displayed in a browser create an impression of a whole picture. You can take advantage of Photoshop's features to achieve such an effect. The HTML code will be generated automatically. You only need to specify which portions of the template should be converted into separate images, in other words create slices.

1. Select the Slice Tool and draw a box around the "company" button. You can resize it after creation - just use the Slice Select tool to pick the needed slice and then drag its handles.
   
   
2. Right-click the newly created slice and choose Edit Slice Options... from the context menu. The URL field designates the address of a web page that opens when the button is clicked. Since your Company subpage is not ready yet leave the field empty or type some address (e.g. http://www.templates.net) just to make sure that the button works. You will be able to edit the URL later.
   
   
3. Make another slice around the text beneath the welcome caption. You will replace the image in this slice with formatted text to make the page download faster.
   
   
4. Select File»Save For Web... to display - unsurprisingly! - the Save For Web dialog box. This dialog allows you to set optimization options for each slice. Just click OK and specify a save path to which you want to save the sliced images.

Now you will need to work on the generated .html file. The following steps assume that you are using the Macromedia Dreamweaver 4.0 HTML editor. You may of course use another version of Dreamweaver, or even another editor altogether (such as Microsoft Frontpage or Adobe GoLive) but in other editors the locations of controls may vary.

1. Open the exported .html with Dreamweaver. Make sure the Properties window displays. If not, select Window»Properties to display it.
   
   
2. Click on the "Company" button in your page and examine the contents of the Properties window. You can edit the Link field to change the target URL for this button.
   
   
3. Select the text slice beneath the welcome caption. Select Window»Code Inspector to edit the HTML code. The <img...> tag is automatically highlighted. It will look something like this:



<IMG SRC="images/edited_TEMPLATE_07.jpg" WIDTH=424 HEIGHT=161 ALT="">

Replace this tag with your custom text. Close the code editing window and highlight the newly created text in the editor window. Make use of the text formatting options in the Properties window to match the initial text appearance as closely as possible.


4. You can use "back.gif" from the RESOURCE folder as a background for this cell. Just enter the path to this file in the Bg field of the Properties window (you may need to expand it first with the arrow in the bottom right corner).
   
   
5. Save your work and preview the customized page by selecting File»Preview in Browser.

Step 3: Putting Your New Site on the Web

There are two essentials for putting a site online. These are:

1. A DOMAIN NAME: Careful choice of your web address (eg. templates.net) is very important. If you've been following these tutorials sequentially, you've almost certainly already selected it, but in case you haven't, you may find our article on finding a good domain name useful.
   
   
2. A WEB HOSTING ACCOUNT: Your new website needs to be stored on a web server, so you need a hosting account. There are many web hosting providers, and we have written a short article on choosing a web host. Some of the best hosting companies are also featured in our Webmaster Resources directory.
   
   Anyway, whichever hosting provider you choose, in the instructions that follow it is supposed that you have a logon/password combination available from your hosting provider.
   
   
   1. Open a browser and type ftp://domain_name in the address line.
      
      
   2. In Internet Explorer, choose File»Enter as... to display the authentication dialog. Enter your logon and password and click OK.
      
      
   3. Copy your web pages and folders to your site root directory as you would to any other folder on your computer.
      
      
   4. View your site online.
   
   You may of course prefer, as we do, to use dedicated file upload software such as the excellent DirectFTP from the strangely-named CoffeeCup Software.

We hope that you found this tutorial helpful. If you have any suggestions that might help us to improve it, please do not hesitate to contact us.

Last modified: Wednesday, 29-Jun-2005 10:12:10 EDT. Print this page.



LEGAL NOTICE: This tutorial has been substantially adapted by Templates.net from a tutorial originally produced by Inverse Logic, Inc. and has been used by permission. The resultant text, as shown on this page, or its underlying HTML source code may not under any circumstances be stored or reproduced, in full or in part, in any form, and may not be further adapted. Copyright © 2003-05 Inverse Logic, Inc. and/or Site Engineering Ltd dba Templates.net. All rights reserved.