Lessons

Lesson Info

Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool

How do you design fans? And welcome back. We left off in the previous lecture talking about getting ready for our logo. So let's jump over into Photoshop. So I have my blank document open over here. Obviously this is not a comprehensive tutorial, nor am I a consummate Photoshop expert. Listen, I know my way around, I can get enough done. And I've downloaded a couple stock photography sort of healthcare related icons and maybe we'll just kind of paste together some sort of logo here and again, nothing. I have nothing really in mind per se. Um so let's just kind of free form this thing and see what we can make out of it. So I'm just gonna talk while I work here. I like the idea of something giving related care. Joy, that's kind of the focus of our landing page here. Remember from the lecture where we spoke about that user scenario, people here are kind of anxious, they're looking to take care of their loved ones and they're looking to enroll in the Cd Pat program in new york state, which...

allows them to get paid to do that. Um so we want to kind of focus on Joy love Care and I like the idea of the heart and the hand. Um so let's just get a quick selection of this hand first. Okay, I'm using the quick selection tool in Photoshop that allows us to take clear lines and create a selection out of it. So I'm gonna click around. Um and try to get this selection of the hand as well as possible. Um It looks like we have a pretty good selection going here that looks like it's pretty good, we might want to just sharpen that up a little bit over there so we could take the pol polygamy lasso tool and we could add to the selection. Maybe just something like down here. Get that sharp edge that we're looking for. Okay, so a little bit of a sharper edge and let's just try to do a straight copy paste without feathering. And again, right this is not perfect, but remember this is going to be first, it's gonna be a logo which is small and second of all, we can always work on this later and make it more refined and get these edges obviously much smoother. And if we were designing a logo from scratch, that's the right way. We probably really just um not really use stock photography, it's documentary in the first place. We would want to kind of select, do this, do this custom from scratch anyhow. Um So we have a heart over here which I like. Um we have a heart shape over here, kind of like this heart shape a little more. I think I'm gonna grab this heart shaped and once again we'll do a quick selection in the heart. That should be pretty straightforward. There we go. Command dropped that into our new document label, this double click label at the heart label this layer of the hand. This is a little bit too playful for me. So let me just paint that in. So I'm gonna select my brush tool by clicking b I'm gonna hit all just like my red and I'm just gonna paint this in, right? I could increase the size of my brush with the bracket key and there you go. Okay so we have the red heart, but I do want to have some sort of healthcare related symbol because if we just had the heart in the hand it's it's very arbitrary. So I do like this um this cross which is a little bit um a little sharper and a little bit more um drama with the shadow. I kind of like that. I do like the idea of the heart rate over here or getting a stethoscope. But just for the sake of time and illustration, let's just grab this shape here and let's drop that in over here. I didn't mean to drop both in but we could just get rid of, you could either do that again or simply just get rid of this part of it. Command X. And we have this, right? So I'm gonna bring this inside my heart by command t to transform it and bring that up in size a little bit. Now. What I wanna do is I want this to be white, right? But I want to still preserve the shadows. So here's my cross. I'm gonna label that layer of the cross. And I'm gonna give it a black and white overlay. So I'm just gonna click on the layer effects and we can either do solid color which just give it a black and white. Or we're just gonna do here click black and white and simple enough. And we want to make sure that this only applies to the cross. So we're gonna hit all to make sure we create a layer mask just for that layer beneath it, which is the cross right right over here. I know I'm rushing through a lot of these things in Photoshop. Um it's kind of not fair but that's what it is right now. I want to give this a color over life. So I'm going to click again solid color. I want to make this white and I'm going to make it white Now remember it's okay, it's going to be the whole thing cause we're gonna once again hit ALTs and create a layer mask and once again we just have it white. But I don't want to be solid white. There's a couple different ways we can do here, we can just bring the opacity down right, which could give us an effect like that, but that's not really what I want. I'd rather have a overlay blend mode which gives me a little bit more um It gives me that white up at the top over here, right? Which is what I'm looking for. Um So I like that a lot better. But what I don't like is this little rim around it. So I could really just cut into this with the lasso tool because it wasn't a great selection to begin with. So maybe what I'll do is I will select the cross and I hold command to select just that layer. Right? Command. And you see the little dots marching around it. I'm going to go to select modify And contract the selection by let's say five pixels. That's too many. And now you'll see that it's gonna be much smaller. What I wanna do is contract the layer. So select it again. Maybe select just contracted by maybe one pixel. So select modify contract by let's try one pixel. And that looks pretty good. Okay and I'm going to select that layer and I'm going to invert the layer by holding shift command I to invert everything else. But what's selected Hit X. And look at that right? We got that little shine out from beneath it. Go back to full screen here zoom out and that's looking pretty good. Listen again it's not perfect. Right? Um There's still a lot of there's still some small issues with the with the lines because we didn't kind of we didn't really create this from scratch. So we could always paint these things in if we wanted to. Alright that's looking pretty nice right? So now let's I want to group my cross my heart all these different layer masks into one group so we can move them around and I'm going to call this group our heart. And now if I select the move tool by clicking V. On my keyboard, I can move this whole kind of um this whole fun thing around over here so I could go over there, I could do command T and transform it. I could maybe slide it around like that which I don't want to do. I want to just have it straight and let's say something like this. Okay and we're gonna put this underneath the hand so let's move the hand on top. So I want to create a little bit of white border here. So I'm gonna select and modify and expand by let's say four pixels. Okay so I'm gonna give it that much of a cut. Now I'm going to invert the selection by doing again shift command I and creating a layer mask on the entire heart group and that's going to cut out anything that's inside the selection. So it's just gonna be white. Okay, it's gonna look really neat. Once we click this button here, click see that very very easy. Now I can zoom out and we have kind of that nice little overlay sort of look. Alright now I don't love this tone on the hand, we're going to use a blue, green sort of lay out here for the overall aesthetics of the page. That is one decision I made while you while while I was looking at different iconography before. So I'm going to go over to the hand. I'm going to add again. I'm going to make this black and white so I'll make the hand black and white. But once again, we're gonna need a clipping mask and I'm gonna want to use a color overlay over the entire hand. Um So I'm gonna get my background color. I'm going to give it this blue that I chose. Um and I'm going to fill the background and I'm gonna again clip it to the layer beneath it. So now it's just on the hand, but instead of a normal, we're going to go with overlay again and give So it gives us that that dimensionality of the fingers. It's a different blend modes. Always play around with the different blend modes. They all do different things. You can even bring the opacity down a little bit so it's not such bright blue. Right? So you're still getting a little bit of that, that the blacks and the grays behind it, but that's looking pretty nice. Right? Nice. Nice. Okay. I mean, I would play around with this a lot. Right, if I was really designing a logo for real company would play around with this a lot, but I want to give you just a sense here. All right, now let's get our text. So we're gonna write, get CPAP and I picked the font vera sans on top. Get cd pep Alright, it's all in white. Let's get this all black first. All right. Um let's get this to be heavy. We want this heavy. I don't want this to be italics so I'm going to unsuspecting italics. Um our spacing should be zero. Get this a bigger front here. Let's go up in the frontal were basically happy with where we are. Um Okay, that looks just about okay um and click ok move this, start moving this around a little bit. Right? So now we can place the text a little bit. Give in mind we want to make room for a uh sub header as well or maybe even increase this font size a little bit just into proportion with what you know, the rest of the iconography there. You don't want to have the iconography overwhelmed the text. It's an interesting it's definitely an element of, of good logo design. I don't want to be too far away from the text but I also want to leave enough space for my sub header. Um so one thing we could maybe do is even bring it up say like that, the CPAp a different color. Okay, so it's readable and it kind of gives around, it gives away some of that that brand aesthetic. So I'm gonna give it this blue and we don't necessarily have to give it a space, You hit Alton right, you could kind of separated just a tad so we'll set it separate just to drop will move the whole thing back a little bit and up in there. And let's write our sub header. Yeah I don't I don't really like this heart overlapping it so we'll see how that works. So I'm gonna grab I'm gonna command and select the T on that layer. So right to select that again, I'm gonna modify select, Modify my selection, expanded by the same four pixels we did before. So I'm not going to invert the layer this time because I already have a layer mask over here. We're just gonna use the paintbrush to paint in the white. But the point of having this election is that the selection is going to constrain my painting to anywhere inside this line on top of this heart layer. So just to have my white brush selected. I'm sorry I want to have the black brush selected cause we're on the layer mask and I'm just gonna paint right in here and we're gonna get black is white, right? Everything is the opposite when you're dealing with layer masks. Okay. See how that looks. Let's go out. Alright that's looking pretty good. I'm liking that. I'm liking that. I get the heart the hand, it's the you know, not too overwhelming. Um I think it's pretty clear that we do. I think it's pretty clear what we do. So there are just a couple of things just talking about visual aesthetics here are a couple things that bother me that I would like to fix one is just the negative space. I think the heart comes up a little bit too large above the text. I want the text to be a little bigger and I I feel that this cross is a little bit distracting visually and maybe we'll just do kind of a heart rate sort of beat going through the center but I don't need to waste your time while I do that. So I'm going to just pause the recording and just edit this stuff out. I'll do the fixes and then I'll just jump back here once I have those problems solved. Um and we'll take it from there. Alright so we're back so I made a few modifications here, increase the text size a little bit um change the graphic inside the heart and now we're just going to get the white around our we're gonna trim our canvas just to create the not give us any extra padding here. Um And we could actually crop out a little bit more up here. Okay. And now we're ready to save this for the internet. Alright, so it's pretty exciting and we're just gonna save for web. I use the shortcut there, we don't need to be 677 pixels wide. Um Probably let me just say that it's 400 pixels wide. It's definitely gonna be smaller than that. But just to give us a little bit extra space a Jpeg. High quality 13 kilobytes. That's cool. CPAp logo on my desktop. Fantastic. And now let's jump back into one bounce. Alright so the way we're going to add um the way we're going to add a logo and unbound is by using the image anything any time we ever want to add an image, it's just simply the image box. And now because we've created our first section, we're able to actually go ahead and add that. So it's going to add our image and we are going to upload our very first image Now just to talk about the image dialog really quickly with one bounce, you could search through all the different images that you've added across all your different landing pages. They will always show up over here. Um We could also check out our unbounded public images. Okay. Um and because that obviously we're in this given client that we created right? We created that one bounced landing page course client. Um we don't have any of our images associated with that client. Unbounded public images are all the different images that you could use that one bounced. Gives you so this is actually very helpful when it comes to arrows or background patterns. So if I were to search for an arrow, I'll see all the different arrows that one bounced has preloaded based using that they use across all their templates and I could use those arrows if I want to. So it's definitely helpful to check out um if you ever do need something, maybe we'll use something from here in in this page. But anyway, we're gonna go to my images and I'm going to click the button on the bottom left here, upload new image, jump over to my desktop, open up that image and here it is. Alright, so let's click choose and there it is. Alright, so obviously we could resize it now. Um I can make this a little bit larger my header header section and let's see you give it a little bit of padding and there we go. Right. So very as you're seeing, Right, So super. Just I'm just dragging and dropping and you could let it snap into the center, which is always a great idea and there you have it. All right. So we've added our logo. We've created our first section. We did a little bit of fun stuff in Photoshop and now we're well on our way to working out the rest of this header and then getting into our hero section which is going to be obviously the most important part of this page and it's in that section that we're going to jump into next and we'll start talking about those ideas of our user scenario, how we want to lay out the text, working on our action block, choosing a background image um figuring out our visuals, the type of aesthetic we want to create. And with that, I will see you guys very shortly as we continue this page in the very next lecture.