How to replace the logo image in the Milkyway template1.Creating the logo
In this guide, we will be replacing the Joomla! logo by our own custom logo. Let's start by creating thecustom logo. We will use the free program the GIMP (www.gimp.org
) to do this, so do download andinstall it, if you haven't already.Open the GIMP, and click on file > new. Choose 298 pixels for the width of the image, and 75 for theheight. Also, expand the advanced options by clicking on the little 'plus' left of it. Change “fill withoption” to transparency.. Now a new window containing the transparent image will open up. The first thing we will do is addingsome text. Select the text tool in the GIMP's main window. Now click in the left upper corner of your image window, and type in your logo's text in the dialogue box, and close it. Now double click the text-tool, and the text tool's properties dialogue will open up. Change the size to an appropriate value, andalso change the font and text colour if you like, but this is not really necessary.You might want to adjust the position of the text, using the move tool. Note: You can see the image change while you adjust the text's size. If you don't see anything happen,click on the text and try again.
Create new image
Note: If you use the
Beez
template, you should set width to 300px and height to 97px.If you use another template, you can check yourself: surf to your site, rightclick on the logo you wantto replace, and select properties. There you can see the width and height.
Now that we have the text, we will add a special effect: a mirror effect. Makesure you selected the text layer in the layer dialogue.Click on the duplicate layer button, as indicated on the screenshot. Note: When using the move tool, make sure you click on the letters, not on the space between them.
GIMP main window and text tool options
Note: The layer dialogue can be opened by pressing CTRL+L.
The Layer dialogue
Now go to the menu bar in the image window, andselect Layer => Transform => Flip vertically.Select the move tool again, and move the flipped text,so that is is placed exactly under the other text: Now we will add a little fade effect. Make sure you selected the flippedtext layer, and then go to Layer => Mask => Add layer mask. In thedialogue that now appears, choose the “white (full opacity)” option. Now select the Gradient tool, andmake sure your foreground colour isset to black, the background colour isset to white (see note), and the activegradient has to be set to FG to BG(=black to white). Now draw the gradient from bottom to top, as shown in thescreenshot. The text will fade away at the bottom. You can add other effects if you like.If you are satisfied, you should select layer => merge down, andrepeat this until you have only one layer remaining. Then chooselayer => Layer to image size. Note: If you aren't satisfied with this simple mirror effect,feel free to add other effects. You can find tons of tutorialson Google or Youtube by searching for “GIMP logo tutorials”. Note: The fore- and background colours can be modified bydouble clicking them.
Flip vertically Aligning the text Adding a layer mask Gradient tool, FG and BG colour Applying the gradient
Search History:
Result 00 of 00
00 results for result for
p.
Joomla! v 1. 5 How to replace the logo image in the Milkyway template
By deckers.olivier
Google Highly Open Participation Contest
Joomla!
Google Highly Open Participation Contest
Joomla!
105.9K
Reads
107
Readcasts
16.5K
Embed Views
Recommended
More From This User
Notes
Load more
