HowTo
Customize Templates
http://www.templateisland.com
Step 1: Obtaining the template of your choice This step depicts how to search for templates using a keyword, how to purchase and download them. 1. Go to homepage of templateisland.com website. 2. Find the search box, type the specific keyword in it and press the Search button. The list of thumbnails will appear. You can also search templates by Aut hor, Category and by template number. 3. Choose the template you like and click on its screenshot to preview. 4. Click an image for preview. 5. Buttons on the bottom of the page are used for buying the template. (In this tutorial we will skip purchasing procedure. You will need to use your Credit Card or Paypal account in order to make a purchase). After making a purchase email will arrive to you in 2-20 minutes after your credit card or paypal account is charged. Follow the link in email to download zipped files of the chosen template. 6. Unzip the archive with WinZip. Please check downloading WinZip page if you don't have WinZip installed on your computer. 7. Browse the unzipped files to find the following: - FONTS folder that contains fonts that you will need to edit the .psd source file but might not have 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 Photoshop file and make HTML out of it. HTML version of template contains buttons and other elements without text. This allows you to add custom text to empty cells; - 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 anything to make your website really unique. Later you will need to make HTML out of it and.... see next steps :); - LIBRARY folder contains advanced clipart library that you can use to give your template unique look. After you have template files unzipped and saved to your hard drive you can proceed to Step 2: Editing your template in order to do modification by editing text and graphics.
Step 2: Editing your template. In this step you will customize SAMPLE TEMPLATE in order to make it look as a site for fictitious "AcmeSoftware" company. The list of template editing steps follows. Please use Photoshop 7.0 or higher to gain access to all features described in this step. 1. 2. 3. 4. 5. 6. 7. 8. Preparing to edit text by installing new fonts to your system. Editing the company name. Editing colors. Replacing an image. Inserting additional image. Hiding extra navigation buttons. Hiding a portion of a layer. Slicing and exporting HTML.
You need to start from step1 in order to be able to change text. You may skip other steps as you like. This will affect just the site appearance as long as you produce valid HTML as described in step 8. HTML code will be uploaded to a web server in Step3: Putting your new site on the web.
Step 2.1: Preparing to edit text by installing new fonts to your system Please, follow the instructions in this step in order to be able to edit text in your .psd template. 1. Select Start>Settings>Control Panel>Fonts to open the needed system folder. 2. Select File->Install Font to open a browse dialog. 3. In the dialog, locate your downloaded FONTS folder. 4. Click Select All button and then OK. 5. Close the window displaying ...\WINDOWS\FONTS folder. With fonts installed, you are now ready to proceed to Step2.2: Editing the company name. Step2.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 it's position. 1. Double-click on TEMPLATE.PSD to open it with Photoshop. 2. Make sure the toolbox and tool options bar are visible. If not, select Window > Tools and Window > Options respectively to display them. 3. The image might appear too big or too small. To adjust magnification select Zoom Tool from the toolbox. The options bar changes to reflect zooming options. Turn on Resize Windows To Fit checkbox and click Actual Pixels button. 4. Make sure the Layers Tab is visible. If not, select Windows>Layers to display it. 5. Select Move Tool and right-click the word "company" in the upper left corner. In the drop-down menu of layer names choose COMPANY. This layer will get selected in the Layers Tab. You may think of layers as of transparent films with images and text placed on them. You can edit the contents of films independently, change the order in which they are stacked, and lots of other things. 6. To make sure you selected correct layer try making it invisible for a while by clicking an eye icon from the left of the layer name in the Layers Tab. The text should disappear.
7. Double-click "capital T" in the Layers Tab. This switches you to Type Tool and highlights the text. Go ahead and replace "company" with "AcmeSoftware" or your company name if you are not just doing tutorial. 8. Highlight the text you just typed in order to edit font, size, style, and color. Use drop-down boxes in the options bar to change font to Arial, size to 24pt, and style to Bold Italic. Then press green rectangle in the options bar to display color dialog. Your mouse pointer turns into a snippet. There are many ways in Photoshop to specify color but for now just pick white color from the upper left corner of colors field and click OK. 9. Drag the layer with edited text a little more to the left with a 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 "AcmeSoftware" text independently. You may want to restore linking in order to handle company name and logo as a whole some time later. Congratulations! You made it through this very long step! Next steps will be much easier. Proceed to Step2.3: Editing colors. Step2.3: Editing colors In the previous step you edited text color. Now you will change color of a graphical element of the template. 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 foreground color. 3. Set the foreground color by clicking the upper color selection box in the toolbox and picking color from the orange square near company name. 4. With Paint Bucket tool selected, click the news bar and watch it turn orange. Now its time for more dramatic customization. Proceed to Step2.4: Replacing an image.
Step2.4: Replacing an image In this step you will hide some of the template layers and insert additional one with a different image in it. 1. Select File>Open to display an Open dialog and browse to the "portrait.jpg" file in your downloaded "RESOURCE" folder. 2. Select Image>Image Size to display Image Size dialog. 3. Make sure the checkboxes Constrain Proportions and Resample Image are on, resample mode is set to Bicubic, and sizes in Pixel Dimensions box display in pixels. 4. Enter "120" in the Width field and click OK. 5. Use Select>All and Edit>Copy to place the entire image in buffer. 6. Close "portrait.jpg" window. You do not need to save the changes. 7. Select Edit>Paste to insert image in the template. A new layer is automatically created and given default name. 8. Right click the new layer in the Layers Tab and choose Layer Properties... from context menu. Enter "portrait" in the Name field for future reference. Click OK. 9. With "portrait" layer selected use the Move Tool to place the image on the left of welcome text. 10. Find "man" and "man shadow" layers and make them invisible by clicking the eye icons. Next Step 2.5: Inserting additional image does not introduce any new concepts comparing to the step you just completed. You may want to fulfill it for better understanding, otherwise, proceed to Step 2.6: Hiding extra navigation buttons. Step 2.6: Hiding extra navigation buttons Our templates were designed t o suit a number of purposes. It may happen so that you don't need all the elements. In this step you will remove "SOLUTIONS" button from the template's navigation bar. 1. Locate "SOLUTIONS" layer and make it invisible by clicking the eye icon. Now there is empty space in place of unwanted button. It is better to shift remaining buttons from the right by one position to the left side.
2. Select "SERVICES" layer and unlink it from "COMPANY" and "PRODUCTS" layers by clicking link icons . Note that "SUPPORT" and "CONTACT" layers get unlinked as well. 3. Use Move Tool to shift buttons to the left. You can enlarge the image with Zoom Tool and watch button separators match to make sure you are doing right. 4. Restore links to "COMPANY" and "PRODUCTS" layers for "SERVICES" layer. Note that links for "SUPPORT" and "CONTACT" get restored as well. Proceed to Step 2.7: Hiding a portion of a layer. Step 2.7: Hiding a portion of a layer In the previous step you changed 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 is much easier to edit 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 Layer Mask button in the bottom of the Layers Tab to hide all parts of the layer that aren't selected, i.e. the end of caption that you selected in (2). 5. If you ever want to get back w hat you just hid choose Layer>Remove Layer Mask>Discard to delete the mask or Layer>Disable Layer Mask for just turning it off. At this point, you have learnt enough to make yourself happy with appearance of your site. Getting a web page out of .psd image comes next in Step 2.8: Slicing and exporting HTML. 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 a browser.
Unlike images, which come in one piece, web pages consist of a large number of elements assembled together using HyperText Markup Language. 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. Take advantage of Photoshop features to achieve such an effect. 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 Slice Select tool to pick the needed slice and drag handles. 2. Right click the newly created slice and choose Edit Slice Options... from context menu. 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.templateisland.com) to make sure 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 Save For Web dialog. This dialog allows to set optimization options for each slice. Just click OK and specify a save path. Now you will need to work on the generated .html file. The following steps assume that you are using Macromedia Dreamweaver 4.0 HTML editor. 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 Company button in your page and examine the contents of Properties window. You can edit the Link field to change URL. 3. Select the text slice beneath welcome caption. Select Window>Code Inspector to edit HTML code. The
tag is automatically highlighted (it looks something like 
). Replace this tag with your custom text. Close the code editing window and highlight newly created text in the editor window. Make use of text formatting options in the Properties window to match initial text appearance as good as you can.
4. You can use "back.gif" from RESOURCE folder as a background for this cell. Just enter the path to this file in the Bg field of Properties window (you may need to expand it first with an arrow in the bottom right corner). 5. Save your work and preview the customized page by selecting File>Preview in Browser>. This is the end of Step 2: Editing your template. Proceed to Step3: Putting your new site on the web. Step3: Putting your new site on the web In this step you will be given instructions for uploading your pages to a web server. After this you will be able to review your site online in browser. We leave it up to you what sort of hosting company and domain name to choose because it depends on specifics of your business. In following instructions it is supposed that you have a login/password combination available from your hosting provider. 1. Open a browser and type ftp://domain_name in address line. 2. In Internet Explorer, choose File>Enter as... to display authentication dialog. Enter your login 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. This is the end of tutorial introducing major concepts of template customization.