Image sliders are quite popular in the world of web designing. It’s a great way to showcase your imagery, and it captures the attention of your visitors instantaneously. So, today I’ll walk you through the process of designing a stylish web slider in Photoshop. We’ll use the pen tool, different shape tools, and layer styling techniques for the creation of this slider. Let’s get started!
Before we start, let’s look ahead at our end result:
Create a new document in Photoshop with an 1100px width and a 650px height.
First of all, we’ll make the frame for the slider. Set #06d0fb as your foreground color and select the rectangle tool to draw a rectangle with a 960px width and a 300px height.
Double-click on the rectangle layer to open the “Layer Style” window. Apply the following layer style settings.
Create another rectangle with a 926px width and a 270px height. Use color #08a2c3 for this rectangle.
Apply the following layer style settings for this rectangle.
Create a third rectangle with a 912px width and a 252px height. Use color #222222 to fill the rectangle.
Open the image file in Photoshop, and drag it to the slider document. Resize and position it at the top of the layers using the free transform tool (Ctrl + “T”).
Double-click on the image layer and use the following settings to apply a stroke.
Next, we’ll create a button. To do so, set #e32121 as your foreground color and draw a rounded rectangle using the rounded rectangle tool.
Apply the following layer style settings on the layer containing your red button.
Now we’ll add some text, which we want over the button. Use the following settings for to apply a drop shadow to this text.
Right-click on this red button text layer and select the option of “Copy Layer Style.” Then, right-click on the “Description” text layer and select “Paste Layer Style” to apply the same drop shadow settings.
Next, we’ll add slider controls. For that, select the pen tool to draw the shape shown below. Make sure to select the “Shape” setting in the properties bar. Use color #c1c1c1 to draw the shape.
Now, copy the layer style of the red button layer and paste it onto this newly-drawn shape layer to get the effect shown below.
Now, let’s make the backside of this new shape. Draw two rounded rectangles using color #2e2e2e, and drag them below the rest of the layers. Arrange them at an angle—as shown below—using the free transform tool (Ctrl + “T”).
Select the ellipse tool with “Shape” tool mode to draw an ellipse at top of your layers layers. Use #313131 as a fill color and #c1c1c1 for a 2px stroke.
Apply the following settings for drop shadow.
Now, set #57fff5 as your foreground color and draw an arrowhead using the pen tool.
Collect the layers forming the frontmost parts of slider control into a group, and collect the backside of your slider controls into a separate group. Now, duplicate both these groups and flip them horizontally by going to “Edit” > “Transform” > “Flip Horizontal” and arranging them on the right side of slider. The result is shown below.
Next, to make slider navigation, draw the shape shown below using the pen tool. Use color #d1d1d1.
Now, copy the layer style of the red button layer and paste it on this new navigation layer. To make its backside portion, draw two rectangles on a new layer just above the background and arrange them at an angle, as shown below.
To complete the navigation, make four ellipses of equal size and arrange them as shown below.
Add an inner shadow to these four ellipses with the following values.
The basic layout of our slider is almost ready. Now, we’ll add few more items to make it more interesting. Draw the triangular shape shown below and paste the red button layer style onto it.
Now, draw two triangles in pitch black (#000000) to complete the corner cover.
Now, make a ribbon for the top-right corner, as shown below.
Add some text over the ribbon, and paste the drop shadow settings from the red button text layer onto the ribbon layer.
Lastly, we’ll make shadow for the entire slider. Make a rectangle in pure black (#000000) just above the background layer and go to “Edit” > “Transform” > “Distort.” Use it to make rectangle shape like the one below.
Now, right-click on the shadow layer and select the option of “Rasterize Layer,” and go to “Filter” > “Blur” > “Gaussian Blur.” Use the following values for the Gaussian blur, and reduce the opacity of this shadow layer to 40% to get the desired effect.
That’s it guys. I hope you like it and learned something useful. Let me know what you think!
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Researching UX: Analytics
Designing UX: Forms
Jump Start Sketch
Jump Start Sketch
- 1 Shiny, R and HTML: Merging Data Science and Web Development
- 2 Type Nugget: Good Typography is About Finding the Right Playground
- 3 Adobe XD Tutorial: A Pain-free Way to Import Assets
- 4 CSS Animation, and Creating Art with Code, with Rachel Smith
- 5 Review: Is the New and Improved Google Fonts Better?