The SZ Button.


Larger view of the black S created in Xara X1.
Larger view of the black Z created in Xara X1.
Larger view of the gold S created in Xara X1.
Larger view of the red Z created in Xara X1.
Larger view of the gold S after applying the Bevel tool.
Larger view of the red Z after applying the Bevel tool.
Larger view of the minus 20° rotated S.
Larger view of the plus 14° rotated Z.
Larger view of the center aligned & merged SZ.
Larger view of the merged SZ with drop shadow.
Larger view of the SZ on a slightly larger Canvas.

Created using Xara X1 Xara X1 Paint Shop Pro 7 Paint Shop Pro 7 & Dreamweaver 8.

Text Tool

Step 1:
In Xara X1 use the Text tool to draw the S and the Z characters using the default text colour (black) and the "Microdot" True Type Text style, use quite a large font size (96pt) or bigger to make it easier to manipulate the image later.
Note that the following information refers to a size of 96 pixels so compensations will need to be made if you use a bigger size.

Click for 200% image Click for 200% image
Fill Tool

Step 2:
Using the Fill tool select a colour from the colour palette and drag it over the desired letter, in this instance I chose orange for the S and red for the.
You can also use the Arrow tool to do this as long as the letter is selected first.

Click for 200% image Click for 200% image
Bevel Tool

Step 3:
Use the Bevel tool with the following attributes set in the option boxes:- Flat Style Bevel, Light Angle 90º, Light Elevation 32º, Inner Bevel 100%, Bevel Joint. This gives the lettering a "chiseled" look with smoothed corners and a light source cast downwards.

Click for 200% image Click for 200% image
Arrow Tool

Step 4:
Use the Arrow tool to select the desired letter and choose a rotation value of, minus 20° for the S, and plus 14° for the Z to turn them in opposite directions. This is to aid in alignment in further procedures and helps to create an overlay contrast between the two elements.

Click for 200% image
Click for 200% image
Shadow Tool

Step 5:
Select both of the letter objects and using the Alignment option from the drop down menu, select "Centre" for vertical and horizontal planes. Keeping the two elements selected group them together in the Alignment options and then apply a "drop shadow" effect using the Drop Shadow tool with shadow attributes of 5 pixels right (plus), 5 pixels down (minus).

Click for 200% image Click for 200% image

Xara X1 This completes the stages using Xara X1 apart from the final procedure of exporting the image as a PNG file. Xara X1


Paint Shop Pro 7 Paint Shop Pro 7 (Anniversary Edition) Paint Shop Pro 7.

Canvas Size Tool

Step 6:
The first move using Paint Shop Pro is to square up the image so that it holds a ratio of 1:1 using the Canvas Size tool.
In the dialogue box increase the canvas size to 200 pixels by 200 pixels selecting white as the background colour from the colour palette, make sure the new canvas is centred about the image.

Click for 200% image  
Resize Tool

Step 7:
Resize the image to the desired button size, in this particular instance 60 pixels by 60 pixels. This was achieved by simple use of the Resize tool. Selecting to change the ratio by pixels and enter a value of 60 in the size boxes. Use "smart size" as the resize type and maintain a ratio of 1:1.

White SZ Button 60 x 60  
Colour Replacer Tool

Step 8:
Using the Colour Replace tool create two images with contrasting background colours, (pink and grey) these are going to be used later for the main button elements that when clicked on will give the impression of a button being pushed down so the colours need to be obviously different.

Pink SZ Button Grey SZ Button
Buttonise Tool

Step 9:
Use the Buttonise tool to create a beveled looking edge. As a general rule I use 10% of the button size for the buttonise edge with a transparency setting of 50% so for this image which is 60 pixels by 60 pixels I buttonised all edges at 6 pixels wide. Repeat the process with a darker colour at 3 pixels border with 100% transparency to create a second image.

Pink SZ Button Buttonised Pink SZ Button With Orange Border
Selection Tool

Step 10:
Select the grey button (created in step 8) and Buttonise it to create a beveled edge set at 6 pixels, this time use a solid edge set at 100% in the options box.
Select the whole image and rotate it 180º so that the dark edge is to the top and left.

Grey SZ Button Buttonised Grey SZ Button Rotated
Rotate Tool

Step 11:
Select the centre part of the image using the Square Selection tool and rotate it back 180º, deselect the centre then select all but the dark edge left and top. Move this selection down by 4 pixels and across to the right by 5 pixels this is to give the impression of motion when the finished button is clicked.

Grey SZ Button Centre Rotated Grey SZ Button Offset Centre
Clone Tool

Step 12:
Use the clone tool to trim in the edges of the outline corners to give a "sunken" look to the button.
Select a tool that is square and 6 pixels in size, select a point next to the area to be cloned and click in the corners, finally create a dark grey border 1 pixel wide to the right and to the bottom to define the button edge.

Grey SZ Button  
Navigation Tool

There are now three key images available for creating a "Mouse Over & Click" button that can be created using the navigation tool bar in the images section in Dreamweaver MX2004 or Dreamweaver 8.

Pink SZ Button Pink SZ Button, Orange Border Grey SZ Button

Hosted on

All trademarks and copyrighted material are property of their respective owners