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

photoshop-your-coworkers.png

 

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.
 
    1. Because I think Brittany’s expression in the photo will make for some fun Photoshopping.
 
    1. 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.

 

80 royalty-free stock photos

 

How to Be Happier: Tips for Developing an Optimistic Outlook on Life [Infographic]

Be_Optimisitc.jpg

 

Whether you tend to see the glass half full or half empty, there’s plenty of research that suggests optimistic people experience a number of physical, social, and emotional benefits.

 

For positive folks, it’s easy to tune out negative news, embrace life, and welcome new social connections. But for those who find themselves leaning towards a more pessimistic demeanor, it can be tough to silence that inherent level of negativity and skepticism. 

 

This presents an especially interesting workplace dilemma, as it’s easy to give up on challenging obstacles when you don’t see the light at the end of the tunnel. But is it possible to train yourself to turn your frown upside down? Sure is.

 

In fact, Happify put together the following infographic to bring to light some helpful tips and tricks for becoming more optimistic — both personally and professionally. Check it out. 

 

 

Optimisitc.png

 

 

download free intro to marketing psychology

 

What Happened to Our Metrics After We Stopped Sending So Much Email

marketing_blog_email_strategy.gif

 

Last fall, my teammate, Pamela Vaughan, and I made a terrifying and exciting decision. We were on a big mission to reduce our graymail, and we decided to do something drastic. 

 

We created a workflow that initially unsubscribed 250,000 people from our emails — which was roughly half of our list — and would continue to unsubscribe unengaged people over time. Plus, we completely eliminated the option to receive instant notification emails from us. 

 

Though we had done some preliminary number crunching to estimate the impact of these changes, we weren’t 100% sure how it would go. Soon after we announced the changes, we got some great pieces of qualitative feedback, such as:

 
 

You’re fabulous. Thanks for giving me some breathing room. And yes, I can use it.”

 
 

And this:

 
 

I think this is a good move. I like HubSpot, and think that you provide a great product/service, but I’m feeling very bombarded by you guys to be honest.”

 
 

But only time would tell how this whole plan would affect our numbers. 

 

So we waited. And waited. 

 

Today, the waiting is over. Today, we have our answer.

 

Quick Refresher: A Visual Recap of What Changed

 

Before we enacted these changes, here’s roughly how our blog email subscriptions worked. 

 

You signed up to get email notifications from us on an instant, daily, or weekly cadence. We’d send you those emails until you decided to manually unsubscribe. The end. 

 

old-marketing-blog-subscription-emails.png

 

We did this for years. So our list was big … but had a large portion of old email addresses that didn’t work anymore and overwhelmed subscribers who tuned us out. Not only is that a really bad experience for our subscribers, but it’s also not good news for the health of our email deliverability. 

 

Now, here’s how it works. 

 

You sign up to get email notifications from us on a daily or weekly cadence. We send you emails for six months. If you click on an email in those six months, you stay subscribed. If you don’t, we send you an email letting you know we’re going to unsubscribe you. No harm, no foul. (And any time in this process, you can also manually unsubscribe from our emails.)

 

new-marketing-blog-subscription-emails-1.png

 

The goal with the changes was to reduce our graymail and stop bombarding our subscribers with emails. But it turns out, this new strategy had a big impact on our metrics, too. 

 

What Happened to Our Metrics After We Stopped Sending So Much Email

 

1) Traffic from our email notifications increased.

 

Despite sending fewer emails, traffic from our email notifications went through the roof — views grew by 21% between October 2015 (a record traffic month for us and the month before we implemented the changes) and Jan 2016 (when traffic is usually back to normal after the holidays).

 

email_newsletter_traffic.png

 

This means our emails are working better, right?

 

Well … kind of. Traffic to the blog from our email notifications gives us an indication of how these emails are doing, but it’s not a full picture of how well our emails themselves are doing.

 

For that full picture, we had to turn to opens and clicks (and their corresponding rates) for our blog notification emails.

 

2) Our blog email notification opens, clicks, open rates, and clickthrough rates (mostly) increased.

 

