tags which provide more flexibility in templating for Mambo, I am very much inspired by the rounded conner styles of Mambo. This is also a trendy of web interfaces nowadays.

Part 1: Images preparation

The following Photoshop technique employed in this tutorial will create much more elegant looking curves than many other techniques which are currently used on the world wide web. Take a look at the below screenshots, which shows the comparison of Mamboserver images and the new images with the new technique:

How to create the smooth curves images for your boxed style modules ?

{mosgoogle center}

Step 1.
Create a new image of your desired dimension, if you used for left/right modules then the width should be somewhere between 200px and 300px (my image is 383x289). Create a new white layer names "box"

Step 2.
fas Click on the ‘channels’ tab, then at the bottom of the palette select "create new channel" and a new Alpha channel should appear (Picture 2)

Step 3.
A black canvass is created, switch the foreground with the background color if it is white. With white colorselected as the foreground color, select the "Rounded Rectangle Tool (U)" and use it to draw a rectangle (Picture 3) of any size you want Note: we should leave some space around the edges of the canvass).

Step 4.
At the main menu, choose "Filter" > "Blur" > "Gaussian Blur". I choose a value of 4.5 for the blur (Picture 4) but you can use diffrent numbers for this setting, just move the arrow forth and back until you are satisfied with the effect (remember to check the preview box)

{mosgoogle center}

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".

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).

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.

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)

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.

{mosgoogle center}

Step 11.
Choose "Rectangular Marquee Tool (M)" and Ctrl-A to select the whole image, then hold down the ALT key, drag you the mouse vertically then horizontally to deselect parts of the image like in Picture 11A. Then save the go to main menu "Select" > "Save Selection..." with the name "box_divide". This selection will be loaded later on( Picture 11B).

Step 12.
Save you file with a name (box.psd for example) so that we can re-use it in case we want to make different color boxes. After that, using "Save as" command, save box.psd under another name like "bluebox.psd". This step is a kind of backup what we have done so far because in Step 13 we will flatten the whole image for cutting so we can not modify each layer independently

Step 13.
Open "bluebox.psd", go to top menu "Layer" > "Flatten Image". By now, the image will have only onle layer left. Next, choose "Select" > "Load Selection..." and choose to load the "divide_box" selection which we saved in Step 11

Step 14.
Again, choose "Rectangular Marquee Tool (M)", hold down the ALT key and and try to deselect parts of the image so that you have a selection as in Picture 14A. Ctrl-C to copy the selection then Ctrl-N to make a new file name box_t_l (which mean the top left part of the module). By default, Photoshop will remember the dimension of the selection part in clipboard. When the new file is created, Ctrl-V to paste the copied selection into the new file. What you have now is a new image as in Picture 14B.

Step 15.
Now we repeat the similar actions from Step 13 and Step 14 with a small difference, in Step 14 instead of making a top-left selection, we will make the other 3 parts: top-right, bottom-left and bottom right using "Rectangular Marquee Tool (M)" and, one by one, making other 3 new files named: box_t_r.psd, box_b_l.psd and box_b_r.psd and respectively paste those selections into them. Finishing this step, we will have 4 different PSD images (Picture 15).

Step 16.
Well well well, things are now easy. After saving all files, with each of the 4 new files, go to "File" > "Save for Web" or use shortcut "Alt-Shift-Ctrl-S" to export your images, you can choose to export as .GIF or .PNG format as in Picture 16. However, I would recommend .PNG for better quality images.

Step 17.
Supposing we use .PNG format in Step 16, we now have 4 images ( box_t_l.png, box_t_r.png, box_b_l.png and box_b_r.png) which are ready to put them into Mambo. These 4 images will be 4 background parts of Mambo modules. Please note that you can open the "box.psd" we saved in Step 12 and fill the "box" layer with diff rent colors then repeat from Step 13 to 16 to get more images package (4 images) to make extra color for your "rounded mambo modules"

Next week, in "Part 2: Putting corners into Mambo" I will continue with a tutorial on how to put these images into Mambo as you can see on the left side of this page..

{mosgoogle center}

Download the .PSD files of this tutorial
The .PSD files of this tutorial are available to JA Templates Club only and the membership is only $39. Join Now to download .Learn more about what you will get when become our member.
If you are our members, please navigate to our download system for downloading