Education

Education

This week as I was reviewing homework from my Illustrator 101 students, I was particularly struck by one student’s submission, because her layout and vision were GREAT! As soon as I saw it, I could see its potential. Lindsay did a great job as she’s just learning Illustrator, but she worries that she’s not great at the design end of things. I think that she’s well on her way! Everyone needs to start somewhere. If I were able to dig up my first Illustrator attempts (glad that they’re all stored on a totally dead PC…) they’d look pretty similar, actually! You just need to start learning the program, and then as you start paying more attention to things that you love, you learn what colors work, what style works, and you get great ideas on how to execute things!

Lindsay wanted to use a poster at a party to show guests how to assemble an Italian soda. Sounds like fun! She nailed the layout and the whole idea. And she’s showing great alignment here, as well as use of the shape tools! With only a few changes in color and style, this was an instant keeper!

 

Here are the decisions I made:

1) Because this is Italian soda, I felt that a serif font was a good choice. And I loved putting “italian” in italics. I could have also done a sans serif font on everything but “italian” as well.

2) I brought in a line under the title, just because.

3) Same serif font for numbers (didot). The numbers are HUGE but the color blends with the background so that they are OBVIOUS but not in-your-face. We don’t need to say “step” 1 because “step” is implied.

4) Glass glasses are transparent. So I thought it would be fun to do a white glass on a light background. Not too much contrast in the glass since there’s not much contrast in real life. Filled it with light gray ice cubes made from rounded rectangles. Set the opacity of ice cubes from “normal” to “multiply.” Grouped it all.

5) Quick-copied the glass group. Made a copy of the white glass, pasted in front, and swapped the fill and stroke (so that it was a white stroke, no fill). Set the stroke to the INSIDE of the path only (in the stroke palette). Now I am able to put in a new object between the white glass and the white stroke, creating the effect of filling my glass with liquid.

6) Repeated this for 3, 4, and 5.

7) Drew whipped cream with the pen tool.

8) Drew straw with the pen tool. Set it to gray, set opacity mode to multiply, and made sure it was in front of my glass, but behind my whipped cream. (Had to also make sure my 5 was in front of my whipped cream.)

9) Clean sans serif for the instructions. I chose ALL CAPS because it is easier to design with when you have short stacks of instructions like this.

10) Echoed the title for the final instructions.

 

Okay, Lindsay, just for you, I DID dig up something that I did in Illustrator in the beginning. Are you ready for this?

Yep. That’s right. So keep it up! Like I said, you have nothing to worry about at this point!

 

Education

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!

Education

Just wanted to post a little lesson that I had to learn back in the day and that has blessed my design life ever since. It is about the difference between JPG and PNG (pronounced ping) when it comes to crisp graphics.

JPG is a great file format for photos. PNG is the preferable file format for text and illustrations—anything that has very clean lines. Everyone has heard of JPGs and most people assume that they’re appropriate for any type of image. On the other hand, people are less familiar with PNGs and commonly are concerned about whether all computers can properly process and display PNGs (the answer is yes).

Let me show you what I’m talking about. When you use JPG for clean graphics, there is fuzzy pixel breakup around the edges. Lika-so:


When you use PNG, your beautiful, crisp lines are preserved. Observe:


I have intentionally saved the image at the lowest quality for JPG so that the problem is exaggerated, but this fuzzy pixel breakup will happen to some degree at pretty much any web-quality JPG.

So if you want to look your best, use PNG! When saving PNGs at web quality, the file size is still relatively small, so you won’t need to worry about slow page loading. Feel free to ask me any questions about this. I admit that I’m no expert, but I’m sure you can at least see what I’m talking about.

By the way, I Googled this to see if anyone else has talked about it and found this that made me laugh.

(If you’ll notice, my portfolio has JPGs instead of PNGs and having to do it that way was like having to design with Papyrus. Unfortunately, because we purchased templates for our portfolios online [next on to-do list: learn Flash!], I had to adhere to their requirements. So I’m really not trying to be hypocritical, and believe me, my eyes bleed every time I see the inferior image quality in my portfolio!)