adv banner
Photoshop  Home Photoshop Web Layout Capsule
rss

Capsule

Author: Havenfx.com More by this author


You might have seen cool navigation styles and one that may have caught your eye is the capsule style bar. Learn how to make while step-by-step instructions proceed...

You can download the gradients needed for the tutorial by clicking the download links right below.

Silver Gradient

Blue Gradient

1) Open up a new image, about 300x300, and whip out your Rounded Rectangle Shape Tool. Before making your shape, apply these settings in the tool options menu.



2) After drawing your rectangle, you should have something like the image below and also a new layer in the Layers Palette (Windows>Layers):



3) Alright, so far so good. Now, make a new layer by hitting Shift+Ctrl+N or Layers>New>New Layer and name it "big capsule". Now, select the Pen Tool and right-click anywhere on your shape and a menu will come up. Select Make Selection and use the default settings and click OK.



4) Now, go to Selection>Modify>Expand and enter the number 2 in the box. You should have a bigger selection than your shape and on the new layer, fill in the selection with any color because it doesn't matter. I chose black.

5) Open up the Layers Palette (Windows>Layers) and click on the little f. Make sure your big capsule layer is selected. Go to Gradient Overlay and apply the silver gradient as seen in the picture below. I assume you have download the gradients posted above.



6) Get your Elliptical Selection Tool and holding SHIFT, make a perfect circle across the bigger capsule. You want the selection exactly in the middle of the capsule to ensure equal sides.



7) With the big capsule layer still selected, hit delete to get rid of some of the big capsule.


8) Here's where it might get tricky so pay attention. Duplicate the "big capsule" layer and get any sletion tool. On one of the layers, select one side of the capsule and hit delete. On the other layer, select the other side and hit delete. Now you should have one part of the capsule on two seperate layers. Now, on the layer with the left side of the capsule, go to the Layer Styles, select Drop Shadow and apply these settings:



9) On the layer with the right side of the capsule, select Drop Shadow, apply the same settings as above except change the angle to 0 degrees

10) We are done with the outer capsule and now, we only have two things to do to the inner capsule. Select the small capsule (should be a shape layer) and go to the Layer Styles (little f). Click on Gradient Overlay. This time, apply the blue gradient as downloaded from above. These settings should be entered:



11) Last step, duplicate the small capsule shape Layer. We'll need to Rasterize it so go to Layers>Rasterize>Layer. Now, we are going to give sort of a glow to the capsule. So go to Filter>Blur>Gaussian Blur and apply the options below. Make sure this rasterize layer is below the actual shape layer in the Layer Palette. You can drag-and-drop to move it down.



With maybe a little more work in adding the text you may get something like this:

Capsule Tutorial: Final Result



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Capsule"