Here are two flexible rounded corner box solutions that will work for a variety of different situations and HTML, CSS, and Photoshop skill levels.

For skilled photoshop users, rounded corner box tutorial #1 can be customized quickly in photoshop and requires very little HTML or CSS knowledge and produces a great web 2.0 look.

For skilled HTML and CSS users, rounded corner box tutorial #2 can use different colors easily just by changing the background colors in CSS. It too produces very nice looking boxes

Rounded Corner Boxes #1

Setup

The demo site has a downloadable zip file that contains PSD files as well as PNG and GIF files that will act as background images to produce rounded corner boxes. It also contains CSS files that you will need to upload to your website. The demo page contains an example of the HTML you will use to create the boxes.

Result

I used all of the default HTML and CSS presented by the author. The only change I made was the inline style used on box #2 to decrease the width

Rounded Corner Boxes #2

Setup

This site has 2 files that are needed to produce rounded corner boxes. One will round the top corners and the other will round the bottom corners. It also explains the CSS to be used that will produce the rounded corner boxes.

Result

I used my own HTML and slight modifications to the HTML and CSS presented by the author. The author uses a definition list in his example, which isn’t really too practical for many situations. With a bit of CSS and HTML knowledge, I easily changed the HTML to work within DIV elements. Below is my code to produce the results

HTML

<div class=”mountain”>
<div class=”mountainheader”>Box Color #1</div>
<p>For this example I used the default image size which results in a box that is 250 pixels wide. I like this technique for smaller boxes.</p>
<p>This technique also lets you quickly change colors because you don’t need to create a new graphic – you’re changing the HTML background colors rather than the colors in the graphic. The graphic is made up of a simple GIF that has a <a href=”http://www.psdmaster.com/text-effects/gif-with-transparent-background” target=”_blank”>transparent background</a> with white rounded corners. You’ll want to change the white color to match whatever background color you use on your website.</p>
</div>

<div class=”mountain2″>
<div class=”mountainheader2″>Box Color #2</div>
<p>To change the box color I simply changed the CSS class that defined the background color for the DIV container and the header. This technique allows you to quickly change colors however if you need varying width boxes then you need to create a new photoshop background GIF. This technique also requires a bit more knowledge of CSS since you have to place the top box on one element and the bottom box on another element.</p>
</div>

CSS

.mountainheader, .mountainheader2 {
margin: 0;
padding: 10px;}

