How to Create Light effects

If we look at web design today, it’s anything but simple. Sometimes you need that extra Photoshop knowledge in order to achieve the look we need.In this step-by-step tutorial, I’m going to show you how to create sample beauty Light effect for your site.

Step 1

Open New Document, set canvas to 470px wide and 300px high. Fill it with #3b3a3a. Draw in a rectangle about 60px high and 470px wide. Fill it with #eae7e7.

Step 2

Create new layer above and draw in another rectangle about the same dimensions like the previous one. Fill it with #28b9c6.

Step 3

Now add some effects to blue rectangle. Gradient overlay, use settings from the image. Stroke 1px, inside, color #27c4d3.

Step 4

This is what you should get by now.

Step 5

Now, this looks nice but something is missing though. We need to simulate light and shadow even more. We will do this by adding 1px dark and light lines on top and bottom of the shape. For dark line set #000000 and for light line set #6d6d6d as background color.

Step 6

This looks much better don’t you think?

Step 7

Adding light effects. Ctrl (Cmnd) + Click the blue rectangle layer. Go to Select>Modify>Contract and enter 1px. Create a new layer and change mode to Overlay. Choose a 300px Soft Brush,set background color to white and click few times with the edge of the brush near the selection where you want to apply the light effect.

Step 8

Subtle but nice.

Step 9

Do the same for the top part.

Step 10

Overall it looks better, definitely!