Photoshop Tutorials

---

Step 10 : Apply Gradient to the Background

Create a light grey to white gradient.

Create a new layer below the header and apply the gradient.

---

Step 11 : Add Slider Rotation Controls

Create rotation controls.

Apply Inner Shadow to one control to indicate the current active item in the slider.

---

Step 12 : Create Content Divider

Select the Pencil Tool and draw 1 pixel line. Pick light gray (#aaaaaa).

Hide the edges smoothly using gradient mask.

---

Step 13 : Adding the Main Content

It is time to get into the actual content part. This is a 3 column layout. We need to create 3 equal columns with some padding between them. I did a simple calculation and divided the available space into 3 equal width boxes with 25 pixels padding between them.

Add guide lines to the boxes. Then remove the boxes. And these are the columns.

Add some featured services. Drop in the icons from the Function icon set. Maintain distance between objects uniformally.

Let’s create a simple “Read More” button. Select the Rounded Rectangle Tool to draw the shape. Make sure it is a Shape Layer.

Apply Gradient Overlay and Stroke to the button.

Duplicate the button.

We will add some recent work items. I drew three image holder boxes and applied 3 pixel stroke .

Clip the images to the boxes.

I created shadow like we did earlier and placed it below the boxes.

Add some project description.

Let’s create the Twitter Feed. Drop in the Twitter bird icon.

Added a Twitter announcement.

Create a button for More Tweets.

Apply these styles.

Add text.

---

Step 14 : Creating Footer and Finishing

Make a selection for the footer and fill it with a grey value.

Apply Color Overlay.

Finally add footer navigation and copyright info. And that concludes the session. Take a look at the final image.

---

Preview of Final Results

Header image provided by DepositPhoto

---

Authors Comment