.mountain {
background: #0099FF url(/wp-content/themes/psdmaster/images/box_bottom_250.gif) no-repeat bottom left;
width: 250px;
margin: 0 0 20px 20px;
color: #fff;}

.mountainheader {
background: #0000CC url(/wp-content/themes/psdmaster/images/box_top_250.gif) no-repeat top left;
text-align: center;
font-size: 18px;}

.mountain2 {
background: #CCFFCC url(/wp-content/themes/psdmaster/images/box_bottom_250.gif) no-repeat bottom left;
width: 250px;
margin: 0 0 20px 20px;
color: #000;}

.mountainheader2 {
background: #336600 url(/wp-content/themes/psdmaster/images/box_top_250.gif) no-repeat top left;
text-align:center;
font-size:18px;
border-bottom: #fff solid 1px;
color:#fff;}

.mountain p, .mountain2 p {margin: 0; padding: 5px;}

This isn’t a tutorial post. I just wanted to show this awesome fractal image. Click the image to view full size.

It was created with ChaosPro 3.3 Fractal Software. It’s amazing how an image like that can be generated from just a math formula.

In this Photoshop tutorial you will learn an easy way to create an attractive looking Add To Cart button for an e-commerce website. This button is based off the one currently used on Dell.com.Your final add to cart button will look something like the image below.

Step 1

Create a new Photoshop file 135 x 35 with a white background.
Create a new layer for the add to cart button background. Name this layer Button Background.
Zoom in a few times so your canvas is large.
Change the foreground color to black.

Step 2

Select the Ellipse tool.
Start in the upper left corner and hold down shift to draw a perfect circle until the bottom of the circle is at the 33px mark.
Use the select tool and move the circle 1px down and 2px right by pressing the down arrow once and the right arrow twice.

Step 3

Use the marquee tool to select the right half of the circle. Copy and paste into the same layer. Use the selector tool to move the new half circle all the way to the right of the canvas. Use the arrow keys so it’s 1px down and 2px to the left of the far right edge of the canvas.

Step 4

Merge the half circle layer down into the Button Background layer.
Use the rectangle tool and fill in from the top center of the full circle to the lower bottom of the half circle. Use some horizontal guides if needed.

Step 5

Create a new layer, name it Circle and then change the foreground color to white.
Use the ellipse tool to draw a perfect circle on the left side of the button – hold down shift while drawing to get a perfect circle. The easiest way to get a good size circle is to start the circle on the very outer edge of the button – somewhere around the 5px horizontal and 5px vertical mark. Use the select tool and move the circle so it looks good.

Step 6

Create a new layer and name it arrow.
Select the custom shapes tool and choose the thick arrow. This shape should be called arrow 9.
CHange the foreground color to black and draw an arrow inside the circle. Make sure the arrow body is somewhat thick. Use the select tool and your arrow keys to position the arrow so there’s a few pixels of whitespace around the arrow edges.

Step 7

Add a new layer and change the foreground color to white.
Use the text tool and select Georgia font, Regular style, 14px, and sharp. Write Add To Cart. Use the select tool to position the text so there is a bit of whitespace between the white circle and the text.

Step 8

Select the Button Background layer.
Click the gradient tool button and then click the gradient color bar to edit the gradient colors. Your color shades should be very close in color.
Click the bottom left stop slider and then the color button to edit the lightest color. This button uses #88b17b. Click the lower right stop and click the color to edit the darkest color. This button uses #599447.

Step 9

Press CTRL and click the layer thumbnail of the Button Background to select that layer.
Start at the top center of the button background and fill the gradient to the bottom of the button.

Step 10

Select the Arrow layer.
Press CTRL and click the layer thumbnail of the arrow to select that layer.
Start at the top center of the and fill the gradient to the bottom of the arrow.

Save for web as a 256 color GIF and put the add to cart button on your website.

You now have a button that looks just like the add to cart button used on Dell.com. Dell has spent a lot of time and money in usability testing to come up with an Add To Cart button design that boosts their conversion rate and your new button should improve your conversion rate also. Remember to place your button as close to the price as possible and keep it above the fold. The reason green was chosen is because it pops on a white background. The first two things someone should notice on your product page is the product image and your add to cart button. If you want to experiment with other colors, using an orange gradient should work well too.

Step 1: Go to File > New to create a New Document and follow the settings seen in the image below (Ctr+N).

Step 2: Using Paint bucket tool fill the layer with white(#FFFFF).

Step 3: Now in the layer window click Blending option for the layer you create in step 1 as shown in the image below.

Step 4: Blending Options:

Inner Shadow: Use color #309837 in the option Blend mode.

Inner Glow: For structure use some dark color. Color I used was #004741.

Bevel and Emboss: Use any dark color of your choice in the shadow mode option. I used black (#000000).

Contour:

Satin: Use color #60FF6B for Blend mode (Overlay).

Color Overlay: Opacity = 100 % and color code: #8AFF00

Step 5: Now after these steps your image should look like this:

Step 6: Now we are finished working with the background.

Step 7: Now add a text layer to your document. Hit key “T” on your Keyboard or directly select the Text Tool.
Write whatever you feel like. The font I used was : “Fiolex Girls” You can use any font of your own choice.
Color I selected for writing my text was black. ( Hit Key “D” for Default color Preset.)

Step 8: Blending Option: ( Blending Option for the text layer)

Drop Shasow: Use color code #000000 in Blend Mode.

Inner Shadow: Use color code #F9F894 in the Blend Mode.

Inner Glow: User color code #54532D in the Blend Mode for Glow .

Bevel and Emboss: Use color code #E5D266 in Highlight Mode and Color code #5A3015 in Shadow Mode.

Contour:

Texture:

(You can also try other patterns depending on what you like)

Satin: Color code used for Blend Mode #254E46

Color Overlay: Color code used: #FF0000 ( Use only light and bright colors )

You are done with the tutorial, you should have ended up with something similar to this:

Create a new document with the settings below. The image size isn’t important as long as it is bigger than the gif you want to create. You could start with a transparent background instead of a White background, but this method allows you to see your gifs against light and dark backgrounds before saving and it is easy to make the background transparent later.

Use the text tool and select a large font and a blue color. If you do not want to use text you must create a new layer before starting your image. Type out some text and your image should look like the one below.

Your Layer Palette should look like this. A Text layer above the Background.

This step is optional. To give the text a little depth. Go to Layer/Layer Style/Bevel and Emboss, and use the default settings – click OK. Your text should look something like the beveled text shown below. You can also use the Add Layer Style button at the bottom of the Layers Palette, it’s second from the left and id looks like fx in CS3, and a dark circle in earlier versions of Photoshop.

To see how your image looks against a variety of background colors, select the background layer in the Layers Palette. Change the background color in the Tools window to a new background color. Press CTRL + Backspace to apply the new background color. Once you’re satisfied that your image will look good against your website’s background color it’s time to make it transparent.

To make the background transparent, click on the Background eyeball in the Layers Palette so the eye disappears.

Your image should now look like this.

To get rid of the extra transparency around the text select Image/Trim, and use the settings below.

Your image should now look like this after being trimmed, and it’s ready to save.

Use File/Save for the Web. Use a 2-Up view so you can compare the original image with the one you are saving. At the bottom of the 2-Up view you will see the file size. This will vary as you change some of the settings on the right. On the right make sure GIF is selected. Make sure Transparency is checked. Make sure Matte is set to None. You can adjust the number of colors as needed. For this image 16 colors was used. More colors will increase the file size and the image might not look any different. Click Save, and give it a name. This image will look good over any color background on a web site. If you plan to modify your gif at a later time, then do a Save As, and save it as a PSD file so you will still have your Layers and Layer Style when you re-open it.

The key to making good looking transparent background gifs is to use a colored background first so that you can see what your image will look like when placed against your websites background. Changing the background to transparent is as easy as clicking the eyeball to hide the background layer!

Start off by creating a new Photoshop document (Ctrl+N) with the dimensions of 500×296 pixels. Fill this background with a nice smooth color, I used #DEC4AD. You should have this so far:

Then I grabbed the Custom Shape Tool and picked out a nice flowery shape that I though would be good as a faded background. I drew the shape in a dark brown color (#361C04). I located it at the bottom of the picture, and set its opacity to 21%. You should have something similar to this:

Now let’s move on to the main shape that will go at the top of the canvas and above the text. Grab your Custom Shape Tool again and pick out a shape that you like, and that fits a formal country club theme. Below is the shape I used, make sure you center it:

I applied the following effects to it:

Stroke

Gradient Overlay

Drop Shadow

Now that we have the top shape done, let’s move on to the text. I used a font called “Imprint MT Shadow” to type out “Sugarloaf“, size 40, color #361C04. You should have something like this:

After adding the following text effect to it:

Gradient

Now we’re done with the main name text, add “Country Club” right below “Sugarloaf” in the same font but smaller size.

As you can see, in the picture above I have added a custom flower-type shape in front of the big “Sugarloaf” letters, to start off the name.

Then I grabbed a font called “Lucida Bright” and typed “ENTER” in the bottom right part of the images, along with “WEBSITE” in smaller size under it. I also lowered the opacity of the bottom part to around 70-80%.

I did the same thing I did with ENTER and WEBSITE, but on the bottom left side of the image I added “MEMBER” and under it in lower opacity and size “LOGIN“. You are done with this formal splash page, you should end up with something similar to this:

Your end result will look like this:

BEFORE STARTING THIS TUTORIAL YOU WILL HAVE TO DEFINE THE PATTERN THAT YOU WILL BE USING FOR YOUR IMAGE IN BLENDING OPTIONS. TO DO THAT, SAVE ANY ONE OF THE TWO PATTERNS(IMAGES) BELOW AND OPEN IT IN PHOTOSHOP. NOW WITH THE DOCUMENT ACTIVE GO TO FILE > DEFINE PATTERN AND SELECT THE NAME YOU WANT TO GIVE THIS PATTER. (Pretty easy)

1) Click New in th FILE menu and create a new Photoshop document with values as shown in the image below (Ctr+N).

2) Using the Paint bucket tool paint the layer with With Black Color (#000000).

3) Select the Text Tool (Horizontal Type) from the Tool Box window and write the text of your choice on the layer we just created. Try using some Liquid/Fluid kinda font. I used a font named “Croobie“. I used the color White (#FFFFFF).

4) Now coming to the most important part, BLENDING OPTIONS. Right click the text layer you just created in the Layer Window and click Blending Option.

Blending Options:
Drop Shadow: Color used for blend mode: #FFFFDC

Inner Shadow: Color code used for blend mode : #FFFFA1

Outer Glow: Use any color combination for blend mode. Even a combination of blue and yellow looks pretty cool. I used a custom color combination of a couple of light colors.

Inner Glow: Use nearly same color combination as used above for blend mode option.

Satin: Color code used for blend mode: #FFFF64

Gradient Overlay: Details for colors have been shown in the images below. In case you wish to use some other colors, then go for only bright colors.

Gradient Details:

Pattern Overlay: Select the pattern you created in the starting of document.

Here you are done with the tutorial. Save the image in your preferred format. Enjoy.

For buttons and Custom shapes simply copy the Layer Style !

1) Click New in th FILE menu and create a new Photoshop document with values as shown in the image below (Ctr+N).

2) Using the Paint bucket tool paint the layer with with Black Color(#000000).

3) Create another Transparent layer over this layer(Ctrl+Shift+N).

4) With the New Transparent layer selected use Elliptical Marquee tool and draw a button as shown below.

5) Now using the Paint Bucket Tool fill color inside the ellipse you just created. Color I used: #F8FB02. Now your image will look somewhat like this:

