Design a Horizontal Accordion Slider (Plus an Exclusive Freebie!)

Today we’re going to walk through the creation of your very own horizontal accordion together with an exclusive bonus – a light version of the very same accordion we’ll be creating today.

Accordion’s are great for showing off your favourite images, posts, or perhaps compacting a product feature tour. If you’re going to add a little pizazz to your accordion, you should take a look at SlideDeck – mega simple to work with.

Note: Accordion Layer Setup

During the course of this tutorial there will be references to different layers and layer groups – this can be a little confusing. As a reference, below is an image of the final layer groups used just in case you get a little stuck :)

Step 1 Creating the Background

Open up Adobe Photoshop and create a new document with the following settings: 1100×490 pixels, 72ppi, and a white background.

Using the Rectangle Tool (U), create a rectangle that covers the entire surface area of the canvas. Fill this rectangle with a light grey colour (#f2f2f2) and apply a noise filter (Filter > Noise > Add Noise) with the following settings:

• Amount: 1%
• Distribution: Uniform
• Monochromatic: Yes

Place this layer in it’s own layer group called “bg”.

Step 2 Creating the Accordion Frame

Create a new layer group called “accordion” and within this group yet another group called “frame”. This is where all the layers making up the frame will live.

Select the Rounded Rectangle Tool (U) and ensure that you have the following settings

• Drawing Mode: Shape Layers
• Border Radius: 4px
• Fill Colour: #2d2d2d

Step 3

Using guides, mark out an area of 940px x 360px centrally on the canvas. With the Rounded Rectangle Tool still selected, draw a rectangle within the guides you just created. For accuracy you should enable “Snap to Guides” which can be found in View > Snap To > Guides.

Step 4

Convert the rectangle to a Smart Object by going to “Layer > Smart Objects > Convert to Smart Objects” or by right-clicking on the layer in the layers palette and selecting “Covert to Smart Object”.

Apply a drop shadow to the Smart Object and also a noise filter with the same settings as before.

Why Smart Objects? Smart Objects allow us to apply filters and styles without rasterising the original artwork. This comes in particularly handy when you want to edit part of the design later.

Step 5

Mark out another area 10px inside the rectangle you have already created – this should be 920px x 340px in size. Draw another rounded rectangle within these guides and convert to Smart Object. Will will assume that there is a light source directly above the accordion shining down. Apply the following layer styles.

You should end up with the following result:

Step 6 Creating the Spines

We’re now done with the frame and can make a start on the spines. Create a new layer set called spine and mark out an area 50px x 330px set 5px inside the frame backing. Draw a rounded rectangle inside these guides using #313131 as the fill colour. You should end up with the following (zoomed)

Step 7

Convert this rectangle to a Smart Object, apply a noise filter and the following layer styles.

You should be left with the following:

Step 8

Create yet another rounded rectangle on top of the spine you just created, fill this with white. With the white rectangle selected in the layers palette, click the “Add Vector Mask” icon to add a mask.

Keeping the rectangle layer selected, select the Gradient Tool (G) ensuring that the gradient selected is “Foreground to Transparent” and your foreground colour is set to black. Click and drag a vertical line down the length of the spine. Once you have created your gradient set the entire layer to 5% opacity.

Step 9

Using the Horizontal Type Tool (T) type out your required slide label in a light grey colour, I’ve used #dddddd. Using the Transform Tool (CMD/CTRL+T) rotate the text holding down the shift key. Align the text to the right using the Paragraph palette and position it at the top of the spine. Apply a drop shadow.

Step 10

Using the Type Tool once again, type out the spine number using a dark colour, I have used #191919. Position the number at the bottom of the spine and apply another drop shadow.

Step 11

Now we have finished creating a spine we can simply duplicate the entire layer set three times creating four in total. Position the three duplicated spines alongside the original with 5px margins inbetween.

Step 12

To create a hover state for the spines, open up one of the duplicated spine layer groups and find the layer we applied a gradient to earlier. This should be set to 5% opacity, change it to 10%

Step 13 Creating the Content Area

In the void that you are left with, mark out an area with your guides 5px from any surrounding element. This should be 690px x 330px is size. Using a light colour, draw a rounded rectangle within these guides.

Step 14

You can fill this area with whatever content you require however I’m going to fill this area with a screenshot. Paste the screenshot into the document, position as required and disregard for the time being. As the image is too large for the content area we need to mask it off. In the layers palette, hold down CMD/CTRL and click the vector mask of the rectangle we created earlier – this will create a selection of the shape.

Step 15

Select the screenshot layer in the layers palette and while the marching ants are still on your screen, click the “Add to Vector Mask” icon – this will mask off the unwanted areas.

Step 16 Creating the Shadow

The last step is to create the shadow that sits under the accordion. Create a new layer set called shadow and using the Ellipse Tool (U) create a shape similar to below.

Step 17

Apply a Gaussian Blur (Filter > Blur > Gaussian Blur) with a radius of around 10px. The exact amount is not important and it is often better to judge “by eye”. Change the opacity of the layer to 30% and position the shadow under the accordion.

The trick here is not to generate the shadow with a single layer but with multiple layers of varying sizes and opacity. Duplicate the shadow we just created, use the Transform Tool to make it slightly smaller in width and height and change the opacity to 80%. Repeat this process with the final shadow being just a few pixels wider than the accordion base.

Finished!

That’s it, we’re done! now you can fill each content area with your required content and add a stylish looking accordion to your latest design!

Bonus File: Horizontal Accordion “Light”

With a few changes to fill colours and layer styles you can begin to create some interesting alternatives. Here I’ve created a “light” version of the accordion within just a few minutes to demonstrate the possibilities.

Remember the Smart Objects? They really come into play here as you can still edit the original artwork (to change colours) while keeping all filters, such as noise, applied to the shape. If we had rasterised all the layers when creating the original accordion, we would have to redraw all the shapes when creating new styles. No thanks!