How to Photoshop Your Coworkers Into Any Situation: A Step-by-Step Guide

As someone who dabbles in Photoshop, I often get odd requests from coworkers asking if I can take person A and insert them into situation B. Usually, it’s for an internal slide deck, or a Wiki post, or for a Slack-related practical joke.

And while there are usually a bajillion more important things I could be doing when these requests come in, I nearly always say yes — with the caveat that I’ll spend a maximum of 15–20 minutes working on it.

Given enough time, you can make any Photoshop job look both beautiful and believable. And when you’re working on something for an actual campaign or other outward-facing project, that’s exactly what you should do. (Or better yet, you should get a professional designer to do it.)

But for those smaller, goofier projects? Getting the job done adequately in 20 minutes definitely beats getting it done flawlessly in two days.

In the steps to follow, I’ll walk you through my quick-and-dirty approach to Photoshopping coworkers (or anyone or anything, really) into any situation.

Step 1: Find the Perfect Photo

coworker-photo.jpg

For the purposes of this exercise, I’m going to be using the above photo of my coworker Brittany. I chose this photo for three, distinct reasons:

  1. Because it’s from one of our free stock photos bundles.
  2. Because I think Brittany’s expression in the photo will make for some fun Photoshopping.
  3. Because I’m (fairly) confident Brittany won’t be mad at me once she sees this post.

Pro Tip: When selecting a photo for your Photoshop project, try to make sure that the subject of the photo doesn’t blend in with any of the background elements. For example, if your subject is dressed all in white and is standing in front of a white wall, separating that subject from the background will be a tricky task. Not impossible, but tricky.

Taking a closer look at the photo I’ve chosen, I’m slightly worried that Brittany’s sweater is getting lost in the background in some spots — but we can address that in the next step.

Step 2: Remove the Background

Now that you’ve found the perfect photo, you’ll need to open it up in Photoshop in order to remove the background. (Note: You can also complete this step in PowerPoint, but Photoshop offers more functionality and opportunities for fine-tuning.)

Speaking of functionality, Photoshop has several different tools that you can use for removing backgrounds, including the Background Eraser Tool, the Lasso Tool, the Magic Wand Tool, and the Quick Selection Tool. Let’s start with the aptly named Background Eraser tool because it’s the simplest option available.

Using the Background Eraser Tool

See that eraser icon on the left sidebar? Click on it, and a mini-menu will pop up. Choose “Background Eraser Tool” from the menu, and voila: You’re ready to erase.

background_eraser_tool-1.png

As you click and drag around the background of your photo, you’ll start to see a grey-and-white checkerboard pattern emerging underneath. That’s a good sign: That grey and white checkerboard is how Photoshop displays transparency.

background_eraser_example_1.png

But as you can see in my example above, the Eraser Tool is only removing a few pixels of background at a time — not very efficient.

The solution? Head up to the top navigation bar and click on that glowing dot next to Background Eraser Tool icon.

background_eraser_change_size-1.png

From there, you an increase the size of the Eraser Tool’s path so it clears away more background with each stroke.

background_erase_example_2.png

See? Definitely making more progress.

From here, you could keep simply going and remove the whole background. For the tighter spots, you’d just need to size the Eraser Tool back down again.

Fair warning, though: Using the Background Eraser Tool is probably the most time-consuming way to remove a background from a photo, and depends a lot on your own precision. For those reasons, I recommend exploring these other options.

Using Selection Tools

When using the Lasso Tool, the Magic Wand Tool, or the Quick Selection Tool for removing backgrounds, you’re not erasing like you were with the previous tool. Instead, you’re creating — and deleting — entire selections.

In order to do this, you’ll first need to prep your photo, which you can accomplish in one of two ways:

First way: See that mini version of your photo in the Layers panel (with the lock icon next to it)? You can right click there and choose “Layer from Background.” Then, when prompted, enter a new name for your layer (optional) and click “OK.”

layer-from-background-999886-edited.png

new-layer-1.png

Second way: Alternatively, you can go to Layer > Smart Objects in the top navigation bar and then choose “Convert to Smart Object.”

smart-object.png

Next, head back to the Layer menu in the top navigation bar and choose Rasterize > Smart Object.

rasterize.png

IMPORTANT NOTE: If you don’t prep your photo using one of the two options above, the following tools aren’t going to work!

The Lasso Tool(s)

See the lasso-like icon on the left sidebar? Click on it, and a mini-menu will pop up that offers three different lasso tools.

lasso-tools.png

Using the standard Lasso Tool, you can click and drag to draw a selection around your subject.

