Today we are teaching Photoshop for Bloggers at Alt! For those who can make it and for those who can’t, here’s the info that we’re teaching!

If you are interested in learning more about Photoshop or Photoshop Elements (and Illustrator, InDesign, and photography), we have fantastic online classes over at Nicole’s Classes. Right now they are available at 50% off for Alt Summit attendees! Contact us for your discount code!

Without further ado, here’s what we’ll be covering!

If you’re following along in class, download your files here! (This will be deactivated soon after class because we don’t have distribution rights for all these images.)

Photoshop or Photoshop Elements?

Whether taken by a professional photographer or a point-and-shoot beginner, most photos can use a little help. There are many programs that you can use to digitally enhance your photography. Photoshop is the professional standard in the industry. It is powerful, complex, and expensive—and totally worth it if you’re a professional wanting to take full control over your photos (or you can get a great discount like an educational discount). But for many people, Photoshop is too powerful and too complex. Photoshop Elements is much more affordable and is now robust enough to do many of the same things that Photoshop does. It retails for $80 and is a great option to consider if you want to improve your photos without the major investment of buying Photoshop.

Resolution

Resolution refers to the quality of your photo. Since pixels all come together to make up an image, we need to know how many pixel per inch look “right” to the naked eye, so you don’t see any breakdown of the image quality.
The more commonly used acronym to connote resolution is DPI, or dots per inch. This term is actually a printing term, where 300 dots of ink make up each square inch of the picture. If you are viewing the image on your computer screen, then it is PPI or pixels per inch. Both use the same concept and use the same measuring scale, so they are interchangeable. The two resolutions that you need to worry about are 300 DPI and 72 DPI.

300 DPI
300 dots per inch is enough for the naked eye to view a printed image and determine it looks correct. Most contemporary professional-grade digital SLR cameras are capable of shooting an image that is at least 17 inches wide, straight out of the camera at 300 DPI. That means you can print that image and it will look perfectly good up to 17 inches. There will be no detectable break up of the pixels. The image can be sized down with no loss of clarity, but cannot be sized up without risking pixilization (where you can actually see the pixels that make up the image.)

72 DPI
This is the standard resolution for internet and on-screen images. On a computer screen, any resolution beyond 72 DPI is unnecessary because the screen displays the image at 72 DPI (the exception for this is the iPhone retina display, which is a game changer, and we may see screen improvements in the future). You should never save your original files as 72 DPI since this will limit your options in the future. (Imagine if you do all this work to improve your images for your blog and you do not save the full res, or 300 DPI, image, later if you decide to publish a book based on your blog, you will not be able to use the photos that you’ve worked on and posted to your blog. So do all your work on the images at full resolution, and crop down to a web version as the last step in your process. Save both high res and low res versions.)

Determining Image Size
If you are unsure what the size is of an image, open the image in Photoshop and go to Image > Image Size. Here you will see all the relevant info about the image, including height, width and resolution. You can always size your images down but as a general rule you should never size your photos UP.

Contrast: Make Your Photos Pop

Often times (okay, MOST of the time), the picture that comes out of your camera is flat and lacks contrast. You can really make your image pop by improving the contrast. We’ll discuss three ways of doing this:

Levels
Under Image > Adjustments > Levels, you can access a graph called a histogram that represents the shadows, mid tones, and highlights of your image.
The left slider represents your shadows. You want to bring this to the start of the “hill” represented in your histogram. The right slider represents your highlights. You want to slide this right to the end of the “hill” represented in your histogram. Finally, you’ll want to adjust your mid tones by sliding the middle slider left. Don’t go too far or your else you’ll damage your file by losing color information. Just keep nudging it left a little, watching the preview, to improve the image. Toggle the preview button on and off to compare your enhancements to the original. Press Okay when you’re done.

Curves
Under Image > Adjustments > Curves, you can access a line graph that also shows the shadows, mid tones, and highlights of your image.
The most important thing to do is increase the highlights a little and darken the shadows a little, which results in a deeper, richer contrast. To do this, we want to create an S curve in the graph. Plot a point along the line in the upper two boxes, and pull it up and to the left a little bit. Take care to not blow out the highlights (which means that the image will be blown out to PURE WHITE and lose valuable information and details). Now plot a point in the bottom two squares and pull down and to the right slightly. This will create richer blacks. A good way to know if you’ve gone too far is to look at the darkest areas of your photo. If you’ve lost detail and it looks muddy, you’ve pushed it too far.

Brightness / Contrast
If the graphs seem too intimidating and you’d like to do something that may make a little more sense to you, try Image > Brightness/Contrast. Increase the brightness and contrast with “Preview” checked until the photo looks right to you. Remember not to push it too far!

Dodging to White
If you want to remove a white background from an image, you will want to use the Dodge Tool. You’ll want to do this on a photo that has been shot on a white background. (So for example if you are trying to take a person who was shot standing outside in front of a tree, nothing you can do in Photoshop will make this person look entirely natural on a white background.) With the dodge tool selected, look at the toolbar at the top of your screen and turn off “Protect Tones.” (Otherwise you will not be able to get pure white.) Set the range to highlights, which means that the tool will only be affecting the lightest parts of the image. Lower the exposure to around 3-7 percent. To vary your brush size, you can use the left and right bracket keys [ ]. Start using the brush to carefully “paint out” your white background. What you are doing is you are intentionally killing the information, so don’t go into your subject matter too much. Try to keep on the outside contour.
To double check your work, open Levels (cmd/ctrl L) and pull the left slider all the way to the right. This will show you the areas that you have missed. (Hit cancel to exit out of this.)
This is a quick and easy method, but may cause some harm to your image. If you want more information about this, we have detailed instruction in our online classes.

