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 Paint Shop Pro 7 & Dreamweaver 8.
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.
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.
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.
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.
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).
This completes the stages using Xara X1 apart from the final procedure of exporting the image as a PNG file.
Paint Shop Pro 7 (Anniversary Edition) .
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.
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.
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.
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.
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.
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.
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.
Finally:
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.
Hosted on
All trademarks and copyrighted material are property of their respective owners