regular-lasso-tool.png

For more precision, you can use the Polygonal Lasso Tool. Using this tool, you can click to set a point, move your cursor, and then click to set another points, and all the points of your selection will be connected by straight lines.

polygonal-lasso-tool-1.png

Of course, when working with a photo that doesn’t have perfectly straight lines, the Polygonal Lasso Tool isn’t necessarily that helpful. The better option is the Magnetic Lasso Tool, which combines the precision of the Polygonal Lasso Tool with the flexibility of the standard Lasso Tool.

With the Magnetic Lasso Tool, you can click once and then drag your cursor along the edge of what you’re selecting. The tool will automatically detect and be attracted to the edges of your selection, generating points along the way. (Note: for added control, you can click to add points manually).

magnetic-lasso-tool.png

Regardless of which version of the Lasso Tool you use, your next step after making the selection is to head to the “Select menu” in the top navigation bar and choose “Inverse.”

select-inverse-1.png

From there, just hit the delete key and the background will go bye-bye.

bye-bye-background.png

The Magic Wand Tool

If you’re fortunate enough to be using a photo that has a single, solid color as the background, the Magic Wand Tool could be super helpful.

quick-selection-icon-1.png

To use it, you simply click on the background and the tool will automatically select other parts of the background that look visually similar. To add to your selection, hold the shift key and keep clicking. Then, once you have the entire background selected, hit delete.

magic-wand.png

But as you can see in my example photo, the Magic Wand Tool is having trouble distinguishing between the background and the subject in some places. Not to worry: the Magic Wand’s cousin — the Quick Selection Tool — has got us covered, and is generally a much better option than using the Magic Wand.

The Quick Selection Tool

The Quick Selection Tool is located in the same place on the left sidebar as the Magic Wand Tool.

quick-selection-icon_1-1.png

Once you’ve selected it, all you have to do is click inside of your subject and drag the cursor around. The tool will automatically detect the edges, and within a few seconds, you’ll have a selection like the one you see below:

quick-selection-example.png

But wait, what about that background space between her elbow and her torso? That shouldn’t be selected.

To deselect areas, simply hold the Option key (Mac) or ALT key (PC), and your Quick Selection Tool will become a Quick De-Selection Tool. You can further refine certain parts of your selection by zooming in and selecting/de-selecting as needed. For even more precision, head up to that glowing circle icon in the top nav and reduce the brush size.

adjusting-quick-selection-1.png

That’s how I was able to go from what you see above to what you see here:

quick-selection-example-2.png

One more trick for improving quality: From the “Select” menu in the top navigation bar, choose “Refine Edge.”

refine-edge.png

From there, you can add feathering and other effects to make the edges of your selection appear more natural.

refine-edge-menu.png

Once you’re happy with how the selection looks, head to the “Select” menu in the top navigation bar, choose “Inverse,” and hit your “Delete” key on your keyboard. Here’s what you’ll end up with:

quick-selection-finished.png

Step 3: Save Your Edited Photo as a PNG

At this point, you could start dragging some background photos into Photoshop and playing around. But I recommend saving the (now background-less) photo of your subject as a PNG first. That way you’ll always have a copy of it for to use in later projects.

brittany-example2-362471-edited.png
Using the PNG format is important here because it will preserve the transparency. Just go to File > Save As in the top navigation bar and choose “PNG” from the dropdown menu.

Step 4: Find the Perfect Background Photo(s) and Insert Your PNG

wt_giraffeneck_free.jpg

Now comes the fun part: Finding awesome situations into which you can insert your coworkers. (Pro Tip: NASA’s website and the National Geographic website are excellent resources for this.)

Once you’ve got a great background photo lined up, download it and then open it in Photoshop. From there, you can simply drag-and-drop your PNG from wherever you saved it directly on top of the background in Photoshop.

place-your-png.png

Next, click and drag to re-position your PNG. You can also hold shift and drag the corners of your PNG to scale it up or down.

When you’re happy with how it’s sitting, double-click on it, and the box surrounding your PNG will disappear.

(Note: From this point on, if you want to re-size your PNG, you’ll need to go to the “Edit” menu in the top navigation bar and select Transform > Scale.)

Step 5: Save, Share, Repeat

britt-with-giraffe.png

Once your masterpiece is complete, save it as a PNG and share it with the world … or maybe just your office. And, of course, don’t be afraid to get creative with new backgrounds. The hard part is really creating that first PNG of your subject.

After that, the sky’s the limit. Or actually, maybe it isn’t …

