Bleah! More glossy crystal buttons and mirrored text! If you're anything like me, your reaction these days to the Web 2.0 aesthetic style is a cry of dismay and the gesture of your finger in your mouth in a gagging motion. Ten years from now, the world will look back on the currently popular art style as "the disco era of the web". First I was afraid; I was petrified. Kept thinking I could never live without you by my side...
But I know one thing that is guaranteed to boost your opinion of Web 2.0 graphics: put some money in your pocket and put you in charge of buying some logos for your company. Suddenly, you become so conservative that even Ted Stevens would go "Hey, loosen up, dude!" If you work in graphics right now and try to do ANYTHING original, you won't sell it. Clients go, "What's that? That doesn't look like anything I've seen before. I don't trust it. It looks daring. Can't you just draw me something that looks exactly like every other website out there?"
So, Web 2.0 graphics. Because the peasants will want their gruel.
Mirrored Text
- Make your text. Color it and Ctrl-Shift-C to make it a path.
- Ctrl-D to duplicate it, hit 'v' to flip it vertically, and move it below.
- Change its color to a gradient, starting from opacity about 128 to 0. Use the path edit to make the gradient horizontal and go not quite to the bottom of the mirrored text.
Outlined Text
- Make your text. Color it and Ctrl-Shift-C to make it a path.
- Ctrl-D to duplicate it, hit Ctrl-Shift-right parenthesis to make it outset.
- In the fill and stroke dialog, turn off fill and turn on stroke.
- Alternately, you can just keep the text the same size, turn on stroke, turn off fill, and make the stroke nice and wide and a different color. This is because path outset sometimes doesn't follow the lines very well. It depends on the font.
Shadowed Text
- Make your text. Color it and Ctrl-Shift-C to make it a path.
- Use the plug-in. Effects-> Generate from Path-> Blur Edge. You will have the shadow selected and on top of the text. Hit 'end' to move it below the text layer-wise, then use the little arrows on the selection box to make it shorter.
- Click the selection box once to toggle the arrows, and use these *other* arrows to skew the shadow to the side. Use the cursor arrow keys to move it into position.
Crystal Balls
Example - also every single computer screen in the entire Universe.
- Make a ball. Give it a radial gradient. Move the gradient off-center with the path edit tool.
- Ctrl-D Duplicate the ball. Make the top one white and then a linear gradient from white alpha-255 to transparent alpha-0. Hit '<' a couple times to shrink it a little.
- Resize this highlight a little more and move it up.
- Sandwich whatever icon you wanted between the ball and highlight layers.
Two-tone Text
- Make your text. Color it and Ctrl-Shift-C to make it a path. Ctrl-D to duplicate it.
- Draw a path/box that overlays the bottom half of the text. Select that and the top copy of the text and hit Ctrl-Shift-* (Control-asterisk) to make it an intersection of the two objects.
There. If you look around, you'll notice that a good three-fourths of the Web 2.0 logos out there are nothing but one of or a combination of two or more of these effects. Now, go forth and open your own logo-design business. Don't get too excited; every third-world playboy with a pirated copy of Illustrator is furiously selling these styles of logos to companies for five cents each.
Comments:
this website show the tutorial how to draw in inkscape
And, other than the cheesiness of combining everything into one. For example do we really need shadows AND reflections? I actually a think it's pretty neat. Actually, I don't like the purple either. If it was was outlined with either shadow or reflection and keeping the guy with the tongue - I think it's pretty neat.
In a tangential note, I like the outline text and it may liberate me from having to use Sony Screenblast to have sane end credits in my videos. In other words, credits that can go over video and still be readable.