Sign up JA Newsletters

We respected your privacy . We don't send ads. We send important update about Joomla and JA
J! Templates arrow Tutorials arrow How to make rounded module like Mamboserver.com (Part 1)
How to make rounded module like Mamboserver.com (Part 1) Print E-mail
Wednesday, 01 June 2005
Article Index
How to make rounded module like Mamboserver.com (Part 1)
Step 1 to 5
Step 5 to 10
Step 11 to 16
Download PSD files

Step 5.
Now choose "Images" > "Adjustments" > "Levels". The ‘preview’ box should be checked so that you can see changes of the images. Move the first arrow on ‘input levels’ toward the center, then move the other two inwards toward the first so that they nearly meet in the middle. Keep looking at the rectangle and experiment with the positions of the arrows until you get a nice clean curve that doesn’t look ‘jagged’ or ‘pixelly’.(Picture 5) Ignore the output levels - leave those as they are. Click "OK".

Picture 5
Picture 5

Step 6.
Select the rectangle by doing a Ctrl+click on the Alpha channel you just created (Click directly on the channel in the palette, not in the canvas) or click the rounded dotted icon while you are in "channels" tap (Picture 6).

Picture 6
Picture 6

Step 7.
Now click on the ‘layers’ tab and then select the "box" layer to bring you back to normal viewing.

Step 8.
As the rectangle still selected (with the dotted lines), create a new layer (optional, so that your shape is more editable). . Click on the "foreground color" icon and change it to your favorite color.(I use #6EC5FF in the sample). After that, choose "Paint Bucket Tool" and fill the rectangle with the foreground color. Hit control+D to deselect the image.

Picture 8
Picture 8

Step 9.
As the layer which you have just filled is being selected (the "box" layer). Go to "Layer" > "Layer Style" > "Drop Shadow..." and choose the setting as in Picture 9A and. Click Ok and now you have a professional looking smooth curved rectangle with light shadow (Picture 9B)

Picture 9A
Picture 9A
Picture 9B
Picture 9B

Step 10.
Now repeat the from Step 2 to Step 8 to create another similar layer with the name "inner_box". You can see that this layer is placed above "box" layer and have smaller size so that the 2 layer matches with each other in size and color ( Picture 10). Be relaxed, take a look at your image, if the white space around your color box is quite big, you can use "Crop Tool (C)" to strip off those space - making the image just big enough for the shadow of the box to be visible.

Picture 10
Picture 10



Last Updated ( Sunday, 11 March 2007 )
 
Next >