6) Now coming to the blending options. Left click the ellipse layer in the Layer Window and click Blending Options.
Inner Shadow: In Blend Mode use following color code: #309837

Inner Glow: In Blend Mode use the color code #004741 for Glow.

Bevel & Emboss: For highlight mode use white color (#FFFFFF) and for Shadow Mode use black(#000000)

Contour:

Satin: Set Blend Mode (Overlay) to color #60FF6B

Color Overlay: Color code used was #8AFF00 and Blend Mode (Normal).

Now you are ready with your cool glassy and smooth button. Save it in the format you prefer.

Result:

For any text with same Effects:
After Step 2) Select the Text Tool (Hit “T” for activating or directly select it from tool Box Window). Add what ever text you feel like with the font of your own choice. Use same Blending options as discussed above or directly copy the Layer Style incase you made the button first from the ellipse layer.

Result:

Using this tutorial you can create various other colorful (Gradient Particular) designs on the same base.1) Go to File > New to create a New Document (Ctr+N) in Photoshop and follow the settings below:

2) Using Paint bucket tool paint the layer with With Black Color. (#000000)3) Select the Text Tool (Horizontal Type) from the Tool Box Window and write the text of your choice on the layer we just created. Try using some Liquid/Fluid kinda font. I used a font named “Bloody” from DAFONT.com. Color to be used for text : White (#FFFFFF).

4) At this stage your document should look like this:

