UPDATE: Picnik is closed. Picmonkey.com works similarly!</p>

Getting images the right width and height are quite important in web design. I remember learning this the hard way when I was trying to create banner text for a slider content plugin for WordPress which called for images of the same size. Lacking any background with visual graphic tools beyond Microsoft Paint, I stumbled my way through it by approximating the size of my banner using post-it-notes and my Microsoft Paint program as an editor.

Luckily, I later discovered that there’s a free tool resizing tool for those who lack a copy of Photoshop. Here’s what you need to do:

1. Go to picnik.com
2. Click on “get started.”
3. Upload a photo.
4. Click on the “resize” button to make it scroll down. Now you can reformat the image you uploaded to any size you want. The first field signifies the width, and the second field signifies the height. So 49 x 51 would be equivalent to 49 px (or pixels) wide, 51 px (or pixels) tall. In HTML, you might end up doing the same thing by typing <img src=”URL of Image” width=”49″ height=”51″>.
5. Click “apply” and “save.”</p>


There are also a few other cool effects in Picnik that let you put text on your image, change its coloring, doodle on it, etc. Have fun clicking around!


blog comments powered by Disqus
  • Hi, I'm Linda! I enjoy going to tech meetups, learning web development, and blogging about the learning path. Follow me @LPnotes

Subscribe to The Coding Diaries