4. Home Page Mockup in PS : Part 2

Key Takeaways

[Music] hello this is gary simon and in this video we're going to design the uh middle section uh actually the top middle section for our home page mockup uh so right now uh this design up here is probably only about 15 to 20 percent of the actual uh content that we're gonna be designing for so we have ourselves a little bit ways to go uh so let's just continue on i'm gonna go to image canvas size and just uh take the height and really increase it to from 15 to about 40 and hit okay and i'm going to take the fill tool and take our background layer here and just fill this all in with white all right so we see we have quite a bit of room to work with now alright so the space down here we're going to have basically just two testimonials and so let's bring up our columns just to get a good idea of where we want hit ctrl t rather select the columns layer and hit ctrl t and we'll just drag all the way down and select the move tool hit apply all right so yeah basically i we have in this uh these six columns right here will have a testimonial and then in these six columns right here we'll have another testimonial and then when the uh if you're viewing it on the phone of course they won't float uh or a tablet they won't float aside to each other they'll be on top but we'll get more into that later so what i wanted to do is kind of have an icon uh like right around here and then the actual quote and uh the logo kind of like a watermark gray version of a logo underneath and just have two different uh my testimonial side by side so i want to get started with that icon right here and it's just going to be like a quote icon so what i want to do is take the ellipse tool and we have a white foreground selected and then starting right around here we'll just shift and hold alt and drag out roughly around this size and then what we want to do is go ahead and hit ctrl h twice to get rid of that and i'm going to double click on this and hit stroke and we'll go ahead and specify inside for the position and the size we're going to increase just a little bit to write around six and the color we're gonna make a light gray hit okay and okay and i'm gonna get rid of the columns real quick and that seems to be pretty decent in terms of color so then what i want to do is go ahead and right click this and hit rasterize layer style and what that will do is no longer can we edit that style it's just rastered the whole thing and you'll see why i further but i do want to take the magic wand tool and with the tolerance of 32 we'll turn anti-aliasing on let's change that to back down to we'll just say five we can hit the delete key and it gets rid of everything in the middle all right so the first thing i want to do is right click and just duplicate this layer and then just hide it and we'll just call this blank circle and we'll reuse this when we create other icons down here in the future so now that we have that i just want to put like a quote right here so i'm going to use the type tool and just put a quote right there double quote drag it up and change the color to this color right here and that's not the font i want to use uh so i'm going to experiment real quickly and i'm going to hit the up arrow and i'm just going to choose something that looks like a pretty good quote and again you don't have to use exactly what i'm using uh of course i'm hoping you're following along with your own project i probably should have figured out which one i wanted to use before this but that's fine all right so this works pretty well and what we'll just do is i'm going to delete this and make it a single quote actually duplicate it and then i will just move this over so i can position exactly where i want it alright and then i will take both of these we're going to move them up just right around here and then i'm going to zoom up and for the actual ellipse right there the layer will select that we'll take the pen tool and choose path and we'll kind of just outline this just on this upper portion right click and make select make selection hit ok and then hit the delete key we can uh position a little bit more with the arrows all right so that looks pretty good uh for the first icon for our quote um so we could take all these layers and just hit ctrl e and we'll call this quote we'll just icon dash quote all right so that looks pretty good now what i want to take i is right here to the right hand side we'll get the type tool and we'll put the actual uh quote right here so i let's get our columns back up now we want this to extend right here to the sixth column so what we'll do is with the type tool selected we'll select right here on the beginning of the second column and just drag right there to the end of the right the sixth column and i'm just going to real quickly just put well i'll well one second i'll enlarge this so that you can see it in a second but i'm just going to put awesome job very imaginative the website makes the whole process painless to great service i'm going to change the source sans pro and we'll try 18 or so choose auto for there and let me get rid of the columns make sure sharp is selected and choose that and i want to choose light here for the font style all right so now we can drag this up just a little bit and i don't have a this is an actual code i'm going to use i just made that up so once i get to the html css and we go live i will get an actual quote uh so this is also the logo that will go right here to signify you know who set it from what company i'm just going to pull it from i think this high tech logo right here and i'll just paste it and ctrl t and shrink it right around there and make it a luminosity for the layer style or layer blend mode rather and we'll put it right around there i think that's fine all right so now we want to do is go ahead and take this text this and this icon and duplicate it so uh with auto layer selected if we just select this hold shift and then hold shift we have these three up there i'll go ahead and group them hit ctrl g call this quote one and then we can duplicate the group and call quote two and uncheck that and we'll move this over make sure our grid is up and it starts right there okay so let me hide the grid all right so of course this will be a second one it'll be different i all right i think that's pretty good i now what i want to do uh beneath this area here we're going to have a section where we just kind of uh get more specific about you know what we cover exactly uh and we'll have a container that's kind of gray and so let's get started with that first i want to i don't want just 100 white area the container is going to be a light gray so first thing we'll do is get out the rectangle tool and just drag out roughly to around this size and we'll double click here oops and we want it to be pretty high a light gray so f-o-f-o-f-o or zero rather all right and i kind of wanted to use the same uh design right here except it'll be a grayscale at the top version of this so i also another way to quickly select a layer if it's not on auto suck layer you just hit ctrl and then left click and it will select that layer right here uh so let me see here i'm just going to duplicate this and we'll drag it to the top here we can make it clip a clipping mask and then we'll drag this down and we can change the opacity right around 10 percent all right and then i'm going to take this text here it's going to be kind of another headline right over here it's going to be centered as well so i selected layer we'll duplicate that we'll just move this down drag it up here at the top and in here it's going to say let us take care of your visual identity all right and it's going to be mostly black we're actually going to change some of the words the colors let's get out the columns here and turn that on drag this to the top ctrl t scale it down a little bit i don't want it to be too big i don't want it to compete with the text at the top but i think right around here is pretty good actually i want to scale that down just a little bit more hit apply all right let's get rid of the column view and we'll take the type tool and select visual identity here and just use this same color right here all right so now what i want to do i is kind of put an icon right here but it's not going to be based on this design it's just going to be kind of like an eye so we'll come over here we'll view the grid and i want to make sure in my foreground we have this color selected and shape is selected all right so i'm going to select right there and select right here and then we're going to come up just around right to there and then hold the alt key and click once and then bring it back and do the same thing right there so now we can hide the grid by hitting ctrl h twice and now what i want to do is create a new layer make it a clipping mask hit okay and select a slightly darker color right there take the rectangle tool and actually i want to position this at the bottom just to create a little bit of depth all right and then what i want to do is take the ellipse tool right control h we can get the grid back and i want to take this color here this gray in the background and drag out an eyeball roughly to around that size and control h get rid of this then take the pen tool again and i'll select right around here all right now if i go back to 100 it's a little bit too large so what i want to do is take all those shapes i believe these four are them i'm just going to group them real quick hit ctrl t scale it down all right and select that and hit apply all right so that looks pretty good i now what i want to do is in this area there's going to be four basically circles uh and inside them will be specific designs and so let's the first thing we need to do is get the columns and each one of these these icons really um they're going to be three column widths in width but they're going to be centered and they're not going to take up the full width of the column so you'll see what i mean so let's go ahead and do that real quick i take the ellipse tool and basically somewhere here around the center i'm going to hold shift and drag out and the size will be right around here and just so i can see it i'll make it black and then what i want to do is take the pen tool with this color selected make sure that's our foreground and i'm going to just select right around here to the little bit left to center hold shift and do the same thing we'll change that color to that gray and get rid of the columns real quick and just hit ctrl t and scale this up a little bit all right and then in the inside we're going to actually put an image so this first one this this caption underneath right here will be logo design so just to get that out of the way real quick i'm going to take this text and just hit i just duplicate it real quick i'm gonna put it up here just position it somewhere right around there logo design and i'm gonna make it try 16 for the size and really if we wanted this to be centered the same width as this we can just uh move that over and hit center and then what i wanted to do i will take this and duplicate it so i want to take this layer this layer and this we're going to group this we'll call this i will just call this logo design right click duplicate group let's get the columns out move this over here to the middle of these three columns and we'll duplicate both of those move these over here in the middle of the three of these so all right so i this one will be called identity colors and i will change that text right here let me get rid of the columns so you can see this better this one right here will be stationary and this one over here will be called social presence all right let me collapse those okay so now what i want to do is put like an image in each one of these uh to represent what exactly you know each of these means so i i'm going to go to file open and i'm going to open up this file right here it's called presentation and this is just a mock-up uh identity presentation that i did and so for the first one uh since it is logo design you know obviously logo design a code that's the one of the basic most simple you know obvious things that we do i'm going to take the logo up here and just copy that whole area right there edit copy merged and then in here we'll hit ctrl and left click to select the layer create a new layer create a clipping mask and ctrl v to paste so probably paste it over here somewhere okay ctrl t i'm going to scale it down while holding shift in the alt key and i wanted to kind of first uh skew this as well so edit transform skew edit transform distort rather hit apply all right and then for identity colors i'm not going to use an image i'm just going to create a design kind of abstract just to illustrate you know what the color palette of this logo right here for instance would be so i'm going to select that layer and it's going to be around just this gray it's going to be a little bit darker hit okay then take the ellipse tool and i'm just going to drag out hold alt here and shift and the color is going to be darker here and then right click duplicate layer move it over here and this one's going to be roughly that color right click duplicate layer this one's going to be white now i'm going to take all three of these and hit ctrl t scale them up just a little bit all right and then for the middle one for the blend mode i'm going to hit the down arrow key and i think multiply works well and then experiment with the white one as well we want this to appear white but we want it to blend well all right i think overlay kind of works pretty good for that all right and then for stationary i had a preview of some business cards right here and so i'll just go ahead and just take this whole area edit copy merged do the same thing for this right here create a new layer ctrl v ctrl t and scale them just to where you can notice what they are they are business cards apply all right and then for social presence we'll have i want to spell that wrong by the way we'll have i i'm just going to scroll down here i may ultimately use something different for social presence this is kind of like an app icon uh so what i'll just do is select right around here edit copy merged create a new layer make it a clipping mask and leave it right around there and i'm going to select this side container hit ctrl t and extend it just down a little bit further and then down here we're going to have a portion of centered text so real quickly i'm just going to take that text duplicate it and drag it to the top of all the layers and let me collapse these real quick we'll view the columns and let's make that centered and then double click right here and we'll extend it basically to the just about to the full width of the 12 grids and i'm going to type up actually i'm just going to go ahead and copy and paste some text that i have in a different window that you cannot see because i want to type this all out ctrl v to paste i'm going to hide the columns all right uh this kind of looks off because it's this right here is hanging off so it doesn't look like it's centered real well so i'm just going to go select this take this group one and just move it over a little bit and go ahead hit ctrl t drag that up just a tad bit hit apply all right i let me select all of these layers just drag out move them up just a little bit so we have the same uh white space between these two portions okay that's cool now one of the things i wanted to do is i when we're actually live in the browser with this design and we scroll down the uh this logo design and the portfolio testimonials log in uh the nav bar basically will kind of just come with us so we'll see as we're scrolling down this bar that will that will stay at a fixed position uh so down here i once we actually uh get to the next video we're gonna have more icons to design in the fashion of that quote one up there and we're gonna have six areas that elaborate even more further more specifically you know the details of the service uh and then finally down here we'll have another area that tries to get a strong call to action for a phone number and to actually get started and to be able to order so i will see you in that video alright goodbye