Docstoc

RedRose template logo customization

Document Sample
RedRose template logo customization Powered By Docstoc
					Logo customization – Red Rose template logo customization
Red Rose template logo customization
This tutorial will show you how to use Adobe Fireworks for basic logo customization of Joomla templates (Red Rose template in this example) that JoomlaMarket template club offers to its members. Author: Igor Mihaljko Date: 17. December 2007

Logo customization – Red Rose template logo customization

Greetings dear user! Welcome to the first in the series of template customization tutorials that JoomlaMarket will offer to its template club users. This tutorial will cover basic logo editing and customization. It is inspired with a questions posted on official forum. After reading questions regarding logo customization and trying to answer it on the forum I decided to write a short tutorial. After all, picture is worth thousand words. I am using Adobe Fireworks as easiest tool to achieve final results but I guess that similar steps could be applied to any tool that the user wants to use. Let's begin with starting Adobe Fireworks and opening PSD file with template definition:

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

2

Logo customization – Red Rose template logo customization

After opening of provided PSD file, your Fireworks window should look like the window show in the next picture:

We will use magnifying tool to magnify portion of template that we wish to change:

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

3

Logo customization – Red Rose template logo customization

Choose zoom tool Select area that you want to zoom Select pointer tool after zooming After zooming part of the template that we want to change, hover mouse on that part until selection box appears. After the selection box appears (red rectangle around logo), left click that part of template design. We have just selected our future logo that we will export as PNG graphics after we finish customization.

On the following picture, you can see that on the left, under „Layers“ section, we should have „Object 85“ selected. You could do this selection directly under „Layers“ section if you knew the name of logo part (let's assume that we didn't know this information).

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

4

Logo customization – Red Rose template logo customization

If you take a closer look on top of the layers list, you can see that there are no layers under „Web layer“ section.

Let's define something here now. With selected logo („Object 85“ part of the template), click on the „Edit“ in main menu and choose option like shown on the next picture:

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

5

Logo customization – Red Rose template logo customization

As you can see, our „Object 85“ has changed color to green. We have just defined our logo slice that we will use later for logo export to PNG file.

We will change the name of this slice. This name will be later used for the name of our exported PNG logo file. Let's change this name to „logo“. Just select text inside the textbox under „Slice“ and change it to „logo“.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

6

Logo customization – Red Rose template logo customization

There is one more thing that we need to adjust. By default, the slice that we have defined would be saved as GIF graphics. We would like to export it as PNG graphics file so we will change this option too. On the right side of the Fireworks window you can find section „Optimize and Align“. The section is by default closed so left click on its title to open it. You will find options selected by default and similar to the next screenshot:

Change from GIF option to PNG24 option.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

7

Logo customization – Red Rose template logo customization

After this change, you can see that the title of the slice has changed to reflect these changes by now. It shows the name of the slice („logo“) and the format that slice will be exported to („PNG“).

We can export this logo now as it is. Right click on logo slice and choose „Export Selected Slice...“ option.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

8

Logo customization – Red Rose template logo customization

As you can see, „logo.png“ is the name of the file that Fireworks if offering to save.

Also, on layers palette, you can see that there is new layer under „Web layer“ list and is called „logo“.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

9

Logo customization – Red Rose template logo customization

After we have finished defining our logo slice it is a time to make some changes. Red Rose template is done in Corel and exported in PSD file format. Because of that there are no text objects in this file. We want to change „red rose“ text so we will have to define new text objects that will replace default one. Choose „red rose“ object by clicking it on a work area or by choosing „Object 89“ in layers list.

After we have selected it, let's hide it. Click on eye icon on the left of the name of „Object 89“.

As you can see the „red rose“ text has disappeared.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

10

Logo customization – Red Rose template logo customization

Select „Text tool“ on the tool palette to the left of the Fireworks window.

Change some properties of this tool, like shown on the following picture:

Put the cursor on the place where you want to start entering text and type something. In this example I choose to type the exactly the same text as existed before („red rose“). As you can see, I was using „Arial“ font face. You can use whatever font face you like. You can align this text object by mouse or using cursor keys on your keyboard until you are satisfied with result.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

11

Logo customization – Red Rose template logo customization

As you can see on a layer list, there is a new object called „red rose“. This object represents the text that we have just defined.

We can and will repeat this procedure of selecting and hiding existing objects and adding new text objects to define replacement for „joomlamarket templates“ text.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

12

Logo customization – Red Rose template logo customization

After we have finished changing the logo design and adding and removing text we can finally save our new logo design. We will use the well known procedure of exporting logo slice by right clicking on a logo slice and choosing „Export Selected Slice...“ option.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

13

Logo customization – Red Rose template logo customization

You can see the final result on the last picture of this tutorial.

This concludes my first tutorial regarding logo editing and customization. You can use described techniques to change every part of template design. Just remember to upload your changes and new image files to the right folder in Joomla templates directory on your server.

Author: E-mail: Date:

Igor Mihaljko mihha@inet.hr 18.12.2007

14


				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:149
posted:5/3/2009
language:English
pages:14