Cool professional looking colorful web widget


In this Adobe Photoshop tutorial you will see how to make this great stylish and professional looking web widget.
Photoshop Tutorial thumb picture


1.
In an empty layer, make a rectangular selection, then with the elliptical selection tool, having the selection mode called add to selection, selected, drag as in the image below.

Photoshop Tutorial thumb picture


2.
Go to select -> modify -> smooth and smooth the selection about 20.

Photoshop Tutorial thumb picture


3.
Now make a gradient as the one in the image below and drag it in the selection.
(note that my gradient is a standart gradient from the gradient tool box).

Photoshop Tutorial thumb picture


4.
Still having the selection loaded, make a new layer beneath the shape layer from before, then go to select -> modify -> expand and expand the selection about 25 px.

5.
Make a gradient from white to black, then drag it inside the selection horizontal.

Photoshop Tutorial thumb picture


6.
In the layers panel double click the stroke layer to get to the layers styles panel and give it settings as shown below.

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture


7.
Now double click the top shape layer from before to get to its layers styles panel, and give it settings as shown below.
After that, go to filter -> blur -> gaussian blur and blur it about 1.

Photoshop Tutorial thumb picture


8.
While having the top shape layer selected go to filter -> filter gallery and locate that filter called underpainting and set it as shown in the image below.

Photoshop Tutorial thumb picture


9.
With the custom shape tool located the bird and draw it inside the shape in a seperate layer. Make it black and in the layers panel right click and choose rasterize layer.

10.
Double click the bird layer to get to the layers style panel and give it an outer glow as shown in the image below.

Photoshop Tutorial thumb picture


11.
Make a new layer and name it reflection, hold down ctrl and click the stribed colored shape layer to load the selection.
With the elliptical selection tool and selection mode intersect with selection drag as shown below.

Photoshop Tutorial thumb picture


12.
Make a gradient going from white to transparent and drag it inside the selection to make a reflection.

Photoshop Tutorial thumb picture


13.
With the reflection layer selected go to filter -> blur -> gaussian blur and give it a blur at about 4-5 to blur the edges.

Photoshop Tutorial thumb picture

And you are done, you can easily change the color of the background by selecting the layer and go to image -> adjustments -> hue and saturations.

0tutor.com rss feed