Welcome > Step 1 > Step 2
Customize your template


In the second step you will learn how to edit your template to make it perfectly suitable for your company.

To try yourself with this step you can download our sample template. To customize it use Adobe Photoshop 7 or higher.

2.1 Install new fonts on your computer
2.2 Edit company name
2.3 Change colors
2.4 Insert new image
2.5 Slice and export HTML

You can start from step 2.1 or skip some steps choosing those you need.

After you finished with all the steps you can say " at last! " because you are now standing right before the finish-line: Step 3: Let the people know
Return to the top Go top
STEP 2.1 > Install new fonts on your computer


At first you need to install new fonts on your computer to be able to edit your .psd template.

a. Select Start>Settings>Control Panel>Fonts to open the needed system folder.
b. Select File->Install Font to open a browse dialog.
c. Locate your downloaded FONTS folder.
d. Click Select All button and then OK.

Here you go! Fonts were successfully installed on your computer.
Return to the top Go top
STEP 2.2 > Edit company name


In this step we will explain you what layers are, how to find and edit text on the layer.

a. Open TEMPLATE.PSD with Adobe Photoshop.
b. To make tool options bar and toolbox visible select Window > Tools and Window > Options.
c. You can find out image to be too small or too big. To change that select Zoom Tool from the toolbox.
d. Select Windows>Layers to make the Layers Tab visible.
e. Select a Move Tool and right-click the word "company" in the upper part of the template. In the drop-down menu of layers choose "company" and the layer will get selected in the Layers Tab.
f. To find out if you chose the right layer try making it invisible for a while by clicking on the eye symbol from the left of the layer name in the Layers Tab.
g. Then it's time to use a Type Tool to finish changing the company name.
Return to the top Go top
STEP 2.3 > Change colors


Here we will teach you how to change the color of graphics on your template.

a. Select a layer name.
b. Choose Paint Bucket Tool. It can easily change the foreground color to any color you wish.
c. In the color selection box choose any color you like.
d. After selecting the Paint Bucket Tool click inside the layer which foreground color you want to change and see how it will become of another color.
Return to the top Go top
STEP 2.4 > Insert new image


How to add some more images to your template? Feel free to learn it from here.

a. Choose File>open and the open dialogue box will appear.
b. Browse the image you want to insert.
c. When the image is opened use Select>All and Edit>Copy to copy image to buffer.
d. After choosing Edit>Paste the image will be automatically inserted to your template and given default name.
e. In the Layers Tab choose with the right-click of the mouse Layer Properties. You can change Name field to make it easy for the future reference.
f. With that layer you've just named choose the Move Tool to put it instead the logotype on your template.
g. Find LOGOTYPE layer and make it invisible with the help of an eye symbol .

That's it! …and nothing difficult at all.
Return to the top Go top
2.5 Slice and export HTML


Any html page consists out of images. They are combined together with the Hyper Text Markup Language. These images are stored in different files but shown in your browser like the whole picture - web page. Using Adoby Photoshop© you will be able to generate html code automatically. You only need to specify which portions of the template should be converted into separate images, in other words create slices.

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.
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.metamorphozis.com) to make sure the button works. You will be able to edit the URL later.
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.
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.


Open the exported .html with Dreamweaver. Make sure the Properties window displays. If not, select Window>Properties to display it.
Click on Company button in your page and examine the contents of Properties window. You can edit the Link field to change URL.
Select the text slice beneath welcome caption. Select Window>Code Inspector to edit HTML code. The tag is automatically highlighted (it looks something like <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 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.
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).
Save your work and preview the customized page by selecting File>Preview in Browser>
Return to the top Go top