RIATMP1154 – Colorful website menu bar
Here is another Photoshop tutorial for how to make a colorful attractive website header/ menu bar/ button. I hope you are going to like this tutorial. Already in my earlier post I have used this menu bar to create a web design for a corporate or business website. You can also see that posting to visualize how this menu bar is going to look with a web design. To refer that please see my other posting RIATMP1151.
Create a new Photoshop document with black background. Create a new layer and name it red. Choose the Rectangle Marquee tool, draw a rectangle and fill with any color. It doesn’t matter what color it is because we’ll add Layer Styles. Now go to Layer/Layer Styles/Gradient Overlay. For reference please follow the image shown bellow.
Create a new layer and name it blue. Now right click on the red layer and select layer transparency. Come to blue layer and fill that selection with any color you want. Now go to Layer/Layer Styles/ Gradient Overlay. For reference please follow the image shown bellow.
Now we need to make the glow on blue button. For that choose the elliptical marquee tool. Now draw a proper circle by pressing shift + alt. We have to crop this selection to align with our blue button. So go to Rectangle marquee tool; then press alt and crop the excess part of that circle. See the reference picture.
Now fill that with color (#7db8c4). Choose the gradient tool, set it to the linear gradient and then open the gradient editor. Choose “foreground to transparent”.
Now we will make the orange button. For that make a new layer and name it orange. Then select the layer transparency of layer blue and come back to orange layer and fill that selection with orange color. Then go to Layer/Layer Styles/ Gradient Overlay. For reference please follow the image shown bellow.
So you have all 3 colored buttons. Select 3 of them and make duplicate layers. Now merge all 6 layers into one layer and name it button.
Now we are heading to next part of this tutorial. Yes its time to make thinner rectangle section. So go to Rectangle marquee tool and draw a thinner rectangle in a new layer. Fill it with any color. Then go to Layer/Layer Styles/Gradient Overlay and Outer Glow. For reference please follow the image shown bellow.
Now some portion of this bar you have to change color into red shade and some portion orange as our big button goes; for that simply go to Image > Adjustments > Hue / Saturation and change color. Then add text as you want. That’s it. Our colorful header / Menu bar is ready to use for your next project. I hope this will help you. And if so please share this post with any BOOKMARK Site. And of course I always like to read your comments. Thank you. Cheers!
