Creating ribbon-style button with Photoshop (best for Join-Now/Register signs)
admin on April 5th, 2012
Recently I was looking for attractive "Join Now!" button.
I was trying to find Photoshop tutorial with keywords like strip, tape and etc. Got some interesting options for ribbon word.
...but nothing what I need.
And rapidly found this button that could perfectly fit in my layout. It's a vector image, but it's possible to make something like that with Photoshop.
I was googling for any tutorial for about an hour, but got nothing similar.
I decided to make it myself using all my little experience with Photoshop.
Here is what I've made in the end:
So, here are steps for Photoshop.
1) create an image, set background similar to your site's header
2) create desired shape (rounded rectangle)
3) add your text (Join Now / Register / SignUp and etc.).
I've set it to "Subscribe!".
4) rotate both (shape and text) to about -10..-20 degrees
Go to Edit->Transform->Rotate.
rotate both to about -10..-20 degrees
Fix text position using arrows on your keyboard.
We could merge both layers, but we'll loose ability to change text later.
Text we could add later, but in this case we wouldn't see what dimensions of button we need.
5) Rasterize shape and cut right side
Cutting right side
6) create ellipse shape, move it to the right bottom of main shape, rasterize this ellipse and remove unnecessary left part from it
Moving to direct position is like a jewelry work 
I've used zoom for that for sure. (You can use CTRL++/CTRL+- hotkeys)
7) copy our cutted ellipse
move ellipse to the right top corner of main shape
fill it with Gradient tool (white->gray)
In the properties for gradient you will find 4 bars. 2 top bars for Opacity, 2 bottom bars for colors. You can add your own bars, or move existent.
8 ) create rectangle to knock into one shape both ellipses
Edit rectangle for best fit and Merge it with red ellipse.
9) add shadow to the right using gradient tool
Create new layer for that, click with CTRL on our shape and fill it with gradient (set color Black, opacity 50% for first point and 0% for second)
10) add shadow for our main shape
Right click on Shape 1 Layer and choose Blending options. Check drop shadow, choose preferences.
We need to separate shadow from main layer. Now make right click on Effects, and choose "Create Layer..."
(This trick I found here - Better Drop Shadows)
If the notice appear, just click Ok.
Now you have your shadow on external layer!
So choose this shadow and use warp on it.
Drag right-bottom joints to down, press Enter when done.
Now your sign is much more realistic!
Cut your shadow to the right (otherwise it will appear on your side-background).
11) Select main shape Layer(Shape 1), choose Blending options and check Stroke.
Set options like on scrinshot.
12) Add Stroke to our top cuttered ellipse (see step 11)
Set options like on scrinshot.
Move stroke to external layer (see step 10)
remove 1px line to the left of figure.
13) Last step - make it glossy
Create new layer, select it and click on our main Shape 1 with CTRL.
Choose Rectangular Marque Tool. Unselect right half of the shape with pressed ALT.
Now use Gradient tool on our selection with colors white->transparent
Set Opacity to 25-30 for this layer.
Done!
All you need is add this button into your HTML template. Ask me here if you need HowTo for that.
PS:
for Professional Designers: I'm sure that you know better ways for some steps. Will be glad to see your proposals!
for Newbies: I know, tutorial isn't perfect. I'm ready to answer your questions if something not clear for you.
April 12th, 2012 at 12:48 am
Wow, thank you for such a great post!