brittany-on-the-moon.png

Thanks for following along! Remember: This was a quick-and-dirty guide to Photoshopping. If there’s interest, I can do a follow-up where we explore more tools and get into more detail.

Have any Photoshop tips you’d like share? Sound off in the comments section below.

 

Chicken of the Sea recalls cans of chunk tuna

It hasn’t been a great week for tuna fish lovers.

Tuna giant Chicken of the Sea is following on the heels of Bumble Bee Foods, LLC, and voluntarily recalling some light tuna products over possible contamination issues.

Tri-Union Seafoods LLC announced on Thursday certain cans of Chicken of the Sea light tuna fish may have been undercooked due to an equipment malfunction.

A little over 100,000 cans of Chicken of the Sea fall under the recall which affects 5 oz. canned chunk light tuna in oil and in water.

The company said the issue was discovered during a routine inspection. According to the statement, no illnesses have been reported.

The cans were distributed nationwide between Feb. 10 and March 16.  Consumers can take the product to the store where they purchased it for a full refund, according to the company.

View the complete list of the affected products.

Follow @MaryBowerman on Twitter. 

The voluntary recall is due to possible contamination issues from a facility not owned by Bumble Bee.Video provided by Newsy Newslook

4 Must-Have SEO Hacks for Better Mobile Marketing

I’m in the process of finding a daycare. As a working parent, my lunches are spent perusing options on my phone as I eat my Jimmy Johns (sometimes Erberts & Gerberts if I’m feeling fancy). When I come to website that doesn’t render well, I leave. If the “Request a Tour” form is unmanageably long on mobile, I leave. The expectation of instant gratification when surfing is engraved in our mobile behavior.

With over 50% of all Google searches performed from a mobile device, it’s vital for website owners to ensure their websites are optimized for mobile.

Optimizing for mobile goes beyond just having a responsive website. Here are the 4 hacks for optimizing your site for optimal user experience.

#1 – Optimize Your Page Speed

Every. Second. Counts.

We’ve all experienced the pain of a website that’s slow to load, and this frustration is a leading factor for page abandonment. Delight your users with pages that load in the blink of an eye.  Apart from user-experience and page abandonment, page speed is also an important factor in Google ranking, so it’s important to test and address page speed regularly. An infographic from KISSmetrics features survey results correlating slower page response time with increased page abandonment. For mobile users, most survey participants say they typically wait 6-10 seconds before they abandon pages.

To check your current page speed, we recommend using Google’s free tool, PageSpeed Insights. This tool quickly tests how fast your site loads on mobile and desktop, identifies areas for improvement, and provides instructions on how to fix each item.

#2 – Standardize Your Local Search Presence

Whether your business has a local presence or not, Google is aware of a searcher’s physical location when any type of search is performed on mobile. They may not specify that they’re looking for a “State Park in Minnesota” but results will include geographical relevant results.

Minnesota State Park

Standardizing your company’s NAP information (name, address, phone) across local directories ensure local customers can quickly locate accurate contact information, and will also support local rankings for searches related to your company, services or products. Tools like Moz Local allows users to feed consistent NAP information across hundreds of local directories.

#3 – Don’t Block CSS, JavaScript, or Images

Blocking these files used to be standard practice, as older mobile phones did not support these elements. Today’s smartphone capabilities are able to load CSS (style sheets), Javascript (commonly used for interactive effects) and images – and Google wants to access these too!

Blocking of these elements, along with other mobile-friendly standards can be uncovered using Google’s Mobile-Friendly Test.

#4 – Analyze & Test

Let the data do the talking. Take a look at your website’s analytics to understand how mobile users interact with your website. Specifically, analyze what the most popular pages for mobile visitors are and which pages have the highest bounce rate for mobile visits. With these insights, pull up your site with a mobile device and ask yourself these questions:

  • Is the most important information easy to find?
  • Are the forms short and simple to complete?
  • Are the images resizing correctly to fit your screen?
  • Is the company phone number “click-to-call”?

Call upon your coworkers or family to test your website on various mobile devices. You can also use free mobile rendering tools like Responsinator.com to emulate how your site loads on various devices.

Following these four mobile marketing hacks will help improve customer experience and make your website search engine friendly for mobile queries. Whether you’re the affordable daycare that I didn’t pursue, or the Jimmy Johns that made my day and my Turkey Tom, your ability to provide a great mobile experience can be the difference between an inquiry or sale and a user abandoning your website.

If you need help optimizing your mobile marketing presence to attract more customers, we’re here to help.