To gauge the health of our blog notification emails, I pulled the following numbers for all daily and weekly emails sent between October and February:

 
 
    • Opens per email send
 
    • Clicks per email send
 
    • Open rate (opens/delivered) per email send
 
    • CTR (clicks/delivered) per email send
 
    • The number of emails delivered
 
 

To reduce the variability in the day of the week that the daily emails are sent, I averaged all the stats for the daily emails in a given week. (The weekly email subscriptions didn’t need the same treatment — they’re sent the same day every week.)

 

Then, I compared the stats of daily and weekly emails sent in early October to those sent in early February. Here’s what we found. 

 

Note: In the graphs below, I’ve added the dotted line at the date we implemented those changes so you can better gauge the effects.

 

For the daily email notifications, our opens, open rates, clicks, CTRs, and emails delivered all went up. 

 

delivered_opened_clicked_daily_emails.png

 

open_rate_and_ctr_of_daily_emails.png

 
 
    • Number of Emails Delivered: +6.9%
 
    • Number of Opens: +24.1%
 
    • Number of Clicks: +43.4%
 
    • Open Rate: +16.1%
 
    • CTR: +34%
 
 

Our weekly emails’ metrics, on the other hand, experienced some mixed results. The number of emails delivered and opened went down, but the rest were much higher than before (especially our CTR).

 

delivered_opened_clicked_weekly_emails.png

 

open_rate_and_ctr_of_weekly_emails-1.png

 
 
    • Number of Emails Delivered: -48.2%
 
    • Opens: -18.8%
 
    • Clicks: +45.7%
 
    • Open Rate: +57.4%
 
    • CTR: +177.3%
 
 

So what do these metrics tell us? Did this strategy actually work? 

 

Is This Strategy Working?

 

In short: yes

 

Most of our metrics are up and to the right, but I’d like to draw your attention to two of the most important: Clicks and CTR.

 

Because both of these metrics are higher than before for both email types, we’re doing something right here. If we only increased CTR, it could simply be because we’re delivering to fewer people. Seeing that the volume of clicks also grows between October and February despite having way smaller list sizes than before means that we’re sending the right people the right content at the right cadence. 

 

No longer are we padding our metrics with vain, inflated subscribers who ultimately harm our deliverability and email performance. Instead, we’re keeping our email list smaller, but way healthier and more effective. 

 

But I know what you’re thinking: What about the huge drops in opens and delivers on the weekly email subscription? Aren’t you worried about that? 

 

Truthfully … I’m not. 

 

Delivers is down because we unsubscribed way more people from this list when the workflow first kicked off. And the reason why we unsubscribed more people from this list is because the way most people become subscribers is through a checkbox on our landing pages. It’s effective at acquiring new subscribers, but may not be great at acquiring engaged subscribers. 

 

As for opens, I also attribute that to the unsubscribe campaign, too. We used clicks as a way to measure engagement (it’s more reliably tracked than opens), so it’s very possible we unsubscribed people who opened our emails but never clicked on them.

 

All of those things considered, I am optimistic that this new approach is better — but as always, we’re going to keep an eye on this and make changes if necessary. We’ll keep you posted. 😉

 

What’s Next?

 

The unsubscribe workflows are here to stay, and our instant list is going to stay firmly in the trash.

 

That said, we aren’t going to stop trying to find better ways to keep our subscribers in the loop on what’s been published. These changes are only the beginning to building a smarter, more lovable blog subscription strategy.

 

learn how to get 100,000 blog readers

 

How to achieve top app store search rankings

Improving search ranking within app stores has become critical to an app’s success. Marketers are increasingly focused on various elements of app submission and marketing techniques to help achieve higher ranking in an app store’s search results. This white paper from NativeX addresses the…

 
 
 
 

Please visit Search Engine Land for the full article.

What You Should Know About Accessibility + SEO, Part I: An Intro

Posted by Laura.Lippay

[Estimated read time: 4 minutes]

 
 

