How to Create Accordion Design in Photoshop

On 16 Feb, 2012 By With 3 Comments

Accordion has been popularly used on navigation, because you can store a lot of links and it only consumes so little space. I think that is one of the strength of accordion,  and others are beginning to use as content sliders just like slidedeck.

Today we will learn how to create accordion design using Photoshop, the techniques and tools that we are going to use are fairly easy. What I am aiming to accomplish is to share some awesome methods for creating web design elements in this sort of style and theme.

You can download the PSD at the bottom of this tutorial!

Accordion Design

accordion How to Create Accordion Design in Photoshop

Let’s Begin

1 canvas How to Create Accordion Design in Photoshop

Open you Photoshop, follow the size for the canvas.

2 roundedbody How to Create Accordion Design in Photoshop

Grab your Rounded Rectangular Tool (U) and set the radius to 3px, draw the same shape as above. Name this layer as body.

3 roundedbody dropshadow How to Create Accordion Design in Photoshop

On body layer, right click > Blending Options > Drop Shadow and set the Blend Mode to Normal, color #908f8f and size to 4.

4 roundedbody stroke How to Create Accordion Design in Photoshop

Next is Stroke, color is set to #d1d0ce and size is 1px.

5 header How to Create Accordion Design in Photoshop

Grab your Rounded Rectangular Tool (U) again and draw a header like shape, we will name this as header.

6 header dropshadow How to Create Accordion Design in Photoshop

In Drop Shadow, Blend Mode is normal and color is #b5b5b5 and angle is set to 90, distance and size is 1px.

7 header innershadow How to Create Accordion Design in Photoshop

Inner Shadow, same as Drop Shadow’s Blend Mode. Color is #ffffff and size is 3px.

8 header gradient colors How to Create Accordion Design in Photoshop

In Gradient Color Settings, copy the colors above and hit Ok.

9 gradient settings How to Create Accordion Design in Photoshop

This is the Gradient Settings, check the reverse let’s move on.

10 header stroke How to Create Accordion Design in Photoshop

In Stroke, size is set to 1px and color is #bd6c04

11 header semi complete How to Create Accordion Design in Photoshop

Our header output should be the same, now we will create a sunken line. Create a new layer and name it line-light, grab Single Column Marquee Tool (M) and draw a line on the header.

Next is to select the color #ffffff and use the brush to color the line, create a new layer again (name line-dark) and this time use the color #bd6c04. After that, deselect (CTRL + D) and use your arrow keys, hit left 1 time this will move the dark layer 1px to the left.

12 header line How to Create Accordion Design in Photoshop

Click on the line layers and CTRL + Click on header layer, press CTRL + SHIFT + I and hit Delete, do this on the other line layer. This will delete the excess line in header layer.

13 header arrow1 How to Create Accordion Design in Photoshop

On your Custom Shape Tool, select the arrow shape and put it in the right side of the header.

14 arrow settings How to Create Accordion Design in Photoshop

Now using Marquee Tool (M) cut the excess part of the arrow, fill it with #ffffff.

15 arrow dropshadow How to Create Accordion Design in Photoshop

On arrow layer, select Blending Options > Drop Shadow and set the color to #bd6c04, distance and size to 1px.

16 header text How to Create Accordion Design in Photoshop

You can compare the arrow details now, I also added some text in advance icon smile How to Create Accordion Design in Photoshop I use Tahoma Regular 16pt color is #ffffff.

17 header dropshadow How to Create Accordion Design in Photoshop

Text Drop Shadow, color is #bd6c04 and distance and size is 1px, same as the arrow drop shadow settings.

18 header complete text How to Create Accordion Design in Photoshop

I activated the Ruler Guide CTRL + R, and set the margins for the text. The text font is the same as the header.

19 body line How to Create Accordion Design in Photoshop

Now use the Single Row Marquee Tool (M) and draw a line, same steps as before but we will use a different color #e0e0dd. Duplicate the layer and drag them below each text.

20 body hover How to Create Accordion Design in Photoshop

Now we will create a hover state on the accordion menu, grab your Marquee Tool (M) and create a new layer name it hover-state.

21 body hover gradientsettings1 How to Create Accordion Design in Photoshop

On hover-state layer’s Gradient Color settings copy the colors and hit Ok.

22 body hover innershadow How to Create Accordion Design in Photoshop

Inner Glow, size is 1px and color is #fffffff and we are done!

Final Product

accordion How to Create Accordion Design in Photoshop

I added some details like the hand pointer and textured background so it will look more awesome! You can even use dark background for this one, so it will bring the header color to life.

Now, the next step is to convert this into HTML / CSS and jquery so we can use it on our web projects, interested?

3 Responses to “How to Create Accordion Design in Photoshop”