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
Let’s Begin
![1-canvas - How to Create Accordion Design in Photoshop 1 canvas How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/1-canvas.gif)
Open you Photoshop, follow the size for the canvas.
![2-roundedbody - How to Create Accordion Design in Photoshop 2 roundedbody How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/2-roundedbody.gif)
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 3 roundedbody dropshadow How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/3-roundedbody-dropshadow.gif)
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 4 roundedbody stroke How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/4-roundedbody-stroke.gif)
Next is Stroke, color is set to #d1d0ce and size is 1px.
![5-header - How to Create Accordion Design in Photoshop 5 header How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/5-header.gif)
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 6 header dropshadow How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/6-header-dropshadow.gif)
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 7 header innershadow How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/7-header-innershadow.gif)
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 8 header gradient colors How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/8-header-gradient-colors.gif)
In Gradient Color Settings, copy the colors above and hit Ok.
![9-gradient-settings -How to Create Accordion Design in Photoshop 9 gradient settings How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/9-gradient-settings.gif)
This is the Gradient Settings, check the reverse let’s move on.
![10-header-stroke - How to Create Accordion Design in Photoshop 10 header stroke How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/10-header-stroke.gif)
In Stroke, size is set to 1px and color is #bd6c04
![11-header-semi-complete - How to Create Accordion Design in Photoshop 11 header semi complete How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/11-header-semi-complete.gif)
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 12 header line How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/12-header-line.gif)
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-arrow 13 header arrow1 How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/13-header-arrow1.gif)
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 14 arrow settings How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/14-arrow-settings.gif)
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 15 arrow dropshadow How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/15-arrow-dropshadow.gif)
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 16 header text How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/16-header-text.gif)
You can compare the arrow details now, I also added some text in advance 🙂 I use Tahoma Regular 16pt color is #ffffff.
![17-header-dropshadow 17 header dropshadow How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/17-header-dropshadow.gif)
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 18 header complete text How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/18-header-complete-text.gif)
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 19 body line How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/19-body-line.gif)
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 20 body hover How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/20-body-hover.gif)
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-gradientsettings 21 body hover gradientsettings1 How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/21-body-hover-gradientsettings1.gif)
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 22 body hover innershadow How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/22-body-hover-innershadow.gif)
Inner Glow, size is 1px and color is #fffffff and we are done!
Final Product
![How to Create Accordion Design in Photoshop accordion How to Create Accordion Design in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/02/accordion.png)
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?