Volkswagen Inspired Navigation
Posted In : Graphic DesignIt's always fun to get an email from a reader with a very specific request. In this case the request was for a tutorial based on the the car stereo style navigation bar used in Volkswagen's website.
|
It’s always fun to get an email from a reader with a very specific request. In this case the request was for a tutorial based on the the car stereo style navigation bar used in Volkswagen’s website. Rather than reinventing the wheel, we’re going to work straight from an example file of the original. This tutorial assumes that you know your way around Photoshop enough not to need too much hand-holding. You should know your way around the Layers palette and know how to add Layer Styles, use Custom Shapes and Clipping Masks without much explanation. (*note: This is a tutorial about creating the navigation of this piece and not about creating the Volkswagen logo. I have however included the layers used to create my final product in the .PSD download at the end of the lesson if you’re curious about how I did it.) |
|
Step 1
|
|
Lets begin by taking a look at the original navigation bar on Volkswagen’s website. At this point I’ll take a screenshot (screen capture) of the navigation and past it into my new working document so that we’ve got a constant reference to work from as we go. My working file is 540×250 pixels at 72ppi, as always if you decide to work at a different resolution you’ll need to adjust your layer styles accordingly. (*note: As luck would have it, Volkswagen’s website was built in Flash and it loads the navigation before the rest of the page, so with a little lucky timing you can capture the navigation bar before the background image has loaded.) |
|
|
Step 2
|
|
Obviously our first layer will be the one created when we paste the original Volkswagen nav into our document, so lets create a new layer called Base and with the Custom Shape tool set to Rounded Rectangle with a corner radius of 12px and set to Fill Pixels draw a rectangle over the original object ending at the curve on the left side. Use any color you’d like because we’ll be covering it with a layer style a few steps from now. |
|
|
Step 3
|
|
With the Custom Shape tool still selected switch to the Ellipse and draw in the circle on the left side. I’ve used a darker color so you can see the overlap, but again, color makes no difference. |
|
|
Step 4
|
|
Switch to the Move tool by pressing the V key and drag the new shape upward until both the original and the new Base are visible. |
|
|
Step 5
|
|
Now lets add some Layer Styles to the Base layer to get it looking like the example. We’ll be using a Gradient Overlay to get the black to gray effect, an Inner Glow to create the outline and a Drop Shadow. Use the colors #000000 and #A8A8A8 in the Gradient Overlay and be sure to pull in the sliders like in my example below. |
  
|
|
Step 6
|
|
With the Base complete lets move on to the cutout where the buttons live. Create a new layer called Button Background. In the example the corners of the area are slightly rounded so lets grab the Custom Shape tool set to Rounded Rectangle but this time with an edge radius of just 3. If it helps you to get things sized correctly feel free to drag your shape onto the stage directly over the top of the example just like we did before, then move it up into position when you’ve got it right. Again, color here doesn’t matter because we’ll apply another set of Layer Styles in Step 7. |
|
|
Step 7
|
|
As promised, here are the layer styles for your Button Background layer. Pay special attention as we work through the layer styles in this tutorial because often I’ve unchecked the Global Light setting to achieve a certain effect. The colors for the Gradient Overlay are #484848 and #000000 with the sliders left in their default positions. |
 
|
|
Step 8
|
|
Your Button Background layer should now look inset into the Base layer as shown below. |
|
|
Step 9
|
|
Now lets get started creating the buttons that will sit inside the Button Background. We will first create one button completely, then we’ll group the layers and duplicate the group to create the other buttons. But first things first, create a new layer called Button and again using the Custom Shape tool drag a Rounded Rectangle with an corner radius of 2px. Again feel free to draw over the original example to get your button just the right size, then drag it into place when you’ve got it right. At the risk of sounding like a broken record… color doesn’t matter this time either. |
|
|
Step 10
|
|
Here are the layer styles for your Button layer. Your Gradient Overlay colors from left to right are #000000, #74767a and #535558. Be sure to pay attention to slider placement. You may also want to work with the midpoint sliders between the color sliders to adjust the transitions to your liking. |
 
