Your Logo Looks like Sh*t in Dark Mode. 🔦

Hey everyone! Zion here.

If you put your logo at the top of your emails in your CRM, you may have an issue when people use dark mode. This is a new feature on a lot of operating systems. Ios - Apple's operating system for their iPhone - iOS 13 came out this fall and with it came a feature called dark mode. Also the new Catalina operating system for MAX also has the dark mode feature.

It's really cool. It's a way of looking at your computer without a ton of light shining back at you. It puts a lot of the frames of the applications in a dark hue and it's not quite black but it's dark and which means your email client is going to have a dark background.

*** Full Transcription Below ***

So a couple of weeks ago I was looking at an email I had sent out and my phone flipped into a dark mode because you can set it so where your phone goes into that dark mode in the evening - which is kind of a nice feature!

I noticed how terrible my logo looked at the top of my email. Now, this is because when I created this logo, I actually just created it with a white background because I knew it was going to be on a white background in the email because normally it looks like this and it looks clean - nice and clean - and so I didn't even bother putting it with a transparent background. But even with a transparent background, I'd have a problem.

Take a look at this one. So this is the Triple Threat Artist email. This is another course that I created a couple of years ago and I now own this course with a co-producer of mine. We teach music production to singer songwriters to help them learn how to produce music on their own from their home. But check out how bad this logo looks in dark mode.

The letters get completely washed out and this logo has a transparent background in the image, but it also looks terrible if not worse. So anybody getting our emails using the dark mode feature is going to have an issue when they go to look at the email. It'll look odd if you're going to use your logo at the top. So I want to address this and show you a way of getting around this and how to create a logo that will look great in both light mode and dark mode. Let's check it up.

Okay, so what I'm going to do is I'm going to take our logo, which is a transparent logo, background logo. And if you don't already have a copy of your logo that's transparent, make sure you talk to your graphic designer and get a copy of it. And I'm bringing it into Pixelmator - I like Pixelmator because it's kind of a cheap version of Photoshop and it does everything I need.

And what I've done is I've created a background, so I'm going to create another layer. I'll just do this from scratch. I created another layer. So if you're not familiar with layers, it's basically like just pages stacked on top of each other. And on this layer I'm going to color it with this paint bucket tool and I'm going to pick a color, something dark, and I'm just going to paint the entire thing dark. All right. Now I'm going to move the layer behind the logos, the logos on top of that layer. And there you have it. I can turn it on or off. And that's what is still there. Just turning it on and off at this check Mark. So what I want to do is make this logo look great on a really dark layer. So there's different ways to do it.

One way - I'm going to just duplicate this. I'm going to make another version of this and turn the first one off. And we're going to adjust the color, the brightness on this. I'm going to crank up the brightness, turned down the contrast so it's completely white. And then we're going to add some blur to it. So we could go over here, add some gauzy and blur. I would suggest something very little, like four or five, something like that and hit OK. And then when you, when you show the top layer on top of it, it has sort of a highlight behind it. They see that and they can get look kinda cool. And if you wanted to make that brighter there's different ways you can do an easy way is just to keep duplicating this background to get it to the brightness you want.

So I'm going to do that and let's go ahead and just save this and we'll see how this looks on our websites. I'm gonna save this off. I need to make sure that I turn off the transparency and it needs to be cropped. So I'm going to crop it real quick to about a 16 by 9 and something like that. And then I'm going to save that off as a PNG file. I need to turn off the transparency or the background and export it and save it as a PNG.

There we go. Now there's another way we can do this. I want to explore a different way to do this as well, and we'll see which one looks better. So I'm going to undo a couple things here and this is where we're at right now. And I'm going to undo this. I'm going to delete this halo thing. So we're back to this, just the logo over dark background. And what I want to do is I want to actually create a new layer and I want to paint just using a paint brush or an airbrush and use some white and just kind of paint around this. Okay?

Okay. So now I've created this white behind it, kind of a white blob, and now we're going to blur this whole thing. So again, using the Gauzy tool, but we're going to do quite a bit. We're going to really blur it. So now it's, it's basically just almost like just a halo effect behind the logo. And you'd really don't even hardly notice the white at this point. And if you wanted to, you could take the opacity and turn that down too. And now it just kind of sticks out in the dark like that. Cool. All right, so we're going to save that off, but before we do that, let's crop it into a 16 by 9.

All right, now we're going to jump over to Kajabi. And we're going to take a look at what that would look like. So go to your settings area in Kajabi, and we're going to go to marketing settings - its where you control your email. And we're going to get rid of any logo that's there. And the first one we're going to do is we're going to upload a new file and let's upload the one we just did the with a white blob. So we've uploaded that. We can't even hardly see it in there, but it's in there. We're going to save that. And if it's on a white background, you'll never really notice it. But if it's a dark, dark background, you'll see that blob. We're going to hit save and let's go check that out.

So I've sent the email to myself and I'm looking at it on my phone.

Now let's see what this looks like in dark mode. All right, now this is the logo in which I had the halo effect over the words. Now because it's so small, you can still read it, but it looks just a little bit messy. I'm not quite satisfied with it. Let's look at what the other one looks like that we did with kind of the larger halo blob. Do you see how much better that looks? And it's because it looks as if there's a light shining on the get known. In fact, if you wanted to, you could even have kind of a spotlight on it, a spotlight effect, which is kind of what this is. So I like this one a lot better. I'm going to go with this one and I will probably make it a little bit bigger for any emails that go out so that people using dark mode will see it this way.

And again, the reason this is so cool is that when it's on a white background, when you're not in dark mode, you don't even notice that halo effect around the logo. But if you do go into dark mode, if your users are in dark mode, they'll still be able to see your logo. So it kind of, it's like one image that works for both light and dark mode. I would love to see your examples of what you do creatively to make one image work great in both dark and light.

Please comment below with your websites or where we can see your illustrations of this. That would be awesome. That's it for this week.

This is Zion for Get Known Strategy.

If you like this video, hit subscribe and please hit like the video if you like it - and share it with somebody, that'd be awesome.

Thanks guys.

xxxx - Zion