Making a professional glossy web elements


How you can make a cool, glossy and professional looking web element in adobe photoshop
Photoshop Tutorial thumb picture


1.
Start by creating a rectangle then choose edit -> free transform and rotate it while holding down shift so it looks like in the image below. Then hold down ctrl while clicking the new shape layer to get is selection, and delete the shape layer.

Photoshop Tutorial thumb picture


2.
Create a new layer while still holding the selection from before and make a gradient from top to bottom white to black.
Create a new layer and go to selection -> modify -> contract and contract it by about 20px. Now make a gradient from white to light blue as the one in my image and drag from left to right.

Photoshop Tutorial thumb picture


3.
Now go to selection -> modify -> smooth and smooth it with about 20, then go to selection -> invert and hit delete.
Give both layers a gaussian blur on about 2. filters -> modify -> gaussian blur

Photoshop Tutorial thumb picture


4.
Go to the bottom layers layer style panel, and give it a drop shadow and then a stroke with settings like in the image below.

Photoshop Tutorial thumb picture


5.
Then hold down ctrl and click the top layer to get its selection and grab the elliptical selection tool with the selection mode subtract from selection, drag as in the image below, then go to selection -> modify -> smooth at about 20.

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture


6.
In a new layer fill the selection with white and set its opacity to 65, then from the toolbox panel get the tool smudge and drag with small careful strokes in both corners down then give it a gaussian blur so it looks like in the image below. You may also you the edit -> transform -> wrap tool

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture


7.
Now the basic shape is done, you can put in what ever content you want, I choose a letter, I thought of superman so I put in an S, remember to top the text layer below the reflection layer from before.

Photoshop Tutorial thumb picture


8.
Right click the text layer and rasterize it, give it a gradient, and then give it some layers styles as in the images below.

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture


9.
Now you can drag all the layers except the background into a folder in the layers panel, and make 3 copies of it, put them all in one folder, right click that folder and group to smart object then right click again and rasterize it, then go to edit -> transform -> perspective and drag as in the image below to get some perspective effect to it.

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture
0tutor.com rss feed