|
|
Step 11
|
|
The Button should now look something like this (I’ve zoomed in so it’s easier to see). |
|
|
Step 12
|
|
Next we’re going to make a selection of the Button by holding the Command (PC: Ctrl) key and clicking on the Button layer’s thumbnail in the Layers palette. With the selection made, create a new layer called Button Sides and click the Add Layer Mask icon at the bottom of the Layers palette to create a Layer Mask on the new layer using the selection. We’re going to draw in the right and left sides of the button now. Switch to the Brush tool by pressing the B key and choose a round soft edged brush that’s around 8 pixels in diameter, make sure that the hardness is set to 0%. Set the foreground color to #4A4B4B and then starting at the top left corner click once then holding down the Shift key click a second time at an angle into the button where the black gradient meets the gray, then while shill holding Shift click on the lower left corner. This should create a nice angled edge as shown below. Do the same to the right hand side and fill in any areas that you may have missed at the edges. |
|
|
Step 13
|
|
Create a new layer called Shadow Highlight directly below the Button Sides layer we just worked on. We’re now going to create an area where we can paint in a highlight and shadow without effecting the other areas. Grab the Custom Shape tool once again by pressing the U key, select the Rounded Rectangle with a corner radius of 4 pixels but this time make sure the Paths option is selected. Click and drag a path onto the stage in the center of the button from one edge of our newly created Button Sides to the other. Press Command-T (PC: Ctrl-T) to Free Transform the path then Command-Click (PC: Right-Click) on the path and choose Perspective from the menu. Grab one of the top corners and drag it outward to expand the top of the shape until the sides line up with the Button Sides as shown below then press Return (PC: Enter) to commit the transformation. |
|
|
Step 14
|
|
Convert the path to a selection by pressing Command-Return (PC: Ctrl-Enter) and then press the Create Layer Mask icon at the bottom of the Layers palette to create a mask on the Shadow Highlight layer using the selection. Switch back to the Brush tool by pressing the B key and using a foreground color of white paint a small highlight into the lower right corner of the button. Once the highlight looks right to you, switch the foreground color to black and paint a little shadow into the left hand corner. Adjust the layer’s Fill opacity down to about 30% or as looks best to you. (*note: I used a round soft edged brush with the Eraser tool to soften the edges a little further once I got the basic highlight and shadow in place.) |
|
|
Step 15
|
|
Create a new layer at the top of the layer stack called Light Off. Set your foreground color to #98999A and using the Custom Shape tool set to Fill Pixels, Rounded Rectangle and 2px create the little light indicator onto the button as shown below. |
|
|
Step 16
|
|
Add a slight Inner Shadow to the Light Off layer to add a little depth. |
|
|
Step 17
|
|
Add your text to the button by switching to the Type tool by pressing the T key and setting up your font and color in the Character palette. I’m using the font Apple Symbols though Arial and Helvetica are pretty decent substitutes. I’ve adjusted the Tracking to -10 to more closely mimic the original. |
|
|
Step 18
|
|
Now that we’ve got the button completed select all the layers that make up the button in the Layers palette and press Command-G (PC: Ctrl-G) to group the layers into their own folder. Then duplicate the folder by Control-Clicking (PC: Right-Clicking) on the group and selecting Duplicate Group from the menu. Slide the duplicate to the left until it sits comfortably in the next button spot and repeat until all 5 buttons are complete. Be sure to name each group and feel free to go change all the button labels. |
|
|
Step 19
|
|
Next lets add the search field above the buttons. Create a new layer at the top of the layers stack called Search Field. Here comes the broken record again… Press U to switch to the Custom Shape tool, choose Rounded Rectangle set to Fill Pixels with a corner radius of 5px, with your foreground color set to white drag the field onto the stage. Oh yeah, and it’s still easier to get the size perfect if you draw over the original example and then move it into place… as if you didn’t already know. |
|
|
Step 20
|
|
A simple little Inner Shadow will give the Search Field the depth it needs. Notice that I’m using a 90° angle for the shadow rather than selecting the Global Light checkbox. |
|
|
Step 21
|
|
Grab the Text tool by pressing T, set the color to #005d86 and put your type inside the search box. I found that Arial Narrow works nicely at 15pt Bold with the Tracking set to 35. Although it’s not needed, I added a Drop Shadow layer style with the settings in the second image below to add that final touch of depth that makes it look just like the original. I also lowered the layer’s Fill opacity to 90%. |
|
|
Step 22
|
|
Now lets add the little button that’s inset in the Search Field. Add a new layer just above the Search Field layer called Search Field Inset. Are you ready for the broken record again? … Custom Shape tool … Rounded Rectangle set to Fill Pixels with a corner radius of 2px, foreground color set to #f4f4f4… and don’t forget to hold the Shift key while you drag to constrain it to a perfect square. Now add this simple Inner Glow layer style to put the shadow around the edges like the original. |
 
