Photoshop for Entrepreneurs : Web Design Mockup

1. Photoshop for Entrepreneurs : Web Design Mockup: Hey, everybody, my name's Jeremy Deegan, and today we're going to build a Web design mock up. Basically, this is a rough sketch or a simple template that we will send off to a graphic designer or Web developer to create our website for us, as an entrepreneur, we really shouldn't be spending a whole lot of time on things that we should be doing. So if you don't have special skills and graphic design or Web development, you probably want to let someone else who has those skills handle that for you. Now we want to create a basic mock up and Photoshopped to show these people so that when they begin to develop the website, they have a basic understanding of what you're trying to go for. And the more information that you can provide to them, the easier it's going to be. So let's go ahead and imagine for a second that you own an ice cream restaurant, and I'm a customer that comes up to the counter, and I say to you, I would like an ice cream sundae. After having many years of experience in the ice cream business, you know that everyone likes their ice cream sundaes differently. So you asked me, What do you want? Vanilla or chocolate? And I say, Well, vanilla, of course. And you say you want bananas? And I say, Of course there's bananas on an ice cream sundae and you say, OK, well, what about nuts? Would you like some nuts on the top of the sundae? And I go, No, I don't want nuts. I'm allergic to nuts. Or just by asking some simple questions, you immediately find out what this person wants and doesn't want. And the more information you provide to the graphic design artist or the website developer , the easier it is going to be for them to get it right the 1st 2nd or third time, instead of having to constantly go back and forth and trying to guess what you're looking for. So back in our example, if I come up to your ice cream restaurant and I come to the counter and I say, Hey, I would like an ice cream sundae, vanilla with bananas and cool whip and a cherry on top. Maybe some chocolate syrup, but no nuts, because I'm allergic to those. Well, you didn't have to ask me any questions and you know exactly what I want. You can go back and start making that immediately, and that's kind of what we're doing here. We're going to make a very basic design of a website and just put down some crude information so that we can give that to the graphic design artists or the website developer and let them know what it is that we're looking for. So the first thing that we're going to do in this course is we're going to write down some ideas of what we want on our website. Then we'll do a rough sketch by hand just to kind of get some basic layouts. And it's usually easier to do this by hand because you can quickly pencil in or color and or or write down on a napkin. What you think this should look like, and if it doesn't look good, you can throw it away and start over again. Then, once you have a good idea of that, we'll get into photo shop and we'll go ahead and create some very basic elements and group those together so that we can move them around and see how it would align to an actual website design. So let's go ahead and get started in this course 2. Researching Websites for Design Ideas: Whenever I begin doing any design work, the first thing that I like to do is research, and this allows me to go out there and see what is working for people and what's not working for people and help get the creative juices flowing of how I might tell, want to lay out some of this information on my own Web design mock up. So I brought up the smart, passive income site, and this is owned by Pat Flynn, and he likes to be the face behind this company. So you off often see a lot of pictures and images of him on the site. And if you go to this website, the first thing you're going to see is a very giant picture of him, and that just helps reinforce his personal brand. But I went ahead and I scrolled down to the bottom, and we're gonna look at the bottom half of his sight so that we can kind of pick apart what he's done here and give you some ideas of some different things that you can do so at the very top. The first thing that you're going to see is a menu bar and I'm just going to do some basic highlighting here. This is going to be a little crude, but it'll help give you an idea of what's going on. So we have this menu bar at the top that I've highlighted in a red, and that menu bar is broken up into three sections. The first thing that we have is the logo, and then we have the links for the site, which is very common in all websites. Excuse me, and then the next thing that you're going to see is his income reports. This is something has been doing for a long time, and that's just showing how much money he's made over the years. But basically, this menu bar stays whenever we scroll up and down the website. So one thing is, you're always seeing this logo, and that's kind of helping reinforce the brand. And then we always have these links so you can go and click on any of these links. No matter where you're at in the website, you can always move away from this page onto another page. Now, the next section that you're going to notice as we have this big fading white to blue background going on. And this all feels like one kind of big section because of the common background that it's sharing. Even though we have different things happening here now, this is all content of his sight. So we have some post at the top from affiliate Resource is that he has and then his lean magnets, and we'll go ahead and take a look at all these right now. But at the top of this background image, it is broken up into two halves. So we have this big half at the top, and then that is broken into two more halfs here. So these are his post, and these can be blocked posts, YouTube, post or podcasts that he's actually put out. And he's got three nice, very even images here, given at a very nice, readable look and very easy to see with a little bit of padding on left. And right now, you'll see this padding all the way down the side of the page because you never want to put anything completely over because it could get cut off Now. He did put his in income reports all way over so that could get chopped off. Maybe he's not so concerned about that. And today, with responsive website designs, it's not such a big factor. But it is nice to have a little bit of padding on the left and right. So we have these three post and nice and even layout going on here and then below that we have this trusted resource is section. So this is broken up again into three more images. We have this left side in this right side, and then we have these three buttons that you can click on. Now you'll notice that he didn't put the three buttons in line with the three at the top. So that was a pretty smart move, because what it does is helps. It helps break up the page a little bit. So if he would have just stuck those three buttons below these three buns, it would look a little bland and boring. So he's got these three posts, and then he offsets these three with a title and subtitle, and you actually begin to read the page that well, that way you see the three post and then you read this title, and then you might look at these three buttons that he wants you to click on now, below that, we have the lead magnets section, and this is broken up into a top and bottom section. And actually, if you look at this Web page live, this is an image that scrolls in and out. So this changes. You'll see different lead magnets pop up depending on which one he's showing you. So on this top half, we have the image of the e book that he's giving away. And then we have another title subtitle with a button to click on. So he's broken that up Nice, easy to read and allows you to see that button nice and bold so that you can click on that . Then we have the bottom section, which are the four products that he's trying to get you to enroll in thes four lead magnets , and, um, now he could use four for a couple different reasons. One that's because that's how many products he has. But also putting four instead of three this time also helps break up the page a little more . So you're starting to see how this page is laid out and you just kind of read down the page this way, and that's kind of what you want to do when you're designing your Web site. You want to make it easy for people to read this sort of like a book where their eyes just slowly follow along the page and isn't jumping all over the place. So now we've got four images and helps just break it up a little more. And like I said, each one of these, um, it goes in and out of the above image right here now below. That feels like a different section because it's not using that same white and blue fading background. And that's because now he's talking about his community, which is a little different. It's not products or content that he's selling. He's trying to build a community, and I believe this is a Facebook group that you conjoined. And on the left hand side we see a picture of him, so it reinforces that brand and his trustworthiness. And then on the right hand side, we just see a very basic title and a button with a lot of white space, so it's very easy to see and to click on. If that's something that you want to be a part of, then below that, we have a bottom menu button. Ah, this is just to add some more buttons at the bottom so that when you get to the end of the page, you may click on one of these links to continue on with the page. If these weren't here, you may read all this stuff. Your eyes followed down the page. But then you may just leave the page or not click on any of this stuff because it wasn't appealing to you by having these buy buttons at the bottom here. When your eyes go down the page, you may say, OK, what do I do now? Oh, I can click on his blawg. I can learn more about him or there's a start here, but maybe I want to click on that and see where that takes me. So very smart to put buttons at the bottom of your page so that when people get to the end of any of your content, they can continue on with your site and try not to leave your sight. Then at the bottom, we have our basic footer information. So you're going to see on the left hand side terms of service and different information that you can find out about the site in the blogging the company. And then on the right hand side, you're going to see some social media icons. So you may want to go click on you know, that Twitter, um, Twitter page and go follow him there. So this is a very basic way of going in and seeing how a page is laid out. And like I said, this is very crude. I mean, you know, I was just kind of highlighting fast here, but I can easily see how he's laid out this Web site, how it's got this nice uniformity going into it and just provides an easy way for the viewer to go through and see this information and read it. And it also gives you an idea of some things that you may want to do within your own website. When you began creating your own Web design, mock up 3. Writing Down Ideas for Your Website Design: the first thing that we're going to want to do before we begin mocking up our website is we're gonna want to take some notes about what we actually want on that website as faras links and layouts and the way it looks and so forth. Now you can do this with a pen and paper. You can do it with a word document or no pad document. But basically all we're going to do is we're just going to write down some notes of what it is that we think we want to have on this website. Now, since this is a photo shop course, I'm going to just go ahead and do this inside a photo shop with a graphics tablet. And this is a wack, um, bamboo tablet that I have. And basically it's just a tablet with a pen where when I move the pen around across the surface of the tablet, it moves the cursor around, and this is great for me to do all kinds of things inside a photo shop. But here I can use this to make some notes, put it on the layer, hide the layer and then later on, if I actually want to recall that information. I can very easily, um now. So if you're following along, you have a tablet. You can do it this way. Otherwise, just follow along with a piece of paper and a pen. And this is a very simple process. This won't take too long, but I just want to show you how to do this. So go ahead and make sure that you have your brush selected. Go up here and choose a brush. I went with the hard round in a small pixel size, so it looks like handwriting versus a bunch of blobby mess going on here. And make sure that you're a passivity is set to 100% in the flows to 100%. And basically, I can just draw on here. And wherever I draw, I have a lot more control than a mouse. And the harder I press, the darker it gets in the light or repress the lighter gets and so on. So I'm just gonna undo that. And we just want to answer some basic questions that you would find within a website. And you just you think about, um, any website that you've seen before, or even the example that we looked at earlier. And you think about what you want tohave in that. So, for instance, at the top, we usually have a menu bar, and we need to have some links. So what kind of links are we going toe have in that menu bar? Well, we're gonna have Ah, home, Homelink. Maybe I'm a blogger. And so I want to have a little about me page, because this is about my, um, website that I blogged about and monetize. Um, maybe we have or blog's. We've got the blood that we talk about. Maybe I'm a podcast or two. So I wanna have the podcast information, and then I wanna have maybe a contact section where people can contact me and ask me questions. Now, I'm also going to have some social media links. So, um, just put social media links and just kind of think about what? What social media platforms that I'm on. So I have a YouTube channel. I've got a Facebook channel. I've got Twitter I've got linked in and, ah, let's just say you know, what's another one Google plus OK, so we'll just say. OK, so now we know what kind of links that we want tohave on here. Um, And then we've tried to think about maybe what? What we want to have in this home page? How do we want to look? So I know I want Ah, I want to be the brand behind this home page and behind this website. So I want to say, um, a profile picture of myself at the top so people can see me. And what else are we going to have in here? I want to show my most recent blawg posts because I blogged a lot, and I do podcast. Um, so I want to make sure that I have recent blawg and podcasts, um, post in there so that people can see that on the home page. Maybe I have one of those lead magnets where I give away a free e book and I wanna have that information. Um, so I want to make sure that I have my lead magnet in there. Maybe I do advertisements Google ads on my site, and I want to have an ad on the front page. Just so maybe I happen to grab some people every now and then click through the ad and generate a little side revenue for me, too. So I'll put a Google ad on that page, and then you can go through and just just think about what you would actually want to have on this page and this. Like I said, this can get more in depth. You can make this a big document and you can actually say Okay, when people click on the block page, it takes him to this page and you can name it and say, Okay, I want to have, um, you know this kind of information on the blog's or this type of layout? You can do these different Web design mock ups, but typically the first thing that you want to do after you've done some research and you've looked around at different sites, it's to get an idea of what you want on your page, and the best way to do this is to write this out. And like I said, you can do this on a sheet of paper very simply, or if your prefer a word document, you can do it there. But start writing out information of what you want to see on that website. So as we begin designing, you don't have to really think about it. You already got that information ready to go. 4. Formatting Your Photoshop Document: now that we've written down some ideas that we want in our website, we need to talk about how we're going to set up our Photoshopped file so that we can at least get the basics of our design mock up off to our graphic designer or Web developer. Now all websites come in different dimensions, and with phones and tablets and different monitor sizes, it's hard to pick the perfect size for a website. And this is best left to the graphic designer or the Web developer as you begin working on the site, because there's a lot of variables that come into play in perfect picking the perfect dimensions. So let's go ahead and talk about dimensions real quick. I'm gonna take my brush here, and I'm just going to draw a basic monitor, and this is like a new monitor that that I use. And this is a pretty standard format, and the resolution of my monitor is 1920 by 10 80. Then this is what I can see on the screen now. Ah, lot of people aren't using high def and bigger monitors. A lot of people still have older monitors they're using, and those older monitors are commonly found in a 10 24 by 7 68 resolution. So we know that if we at least make our website to these specifications, that it's going to work for us a lot better. At least people who on odor motors can can see our images. If we put stuff off to here in the 1920 by 10 84 met, then someone on an older, older monitor might not see it, or it might get cropped out. Or they might have to resize or monitor. And it's just not going to look right. So it's typically best if you actually build to a smaller version. So at least everyone can see that now, later on, If your Web developer tells you know, let's just go ahead, do it to the bigger size than then go with what they're saying and talk it out with them. But for the sake of this course, we're going to use a smaller size so that we know that everyone can at least see that information. So we're gonna build it to this size, and then you know we'll have our menu bar and our information and everything that we have written out here. Now, of course, what sites aren't 7 68? Because they actually proceed to go longer than that, where you actually scroll down. This is just the viewable image, so we can always add to this later on. Um and then you would have a scroll bar and you'd stroll up and down the website to see this All the rest of this information down here. Now, this also works really good, these numbers, because their, um their powers of two or divisible by two. So we can we can break them up into chunks that work really good for us. So they all these numbers will actually go into both of these dimensions very easily, so it makes it very easy to subdivide out the information. So let's go ahead and take a look now, real quick at some of the things that we want to do in Photoshopped. I'm going to draw a quick circle just to give you an example of one thing that we want to be aware of. So let me just just put it right there and just fill it real fast so we can see this. Okay, now, the first thing that we want to talk about is image, size and canvas size. Right now, if we look at the image size and I go to pixels, we are at a 1920 by 10 80 resolution. So if I looked at this full screen, it would it would cover my monitor completely. Now, if we change this to a smaller dimension size and we're working with the image size right here, what this is actually going to do is it's going to scale the image and you can see that it compresses everything and makes everything squished. So as we begin working, that's not something we want to do. We want to change the canvas size instead. So if I go to the canvas size and I changes to pixels, since that's what we're working in. And I actually changed the canvas size, the same amount you see, what it's going to do is it's going to clip the image, but it's not going to scale it down and make it squished. So as we begin working, if you need more space, you're gonna want to change the canvas size, not the image size, because we don't want to scale that. So in our example, we can make this 10 24 and typically say it would be 7 68 But let's just say that we want some more space because we know this is going to be a long document long website. So she's put 2000 and what this does is this opens us up into a longer document, sort of like a website, and you can see on viewing this 50% right now. So if I zoomed into 100% this is actually what the website would look like on my monitor and we can actually view this, um, screen mode and full screen mode. And this is what the website would look like on my mind Earner and I wouldn't put any important information off to the sides here. All my important information would just go into this spot. So I know that even people on smaller monitors can at least view my website as they begin strolling through it. So I'm gonna escape out of that. I'm going to zoom back out so we can see everything. Now, of course, my information has been cropped here and we're losing a lot of information. And I still have my notes in this layer. So, um, just to see this stuff, I want to go ahead and scale this all down. So let me select everything here. No, si de select control. Be okay. There you go. And let me just scale my notes in here, Sam. Now, I just have these for later. If I ever want to go back and kind of take a look at him, I can do that. The dimensions I don't really care about that's fine. I'm just going to leak that out because I think you understand the point I'm trying to make here that we just want to use this particular resolution. But I do want to keep these notes so I can always turn this layer on and look at it later, and I'm just going to add a new background later, layer and just make it white just so I don't have that transparency going on. Okay, so now we have just ah, got my notes terminal. It's off now. I just got a white basic layout that I can use here. All right, so the next thing that we're gonna want to do is I went ahead and I change my canvas size to 10 10 24. So we know that we've got a good with and I made it 2000. So it's extra long, so I can just kind of work that way and then can always come in here and trim this out or make it longer based on how this website starts turning out. Now, next thing that we're gonna want to use is a grid, because we want to make sure that everything is snapping to a grid. Um, again, this doesn't have to be a perfect science because we're doing a mock up. But the closer that we can make things, um, as as we want them to actually look as faras the heights and wits and what have you, the better it's going to be. So instead of just arbitrarily slapping things in it, be better to use a grid, so at least it makes a little more sense, especially when we hand it off to someone else. And the great thing about this is, if you're working with a graphic design artist who has photoshopped, you can give them this PSD file, and then at least they can pull it up and say, OK, you made this so many pixels and what have you and can kind of go from there? So I'm just going to go to view and I'm going to go to show and then select grid, and this is going to create a great force. Now I want to adjust this grid because you can see it's not really lining up really nicely here. It's kind of going off to the sides and not not hitting perfectly where we want it to be. Go ahead and zoom in here so we can see this. So see how this kind got cut off here and this. This isn't a nice even grid. It's because it's using different dimensions than what we're using here. So click on edit goat, go down to preferences and then select guides, grids and slices. And this is gonna allow us to actually change the grid, how we see fit. So if we go down to where it says grid, we have one grid line every inch with eight subdivisions. What we're not even using injures were using pixels, so that's proud of the problem and we have eight subdivisions. Let's go ahead. Just make that one subdivision now so you can see I didn't mean to hit Enter, But you see what that does. Now we have one grid line every inch and no subdivision. So it's just regular lines without any subdivisions. So go back here, so I don't mean to close that. So we're gonna change is two pixels and now we have a grid line. Every pixel. Well, that's a little too much. We don't need that. And as I said before, this is all divisible by two. So we can use any of those numbers I showed you before. 24 8 16 32 64 So let's try 64. So 64 looks good. It has some nice good sized boxes and divides us up. Really good. Now I could do, say, eight. Um, that's a bit much. 16 16 is pretty good, but if we do 64 a bigger number to get these bigger boxes and then we use subdivisions. So let's say four subdivisions now we can see we have nice, thick lines, every 64 pixels, and then it's divided by four. So if you take four into 64 that's 16. So every one of these light lines is 16 and every one of these dark lines is 64 you could set this up whatever feels best for you, but I think this is pretty good. This will give us good dimension size. And now when we go to view, make sure that we have snap on snap to grid. So whenever we do anything like, say, if I grab this box here, it's going to snap it to the grid points, and that's just going to make it nice and even force. And like I said, this isn't a perfect science, but at least this will show us give us some nice, easy things toe worked with. So if I'm making my menu bar appear and I have this selected well, now we know that my menu bar is exactly 64 pixels law height wise and 10 24 with wise. So that's a great tool. And then one thing else that you might want to turn on is the rulers. So if you got a view and you click on rulers here, you're going to see these rulers at the top and these air great for a lining things up again. It's set two inches and we don't want inches. So double click on that. And when you double click on, that's gonna also bring up the same preferences. You can see guides great and slices here and above that units and rulers. So now we can adjust the rulers property. So let's go to rulers. Change this two pixels and then now you can see it's showing our pixels of our document. We can hit OK, and this is great because now we can see where we want to divide this information up if we want to use the rulers as guides. And another great thing about the rulers is if you go off to where the ruler is and you click and drag, you get these lines and these air great measurement tools. So it's very easy to drop a line in here and kind of see Okay, that's the center of my document, and I can align things up that way, and I can slice this however I want, so we'll be using these to kind of just lay down some basic things before we begin dropping stuff in there so we can at least start breaking this up and seeing how we want this website to look. So that's how we set up our document again. We're 10 24 wide, so at least we know that people on older monitors can view this. And like I said, as you began working with the graphic designer, the Web developer or whoever is designing your site for you when you him this mock up off to them, at least they have a good general reference point. And then you all can work together at that point and change out anything you want. But at least we got a general sense of something that looks a little more, um, you know, cohesive and ah is gonna work a little nicer than just some random numbers punched in. 5. Designing Your Website Mockup: Okay, so we have our documents set up of how we want to go ahead and create this web design mock up. And I'm going to show you a couple of different ways that you can go about doing this. Now, keep in mind that all you are trying to do is just show the basics of what you want to look for in your website and what you're going for when you're handing this off to a graphic design artist or a Web developer. So the first thing that we do is we can look at our grid here and we can start dividing up this grid. Ah, and our document into what we believe would be good in one way of doing this is using these guides with the rulers so I can click and drag this down. And I can say, um of these air from before Let me pull this out. You're right. The center one. So we can say we know we want our menu bar the top here, and we know that we want ah, footer section at the bottom and we're gonna want a lynx at the bottom also. Then maybe we have a top above the fold section of a picture of me or picture of you or your brand or whatever you're doing below. That may be what we want to have some block posts. Um, then we want to have our lead magnets and so on, and you can go down cutting this up and dividing this and then one of the first things that you can do from that is create a new layer and then you can go in here, take the rectangle toolbox. Ah, and then pick a color. I usually use gray when doing mock ups, but if you have a brandy color, you can do that and I'll go in here and I'll just start creating very basic crude images of what it is that I'm going for. So a pool in the text or and I know that this is the link section. So I'm going to go in here, and I'm going to write home about log podcasts contact and what have you and then, you know, change these change the size here, And this is this is one way of going about this. It's pretty simple. And all you're doing is you're just You're kind of recreating what you think this would look like? So you, you know, or your links here Do you want him in the center? And you don't have to be an expert. And as you as you designed the site, you're going to realize it. Things were going to change and you're gonna want, um I wanted to look different. Maybe something doesn't look right. You're not an artist, but you can at least get your point across to the graphic design artist or web developer to help create this for you. So this is one way of doing it. And then what you can do with this also is you can select these layers, hit control G and group them together, and then you can move these around. So if this was, say, ah, block post and you didn't, you weren't sure where you wanted it. Ah, you don't know. If you wanted at the top, you might want it midway at the bottom. This is a great way for you to group these things together and move them around and see what works and doesn't work for you. Now let me show you another way of going about doing this and this I find to be easier and ah, it looks kind of better. So it's a little more visually appealing. So right off the bat, you start getting some a very good idea of what you want. And what I tell people is Adobe Creative Cloud Suite allows you to have access to a ton of assets that you can use within your projects and throughout courses that you see me do. You will see me use this often because it's such a powerful tool. I think it's kind of under under used and you can go out and you can find these things on the Web. You can find free ones you can find ones that you pay for and stuff that will better suit your needs. But you don't have to look any further than the software itself. So if you open up the creative suite application and you click on that, it's gonna pull up this box here. And if we go toe assets and we type in you, why you are going to find a bunch of user interface assets that you can use? Some of them are single assets like you see here the calculator in the calendar and you can draw drag those in Some of them are full page formats like thes thunder. You I kits these air pretty much already laid out. And you might like some of these. You could just drag one of these. And if you found one that you like and not even have to do any more than, say, here, this is what I want. Some of them are kits of assets, so they're groupings. And let me find some of those like this one here, this combination you AIPAC, this is this is a group together that you can use, and it's got a bunch of different things. If I click on that, you can see it's got a profile picture. It's got a graph. It's got a calendar buttons, search bars. And so you dragged this in and then you just pull out the elements that you want to use, so that works really good. And I've pulled a couple of these assets and already that I'm going to use these in this course. This just to give you a quick view of how you could use some of these assets and, um, I'll go ahead and supply these in the resource is section of this course. So if you look over here at my library, you can see the three that I'm using. The Avia, you, you I kit starter, the bricks elements. You I kid and a view I kit for navigation. And I'm just going to open these up individually, are right click and hit at it and what's going to do? It's gonna open up a new PSD Photoshopped file with those with that file, and then you can see all the different layouts that we have within those. So let me go ahead, open up all these. This breaks Element one is a little bigger. It has a lot of stuff in it, but really high quality looks really good. Now, this is just saying that it's using fonts that I don't have installed on my computer. I can always go in and install these fonts. I'm not gonna worry about this right now because all we're trying to do is just give you an idea of how you would create your own mock up and even you don't even have to work too much about the text because you're just trying to get what the layout looks like. We don't care about the text or the images were just trying to get our point across to the graphic designer or Web developer. So, um, I'm gonna have just at cancel and not resolve those, and then I'm going to open up this last one here, and it don't resolve on care about resolving that. So I'm gonna go the 1st 1 here, and I'm going to zoom in. And these are pre made layouts for websites that you can just go ahead and you might find one of these that you like, and then you can just say, Hey, this is this is this is what I'm going for instead of this image put this in and and so forth. But what we're gonna do is we're going to rip out some of the elements of these things and use them in our in our design mock up. So the 1st 1 I'm going to use is this one right here. And the one thing about these Photoshopped pauses, They sometime have a lot of elements, and the hardest part is finding what is what? So what I do is I just start turning off layers until I find the one that I want. Okay, so this is called two blocks. I'm going to double click on this because this is a smart layer. As you can see, there's not a folder of information. It's got this icon here in the layer. I double click that it's going toe up, open up a smart layer with all of the layers in there, and it's talking about text layers again. I don't want to update that. So when I opened up the smart layer, you can now see here all my folders and information that we can drag out and pull around. So this is what I'm looking for. So I'm gonna go back. I'm just gonna close that document. I don't need it anymore, So we're not going to use that. Okay, so we go in this two blocks and what's going on here is I like this top. I like the way they did this title. The subtitle. Maybe some buttons where I can put start here or something that I want the person to click on, have an image of me or my brand and ah, maybe these navigational links. I might like those navigational links, So let's go ahead and drag that in again. I'm just going to start clicking through the eyeballs and the layers until I find what I'm looking for, which is that right there and they call this hero. So I'm gonna left click and drag that into my document and just drop it right in there. Now, one thing that I definitely recommend you do as you start labeling things that either will make sense to you or make sense to the graphic designer or Web developer later on. Because if you give them the PSD file and they look at this and they see here, they're not going to know what that is. So we just might call this top, um, top section or something. At least we know that it's the top section, and that's the folder that we're working on. So I'm going to click, and I'm going to drag this and I need to scale this in and again. We want to be close with dimensions and sizes. But again, we're gonna have someone else working on this for us. So We don't have to be perfect. Um, but, you know, we want to look kind of close. So we like how this looks. This looks great. Except it's got this picture of this girl looking down. I don't really care for that. I rather have a picture of me and my brand in here, at least so I can have some cohesiveness. I could take it out and just drop a text block in there and say image of me or image of brand or image of our truck or something that you would want to use. Um, so I'm just gonna open up that folder again. I can kind of click around this stuff and see what's going on here. We got the title we got, knave. We had a row. The arrow. I don't even care about that. I'm just going to leave it. So it's one less thing you have to look at. We got base. Okay, so it's in the base. So and then some of this stuff might not make a lot of sense, so you can see when we turn that on and off, it's got some coloring effects and different things going on while we don't care about that again. We're not trying to be perfect here. We're just trying to get a basic layout, so I'm gonna turn that one off rectangle. I could even just delete it if I wanted it to. Actually, it looks like it can't delete it. I'm just gonna turn it off and hide it. And then I'm just Ah, maybe I bring in a picture of myself. I'm gonna go file open. This is a project that I worked on before. Picture of me all showing a little before and after image of some touching up color, correcting that I did. But I'm just going to pick this one that says adjustments. This is the picture of me right here. That looks good. And I'm gonna drag that into my document. Pop that in there and see, sometimes you gotta move this stuff up until you see it. So it was being hidden by some of those layers. I just kept moving it up this stack until it came into view. So now I'm just gonna scale this down this on that line there, scale it back and move it over. All right, So this is looking good. I mean, I like this. Um I got I got some links already already. Got this little title section. Maybe I would want to move that title section over. So I like it to kind of come in with me, and here we go. We're already starting to see the basics of this design mock up. So this is the basics of how this process works. We'll go ahead and take a break right here, and we'll come back and take a look at how we can add some more things in the next section . 6. Adding UI Graphics to Your Design Mockup: Okay, we're going to go ahead and finish up this Web design mock up. You've seen there's two ways we can go about doing this. We can use the rulers, grids and guides to go in and just block off some very basic ways of doing things. Or we can use assets from Photoshopped themselves to quickly dumped into our website and move them around to get an idea of what we want our site to look like very quickly. So I'm just going to add a couple more things here just so you can see the process as we move along. And it's going to be the same process throughout the Web design. Muck up, you just dropping things in and adjusting them, moving them and seeing what works best for you. So let me go ahead and minimize. We got her top section. We got this adjustments layer that we have here. See if I drop that behind that line. I still have my notes layer so I can always go and read what I wanted to add. So I wanted my menu bar and I can go into the top here and and others into the menu bar up here, but this will give us a basic idea. And then I've got my profile picture. So I wanted some recent Blawg posts and podcast posts and a lead magnet in a Google ad. So let's go ahead and add in a couple more of these things. I am going to go to this one. This is the brics element. And if I zoom in here, this is a cool document. It's long, and it's got a lot of stuff in it. And again, part of the problem with this document is just trying to figure out what is what here. So we got a bunch of different things to choose from, and I'm going to scroll through here, and I'm looking for something that would work for our block posts and our podcast post. Something like this might be good. Um, this could be something cool. This could be a block post image that we could use. And that's all I'm doing is I'm going through here and trying to figure out what What would reflect something that actually looks like a ah block post. I like this one right here. Um, it looks like a post where I would have an image in there. The name, the title of the posts, the information as I begin talking about the post when I posted it and any comments have been left. And maybe I could have this favorites heart here. Or maybe I could take that out so that, like I said, we got to figure out which one. This is because these names don't necessarily mean anything to us. So I just go through here and I just start clicking off these layers. Oh, okay. Here it is. Image Gallery three. So I'm gonna left click on that. I'm going to drag it into my document. I'm going to drop it in, All right? And so this is Ah, spot. Where now, when I was designing a site, you can do a couple of different things. I might actually put some kind of title or header up here, and I could fill that in later, or I could go straight into the bog post section. Um, for right now, we're just going to go into the bog post section and you'll get the idea. But of course, I want this to look good. I might actually have a little saying here, a little quote or titles that says recent blawg post and then drop these in. But basically, I can take this layer and see what we got here. Okay? We got her image. Okay, let's get rid the icon. We're not going. Use that icon and I can leave the image. I could take out the image I could also, if I wanted to. I could take the rectangle tool and, um, just go over the image on a new layer. So depending on what I wanted to show the graphic designer, they could probably figure out that that's not an image, You know that this is just a placeholder image for what we want, but I might just fill that in, and I could even write a text block over it that says image. Or I could even if I wanted to, I could bring in him an image, just a quick picture or something and have three different ones here. But basically, this is just a quick way for me to see that. Okay, this is a block post, and we know what we got going on here. Ah, and then I'm going to call this blawg post one. I'm gonna left Click. Drag that onto the new layer. Make a copy of it. Blawg Post, too. And grab my move. Tool. Click on that. Move it over and copy it. A lot of post three. Click on that. Okay? And you can see these don't really line up so I could scale them, just for sake. Sake of time. Here. I'm just going to move him over and kind of center them out. Okay, so now, now we're making some leeway. Um, now I want to divide this up and maybe I need my my podcast post. So, um, I need to divide this. I like this blue line. Maybe I want to keep using this blue line on down. That was in the top section, so let's go find it. I believe it's this year. Yep. So it's this little marker here. I'm going to click on that, not double clicking. I'm gonna click and drag it onto the, um, under the new layer bunting to make a copy. I'm going to drag it out of that folder so it's off by itself. Gonna rename it line breaks. I know what it is. Move, tool. Click on it. So Okay, there we go. Okay, So we got that line break there. That's nice. And now I just want to duplicate this, cause maybe I do the same thing for the bog post. Maybe I decide I want to offset them like we saw with the smart, passive income site. However you want to do it. But, you know, this is again just to show you the process. So I'm gonna do this to another line break and very quickly, just by using things that we already have, um, assets that we already have in photo shop. You can see that this is a very easy process. And you can just cut these things to pieces and use just the sections. You want to get out an idea of what you want your website to look like. And again, I'd probably put in some titles and things here and say this is Ah, this is a recent block posts. Let me do that. And of course, I would spend some time and make this look good and even and pretty, But for right now, we're just gonna show you the basic so It doesn't have to be too pretty. Let's try to get the point across that I'm trying to make here. Podcasts. Podcast. What are they? Episodes, Okay. And then Ah, So what else did we want here? Let's go back up to our notes. Take a look at it. Notes we wanted. We got our profile picture. We got our bog post. We wanted to lead magnet in an ad. So let's see how we can do that. I'm going to say this real quick. Okay? I'm going to go back. I need something. Looks like a lead magnet. I was looking at this earlier, and this would be a good lead magnet image image on the left hand side. Title talks about the lead magnet, and maybe I have a sign up button and I probably change us out toe what looks like a text box using some of those assets, But we need to find out what that is. That's the two blocks. So let's grab that Drag that into our document here in, um, we can also change the colors of these things. So, um, if you have a branded color that you're working with and you know what you want the color to be. You can do that very easily. Um, amusing. They use this blue pretty typically, and that's a good thing because everyone always uses the same blue, which works good. So let's find out which boxes is our this at one. That one. Okay, let's delete these. I don't want thes. We're gonna call this lead magnet. Okay, so that's cool. We got her lead magnet. Ah, we want in advertisements. Let's go back in here. See if we can find something that looks like an advertisement. Oh, it says advertisement. Perfect. Okay, we gotta figure out what that one is. There's a lot of these, so I just start hiding until it goes away. And then I know what's what. Okay, here we go to images. Strike that in. Drop it. We don't need one of them. So we don't want box too. Hide that that over. Okay, Cool. And then we'll call that advertisement you can't spell ever. Ties meant and let's move that lead. Man it down. So it was just kind of centered looking. All right, that looks good. And, ah, let's look at your notes. So we pretty much got everything that we wanted to have. And we've done this and, you know, about 20 minutes or so so very quickly, we can just start piecing together how this looks. Um, of course, we'd want the footer in the navigation at the bottom. Just go ahead and drag that in real quick. Um, we're going to use Yeah, this one. So we got this footer and sub footer at the bottom. So drag the footer links in getting and, uh, fit our document. We don't care about the texts. Just had okay through that again. This is just the design. Beautiful. And footer extended. Yeah, I like that one too. And we're actually gonna have these touch. It would be all that miscellaneous links and information that we might want to put in here . I probably make the link. The one above it, Um, little darker. See, you know, and I could mess around with all this stuff. Take out the logo. I don't care about that logo there. Maybe I center and re scale it so it looks a little better here. Fine. Okay. And let's see, you know, if say, we did want Teoh color in that footer that's above it. How would we do that? We could drop on that, find that background color, and on this one I can actually double click it. And it will actually bring up ah, color picker for me because it's a smart layer and I could darken that up, so that's cool. Um, I could also do in effects color overlay on that section and change it into any color that I want. As long as I have normal selected in 100% opacity, I could go in here and change the color, but because it's a smart layer does give me the option to just use a color picker. So we'll go with that. That looks good. Okay, let's take a look at. So here we go. We have a website very quickly and easily laid out. Maybe I don't like that link at the top. And I'm like, uh, kind of like this link a little better. Let's so this link in here, this is navigation menu. Pop that in, Uh oh. Looks like I dropped it in the folder by accident, so make sure you don't do that. I'm going to move this out of the way. Bring it to the top. I like to keep things in the layers stack. Actually, how they are viewed on the page. It just makes a little more sense. So here we go. Scale this. And I don't need to see all this. Miss Alina's information drop down menu and search results. And then now everything else is kind of touching the top. I might like that. I don't like it, though, so I'm gonna click on everything, make sure I have my move. Tool selected. And I could just move all this down together. And then Now the other problem is we have two links. We got these toppings and then links bleeding in from the top section. So I'm going to go to the top section and I'm gonna turn off the knave so I don't see it. And then we just got this little bit of white space because we didn't fill up the whole document. We've seen how to do this before with the canvas size. So let's just find out where we're at this Looks about what does that say? 17 10 17 20. So canvas size make this 17 20 clipping Wilker. Proceed. Okay, now we need to grab everything because it clips it from the center, not from where we wanted to clip. So just grab everything and then move it down. What? The move Tool. And there we go. We have a basic lay out of our website, and we have everything we wanted. We have our we have our ah logo here. It looks like that navigation logo came back in difficult. If I don't use want stuff, um, navigation. The top section naff. If I don't want stuff, I will usually delete it out. So we're gonna take that knave and get rid of it. Okay, so there we go. Now we've got are move that over a little bit. OK, we've got our links. I got my profile picture, maybe some buttons and talking about the site. I've got my recent block posts and some placeholder great great squares here to show those . I've got my recent podcasts episodes. I've got my lead magnet. I'd probably put a different picturing or cover that up with a gray square. I've got my advertisement, my bottom leaks. So everything that we wanted under notes except for social media icons, but you can see how easy it is to just fix that and bring those in. And those are the two ways that you can go about designing this. You can either do it with the grids and rulers and creating these squares and things yourself like I could actually make these squares in this text, but it's a little longer process. Why not just use the assets that are already available to you from adobe and create this website? How you see fit? So there you go a very quick, simple and easy website design market. 7. Use Photoshop to Create a Web Design Mockup: Now you know how to make a simple Web design mock up, and this is valuable information for a graphic designer or a Web developer because it gives them some information up front that they can use to begin making your website immediately. And they don't have to do a bunch of guesswork trying to figure out exactly what it is you're looking for. In this course, you learn how to do some research toe, look at other websites and pick them apart and figure out what's working good for them. You learn how to write down some ideas ahead of time of what you want in your website design, so you don't have to do that guesswork as you're designing it. Then you learn how to do a rough sketch to kind of lay down some basic ideas. And then we went into photo shop and use grids and layers and various tools so that you could move around the different elements and see how they would fit in your own website design. Hopefully, you found this information very valuable, and now you can use this to help speed up the process whenever you have a website created for your business or brand. Now, what I want you to do is go ahead and save out an image of that design mock up that you created and photo shop and upload it to the discussions or projects area of this course. I would love to see what you're working on. It always interests me to see what the students create. And if you have any questions or want feedback on your design, I can definitely provide that for you, even if you just want to take a picture or, you know, use your phone and take a snapshot of what you drew out by hand and upload that that would be great because I just want to see what it is you're creating Now. If you have any questions, you can always contact me. You can ask the question in the discussions area, or you can send me a message directly, and I'll get back with you as soon as I can. I'm usually always available for the students, and I just want to provide any information for you that I'm able to. If you want to learn more about me, you can goto www dot jeremy deegan dot com and find out what it is I'm working on and contact me through that website also. So I look forward to seeing your project. Go ahead and upload it now and I'll see you in some future lessons.