This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.
Step 1
Open a new canvas that is 600x335px. Begin by showing rulers (View>Rulers), then create two guides similar to the image below. Create one at 285px and the other at 310px.
Step 2
Create a Rectangle (U) that fills the lower ruled area and label the layer "lower bar." Open up the Effects Menu for the layer. Navigate to the Gradient Overlay property and apply a gradient between #000000 and #0c0c0c at 90 degrees.
Now create another rectangle in the upper rules area and name the layer "upper bar." Again open up the effects menu and apply a Gradient Overlay between #35393d and #787b7d at 90 degrees. Select the two rectangles created so far and change the Opacity to 90%. When a background is added later, this will provide a nice effect, as it allows the background to slightly show through.
Step 3
The next step is to add a highlight to the menu using the Line Tool (U). Select the Line Tool and change the weight to 2px. Draw a line across the bar and change the color to #9fa2a4. Rename this layer to "lower highlight." Now draw another line directly above the previous and change the color to #484b4d and change the name to "upper highlight." Group these layers with bar layers in a group called "bar." This stage completes the basis of the menu.
Step 4
Now that the menu bar is complete, we can create a set of dividers to go between the text. Select the Line Tool again and leave the weight at 2px. Draw a vertical line from the center ruler mark that stops a few pixels before the highlight. This does not need to be exact and can easily be adjusted later. Open the effects menu and apply a Gradient Overlay at 90 degrees between #676a6d and #4d6672. Label this layer "upper divider."
Draw another vertical line from the center ruler going down and stopping the same distance from the edge as above. This section does not have a gradient, so change the color to #43474b. Rename this layer to "lower divider." Group the two sections of the divider and name the group "divider."
Step 5
Select the Type Tool (T) and change the color to white (#FFFFFF). The font I chose to use for the menu is called Segoe UI because it is the font used in the Vista user interface. However not everyone has this font, so as a replacement Arial will do. Set the size to 11pt and type your links out, spacing them evenly. Group them together and name the group "links."
Now copy your dividers and space them in between the links. You should end up with something similar to this.
Step 6
Now the menu bar is basically completed, so you can add a background of your choice. The background I chose is a photograph of grass. Anything colorful or scenic will do.
Copy your background into the menu and rename the layer Background. Make sure this layer is at the back in your layers palette. Note the transparency in the menu allows the background to show through without overpowering.
Step 7
This step will create the blurred rounded rectangle that is behind the text. This effect is quite common in Vista and is a good technique. It takes the focus of the background and places it on the text, but still shows the beautiful scene behind.
First of all, duplicate the background. This layer is not permanent, but we will be cutting a selection out of it. Then using the Rounded Rectangle Tool (U), draw a shape that starts past the left edge of the canvas. This means that the shape only has two rounded edges.
Rasterize the layer and then using the Magic Wand Tool (W), select the rectangle and delete the color while keeping the outline. Now select the background copy and cut from that layer. Delete the background copy layer and add another new layer called "blur."
Paste the shape in the layer called "blur" and then apply a Gaussian Blur of 5px (Filter>Blur>Gaussian Blur). Then apply a Drop Shadow as shown below.
Step 8
Now add your text inside the blur. Using the same typeface as the links (Segoe UI) type your name and tagline. Select some of the text and make it bold and keep some normal, apply a Drop Shadow, and a Gradient. This produces a modern-looking text that has a striking look.
Step 9
This step is optional, as it will produce the blue highlighted glow that will become our hover effect. Draw a large Ellipse (U) that fills the area between the dividers. Change the color of the ellipse to #5c94c5 and apply a Gaussian blur of 10px. The shape has now become a raster layer, and you can clean up the excess blur by using the Marquee Tool (M).
Conclusion
This menu produces a stunning effect when coupled with a bright scenic background. It uses transparency to great effect as well as modern gradients. The use of highlights is a great trick to providing a cutting-edge modern look to pictures. This menu would be quite easy to slice up and turn into a very functional web-based menu with hover states.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Matthew Lane January 19th
Beautiful and simple.
( )Elliott Cost January 19th
First!
( )mave January 19th
don’t you think “spoonfed photoshop” is a bit insulting to your readers? I’ve been considering submitting tutorials, but that tagline really turns me off. I don’t think of people as babies, I think of them as intelligent and inquiring.
( )Crees March 30th
well, for some of us PS babies, who are learning to talk and crawl, it fits.
and yah, i thought of my kids as intelligent and inquiring…WHEN they were babies. i thot of them as small adults who were learning the language and customs of a new country. perhaps because of that they are all smart, engaging, and wonderful to be around.
your pic makes me smile.
( )David June 8th
So I it is obviously for beginners?
Damy June 10th
This tutorial is not for beginners. The only tutorial what is for beginners is how to draw a line in photoshop. And getting used to it. This is nothing beginner. I can make these things as made in this tutorials on my own. But I always am curious how other people make them.
Cheers
( )Greg September 26th
It is astonishing how easily offended some people are. Or rather, how some babies are.
( )Voiparty November 27th
very professional and slick result with a minimum of fuss – I love it
( )Colin January 19th
wow! i love tiny lil things you never even think about! very nice, smooth, crisp and awwwwwwesome!
( )naveed January 19th
i love the tiny thing the blue that u did in the end..nice..
( )Ralph January 19th
Beautiful!!
( )Joseph January 19th
eh, I’ve been doing this since before vista came out. good tut though, just nothin new.
( )Julio Fragoso January 19th
i´ll try later… and post on my blog…
great tuto dude!
( )Eli January 19th
Fourth. Sorry, just trying to be lame like Elliot up there.
Nice tutorial, nothing new though.
( )Juanjo Vargas January 19th
This really looks like vista! Good work!
( )Constantin Potorac January 19th
Nice Job. Really slick.
( )Erik January 19th
Why do something that’s been done before?
( )But it’s slick and looks good!
giackop January 19th
Yes very good tut!! Congrats..
( )Cain January 19th
I don’t like the blue gradient for the rollover. Other than that its nice, but like everyone else has said, nothing new.
( )shoo January 19th
Why does everybody have to say that this aint some new stuff? There is ALWAYS people who dont know how to do certain things in PS and if you aint can post “old” tutorials, there woulndt be much to see here.
Thanks for all great tutorials
( )dano July 24th
yeah, it’s not new if someone hasn’t seen it before.
( )Shane January 20th
Another nice tutorial – thanks.
( )das_1980 January 20th
Why do these people insist on being critical. The point is not whether you have seen the effect before, the point it to learn the techniques and apply them to your own ideas and artwork. Thanks for all the amazing tutorials, this site is head and shoulders above all the rest, keep up the good work.
( )Markus January 20th
Great tutorial! I dont like the blue rollover! (:
( )amnhacworld January 20th
wow..nice..i like it..gud tutorial ^^
( )hcabbos January 20th
I guess I understand all the “nothing new” comments. What in God’s earth hasn’t been done before? Give the guy some credit for showing us the process and taking time out of life to share something with us. Even if the end result isn’t up your alley, there could be a subtle technique that you could use outside of this tut. And yea, some of you guys said thanks but to me it’s nullified with “nothing new.” Do any of you have your own blogs with ORIGINAL content?!
Alright, my rant is over. Just had to get that out.
( )shahram January 20th
wow, i love it. u relay great job.
( )jeff finn January 20th
I agree with hcabbos. Way to set them straight brother (sister?)
( )Turd Burgalar January 20th
I 2nd that hcabbos.
Aman.
Thanks for the tutorial, it gave me a few ideas.
( )Fabio Sasso January 20th
That’s really cool, even though Im a mac user I really like the vista’s interface design.
Thanks for the tutorial!
( )Stepehn January 20th
I’d like to see how to do the Glass Shelf Dock effect in Leopard. That would make for an interesting tutorial.
( )Stephen January 20th
I’d like to see how to do the Glass Shelf Dock effect in Leopard. That would make for an interesting tutorial.
( )Tama January 20th
I agree with Stephen! That’d be awesome
( )Tom Sieron January 20th
Step 2 can be done with one layer (bar) instead of two (upper and lower bar), you just need to edit the gradient in Gradient Overlay. Just my two cents.
In general UI controls are easy to draw – nothing more than a few layer effects. I’d love to see more tuts on creating complete images with cool effects, posters and that kind of thing, with more insight in style, typography and composition.
( )JOnO January 20th
The description in Step 7 didn’t actually produce what was shown. In order to produce a coherent drop shadow, I had to have a second copy of the cutout underneath the Blur layer and apply the drop shadow to that. Trying to drop shadow the blur layer directly just gave me a mushy outline, and no edge.
( )Sancho Panza January 20th
I totally agree with hcabbos. The techniques you were using are really helpful for guys like me – the ones who just started working with photoshop. With every single tutorial you guys write I keep on learning new stuff. Thanks a lot for that! I really appreciate your affort and hope you keep up the good work!
greetz sancho panza
( )Nima January 20th
Thank you
( )Didik January 20th
You don’t need to become a prodigy in Photoshop for this tutorial. It’s easily followed and clear. I’m waiting for the Leopard glass effect, though.
( )Ant January 20th
Very Good…
( )Robin January 20th
Leopard Glass Dock wouldn’t be difficult: a slightly gradiated grey hue rectangle layer (i’d use a shape layer so you can easily scale). Layer above that is your Swishy curve. Use a shape layer created with your pen tool (easier to do in illustrator then port in). Color it grey as well. Set layer from “normal” to “overlay” and adjust opacity (guessing 33% or so). On other layers, your icons with a dropshadow set to -90 degrees. Replicate your icon layers then flip vertical and move below original. Use layer mask with gradient to gradient knock out the lower icon’s opacity, then adjust the layer opacity to i’m guessing 50% or so. Last adjustment is the thin 3px or so bar at bottom of glass rectangle. Maybe apply v/ slight gradient to that.
Hope that helps.
( )Hector Rojas January 20th
I’d disagree with Tom Sieron above, after all, this is a PSD Tutorials site, not a design/composition’how to be a designer tutorials site.
I can see the emphasis is in showing the user how to do certain things with Photoshop, not how to design or compose things.
That’s a different monster all by itself.
Thanks for the tut.
( )andreic January 21st
well, even if im new or not in using photoshop, i do believe that this tutorial will hit the right target; the rest of the people which are not that experienced in using it as most of us here are (or pretend they are)
( )therapix January 21st
Magnificent. Very simple for advanced user, but clever nevertheless.
( )Inspiration Up January 21st
Nice tut, Surely I will use it soon.i
( )Mark Abucayon January 21st
wow that was so nice- very excellent great job I have to use this once later.
( )Cody January 21st
hahaha the guy said “First” he wasnt ever first LMAO, good tut though
( )GeminiArt January 21st
great style and simple tutorial
good job 
and thanks
( )Gehackte January 22nd
Woow that kicks ass(L) love it tyvm
( )Livingston January 22nd
Wonderful!
( )I’ve done several works like this before. But this one is different.
thanks!
Tommy P January 22nd
Nice work!
( )Leigh Nugent January 22nd
Once again, you guys have delivered a great, easy to follow, tutorial. Really love the blurred effect!!
( )Jhon January 22nd
Great tut.
Recomendation:
Step 7: No need to duplicate layer. Just Make the trick selecting de rounded square and press Ctr+J (layer via copy).
( )mike January 22nd
wow… nice.
( )Chris Laskey January 22nd
Another great tutorial. Then again, that’s pretty par for the course at psdtuts.
I’m constantly inspired by the PSDtuts here. Even in the cases where I might already know how to produce one element, seeing the way the different elements are put together is creatively inspiring.
Thanks Ricky.
( )Clever Mind January 22nd
Very nice tut, like many said before, and to those who have “seen it before” take it for whats its worth. Those of us that have been using PS since v5 or 6 know that there really is no end to what can be done, and a nice simple to follow tut is always refreshing and god to see. Thanks again
( )bigb159 January 23rd
Great tut. I like the spoonfed idea, and I can’t believe someone would rant about that. Often time we who visit here are students or regular joes just trying out our luck with some fun new art program. Collis and his gang are breaking it up into little pieces for us. If you “feel offended” *boo-hoo* you can get the guts to go make your own successful site. Nice work guys!
( )HaaGeN January 23rd
Menu bars always made me excited, they are fun to do and can achieve many cool effects, your tutorial just added to my bag of tricks in doing menu bars, thank you
( )Fredro January 23rd
What am I doing wrong? My blur effect looks off for some reason …
http://i259.photobucket.com/albums/hh304/chilltron/vstep-background.jpg
( )chubba January 23rd
great job
( )Tim January 23rd
To Fredro,
I had the same problem as you with the “mushy” edge but I followed what JOnO said above and it worked for me.
JOnO:
( )The description in Step 7 didn’t actually produce what was shown. In order to produce a coherent drop shadow, I had to have a second copy of the cutout underneath the Blur layer and apply the drop shadow to that. Trying to drop shadow the blur layer directly just gave me a mushy outline, and no edge.
Nolawi January 24th
i wish you guys dont skip steps in the tutorials….
( )Brady J. Frey January 24th
This is the first design article I’ve heard ’stunning’ and ‘vista’ in the same phrase.
( )adam January 24th
spoonfed photoshop offensive? you know youre the reason america is the way it is, just let some stuff go. Im pretty sure they meant spoonfed in a sens that its being delivered to us.
( )Fredo January 24th
@ Tim & JOnO:
Thank you, that helped a lot. The border looks much crisper
Hope this helps anyone else.
http://i259.photobucket.com/albums/hh304/chilltron/vstep-background2.jpg
( )Terry January 25th
So mave comes on and cries about the “spoonfed” tagline, so he/she withholds a tutorial?
And then some of you complain this has been done before? What? Does everyone in the world already have a professional level of photoshop expertise? What about the people who just started? And personally, IMO, I see nothing wrong with showing someone a simple way to create what may APPEAR to beginner as a complex design.
Good Tut, and Keep it up. for the rest of you, Start your own successful site and make sure you NEVER put anything up there NOONE has EVER done before!
( )Dito January 25th
wow, thanks for this great tutorial. as much as I hate Vista, it is pretty
( )Alex January 28th
I love the spoonfed tagline. It implies it will be really easy to do if you follow the tutorial. It’s a great break from all the really crappy photoshop sites out there. Keep it up guys.
( )Chris January 28th
There’s a mistake in the text at STEP 4:
The text says: “… and apply a Gradient Overlay at 90 degrees between #676a6d and #4d6672 …”, but the image shows another value of the gradient: #afb1b2 (= image) instead of the text value #4d6672.
( )As the value mentioned in the text will result in a much too dark divider, I think the value in the image shown at STEP 4 is the right one.
chandan chakraborty March 24th
U are right Chris
( )Raphael January 28th
Very cool!
( )TNKS
ankraj January 29th
awesome.. thanks
( )james January 30th
WOW! this is amazing i neva thought of making somthing like this but now i will thanx alot
( )Pablete February 2nd
Way too awesome like always!
Million thanks from Spain!
( )UtahLuxury.com February 2nd
Beautiful. I am not a PC fan at all, but I love the blue accent on mouse-over. Good job and nice tutorial!
( )Ambrosiality February 2nd
that’s really nice
( )ryan February 6th
Great tutorial!
you can find that font Segoe UI for free at Microsoft’s website since it’s a system font for vista. Or at least it was.
( )Elliot February 6th
Really love all the tutorials. This one is especially good. Found it really usefull when designing a mockup for my site. Thanks
http://thedevilwearsskirts.deviantart.com/art/Website-Design-Idea-76569617
( )Florian September 22nd
I have used it on my website. But I didn’t do it with javascript but simply with hiding the blured image that describes what you get to see in the category.
Here you can have a look at it:
http://www.usa-roadtrip.pytalhost.com/
As you can read below I have used a different menu but the concept still remains the same!
When you are doing the thing with javascript post it here. I think all are looking forward to see it.
( )Al February 7th
Great post. One thing vista has right, really slick graphics, menus, and great use of transparency.
You could make some beautiful CSS menus out of this. Very nice.
( )Tickled February 9th
Thank you for this tutorial. I had a header that I needed to redo and was browsing through this site again and this was perfect. It’s a nice combination of very simple steps.
I needed some ideas for a header I was commissioned to do within a day and this was a life saver. My final product isn’t amazing, but it works well within the constraints that I was given (specific color, had to have windsurfers in the bg, etc.).
This is the original:
http://toshcomputers.com/
And this is what I came up with:
http://chickado.com/work/tosh.jpg
Thank you again!
( )isa February 10th
mave,
spoonfeeding simply means to “teach without challenging the students” (meaning is courtesy of WordWeb)
of course, if you heard it being said, and there were any accentuations, one could construe it to mean what you were implying, if there were an implication to begin with
otherwise, spoonfed is a great way to put what the people here at PSDTuts are doing.
cheers
( )lol February 17th
Do you have any web resources that have all these excellent pictures that we can use for free?
( )kiwusek February 20th
Just out of curiosity how do I go about making this work on the internet?
( )Any sites that tell explain this would be extremely helpful. As I made a template with a similar header but don’t know how to get it too work on the internet.
Martin O'Brien Grant February 21st
Absolutely stunning. Your tutorials blow me away A++
( )Ben February 22nd
I know it’s not a “new” look, as all of you downers above have pointed out, but this tutorial was a huge help to me when I wanted to create my own vista-style elements. Thanks!
( )Mauwi February 24th
THANK YOU so much for the tut! It’s visually stunning
P.S to Mave: understand your point but I don’t mind it myself bc I know I’m being spoonfed in a sense till I get everything down.
Thanks Ricky!
( )Man Up February 26th
Mave, your an idiot, it’s babies like you who complain about everything that makes this world a crummy place sometimes.
Maybe you can start your own web site called “Iamoffendedbyeverything.com”.. whiney ass
This was a good tutorial.
( )preston February 26th
Very nice tutorial. By the way, I love the slogan.
( )manish March 4th
it really very cool tutorial.
( )FraGG March 6th
For the blurred rounded rectangle simply make your shape with selection tool and on the background layer hit “Ctrl J” this will duplicate the selected area then apply Blur (while he is selected) and at last drop shadow.
Sorry for my english i’m french ^^
( )mavefan March 8th
mave shutup
( )IFx March 8th
Mr. Isa & Mr. trip-o-matic spoona”: Yeah! as anybody anywhere on the net, I’m gladful to see clever work “how to” for free and in tha” easy way. Why? I’m also trying to be creative, but as a web designer it’s really hard to get an ID/idea three or six times per month. So that’s why I love this site, it inspires me… merci ♥ ♥ ♥
( )Anny March 9th
great job ^^
( )Dave March 10th
Great as a tut ….. But encouraging image based navigation for a website is not so good!
( )luis March 11th
Nice tutorial
( )two cents March 11th
Nothing worse than a nerd bragging about how they already knew how to do it. Mave’s comment about the name of this blog is just ridiculous. People don’t bring the residual effects from a traumatic childhood to the web. Thanks!
( )Andrew March 12th
Nice tutorial
( )Mewie March 12th
I’m with kiwusek – how do you translate this onto the Internet? What software do you use besides Photoshop?
I am definitely encouraged to try something like this out soon for my blog. VERY VERY COOL! Thanks so much.
( )Opsy March 14th
Please how do I clean up the excess blur using the marquee tool. I’m a newbie at photoshop but I like the effect.
( )WiSH March 18th
very nice…!
( )MO March 27th
Mave “don’t you think “spoonfed photoshop†is a bit insulting to your readers? I’ve been considering submitting tutorials, but that tagline really turns me off. I don’t think of people as babies, I think of them as intelligent and inquiring.”
Speaking from a newbie with no creativity prospectuse, this is GOLD!!! excellent tutorial.. too bad there isnt one demonstrating how to slice and code this into a valid css/xhtml site.
( )Nikki Bryan April 1st
Thank you for this tutorial!
( )It helps me a lot.
rukoiatka April 2nd
guys, what is vista?
( )toddpat April 9th
how about a follow-up tut on how to slice and dice to move over to a website?
most excellent! thanks!
( )Enes April 9th
This is like far from vista, your borders are to thick man, and it just makes it look so unprofessional. Anyway, its a nice attempt, it looks really akward. The only good thing about the tutorial is the lightning you’ve made.
( )Willie April 16th
Great tutorial. Thanks! I think the menubar looks outstanding.
( )Xeon April 18th
Godlike
( )SomeGuy April 18th
Im kinda lazy, can you include the psd here? I just want to change the nav text and slice it.
( )anca v. April 22nd
I’ve tried to do this tutorial, but like many said there is a step missing or something… I achieved the same drop shadow effect that didn’t look good. I’ve read all the comments, mostly what fraGG and jOnO said. but then I thought of another way (I’m good at this things, especially if u use photoshop everyday like me). u first take the background copy and make a cutting out of it using the shape with magic wand tool, apply gaussian blur to the copy, then return to the shape layer, go to fill layer and put 0% and THEN apply drop shadow. U don’t have to use any copy of the blurred section or what it says in the tutorial at step 7.
what FILL LAYER does is reduce the opacity of the layer without tempering with the blending options. if u use opacity to 0% that will temper with the blending options, and them too will be at 0%. it’s much more simpler than what is explained in the tutorial.
p.s. the drop shadow that is applied to the shape is not right in the tutorial. to have an even shadow all over the shape the distance must be 0px. it didn’t look right when I did it.
( )Florencia (Arg) April 26th
Very Very niceeeeeeeeee! I love it!
( )Excellent!
I try it!
alecme May 2nd
Great, concice, an work for my.
( )Thanks…
Vita May 4th
Wow! Simple but so effective!!!
thank you.
( )aleks May 5th
thanks for the help, however this tutorial i found EXTREMELY confusing, often leaving alot of the work to guess
( )francism214 May 10th
To the critics:
Let’s be face the fact that some of the guys here are not as good as you are we were once like them. I didn’t learn photoshop in one day and became pro and so are you. Wouldn’t hurt if you can just post additional comments or suggestions to enhance this tut? =) Let’s be professional and appreciate whatever are imparted tuts on this site.
To the author of this tuts:
Good job! Keep it up!
( )sart May 16th
I love it and wll give a try………..
( )Another thing this site helping me to become a pR0…………..so keep it up
Graphic design melbourne May 20th
nice, its just what we wanted for our design element
( )MD June 4th
Very cool tut!
The best Vista effect I ever read!
Thanx
( )Jay June 4th
How do you get the rulers to display in pixels instead of inches?
( )jack June 10th
Great post.. keep it up.. let me know if you have any other tutorials……..thaNX
( )Cyberbite June 12th
Really bad on your part to submit it as spoonfed!!!!!!!!!
Its very tauntin to all the ppl who are regular visitors.
Thnx for da tut nyways!!
( )leogajardo June 26th
simple but nice
( )maggaranx June 28th
Just to add to the “PRO” vs “NON-PRO” Photoshop battle…
This tutorial gave me some great ideas and showed exactly how to realize those ideas! Just like all the tutorials on PSDTUTS. The idea of a tutorial is to teach those who don’t know how to do something and not for all the “Pros” to critique. Why read through an entire tutorial if you already know how to capture an effect or idea?
PSDTUTS has something for everyone…just find yours (or write it) and enjoy learning and sharing!
…My 2 cents.
( )Oliver Kiss July 1st
Great tutorial!
( )13.GuE July 2nd
nice realy nice
( )I Will design my personal site like this!
Congratulations!
Mack Altman III August 3rd
This is a great tutorial for all of those out there who really need help on switching over to the sleek 2.0 style that a lot of are having trouble with. I hope that a lot of you had fun learning it, as I did. It’s similar to another tutorial, but a lot fewer steps to get there, which I love.
( )Naldzgraphics August 3rd
Thats a nice tuts.tnx for his one
( )Kodi August 5th
Wow its a neat trick. Thanks
( )Sawant August 10th
It was a great tutorial. Thanks.
( )Osiris August 10th
awesome menu thanks alot
cheers
( )Hamit August 11th
Thanks a lot really good tutorial
( )Sherjeel August 13th
I have a problem when i make a rollover state on image ready, the effect is also in the up state as well as in the over. Please need help!
( )Cooper August 28th
it wouldve looked better if you used ilustrator’s blend tool instead of a gaussian lur. cool anyways.
( )WOW September 4th
Man, some of you people must spend all day writing snide comments online. I think I may go to my sons second grade class, sit in the back of the class and whine about it being nothing new!
I think the point is more about showing a process to learn from and apply your own way.
If you think about it even the most original tut will have been done at least once to create the tutorial itself so I guess nothing could possibly new new enough for some of you.
If ya know it all then why do you come here?
Anywho. Nice tut!
( )Fredrik Moe September 12th
Very nice tutorial, simple and good! and easy to code with CSS and HTML
( )Peredo September 27th
i think is beautiful, i like so much
( )dhaval(smax) October 3rd
nice tutorials. i am happy to see this tutorials.
( )SHAMEEM October 16th
Hi, very nice informations, but please tell about the resolution of the file, because the quality of the fonts
( )good, When I used 72 px
Patrick October 21st
Nice tutorial … I am going to use it for a nav-element I’d been dragging my feet on … I think it may look better to put the hover highlight effect on a layer BELOW the vertical dividers (with an appropriate blending style & opacity) so that the blue highlight does not bleed into the dividers themselves.
( )Doug October 21st
I agree with Mave (third post) that using the subtitle “spoonfed photoshop” is kind’a rude. Funny? Yes. Rude to the audience? A smidge.
( )Trevor November 4th
I LOVE this tutorial – the result looks fabulous! Dare I add my variation though?
( )Rather than limit where the blurred lens effect can be positiond, duplicate the background photo and apply a gaussian blur to the whole layer, 10PX radius. Then draw a rounded rectangle wherever you want it and apply a gaussian blur of 3px to that shape (rasterizing it of course) and then apply the drop shadow per the tutorial. Put the background copy layer above the rounded rectangle layer then alt + click between the layers for a mask – that way you can move your blurred section at will.
animation freak November 17th
great man its a cool and nice one.
( )hd November 18th
Nice tutorial – thanks.
( )Freelance December 3rd
I’m not native english but I understand very well english, but for the word “spoonfed” utilisation is very creative. Keep it up !
( )Andrey December 14th
Nice!
( )But looks that Vixta
kashif December 29th
super hit very nice tutorial. i like it
( )bacho January 3rd
WoW, very nice tutorial thanks
( )=====================
I’m from Georgia (it’s Country)
Chin January 6th
Really well structured tutorial.. thanks
( )Richard Leik January 10th
Very detailed tutorial, easy to follow. Good job!
( )Thiago B January 18th
You can get the Segoe UI vista font on Windows XP by installing Windows Live Mail.
( )ladeeart February 3rd
very inspiring, and very cool prof.looking!
( )7stringuzr February 11th
cool
( )MirazTutorials February 15th
Aint to hooped of the functionality of windows vista but it does have some neat looks
( )Nadia February 16th
awesome! just what I was looking for! thanks a lot! exelent tutorial!
( )dulapior February 19th
great tut
( )Awank KostBlogger March 18th
wow…..it’s a simple but nice tut…..
awasome….!!!!
( )Chandan Chakraborty March 24th
Thanks
( )chandan chakraborty March 24th
There’s a mistake in the text at STEP 4:
The text says: “… and apply a Gradient Overlay at 90 degrees between #676a6d and #4d6672 …”, but the image shows another value of the gradient: #afb1b2 (= image) instead of the text value #4d6672.
( )As the value mentioned in the text will result in a much too dark divider, I think the value in the image shown at STEP 4 is the right one.
Jeremy Cassisi April 12th
Very simple with such a nice finish!
( )alice May 26th
nice! tks :0
( )Rapsy Tee May 27th
It’s kul… Good work!
( )saswat June 3rd
Very Nice……………
( )Prasanna Vignesh June 4th
great tutorial, This is my first photo shop sample
Its come so good….
Thanks
( )Mike June 8th
awesome
( )Andyweb June 12th
This’s good ~!!! It’s beautiful~
( )Jai June 16th
Simple Elegant and Really Beautifulllllllllllllllllllllllllllllllllll!
Thanks for the tuto.
( )Tod June 20th
Simple and excellent stuff, thank you
( )neighbour July 16th
i dont know whats wrong but the blur effect doesnt seem as nice as it does here
thats how mine ended up http://img520.imageshack.us/img520/3346/1607.png
i tried the alternative way of adding the shadow (duplicating the shape, giving one shadow and other one blur) but it doesnt look as nice as here also
any ideas about that?
great tutorial though, thanx
( )Moe Moe August 19th
thanks for sharing your knowledge, at least you’ve done knowledge donation in your life……………….thank you.
( )Florian August 27th
Thank you very much! I am using this idea on my side in combination with the menu from this site: http://web.madeofwin.de/artikel/web20-navigation-xhtmlseocss/index_SEO.html
( )manoj September 7th
very poor its not a great design. i think u need more practice.
( )Florian September 12th
Soory but that’s not true at all!
( )Why more practise? That’s a fresh and stunning design!
CROM September 14th
The fact that there is so much dialogue appearing implies to me that this tute has done its job. It has illuminated; evoked and made us all think.
To pipe in on the topic of `politeness’ = I think that it falls upon the shoulder of the visitors to be polite and thankful for what they get. I hope you do not change the name and people get over the `cover’ and look in the book.
I like the word gorgonlza, but its taste offended me a little…yet still I just can’t stop saying it….!!
The tute itself is well presented and the processes I learnt from it have been applicable to a number of workflows.
Thanks for taking the time.
( )Danny October 1st
I’m in love……with your skills that is ;D. This is only my second comment (I think), and my search here is only the beginning. Your work is extremely remarkable and I have so much more to take in. This is awesome, now I have someone who is on my level….(haha lol I’m no where near, AHEM!! I mean, I’m almost there ;D)
As always, keep up the great work and look after yourself, you are important person in my book
.
CHEERS
( )Alfie Punnoose October 2nd
good tutorial with excellent step by step screen shots. But I think the most difficult thing is to get a good background picture :p . That’s what makes the whole thing stand out. Do you know any sites that provide royalty free high resolution pictures?
( )Delftdirk October 2nd
Its funny that in every tutorial you see people who say “this is only for beginners” or “stupid tutorial, too simple”
I have a question for all those peoiple:”if you are SO good……. why are you reading tutorials ?”
Thnx for this tutorial, very nice learn some new things.
( )Donald October 21st
Ha, very true. I liked the tutorial, and unlike some people I thought the blue rollover effect was very pleasing to the eye.
( )tutorial blog October 30th
thank for tutorial.
Can I post in my blog.
( )Thank agin
burakeren November 8th
yess very good
)
( )ty
Voiparty November 27th
beautiful professional results with a minimum of fuss – love it! Well done!
( )JH November 28th
Worst tutorial I have ever seen. Makes zero sense.
( )Tronhaim December 7th
Hi! I am from Russia… Simple, but nice
( )il Sindaco di Notiziopoli.it December 10th
wow, simply and wonderful!!!
( )compliments
wexx January 27th
Just some comments on Step 7.
Instead of using the Magic Wand tool to select the inside of the Rectangle, you better use ALT+Click on the Rectangle-layer (without Rasterizing that layer).
That way you won’t have that sharp and jagged corners.
Also; If you put your layer-styles on the Rectangle-layer (non-rasterized!) and set the fill opacity to zero, you’ve got way more freedom if you ever decide to change the background image.
( )Sam February 2nd
Thank you for this tutorial. I enjoyed learning how this was done. Gives more ideas to play with.
( )hecooo February 3rd
It is so cool !!!!!!
( )左撇子 February 5th
很好 又学到了不少东西 （so nice）
( )