Healing and Cloning

To get rid of distracting elements in your photos, you can use healing and cloning.

Healing Brush Tool
The Healing Tool is great for fixing up skin—which is why the icon is a Band-Aid. The Spot Healing Brush tool is in your toolbar, and works great on the small “spot” blemishes like zits. Simply click the blemish with this tool. This pulls in pixels from around the blemish to even out the area.
Underneath the Spot Healing Brush tool is the Healing Brush tool. To use this, find a section of “good” skin (although healing is not restricted to skin) close to the blemish. You’ll want to be close so that the color matches. Alt + click this section to set it as your “source.” You’re telling the program to copy this section as you “paint” over the blemish. Now as you paint over blemishes, you can see them disappear. You must be careful using this tool around areas of color change or else the wrong color can be blended into the area you’re trying to improve.

Clone Stamp Tool
Next, let’s talk about the Clone Stamp tool. The Clone Stamp tool works like a stamp. It copies a user-defined area of the photo and then stamps it over another area. This is the tool that you would want to use to remove unwanted elements from a photo, like a stain on your shirt or a person in the distance on an otherwise perfect landscape.
It works the same way as described above for the healing brush tool. Simply Alt + click a good area, and then paint over the unwanted element. This can be easy or challenging (or impossible) depending on the size and placement of the unwanted element.
The Clone Stamp Tool works differently from the Healing Brush tool because it creates an exact copy of pixels in the area that you are painting (replacing the previous pixels) while the Healing Brush tool blends what you are painting with the pixels that are already there.

Cropping

You can improve the composition of your photo by cropping. This will create focus on your photo. Use the rule of thirds (place the subject of the photograph in a third of the frame, leaving a good amount of negative space) to make your image more visually appealing. You can find lots of info and examples of the rule of thirds online if you need help knowing what to do for your specific photos.

Once you have made all the adjustments to your photo that are necessary, you’ll want to save at full resolution. But you may also consider cropping the image down to the exact width of your blog column. (If you don’t know the width, you can pull an image FROM your blog INTO photoshop and check the size under Image > Image Size.) With the crop tool selected, simply set the width of the crop to the width of your column (remember to put in PX or else you might set it to 700 inches instead of 700 pixels).

Photo Collage / Combining Photos

You can combine several photos into one image. Do this to make a side-by-side (like before and after) or to create a style board.

For a side-by-side, our favorite method is to open two (or more) images that you want to combine. Choose one and with the crop tool (clear all the settings), drag a box around the entire image. Now, drag left (or right, or up or down) to create extra space (check your background color in your toolbar, since when you double click to complete the crop, this extra space will be filled with the background color). Now go to your other image, select all, and copy (cmd/ctrl C). Go to your image with extra space, and paste (cmd/ctrl V). If you need to resize this image (down, remember, not up) you can press cmd/ctrl T and size it down (hold shift to keep it proportionate). Once you’ve got your images side by side, you can crop again to get rid of any extra space (and to set it to your column width if you like).

Once you have everything right, you can flatten your image in the layers palette (in the pull out menu, choose flatten image).

For a photo collage, open all the images that you would like to combine. Choose a central image, and crop out in all directions around that image to create negative space on all sides. Then copy and paste each image into the main image. Use cmd/ctrl T to resize if necessary. Use the move tool to position the images. If you’re having a hard time selecting things, look in your layers palette to make sure you’re on the right layer (you can ctrl/cmd click images to automatically activate that layer).

Add text with the text tool, and flatten your image when you’re done! Crop to your column width!

For a similar article on product photography, see a post we wrote for Etsy last year!

Today is a great day! Today Make It Pop has been released in the app store and I can finally blog about it!

Earlier this summer, I started Tryangle Labs with three friends—two designers and a programmer—so that together we could create quality, well designed educational apps for children. Make It Pop is the first of what we hope to be MANY apps!

I cannot tell you how much fun it has been creating this app, in all aspects. I wish that I had video of when our programmer Darren first showed us how, without any graphics, he programmed one of the app’s games (popping bubbles) to work. It was just a bunch of circles that generated from a corner of the screen, and if you touched the circles they disappeared. Well, to us non-programmer designers, this was ABSOLUTE MAGIC. The mere fact that we could have ideas, and a programmer could make them work, and all we had to do was create the graphics to make them look good opened a whole new world to us! Creating the graphics for this has also been an incredibly rewarding experience. I don’t know if I can describe how cool it is to draw/design a girl, and then actually be able to interact with her, popping her bubble gum!

It has also been rewarding to watch our own children play with this app. Our kids are below the age where they can understand, “Mommy and Daddy made this!” So to see them choose this app among all the many choices they have (Oliver is very picky when it comes to which apps he’s going to play), and then consistently come back to it again and again over the course of months shows us that we’re doing something right! (Also the fact that Oliver knows what a pentagon and a hexagon is!!)

I really couldn’t be happier today. HUGE thanks to the Tryangle Labs team, Darren, Angie, and Melanie. Melanie lives about 10 minutes away from me, but Darren is in Texas and Angie is in New York, which makes it really hard and not very fun to have a proper launch party (Melanie and I are getting together in an hour to shoot some footage of our kids playing with the app for a little promo video… does that count?).

Make It Pop is a great app for preschoolers that teaches numbers, letters, shapes, colors, and sizes. Check it out!