|
|
Step 23
|
|
Press the T key to switch back to the Type tool and using a pixel style font like Kroeger 0855 - which is the exact font Volkswagen used and can be downloaded for free at DaFont.com - at a size of 8pt place your text in the box. |
|
|
Step 24
|
|
Lastly lets create the search button itself. Create a new layer at the top of the layer stack called Search Button and… you guessed it DJ, play that record one more time! (Rounded Rectangle, 5px, Fill Pixels, Foreground Color #1988AF) |
|
|
Step 25
|
|
Now lets add the text onto the Search Button by switching to the Text tool and using the same font that we used for the text on the buttons (in my case it’s Apple Symbols again) set to 20pt. I also reduced the tracking to -10 to make it match up exactly with the Volkswagen example. |
|
|
Step 26
|
|
Now lets add the slightest hint of a Drop Shadow to the text to add depth and make it look just like the original. |
|
|
Step 27
|
|
The finishing touch to our Search Button will be to add a Web 2.0 style highlight to it. Create a new layer at the top of the layer stack called Search Button Highlight. Load the Search Button layer as a selection by holding down the Command (PC: Ctrl) key and clicking on the Search Button layer’s thumbnail in the Layers palette (*note: you should still have the Search Button Highlight layer selected as the working layer). |
|
|
Step 28
|
|
Press D and then X to reset the foreground and background colors to black and white and then to switch white to the foreground. Press G to switch to the Gradient tool and select Foreground to Transparent and Linear from the Gradient Options bar at the top of Photoshop. Then simply click and drag a gradient from the top to the bottom of the selection. |
|
|
Step 29
|
|
Finally switch to the Rectangular Marquee tool by pressing the M key. Drag a selection around the lower half of the gradient and hit Delete (PC: Backspace) to remove the bottom half of the gradient and complete the Web 2.0 highlight. |
|
|
Step 30
|
|
And that my dear friends completes this tutorial. As I said in the introduction, I’m not going to cover the creation of the Volkswagen logo, but if you’d like to see how I built mine check out the .PSD download at the end of the lesson. I hope you were able to learn something new and useful! |
|
31 Comments
Interesting, I was looking at the Jetta as a possible car to buy. I love Volkswagens! Thanks for the cool tutorial.
Hey! Cool tutorial! Thanks!
Ah, good ol’ Web 2.0… you know, for some reason, those shiny buttons, diagonal lined-backgrounds, bright, cartoony colors, sticker seals and folded corners just don’t seem to get old to me. Funny thing is, I think they probably SHOULD… lol. Thanks for the tutorial, Hero. You never cease to give me great ideas for my own work. Volkswagon should be honored.
Nice tutorial. Learned a few tricks. Amazing how you can so close, takes a lot of skills. Thanks for posting!
Good Design
Really cool.
Thanks a lot.
Amazing tutorial…
This is one of the best tutorials that you made. One of my fav.
super-hero…!
HELL of a tutorial!! THX a bunch, dude!!!
i’m waiting another tut..thanks your’r hero
Great one. Thanks PSHERO. I’ve just learnt something new, again.
Keep up a good job!
Thank you very much for educating the hungry masses with your superlative skills! This site is an absolute godsend for those wishing to learn. Everytime I come here I do my part by clicking on all of your ads so you earn something for all your hard work. Please keep on doing these awesome tuts, you are one of the truly gifted and generous artists around.
SID, Thanks so much for the compliments. It’s readers like you that keep me motivated to continue writing!
excellent idea — and easy to understand — thanks!
I LOVE THIS!!!!1
if you are ever stumped on ideas - always, always, always copy something from a website. i am constantly wondering how they do this stuff. it is probably because i am more of a psvillain than a pshero.
well done friend. keep it up.
I’t snice to see how some graphics get made, but I’m having a problem… on step 12 when I have placed the layer mask on the button sides layer and try to draw the sides, nothing changes. Any ideas what I may have missed ( a stretch for sure)?
PAUL,
Most likely you’re painting directly onto the Mask you created rather than on the layer itself. In the layers palette check to make sure the little brackets are around the Layer’s Thumbnail rather than around the Mask. If they’re around the mask, simply click on the layer thumbnail to switch it, then things should work as expected.
Wow that´s fantastic. You are the hero of Photoshop for me…
Absolutely amazing! you post the best ps tutorials I have ever seen.
Excellent work!
How do you go about making the design as functional as the actual VW site though? To get it complete with sounds and lights and things, wouldn’t you have to do it in Flash instead of PS?
Just curious because I love your design tutorials but don’t know how to turn it into a functional dynamic webpage.
JASON, Yes the VW site was built in Flash, but most websites (including Flash ones) are usually designed in Photoshop first, then the graphics are sliced and imported into Flash to add animation, sound and action.
You’ve got right man!
Very interesting tuto ! thanks
Really great tutorial! Big props to this one, you, and this amazing site!
Cheers!
Thx!!!!!!
wonderful tink))
This wonderful example to me, but this example is placing two ordeals experiences on me in the area of english understanding,and also I am a fleshman in Photoshop.hope that I could learn more of its skill in this wonderful website.
Hay! Thanks for this great tutorial. I love it.
Thanks!
Good tutoial! Great result!
In fact I like your tutorials because all stepes are well descirbed, so I can learn the tricks.
Wow! Thank you!
Awesome work. i didnt exactly follow it per se, as it guded me. I dont get inspired very often these days. 5 stars man !!!