How To: Making ZOMG Web 2.0 !!11!! Glossy Badges in Adobe Illustrator

1822.

This technique requires a bit of a trick in Adobe Illustrator with transparency blending.

One of the things that I find so humorous about "Web 2.0" is the way it's expressed as visual design. "Rounded Corners!" "Glossy Buttons" "Gradients!" The word beta pretty much everywere (doesn't beta mean not quite finished yet?)

But we digress. We've had all those for years now and it wasn't a web design philosophy. I'm not the only one who thinks so:

(via Wikipedia) Some technology experts, notably Tim Berners-Lee, have questioned whether one can use the term in any meaningful way, since many of the technology components of "Web 2.0" have existed since the early days of the Web.[

But it does open up excuses to have fun in Illustrator and Photoshop. The layers and blending modes of the two programs allow the artist to come up with depth and dimensional effects that weren't doable even a short time ago, and will make you want to tear your eyes out of your skull if you try it in MS Paint. And now, you have to use 'em or you look like you're wearing 1998's designer jeans.

Two tutorials I recently read gave me quick and easy ways to create Web 2.0 badges ... you know, the ones with the jaggedy edges that tell you there's something afoot that's cool, or something. You can view them here. But, to get down to the nut, here's all it really takes:

1. Make the badge outline. Using Illustrator, get the Star tool. Drag out a star. As you're holding the mouse button down/pen pont to the tablet, press the up/down arrow on your keyboard to increase/decrease the number of points as needed, and (keeping that mouse button clicked down, still!) hold down the CMD key and drag back'n'forth until you get the length of points you want.


2. Copy that badge outline and paste it in place.


3. Using the pencil tool, create a quick, 1-up-1-down wavy line. Group the wavy line and the badge copy and use the Divide tool from the Pathfinder palette. Ungroup that and delete the bottom half.


4. Use Edit>Path>Offset with a small minus amount, say, -2 mm or -5 px or whatever is approprate, to shrink the top half left over (if you have a copy of that behind the newly-offset path, then delete that.


5. Fill the half-part with a white-to-black gradient. Adjust using the gradient tool ... you want it to nearly fade out at the bottom


6. Blend down using Screen (via the Transparency palette)

Et voila! You now have a nifty Web 2.0 badge with which you can beat your friends into submission. Put a snarky saying on it and Save for Web with GIF or PNG formats for the transparent background.

Tags: Web 2.0, sarcasm, adobe illustrator, how-to, tutorial

Powered by Qumana