Design a 3D image slider in Photoshop

You’ve probably seen it all over the place, those huge image sliders on top of web pages showing off the best works they have to offer.
It’s used a lot because it works of course.
This means you should really try to make one yourself, we will teach you how to do this.

Result Preview

Step1

Download the 960 Grid System from http://960.gs/
This system is used a lot in web design, because it’s faster than making your own grid of course, but also because it contains universal sizes and proportions. This means you’re always safe when using this template and won’t end up with a design that’s too big for your screen.
Also those grids are made with the perfect dimensions for aesthetic purposes.
In the templates folder you’ll find some photoshop files, open the 24 column grid.
Change the document canvas size to 1200 px width and 600 px height.
You can hide the grid for now by clicking on the eye next to the Grid folder.

Step2

Create a new layer and fill it completely with the color #dfdfdf

Step3

Duplicate this layer and take the Move Tool (V)
Make sure the top layer is selected and pick one of the corner nobs of the frame. You may need to zoom out a little in order to see the corner nobs.

Now Hold down Shift and Alt and drag inwards with your mouse until you get something close to this proportion (from the stroked/shadowed rectangle to the nobs. Ingore the background):

Change the color of this new smaller frame to #d0d0d0

Step4

Pick the Rounded Rectangle Tool and set the Radius to 10 (can be done at the top of your window).
Now draw a horizontal bar like this (that’s 30 pixels high)
Press ctrl/cmd+ ; to show the guides (or turn them on via the menu) and make the sides of the bar hit these guides:

Add the following Layer Styles:

What it should look like:

Step5

Duplicate the bar we just created (ctrl+j) and pick the Rectangular Marquee Tool (M)
Select everything from the left to the right except the last part, so only the pink part in the next image remains:

Now pick the eraser tool and click once, a dialog box will open and just hit OK, then press Backspace to delete all the remaining.
Add these Layer Styles:
(The gradient is just the same colors as the bar, but upside down, so you might want to copy & paste the layer style)
(Stroke color is #b8b8b8)

Step6

Duplicate this small button and rotate it 180°, then move it into place at the left side. That way you should create two identical ends on the bar.

Step7

We’re going to add some arrows on those buttons.
Take the Custom Shape Tool (hidden beneath the Rectangle Tool) and pick the sharp triangle. Set your color at: #a9a9a9

Draw a really tiny rectangle on top of the button (zoom in for better accuracy).
Rotate it 90° while holding shift and then duplicate it with ctrl/cmd+J, then move it next to the other with the arrow keys on your keyboard.
Select both layers with the arrows while holding ctrl/cmd (so the original and the duplicated one) and press cmd/ctrl + E.
Now duplicate this merged layer again and rotate it 180° in order to place it at the other side of the bar.
This will result in:

Step8

Pick the Ellipse Tool and draw a circle (while holding Shift) on top of the bar.
Make it so that top and bottom of the circle overlap the bar a little.

Step9

Add these Layer Styles:
(Gradient goes from #e7e7e7 to #f2f2f2)
(Stroke color is #e9e9e9)

Result so far:

Step10

At this point we need to use the grid again. You don’t need to show the layer folder, but just show the guides again.
Take the text tool and keep it on Arial but with a pt size of 14.
Work with 2 digits to make everything look better and place them in between the guides on top of the bar like shown here:

The 05 gets on top of the circle, you will probably need to adjust the circle’s position.
05 is written with 18pt size.

Step11

The images we would display are your choice. I searched for concept vehicles.
Make sure your image is big enough to cover the enitre frame. Always resize an image with a corner nob while holding shift to keep its proportions. Also avoid enlarging original images, only shrink if needed (that’s just for the picture quality of course).
CMD/ctrl + click on the thumbnail of the layer with the frame to turn it into a selection. Make sure your image layer is still selected and press cmd/ctrl+I to invert the selection. Then erase the remainings.
Next to the bar you can put a coresponding logo or name of the author.

Step12

We’re now at the final step.
Go back to the first layer we created layer. In between the background layer we made manually (so not the standard background layer) and the big rectangle on top of it, we need to place a shadow.
Pick the Ellipse Tool and set the color to black.
Draw a long and flat ellipse at the bottom of the rectangle.
(If it doesn’t get black, make sure you disabled all styles at the top settings bar).
Now add a Gaussian Blur with a radius of 9 to 10px.

Set the opacity to 50%. And look at what you prefer, it might sometimes fit better if you move the shadow down a little bit…

Result

That’s it, you’re finished! This is a clean layout using all sorts of whites and greys. You can always change the colors with the same proportions as we used here.But keep in mind that a neutral color like black,grey and white fits with all pictures.
It’s really useful to remember and practice this style and those effects because they’re used so often in current web design. It will become a huge time saver when you mastered this.