Icons in paint.net

Tutorial on how to create circular glossy icons using paint.net
(or playing about with Bootstrap for an hour)

Step 1 - Getting started

  • Open paint.net and create a new document with width equal to the height
  • Select the whole image by pressing Ctrl + A
  • Press Delete to remove the white backround

Step 2 - Creating the shadow

  • Select the circle selection tool (s)
  • Click and drag a circle selection from the top left to bottom right of the image, so that all the circle touches all 4 sides of the image

  • Using the gradient tool, select radial gradient
  • Expand the colour picker menu to reduce the opacity of your colours. Here I used 70 for the black and 200 for white, you may wish to choose your own!
  • Keeping both handles within the circle create a radial gradient

Step 3 - Add the primary colour

  • Add a new layer underneath the current one (without de-selecting the circle)
  • Use the paint tool to fill the circle with the colour of your choice

Step 4 - Apply the icon of your choice

  • Add a new layer in the middle of the current two
  • Paste in a image which you wish to use
  • Resize and tweak to your hearts content!

Step 5 - Finish up

  • Go to Image > Flatten or (Ctrl + Shift + F)
  • Save in PNG format
  • Use in any webpage or document you want