Web Courses Academy Blog

How to create an easy and funny sticky-Post it!

Author: Carl Heaton
He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.
sticky-note
Quick jump to topics
Sharing is caring

Laura from Web Courses Bangkok is here again this week to show you how to create a very easy Sticky-Post it. You can use on your website, or on your graphics.


Those of you who have never used a post-it in his life…raise up your hand! In this very easy tutorial I will show you how to create a digital sticky note. You can use it everywhere: on you website, on your graphics. So cute!

This is what we’re going to do:

Here is how to make it:

1. Open a new file on Photoshop 400 x 400 px, 72 dpi.

2. Create a new layer in the layers window and named it “Post-it”.

3. Choose the Yellow color from the Swatches window, then select the Rectangle Tool from the tool bar on your left-hand side and drow a rectangle in the Post-it layer.

4. Now click on Edit in the menu bar, then Transform Path > Warp. A grid appears on your shape. Click any one of the black circle and on the squares on the corners, and deform your shape as I’ve done.

5. Right-click on the layer “Post-it” and Duplicate it. Double click on the layer Thumbnail and choose black color.

6. Drag the copied layer below the original Post-it layer, and press Ctrl+T or go to menu Edit > Free Transform to transform this layer. Hold down Ctrl and click and drag the top-left control point right under the Post-it margin. Drag the others control points as shown and click Enter:

7. Reduce the opacity of the copy layer to 40%. Select the Gaussian Blur filter from the Filter menu and set 2,7 pixel Radius.

8. Right-click on the Post-it layer and select Blending Options. Apply the Gradient overlay with the following settings:

  • Opacity: 100% – Normal
  • Gradient: from #f4db42 in location 0% to #ffec69 in location 100%;
  • Style: Linear (Align with Layer – checked)
  • Angle: 72º
  • Scale: 100%

9. The Post-it is done! Now, if you want to add a note, just select the Text Tool and type the text you want. And if you want to make it more realistic, add any background picture.

Weel done!

More great articles
There is more where this came from
Join our monthly newsletter packed with course dates, latest articles, free resources and job opportunities

Sorry. You must be logged in to view this form.

Promise to only send you useful interesting newsletters once a month.