In this screencast, you’re going to learn how to create one for yourself. In addition, I threw in a few more ultra-convenient keyboard shortcuts to help you get around Photoshop in style!

Click the “Read on…” link below to view the screencast:

In this screencast, you’ll learn the steps I took to make that fake tag. Since the screencast is small and a little hard to see, I’ve included the larger, final image.

Click the “More…” link below to see the screencast:

What does that mean?

Take an image. Any image. And ask Photoshop to increase the image’s size by say, 200%. This is what you’ll get:

As you can see, after the image was increased to 200% of its original size it became jagged, blurry, and uncomfortable to look at for any length of time. (And yet, there are millions of websites on the Internet that use such images!)

How could our beloved Photoshop do this to us?

Photoshop must “fill in the gaps”

In order for Photoshop to increase the size of an image it must add extra pixels to fill in the gaps. Now, if you are only increasing the size of your image to about 120% of the original, then a little bit of sharpening will (in most cases) produce an acceptable image. But anything larger than that and no amount of sharpening can make a passable and eye-pleasing result.

Go from big to small

In a perfect world, you would always have at your fingertips an image of the exact size you need. But as experience has taught me, the world isn’t perfect — you’ll have to re-size your images 99.9999% of the time. Since this is the case, it’s much, much better if you can find images that are LARGER than what you need and then decrease their size. Take a gander at this example:

To shrink an image’s size, Photoshop must take away pixels to make the change. This creates a much better result. The only thing you need to be careful of is shrinking an image too much — which will result in an image that lacks quality and contrast.

What to remember:
If you can’t find an image that is the exact size you need for your design, then try to find an image that is a little larger than what you need. You’ll be pleased with the results (and so will the visitors to your website!)

Which reminds me of a Photoshop joke…

Person A:
How do you know when a newbie has been using Photoshop?
Person B:
From the scissors scratches on the monitor when he tried to cut the image.
You:
Uncontrolled laughter.

All dumb jokes aside, in this second screencast I’ll take you through some of those unseen Photoshop keyboard shortcuts as well as the nifty little cut, copy, and paste tricks I was using. (You can put the scissors down now. )

Click on the “More…” link below to watch Screencast #2:

Just to let you know, this is “Reality Screencasting” — which means it is completely unscripted. You’ll see my little mistakes, my periodic goofs, and hear the word “Ummm…” at least a thousand times. I did this for two reasons: 1) to let you see the real work flow when using Photoshop, and 2) I’m just too lazy to do multiple takes and then edit them together.

You won’t see any award-winning graphic designs in this screencast (I’ll save those for later) but you will learn exactly what you need to get started using Photoshop.

Without further ado, here it is!