Grey Content Button

February 14th, 2009 | Tags:

Tutorial Description:

A small descriptive tutorial over creating a new-age Web button.

Ok, Today we will try to make a web button like the following:

————————–
*Note – Throughout this tutorial my Gradient is used with the “Reflected Gradient” options.
You can find this with the gradient tool selected, in the top-left of photoshop.

Step1 – lets created a pretty small document about 165×90
Step2 – I filled my background layer with the color #353535
Step3 – Next, I created a new layer and set my foreground color as #747474
and my background color as #2D2D2D. I made a small rounded Rectangular
tool selection with the radius set at 5px. I make sure “Paths” is selected on
my rounded rectangular marquee tool. After you make the selection, right click
and click “Make Selection” and feather set to 0. Then I picked my Gradient(g) tool
and made a decent sized swipe from about 10 pixels above the selection downward.
I then filled it with some Blending Options. Here are both images to help guide you
along with these steps.


/wp-content/uploads/tutorials/ContentBox2/ScreenShot002.jpg

Step4 – Now, Ctrl+Left Click this layer, to make a selection around it. Now, create a new
layer. Go to the top of photoshop and go to Select>Modify>Contract>2 Pixels. Now,
fill this area with #2D2D2D and use these blending options as settings. Here is also
what I have so far.

/wp-content/uploads/tutorials/ContentBox2/ScreenShot015.jpg

Step5 – Now, ctrl+Left Click our newewst layer. Create another new layer. Go back to
Select>Modify>Contract> 4-5 Pixels. Now fill the background of that layer with
#1E1E1E. Here are the blending options I used, and here is also my result so far.

/wp-content/uploads/tutorials/ContentBox2/ScreenShot004.jpg
/wp-content/uploads/tutorials/ContentBox2/ScreenShot005.jpg
/wp-content/uploads/tutorials/ContentBox2/ScreenShot006.jpg

Step6 – Now, again CTRL+LEFT CLick the newest layer. Then create a new layer. Now Select>
Modify>Contract> 2 pixels. I filled the background of this layer with #4C4D4D.
Here are the options for this layer, and my result so far.

/wp-content/uploads/tutorials/ContentBox2/ScreenShot008.jpg

Step7 – Next, I added a simple font to it. Pixel Font that is. Then, I ctrl+Left clicked the latest layer
with a design on it(not the text layer). Make a new layer, and then I grabbed my Rectangular Marquee tool. Now,what you want to make sure is that in the top left of photoshop, make sure “Subtract From Selection” is selected. Now make a selection like this, going from the bottom of the selection, toward the middle.
This will subtract the bottom half, and leave the top half of the selection.

Step8 – Now that the top half is selected. Press (D) to reset the colors and press CTRL+Backspace to fill this area with white, or you can manually do it yourself. Now turn the opacity of the new layer with white on it to
about 23%. Also, change the blending mode of this layer to “Soft Light”.

Now, Here is what I have so far.

Step9- The main part of the tutorial is now done. I just added some effects to our design to juice it up. I created
a new document, and dragged all of these layers onto it and created multiple buttons going down vertically.
Here is a screenshot of that.

Step10- Next, I created a new layer over all the other layers, and made a rectangle selection like this:

Step1- Then, I just grabbed my Gradient(g) tool, and picked some darker grey, and a mid-tone grey. and made about 2-
3 horizontal swipes with it. I also have my gradient on “Reflected Gradient” Then I duplicated this layer,
and went to Edit>Transform>Flip Horizontal. Then I just used the Move(v) tool, and moved it to the other
side of our document. You can Now use a decent amount of Outer Glow, and set the color to white. Now,
just play with the blending modes and see the different results you can get.

Here is my final result with all the effects added. Don’t forget to try new things with it!

No comments yet.
TOP