Find » Technology » Tutorials » Photoshop Web Layouts - Blue Button...

Photoshop Web Layouts - Blue Button Flower Menu

By Jasmine Starr, published Dec 13, 2006
Published Content: 1,190  Total Views: 1,552,310  Favorited By: 75 CPs
Embed:  
Rating: 3.1 of 5
In this Photoshop Tutorial I will show you how to create the Blue Button Flower Menu that I have created. Please see the image that I have provided to see the ending results. There are four parts to this menu. First we will create the border of the menu. Then we will create the button. Next we will put the flower on the button and last we will add the text.

How to Create a Blue Button Flower Menu in Photoshop

First, we will need to create a new canvas. Create it about 500 pixels by 500 pixels. You can crop it when you are done. Set the background to white.

Now we will create the Border for the menu.

Create a new layer and name it Border. Select your Rectangle Tool and draw a rectangle long ways on your canvas. Judge the length by about how many buttons you need. You can shrink the border at the end if needed.

Right click on your Border Layer and Select Rasterize Layer. Right click on it again and click Blending Options. This is where you will apply the effects needed to create the border.

Bevel and Emboss

Style - Stroke Emboss
Technique - Smooth
Depth - 700%
Direction - Up
Size - 4
Soften -0
Angle - 120
Use Global Light - Unchecked
Attitude - 65
Gloss Contour - Linear
Anti-aliased - Checked
Highlight Mode - Screen
Color - White
Opacity - 100%
Shadow Mode -Hard Light
Color - Black
Opacity - 30%

Contour

Contour - Half Round
Anti-aliased - Checked
Range - 60%

Stroke

Size - 7
Position - Inside
Blend Mode - Normal
Opacity - 100%
Fill Type - Gradient
Color - This part is a little tricky but you can do it. Please see image two if I confuse you. Click on the gradient box to change the color. Click on the Copper Gradient and change the colors to the following colors from left to right. # 003e9a Location - 0% > 1b76ff Location 32% > 36bfff Location 54% > 004ab9 Location 100%
Now click on the first color starting from the left and enter 0 in the location field. Click the second color and enter 32 in the location field. Click the third one and enter 54 in the location field. Click the last one and enter 100 in the location field. Again, if this confuses you, please see image two. I will try to better explain it on there.

Style - Shape Burst
Angle - 90
Scale - 100%

Photoshop Web Layouts - Blue Button Flower Menu
Photoshop Web Layouts - Blue Button Flower Menu

Image 2

Credit: Jasmine Starr

Copyright: Jasmine Starr

Takeaways
  • First we will create the border of the menu.
  • Then we will create the button.
  • Next we will put the flower on the button and last we will add the text.
Did You Know?
There are four parts to this menu.
Comments
Type in Your Comments Below - (1000 characters left)
Your name:

Submit your own content on this or any topic. Get started »
Advertisment