Create Web 2.0 Stickers

I wonder how long the Web 2.0 style will be around. All those shiny graphics are great to look at and create, but it can’t last. In some respects, it’s good to capitalize on the trend, but it the same respect it’s good to explore new techniques and styles. Regardless, there is enough demand with the Web 2.0 style to justify a tutorial on some nifty Web 2.0 Stickers!
Notes
This tutorial was created in Adobe Illustrator CS3. Most, if not all, functions should be available in Illustrator 10 and up. Functions specific to Illustrator CS3 will be noted.
Keyboard shortcuts are displayed in orange. ⌘ is displayed for the Command key (mac), with the Ctrl key being the Windows equivalent (not displayed).
Step 1: Create The Sticker and Fold Shapes
Create a box with rounded corners with the Rounded Rectangle Tool. Next, create another box that is a little smaller. Grab a corner of the second box with the Selection Tool (v), hold Shift, and rotate the box 45 degrees. Place the second box on the bottom right corner of the first box where you would like the fold of the sticker. Copy (⌘c) both boxes and Paste In Front (⌘f). Select one of the original boxes and one of the rotated boxes and Intersect and Expand the shapes, creating the fold. Take the second copy of each box and Subtract and Expand them, creating the sticker. Now, select the fold, grab a corner, hold Shift and rotate 180 degrees.

Step 2: Create The Shimmer Shape
Use the Ellipse Tool (l) and draw a circle half way down the sticker overlapping the left, top, and right corners of the sticker shape generously. Copy (⌘c) the sticker and Paste In Front (⌘f). Take one sticker shape and the circle and Intersect and Expand, creating the shimmer shape.

Step 3: Create The Shiny Effect
In this step I am briefly going to explain using gradients to create the shiny effect. If you need a more in depth explanation, refer to Step 3 in my previous post Shiny Buttons Without Blends or Transparencies.
Use the follow steps for the shiny effect.
- Select the shimmer shape and create a Linear gradient with the first swatch in the gradient 20% Cyan and second swatch in the gradient 100% cyan.
- Adjust the gradient with the Gradient Tool (g).
- Remove the borders.
- Select the sticker shape and create a Linear gradient with the first swatch 100% Cyan and the second swatch 100% Cyan and 50% Magenta.
- Adjust the gradient with the Gradient Tool (g).
- Remove the borders.
Again, if that was too brief, refer to Step 3 in the Shiny Button post.

Step 4: Adding Detail to the Fold
Now it is time to give the fold some depth. Select the fold shape and create a Linear gradient. Keep white as your first swatch, select 20% black as the second swatch and remove the border. When you adjust this gradient, start in the middle of the fold shape, hold Shift, and drag out to the bottom right of the fold at a 45 degree angle.
Now the fold is looking pretty good, but to give it a little more depth we can add a shadow to the fold. Select the fold shape, hold down the Alt/Option button and drag the shape slightly down and to the left. Copy (⌘c) the the sticker shape and Paste In Front (⌘f). Select the newly copied sticker shape and the copied fold shape and Intersect and Expand. Change the color of the fold shadow to 100% Cyan and 50% Magenta. Select the original fold shape and Bring It To The Front (⌘ Shift ]). Now you have a fancy Web 2.0 sticker!

Step 5: Expand
These stickers look great with icons or text on them, just experiment! Try adding different colors, shapes, or whatever. If you are to lazy or need some sticky icons quick, go check out some I created on iStock!



Matt
February 29th, 2008
sweet tutorial, and the results speak for themselves.
Mody
March 1st, 2008
Thanks a lot. Very helpful.
Tutoblog: weblog de tutoriales
March 2nd, 2008
[…] Link:Create Web 2.0 Stickers […]
The Swatch Checkersblog
March 2nd, 2008
[…] When you adjust this gradient, start in the middle of the fold shape, hold Shift, and drag out to the bottom right of the fold at a 45 degree […]
How To Make Web 2.0 Shiny Stickers With Illustrator
March 2nd, 2008
[…] To create these yummy stickers, just go here. […]
Joppe Houpt
March 4th, 2008
Hello mate!
I am a beginner with Illustrator and I want to tell you that these tutorials are helping me alot. The explanation is very clear and good enough for a beginner like me. Keep up the good work mate!
Joppe Houpt
Rype
March 4th, 2008
I’m glad there working!
Create Web 2.0 Stickers | Doctorshirt
March 5th, 2008
[…] Here I found something that’s very usefull and I’ve been searching for long time. This tutorial is really good..so please visit the website Vectips. […]
mascot
March 9th, 2008
Very nice, thank you.
Jessica F
March 10th, 2008
Thank a lot, very helpfull and well explained, easy to do even when you’re not an expert !
Jenny
March 11th, 2008
aww this is cute. I’ll have to make some for my blog.
Sava
March 11th, 2008
Great … now that I know how to do this … I will try to do the same in GIMP
petnos
March 12th, 2008
good work buddy, thanks.
Nix
March 12th, 2008
Great howto! Very good work. Keep it going. Thanks!
Simon Dance
March 13th, 2008
Fantastic!
Very web 2.0.. love it!
Simon
custom stickers
March 14th, 2008
This was very helpful…thx
Travis
March 15th, 2008
Wow, thats a really sleek way to do things.
EX
March 18th, 2008
Nice tut, thanx!
Spiritus
March 18th, 2008
Wow man, I totally love your work!
ThanX!
Paul Anthony
March 23rd, 2008
Those are pretty sweet to the beat. Keep up the coolness.
Lorne Fade
March 27th, 2008
Great tutorial, ill be using this!
WhizKidz
March 27th, 2008
Great tutorial ….. thanks, John
Bubbila
March 29th, 2008
Sweet resource. Stumbled.
Quick Reflections In Illustrator | Vectips
April 2nd, 2008
[…] Create Web 2.0 Stickers and Shiny Buttons tutorials have been very popular. With their popularity came many requests for […]
Tyler
April 4th, 2008
Very nice tutorial. The other tutorials i have seen for this effect have been difficult to read and understand. Yours however is readable and followable.
Holly
April 8th, 2008
Thank you very much. A very useful and well written tutorial.
Palaceofgamez.com
April 10th, 2008
Nice tutorial think I might implement it. Check out my website-
http://www.palaceofgamez.com
Cizal
April 10th, 2008
Very nice tutorial. I actually didin’t know that much about Illustrator but i got pretty inspired with doing this tutorial. But I have to say, even though this tutorial isin’t that hard, If you make one thing wrong you could be forced to start over hehe. I actually had to visit other tutorials to realize how some of the things were done. But I’m a noob so that could explain my struggle
Over all, as I said a very nice tutorial!
Thanks, Very helpfull
Antonio
April 13th, 2008
Está muy bueno!!!!
pixey.de
April 30th, 2008
[…] Vectips.com zeigt wie man die beliebten “web 2.0″ Sticker in Illustrator erstellt. Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können. […]
Phodana Media
May 1st, 2008
[…] vectips.com hat ein schönes Tutorial erstellt, wie man die beliebten Web 2.0 “Sticker” als Vektor-Grafik in Illustrator erstellt. Viel Spass beim Nachmachen… […]