5) Now coming to the Blending Options. Right Click the Text Layer in the Layer Window and click Blending Options.Drop Shadow: Color Code to be used for Blend Mode: #959595

Inner Shadow: Color Code to be used for Blend Mode: #989898

Outer Glow: Color Code used along : #FEFEFE

Inner Glow: Color Code to be used in Blend Mode along with transparent : #9A9A9A

Bevel & Emboss: Color Code to be used for Hightlight Mode : #FFFFFF and for Shadow Mode : #000000

Satin: Color Code used for Blending : #FFFFFF

Color Overlay: Again use same color code (#FFFFFF) with the given values.

At this stage you are ready with your text and background. Your Image should look like this:

6) Now for creating bars. Select the Custom Shape Tool from the Tool Box Window, as shown in the image below.

7) Now select the custom shape shown in the Image below. Hint: Load all the presets for custom shapes first!

Now draw the custom shape selected over the text. You should get something like this :

9) Now coming onto the Blending Options for the custom shape we just made. Slect the layer from the layer window and right click, now click Blending Options.
Blending Options-
Drop Shadow: you can use variety of color of your own choice out here in blend mode to get output suiting your needs.I used Black #000000

Bevel & Emboss: Color Code used for Highlight Mode : #E1F2F2
Color Code used for Shadow Mode: #4E3610

Satin: Color Code used was #000000.

You are now done with this amazing tutorial. Save your image in your preferred format.You can even get these effets after altering a few blending options your own way :

Start off by creating a new Photoshop document (File > New) and make it size 800 x 200. Fill it with a nice Charger blue (#002C74). You should have this so far:

Now let’s go on to add the first football player. I went on Google again and looked for a picture of Ladainian Tomlinson, and found THIS. Again copy and paste it into the document, but this time you have to resize, and cut out to make it fit in nicely. This is what you should have:

Now duplicate the player’s layer, and set its Opacity to about 25%. Go to Filter > Blur > Gaussian Blur and set the Radius to about 3. Move the duplicated layer behind the original layer, and move it to the left a bit, to make it look like so:

Now do the same steps you did with LaDainian Tomlinson with THIS image of Shawne Merriman. You should end up with this:

and then this…

I then went on and added some nice text, I used the font “4990810” which can be downloaded HERE. I used a yellow color (#F1CA2D) for the text, and added the following effects:

Stroke:

Gradient Overlay:

Your final result should look like this: