Sticky notes are little pieces of bright-colored paper with an adhesive strip on the back, allowing you to jot down reminders, checklists, or *gasp* passwords and post them onto a surface. This Adobe® Fireworks® tutorial will show you how to recreate them digitally, with a certain degree of realism, for your own design projects.
The Paper
Start out with a clean canvas, and use the Rectangle Tool 
to draw a square base shape. Give it a pastel color, similar to that of a real sticky note. Rotate it around 10-15° using the Scale Tool 
or Numeric Transform (Ctrl+Shift+T) to simulate a spontaneous placement of the note.
With the base shape still selected, Ungroup (Ctrl+Shift+G) to turn it into an editable path (thanks to Jeriko One for pointing it out), and use the Pen Tool 
to add curve points to the left, right, and bottom sides. This will to allow us to create the illusion of curving paper towards the bottom portion of our sticky note, while keeping the top portion stiff and “stuck to the surface”.
Adjust each of the new curve points, as well as the bottom corner points of our base shape using the Subselection Tool 
to mimic a lifted edge look. Notice below how the left part of the bottom edge is more curved than the right part.
The Paper Edge
We now start adding some highlights and shadows, starting with a paper edge detail. Give our base shape a gradient fill going from a slightly darker shade of the original color going back. Position the gradient to originate from the lower-left corner going towards the center of the base shape.
Clone the base shape (Ctrl+Shift+D) and revert it back to its original solid fill. Nudge the points of the cloned shape as indicated below to reveal the gradient of the base shape beneath and create an illusion of a “shadowed paper edge”. You’ll want to zoom in (Ctrl++) on the cloned shape to fine-tune your nudges and maintain a constant “edge width.” Drag the upper-right and right-side points inwards to avoid overlapping anti-aliased edges* with the base shape.
* This is to ensure that the edges of the base shape stay smooth, as overlapping anti-aliased diagonal edges can create a faint but unsightly jaggedness.
The Highlight
With the cloned shape still selected, create another clone for our highlight shape. Fill it with a white (75%) to white (0%) gradient, going from the lower-left corner to about one-third from the top and left sides of the base image. This gives the effect of our lifted edge being lighted from above.
The Shadow
We again clone our base shape and place the copy in the bottom-most layer. Give it a solid black fill, set its opacity to 35%, and apply a Gaussian Blur live effect (Blur Radius: 2.5). This will be our shadow shape.
We only want the lower part of the sticky note to cast the shadow, so use the Subselection Tool to tuck the upper corner points of our shadow shape under the base shape. Drag the lower corner points downward to make it look like the lifted edges of the sticky note are casting a shadow over the surface. Adjust the remaining curve points to smooth out the shadow shape.
And Finally, The Text
Finally, we add some writing onto the sticky note itself. We use a handwritten font, such as Greg’s Other Hand to make it all the more believable. (No Comic Sans, please.) Additionally, we type in the text as separate lines, then ever-so-slightly rotate each line for that genuine handwritten look.
When you’re done, just group everything up (Ctrl+G), and it’s ready to copy-paste into your design project. Sorry, but you just can’t pull it off the screen.
Note: Extremely narrow corners in fonts and shapes can cause Adobe® Fireworks® to render some stray pixels and spaces, so be sure to do some adjustments and retouches after everything is set up.
Tips: For a more realistic paper look, group the base shape with the cloned shape above it, and try blending in a paper stock texture. For a more convincing handwritten text, vary each letter’s font size by about 2-3 points.
Need a quick sample to study? Download the source PNG (tutorial06.zip, 83KB) for this tutorial.
Thanks for sharing, I often come to your site to see what you’re up to.
Have a good week.
Wow, thanks. The pen tool made me stay up for 3 extra hours tonight. Still not great at it. Thanks so much for this site. -Tom
Tom: I like how you used the original Post-It color for the sticky note in aNewJob.com. It makes it look more convincing. Though, using a handwritten font for the text would be strongly
coercedrecommended. :)It seems like I’m too dumb for this… whenever I try to add curve points to the basic shape, a new path is created. Am I missing something?
Ah nevermind, helped myself by turning it to an editable shape (CTRL+Shift+G)
Jeriko One: You got me on that one. :) Thanks for reminding me about that. I updated the steps accordingly.
amazing tutorials :) easy to follow.
hopefully there’ll soon be more :), I’m from Holland and not many people use Fireworks (it’s a shame that they all think it aint powerfull)
waiting for more :)
jeroen
Jeroen: Don’t worry, I’ll cook up some more tasty tutorials whenever I get the chance. ;) About Fireworks’ user base, I hope to see more people become familiar with its unique blend of raster and vector capabilities (and a wonderfully-easy-to-get-the-hang-of interface!), now that its development is handled by the same folks that offer Photoshop.
Love the font. Can you say what it is?
Excellent tutorial, by the way. I’m one of those designers who’s always *wanted* to like Fireworks but never could help myself from fleeing back to Photoshop to get stuff done. Articles like this will help. Thanks!
dashard: the font is Greg’s Other Hand from DaFont.
Hi, this is the first time I visit this site, and it’s a must for bookmark, now that I have a little time for read some of the tutorials. Really thanks for sharing!
Hello, Thanks so Much for the tutorial. I would recomend aligning the top of the font box to the sticky note, giving it a more realistic look. Maybe some screen shots of Photoshop would be great. Thanks!
I love coming to this site to see these cool tricks. Great job!
Sticky tutorial. Never seen something like that before. Thanks!
Thanks for this tutorial.
New to this, so thanks very much for the advice.
Can you upload the sticky paper without the text? I want to use it, but I can’t create it.
“Maybe some screen shots of Photoshop would be great.”
I wouldn’t mind seeing a screenshot of Corel Draw too, and while you’re at it, how about one of Spider Solitaire to round everything off?
great fireworks tutorial. it2s hard to find tutorials for fireworks everywhere like this.
Thanks so much for this tutorial! It will help personalize blog!
Probably my favourite tutorial.
Works great and the effect is stunning.
Thanks for sharing.
Keith D
Hey, thanks for the tutorial!
but not everything is clear: following your steps, there’s a lighter layer that shows the darker edges of a gradient dark base layer below, and it looks like better be visibly turned off. On your version everything’s cool, though.
See how mine turned out: http://dl.getdropbox.com/u/781669/stickynote.png
Vlood: You’ll need to tweak that lighter layer so that the darker edges are paper thin, then you’ll get the paper-edge-shadow effect.
I’ve tried this one and it actually works.
If I can do it… anybody can.
PS what about one with a yellow sticker?
Zafar
Good idea, nice work.
But poor instruction, you wording assuming viewer know whats you thinking too much, like when you say use gradient, there are about 10 of gradient tool, you use linear but you never said.
The shape of the original paper and the clone are not coherent throughout the combination of illustration and wording. Its confusing really.
Thanks guys for the sharing. Nice tutorial and useful tips.
Great tutorial. Thanx a lot for sharing.
nice tutorials to follow!
well explained plus awesome graphics and amages!
this one is the best among the rest!
thanks guys!now i know something about fireworks!
and somehow i can use it!
more power!
Wow. Fireworks is my best. i have tried photoshop and illustrator and find them hard to learn.
you tutorials prove that fireworks is not weak. i wish they wd make the photoshop interface much easier
Very simple tutorial and easy to follow and the results are as expected. thank you.
Can this be done in other graphic program, eg. Photoshop or Illustrator?
I can’t speak for Photoshop (I’m not that familiar with it), but you should be able to do it easily in Illustrator; just adapt the steps to their corresponding AI counterparts.
Used this sticker so many times.
Needs that particular font to look good.
One of my all time favourite Fireworks tutorials.
Excelente blog. Eu só hoje tropeçei em seu blog e queria dizer que verdadeiramente tenho apreciado ler varios artigos do seu blog. Finalmente, vou estar assinando seu feed e espero voltar em breve novamente. Bom trabalho!