Tutorial Outpost Blog

How to Make a Post-It Note

So you want to make a posit-it note? A note, a photo, anything - but posted on a wall for example. The basic technique to do this is quite simple. Let me show you how. First, make a shape you want to turn into a posted item on a special layer called “message”.

How to Make a Post-It Note

Now go to Edit > Transform > Warp. You’ll get nine points on your item. Dragging them around give your item a little perspective, so it does look more three dimensional.

How to Make a Post-It Note

Now duplicate the “item” layer and name the new duplicated layer “message shadow”. Drag this layer beneath your original “message” layer. Now, right click on “message shadow” and choose blending options. In these options under the drop shadow tool choose the look of your item’s shadow. Preferably, put “0” under distance so you get the shadow all around your item.

How to Make a Post-It Note

This is what you get.

How to Make a Post-It Note

If you look at your layers window, this is what you should have.

How to Make a Post-It Note

With the “message shadow” layer selected go to Layer > Layer Mask > Reveal All. Make sure you have the new layer mask of the “message shadow” layer selected.

How to Make a Post-It Note

Now using the gradient tool (with a selected default white to black gradient”) make a gradient from the top to the bottom of your message.

How to Make a Post-It Note

This is what you should have looking at the layers window.

How to Make a Post-It Note

Now you have the basic form of a posted item.

How to Make a Post-It Note

As you can see, the “magic” is in the shadow. Since shadows act up if you try to use this gradient technique on the top layer, you always need to use a special shadow layer. With a bit more work, a few more drops of color and some text, you can make a very nice stick-it note.

How to Make a Post-It Note

Download the PSD used for this tutorial.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • DZone
  • BlinkList
  • co.mments
  • Furl
  • Ma.gnolia
  • Netscape
  • NewsVine
  • Reddit
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati
  • Fleck
  • Shadows
  • Slashdot
  • TailRank

12 Responses to “How to Make a Post-It Note”

  1. shawna Says:

    you didnt even leave instructions on how to make a customized layer..

  2. Steph. Says:

    Very Cool! …I’ve always done this sort of thing a different way. Thanks

  3. lace Says:

    Nice but a post it note doesn’t need a piece of tape at the top.

  4. asdfdas Says:

    Rofl yur right lace. Yeah be more detailed next to btw. Ty for tut.

  5. TT Says:

    looks good! This is another way i can make this

  6. Jake Says:

    Nice one. Simple and looks good. Combine it with a good handwriting font and your sorted.

    Another simple technique I used when building the SchoolDisco.com website is write a real post it and then scan it in :)

  7. M Says:

    Noo, i didn’t get it. My version didn’t have the “warp” neighter, so I think I’ll use Jake´s real-post-scan tip;)

  8. Y.Y Says:

    I gat the same result like yours
    simeple and looks good like Jake said
    thanks, maybe i’ll use it =]

  9. Sub__Zero Says:

    very simple and works perfectly :)

    thank you !!

    greetings from Chile ;)

  10. InVion Says:

    I do edit > transform > and I have Scale, rotate, skew, distort and perspective… no Warp. I have turn 180º and stuff, but no Warp… HELP!

  11. Alessandra Says:

    Does anyone know how to create a full design with post-it notes? I’ve seen people make faces using different color post-its. Please help!

  12. Hannah Says:

    What photoshop is this for? I have paint shop pro 9 and it doesnt work for me. ):

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Check out these Urban Vinyl Toys and Collectibles!