2582.One thing a designer is called upon to do occaisionally is not to create something original (or wholly original) but to create something that fits in with a design look that already exists.
Latterly, a suggestion was made to me that a page that contained a Paypal donation button needed another button, and this button would deliver a congruent message if it were made to resemble the Paypal button. Here's the button in a bit of context:
In a subsequent section of the webpage, it would read "Thank You Gifts" and that button would lead to a page that has a listing of PBS-style thank-you premiums.
The task presents itself in a series of trivial stages. Thus:
1. Identify the shape.
This button is a recangle with rounded corners. Importing this into Photoshop I make a rounded-corner rectangle path approximately the same shape as the button, which is being kept on a hidden layer for color and shape reference. After doing this, I increased the image size to 300 px wide so I could see things just a little better.
The path is probably hardly visible around the outside of that, but it's there, trust me.
One of my favorite things Photoshop does is allows you to make selections out of paths. When I first learned PS, I used Quick Mask, but when I figured out I could do this with paths, I've not looked back. In the Paths palette, I saved the Work Path and drug it to the "make selection" button on the bottom of that palette and made the selection. Using the eyedropper tool, I sampled the orange-yellow color where it was at its most intense, and filled the selection on a new layer.
2. Create The Button's Foundation.
Here's what it looked like after I did that:
It's hard to see, but the background is transparent. From here on out, it's a rather simple process of building layers. The translucent effect is a trompe l'oeil, as what it really boils down to is layering two gradients over the yellow-orange background. Going to PS's gradient tool, I created a gradient and called it "White, Transparent" (a good idea at this point would be to probably make a "Foreground, Transparent" gradient which would then be whatever I needed it when I needed it but I was in auguring mode at this point and was very result driven, so I crafted a tool toward the specific end. And, of course, PS already has one anyway as a default preset.
But, how to fill in the gradients? That's next.
3. Adding Visual Depth With Gradients
The path that I created to make the main shape will be useful for the gradient areas as well, but I will be changing them. Narrowing them to bring them within the shape and squashing them created two new paths - one for the upper gradient, and one for the lower gradient that is just a bit more squashed than the upper. This will create the effect of light coming down from above.
Gradient one:
Gradient two:
And there's the translucent effect. It's the color plus the white-to-transparent gradient. And it was very simple to do.
The only thing that was required was to place the text.
4. Placing the Text
I'm not sure what font they used in the original button, but It looks like a Helvetica Neue would be close enough and do the trick. So, I sampled the color from the text in the original button and got to it. It too was pretty simple.
Bold obliqued Helvetica Neue bold. Looks pretty close. But we need to take it back down to a proper size (that's 110 px wide) …
I am always amazed at the way you can trick the eye into seeing smoothness by reducing the roughness to a level you can't resolve it at:
But does it work on the page?
Yes, I think it does! Mission accomplished!
No comments:
Post a Comment