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.