Logo customization – Red Rose template logo customization

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

Author: Igor Mihaljko E-mail: [email protected] Date: 18.12.2007

2

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:



3

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:



4

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).



5

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:



6

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“.



7

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.



8

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.



9

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“.



10

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.



11

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.



12

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.



13

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.



14

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.

Logo customization – Red Rose template logo customization

Documents

Transcript of Logo customization – Red Rose template logo customization