Mike and  I attended Altitude Design Summit this year. It was my third year attending and Mike’s first. Since it is a conference that brings together designers and design bloggers, it is vital to have a killer business card, since everyone else is bringing their A-game and your business card is the first way to show others exactly what your vibe is.

As Mike and I were brainstorming what we might do, we revisited an idea that we had almost four years ago. Check it out, with no judgment on our style or execution, okay? At lot can change in four years.

We decided to have Mike do portraits of both of us, and then cut off these portraits half-way, using the tagline “Check out my better half.” You flip the card, and BAM, there’s the spouse! Fun, right? We were pretty excited. Apparently the double-sided punchline is our thing. Each side describes what we do (try to sum that up in 5 words…) and shows our URLs. We opted not to go with Ollibird cards per se, since we are involved in a few companies in addition to our main work at Ollibird (like Nicole’s Classes and Tryangle Labs), and so each side of the card gives a URL to what is basically an online calling card (almaloveland.com and mikeloveland.com). You’ll want to check out those sites, because they’re as fun as the business cards. (Full disclosure: They don’t work on mobile devices right now… we’re ignoring that while we finish up some more urgent projects.)

When it came to the decision about printing, letterpress was obviously the way to go, and Rowley Press was the obvious choice. I had shown my concept to other designers to get feedback and all the feedback was “You can’t do double-sided letterpress,” or “The details are too fine for letterpress.” I had worked with Leland Rowley before on our self promo memory card game. He’d proven that he could do both double-sided and fine detail. Working with Leland on this design was a dream, and the turnaround time was so phenomenal that I shouldn’t even put it out on the internet (two days, people). And to add to it all, Leland is also incredible, genuinely nice. We really can’t recommend him highly enough! Working with him makes me just want to letterpress everything I’ve ever made.

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!

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!

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!

And tell all your friends, too! I think that this is a great way to save money this Christmas season, so don’t keep it a secret!

My main goal in creating these photo cards was to offer customers a more affordable holiday card option. It seems like when you’re shopping for holiday cards, you have to choose between affordability and good design. When you purchase a card template through Nicole’s Classes, you get a good design (if I may say so!) at a good price (all our templates are only $15 each). Once you have edited your template with Photoshop or Photoshop Elements, you can choose how you will print it, which saves you more money. 

(I recommend printing at your local photo lab for maximum savings, or going with overnightprints.com for press printed cards at a very affordable price—look at their 5×7 postcards.)

I have recorded this series of videos to help those less familiar with Photoshop or Photoshop Elements to customize their templates. If you want to see the video larger, you can pop it out by entering full screen mode (the icon beside the Vimeo icon) or by viewing it on our Vimeo page by pressing the Vimeo icon.

If you have any questions, feel free to contact me at alma {at} ollibird.com!

Placing One Photo Into the Template

Photoshop:

Photoshop Elements:

Placing Multiple Photos into a Template

Photoshop:

Photoshop Elements:

Placing a Circular Photo into a Circle Photo Overlay

(currently only applies to one template)

Photoshop:

Photoshop Elements:

Fonts

(demonstrated in Photoshop, but the concepts are the same for Photoshop Elements):

Customizing the Template by Changing Color

Photoshop:

Photoshop Elements:

Cropping and Prepping for Print

(only demonstrated in Photoshop because the process is very similar in Photoshop Elements)

In Illustrator 102, students build upon the fundamental principles taught in 101 and take things a step further. Students will learn my special tips and tricks of doing things better and faster!

In Photoshop Elements 101, students learn to improve their photos digitally. Mike and I know how it is not to get the perfect shot every time (or any time! We’re not the best photographers!) so in this course, we teach the fundamentals of enhancing photographs—from improving the overall look (like exposure and contrast) to fixing your complexion, to combining photographs (like a head swap). Mike has been using Photoshop for well over a decade, but it is an expensive program if you’re just interested in fixing your own photography. Photoshop Elements is a fraction of the cost of Photoshop, and we were blown away with all the features that you get for that price! This was a fun class to do, especially since Mike and I teach it together.

We hope to see you in our classes one day!

I can’t link to any of these cards, but if you want to find them, you can more easily find them by filtering by designer and choosing Petite Lemon, who I design these cards for!

See more of my designs for Shutterfly here, here, and here.

(When working for clients, a designer doesn’t always get to make all the decisions. So below, where I haven’t loved the color combo that Shutterfly ultimately chose, I have included my own preferences. Because this is my blog and I am allowed to do that :) )

(calligraphy by Melissa Esplin)

(calligraphy by Melissa Esplin)

(not available in these colors)

(not available in these colors)

(not available in these colors)

(calligraphy by Melissa Esplin)

(Also, I have designed personalized growth charts for Petite Lemon. Check out all their options in their store!)