Do you know anyone who is visually impaired? Maybe they have low vision or color blindness, or are fully blind. Think about how they use the Internet. Close your eyes, or at least squint really hard, and try to find today’s news or interact with your friends on Facebook. It’s a challenge many of us don’t think about every day, but some of what we do in SEO can affect the experience that people with visual impairments have when visiting a page.

 
 
 

Accessibility and the Internet

 
 

accessibilitymac.gif

 
 

Visually impaired Internet users are able to navigate and use the web using screen readers like VoiceOver or Jaws. Screen readers, much like search engine crawlers, rely on signals in the code to determine the structure and the context of what they’re crawling. The overlap in what search crawlers look for and interpret versus what screen readers look for and interpret is small, but the idea is the same: Where are the elements of this page and how do I understand them?

 
 
 

The SEO overlap

 
 

While it’s important to understand where SEO and accessibility (a11y) overlap in order to optimize correctly for both, it’s also important to note that optimizing for one is not necessarily akin to optimizing for the other. In other words, if you’ve optimized a page for search engines, it doesn’t mean you’ve necessarily made it accessible – and vice versa.

 
 

Recently, web accessibility expert Karl Groves wrote a post called The Accessibility & SEO Myth. Mr. Groves knows the world of accessibility inside and out, and knows that optimizing for accessibility, which goes far beyond optimizing for the visually-impaired, is very different overall, and much more complex (strictly from a technical standpoint) than optimizing for search engines. He’s right – that despite the ways SEO and a11y overlap, a11y is a whole different ballgame. But if you understand the overlap, you can successfully optimize for both.

 
 

Here are just some examples of where SEO and accessibility can overlap:

 
 
 
    • Video transcription
 
    • Image captioning
 
    • Image alt attributes
 
    • Title tags
 
    • Header tags (H1, H2, etc)
 
    • Link anchor text
 
    • On-site sitemaps, table of contents, and/or breadcrumbs
 
    • Content ordering
 
    • Size and color contrast of text
 
    • Semantic HTML
 
 

If you’re developing the page yourself, I would challenge you to learn more about the many things you can do for accessibility beyond where it overlaps with SEO, like getting to know ARIA attributes. Take a look at the W3C Web Content Accessibility Guidelines and you’ll see there are far more complex considerations for accessibility than what we typically consider for technical SEO. If you think technical SEO is fun, just wait until you get a load of this.

 
 

Optimizing for accessibility or SEO?

 

Chances are, if you’re optimizing for accessibility, you’re probably covering your bases for those technical optimizations where accessibility and SEO overlap. BUT, this doesn’t always work the other way around, depending on the SEO tactics you take.

 
 

 
 

Thankfully, the Converse site has a pretty descriptive alt attribute in place!

 
 

Consider a screen reader reaching an image of a pair of women’s black Chuck Taylor All-Star shoes and reading its alt attribute as “Women’s black Chuck Taylor All-Stars buy Chucks online women’s chuck taylors all-stars for sale.” Annoying, isn’t it? Or compare these page titles with SEO and accessibility in mind: “Calculate Your Tax Return” versus “Online Tax Calculator | Tax Return Estimator | Tax Refund/Rebate.” Imagine you just encountered this page without being able to see the content. Which one more crisply and clearly describes what you can expect of this page?

 
 

While it’s nice to know that proper technical search engine optimization will affect how someone using a screen reader can contextualize your site, it’s also important to understand (1) that these two optimization industries are, on a bigger level, quite different, and (2) that what you do for SEO where SEO and a11y overlap will affect how some visitors can (or can’t) understand your site.

 
 
 
 
 

http://platform.twitter.com/widgets.js

 

For Global Accessibility Awareness Day on May 19, I’ll be collaborating with some experts in a11y on a post that will go into more details on what aspects of SEO + a11y to be keenly aware of and how to optimize for both. I’ll be sure to find as many examples as I can – if you’ve got any good ones, please feel free to share in the comments (and thanks in advance).

 
 

Educational resources & tools

 

In the meantime, to learn more about accessibility, check out a couple of great resources:

 
 
 
 
 
 
 
 
 
 

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!