Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool
Isaac Rudansky
Lesson Info
33. Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool
Lessons
Laying the groundwork for good design
13:23 2The Myth Of The Perfect Landing Page Conversion Rate
12:05 3The 3 Main Types of Landing Pages and How To Use Them Effectively
18:57 4Business Models and Understanding Your Conversion Actions
06:04 5The AIDA Sales Funnel and The Online Decision Making Process
16:48 6The Awareness Stage of the Funnel ... Where It All Begins
17:26 7The Interest Stage of the Funnel ... Tell Me More
14:10The Desire Stage of the Funnel ... I Want What You Sell
12:44 9The Action Stage of the Funnel ... I'm Going to Buy What You Sell
09:05 10The Fogg Behavior Model and how it Applies to Good Landing Page Design
19:25 11Making Your Landing Page Design Memorable
12:44 12Quiz: Landing Page Design Fundamentals
13The Primacy of Product and The Concept of Usability in Landing Page Design
15:23 14Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks
11:17 15The 5 Second Usability Test in Landing Page Design (and how you can use it now)
12:25 16The Art and Science Behind Designing High-Converting Calls To Action (CTA's)
18:29 17Readability and Visual Hierarchy Landing Page Design
19:50 18Respecting Web Conventions in Landing Page Design
13:22 19Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates
19:53 20Information Architecture and Accessibility - Landing Page Design Best Practices
19:51 21Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices
15:34 22Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices
08:43 23Dedicated Landing Page Design Best Practices (Part 1)
14:57 24Dedicated Landing Page Design Best Practices (Part 2)
12:18 25Quiz: Principles of Good Landing Page Design: Examples, Case Studies & Best Practices
26Using Scarcity to Improve Conversion Rates on Your Landing Pages
09:46 27Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages
12:07 28Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory
18:56 29User Scenarios and Contextual Perception in Landing Page Design
16:37 30Quiz: Principles Of Persuasion in Conversion Rate Optimization
31My Favorite Landing Page Builders and Getting Started With Our Unbounce Page
10:02 32Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
07:28 33Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool
16:25 34Working With Background Imagery in Landing Pages and Developing Our Hero Section
15:36 35Creating a Form, Action Block, and Finishing the Hero Section in Unbounce
19:27 36Discussing Landing Page Design Changes and Creating our Primary Content Section
16:17 37Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce
10:42 38Publishing Your Unbouonce Landing Page on Your Custom Domain
03:43 39Adding Custom CSS in Unbounce to Create Professional Drop Shadows
06:03 40Making Your Landing Page Design Work Better With Custom Javascript Snippets
08:08 41Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines
02:30 42Designing Your Form Confirmation Dialogue in Unbounce and Testing Your Live Form
03:30 43Assigning A_B Testing Variants in Unbounce and Assigning Traffic Weights
12:20 44Integrating Your Unbounce Form Submissions With Your Mailchimp Account
09:06 45Quiz: Building a High Converting Landing Page From Scratch
46Wester Computer Audit (Part 1)
08:28 47Wester Computer Audit (Part 2)
09:16 48Wester Computer Audit (Part 3)
15:19 49Wester Computer Audit (Part 4)
13:52 50Quiz: Landing Page Audit in Action
51Conclusion
02:52 52Final Quiz
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.
Class Materials
Ratings and Reviews
a Creativelive Student
Great Job!! Isaac's energy is contagious, he is insightful and engaging. It is a lost of valuable content and I feel I learned so much from him in this short time. He is a reason I will end up with the subscription so I can watch this course again along side of his other courses. My only complaint was live streaming kept turning off and I missed information.
Student Work
Related Classes
UX Design