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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

Let’s Begin

How to Create Accordion Design in Photoshop - Sanjay Khemlani

Open you Photoshop, follow the size for the canvas.

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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.

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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.

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

You can compare the arrow details now, I also added some text in advance :) I use Tahoma Regular 16pt color is #ffffff.

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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.

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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.

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

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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

Final Product

How to Create Accordion Design in Photoshop - Sanjay Khemlani

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”