How To Design a Website in GIMP [ Learn From a Pro ]

hello and welcome to this awesome web design project my name is Chris Parker and you're going to learn how to use for your web designs including but not limited to how to easily align different elements with the alignment tool pro tips for using the text tool how to create shapes and and add strokes and drop shadows how to clip images to a shape and much more however this web design project is more than just about designing a website in I'm also going to share with you pro web design tips how and why you need to create a great user experience also known as UX web design how to stand out among the tens of thousands of other web designers so that you can be a profitable web designer and much more now all of this is going to be included in the upcoming web design briefing however if you're not interested in learning more about the web design business how to create better designs and other web design Pro tips and wish to just learn how to use for web design then you can skip the briefing of this web design project and skip ahead about 5 or 7 minutes or to find out the exact time of where to skip ahead check out the timeline or the outline for this web design tutorial in the description below so if you're ready let's do it all right so this web design project is one that I recently did for my own website and if you'd like to see the live page you can find the link to it in the description below also if you want to complete this project you're going to need to download the resources like the grid system and the images used as well as some other information and you can also find the link to those resources in the description below so go ahead check it out download them and then we'll go ahead and get started alright let's first go over the anatomy of this web page which consists of four main sections so we have the header the hero section and then we have the body which has different sections within it and then we have the footer at the bottom now this web design is consistent with the rest of my site and has a modern slash retro feel to it at least in the colors that I've chosen for my brand so it's important when designing a website for your clients to use their existing brand colors and fonts that is if you're designing for an existing site and creating new pages or redesigning those pages now if the client is requesting a design for their first web site you're going to need to discuss with them the style they wish to use whether it's modern retro whether it's going to be image based or text based or a combination of the two you have to find out what style they want for their particular website and you're also going to have to find out if they've already developed a brand for their business the colors the fonts that they like to use and any other information about their brand to help you build their website now if this is something that they don't have right now this is a perfect opportunity to upsell your web design services by offering a logo and branding consultation and help them choose the fonts and the colors and everything else that should be part of their branding now your goal may be to be just a web designer however you may want to consider offering additional graphic design services to maximize your profit so it's something to consider okay let's get back to the web design briefing so the header in most cases will consist of the logo and the navigation the header can also include other elements so let's check out this Nike design that I came up with for one of my premium courses so in the header we have a lot more information we have the different branding that Nike has we also have easy access to login to our accounts to access our shopping cart and then in some sites you will have a secondary navigation now in the case of my website if we go to the homepage here at the top I have trending blog posts a search bar and social media icons so the top trending blog posts is an essence a secondary navigation option however for this web page design I made a decision to hide the secondary navigation and here's why for landing pages like this one the goal of the page is usually to sell a product or service and it's best to eliminate as many distractions as possible so that your visitor doesn't get the urge to navigate away from the page now this area appear I would consider a secondary navigation even though it's not a menu per se but it still provides secondary navigation options through the trending blog posts now that being said a lot of marketing gurus even suggest removing all menu options altogether now I've done this in the past and it's not something that I really like to do anymore I still like to give my visitors a chance to find what they want because they don't necessarily want what's on this page all the time they may want to find out more information about me first before they invest in anything that I have to offer and that's why I've left the primary navigation on the landing page so that's something you're going to have to discuss with your clients on whether or not you want to show or hide the primary and secondary navigations now when it comes to designing the header I try to minimize my headings so that they're not too busy now even though I have a lot of stuff going on in my header with the primary and secondary navigation I make it easy for my visitors to read that information by changing the background color of the secondary navigation and that gives separation between the two and makes it less busy now if the secondary navigation the color of the background was the same color as the I marry it would be much more difficult to read all that information and it would be too busy so these are just some of the things you have to consider when designing your headers you don't want to put too much info in there and if you do have a lot of stuff you have to find a way to separate them so you can give importance to one element over another which is going to make it easier for your viewers to find what they need all right so just under the header we have our hero section and a hero section should be designed in a way to capture your viewers attention whether it's through text images or other design elements it should grab and hold their interest then you should ask them to do something which is known as a call to action now what you asked them to do will be dependent on the goal of that webpage it could be to ask for their contact info an email address or maybe to purchase something or something else but in order to get what your client wants ie the goal of the webpage you have to give them something in return because think about it why should someone give up their email address well if you're going to give them something that solves a problem they are having then the desire to fix that problem outweighs the fear of being spammed so in other words the offer or the call to action has to be irresistible creating an irresistible offer will increase the chances your client will reach their desired goal for that webpage now if you're able to do that and help your client grow their business guess who they're going to contact for their next web design project and who do you think they're going to refer their friends and colleagues to so the key to growing your web design business is to create websites that help your client grow their business by solving their prospects problems now he may be wondering why should I be doing this I just want to be a web designer well you have to be different you have to offer something else to be different from the tens of thousands of other web designers everybody is doing the exact same thing doing web design is easy being a profitable web designer in demand for the long term is hard especially if all you do is what everyone else is doing so to succeed as a web designer you must create better web designs by creating designs that are user friendly give an irresistible offer that solves problems and offer additional graphic design services to maximize your profit if you do that you'll separate your web design services from all the other thousands and thousands of web designers now even if you're not even interested in doing the additional graphic design projects branding consultation logos marketing services content writing and all these other things you can do to help your client succeed you don't have to you can still upsell these services and then outsource the projects to other graphic designers hire other freelancers to work with you or for you whatever you want to do now you just want to make sure that if you do this you're going to outsource it you're going to manage the project so you need to make sure that you include a markup for managing the project all right so we're getting a little bit off a topic here but I want to give you as much business insight as I can all right so let's get back to the web design project briefing and next we have the body of the web page now the body consists of different sessions in all those different sections is what makes up the body of the webpage so the goal of the body session is to sell the products or services being offered so let's say a visitor visits your clients website they see the hero section they see the irresistible offer but they don't bite they're not ready to make a transaction with your client yet so let's think about it when you're doing a google search or a youtube search why are you doing it well you're doing it because you need something you have a problem so right now you have a desire to be a web designer and you want to use as your tool for designing websites however you have a problem you don't know how to use to design websites which is why you're listening to this web design a tutorial you have a problem and I'm helping you fix it hopefully if not then you're going to continue your search until your problem is fixed now real quick before we move on I would like to ask you for a favor if I'm helping you solve a problem by learning web design in general and later on we're gonna learn how to do it again please leave a comment below and let me know if this is helping you at all please and thank you and it's much appreciated all right so the same principles should be considered for any web design project you do prospects are going to visit that webpage because it may have a solution to their existing problem now if you provide a great user experience by offering an irresistible offer that solves that problem then the goal of that page will be reached and our first shot of solving their problems is through the hero section however they may not be ready yet to give out their email address or to do a transaction of some other kind because of several possible reasons it could be a trust issue maybe they don't have enough information yet or may it's something else and that's where the body section of the webpage comes in it should help sell the product or service and provide some kind of social proof or other forms of trust or maybe more information on how their problems can be solved with the product or service so the more information included in the body the greater chance the prospect will make a final decision in your clients favor now the type of information that we're going to include in our designs is sometimes limited on what our clients give us a lot of times you're gonna find they don't have any written copy at all which is fine in that case you can use what is known as dummy text to fill in the different areas that should contain text and we're going to talk more about dummy text later on in this web design project so for this web design project I included three columns of the information in the form of snippets so a snippet is short brief descriptions of the product or service now sometimes more information may be required for that prospect to make that final decision on whether or not to do business with your client so that extra information can either be placed somewhere on the page maybe lower down or you can create links and each one of these columns that will then navigate to another page that's all going to be dependent on the goal of the page being designed in this case three columns of information is sufficient however I've included more info in the form of a video promo which is down here at the bottom but I've also included some social proof in the form of testimonials testimonials are a very powerful method to show prospects that others have benefit from having their that's right their problems solved sometimes this will be enough to make that final transaction however I wouldn't rely just on this alone the more information you can provide the better chance you can help your client grow their business now like I mentioned a lot of clients may not have this information as you begin designing the website they're just going to say something like I just want this design style here are some sites that I like can you do something like this and this is what a lot of web designers are going to say mr. and miss prospective client yes that is something I can do and I've done many websites like this and here is my portfolio but guess what they could be interviewing five ten twenty other web designers that are all saying exactly the same thing and guess who they're going to choose most likely one of the designers with the lowest price or if you want to increase your chances of landing the job and at your price you could say something like this mister or miss prospective client I have some questions about your web design project do you have or have you considered an irresistible offer have you considered the best ways to sell your product or services have you taken the time to collect testimonials or to set up social proof and I'm not just referring to social media but things like guest blog posts or being featured in the media now the reason why I'm asking all these questions prospective client these are all things that will help you succeed with your new web page or website and these are things that I recommend be included in your web design and these are all things I can help you with so one last question do you want to grow your business yes well I'm the web designer for you because not only do I offer web design services my goal is to help you grow your business through an awesome user experience for the visitors to your website by creating better web designs alright so maybe not something exactly like that but something along those lines you want to provide information about what you can do that the other web designers are not telling these prospective clients okay so remember when I said we want to solve problems of the visitors visiting a website or webpage and those visitors are visiting a website or web page because they are looking for a solution to their problem well guess what when you're applying for a web design project when you're bidding on a project or any design project for that matter the person that may hire you or one of the tens of thousands of graphic designers guess what they have a problem their problem is they need a website or a redesign but what do they really need what is the underlying problem why do they want that redesign or that new website well if it's an existing site or maybe they don't have a website it's not working for them they're not achieving the goal for that particular website so the goal of 98% of the websites is to solve a problem this is what I have to offer and it's going to solve your problem so their website isn't doing that yet it's not solving problems that's why they want to redesign they think a new design is going to change things yes it can if it's a really bad ad style design but more importantly it has to be a great user experience you have to solve a problem and when you do that and when you start offering solutions to their visitors and solving their problems you're going to stand out from the overcrowded arena of graphic designers and web designers in general and check this out you'll be able to charge more for your services as okay so let's let that sink in and then come back next week Andrey listen if you do you're going to be the let's say less than 1% of those listening to this web design tutorial that does so which means you're already ahead of the crowd anyone can be a web designer it's easy it's not really that hard however if you want to make it a career and charge what you're worth then you'll have to work a little harder than everybody else alright so enough of that for now let's get back to the briefing we're gonna make this real quick and short and then we'll go ahead and start working on the actual design in now as you begin adding more and more information to the body section you want to make it easy for prospects to buy that product or service that solves their problem or in other words you want to add called actions throughout the design some pages will have more info than others now for this web design I included a sign up button in the hero section and another Buy Now button down near the bottom of the page if I had more information in here I might put another one in the middle but for this webpage I think two is sufficient now in addition to all this information I've also included another call to action or another offer I've also offered an opportunity to learn how to use for web design by including this web design tutorial that you're watching now down here at the bottom of the page so the thought of doing this is not everybody finds me through YouTube they may find me through a Google search Yahoo search Facebook page another community or some place else on the land on this page not knowing that I have a free tutorial for designing with so once they find this particular video they'll go ahead and go through it and then if they're interested in more they'll come back to the web page okay so the final piece of this web page design includes the footer the footer like the header can be something simple like what I have here or you can design something with information so think of the footer as your last chance to give viewers what they need maybe this web page in general doesn't offer the solution to their problem so the footer gives them a chance to find a solution to their problem before they leave the website entirely so we can include additional links to different parts of the website a shopping cart option maybe some social media links and much more so for this design and for the rest of my site I chose to keep it simple and only have links to my privacy policy a support link social media links and a copyright notice alright so that is it for the web design project briefing if you made it this far and you went through all of that thank you you are now much farther ahead than a lot of other web designers we are now going to go ahead and learn how to use to create this web page design so I have a question for you are you ready awesome let's do it now in this tutorial I want to go ahead and talk about the grid system and this isn't going to be a in-depth review of the grid system I just want to give you some basic information about a grid system and why we need to use one and a full explanation of the grid system is well beyond the scope of this course because we could go into the grid system and talk in length for hours just on the grid system alone so I'm just going to give you some basic information to help you get started with understanding the grid system and how we use and why we use it as web designers so the first thing we need to do is we need to open up that grid system template that I provided in the resources so if you haven't downloaded the resources yet now would be a great time to do so go ahead and find that template and open it up in when designing websites I recommend using a grid system for many reasons first one of the easiest ways to control the structure of a web page layout and to achieve a consistent and organized design is to apply a grid system in the most basic terms a grid is a structure comprising of a series of guidelines that divide a page into columns or sections which you can see by turning on your guides because this particular template already has those columns and guides applied so if we go up to view and scroll down you can select show guides from here or you can use the keyboard shortcut which is control plus the semicolon or if you're on a Mac its command plus the semicolon so this structure helps us as web designers to arrange content on the page with the use of evenly spaced columns which helps us manage the proportions between all the elements of the page to ensure everything is properly aligned and to create a balanced layout now second websites come in many different sizes and the device it's being viewed on also come in a variety of different sizes so it's important to utilize a width that is going to be easily transferable to these different media devices without changing the look of the website by a lot otherwise your site is going to look completely different on let's say a 27-inch iMac versus a laptop or a smartphone now the industry standards as far as the size or the width has changed throughout the years when I designed my first website back in 2001 the standard was 960 pixels wide and that's because at the time it was more likely to transfer that website with evenly or better throughout the different devices we had available back then but throughout the years we began using different widths based on the devices available at the time so we started using wider widths 1200 pixels wide 1440 pixels wide but with the advancement of css3 and html5 it's now much easier to code a website to automatically change sizes based on the device that it's being shown on because it wasn't that long ago when we didn't have tablets or smartphones of all different sizes or even laptops and desktop monitors which now come in an infinite number of sizes so our website designs must be able to fit as many possible sizes as well possible but a great web developer can take your web design and code the elements of that web page two images graphic elements text and more to resize automatically based on the device it's being viewed on and they can do that with css3 html5 and there's other types of coding they can use as well now they could even eliminate certain parts of the design elements to not show up on smaller devices so for example it may not be necessary to show a large logo on a small smartphone screen so that's something else to consider when designing for multiple devices or if you're just designing everything in one grid system like we are here then you will need to communicate with that web developer not to show certain elements because they're going to be too large or you can instruct them to make those specific elements smaller if it's still important to the client to have that shown on a smart phone now personally I still prefer 960 pixels wide for a lot of web designs however I don't limit myself to that width for my own websites this one included I like to use a wider design in this case 1200 pixels wide that's just my personal preference from my website now although you do have to consider the width you also need to consider the number of columns and the grid so grid systems come in a variety of column options as well 12 columns is the most popular but we also have 8 and 15 column grid systems as well alright so now the question is which grid system should you use for your web designs well there is no easy answer it really depends on the needs of your client the content the style of the website that they prefer and much more so these are all things you're going to have to explore with your client but to be on the safe side I would recommend either 960 pixels wide or 1200 pixels wide those are the two most popular types of grid systems that can be coded to many different types of monitors so for now what we're going to do is we're just going to use the grid system I provided you which is 1200 pixels wide with fifteen columns okay so the moment you've been waiting for your entire life is finally here well maybe not that long but it is time to learn how to design our web pages in so here we go the first thing we're going to work on is creating the header section of the web page design and what we need to do is we need to create a shape for the background so let's go ahead and do that by selecting our rectangle select tool which is located right here or you can use the keyboard shortcut which is the letter M let's go ahead and make a selection the full width of our document now I've gone outside of the document but that's fine because the selection is confined to the outer edges of the document then in the tool options we're going to set the height or the size to 125 now we need to create a new layer to put that shape into let's call it header background and let's fill it with transparency let's click OK now we're going to fill it in with the color so let's go ahead and select our color so this is the HTML number you need to type in if you want to use the exact same colors and you may also want to click on this little icon right here because it's going to add that color into this panel of different colors right here so it's basically saving that color for you so you have easy access to it later on because we will be using it throughout this project go ahead and click OK now we're gonna grab our bucket fill tool now my keyboard shortcut for the bucket fill tool is the letter g' it is located right here on our tool panel and your keyboard shortcut may be different if you haven't changed it and if you haven't taken one of my premium courses before you probably haven't changed it and the reason why I've changed it is because I want to use the same keyboard shortcuts that I use in Photoshop for similar tools and that just makes it easier to go back and forth between the two software programs so that I don't have to worry about memorizing all these different keyboard shortcuts so in Photoshop this tool has the keyboard shortcut of the letter G and I've been using Photoshop a lot longer than so it's easier for me to remember the letter G versus Shift + B which i think is what this keyboard shortcut is for your setup now in the resources folder I did include a keyboard shortcut reference file that will show you different keyboard shortcuts for vs. Photoshop in case you want to update to the Photoshop keyboard shortcut as well and then if we scroll down to page 5 here I have my top 12 keyboard shortcuts for PC users and then if we scroll down a little farther I have them for Mac users as well so you may want to reference this because throughout this web design project I am going to be using a lot of Photoshop keyboard shortcuts and if you want to see the equivalent in then just reference this PDF file that's available in the resources folder alright so now we can go ahead and fill in that color and then we need to make ad selection so if we go up to select and select none' that will remove our selection now my keyboard shortcut is right here which is command or control and the letter D which again is a Photoshop keyboard shortcut so it just referenced that if you haven't updated your keyboard shortcuts alright now that that's deselected i'm gonna go to my move tool which is the letter V I'm gonna go ahead and turn off this column grid layer here and move this up I'm gonna go ahead and zoom in as well and I can do that by grabbing my zoom tool with the letter Z now when you're working as a web designer you're going to want to learn the keyboard shortcuts it doesn't matter if you're gonna stick with the keyboard shortcuts provided by or if you want to convert them to Photoshop either way it's imperative to learn your keyboard shortcuts so that you can complete your projects much faster now studies have shown that if you use keyboard shortcuts you can save one hour for every eight hours worked which may not seem like a lot but if you're working based on an hourly pay rate and if you consider your pay rate to be fifty dollars an hour then you can save five hours a week which will put an extra two hundred fifty dollars a week in your pocket so it's imperative to learn these keyboard shortcuts and we're going to be using them a lot in this web design tutorial and I'm bringing this up again because I do want to show you how to change your keyboard shortcuts right now because one of the things that we have to do with our layers is we need to change the layer boundary of our layers so that we can properly align them later on now we don't need to align this particular background but if you do have the layer boundary turned on you're gonna see this little yellow and black dotted outline now right now that outline is the entire size of our document so if we scroll down we can see it being outlined all the way around the document now it's not at the bottom and that's because I moved this particular shape up after I created it so we want to confine this layer boundry to the actual background itself so it's a hundred and twenty-five pixels tall and not the actual size of the document so to do that we're going to come up here to layer and select crop the content now by default does not have a keyboard shortcut for this particular action but as you can see I added one Shift + C so if I select this it will then crop that layer boundry to the element or the contents of that layer and you're going to see the benefit of this later on in this tutorial when we begin to align different elements so let me show you how to create that keyboard shortcut because we will be using it a lot throughout this project so we're going to go up to edit and select keyboard shortcuts in the search option here we're going to type in a crop to content and then we're going to go down here to layers and click on this option right next to crop to content it probably says disabled if you haven't set it up previously so just click on that and then hold down your Shift key and then hit the letter C and now your keyboard shortcut has been assigned to that specific tool make sure you have save keyboard shortcuts set on exit so it saves that information click close and now you can use that keyboard shortcut okay let's go ahead and grab the logo next I'm just gonna click on it from here and drag it over to the document and it will automatically and it into a new layer okay it's a little large right now so we're gonna go ahead and resize this now you may notice that the layer boundary is not aligned to the right right here where the graphic ends so we have to use that keyboard shortcut that we just created in order to crop the boundary so Shift + C and now the layer boundary has been cropped now real quick the layer boundary also affects when you scale or resize a layer not just when you use the alignment tool so if I undo this with commander control and the letter Z and then I use the scale tool it will provide that scale tool along the outer edges of the layer boundary so now we're gonna go ahead and resize this because it's a little bit too tall and the keyboard shortcut for that is Shift + S and then we can either resize by grabbing one of these outer corners or the sides or we can come up here and type in a specific height and width so I want to make sure that this option right here is selected and linked together so everything stays in proportion when I resize it so let's type in 75 for the height click your tab key and that's going to give you a preview of the logo before you hit the scale button so go ahead and click scale and now the logo has been resized okay I'm gonna go ahead and turn on my guidelines with command or control and the semicolon because what I want to do is I want to align this logo to the first column on the left side so if we turn on our columns here we can see the columns are here and then between the columns we have what is known as the gutter and then we have a little gutter or padding on the outside as well so we want to keep everything contained we in these columns now we're going to go ahead and align this logo top to bottom so let me show you how we do that so there's actually a couple different ways we can do this and I'm going to show you different ways throughout this web design tutorial so the first way to do it is through a selection so I'm gonna grab my rectangle selection tool with the letter M and I'm going to make a selection the height of our background here and then I'm going to grab my alignment tool with the letter A or if your keyboard shortcut is different you can grab it from the tool bar right here now in the tool options we have some options for aligning our layers so under a line here we have relative two and a bunch of options so for this one I want to use selection since I made a selection I then need to tell which layer needs to be aligned so what we need to do is we need to come back over to our logo with the alignment tool still selected and just click on that graphic element and when you do you're going to see these little white squares in each corner so that tells this layer needs to be aligned to the selection so we're going to come over here and select align middle of target when you do you will then see the logo move into place and now we have an equal amount of spacing at the top and the bottom so right now I'm kind of going a little bit slower because I do want to explain all these different tools and options and how to use them but as we go throughout the course we are going to be picking up the speed of this tutorial because I will have already explained everything to you so just bear with me if this is a little bit slow for you I just want to make sure that you understand all the tools that we're using okay we're now going to work on the navigation or the primary navigation of the header section so we're gonna grab our text tool with the letter T now down here and the tool options I want to go ahead and set up the font for this navigation so I'm going to use railway bold so this font and any other fonts that we use throughout this project are available the resources you just have to follow the link to download and install if you want to use the same font so the size I'm going to set to 20 and then for the color I'm going to set to white okay all capital letters and then I'm going to do eight spaces eight spaces again now this time I'm going to do 11 spaces because we do have a graphic element right here we need to add to the navigation I'm going to go ahead and make a selection right here so that I can copy those spaces and then paste them in so I don't have to click the spacebar 11 times now you can't see the rest of the navigation now but I did finish off the rest of it I'm gonna go ahead and zoom out here with the zoom tool I'm also holding down my alt or option key to zoom out okay so I'm gonna put this in right about there and now we need to make those little graphic arrows for the navigation so let's go ahead and work on that now the other thing I like to do is I like to save any work I've done and I probably do it hundreds of times throughout the project it may be a couple minutes maybe five minutes but I don't go very long without saving it because I never know when my computer may blow up or the power may go out and I don't want to lose any of my progress and start over from something that I did an hour ago so the keyboard shortcut for saving is command or control and the letter S so let's go ahead and save our progress and now let's go ahead and select our rectangle selection tool so we can create our little drop-down arrow so I'm just gonna make a selection and then in the tool options I'm going to set the size to 50 by 50 let's go ahead and create a new layer called drop-down arrow fill with transparency and click OK now I just want to explain what I'm doing with all the layers in regards to naming them we want to make sure that we're naming our layers so we know what that particular layer is about now at this point I've already renamed a couple of layers and I just like to name my layers so that I know what that particular layer is all about and what it contains because as we add more and more layers it's going to get confusing if we don't have some type of organization for our layers in fact I like to take my organization to a whole new level by creating grouped layers which we're going to do once we're done with the header section so make sure you just name your layers in a way so you know what that particular layer is because it's not really clear what that particular layer is based on the thumbnail of that layer so even here I've probably just renamed this logo so let's go ahead and add a stroke to our selection by going up to edit and select stroke selection from here we're going to do a line width of 2 make sure you have this option turned on solid color everything else is fine and then click stroke alright now let's go ahead and deselect command or control and the letter D and we have a little box what we need to do next is we need to crop the layer boundary so Shift + C and then we're going to select our rotate tool which is located right here I've changed the keyboard shortcut for this to ctrl + T from here I can either click on that particular graphic element and rotate it accordingly or I can come up here and use the slider or type in a number so I'm just going to type in 45 click rotate and we now have our diamond shape now we need to crop this or cut off the top part for our bottom arrow so let's go back to our rectangle selection tool with the letter M make a Cell and then our keyboard shortcut for cutting is command or control and the letter X okay so the top part is now gone deselect command or control and the letter D and then crop the layer boundary again Shift + C now before we resize this because it is too large I do want to duplicate this layer because we do have another drop-down arrow down here in the hero section so we can either do that by clicking on this icon right here to duplicate the layer or use our keyboard shortcuts which I have changed and it's command or control in the letter J so either way go ahead and duplicate that layer let's rename this one hero alright let's go ahead and grab our move tool with the letter V and then just drag it down and let's go ahead and turn that layer off I also want to move it to the bottom here below everything else and then we can grab this layer again alright let's resize it with Shift + s for the height we're going to do 10 so that looks good click scale let's go ahead and move it over here I think it might be just a little bit too big so I'm gonna go back to my scale tool again and just resize it here to let's say 7 can't go ahead and duplicate that layer and let's go ahead and move them over so two more times now the other thing I want to do is I want to design my websites so they are pixel perfect so in other words perfect alignment in perfect spacing so I want to move this particular layer over a little bit but I can't click on it and select it and that's because I have move active layer selected if I select pick a layer or guide I can click on it and then I can move it over I'm gonna grab my measure tool which is located right here and I'm going to click and drag out so I can find out the amount of spacing between these two elements if we take a look down here at the bottom of our interface we can see we have six pixels of space between the two so let's make sure we have the same amount of spacing between all the different elements so we're going to do six pixels again here and now I can click on my ruler and drag out a guide and then we have to turn on our guides and then we can move that particular element into position so I don't need this guide anymore so I'm going to go ahead and remove it so it doesn't interfere with our design later on now we're going to go ahead and continue doing the measurements for the other two elements as well so I'm going to go ahead and finish this up I'm gonna go ahead and zoom out here and the want to do is I want to group all these different elements now so let's go up here at the top and select the top layer here and click on this icon right here to create a new layer group let's call it navigation and then we're just going to click on a layer and drag it into that grouped layer okay so this makes things a lot much neater and much more organized because if you don't group your layers you're gonna have hundreds and hundreds of different layers in your layer panel and yes you can do other things like add a color label to the layers but I find adding grouped layers for different elements cleans up the layer panel and makes it easier to find what I need when I need it all right let's go ahead and turn our guides back on because we do want to make sure that this is aligned to the last column on the right side so let's grab our move tool make sure we have move the active layer selected and just move it into place now with our rectangle select tool we'll go ahead and make a selection let's grab our alignment tool with the letter A and then click on the navigation make sure relative to is still set to selection and align to middle of target ok deselect looks like I have a little bit of extra space over here on the right side so something happened when I moved it earlier so I'm going to go ahead and grab my move tool select pick a layer or guide and then I'm just going to use my arrow keys to move it over to align to the left side let's check out the right side and it's perfectly aligned now I'm going to go ahead and zoom out with command or ctrl + 0 and that's going to zoom all the way out so that my document fits in my interface and guess what we are now done with the header section but we do have one quick last thing do let's group everything into a grouped layer called header all right so that's it for the header next up we are going to work on the hero section before we get into the hero section I just want to share something else with you real quick and that is what happens when a person hovers over a link on the webpage so you may have something happen or show up when a person hovers over a button or maybe a menu item so these are known as a hover State when you hover over it something happens and we need to design the webpage in a way to show the web developer that when a person does hover over a link you want the contents to either change or show different graphic elements so we want to create a grouped layer called a hover State in this case it's a menu hover State so if we turn this layer on we will see what the web developer should code for this particular menu when a person hovers over it so we just have a new pop-up window with a new background color some text a divider and then some arrows here showing that there's additional menu options when you hover over these so again I would create additional hover States for these as well but because I'm not creating a new web page or new website from scratch the site already exists so I don't need to recreate this hover State but I just wanted to share that with you because you will need to create these different hover States for your buttons your menu navigation items and any other lengths that you design on the page now if you want to check out this completed web design I've included it in the resources folder that you downloaded all right so let's go ahead and work on our hero section now when it comes to the hero section you want to have all the important content above what is known as the fold line and the fold line comes from the days of newspapers because when you folded the newspaper in half you can only see half the content and on the front page you wanted the top stories above the fold and that would help sell that particular newspaper because you couldn't really see anything on the bottom half because it was folded and hidden so the same concept applies to the hero section we want all the important stuff above the fold line so that we can keep that person's interest or get them to do something through our call to action now when it comes to the fold line for your webpage design it could range from 500 pixels tall to a thousand pixels tall or maybe something else larger or smaller or something in between it's really hard to define a specific fold line because the fold line on a 27-inch iMac is going to be different than a smart phone because of the size of the monitor the device so that's why we like to now design for responsive websites so if we take a look at my website right now here's the fold line we can't see anything below it and as I begin to resize it it automatically begins to adjust that fold line so that we can't see anything below it now add certain sizes the navigation button will be hidden and that's because the site hasn't been coded for the specific width but as I get down smaller and smaller to the size of a tablet and a smartphone it will begin showing the content properly for the hero section and not show anything below it because we want to keep everybody's attention right here now if the hero section doesn't do its job like we've talked about previously because the person may need more information then they can navigate down to get that information so I'm always asked where should I put my fold line I would say between 700 and a thousand pixels tall with the intention of having a responsive web page so for this particular project let's go ahead and create a fold line that is 1,000 pixels tall all right let's go ahead and turn on our guides with commander control and the semicolon key and then click on your top ruler here and drag a guy down to 1,000 pixels now in order to get it exactly where you want it take a look down here and you're going to see some numbers and when I hover over that guideline we can see minus 76 and 1,000 so that's basically where my cursor is for the mouse if I move over the minus changes to minus 8 and now I'm at let's get it to 0 right there and I am on the left hand side of the document at 998 pixels tall so that's a way to see exactly where placing your guidelines so right now it's at 1,000 pixels tall so if we want to create a vertical guideline we can do the same thing if we want to place it exactly at the left side but 50 pixels of padding then we can use that little numerical display in our interface down there in the bottom left alright let's go ahead and grab our hero image just click and drag it on to the document and it will be added into a new layer we need to pull it out of this header group because I don't want it in there and I actually want it below the header okay I'm going to turn off my guides just for a second and I'm going to grab my move tool because I want to move this up just a little bit actually let's turn the guides back on and I'm just gonna keep moving this up just a little bit more so maybe right about there okay so what we need to do now is we need to crop this image so that it's inside of this hero section so we can see it's extending beyond the hero section right now and that's not what I want so we could come in with our crop tool which is the marquee tool and then using the keyboard shortcut to cut it which is command or control + X to remove this part of the image but what if I decide or maybe my client comes back and says can we move the picture up or down well I just destructively removed a part of that image and I have to find that original image again and start over but what I recommend doing is working non-destructively so that you can go back and easily fix the image to reposition as needed and to do that we're going to first grab our rectangle select tool with the letter M and we're going to make a selection in the hero section just like that and then we're going to come over here and add a layer mask to our hero image layer you want to make sure you have selection selected and then click add and boom our image is now cropped and you can see over here where that image has been cropped because the areas in black remove white adds so if we want to change this in the future all we have to do is right-click and select delete layer mask and then we can reposition as needed and then we'll just add the layer mask again now the one thing we want to do is we want to make it easy for people to read the content on our site so in the design I created a overlay to make it easier to read our call to action because without that overlay it's very hard to read that content so we want to create a great user experience and make it easy for people to read and find what they need so let's go ahead and create that overlay so to do that we're just going to create a shape let's turn our guides back on and let's create a shape the size of the hero section let's create a new layer called hero overlay fill it with transparency click ok let's go ahead and choose our color which is this blue color right here now if you don't have this particular color saved because you didn't click on this little icon you can come over here and grab your eyedropper tool and then select the color from the header section up here ok now that we have that color let's go ahead and grab our bucket fill tool and go ahead fill it in and deselect okay we're gonna go ahead and drop the opacity of this layer down to 97 so there we go we now have our overlay let's go ahead and add some text now let's change the font size to 36 and white I'm also going to change this to ultra bold and I'm going to go ahead and type out the headline let's go ahead and move it into position here we're not going to align everything yet we'll do that in just a second all right let's change the font to just railway and the size is going to be 14 let's type out our sub headline go ahead and align this content to the center of the document so I'm going to grab my headline here first and do that one we're going to make a selection with command or control and the letter A now that selects the entire document but what we can do with our alignment tool is click on the headline and then make sure relative to selection is selected and then align to center of target and then go ahead and click on your subtitle and do the same thing okay let's go ahead and deselect with commander control and the letter D alright so we're gonna go back to our rectangle select tool so we can create our call to action button so we're going to create some rounded corners so go ahead and go to tool options click on rounded corners and set it to ten and then for the size let's go ahead and make a selection first for the size we're going to do 200 by 60 now as far as the color goes I want a green color which will be this HTML number right here so go ahead and type that in and then we need to create a new layer let's call it CTA button which is called action button and then with your bucket fill tool with the letter G go ahead and fill that in and desolate okay let's put in some text in here I'm gonna go back to our ultra bold let's do 26 for the size and white all right now I want to go ahead and a line sign up now directly in the center of our button but before we do that we actually need to go back to our CTA button and crop the layer boundry so let's do that with Shift + C and now I want to show you a different way that we can align our content so let's grab our alignment tool with the letter A and click on sign up now now those four squares again show that we have that particular layer selected and that lets know we want to align that with what do we want to align it with well let's align it with this button here which is currently selected in the layer panel so we can come down here to relative to and change it from selection to active layer and now will align it to that particular layer so that's just another way of aligning different elements let's go ahead and take these two layers and create a new layer group called CTA button now we can take both of these layers and with our alignment tool select it and then use commander control and the letter a to align it directly in the center of our document but we need to go back and make sure we change active layer to selection and then we can align center of target okay let's deselect let's go ahead and put our title and subtitle in a new layer group as well and then I just want to tighten up our content just a little bit to make it easier to read so I'm gonna go back to our subtitle here and I want to move that I'm gonna go ahead and grab my move tool and select pick a layer or guide click on it and then I'm going to use my arrow keys to move it up so I want that a little bit closer to the title versus the button itself okay let's go ahead and zoom out and now let's create our navigation button down here at the bottom we've already started on it we just need to move it above the image and the hero overlay so we can actually see it alright let's go ahead and create our circle shape for our button we're gonna grab our ellipse select tool let's also create a new layer called nav circle button shape and let's do 70 by 70 and now this and our stroke by going up to edit stroke selection and let's do a line width of 4 ok deselect and let's go ahead and move this into position let's crop the layer boundary with Shift + C and then let's take our arrow and make it smaller so Shift + s and I'm just going to drag a corner down to resize it so it's about 25 for the height now before we commit to that actual size you can actually click right in the center here and then move that arrow into position so this is helpful in case you're not quite sure if it's the right size yet so now that it's in position I do like this size I'm going to go ahead and click scale I'm just going to go ahead and grab my move tool so I can just move it over and up just a little bit ok let's put that in a new grouped layer let's go ahead and move this down as well all right I just need to align it now so I'm going to select all command or control and the letter 8 select your alignment tool with the letter A click on the button and align Center of target okay let's deselect all right so looking good so far we just have one thing left to do and that is I want to align this content evenly between the top of the hero section and the top of our navigation button so to help us do that we're going to create a new layer group to take the titles and the button and place them inside of that layer group now we can grab our rectangle select tool and make a selection right here let's grab our alignment tool with the letter A click on the content and then align middle of target alright so we now have a pixel perfect design for the hero section everything is properly aligned and centered and we have one last thing to do and that's to put all this content into a new layer group called hero so let's go ahead and do that actually we have one last thing to do in our hero section and that is I want to add a drop shadow to our call-to-action button and the text now check this out if you're not quite sure about using grouped layers yet let me show you something real quick now as you can see we have cleaned up the layer panel and we don't have hundreds of layers littered in our layer panel and it's a lot neater it's a lot more organized but here's another reason why you may want to use layer groups because if you want to find something specifically to work on you can quickly access that specific layer by using our move tool and then make sure you have pick a layer or guide selected and then when you click on that element that you want to work on is going to automatically open up that grouped layer that it's in and it's going to automatically select the layer that you clicked on how cool is that so not only are we organized but we can easily find a specific layer that we need to work on all right let's go ahead and add our drop shadows but first we need to change the layer boundary of our button and our text otherwise we're not going to be able to see that drop shadow because it's being cropped to the content right now so to fix that we need to go up to layer and select layer to image size and that's going to change the layer boundary so that it fits the entire size of the document so now we can go up to filters light and shadow and select drop shadow to add that drop shadow so I already have one now based on the defaults that provides we can also click on preview to see the before and after so what I want to do is I want to create a harder-edged shadow and I also want to move the shadow up and to the left so let's adjust the blur radius first to around one and a half you can set it to whatever you want and that creates that harder edge we now need to move it up into the left and right now we have the X and y or the horizontal and vertical axis right here lock together so that when I you just won both of them are adjusted at the same amount so I'm going to place it maybe I don't know right about there and then if you want to adjust these individually you can click on this link icon and then you can adjust it accordingly to whatever you want to do now the thing I want to do is I want to use this exact same drop shadow for our text as well so the easiest way to do that versus writing all this content down is to create a preset so click on this plus icon and let's give it a name now I have a couple in here already so I'm just gonna do oh five click okay and then if you click in here you will see all your saved drop shadows it's also going to list your last used drop shadows now we need to come over here and select our sign up now layer and we need to go up to layer and select layer to image size now check this out we can now apply this drop shadow simply by using a keyboard shortcut which is command or control and the letter F BAM how awesome is that I love it so if we take a look up here under filters we can see an option it says repeat drop shadow and there's the keyboard shortcut right there alright so our hero section is done let's go ahead and get started on the body content of our webpage design the first part of our body section is going to include a title subtitle and three columns now because we have a 15 column grid system we could take these three columns and spread them along five columns each but that would require a much larger image for each one of the columns that's not something I wanted to do that's just a design choice so what I've done is I've taken the two outer columns and spread them out among four columns each and then the middle column I aligned directly in the center which leaves a column on the left and right sides of the grid system so let's go ahead and create this section and the first thing we're going to do is create a new layer so we can create our body background let's grab our rectangle select tool let's size it 14:44 the width and let's do 700 for the height I also need to move mine over just a little bit because the selection moved over to the left based on the size I typed in all right now for the color I'm gonna choose a nice tan color I'm going to use this hexadecimal number right here let's go ahead and fill that in with our bucket fill tool and deselect let's also crop the layer boundary with Shift + C okay I'm just going to move this up so it aligns with the bottom of the hero section and now we need to add some text so let's grab our text tool with the letter T I'm going to use railway ultra bold for the size I'm going to do 24 and then for the color I want this nice blue color that we've been using with the rest of the page design alright let's go ahead and add our title but the problem is we get a little message from it says confirm text editing so the reason why it's doing that is when we added the drop shadow to the signup nail text up here it converted our text layer to a graphic layer so it's asking if we want to edit this text here if we do and click edit it will convert this graphic layer back to a text layer but it will remove the drop shadow not only that I don't want to edit this text I want to create a new layer of text so the reason why we're getting this message is I'm gonna go ahead and cancel out of this if we select the sign up now layer we can see the layer boundary is the size of our entire document so as soon as I click inside of this layer boundry thinks we want to edit that text so what we need to do is crop the content of that layer with Shift + C and now when I click I get a new layer so let's go ahead and type out our title and then click your Escape key to get out of the text tool and then we can add our sub title so let's go ahead and change this back to railway and let's do 14 for the size and then I want to change the color to this dark gray color right here okay let's add our subtitle click escape again let's go ahead and zoom in just a little bit here and let's go ahead and make our alignment for each one of these layers right now I have all this information inside of the hero section grouped layer so I'm going to grab and pull those layers out so I can align them where they need to be let's go ahead and close this up alright let's go ahead and align our titles let's make our selection first with commander control and the littering and let's grab our alignment tool with the letter A and then click on your title the only problem is is not selecting this layer what it's actually selecting is if we take a look those little white squares are down here in the bottom and what it's doing is it's selecting the layer group above it which is the hero section so when I select the hero group I'm gonna go ahead and deselect here we can see the layer boundry for the hero section is coming down into this section and that's why the alignment tool is selecting the hero group and not the text layer that we want so the easiest and quickest way to fix this is to grab our hero group layer and crop the layer boundary content with Shift + C now I can go back to my alignment tool I'm gonna go ahead and select all again and this time when I click on the title it's selected let's go ahead and align center of target let's click on our subtitle and do the same thing I also want to subtitle up just a little bit so I'm gonna use my move tool I'm gonna click on it and then I'm gonna use my arrow keys to move it up Kate let's deselect alright let's go ahead and add our images for the columns let's go ahead and create a grouped layer for our title and subtitle let's rearrange our images I'm going to go ahead and turn on my columns here so I can see them a little bit better I also want to make sure that all my images are in the correct order okay we'll align everything we get our content added to the columns now for this design I already had the content I wanted to add to the design so I can simply come over to my word processing software and select that text and add it to the design but oftentimes our clients are not going to have the content available for us so in that case we want to use what is known as dummy text so dummy text is text that you can use in place of real content because the dummy text is not readable it's just used as a replacement for that content so if you do a Google search for dummy text you will find a variety of text generators that will create that dummy text for you now if you think your client has a sense of humor you can do something like bacon dummy text and then instead of having text in let's say Latin the text will be about bacon so go ahead and check that out go ahead and copy some of this text if you want to add some dummy text or if you want just come over here click on the text select all and copy with command or control and the letter C and we'll go ahead and add our first column of text so to create the text box I'm just clicking and dragging and then I can paste that information in now for this content I used the font family Georgia 14 for the size and then our dark gray color now when it comes to the number of font families I use on a web page I recommend using a maximum of three different font families so usually I will do one font family for the title another for the subtitle and then a third font family for the content if you start using more than three types of font families it's not going to make your website look as professional and it's going to make it harder on the viewers to read that content the other thing I like to do is I like to use a font for the body of the content or a lot of content like this I like to use Georgia or Helvetica because it's easier to read at the smaller sizes now when it comes to font families in general and typography in general we're barely scratching the surface because again this is one of those subjects that I could spend a few hours on trying to give you pro tips on how to best use fun families or typography so these are just some small tips that you should know but you still have a lot to learn about typography in general the other thing I want to do is I want to make sure my text box here is cropped to the bottom of this paragraph right here so when I go to a line from top to bottom it's not taking this empty space into consideration so I'm going to click on the bottom part right here and then I'm going to drag it up once I click my Escape key you will then see the layer boundary cropped to that content let's go ahead and turn on our columns so we can properly size our text box across four columns so click inside and drag the right side over to the right side of this fourth column okay let's hit our Escape key to get out of there all right let's go ahead and add our title now let's go ahead and move some of these items down a little bit let's enter the title as well so I'm just using my rectangle selection tool and we also want to make sure we have the columns turned off so we can actually click on the title let's change it back to selection and align center of target okay I'm gonna put a guide right here above the title so we can align everything else so to make this easier let's go ahead and put this in a new grouped layer I'm going to call it column one then we can go ahead and take this column and duplicate it twice let's go ahead and move them over let's turn on our guides as well so we can align this exactly where it needs to be and let's do the second column as well now typically I will update the titles and the paragraphs accordingly if I have the actual content if not I will just duplicate the content if I'm using dummy text in this case since it's just for practice we're going to go ahead and leave everything as is so let's go ahead and align everything accordingly now I'm gonna grab my rectangle selection tool and align my second column here let's start with the image and then the paragraph okay let's make sure everything is aligned over here as well looks like I need to align my images and the first and third columns the last thing I want to do is I want to align the images so that they're aligned to the top of the images so let's take a look at our first image here by selecting that image layer and we can see that the layer boundary is larger than the image so I'm going to go ahead and crop the content with Shift + C and I probably have to do that for the other images as well so let's go ahead and do that and then I'm going to go ahead and clean up the names of my layers as well I'm also going to rearrange each one of the layers so let's call this column two and column three okay now is probably a good time to save so commander control and the letter s all right let's go ahead and group our layers now we're gonna start off with the columns first you looks like I forgot to put the images in with these grouped columns as well so let's go ahead and put those inside as well you okay I want to close this gap right here it's too big of a gap I want to bring it in a little bit closer with everything else actually I want to go ahead and take a measurement from here to apply between the titles and the content so let's grab our measure tool and let's go ahead and make a measurement so I have 38 pixels so I want to go ahead and add the same amount of space between the titles and the content okay the last thing to do is to group everything and align to the background all right before we put the background in the group to layer we first need to align the existing group layer to the background so make sure you have your body background selected grab your alignment tool select that group to layer and then change relative to two active layer and align middle of target okay everything is perfectly aligned we can now go ahead and put this inside and we are all done with the first section of our body so next up we are going to work on the review section of the body so before we can add our next section we need to increase the size of the canvas our document is too small right now so let's go ahead and increase it by going up to image select canvas size make sure it's unlocked right here and then for the height we're going to do 3,800 click resize now although that did resize our canvas we now have transparency on the background so I don't want that I want to fill it in with white so the easiest way to do that is to make sure our background layer is selected and then grab your scale tool make sure it's unlocked type in 3800 for the height and click scale that also increases the layer boundary for it as well so let's go ahead and create a new background layer called review background let's grab our rectangle selection tool and let's go ahead and size it to fourteen hundred and forty by eight hundred and fifty tall now previously I've shown you how to click and move that selection around because I do have some extra white space right here but if we want to make sure that it's precisely where we want it we can come into the tool options here and under position we can see that it's set to minus 30 for mine if I set this to zero click the tab key it's then going to move that selection and now I know it's perfectly aligned with the left and right side of the document now for the color I'm going to use this dark orange color and here's the hexadecimal number for that and let's go ahead and fill that in with our bucket fill tool commander or control and the letter D to deselect shift + C to crop the layer boundry back to the move tool and I'm going to go ahead and move this into position just going to zoom in make sure I put it exactly underneath the last section so that looks good right there alright I'm gonna go ahead and save it with commander control and the letter s I'm then going to grab my text tool for the text we're going to use railway Extra Bold we're going to size it to 40 and white for the color so in all caps I'm going to do rave reviews click the Escape key let's move this up select all command or control and the letter A let's grab our alignment tool with the letter A click on it and then we're going to align to our selection here to the center of target all right deselect once again okay let's go ahead and turn on our column layer here so what we're going to do is we're going to take three reviews and spread them across five columns so right now my columns end right here and that's because the height of that particular layer is based on the original document so let's go ahead and grab our column grid layer our scale tool with shift + s and let's type in 3800 for the height K back to the rectangle selection tool let's go ahead and make a selection 5 columns wide and then for the height we're going to set it to 600 okay I'm gonna come down here and select my review background layer because I want to create a new layer above it and when I click on new layer and I'm gonna go ahead and call this review background one and when I click OK it's going to apply that new layer above the layer that was selected so sometimes that's easier than just picking any random layer and then having to move it after just another quick tip all right let's grab our bucket fill tool with the letter G let's fill it in with white and deselect okay let's go ahead and move this particular layer up I also want to crop the layer content so Shift + C let's make sure it's all aligned properly sometimes it's kind of hard to see with that grid column on so I'm gonna go ahead and turn that off so that's looking pretty good let's go ahead and zoom back out I'm gonna turn off my guides alright let's go ahead and grab our first image for this first review let's go ahead and move this up it's looking a little bit too large so let's grab our scale tool with shift + S and then for the width and the height we will do 100 alright let's go ahead and align this now let's go ahead and select this layer here review background 1 we're gonna grab our alignment tool click on it and we're going to change to active layer and center middle of targets alright let's go ahead and grab our text tool so we can add some text I'm gonna go ahead and click in here copy it all with commander control and the letter C and then here's a quick tip if you want to make your textbox a specific size you will see when you click and drag the size of that box right down here at the bottom at the interface so I'm gonna click and drag out and what I want is 346 by 365 the only problem is it's gonna take me a few minutes here to try and get this dialed in exactly the way I want it so I'm gonna go ahead and hit escape so I can get out of there and I'm going to grab my rectangle select tool instead and then from here I can create the exact size I want 346 by 365 and then I can grab my text tool and draw my box around that outline how cool is that I'm gonna go ahead and paste with command or control and the letter V I'm going to go ahead and deselect which is command or control and the letter D alright escape again back to the Move tool and I'm just going to put this into position I'm gonna grab my background layer here again and then I'm gonna click on my text with my alignment tool so I can align it to the active layer center of target all right let's create a new group layer for our content here and our image okay we're gonna go back to the review background layer we're gonna grab our lament tool click on the image and then this time we're going to align middle of target so now we have it perfectly centered with our background let's go ahead and put review background one layer in the group layer and let's also move that layer down a little bit so we can see our content okay so we are almost done with our first review now we could leave a nice square image but for fun let's change it to a circle instead of a square so let's go back inside our group to layer here we're going to select review image 1 let's go ahead and zoom in as well so let's go ahead and select our ellipse tool let's make a selection and then for the size we'll do 90 by 90 let's go ahead and grab that selection and put it on the inside right here and now we're going to clip this image to this selection so this is how easy it is to do we're going to come over here we're going to select add a layer mask make sure you have selection selected and click Add am boom we now have our image cropped to the circle okay let's deselect let's go ahead and zoom out and take a look at our handiwork here so that's looking pretty good let's go ahead and take this review one grouped layer and duplicate it twice let's go ahead and rename these let's go ahead and move them over with our move tool actually let's turn on our column grid layer first so we can see where we're moving everything so we have review two selected and then we can go ahead and move this over let's grab review three-layer move that one over as well let's turn off this layer let's grab our alignment tool click shift key then click and click again Kay back to active layer and align to the top I just wanna make sure everything is aligned properly now our content is a little different for the other two columns so just like before I could either keep the content the way it is like this or I can update that content if I have the content available so we'll go ahead and do one here real quick I'm just gonna grab my text tool select all copy and then I'm just going to click on this layer select all and paste let's go ahead and adjust our text layer here next I'm going to grab my background layer here and rescale it let's make sure it's unlocked as well now I want to make sure I had the same amount of space here and here so let's go ahead and take a measurement so I have sixty pixels let's add sixty pixels of space here we want to make sure we're paying attention to the small details so that our web designs are pixel perfect otherwise we're just gonna be doing the same thing everybody else is doing and we want to make sure that our designs are better than everybody else's so personally I would go in and I would change the images for these two columns and the content here and I would also change the content here because I guarantee you most web designers are just copying and pasting that information from one column to another and when a client sees your portfolio and compares it to all the other web designers that are considering they're gonna notice that you took the time to update each of the different columns with new content and new images and they're gonna see that you're spending a little bit more time and paying attention to the small details and that could be enough between getting the job or not getting the job so just keep that in mind if you want to increase your chances of getting the job let's go ahead and group these layers now into a new grouped layer called reviews let's go ahead and save it commander control and the letter s all right so our review section is now done we're ready to move on to the next section now real quick before we begin working on this part of the web design project I just want to point out that there are some design mistakes in this section it's kind of hard to see right now but if we turn the grid system on it's easier to notice those mistakes and I'm not gonna go over those mistakes right now we're gonna say that till the end like I had mentioned previously so instead of re adding this information from scratch we're just gonna grab the content and move it over to our current working project and then we'll go over those mistakes later on this way we can all learn from those mistakes so let's go ahead and grab our titles and our paragraphs so to do that we're just going to grab the layer we want to move and we're going to click and drag it over the tab of the current project and when you release it will be added to the document now right now we can't see it because the text is in white so let's go ahead and move the rest of the content and then we'll finish up the section design okay let's go ahead and create the outline or the section let's grab our rectangle selection tool and we're going to create an outline that is 11 81 by 550 pixels tall and that's going to be exactly 15 columns wide we'll go ahead and center it in just a second let's go ahead and create a new layer to put it on let's call it outline then we're going to add that stroke by going up to edit selecting stroke selection let's do a line width of 4 but we want to make sure we have the correct color as well so click on the foreground color here and then select our dark blue color go ahead and apply the stroke and deselect with command or control and the letter D now we need a background for the right column as well so let's create a new layer again and then for the sighs we're gonna do 461 by five hundred and fifty pixels tall and then we're going to fill it in with that same blue color let's go ahead and crop the content or the layer boundry with Shift + C let's do the same thing for the outline as well now the last thing we need to create for this section is our Buy Now button but before we do that I want to go ahead and rearrange this content and place it exactly where it should be Center everything and make sure everything is properly aligned so I've already shown you how to do this several times so I'm going to go ahead and complete this part and I encourage you to do the same thing and I will be speeding up this part of the web design project since I've already shown you how to do it and then we'll finish up the button and then we'll be able to move on to learning some new things in the upcoming sections you now that I have everything arranged you may notice this little black line right here and I think this is just a bug in and if I close this and reopen it it should disappear now as far as organizing the layers I put everything in a left column right column and a background layer now let's go ahead and create our Buy Now button we're going to do rounded corners with a size of 10 and then for the size of the button we're going to do 160 by 65 let's go ahead and create a new layer called Buy Now button you let's fill it in with our green color here we're going to use our bucket fill tool and before we deselect I want to add a stroke as well so let's go to edit stroke selection let's do two for the line width and I want white for the foreground Kate go ahead and deselect and now let's add our text we're going to do white and a size of 30 and let's also do railway bold okay let's go ahead and align it to the button nail let's go ahead and crop the layer boundary for the Buy Now button with Shift + C let's grab our alignment tool and align it to the active layer alright let's go ahead and add our drop shadow we still have our drop shadow available in the filters so we can use our keyboard shortcut which is command or control + the letter F the only problem is we have our layer boundary cropped to the button itself and we can't see that drop shadow but we did have to crop the layer boundary in order to align it so sometimes you may want to add the drop shadow before you crop it so you don't have to keep going back and forth let's go back up to layer and select layer to image size and then command or control + the letter F to add that drop shadow let's do the same for our by nail text let's go up to layer and select it layer to image size and then add the drop shadow okay let's go ahead and crop the layer boundry again Shift + C for both and then let's group these into a new grouped layer all right so let's go ahead and align this to the background so we're going to make our selection with our rectangle select tool and then with our alignment tools select it and we want to make sure we have selection selected and then align center of target okay let's go ahead and deselect okay now that this section is done we have one last thing left to do and that is to put everything in a new grouped layer alright let's go ahead and get started on the next section the next part of our web design project includes this section right here and the footer now this section here pretty much looks like this section here it's just reversed so instead of watching me do this step by step which I've already shown you how to do for all of these different elements I would like you to go ahead and take on this part by yourself and then we'll go ahead and finish up with the footer and discussing the mistakes made throughout the design now before you do that let me just give you a couple quick tips on how I would do this so to make it as quick and easy as possible I would take this grouped layer here and I would duplicate it I would then update the grouped layer with a new name that represents that particular section as well as renaming any other layers as needed and then I would take the grouped layers and move them over to the right and then the right column over to the left and then I would update that content accordingly with the proper titles text and images so go ahead pause the video work on that and then we'll finish up with the footer when you come back alright let's go ahead and increase our canvas size so we can finish our web design so we just need a little bit more room for the footer let's go ahead and go up to image and select cama size let's make it 4,000 for the height and let's also grab our background and resize it with shift + s let's type in 4,000 and now let's create a new layer for the footer background and then we'll go ahead and create that background with our rectangle select tool but first let's make sure we have rounded corners turned off let's go ahead and create a size of 1440 by 75 make sure the position of it is exactly where you want it and then for the color I'm going to do a dark color which is actually this one right here and then let's go ahead and fill that in all right let's grab our text tool and add our copyright notice let's go ahead and align this where it needs to be and let's also use our rectangle selection tool to make a selection so we can align it top the bottom all right I'm going to go ahead and do my privacy policy and support links I'm just going to move these over a little bit all right let's grab our social media icons I'm going to select all four click and drag to my document and then they will be added to their own layer automatically let's go ahead and move them down into the footer I'm not really worried about the order we just want to get them down here and then we're going to align them along the top of each icon I also want to distribute an equal amount of spacing between each icon so I'm going to show you how to do that in just a second let's grab our alignment tool and click on the first icon then hold down your Shift key and click on the other icons and then we want to make sure we have relative to first item and select align to top now to distribute an even amount of space we can use these options down here under distribute now if I go ahead and try and apply that what it's doing is it's actually stacking all of the icons on top of each other so it's not really distributing the space between each icon so in order to do that we need to tell how much space we want between each icon so by default it's set to zero if we type in 50 and then click on distribute horizontal centers of targets it will apply an even amount of spacing between the icons how cool is that I love it alright okay let's go ahead and put these icons in its own grouped layer now let's grab our move tool turn on our guides and let's go ahead and move these over into position and let's also align it top to bottom of the footer let's grab our alignment tool let's also make sure that our links over here are aligned as well want to go ahead and move these links over so it's aligned to the right side of this column so the last thing we have to do is we need to crop our canvas now because we have too much space down here so let me show you how we do this we're gonna zoom in here so to figure out where to crop our canvas we're gonna place our mouse cursor right here at the bottom of the footer now I think we've talked about this before but if you look down here there are some numbers and right now it's showing three comma 39:43 so 39:43 is the number I want to use to crop my canvas yours may be different depending on how you spaced out the different sections of your body so just remember that number then go up to image select canvas size and then type it in for the height Kate let's go ahead and save our document commander control and the letter s and we are all done with our web design tutorial well almost because as promised I want to share with you some additional pro tips before you give this web design proposal to your clients so if you're ready to learn all about that well let's do it even though we are done with the web design project there's something that I like to do before I show it to my client or before I hand it over to the design agency if I'm working with an agency or if I'm working with the developer directly and that is I just want to step back for a couple of hours at least sometimes more I'd like to sleep on it if I can because when I come back I will notice things that I missed during the design process and I want to fix these issues before I hand that off to the client or the agency or whatever the case may be so that those mistakes aren't seen by my respective employer or the person I'm working with because it's going to make me look unprofessional so one of the things that I would do for this particular project that we haven't done yet is we need to make sure that everything is grouped together properly we didn't do a grouped layer for the footer so we want to make sure that we are naming all our layers properly and that everything is grouped accordingly so that our clients or the web developers will be able to access exactly what they need in order to do what they need to do with the design if we leave anything out and the web developer has to contact us to find out exactly what we meant by a specific type of layout then that's just going to cause headaches for ourselves as well as the web developer and if you're working directly with an agency or directly with the client again that's going to make you look unprofessional because you didn't take the time to do everything properly before handing off the design the other thing I'm going to look for is any other type of mistakes I may have made in regards to alignment and spacing I want pixel-perfect designs and I want pixel perfect alignment so I think we did a pretty good job in the header in the hero section as well as this first section for the body or did we well what I like to do is I just like to go back and turn on my guides and just visually look to make sure everything is properly aligned so it looks like we did that I think we did the right amount of spacing at the top and the bottom here because we did Center this content directly with the background so I don't think that's a problem and then we have our rave reviews so I didn't update the images or the content here we have some duplicate content the same with my content up here so personally I would update this with new content new titles new paragraphs so that everything is different and it shows that we took the time to pay attention to those small details so those are little things I'm going to do to stand out from the 300,000 web designers on upwork.com which I showed you at the very beginning of this tutorial you have a lot of competition and you need to make sure that you're doing the little things to be a much better designer than everybody else you want to separate yourself from everybody else now when I come down into this section I'm starting to notice some bigger mistakes and we can see that in the content so our content isn't defined direct in the columns right here the title and the paragraphs exceed these four columns on either side the same with the image it's not confined to these columns here so to me this is sloppy design we want to make sure that we contain all our information within the grid system that we're using that way everything aligns with it properly so even though I didn't use these four specific columns in other parts of the design maybe in the future I will add something that will align with those four columns but even then even though I'm not using these four particular columns in this side of the document I am using it on this side because it's a direct mirror or it's a reversal of this design layout here so I want everything to be perfectly aligned and equal so we have great designs so what I would do is I would come in here let's grab our move tool let's select pick a layer a guide and then I can click on this image and then with my scale tool shift + C I can then scale that image to be confined to those columns right here and then I would just need to realign everything so it's directly in the center now as far as our text here I'm going to use my text tool to select that paragraph and then I'm going to resize the text box so it fits within those four columns the same with my title up here I'm going to go ahead and adjust this accordingly so that it aligns directly in those four columns now when I do that I lose some of that content so I'm going to bring this part of the paragraph down then I'm going to select all and then I'm going to come down to the tool options and Center it to make it look a little bit more appealing and then of course we need to also move this particular paragraph as well because it's too close to the title nail so what I would do is I would directly Center this between the top of the button and the title here so those are just some little things I think we can do to improve the design of the webpage as well as make the overall document much more professional before we hand it off to the web developer or our clients now there are some other things I think we can do to make the webpage design even better as well but I want to know what you think what do you think we can do to make this webpage design even better let me know what you think in the comments below so we can continue learning about how we can create better web designs I hope you enjoyed this web design tutorial and of course if you want to continue your learning you may want to consider my 17 hour web design master course which includes seven more web design projects so there's a lot more information that I can share with you through this premium course and it's only $10 us at this time the price may change in the future so this is something you may want to take advantage of now before there's a price increase also if you have any questions about this particular project we just worked on please leave your comments below like this tutorial and share it with your family and friends thanks for listening and have an awesome day

Channel: Parker Photographic

Views: 33,186

Rating: 4.9051008 out of 5

Keywords: how to design a website in gimp, gimp web design, gimp web design tutorials, design a website in gimp, web design tutorial, web design, web design course, gimp tutorial, graphic design tutorial, graphic design tutorial for beginners, web design tutorial for beginners, gimp for beginners, gimp graphic design, learn graphic design, website design

Id: 6OiDPULedDU

Length: 117min 52sec (7072 seconds)

Published: Wed Mar 13 2019