Discover how to create stunning photo manipulations in Photoshop. In this course, you'll learn everything from photographing models to creating dark conceptual artworks. If you enjoy our photo manipulation tutorials, you will absolutely love this course.
Add some text to it (I used Arial font for letters and Georgia font for numbers for I love it's text numerals) and eventually apply some simple shadow with blending options. Here's finished Call To Action button.
Now we'll create simple shape for menu items. Add guide on top of our call to action button, to align shape with it.
Now create a rectangular shape (try to use same radius as for button) all long the layout so it will touch the border guide. The height of the shape does no matter, but try to make it longer than a button. Use white color.
Rasterize the shape. Then make a selection from it (CTRL+Click on thumbnail), go to Select > Modify > Contract and apply a contract of 1 pixel. Select some marquee tool (any, just press M) and move a selection 30 pixels down (with arrows on your keyboard, hold SHIFT to move by 10 pixels rather than by one).
In the end hit DELETE so you'll get the following:
Make a long rectangular selection and delete also the stripes (that are left after the contraction) if they are too long.
Now just add the menu items and it's finished. I also added small noise to the finished shape, but not so hard as a background so the shape is still noticeable.
Step 7 - Main menu hover effects
The menu is actually created, but we also want it to have hover (and for one item- active) effect. We will make a mock-up in Photoshop of some sample hover and then in future steps we'll port it to css. The active effect will be created for login panel. Create a background for this item the same way that we have made an orange button next to it. Just don't add shadow and make border only on top and bottom edges. The rest can be fully reproduced.
You can hide this layer now on. We just know that it exists. Alright, pick dark color, like #2c2c2c and make a shape along the guides. I made it for 'About' menu item, but it is best to choose the longest one (if they are declared). Also change the font color of part that is theoretically hovered to light gray: #ededed.
And border, so it will look more attractive, yet will be pretty insensitive for scaling its width.