Joomlashack

How to Create a Custom Module Graphic

This tutorial will show you how to make custom image based modules in Fireworks using masking techniques aimed at the Luhs template design. Navigate to your downloaded package to the Graphic Source Files folder and open custom_module_graphic.png in Fireworks.

If you would like to see a video of this tutorial as well you can download the QuickTime movie here.
How to Create a Custom Module Graphic
Small 640x480 (1.5 mb)
Large H.264 1080 (13.5 mb)

You will see a screen similar to this one.
(click for larger)

How to Create a Custom Module Graphic

How to Create a Custom Module Graphic

Choose the SubSelect tool.

How to Create a Custom Module Graphic

Draw a box over the shape just large enough to select the corner nodes as shown below.

How to Create a Custom Module Graphic

The corner nodes are sub-selected.

How to Create a Custom Module Graphic

Hold down Shift to keep the mouse straight or use the arrow keys to resize the shape vertically.

How to Create a Custom Module Graphic

The shape is resized.

How to Create a Custom Module Graphic

Choose the select tool.

How to Create a Custom Module Graphic

and select the top shape.

How to Create a Custom Module Graphic

Choose Edit > Cut.
The shape is loaded onto the clipboard.

How to Create a Custom Module Graphic

Select the image and resize it. (Cmd+T)
You can temporarily lower the opacity in the layers palette to see the underlying shape.

How to Create a Custom Module Graphic

Once resized, choose Modify > Mask > Paste as Mask.

How to Create a Custom Module Graphic

You can return the opacity back up.

Tutorial Image

Use the text tool to add some graphic text to the image.

Image 14

Select all by choosing (Cmd+A) , then right click the graphic and choose "Insert Rectangular Slice"

Whwn the popup appears asking you to choose Single or Multiple slices, choose "Single".

Image 15

How to Create a Custom Module Graphic

Name the slice in the properties palette to "custom_mod"
*If not shown choose Window > Properties to show the palette.

The last step is to export the image to a place on your local computer by choosing File > Export.

Choose "Images Only" and make sure the name of the file is "custom_mod.png"

To convert to a module just log in to your Joomla admin console and choose New.

Paste the code below into the editor ( in html edit mode) with these settings and save.
Show Title = No
Published = Yes

<div align="center"><img style="margin: 0px;" width="194" height="173" src="http://yourdomain.com/path/to/images/stories/custom_mod.png" alt="Alt Description" title="My Description" /></div>

Important. Modules in the Lush Template right hand position must be no larger than 194px wide!

Since 2005, Joomlashack has been a leading supplier of free and commercial Joomla templates, Joomla extensions, and Joomla Training.
Copyright 2005-2016 Open Source Training LLC
Joomlashack.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.