This Tutorial uses the RokWebify Source PNG and Font
Download the RokWebify Source PNG and Vagabond font now!
NOTE: You will need to use the RokWebify Joomla template source PNG file and the font Vagabond (download link above) in order to make edits and follow along with this tutorial. Be sure to install the Vagabond font into your computer. Once installed, Adobe Fireworks will be able to recognize the font and you can use it during your editing.
- Open the rokwebify_source.png file that is included in the RokWebify template release in Adobe Fireworks. In the Layers panel on the right hand side, find the folder at the top of the Layers list named Web Layer and click the eye icon to the left of the Folder text to make the Web Layer invisible. This will remove the green overlay "slices" that are currently obscuring the logo text. We'll need these slices later on.
- Using the Pointer Tool, double click on the RokWebify text in the logo area of the layout. This will give you a text cursor to allow you to edit the text. Highlight the green coloured Rok text and then begin typing the first part of your logo text that you wish to appear in the green color. In our example, we will be typing "New".
- Next, highlight the blue coloured Webify text and type in the last part of the logo text you wish to appear in the blue color. In this example, I will be typing "Text".
- Now that the main logo text has been changed, we can change the sub text beneath the main logo text. Using the Pointer Tool, double click the text beneath the new logo text that is currently "Fireworks - Joomla Demo Template" and replace with the text you desire. In this example, I will be typing "A Brand New Look for a Brand New Site".
- In our example, the new logo text we have used NewText is a bit shorter than the previous RokWebify text, so the spiffy little green Alpha button is a bit too far over to the right and does not overlap the edge of the last letter like it did before. I want to move it to the left, slightly overlapping the last letter of my logo text like it was before with RokWebify.
Using the Pointer Tool, click on the green starburst shape so that a blue line shows around the edges of the shape. Next, while holding down SHIFT, click on the Alpha text in the center of the button so that a blue box appears around the Alpha text. Now both the green starburst shape, and the Alpha text should be selected; each with a blue outline around them.
While both elements are selected, use the Left Arrow Key on the keyboard to nudge the Green Alpha button to the left until it reaches a spot that you are happy with. I want mine to slightly overlap the edge of the final "t" in "NewText".
- Now that I'm happy with the new text and positioning in my Logo area, it's time to save the new logo. In the Layers panel on the right hand side, turn the Web Layer back on by clicking in the empty box where we had previously clicked on the "eye" icon to hide the Web Layer earlier.
With the Web Layer slices are back on, you should see several green overlays on the layout. Using the Pointer Tool, click on the large green overlay box that is positioned on top of the logo area. When selected, it will have a blue outline with a crosshair in the center and the text logo:PNG will appear in the top left corner.
- With the logo slice selected, right click to bring up the contextual menu and select Export Selected Slice from the menu. The logo will be set to save with the filename logo.png by default. Save the file to a convenient location as we will need it in the next step.
- Now that the logo.png file is ready to go, we will need to replace the existing logo.png from the default install with our new modified logo.png file. The logo file belongs in the templates/rt_rokwebify/images/ folder. Upload or copy your new logo.png image via FTP to the templates/rt_rokwebify/images/ directory and overwrite the existing logo.png file. Now, when you refresh your site, you should see the new logo in place of the original one.
|
