Rapid Fire #6: Sticky Notes

Sticky Notes

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 (Icon) 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 (Icon) or Numeric Transform (Ctrl+Shift+T) to simulate a spontaneous placement of the note.

Little piece of paper

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 (Icon) 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”.

Gimme some curves

Adjust each of the new curve points, as well as the bottom corner points of our base shape using the Subselection Tool (Icon) to mimic a lifted edge look. Notice below how the left part of the bottom edge is more curved than the right part.

Lift the edges

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.

Edge gradient

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.

Finishing the edge

* 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.

Lifted edge highlighted

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.

Edges casting shadows

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.

Writing it down

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.

Sticky Notes

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.

34 Responses to “Rapid Fire #6: Sticky Notes”

Comments are currently closed.