Make a Simple and Slick Accordion Menu in Photoshop

Preview

Click on the image below to see the final result in full size.

Tutorial Resources

Step 1: Create a New Document

Start by creating a new document in Photoshop (Ctrl/Cmd + N). Make the document 800px by 600px with a white background.

Create a New Document

Step 2: Add Guides

To help with alignment, we should set up some guides. I recommend using the New Guide dialog window (View > New Guide) so that you can place the guides on the canvas with pixel-perfect accuracy.

Add Guides

Place 4 vertical guides at these following positions:

  • 250px
  • 300px
  • 360px
  • 550px

Place 2 horizontal guides at these following positions:

  • 100px
  • 510px

Step 3: Create the Dark Wooden Background

This step is rather optional. I’m going to place a background for our work to make it look more interesting. You can use a different background (or no background at all) and the design will still look great. Note that the background texture that I’m using is just for display purposes; I’m not going to worry about how this background will be tiled in the actual web design. As such, feel free to use a background that can be repeated seamlessly and then just use similar techniques to process it to get the same look-and-feel as below.

Download and open the Wood Texture from stock.xchng. Place the image into our working document.

We will need to resize this background texture. Press Ctrl/Cmd + T (shortcut for Edit > Free Transform). In the Options Bar, you can resize the image accurately by setting the H (Height) and W (Width) options to 32%.

The background image I used has real wood colors, but I want it to be black and white so I went ahead and desaturated it via Image > Adjustments > Desaturate (Shift + Ctrl/Cmd + U).

Create the Dark Wooden Background

We will increase the blacks of the texture a bit more with a simple trick. Create a new layer (Shift + Ctrl/Cmd + N) above the wooden texture layer; I’ve just named this new layer as "Black" so that I’m keeping my work organized. Set your Foreground Color to black (#000000). Go to Edit > Fill (Shift + F5). In the Fill dialog window, make sure that the Use option (it’s a dropdown menu) is set to Foreground Color, and then just press OK to fill the layer.

Then just reduce the Opacity of the layer to about 20% to let the wooden texture background show through.

Create the Dark Wooden Background

Step 4: Draw a Rounded Rectangle for the Body

Create a new layer above the layer we called "Black" and name this new layer as "Body."

Make sure your Foreground Color is still set to black (#000000). Choose the Rounded Rectangle Tool (U). In the Options Bar, set the drawing option to Shape layers (which is the default setting) and the Radius to 5px. Draw a rounded rectangle using the leftmost and rightmost vertical guides as well as the horizontal guides to draw the shape accurately.

Draw a Rounded Rectangle for the Body

Step 5: Style the Body Shape

We now want to style the base shape for the body of our menu using the Layer Style dialog window. (Read our guide to become a master of Layer Styles in Photoshop.)

While the "Body" layer is selected in the Layers Panel, go to Layer > Layer Style > Blending Options to access the Layer Styles dialog window. You can also double-click on the "Body" layer in the Layers Panel to access this dialog window.

Next, we will give this layer 3 layer effects: Inner Shadow, Outer Glow, and Stroke. The settings for each of these layer effects are presented below.

Inner Shadow

Make sure to switch the Color option of this layer effect to white (#ffffff); the default is black. Note as well that we need to set the Blend Mode to Normal instead of the default (Multiply).

Inner Shadow

Outer Glow

Set the Color option to black (#000000). By default, it’s yellow.

Outer Glow

Stroke

The Stroke Color is black as well (#000000).

Stroke

After you are done setting up the layer style, press OK to apply it to the "Body" layer. Then just reduce the Opacity of the layer to about 80%.

Style the Body Shape

Step 6: Make the Buttons/Menu Items

I will refer to each menu item as a "button," which are the things the user would click on to reveal the content associated with it. We will have 7 buttons, with the top one being shorter in height than the others (the one that contains the name of the site or heading text of the other buttons).

The first thing we should do is create a new layer group for these buttons to keep our work organized and easier to work with. Go to Layer > New > Group (or click on the "folder" icon at the bottom of the Layers Panel) that we will place our buttons into. By default, this layer group will be called "Group 1," but in web design, it’s very important to be as organized as possible so that when someone else works with our mock-up, they will know where things are easily. So, rename the layer group to "Buttons."

Next, hold down Ctrl/Cmd and then click on the "Body" layer’s thumbnail in the Layers Panel to automatically place a selection around it.

Then create a new layer inside the "Buttons" layer group named "Top."

Make the Buttons/Menu Items

Then get the Rectangular Marquee Tool (M) from the Tools Panel. Hold down Alt/Option and drag your mouse onto the bottom part of the selection, which should reduce our selection to just the shape of our first button.

Make the Buttons/Menu Items

After that, fill that selected area with black (#000000).

Make the Buttons/Menu Items

Give this layer a Gradient Overlay using the following settings.

Make the Buttons/Menu Items

Make the Buttons/Menu Items

After that, lower the "Top" layer’s Opacity to 15%.

Make the Buttons/Menu Items

Now we will create the other buttons, starting with the "About me" button. Create a new layer (Shift + Ctrl/Cmd + N) under the "Top" layer and name it "About me."

Just like before, make sure your Foreground Color is set to black (#000000), then place a selection around the content of the "Body" layer by holding Ctrl/Cmd and then clicking on the "Body" layer. Afterwards, choose the Rectangular Marquee Tool (M), press down Alt/Option, and then deselect the top and bottom areas of the current selection.

Make the Buttons/Menu Items

Fill the selected area with the Foreground Color (which should be black) using this handy shortcut: Alt/Option + Backspace.

Make the Buttons/Menu Items

After that, apply the same style as the one used for "Top" layer. Just right-click on the "Top" layer in the Layers Panel and then choose Copy Layer Style in the menu that appears, click on the "About me" layer to make it the active layer, right-click on it, and then choose Paste Layer Style.

Make the Buttons/Menu Items

Create more buttons by copying the "About me" button layer several times. Name the button layers as follows: "Web Design," "Writing," "Graphic Design," "Photography," and "Contact me." Of course, depending on what you’re doing, you might want to rename these buttons to something else.

Make the Buttons/Menu Items

Step 7: Place the Text

Now minimize the "Buttons" layer group by clicking on the small triangle next to the group’s name in the Layers Panel. This makes our Layers Panel, which by now has a lot of layers, easier to work with.

Create a new layer group named "Text" above the "Buttons" layer group. This is where all of our text layers will go.

Set your Foreground Color to white (#ffffff) then choose the Horizontal Type Tool (T).

In the Options Bar, set up your Type Tool options such that it is using the Tahoma (Bold) font with a font size of 6.4pt and using an anti-aliasing method of Crisp.

At the dead center of the "Top" button, write your name or site name. Below, you can see that I just used my own name for the text of the "Top" button.

Make the Buttons/Menu Items

After that, go to Layer > Layer Style > Blending Options to open the Layer Style dialog window. We will give our text layer a Drop Shadow, an Inner Shadow, and a Gradient Overlay.

Drop Shadow

Make the Buttons/Menu Items

Inner Shadow

Make the Buttons/Menu Items

Gradient Overlay

Make the Buttons/Menu Items

Here’s what our text looks like now.

Make the Buttons/Menu Items

Then just duplicate this text layer (Ctrl/Cmd + J) and modify their text for the other buttons. Align them to the third vertical guide from the left.

Make the Buttons/Menu Items

Step 8: Place the Icons

We are done with the text, now it’s time to download the Free iphone toolbar icons and unzip the contents. For this design, I have used these 6 files from the icon set:

  • icon_user.png
  • icon_smile_face.png
  • icon_pencil.png
  • icon_blog.png
  • icon_favorities.png
  • icon_post.png

Make the Buttons/Menu Items

Place those PNG files in a new layer group called "Icons."

Align the icons to the second vertical guide from the left.

Make sure you don’t forget to organize your layers by renaming the icon layers to "About Me," "Web Design," "Writing," etc.

Make the Buttons/Menu Items

That’s it. We’re done!

Tutorial Summary

Congratulations — we have finished our simple and slick accordion menu! We used a wood texture and processed and styled it to create a dark and detailed background for our accordion menu. We also used basic tools and techniques to draw and stylize our design elements. I hope that you understood all the steps and actions used in creating this work, and if not, we are here to help so just drop your questions in the comments below. I’d also like to hear your opinion about this tutorial and final result.

Download Source Files

  • Well, this is original! It makes you force yourself to get to the ultimate essence of what you have to say and show! This no BS-approach is something I can really relate to… However; It’s really hard to actually show something like a portfolio through this way, that’s why I won’t use this for my site :'(
    thanks!

  • Nice tutorial, helpful for beginner..

  • I hope that at the very least though you can learn some techniques (layer style, laying out, guides, etc.) for other design elements.

  • Straight-forward but a nice result. Good use of guides and textured background, and I like the icons as well. Nice work!

  • Nice work Tomas and nice result. Very well explained!

  • Where’s the accordion menu aspect of this design? All I see is a list of links, yet there is no collapsible menu items.

  • Jordon Allen

    Now to actually make this a drop down menu would you use javascript?

  • yapkenix

    Thanks ! It’s useful.

  • Great post,the tutorial very useful.

  • It’s styled the way an accordion menu would look. You’re right in that we didn’t show the “expanded” view of how it would look. I’ve drafted a proof-of-concept for this tutorial (sliding accordion using CSS3 and JavaScript), but unfortunately, I was not able to finalize it for production and in time for inclusion in this tutorial. I’ll still finish it and link to it here in the comments.

    In the meantime, check out the CSS3 conversion by Alex Hall of DeVSeO. It doesn’t slide down, but some modification using the :target pseudo-class and expanding the height or overflow property of the targeted containing div, you could certainly do it.

  • Hey Jacob, I have added this to my demo on DeVSeO, you can see it:

    http://www.devseo.co.uk/examples/css3-slick-accordian-menu/

    The second menu on the left uses the :target psuedo-class to animate when the menu gets focus.

  • Java or Flash would take care of the animation – Java may be the better choice here although I’m not at all familiar with the language…I spent all my time trying to learn Flash and now nobody wants to use it anymore haha

  • JavaScript. 😀 Flash can certainly do the animation, but my personal philosophy is if you can the interaction in JavaScript, you should do it in JavaScript.

  • Awesome. On top of Firefox being more accepting of CSS3 definitions, I’m patiently waiting for the day where we don’t have to keep the vert page scroll always on for that browser when trying to do something fancy.

  • @ngassmann: I agree with you. Old browsers will fade away. IE9 supports CSS3 (upcoming version of IE9), and that should lower the marketshare of IE6-IE8 a little bit. Chrome, Safari, Opera, etc. also support CSS3 (with varying levels of CSS3 transistions).

    It’s just so much easier and better to do this with just CSS3 rather than images and JavaScript.

    This is definitely doable using HTML/CSS2/JavaScript though, just that it’s going to take more code and elbow grease, and will soon be an outdated method. If I were to do this using currently standard techniques, I’d slice the top and bottom parts (because of the rounded corners), and then use repeating CSS backgrounds for the rest of the parts. I’d also have to slice the outer left and outer right for the dropshadows, and have those repeat-y so that they would expand vertically. Then I’d save them as PNG with alpha transparency. And because I would need to support IE6, I’d use a PNG fix JS library. Then I’d code the functionality (usually, though, I’d code the functionality and structure first, and then put on the visuals). If I knew it was going to be on a flat/solid color background instead of a textured background like the wooden boards, then I wouldn’t worry about the transparency.

    So I’d need a couple of JS libraries (one for making it functional and the other one if I need transparency and IE6 and below support), CSS, and HTML. And the process is very involved (since I also need to slice up PNG images).

    In contrast, Alex’s demo shows you can do this using CSS(3), and it will take care of rounded corners, dropshadows, opacity, etc.

    So in short, I really hope that we can progress to the point where we no longer have to think about non-CSS3 supporting browsers like IE6 to IE8.

  • Right it’s easier and degrades better, however, when a client says I WANT IT TO WORK NOW, we can’t be all high and mighty and tell them to switch to Chrome. 😛

  • Absolutely 🙂 what he said

  • Really nice, helped in many designing tricks.

  • Jalew

    Thx very much, I am a beginner of beginner, I have learned a lot from it.
    And I expected the next one.

  • What a great idea.

  • Mayuresh

    It’s gr8 !! I njoyed

  • Jacob

    meh… tutorial is good for learning basics I guess, but didn’t really offer me anythign new to work with. I think of a menu as something that you can click on and interact with, and this tutorial ends right where it really should begin; I’m new to website design and I was hoping that the tutorial would go over that sort of interactive page design aspect, but in the end it’s just a pretty picture and when you can use CS5 Bridge to create a Web Gallery of a portfolio that you can e-mail with your resume, without covering how to make the menu offered in this tutorial functional, the tutorial really is JUST an exercise in the basics and seems a little misleading to me. Next.

  • Reading the intro and title really helps not waste time. The author clearly states that this is a Photoshop tutorial in both. I don’t understand where it is implied that this is a how-to write the markup for this menu.

  • Hunter

    Yes Finally i made something on my own, now the game begins

  • Atik Shaikh

    hey how to do i get the small icons which are besides the text like about me has a person,web design has a smiley..from where can i get that??please reply soon…

  • JC Parmley

    Under “Tutorial Resources” at the beginning of this tutorial, you’ll see two links for Texture and Icons. The ones you are looking for are under Icons, here is the direct link: http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/

  • Spitfire

    Thank you very much!

  • Rizwan

    superb! good job…..