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