6. Home Page Mockup in PS : Part 4

[Music] all right hello and welcome to this video where we're going to finish up the homepage mockup for local design.co so this is what we have so far basically in this area we're going to have an area that's it's very simple so let's just get started i'm going to take the rectangle tool and right around here i'm going to draw out an area around this size and position it down just slightly and i purchased a stock image from 123rf.com and it's just going to be like a watermark in the background so i'm going to open that up and this is the asset right here obviously only use this if you have actually bothered purchasing it but obviously hopefully you're using your own service again you can put something that's more relevant in this area if you're following along uh so i'm going to create a new layer make it a clipping mask hit ok and yes somebody is text or instant messenger meaning let me just close that not very professional am i okay so let me i hit ctrl v to paste this in and i want to get the columns out because i don't really want this to extend too far beyond or i don't really want to extend it all beyond our 12 columns here ctrl t now right around there is good let me uh let me scale it up just a little bit okay and i'm going to go to image adjustments desaturate and then i'm going to play around with the blend mode here and just use my down arrow key i think i already saw one that i want to use and this is going to be multiply and then i'm going to drop the opacity down quite a bit to right around around 29 all right and then i'm going to take the eraser tool get back our columns here and then just keep this inside here all right all right so that looks pretty good it blends in well um and so if i scroll up real quick i will take this right here and duplicate that layer go up go up come on thing all right we'll go up right around here and i'm going to drag this down okay all right now let's get started your columns out ctrl t i want this to be too big we don't want to cover her face up all right uh so now let's let me get rid of that portion and we're going to have a button here the larger radius we'll try 30. make the foreground white right around there give me an identity ctrl t i'm going to scale both of these up real quick and actually i want to extend this out just a little bit this is a little bit different from what i originally prepared ctrl h all right and then i'm just going to have like a uh i'm gonna take this one of these that i created already and duplicate it all right and we'll drag this down oh no either the auto select layer's still on and make it this color flip it horizontal all right let's take those three layers and let's get the columns out because it's not so even anymore basically in between those two columns here all right and then so this will be a button obviously a call to action that people can click uh to continue on with the process of getting their project started or ordered and then i'm going to take this same gray up here and our foreground and create another container except i want to increase the canvas size here i'll try 52 and real quick i will fill in that background to unlock it all right i'll lock it back up and if i select this layer right here we'll select the layer just beneath it and with our gray in the foreground take the rectangle tool and this will be about this size and we'll take the ellipse tool try to find the center here so it'd be one two three four five six so right here in between the sixth and seventh i'm going to hold shift and scale out a circle and drag this up let's hide that and we'll take this text here just duplicate it real quick or and i want to make a couple adjustments we're going to extend this just a little bit apply take these two layers put them right around there and then i'm going to duplicate this all right now text uh all right and i just basically put some periods with a space in between each now i've hit ctrl t hold shift and get it to a perfect vertical take the this part and we'll get a let's see here hit ctrl t scale down a little bit and then right click duplicate this make it this color for this part let's drag this up a little bit get rid of a couple of these and then right here we're going to have a phone number and an email option for them to contact us all right so let's go ahead and take this layer make it a little bit further in height and we're gonna have to do two more custom icons real quick it's gonna be really easy um for the for the phone number and the shoot as a message area so let me scroll up here for the shoot just a message we're going to use the same um let's see let's make that we'll just duplicate this group drag it down just to right around here and the only adjustment i'm going to make scale up select layer i'm going to delete just this circle right here and i'm going to take uh this one hit ctrl t and just extend it out hit apply right click and duplicate that and then do it one more time and let's see here we're also going to do just like a phone one uh on the left side for the phone and because i didn't save a backup copy of these circles i'm just going to use one that's going to be approximately the same type of shape for that this circle right here um so that would be this one right here duplicate that first we gotta drag this up okay if i zoom up right here i'm going to delete this tool and let's get this color here in the foreground and i'm just going to quickly draw out like a phone not an actual cell phone but something like one of the older types uh so make sure shape is selected and i'm just going to eyeball this and hope i can get it right well i'll do right around here alright so if i take this and hit ctrl t 100 i want to adjust this it looks a little bit funky so all right that looks pretty decent i think most will recognize that as a phone so let's get out our columns here i don't think i'm going to have this extend all the way out so let me let me adjust these more specifically later take the columns and hit ctrl t all right and then i want to hide these and just get out some text right here let's duplicate this this is going to be black give us a ring scale it down just a bit and we'll put 1 888 i'm just coming up with a random phone number so hopefully you don't call it i don't have that yet try 48 and then adjust this spacing up here turn on 48 as well all right and then we can right click and duplicate that move it over shoot us a message and i'm going to shrink this just a little bit not that the uh right there and right there as well and i want to take all those layers not this one though all right and i'm going to move them up just a tad bit and then just on the bottom here we're going to take that same design we did earlier uh what happened here is something got screwed up just a bit i think i know why that happened great clipping mask this text got changed one second it's just a black sometimes these things can happen when you're working with a big document okay everything else looks good yeah so i want to take this right here i'm just going to go ctrl a for to select all and then ctrl c and then i'm going to go back down here select this layer and create a new layer as a clipping mask hit control v and then edit image flip vertical this is down here and i want it to be the same design up here or the same layer properties so it's luminosity at ten percent all right so that looks pretty good for now and then just down here i'm going to have a very simple footer and so what i'm going to do real quickly we can knock this out real easily is just take this layer along with our portfolio oh there's one final thing i wanted to do that i forgot to do in the first video here i want to make this an actual button that stands out so all i have to do real quick is we'll select the layer just beneath these and we'll take a rounded rectangle tool we'll leave it at 30. all right we'll change it to white take the type tool select just that portion of text make it this color get this into position alright so that was real simple uh that way it stands out just a little bit more so if i take all these layers there's only three of them hold shift and select that one and i right click and i hit duplicate make sure auto select is unchecked we can drag this all the way down to the bottom of the document i'm just going to scroll down here there you are we don't see it because it's white text so what we can do is just take all this this is going to be this text or this color rather this is going to be white actually this will be this color and then logo copy image well what we can do is uh let me test this real quick hit color overlay all right and then i think further once we actually you know what i want to make these black instead i think further down the road once i get in the html css part i might may come back uh just add a couple more things like a terms of service and privacy policy and all that but i'm not too worried about that right now for this mockup uh all right so that is it um basically now what we're going to do um i'm going to move on on the next section we're going to take uh our design and prepare the images for the html and css process uh and so you'll if if you've never messed around uh with designing websites or in this fashion it'll be a little bit a little bit confusing at first but you'll see once we get to the css section it'll all come together um so i will see you in the next video all right goodbye