Squeeze Page Design Tutorial in Photoshop (Part 2)

Key Takeaways

hello gary simon designcourse.com here and today is january 8th and we're going to be continuing on our squeeze page design from yesterday for the fictitious paperclip company so basically we're going to finish everything for that squeeze page mockup in adobe photoshop cc and obviously if you're watching this video you already have the project file so nothing really to mention there but just a quick note check out designcourse.com if you haven't already and please try to like us follow us on the different social networks which are linked in the description of the youtube video all right let's get started okay so the first thing i want to do is take this paper clip layer which is for me is layer one and just delete it i think it looks silly i then i want to take rectangle one hit ctrl t hold shift and scale this up now down here i'm just gonna have an area of three different features so i and then beneath that there will be like two testimonials and that will be it so the first thing i want to do is take the rectangle tool and those three features will be kind of in this container a real light gray container so we'll take the double click on that just make it a light color so for the icons open up the project files and the first one here i created on layer 1 is what we want you just hit ctrl a and ctrl c to copy let's get out our grid and ctrl v to paste and we're going to put it near the center vertically in this first grid or column rather and i'll just call this files and we'll do the same thing over here copy that and this one will go on the fifth each one of these is going to span basically four columns all right we want these to be kind of all centered up if i take uh this here all right that looks good all right and then what i want to do is take the type tool drag out the width of three columns and we'll type in upload any type of file anytime you wish and then duplicate that drop it down just a little bit move this over here we'll change this one to you get one tb as in terabyte free for a year and then it's only two per month and then right click and duplicate that one final time here and what this one will say control when and where your files are backed up all right so i zoom up 100 here you can see it looks pretty good let me go ahead and zoom out i think we could decrease this eye height a little bit so hitting control and left clicking will automatically select the layer so you don't have to click that little checkbox up there and then what i want to do is take auto select layer and select all of those and then go ahead and deselect those two layers we don't want this and we don't want the grid layer as well then once we have them oops deselect that one as well then just move them up into vertical position with the arrow keys all right so we got that far uh now all we have to do is just put in like two testimonials right here so now what we want to do is get up these two pictures right here and we'll go ahead and show the grid and we want the ellipse tool so we'll i'm going to hold shift and alt and basically the size of one of these and then let me get rid of the grid or hide it rather and ctrl shift n and then make sure this is checked for creating a clipping mask and then ctrl v that now i just take the magic wand just so i can see where it got pasted into and then just oops deselect auto stock layer let me get back over here damn it all right now we got it now i can scale it down hit ctrl t shift and alt right there all right simple enough and then one final time we'll go ahead i'm just going to take this layer right there right click duplicate that get the grid out pull this down and then with the type tool selecting oops selecting there and we're going to drag this out to the width of 5 columns and i wish i had this text already prepared you could just use lorem epsom if you wanted to but i'm just going to type most file storage services just store your files but paper clip takes it a step further and organizes them as well okay and then i'm gonna hit enter twice and i'm gonna put in gary simon of designcourse.com so now let's hide that grid and i think that looks pretty decent we want to make this top text i'm going to make this all black all right and i want to make the file actually i do want to make the font size just a little bit bigger 20. all right now that's better and we can also move this up just slightly like right around there and then i i'm gonna zoom out here and then we're just going to duplicate everything right here and where's that that text is right there and then we will just duplicate this get the grid out right click duplicate layers deselect auto select layers and then put that right there and we can just take her real quick and do the same thing i select ctrl a just to select all and delete and then ctrl v to paste in we'll see where she was pasted she's already down there that's probably not a picture you would use for a testimonial but it was one i found on facebook and my wife so that'll have to do and you know i'm not gonna mess with the text we get the point so i let's see everything lines up here all right so basically that is it if you wanted to like show this we could take the square marquee tool and copy merged and that would be in my opinion an effective squeeze page there's a lot of white space provides information it's minimalist a single call to action and that's what makes a good squeeze page alright so uh tomorrow i believe we are going to focus on creating um a mobile gui graphic user interface kit so that will be exciting all right so i will see you then