sliders

Design a Clean and Stylish Image Slider in Photoshop

by Gul · Nov 26, 2012 · 1 comment

Many websites use image sliders to grab the attention of the visitors instantaneously. Due to their eye catching quality sliders are considered among the best way to display your imagery, products, offers or anything you want to highlight. So, let’s design our very own web slider from scratch today. In this way, you’ll be able to design a customizable image slider according to your current requirements.

In this tutorial, I’ll walk you through the process of designing a clean and stylish web slider in Photoshop. We’ll use various shape tools, filters and different layer styling techniques to achieve the final result. Hope you will learn some handy tips along the way. So, let’s get started!

Resources:

Final result:

image slider
Step 1
Create a new document in Photoshop with 1050px width and 500px height.

Image Slider

Step 2
First of all, we’ll make the frame of the slider. Set #dedede as your foreground color and select the rectangle tool. Put the value of 960px for width and 400px for height in the top properties bar to draw a rectangle as shown below. This would be the actual size of our slider.

Image Slider

Step 3
Double-click on the frame layer to open the layer style window and apply the given settings for stroke.

Image Slider

Step 4
Next, set #b22626 as your foreground color and draw another rectangle inside the frame with 940px width and 380px height.

Image Slider

Step 5
Double-click on this new rectangle layer and apply the given settings for stroke and pattern overlay. We’ll use diagonal stripes pattern here. You can download it from the resources of this tutorial.

Image Slider

Image Slider

Step 6
Draw another rectangle with 590px width and 360px height. You can use any color here. This is the space where your slide would appear.

Image Slider

Step 7
Load the image file in Photoshop, copy and paste it in your document. Resize it using free transform tool (Ctrl+ “T”), according to the size of the slide we created in step 6.

Image Slider

Step 8
Next, we’ll add the title. I’ve used #f6f6f6 color and “Calibri” font for this.

Image Slider

Apply the following settings for drop shadow on the text.

Image Slider

Step 9
Add the description text below the title. I’ve used same color as used for the title and “Arial” font here. Apply the same settings for drop shadow as used for the title text.

Image Slider
Step 10
Next, we’ll make a button below the text. Set #2f2f2f as the foreground color and draw a rectangle as below.

Image Slider
Step 11
Apply the following settings for stroke and drop shadow on the button rectangle.

Image Slider

Image Slider

Step 12
Add text over the button. I’ve used “Calibri” font, 51pt size here.

Image Slider

Step 13
Next, we’ll make slider controls. Draw a rectangle as shown below in #c2c2c2 color and position it in the center of the left border of slider.

Image Slider

Step 14
Now to make shadow of the rectangle, duplicate it by going to “Layer”> “Duplicate Layer”. Change the color of duplicated rectangle to pure black and go to “Filter”> “Blur”> “Gaussian Blur”. Use 3px value for Gaussian blur. You need to rasterize the layer before applying this filter.

Image Slider

Place this layer below the original rectangle; drag it a bit towards the right. Now select the portion of the shadow that is outside the slider frame using “rectangular marquee tool” and go to “Edit”> “Clear” to get rid of it.

Image Slider

Step 15
Now draw the arrowheads over the rectangle in #333333 color using pen tool (Tool mode: Shape).

Image Slider

Step 16
To finish the left slider control, draw a small rounded rectangle along the left border of rectangle as shown below. After that, go to “Filter”> “Blur”> “Motion Blur”, keep 20px distance and 90⁰ angle for this. Now select inner half of it using “rectangular marquee tool” and go to “Edit”> “Clear”.

Image Slider

Step 17
Collect all the layers forming the left sided slider control in a group, duplicate it and flip it horizontally by going to “Edit”> “Transform”> “Flip Horizontal”.  Position it over the right border of the slider.

Image Slider

Step 18
Make the navigation by creating a rectangle and its shadows in the same way as we made for the slider controls.

Image Slider

Step 19
Draw few ellipses over the navigation and apply the following settings for inner shadow on them.

Image Slider

Step 20
Now to make a ribbon draw the shape as below using pen tool (Tool mode: Shape) and #333333 color.

Image Slider

Now draw two triangular shapes as shown below in pure black color to complete the ribbon. Make sure to draw these triangles just above the background layer.

Image Slider

Step 21
Make the shadow for the ribbon in the same way as explained in step14, reduce the opacity of this layer to 20% and add some text over the ribbon.

Image Slider
Step 22
We are almost done. Now we’ll create shadow of the slider. Draw a rectangle as below.

Image Slider

Now go to “Edit”> “Transform”> “Distort”. Use this tool to bring the top corners of the rectangle closer.

Image Slider

Step 23
Now apply the motion blur filter on the shadow layer and reduce its opacity to 65%.

Image Slider
Step 24
Lastly, we’ll make subtle shadows under the right and left borders of the slider. Draw an ellipse.

Image Slider

Place it just above the background layer and apply 3px Gaussian blur filter on it. After that, reduce the opacity of this layer to 50%. Duplicate and flip it horizontally to make shadow under the right border.

Image Slider

Image Slider

That’s it guys. Hope you enjoyed the tutorial and learned something useful. I’ll be waiting for your feedback.

Source File and Download

Download Source

 

Design a Clean and Stylish Image Slider in Photoshop , 5.0 out of 5 based on 1 rating

About the author

Gul

A Web and Graphic designer and epic tutorial writer. She is also an active blogger, providing valuable and exciting information in her own witty style. You can also catch her on her wicked Blog Websoulz. Cheers

1 Comment to “Design a Clean and Stylish Image Slider in Photoshop”

  • wangfeng says:

    good

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    June 22nd, 2013 at 3:12 am · Reply

Post a comment

Pageviews: 9940 · Back to Top