7 GIMP Web Design Projects - Learn GIMP Web Design By Doing

1. Gimpwebdesign: Hello. I am Chris Parker and have been a pro graphic designer for 30 years, and I remember my first website design all the way back in 2002. It was horrible. I had no idea what I was doing. And after 16 years and hundreds of website designs later, I've learned what to do and what not to do. So in this course it's more than just about Web design. It's about designing a website with the end user and mind, and it's actually even better than that. It's about doing because you're not just going to watch me design. I encourage you to take what you learn and design exactly what I created. Then it's time to take what I designed and make it better to make it your own. When you've completed this Web design course, you will have seven unique Web designs for your portfolio. Now, in addition to designing seven unique websites, I'll share with you my 16 years of experience and provide riel world advice on creating better websites than the average designer tips on selling additional services to your clients and much more so. This course was designed for both beginners and advanced users. In the beginning of the course, we're gonna go over all the basic tools and you need as a Web designer. Now, if you're already familiar with, you can skip that section and dive right into the anatomy of a website. So that section we will dissect each section of a website to help you keep your PSD files organized. You will then discover the most popular Web design styles, the grid system, and then you'll be able to begin on the seven Web design projects. I'll show you step by step, how to create a website from the header to the hero section, the different elements that make up the body and then finally, the footer. Now, in every project, you will learn something new, and each project builds on the last. So here are just some of the things you're going to learn in this Web design course. You're gonna learn how to create Web designs that provide a great user experience and why you need to create a great user experience. You will also learn how creating a great user experience will help your client's grow their business, and in turn will help you get more business yourself. You're also gonna learn additional add on services that you can up sell your clients on besides just Web design. And then you're going to learn the tools to make creative backgrounds that will help grab people's attention through using radiance, layer masks and more. You're also going to learn what it takes to succeed as a Web designer and stand out among the tens of thousands of other Web designers out there. And this is going to help ensure that you are successful in your Web design career. You're gonna learn the importance of choosing the right fonts and other topography. Pro tips. You're also going to learn additional pro tips not just about designing, but the business end of design as well and much more. 2. Intro to the Anatomy of a Website: Hello and welcome back. All right, so in this section, we're gonna learn all about the anatomy of a web site because as a web designer, you need to know the terminology that describes the different parts that make up a website . This way we can communicate with others working on the project, especially the web developer who is responsible for coding the website. And you need to be able to show and your Web designs the different sections and then name no sections based on the terminology that is an industry standard. So we have six main sections that make up a website, their arm or but we're just gonna cover the main six, which covers the header, the navigation, the hero section, the body, the footer and the sidebar. So we're gonna cover all six of those were gonna look at some examples, and I'm gonna give you some pro tips on each one of those of different sections as well. So if you're ready to learn all about the anatomy of a website, let's do it 3. Header: The first section of the website is known as the header, which is located up here at the top of a website, so the headers going toe have some information about the website. In general, the most common types of content in this section are a logo, a menu and possibly some social media links. You could also do a search Berg like I have here. I also have a link to some trending articles up here at the top. You could also do some basic contact information, like maybe an email address or maybe a phone number. You can have some links to member account pages, so we have a log in option here. You could also do things like called the Action Buttons. Maybe you have a software company, and you want to offer your software for a free trial for 30 days. You could have a cold action button for that. Or maybe you're designing a website for a non profit organization. You could do a donate button up here. The possibilities are endless for the call to action buttons that you can include in there , and those are just a couple examples Now, Everything I mentioned so far are just suggestions for what you could put in the header and you could actually put Mawr information in the header as well. Problem is, you don't want to put too much information. Otherwise it gets too busy. And then the focal point of that header is diluted because the viewer is processing too much information because there's too much to look at. My header actually is probably too busy, but that's why I divided it up into two different colors. So this blue area here we just have the logo in the menu and then the dark gray. I have my social media icons, search and my trending articles over here, and it's separated from this part down here, but it's still part of the header. So that's one way of designing your headers and away if you do have a lot of elements that you want to put in the header. But it's usually best just to do something simple, like a logo, a navigation menu and then some social media icons. That doesn't mean you can't do anything creative, but you can still keep it simple by doing something with a creative type of design. So just keep in mind that the purpose of the header is to give your viewers an opportunity to one confirmed that they are on the right page if they identify with your logo and your brand identity, and to give them an opportunity to find what it is they're looking for via your menu or if they're an existing client to easily access their existing account. So if it's too busy and too much information is going on, you just gonna make it difficult for your viewers toe access what they need. So in most cases, I would recommend limiting your header to your logo, your menu and then 1 to 2 more items at the most now, other aspects of your header design can include what is known as a sticky header. So if I begin scrolling on this website, we can see that the menu has disappeared. So on a sticky header, when you begin to scroll, the header sticks to the top of the browser page. So that's something else that you can create as part of your design in order to help your viewers have easy access to other parts of the website. So instead of having to scroll all the way back up to the top. A sticky header makes it easy for viewers toe access additional pages if they're not finding what they need within the internal part of that Web page. Okay, so in the next lesson, I want to talk a little bit more about our menu because we have some different design options for that navigation or that menu based on placement as well as different design styles for the menu itself. So we're gonna go ahead and take a look at that in the next lesson. 4. Navigation: Hello and welcome back. All right, so in this lesson, we're just gonna go over some different aspects of your navigation or your menu. And by itself, I believe it's a complete section of your website that's separate from everything else. Even though most of the time you're going to find it in the header, it doesn't necessarily have to go in the header. And I'm gonna show you some examples of that in just a second. So for this website, we have a very simple, classic type of menu where we have three links to three different pages. Another type of menu is one that has drop down menus. So when you hover over a specific link, you're going to get this draft down for additional options. So this is considered the primary navigation for this particular website. But we do have a secondary navigation as well, which is this item right here. These four links are considered a secondary type of menu and then, by clicking on them, you'll get different results based on the categories for those particular links, at least for this website. Now, not all websites are going toe have a secondary menu. It all depends on the website and how much information they have for viewers to find on their particular website, which is why I've separated some of my content into a secondary menu, which is only accessible to existing members. Which is another reason why I didn't want to put these links inside of the primary navigation again. This is a classic type of menu, and there is another type of menu option called a mega menu that can expand on the amount of information in the drop down menu. And that can be seen from this website here. And when you hover over different types of lengths, you're gonna get different options. So this right here is considered a mega menu because it has images included with links to that particular page or article. And this is also considered a mega menu because it has multiple columns under one menu heading, and it's divided up into different categories. Based on that particular websites content in any time. You have a lot of information like this, or images that's considered a mega menu. Now, like I mentioned before, you don't have to place your menu inside of the header. You can actually place it in a side bar to the left or to the right of the website. I've even seen menus placed at the bottom with links to navigate to different parts of the website. Now, nine times out of 10 you're going to see menus placed in the header vs in a sidebar or down at the bottom. This type of layout, where the navigation is within the header, it is standard practice. It's what people are accustomed to. You don't see very many websites with a menu in a sidebar or even at the bottom. It's even more rare versus a sidebar. So you want to make it easy for people to access your website and the different pages of your website so they can find the information that they want. And if a person comes to your website and they're not familiar with a menu in the sidebar or the layout is different because they're accustomed to the menu being up here and not down here at the bottom or on the side, then they may become a little frustrated if they're not able to find what they're looking for, and they may become frustrated or turned off because of that design layout, because there usedto having something appear at the top. That's not going to say it's going to be the same for everybody. But some people might be turned off by having in this in the side or the bottom. So you have to be aware of your audience or your clients audience and determine if that's something that's going to enhance the design of the website and the functionality of the website. If it's a younger crowd than is probably no big deal. But if it's an older crowd, then you may want to stick with something more conventional with your navigation up in the header. The other type of option we have for our menu is to hide it completely. We don't see any links in the header, the sidebar or the bottom down here again, this type of design is going to be dependent on the expected audience for that website. Now you may be familiar with where the menu is, but if you've never seen this before and you don't know where to look for the menu, then you're going to leave the website so again you want to make things easy. for viewers to find what they want when they get to the website. But as you probably know, this little thing right here with these three lines kind of looks like a hamburger, and sometimes it's referred to a hamburger, a hamburger icon. You know that if you click on it, you then get your links to the different pages of the website. So again, we have a real simple menu here, with three links to three different options, plus a couple social media icons. So by hiding it, yes, it makes everything cleaner. And the focus is more on what's in this area here versus what's up here. So the main benefit to hiding your menu like this would be because you know that the audience for this particular website is going to be coming from users that use a smart tablet or a smartphone. And it's much cleaner when you don't have a lot of elements to show on smaller devices and not to mention depending on how the site is coated, you could actually load the page faster by hiding certain elements like the menu or even these graphic elements right here to the rate, which is going to enhance the user experience when somebody goes to visit a particular website. So that's about the only reason why I would want to use this particular option is to make it cleaner, to focus on something specific or because the users are going to be using a smaller device versus a desktop monitor. The other thing I want to mention is on the mega menu again, this is going to be dependent on the audience. If your client is expecting the majority of their customers or visitors to come from a smartphone or a tablet, then you may not want to do a mega menu because it's going to be too large on a small device like that. But if most of their customers and clients use a desktop toe, access their website, then you may be okay with going with a mega menu type design, and you can get this information from your clients. If they haven't existing website and they have Google Analytics installed on their site, they can go in and get information about what percentage of visitors come from a computer or smartphone tablet and things like that. So you may want to find out that additional information about the existing visitors that visit their site at this time. Okay, so we're done with navigation. In the next lesson, we're gonna take a look at this part of the website right here, which is called the Hero section. So we're gonna tackle that in the next lesson. 5. Hero: Next up, we have our hero section, which is located below the header and what is known as the above the fold, which is down here. So anything below here is known as below the fold. This is basically going back to the days of newspapers. They would fold their newspapers and half and then when they displayed it on a new stand, you could only see that part of the newspaper above that fold. So in order to entice you to buy that newspaper, they would put the most important information above the fold. Then everything below the fold would only be visible if you were to open up or unfold that newspaper. So the same concept applies to your website. You want to put all the important information above the fold, and then if somebody wants to see the content below the fold, they have to scroll down in order to see it. So you want the most important information in a Web page above the fold, which will include your header. You need to give them an easy way to access different parts of your website to log into your website or whatever other information is available in your header, and then the hero section is going to entice them to continue exploring your website or to get them to do something. So instead of buying a newspaper, you're going to get them to do something with a called toe action. What do you want them to do at this point in the hero section? Do you want to get their email address in exchange for information that they came to your website for? Do you want them to buy something? Do you want them to learn more about a product so that you can then sell them on buying that product or that service? So the hero section is going to include information based on the goal of your website or that specific page. In this case, the home page is going to have a hero section that is defined or designed in a way to get that viewer to do something. What is it your client wants that visitor to do once they land on their home page. That's going to determine how you design this part of the website, so the hero section can be defined as a large featured image or a series of images or even a slight showed that prominently displays on your home page. And again, it has to be above the fold because you want that information or that image or images or slideshow to grab the viewers attention to hold their attention, get them interested in what that website is about and then get them to do something. So research studies have shown that people will make a decision about a particular website unless than a second based on this hero section. So it's one of the most important aspects of Web design because you have to get their attention and hold it. Otherwise, if they don't have any interest based on that hero section, then they're gonna go to somebody else's website and you're gonna lose them as a customer or your clients going to lose them as a customer. So that's why you're going to use an image to grab their attention because they're looking for something specific. They have a problem and they're going to a specific website looking for a solution. So an image can represent that solution or content or text can represent a solution to their problem, and you're going to asked them to do something based on how you're going to solve their specific problem by adding a called action. So another thing you want to make sure you do when designing a hero section is to make it easy to read, it has to be clear and understandable from the get go. They have to know exactly what it is this company does or what they're offering, because if it's not clear or easy to read and they're not quite sure what it is that company does, then you're going to lose that viewer. They're gonna go to another website so you can achieve this with several different methods . You can add keywords based on what that goal of that website is about, or using key words that explain what the product or the service is that's going to solve their problems. So content or text is one method of achieving the clarity for that particular visitor to the website. Or you can use an image, or you can even use a video that will grab their attention because if you set it up so that the video auto plays, then that's automatically going to grab their attention because of video is starting as soon as they get to the website. So let's go ahead and take a look at some examples of different types of hero sections that you can design to solve people's problems. So Apple is using their main product as part of the hero image, and they have some content to go along with it. So we know exactly what this product is based on the image or the text or both, and we know it's about a smartphone iPhone 10 in particular. Then they have to call the actions. You want to learn more about this, or are you ready to buy now? So depending on where that visitor is in, the buying cycle will determine which called action they're going to take in order to take the next step to completing the solution to their problem. They don't have a cell phone, so they want to buy. Right now, they're unsure if the iPhone tennis for them, so they're going to click on learn more. So you're asking them to do something to take the next step in that buying process. So this design, it's clear it's concise. It's easy to understand, and it makes it easy for visitors to the side to choose what to do next. Now this particular website also has an image, but it's not an image about a specific product or service. It's more of a generic type of image, and this image fills the entire hero section from left to right. So in this case, the image is portraying what you can have or achieve based on the products or services that this company is selling. Where would you like to go? That's the called action. Where do you want to go Based on what you choose, you can achieve the goal of camping at a campground or at a beach or going are being and watching sunsets. That's the outcome. That's what people want. They want to get away from the big city, and they want to find a place where they can go camping or are being. And that's what this image portrays and gives them what they can expect once they find a place to camp or RV or whatever the case may be. Another type of hero section would be known as the founder hero section, so here we have a photo of the founder of this particular company, which adds credibility and authority. And this person is a well known marketer in the S E o industry. So you may recognize this person if you landed on this Web page, and you may already know what he offers just based on his image. So again he's offering something free. Exclusive traffic tips for your website. So the call that action is If you want to receive these free exclusive traffic tips, then enter in your email address, sign up and then you're going to get these free tips in your email box. So again, the hero section is about conveying what you do and giving a solution to a problem that the visitor may have. And he's also added some additional credibility for his company. Based on these low goes down here. Not everybody can say they've been featured in Entrepreneur magazine, Forbes magazine, Huffington Post, etcetera. So again, credibility as another way of keeping people's interest in your particular company product or service or your clients, products and services. This next website is another company that specializes in marketing or S CEO traffic. But this time, instead of using an image, it's just a contextual type hero section. But it's basically doing the same thing. Is the other one without any images? Do you want more traffic? Of course. I want more traffic to my website and I'm sure you do. And I'm sure your clients want more traffic to their website. So what you're gonna do is you're going to type in your website address here and then this company is going to analyze your website for free and give you suggestions on how to get more traffic to your website. So that's too cold action. So when designing a hero section, you need to find out the goals of the client that hired you in order to determine how you're going to design the hero section as well as the cold action for that hero section. Then you have to decide, Are you going to make it contextual based? Are you going to add a product image or an image debt provides an outcome and founder image or a video or something else. So once you know this information that you gathered from your client, you want to make sure that the hero section is pleased above the fold is clear and concise on what the company is offering or what they do and have a clear cold toe action. Our hate. So that's it for my tips on the hero section. In the next lesson, we're going to start working on the items below the fold. 6. Body: the next part of our website is the content below the fold and it starts off with either secondary content that complements the hero section or new additional content. For example, the Apple website has additional content for additional products that it offers then with the campground website. It offers secondary content to the hero section by offering popular places to search for campgrounds versus doing a generic search. So the body section of a website is going to be determined on the company itself, what they're offering and if they have multiple products that they can offer. So the design concept for this section is pretty much unlimited but constrained to what that company is offering now. In addition to offering secondary or additional content, you could actually do what is known as a one page design, which is going to include additional content about the company, but not necessarily individual products. But instead it could be a smaller website that has a limited amount of information. So instead of putting it on individual pages, you could put that information on one page. For example, this website here. If we navigate to the about page, it actually scrolls down to that section for the home page. So the about the frequently asked questions are all on the home page and that is known as a one page design. And you can add other sections to the one page design as well, like maybe a contact section or maybe a testimonial section. So the body of your website is going to contain either secondary information, additional information or all the pages on the home page. Okay, so those are my tips for the body section. There's a lot more information we can go over the for the body, since there's so much information you can put in this area. And the design concepts that you can come up with are pretty much unlimited as well, based on the content for that section. So we can't really cover everything that you conduce you in the body, but those are the basics of the body section. Right? So in the next lesson, we're gonna take a look at the next section, which is the footer 7. Footer: the section just below the body, which is at the very bottom of a website, which is this area right here is known as the Footer. Now just like the header, it's going to stay the same from page to page. And the purpose of the footer is to give your viewers an opportunity to locate what they need and be able to navigate to another part of the website without having to go up to the menu. Because not every website has a sticky menu and if they don't have easy access to the menu than they can actually access that information from here now. In addition to links to different parts of the website, there's additional information that is usually placed in the footer like the privacy policies, terms of use, sales and refunds, legal site map and additional information. We have copyright information in the footer as well easy access to contact Apple and much more so what goes in the footer again depends on the company what they want to achieve and the goals for their website. Now for my Web site in particular, I don't have a lot of links in the bottom of my footer. I just have my privacy policy support lengths and social media icons, which is much different from what we have here. An apple. So the design is entirely up to you on whether or not you want to do just links, or if you want to make it more creative or more image based, you can add images down here as well to help people find what they need. You could also put another search bar down here. If you have one up in the header, you can put one down here is well, so there's a lot of information that you can put in the footer, and just because it's at the bottom doesn't mean you want to skimp on the design. Yes, it's OK if it's just contextual based, but you may want to add some images in the footer as well, depending on the website, of course, to add some interest to that area, to grab people's attention to help them find what they need so that they will continue navigating to different parts of the website. Okay, so that's the footer. We have one more section to go over, so we're going to do that in the next lesson. 8. Sidebar: the final section that creates the banana me of a website is known as the sidebar. When you create a vertical menu like this company has here, this is considered a sidebar. It's off to the side, and it's in a bar. So that's the sidebar. But a more typical type of sidebar is one that you'll see on blog's or magazine or e commerce type of sites. And that's going to list additional information that viewers will be able to access, whether they want to sign up for a newsletter, links to Social media, access to recent posts, popular posts and much more now. Typically, you don't want to put a sidebar on your home page like I've done here. And if you take a look at Apple, you can see they don't have a sidebar on their home page at all because they want the focus to be on the products and not necessarily information that could be included on the sidebar . The other place you don't want to add a sidebar is the actual landing page for a specific product. So here we have a product page for the iPad pro, and they don't necessarily have a typical sidebar with the information that I have here in my sidebar. So when designing a sidebar you can and a lot of information, but you want to focus on the overall design style of that particular sidebar. For example, here I have a dark color for the background of the headline, I chose a specific font for the titles, and the overall design is pretty clean. So that way the focus is more on the content and not necessarily the design. So you may or may not need to design a sidebar to go with the website, and again that depends on the website. The goals for that website and your client. All right, so that's Thesixties items that make up the anatomy of a website. In the next few lessons, I want to just go over some additional design best practices before we get into actually designing the different parts of our website. 9. Intro to the design styles section: Hello and welcome back once again. All right, so in this section, we're gonna learn all about web design styles, and the first thing we're going to do is we're going to take a step down memory lane and take a look at some Web designs created 15 to 20 years ago. So we can learn what not to do when designing websites, but also give you some additional pro tips along the way as well. After that, I'm going to share with you the seven most popular Web design styles right now in 2019. If you're watching this in a different year than those popular Web design styles, maybe different. So you want to make sure that you're up to date on a yearly basis on the most popular design styles. All right, so after we get through that, were then going to take a look at some places that weaken go for inspiration so we can get some ideas on how to design a specific project that we're working on. So if you're ready, toe, learn all about what design styles led to do it 10. My Thoughts on Design Styles: hello and welcome back a rate. So in this lesson, I just want to briefly go over some information about Web design trends. Trends are like the fashion industry. They're trendy until they're not. There's things that were done in the nineties, like this particular website that is pure evil or things I would never do again. This is just horrible. And Web design has come a long way since the introduction of the World Wide Web and the Web sites that we used to visit back then through so many things wrong with this particular Web design. I don't know where to start, other than to say, if you ever get a chance, just do a Google search for Web designs from the nineties and you will find websites that are still alive and active that were designed in the late nineties, and you're gonna see a lot of things that you shouldn't be doing nowadays. But that being said, if we fast forward to 2004 we still had websites that were being designed that were committing way too many mistakes, and this is so busy, I don't know where to look. They're selling a lot of stuff, apparently, and I'm not quite sure what they're trying to achieve. But it's just so busy and that's something that I recommend doing. When it comes to a Web design, there are a lot of different styles. There's a lot of different trends. Different types of trends come and go. They become outdated because everybody starts doing it. And the business owners that are running these websites want to stand out from their competition. So they'll redo their website based on the latest trend. And it continues changing over and over again because the trends change all the time. But the websites that continue to use the same type of basic design like Media Temple. This is a more modern, classic clean website and even though they occasionally change things around a bit, the overall brand for their particular business stays the same. They use the same color schemes. They use a very similar design style, which is modern and clean. This type of style will stand the test of time. It will not become outdated because it's not using a lot of graphical elements and it's clean. But at the same time, if you take a look at this website, you can see they're using a lot of graphics and as you can see, it is semi busy. They're using graphic elements from the late nineties with the Grady, um, button here and some other elements as well. But this company is a huge company and they're very popular in the marketing world for social media experts and those that want to become experts and social media and grow their business through social media. So you can still design something like this and have a successful website. So this particular website has a theme, and the design of that theme or their brand is designed accordingly for what their message is trying to portray. So it comes down to one knowing what your client is trying to achieve, what their website, and then you have to decide what is their brand. Do they have a specific brand already in place? Then that's what you're going to design the website around. If you were contacted by a media temple to update their existing website and you proposed this type of design style, they're probably going to reject it because it doesn't match their particular brand that they've already established But if you have a client that his brand new that doesn't have a brand in place, then that's what you need to develop first and find out what they're trying to say. What's their message and how do they want to portray that with their brand? So sometimes Web design comes after developing a brand and a logo. But a lot of times clients will get a logo first based on what they like, and then that becomes their brand, and then their website is designed around it. But that doesn't mean that that particular design coexists with their particular message. For example, a doctor will probably get a logo first, and then we'll want a Web design. But they might like this type of style. This is what they personally like, but it doesn't align with what they're trying to do in the marketplace. They're trying to build a practice with more clients. This type of style is not going to represent what they're trying to achieve and the type of business that they're in. At least that's my personal perspective on this particular design versus a professional industry. I wouldn't submit this type of a design style to a professional doctor or anyone else in other types of professional industries. So the design has to match the industry that that particular person is in. This particular company is based on social media and their messages social media, jungle and that coexists what their particular industry. Because if you know anything about marketing and social media, it is a jungle. There's a lot of stuff going on, and they're brand, and their design of this particular website works for that particular message. So when it comes to designing websites, you have to decide what kind of a designer are you? Are you one that is going to be more creative and providing graphics like this? Is that the style that you like? Then you have to build your portfolio based on that, and then you need to locate customers that are going to appreciate your style. But if you want to try and design for everybody, you're gonna have a more difficult time trying to appease everybody. Because now you're gonna have to have a portfolio with this style modern, classic and clean and other styles as well versus just this particular one. So if you focus on one particular style. Then you will be able to attract the customers that, like that style me personally. I prefer more clean, classic, modern type designs versus this type of design. So I've never designed anything like this. I do more modern and clean designs versus websites that have a lot of graphics, and the other thing that I don't like to do is applying Grady INTs to the menus. I like my buttons, and my men used to be flat. I don't want any distractions from graphics, other types of elements, ingredients to distract from what I want my readers to do. And that is to navigate easily without any distraction. Again, that's my personal preference. In my personal style, you may like something completely different, and based on what you learn in the projects in this course, is just a starting point. You need to do research on digital design trends. Do a Google search for Web design trends, and you will see every year there are new design trends being introduced right here. We have 13 Web design trends to watch for in 2017 you need to be up to date on what is possibly going to be in trend for that year because your clients are going to see these types of design elements being used on their competitors sites and they're going to want the same for their own. And you need to know if that's something that you want to offer or not. And again, you have to communicate with the client and let them know that a design trend doesn't necessarily mean that they're going to be successful with that website. What is that they're trying to do with their website? Are there trying to gain clients or is it just a personal website with a blowgun it? If these design trends distract from visitors and visitors air unable to navigate to get the information that they want, then they're going to leave the website and not purchase or supply an email address. And your customer loses out on that particular customer because you over designed the website with elements that are not going to help that business owner achieve what it is they want. So before Web design comes communication with your client to find out exactly what it is they want to achieve with their website and then finding out their brand and then designing the website around that brand. If they don't have a brand or logo, then you have an opportunity to up sell your design services to provide them with a logo and a brand and then at website to match that brand. 11. 7 Popular Design Styles: Hello and welcome back. All right, so for this I said we're gonna go over some different types of design styles. There's a lot of different types of design styles and we're only going to go over about seven different design styles. In this lesson. There are definitely mawr and these air, the more popular ones as of today. Now, 15 years ago, there were design styles that were very popular then that are not really used a whole lot today. But that doesn't mean that those design styles won't come back into fashion and become more popular than what's popular today. So we're not going to really cover what was popular 15 years ago. Hopefully some of those design styles won't come back because they are hideous. And I would never use them in my designs of websites anyways, so we'll just limit it to these most popular types of designs. As of now. Now, in regards to your portfolio, you should represent your style or your design style with designs that you prefer creating . You should have a specific type of design style, and you can take the seven main types of design styles and create your own design from those. Or you can stick with the basics of each design style tight and by focusing on designs that you prefer creating. Then it's going to be easier to find clients who appreciate your particular style if you try and represent all seven different design styles than you're trying to accommodate all types of clients, and it's gonna be much harder to grow your business or get more jobs because you're not focused on one specific type of style. And that's because when you specialize in a specific style, it does make it easier to concentrate on finding clients that, like that specific style versus trying to do everything for everybody. Okay, with that in mind, let's go ahead and take a look at the seven different types of design styles. So the first to design styles we're gonna look at are known as the flat design and realism , or also known as skewer morph ism. Early on, in the history of Web design, realism was the popular design of choice not only in Web design but user interface designed as well. For example, here we can see both design styles that Apple had applied to its operating system for its smartphones, and it's tablets at different times in history. So over here to the right, we have the realism design and over to the left. We have a flat design, so in realism we have a lot more detail in the icons. We have textures, drop shuttles, even realistic photos for some of the icons, then on the left. The majority of those details have been stripped out, which gives us our flat design style. So you can think of these to design styles as the visual aesthetics of the elements of those icons or the Web page or the interface, or whatever it is that you're designing. Here's another example. So on the left we have realism on the right. We have a flat design. Here's another flat design, so there's not a lot of detail. There's no drop shadows or textures or details within the graphics themselves. The same with this one. It does have a little bit of a drop shadow here on this icon and this icon here, but overall it's a pretty flat type of design, and over at 99 designs, that's yea, they have a blood post about school, more FIC designs, and you can see a ton of examples for that particular design style. And you can see there's definitely more detail in the icons and the abs and everything else . For these particular designs, there's detailed texture. There's drop shadows, highlights and much more to give it that realistic type of look. So when it comes to choosing one of these design styles over the other, I prefer the flat design and call me lazy. But fled designs are easier to create and less time consuming to create. However, the biggest benefit of flat design is low time. It takes less time to load a Web page in your browser or your smartphone or tablet inside of that browser, versus a realistic design with all its textures and shadows and photos and Grady INTs, etcetera. Therefore, a flat design has a better chance of ranking and search engines, versus a realism design based on the speed of which that site loads. Now there's other factors, of course, that go into ranking a website as well, but speed is one of them, so the faster your website loads, the better score you get from Google or other search engines based on how fast that website loads up. In the end, though, it does come down to a matter of personal preference, your client's brand identity and the goal of the site. All right, now, let's take a look at another design style on this one we're going to look at is called minimalist. Oftentimes minimalist can be confused with the flat design style. However, there is a distinct difference. A flat design style and the realism style, for that matter referred to the visual aesthetics of the elements of a Web page the menus, buttons, backgrounds and any other graphics that make up the page. Minimalism, on the other hand, refers to a design philosophy. Less is more as a designer, your goal is toe only. Add the most essential and necessary elements to achieve the goal of that Web page, which is why it's sometimes confused with flat design, since it, too, is well, minimal In its design. However, the difference is not in the graphic elements themselves or the visual aesthetics, but how many elements are used in a design again, Less is more so. Let's take a look at some examples, so Apple provides us a perfect example of minimalism. We have a header up here at the top with some menu items. We have content that is very straight to the point. We have a couple of called action buttons and then we have a product very, very simple. There's really no need to add anything else to this because you know exactly what this particular page is all about. The iPhone 10. You either want to learn more or you want to buy. Now it's very minimal. Same thing with this website here, although they are using an image for the background. But it's still very simple and to the point you know exactly what they do based on the image and the content right here. And then you have options to navigate to other parts of the website very minimal, and then the next site is minimal as well. It's broken down with content on the side product in the middle and then some additional information over here to the right, so it's very minimal and to the point. Our next design style is a little bit mawr opposite of minimalism and maybe even the flat design, because the aesthetics of the graphic elements has a lot more information or detail, so we're going to take a look at a retro design style. So this style encompasses Mawr verse less. And like I mentioned, it has a little bit of realism in it as well to portray the elements that make up the page to, well, give it a retro type look. And this design style is an acquired taste, and it's gonna be limited based on your client's brand identity, their goals for their website and what they're trying to portray with their particular design style or their look. All right, so let's go ahead and take a look at some retro designs just to get an idea of what we can do with this particular style and how to create it. So a retro design is made up of different elements to give it that retro feel, and that can include banners and ribbons, the type of text and, of course, other typographic elements, like this little edge around the content that is frayed and kind of looks like an old school type of paper and then, of course, other elements and fonts as well. This particular site has a realism type feel to it as well as a retro feel, and that's based on the images that are used to give it. That retro look kind of has 1/2 tone process. Apply to the images, which is what occurred back in the day when printing on a press. And then, of course, the use of particular fonts and other graphic elements also adds to the retro feel, so you can mix and match different styles to come up with your own style. So this one, of course, the retro and the realism have been mixed together for this particular design. This one has basically done the same thing as far as adding realism with a real photo and then specific types of fonts to give it a retro feel. This one is using a combination of fonts, colors and graphic elements to give it that retro feel. These particular colors here, the grays and the oranges, are representative of what was used back in the fifties and the sixties. Of course, there's other colors as well, depending on the time period, But these air some popular colors from those time periods. This one is using a combination of graphic elements, text and different types of retro colors to complete the retro design, as well as adding some graphic elements that are almost realism in nature based on the amount of texture and detail in the birds and the dogs and things like that. So these are all different types of ways that you can create a retro design. But again, it is an acquired taste, and it's going to be something that maybe your client is going to want and asked for specifically. Or it might be something that you may recommend based on their clientele and their particular brand identity. All right, so the next design style I want to share with you is known as an illustration design style . So it's going to consist of mostly illustrations versus photos. So this design style can consist of illustrations that are either flat or have a more realistic look. Or, if you're feeling really creative, you could do a hybrid of both the flat and realism with your illustrated Web design. So these types of designs kind of give the feeling of a fun and laid back type of environment and just like some other design styles, choosing this specific type of design style is going to be dependent on your particular client and their brand identity. So let's go ahead and take a look at some examples. Now, just like all our different design styles, illustrations themselves can come in different types of styles as well. So for this particular website, we have an illustration with some textures on the elements that were drawn for this particular website. This next one as well has graphic elements that have textures in the illustrations or Grady INTs. But some of the elements as well are flat and design, so you can mix and match this as well with your illustrations. And then another style of illustration is to create a three D type effect. Or, if you're old school and your client is old school and you want to do more of an illustrative type pencil drawing of your characters, you can do that. And this website is incorporating that type of illustration along with realistic photos for more realism to sell their particular product. But throughout the site, you're going to notice that there's a lot of other types of illustrations that are incorporated in the design of the website. And of course, there's other types of mediums as well. This one in particular, is using a watercolor illustration as its dominant imagery for its website. So you can think of illustrative design as another concept that you can promote for different types of websites based on the client toe and the brand identity for that particular company. And then, of course, you have to decide on the style of that illustration. Once you decide you want to go with that particular design style for a website, so it's not just a matter of okay. I want to do illustrative type designs. Well, what kind of illustrations do you want to dio watercolor charcoal pencil drawings, three D flat designs? So there's a whole lot more decisions that go into creating an illustrative type Web design . All right, so the next design, so I Want to Share with You, is known as a grunge style, which, kind of like the retro design is the opposite of minimalism. Runge is anything but minimal or even symmetrical or balanced. Grunge has a dirty look with your regular, sometimes not so pretty visual elements. This is another one of those design styles that's going to be limited to the taste of your client or their brand identity, or even the audience that they're going after. So you can think of grunts style for maybe rock or even while grunge musicians or even other types of companies that cater to these musicians or artists. So they may be more inclined to use this particular type of design style versus, Let's, say, a doctor or a dentist. So let's take a quick look at a couple of runs style designs, just like with the retro design style. The elements that make up the page and the textures and the images used will create that grunge effect. So the fonts used are more of a grunge type of a font and the overall texture and overlaying that texture over images as well as the other design elements. Give it that grunge look or that grunge feel in this particular website. This one is well, is using some graphic elements to create that grunge look and feel, and that's based on the background graphic here, where it looks like the paper or the website is being tor nor ripped, and it has a grunge feel to it, along with the fonts that are being used as part of the logo, creates a grunge feel. Our final Web design style is known as a geo metric design style, which consists of using shapes or other graphic elements in a way that is visually pleasing to the eye. And it can even provide a composition with those geometric shapes that leads a visitor in the direction you want to take them. With this particular website, they are using different geometric shapes that are not consistent with what we've seen in the past from other websites in the form of squares or rectangles or even circles. This particular geometric shape is not used as much as those other shapes, and it makes for an interesting design and organizes all these different photos and text and content within them to help organize and make it easy to find what we want to find. This next website is also using geometric shapes to put content within it, to separate it from the other content, and visually it makes it much easier to view versus just having it all scattered across just some rectangles. And that's basically what you see on a lot of websites is just content within squares, rectangles or circles, and this one is using different geometric shapes as part of the design. Which is much more interesting, I think, than the conventional type of shapes that we've used in the past. This one is using geometric shapes to hold content within it as well, but it's doing it in a more unique and streamlined way versus the other two sites. But it is still confining that content within the geometric shapes. And it's doing it in a way that makes us want to follow this arrow here, to scroll down and continue our journey based on this geometric shape where it's creating this pointer pointing down, which is a good visual way of getting your viewers to continue on scrolling through the rest of the page. So that's just another way of using geometric shapes in your designs. All right, so we've covered seven different types of design styles and the designs. How you choose for a specific project is going to be dependent on the client, the brand identity and their audience. You have to take all of that into consideration before you decide on a design style. But if you specialize in a specific design style, then you know that clients that are coming to you are going to be expecting that particular design style. And you don't have to worry too much about focusing on which design style to choose, since they're choosing you for your specialty. Okay, so that's it for our Web design styles in the next section or the next lesson we're going to start taking. Look at the anatomy of a website, all the different sections and parts that make up a Web page. We're gonna go into each one of those sections in detail, and I'm gonna give you some pro tips and some best practices for designing each one of those different sections. So if you're ready to get there on that, let's do it. 12. Get Inspired: Let's talk about getting inspired as a Web designer the best practices and things to avoid . So probably the easiest thing to do is just to do a Google search for Web design ideas. Best Web designs. Or maybe if you're stuck on a specific part of website, you could do Web design, header ideas, Web design, footer ideas, things like that to get some inspiration for your current project. So that's one way of getting inspiration is through Google. The other is through 99 designs, and this is a crowd sourcing place where you can go as a graphic designer and bid on jobs. So what's your A designer and you're a member of this community. You can go in and browse contests, and you can filter down to what it is you need inspiration for. So here I have Web and APP design projects, and there's over 14,000 projects at this time that are closed that I can filter and search for toe help, give me some inspiration for my current project and have also selected finished projects versus open because open isn't going to always show you designs for that particular project because ah lot of them are blind projects, so it's better to go into the finished status and then you can navigate to different contests to see those different types of designs to get inspiration from now. The one thing you do not want to do is you do not want to copy a design. Exactly. So here we can see for this particular contest. This was the winning design that the client selected. And if you decide to go in and design a website, whether it's on your own or through a service like 99 designs, especially if you're going to be a designer on this crowd sourcing platform, you're going to get booted from the platform because you will find in the designer code of conduct that doing original artwork is a must. If you copy this particular design and try and sell it to some other client, you will be suspended from this community and you will no longer be able tow work through this company so they have a suspension policy that links to that designer code of conduct. That explains that you do have to do original work because all designs are by default, copyrighted by the original artist. And by copying that artist you are infringing on their copyright, and you will get banned from these crowdsourcing sites. Not only that, if, for example, you work for a tech company and you go to Apple's website and you say, You know what? I love their layout and you copy their layout exactly. Well, guess what? Eventually, Apple's going to find out because your business is growing and your website design is exactly like theirs. They're gonna contact you, and they're going to sue you for stealing their Web design. Somebody designed this particular website, whether it's a separate company or somebody within the company. Apple owns this particular design, and you cannot copy this exactly. Otherwise, you're going to be infringing on their copyright, and they're going to sue you for compensation for that theft. So whatever you do, do not steal other people's website designs. The other thing you have to consider is the imagery and any type of clip art that you use in your Web design. Both are copyright protected, depending on the licensing for that particular artwork. Most stock images when you go to stock photos dot com, for example, all those images have a copyright, and you have to pay a licence in order to use it. But you can use those images with a copyright watermark over them as part of your design. But you have to let your client know that that particular images copyrighted and if they want to use that exact same image than they have to pay the rights to use it the same with clip art. If you use any clippard that is copyright protected, then you have to either pay for a licensing fee. Or sometimes when it comes to clip art, the creator of that Clipper will ask for an attribution that says, This particular website was created with clip art and then you provide a link back to that artist. So that's something that you would put in the footer. So you want to find out the licensing agreement for that particular artwork that you want to use for a website before you actually use it on a life site. So, for example, this little search icon right here was created by somebody a designer created that, and if you were to find this particular magnifying glass online and you stole that particular image without giving an attribution or paying for a licence than that graphic designer can basically come back. And so you just like Apple did. So don't use any type of imagery or clip art without first finding out what the copyright use and the licensing for that particular artwork is before you actually use it. Those are best practices. So whatever you do, don't steal other people's work. Make sure everything is licensed properly. Before you start using it on life sites or even in contests like through 99 designs. You don't want to use copyright protected artwork. Otherwise, you're going to get booted from their community. So when you're looking at different websites for inspiration, you have to ask yourself. Okay, I like the layout. I like the colors. I like the fonts, but what can I do to make it better? Well, the company that you're working for, they're gonna have a different brand identity versus this company here. They're gonna have different colors and maybe different fonts that are part of their brand identity, so that's going to be different. But the other thing you can do differently is to rearrange some items used different imagery. You don't want to use this image here. You want to make your hero section maybe a different size. Maybe instead of full bleed on the image, you confine it to the size of that content, which is this information down here. So maybe this is 960 pixels wide. So you would make that image that size so that it lines up to the left and the right of the content, and that makes a difference. I would maybe move the menu up here at the top, maybe place this content information up here with the search items appear. If their search items, maybe you want to add a search birth, so that's going to make a difference. You don't want to do it exactly the same. But maybe you like the shading in the drop shadow of this menu area here. So you could actually flip this around and move this up to the top. You can move the logo inside to the left of the menu. You're just basically reusing the shading for this particular menu. But you're rearranging the items so that you come up with your own unique designs the same with the icons. You don't want to use the exact same icon. Do you want to find different icons or create your own icons to make the overall design different? So that's how I would go about finding inspiration for a particular project that I'm working on is by finding out the brand identity for my client, coming up with the colors and the fonts that I want to use first, and then start building the different sections off their Web page based on what they need. Do they need a sidebar? If not? Well, you don't have to worry about the sidebar. They're going to need a header. They're going to need navigation. And then it's just a matter of deciding how you're going to lay everything out. Plus the visual aesthetics of the header, which would be the drop shadow for the menu background and anything else as faras. The styling goes of the text and any of the other types of graphic elements for that particular section 13. Intro to the Grid System: all right. I know you're probably anxious to get started on designing our projects, but there's one more thing we need to know and learn before we begin designing websites and gimp and that is the grid system. So in this section, we're gonna learn what a grid system is and why we want to use it with our Web designs. And I'm gonna show you where you can get different types of grid systems for free. So if you're ready to learn all about the grid system, let's do it. 14. Grid System: hello and welcome back. Before we get into our Web design projects, I first want to share with you the grid system that we're going to be using for these Web design projects. And I also want to explain what a grid system is, in case you're not sure what it is. So in this lesson, I'm just gonna share that information with you. And then I'll show you where you can download the grid system so you can use it with the Web design projects throughout this course. So basically, a grid system allows you to streamline your Web designs because it provides commonly used dimensions based on a specific with. Now, the industry standard used to be 960 pixels wide, and there are two different variations of that grid system, which is either 12 or 16 columns. So why are we going to use a grid system like this? Well, it helps us by pre defining the column sizes and allows us to evenly space out, are different graphic elements and provide equal spacing between them to help us align all of the elements and give symmetry to our Web designs. For example, if we have three columns of content. Then we know that a 12 column grid will work best for that particular set up. And the reason why is because 12 columns divided into three equals four. And then, if we have four columns of content, it would be better to switch to a 16 column system since 16 divided by four is four, and overall, it's going to better space out our content in those regards. Now, the grid system that I'm using comes from this website here, which is 9 60 dot gs. So go ahead, navigate to this website, and if you scroll down here and click on show grid, you're going to see these different columns, any red overlay, and you're gonna notice how all the different elements of the page design line up, and we can see that the amount of spacing between that content is even throughout the Web page. So by using this grid system, you ensure that all the elements are evenly spaced lined up, and this, in the end, will give you a much better design than if you were just to wing it and have elements spaced out all over the place. There's not gonna be any symmetry. It's going to be hard to navigate throughout the page, and it's gonna be very chaotic if you're not using a grid system. Not only that, but using a grid system definitely helps streamline your workflow and makes it easier and faster for you to design everything and put everything into a proper position. Now the only problem with the 9 60 grid system is it's a little outdated. You could still use it, but it wasn't really designed for responsive websites for ipads smartphones, things like that. So back in the day before the smartphones that we have nowadays and tablets, this system was all you really needed. But now, with all the different sizes of mobile devices and the size of monitors, we need a larger grid system, and the one I recommend is a 1200 grid system or 1200 pixels wide. So this is going to accommodate more devices and more monitor sizes versus 9 60 it will also be perfect. First sites that need to be responsive. The other benefit is if a client has a specific size requirement, you can easily downsize to the grid system needed for that project. Now we are going to download the grid system from here. But the problem is they don't have a 1200 grid system, so we can easily fix that by downloading the 9 60 grid system from here. Just click on this big old download button right here to download the 9 60 grid system. Let's go ahead and open up that file and convert it to a 1200 grid system. So let's go inside of templates. Were gonna choose Photoshopped? Let's just do the 12 Grid column for now. Open it up. Go to image, go to image size and right now it should say 10 20 by 10 20. So we have an extra 40 pixels, so we have a little breathing room on either side of the grid system. So for the image size, let's add 200 pixels. So now we have 1220 by 1220 that's going to give us our 1200 grid system. All right, now that you have that grid system resized, save it as a master file and then we're going to use that for all the design projects in this course and what you want to do is, once you start on a project is you're going to want to save, as so you can save this file for that particular Web design project and keep it separate from your master files so you can always go back to your master file for the next project are Hey, now that we finally got all of this information out of the way, it's time to start designing websites. I hope you're ready. I am excited and can't wait to share with you all my tips and secrets for designing websites and Photoshopped. So if you're ready, let's do it. 15. Pixel Perfect: for this lesson. I just want to give you a couple more tips when designing a website, and the 1st 1 is to stay organized. When you're designing your website, you're gonna be building different parts of that website based on the anatomy of the website, whether it's the header, the hero, the body, the footer sidebar, whatever it is you want to be organized. And what I mean by that is you want to organize your layers and away so that it's easy to access and find what you need. For example, this particular Web page has multiple sections. So as you can see, I have a group player for the header, the hero, the body and the footer. So I can easily access what I need for that particular section inside of here. We have the body and I have a couple different parts of the body, as well as an about and a review section as well, and it's all organized inside of these grouped layers now inside of the group layer. I have additional group players as well with additional content, so that I can easily access that part of the website. It also helps with the Web developer. When you hand this file off to the Web developer, they need to know what goes where and by organizing everything in grouped layers. It makes it easy for them to find an access that information so they know what step they need to work on next. The other thing you want to do is you want to design your Web designs pixel perfect. And what I mean by that is you wanna have everything lined up perfectly. So if this title and this content section was off by a couple pixels over here to the left , well, guess what? The Web developers going to think you did that on purpose and it's not going to line up with this box here, and it's going to be off to the left. But if you do it pixel perfect than the Web developer should align those elements to the left as designed. So if you make any mistakes in your design, the Web developer is not going to know that those were mistakes and will actually code the website based on what you actually give them. So you want to create a pixel perfect web design and perfectly align everything as your designing and before you hand it off to the Web developer. The other thing is going to do is it's going to get you into the habit of creating pixel perfect designs from the beginning, and it's also going to be symmetrical. We haven't even amount of spacing between these three columns. And if this column was further to the left and the gap between the two columns was larger than this one, then it's not going to be symmetrical. And it's not going to be balanced. That's going to look off. It's not going to be a good design is going to be a bad design. You want to be able to create a design that is pleasing to the eye, grabs person's interest, holds their interest, and then, based on the called actions, you get them to do what you want them to dio for that particular design. If you're not designing with a pixel perfect intention from the beginning, then your designs are going to look sloppy. You're not going to be able to command a high price for your designs, and you're gonna get less business, so make sure that you design with the pixel perfect mentality. Have everything aligned properly symmetrical and don't have any mistakes and your designs prior to going out to the Web developer or even your portfolio, for that matter, because somebody may notice a mistake and decide not to hire you because you didn't take the time to pay attention to the fine details of that particular design. And they're going to want to hire somebody that does take that time to pay attention to those small details, and they're more likely to pay a higher price for that attention to detail. So as you begin designing and creating designs for your portfolio and then you start promoting your services, you want to keep that in mind, organize everything and design with that pixel perfect mentality. So you condemn and a higher price and get more jobs in the process. 16. Intro to the 7 Projects: All right. So guess what time it is. That's right. It's the moment you've been waiting for your entire life. All right, well, maybe not that long, but it is time to start designing websites and Gipp. Yes. All right. So we have seven design projects that we're going to work on, and we're going to use a lot of the tools and gimp in order to accomplish these designs. And we're going to use a lot of the tools over and over and over again, which is great, because by the time you're done doing all seven projects, you should have mastered or at least have a very good idea on how to use the gimp tools we need to use to design our websites and gimp. Okay, So not only are you going to take the project and re create my design that I came up as practice. But once you're done with that, I want you to recreate that website in your own creative vision. I want you to come up with something better so that you can then had that design to your portfolio. So if you're ready to get started on designing websites and Gib well, let's do it 17. Project 1: Nike Briefing: All right, let's go ahead and take a look at Nike's current home page, and as you can see, it has a nice, clean, modern design. Navigation is centered, and when you hover over each one of the items, you can see that a mega menu will present itself and show all the different products available. We also have easy access to specific brands and options for easily accessing an account. If you already have one access to a shopping Kurt, some help options and a search button to find something specific. So this website was designed with new and existing customers and mind by making it easy for their visitors to find exactly what they need. This page really doesn't need a redesign, but I wanted to show you how to put all of these different elements together in a new design and show you how being creative can add additional interest to a page toehold or grab a person's attention and get them to do what you want them to do in this case by some shoes or other products. So not every website is gonna have all of these different elements. Not all companies, they're gonna have several brands, and they may not have an account because maybe they're not selling something directly on their website. Like this site, which is more of an e commerce type of site versus a traditional corporate or business type of website. You could still sell products, but maybe not have it set up in a traditional e commerce type style. This initial page is not an e commerce type style. It's more of an information type of Web page, but when you navigate to their specific products, it's more of an e commerce type of page layout. So for the redesign, we really don't want to rebrand the website because Nike already has a solid branding in place on their existing site. We can just add to it by adding different elements to get visitors to do whatever their specific goal is. And I think for them their goal is to sell more of their products. So for the redesign, I didn't do a rebrand of the website. I just wanted to focus more on their top three brands, which is the Air Jordan, the Hurley and Covers, and I wanted to take their most recent shoe designs. Highlight those products to grab people's attention to that specific product and make it easy for people to buy them through a called action button. But he also wanted to place those products in a way that is different from anything else that you'll see out there. And that's where the creativity comes into play when you're trying to differentiate your design from other sites. But at the same time, though, I didn't want to over design, and I kept it simple by just adding three main elements. We have the content with the called action, the main shoe and then a person, or an image of a person interacting with that shoe. So the main three shoes, they all have a specific audience that decade or two in most cases. So the Air Jordans air gonna cater to more to those that, like basketball or high top shoes in general, then Hurley is going to have combination of shoes and sandals. So maybe beachgoers or surfers or things like that, and then converse, or maybe more popular with skateboarders or other types of people in that crowd. Or maybe just or maybe they just like the look of converse in general And this is where communicating with your client about those specific products to determine how your coin, too, present those products in a way that's different, creative, but simple enough that it's not too confusing and you're still able to grab a person's attention and get them to do what you want them to do, which is to buy more. So communication is paramount for any type of Web design. So I chose a specific type of person for each one of those products to showcase them in action with the actual shoes. So, of course, we have a photo of Michael Jordan for this particular shoe because they are the Air Jordans , and I wanted to showcase not just the design of that new shoe, but the inspiration for that shoe. So we have Michael Jordan flying through the sky, and it looks like he's going to dunk inside of the shoot. This alone is different, and it's gonna grab a viewer's attention because they haven't seen this before. Then I have a surfer surfing across the top of a sandal and then escape border, doing her thing on the front of the shoe. So each one of these ideas. Replacements of the image of the people on the shoes helps create visual interest for that particular shoe or that particular brand. So for this project, you're gonna learn how he took all these elements and place them together. How to retouch the image is how to organize the layers, how to create the mega menu and organize it in a way that the developer is going to understand that this isn't just a typical navigation menu, and you're gonna learn more pro tips along the way as well. So the first thing we're going to need to do is grab some images for this particular design . If you're ready to get started, I'm gonna show you where I got these images in the next lesson. So let's do it. 18. Images: When it comes to images, you're either going to get the images directly from your client or you're going to have to use stock images in your design. Chances are if decline is giving you images than they've already purchased the license to use those images on the website. If you're going out and finding images from stock agencies or from Google images or wherever you find the image, you have to let clients know that that particular image is copyrighted and they cannot use it in their website until they purchase a licence for using it in their website. Otherwise, their clients going to get into trouble and they may end up coming after you for damages for using an image that was copyrighted. So you just have to let them know that any images that you've included in your designs, our copyright protected and they'll need to purchase that particular image in order to use it. So to complete the project, we need to download some images so we can use those in the project. So I found all the images on Google images, and I also created a text file with a link to all the images that I'm using so you can download this file from this lecture and navigate to each one of the images and then add them to your gimp document. Now I do want to point out that even though I provided direct links to the images I'm using , they may or may not be available at the time that you're watching this video tutorial. Because images are sometimes removed from Google images, which is fine, just go ahead and find another image that is similar to the one that we're using in the project. Because the tools and the techniques that you're going to use for retouching these images can be applied to any image. So I just want to give you a couple quick tips on adding these images to your gift document as well as Google images before we move on to the next tutorial where we're going to retouch these images. So first, let's go into Google images. And when I search for images via Google images, I like to find the highest quality images available, and if we go to tools, we have some sorting options, so if we go undersize weaken, select large and this will give us much larger files toe work with, and they tend to be of a higher quality. And that's how I found this first image of Michael Jordan, and we're going to actually use this image in the project. So to add it to the project, we're going to right click and select copy image. Then we're going to go to Gimp and open up that grid file that we downloaded from a previous lesson and then with their keyboard shortcut, we can use Commander control in the letter V to paste that file in, or you can go up to edit and select paste from here. Now, if we go to another image now, when it's like this surf border and we copied this image to the clipboard, go to our document again, we can see that this layer here has been added, and it's currently selected. Now, when I go ahead and paste that in, we get a layer that says floating selection so before becomes an actual later, we need to right click on this layer and select to new layer, and then it will add that file to a new layer, or I'm gonna go ahead and undo that with command or control and the letter Z. If we go to our marquee tool or a rectangle select tool, select it and then just click anywhere on her document. It will automatically add that to the layer. The only problem is it's adding it to the layer where we had Michael Jordan, so we don't want to do that either. So in this case, what I'm gonna do is create a new layer. Let's go ahead and name it surfer. I'm going to make it transparency. Click okay, and then I'm going to paste it in and then click. And then it's added to that layer by itself. So those are a couple of different ways to copy and paste images into your gimp document. The other thing you want to do once you add all your different layers of new images is you want to go in and double click to rename the layers according to the image itself, so we want to give it a description of what that layer is. This is for us and for the Web developer to help us better organize our images. So we know which one is which So if you go to new, go ahead and add the layer name here. If you don't do it that way, just double click and then just give that layer in name based on the description for that image. The other thing we want to do is we want to use P and G files for the logos. So under tools, we can go to color and select transparent. And this is going to give us a list of all the PNG files for that particular logo. And that makes it much easier versus trying to figure out which one of these is PNG out of all of these files, because most of these are going to be a J peg file, and you're gonna have to click on all of them to find out which ones are transparent and which ones are the ones that you want to use. Like this one. Here is a J Peg file, and it's not something that we can use for this particular project anyways. So those air some tips on using Google images and adding those images to your gim file. So go ahead and and all the images and then in the next tutorial will go ahead and retouch . The image is 19. Retouch Images: Hello and welcome back. Okay, so you should have all your image layers placed in your grid documents, and you should have all the layers named appropriately. We just now need to organize their layers a little bit so that similar content is grouped together. So I have all my logos together here at the top, then my shoes and then all the images with people. You can rearrange layers by clicking and dragging them into a new location. War. You can use the up or down arrow keys to move them that way. Let's go ahead and turn off all the layers except for two. And that would be the Nike logo and our white background. So we're first going to Reese Ice logos and put him into position, appear at the top. Then we're going to remove the background from our products and the images with people. So to resize. The first thing we need to do is we need to change the boundary of the layer. If you go up to view and select show layer boundary, we can see the boundary for this layer is the actual size of the document. That's not what we want We want this layer boundary to snap to the size of the actual content of the layer, which would be in this area right here. So we need to do this first before we re scale. Otherwise, the scaling will be much more than we want because it's going to be scaling based on the size of the document and not the size of the actual logo. So we're gonna go up to layer crop the content, and now the layer boundary is resized to the size of the logo itself and not the document. Okay, to make this logo smaller, because it's way too big, we need to use our scale tool, which is located right here. And the keyboard shortcut is Shift Plus s. Now we just need to click on our logo, make sure that it's selected in the layers panel, and then you're going to get this boundary box around that logo with some squares. Would you can click on to click and drag in or out to resize. The other thing we can do is we can actually type in the actual with or the height, and we can link it so that if you type in one the height or the with will change automatically in order to keep them in proportion. So if you have this turned off right here, this means that the width and the height are not linked. So if I resize the with 2 50 the height doesn't change and it stays at 418 pixels tall and it distorts the logo. That's not what we want. So we're gonna turn that on, and we're gonna go ahead and type in 75 for the width click tab. And now the height is 27 which keeps that logo in proportion. We're gonna click scale, grab your move tool with the letter V. Make sure you have pick earlier or guide selected so that when you click on it, you're actually selecting that layer and then just move it up to the top. All right, let's do the same for the Converse logo this time. We need to remove the text from the logo because I don't want that as part of the logo. So we're gonna grab our rectangle tool right here or with the letter m. Draw a box around it, Then click your delete key or your backspace key, and then we need to de select with command or control and the letter D. All right, let's not forget to change Delayer boundary. We're going to go upto layer, select crop the content. Grab your scale tool with shift plus s. And this time we're going to do 50 for the with click scale. Back to the move tool. Move it up. I'm gonna actually make that one the last one. So I'm gonna put that over there, and I'm gonna move this one down an air Jordan is going to be second. So let's grab that one Lear crop to content scale tool. And we're gonna do 54 this one in the last one as well. Okay, let's grab our rectangle tool again with the letter M. And we're going to delete the text command or control and letter D to de Select Crop, the content scale tool and 50 again. All right, the logos are done. Let's go ahead and turn those off. For now. This is probably a good time to save your files. So hit command or control and the letter s and I'm gonna work on my Nike shoes first, So I'm gonna go ahead and move that layer up and Converse will be third. All right, let's still like the Nike shoe layer and let's turn it on. Kayla, zoom in with the zoom tool now. What we want to do is we want a pure white background. Right now, it's a darker shade of white or gray. So what we need to do is we need to select the background as well as the shadow, because I want to get rid of the shadow and we're going to need to use one of our selection tools in order to do that. And then we're going to use a layer mask in order to remove that background. So for this edit, I'm gonna grab my fuzzy select tool, and I'm going to set my threshold to let's do 20 for the threshold and then click on the background to make your selection. So right now it's pretty much selected everything in the background and nothing else. If I hit my delete key, the background is removed, but that's not what we want to do. So we need to add to our selection because it's not adding the shadow as part of the selection so we can use another one of our selection tools to do that. But my preferred method is to use quick mask mode, which is located right down here via this icon and then the keyboard shortcut to toggle the quick mask mode. Honor off is the letter Q. So once you turn it on, you're gonna get a red mask over the shoe in the shadows. So right now, that's the area that's not selected. So let's go ahead and zoom in on the shoe here so we can see the shadow a little bit better . And then what we're gonna do is we're gonna grab our brush tool in order to add or remove from the selection. So we want our foreground and background colors to be white and black. I'm just gonna add a color wrote quick, because I want to show you how easy it is to change the colors for the foreground and the background. And that's simply by pressing the letter D on your keyboard, and it will change it to black and white. Okay, so remember, we have a red layer mask over the area that is not selected. So the background is selected and we want to remove from the selection. So in this case, white will remove from the selection or it will remove the red mask. And then when you toggle out of this quick mask mode, you will have just the background selected and not the shadow or the shoes. So we're gonna grab that brush, and we're going to size it accordingly. And then you can adjust the hardness between 25 75 depending on the image. And right now I'm just going to leave the hardness set to 75 because again, I'm not going to sit here and try and make this perfect, because the client may give me a different image later on. So I'm just gonna go in here and remove the red mask from the areas that I don't want it that way. It's not part of the selection. Then I can use my space Barkey to navigate to other parts of the image as well, just to see if I need to find Tune my selection. That looks pretty good. So I'm gonna hit the letter Q. And then I'm gonna use my zoom tool and hold down the control key where the command key so that I can zoom out. You can also make that selection right here. Zoom in, zoom out and you can see the keyboard shortcut is right here. It's controlled because I'm on a PC, and if you're on a Mac, it's going to be command, All right, so right now we have everything selected that we want to remove the shadows and the background. But what we need to do is we need to invert the selection or reverse the selection so that the shoe is selected. And then when we enter layer, mask the background and the shadow will be removed. So let's go up to select invert And now just the shoe is selected, and if I cut it out, you can see that the shoes now gone. So let's go over to our layer panel and select layer mask. You want to make sure you have selection selected and click add, and now the shadow and the background are gone. Okay, lets de select with Commander Control and the letter D. And if you take a look at your layer mask right here, you can see that it is black and white. So black removes white ants and you can see the outline of the shoe right there in white. And if we didn't invert our selection than it would have done just the opposite, All right, Now that we've done that shoe, we now need to do the same edit to the other two shoes. Okay, so what we're gonna do is exactly the same steps we did for the Nike shoe. So instead of me sitting here retouching these images and you watching me do the same thing , I'm gonna let you go ahead and do these on your own. So go ahead and edit your other two shoes, and I'm going to let you in on a little secret. We're going to use the exact same steps. Four are images as well, except for maybe the selection tool. Because although the fuzzy select tool would probably work, we would just have to keep working on increasing the threshold in order to select more of the image. So instead, what I'm going to do is I'm going to use a different selection tool to start off with, and that's going to be my free select tool, so I'm just going to click and drag and trace around the main subject here, which is Michael Jordan. Then, once we have our selection, we can go into quick mask mode to fine tune our selection. So to complete the selection with the free selectable, we had to go back to the exact point where we started and hover over that area until we get this little circle. Once you do that, you can release your mouse button and then hit the enter a return key, and then you'll get your selection from that tool. Now we can go into quick mask mode by pressing the letter Q and then using our brush to add or remove to the selection as needed. So I'm gonna go ahead and do this. But I'm going to fast forward this part of the video so you don't have to watch this in slow motion because there's not much more that I can add that I haven't already told you already. The only thing that I would recommend is keeping your hand close to the Letter X, and the reason why is if you press the letter X key, it will switch the foreground and background colors accordingly. And then you can easily select that key if you go outside of the line where you need to go . So if I go right in here, maybe I'm in his face and his arm here, I compress the letter X and then I can quickly remove the mask where it shouldn't be. And they press X again to continue adding that layer mask as needed. All right, so I'm gonna go ahead and fast forward while I go ahead and finish this. Okay, Now that I have my selection refined, I'm gonna press the letter Q to get out of quick mask mode. Now, this time I don't need to invert the selection because the subject is selected. So I just need to come over and select my layer mask, make your selection is selected and click Add right here and that removes the background. How cool is that? I love it now. I did go fairly quickly through that particular edit, and I may need to go through and find tune it later on. If the client approves this particular image, you can see that I didn't follow along the edges very well. And I left some of the background in here as well. And that's why we use layer masks because it allows us to work non destructively. And then I can just select my layer mask to go in and refine that edit. Okay, so I'm just gonna leave it like that for now. Now, your assignment is to go ahead and finish the other two images as well, just using the same techniques. Use which ever selection tool you think will work best for that particular image. Used the quick mask mode to refine your selection at your layer mask. And then you'll be all set toe work on the next tutorial which will be working on the first part of our header. 20. Header Part 1: Hello and welcome back. All right, so for this tutorial, we're going to start working on our header of our website, and we're going to organize and set up our logos and place them exactly where they need to be. So we have pixel perfect placement. We're gonna use our alignment tool we're gonna and some shapes from strokes, etcetera. And then in the next tutorial, we're gonna go ahead and wrap up the header part of the design and the reason why I'm breaking it up because it's going to get a little long because I want explaining a lot of things along the way to give you some pro tips for designing the header of your websites. So let's go ahead and get started. I'm gonna go ahead and zoom, and so I can see my logo is a little bit better. And right now I have the grids turned off, so I'm gonna go ahead and turn those back on. But I also want to turn on my guides that are included with this grid template. So to see them, you can go up to view and select show guides. Here's the keyboard shortcut for that which is Commander Control and the semicolon key. Once you turn that on, you're gonna see all your guides, and they are aligned with the columns as well. So this first guideline right here is left of the column. And then we have another guideline to the right of the column as well, which is an equal amount of space between here and here. And this guideline basically divides the space between the first and the second column evenly and same thing with the second and 1/3. We have another guideline that divides that etcetera. So this just equally spaces out all the columns so we can use the guidelines as a guide to align our elements in a way so that everything is lined up perfectly and has symmetry. So what we want to do is we want to place our logos directly in the center of the columns from left to right. But I also want to define the height of the header space. And then we're going to align those logos between the top and the bottom of the height of the header as well. So this is going to make a lot more sense as we go throughout this tutorial and we start aligning everything properly. So let's go ahead and define the height of the header first. So what I want to do is I want to make it larger than the width of this column here. So we have some space between the top and the bottom of the logos as well. So we first have to determine what the with is for this particular column. Well, we can sit here and we can count the pixels, but we actually have a measure tool, which is located right here, that will give us the measurement or the distance between the left and the right side of the column. So if we grab this tool and then click on this second guide right here and then drag to the second guide, once we release our mouse button, it's going to add the point of that measurement tool right there. And then if we take a look down here, we can see the number of pixels or the width of that column, which is 90 pixels. So the height needs to be more than 90 pixels, so we have to decide how many pixels of space do we want at the top and the bottom of the logos? So let's say 20 pixels for the top and 20 pixels for the bottom, so that's 40 pixels total. We need to add that to the with. So that's 130 pixels for the height of our header. So we can go ahead and hit the escape key on keyboard to get rid of that measurement. And then we can go ahead and grab our move tool with the letter V. And then we just need to add a guide down here at 130 pixels. But it's kind of hard to see unless you zoom in or try and count the number of bars here to find 1 30 But we have a little tool down here again that will show us exactly where the placement of that guide is as we drag it out, said Toe, add a guide. We need to click on the ruler up here at the top and dragged down and at the bottom there. If you take a look down there, it says add guide 1 11 So we're adding that guide at ah 111 pixels down. We want 1 30 So we just continue going down until we hit 1 30 Okay, so that's the height of our header. And now we can go ahead and line. Are Nike logo left to right and top to bottom. So in order to align our logo in this space, we need to create a selection and then use our alignment tool to align it within that selection. So let's grab our rectangle select tool and draw out a selection in the space. Then we can grab our alignment tool, which is located right here and then in the tool options. We need to make sure that we have relative to and have selection selected. We also want to make sure our logo was selected, and now we need to define the object that needs to be aligned. And we can do that by clicking on our logo. Once we do, you're gonna see these four little squares in each corner and that lets give No, this is the object or the element that needs to be aligned within the selection. So we come back to our two options and we select a line center of target and now it's been perfectly aligned from the left and the right side. So it's centered in the middle of the column, and then we need to do the same for the height. So a lying middle of target and now it's perfectly aligned in the center of the selection. Let's go ahead and de select with Commander Control and the letter D. Okay, we need to do the same thing for our other three logos as well. But before we do that, I want to go ahead and add a circle for each one of the logos. So the first thing we need to do before we create our shape is we need to create a new layer. So click on this icon here. Let's name it, Circle one, and let's make sure we have transparency selected and click OK, now we can grab our Ellipse tool, make sure you have fixed and aspect ratio selected, and then just click and drag out a shape. And then we need to make it 90 pixels wide by 90 pixels, tallest like it's your tacky and now that you have your shape, we can fill that in with a white color so changed the foreground a white, grab your bucket, fill tool and then click on the inside. I also want to add a stroke around that shape, so we're going to go up to edit and select stroke selection. Make sure you have solid color selected anti alias ing and then for the line with We want one. We want to change the black back to the foreground color and then click stroke. OK, so we now have a stroke around our shape, and we need to de select with Commander Control and the letter D. Let's go ahead and grab that shape with our move tool and move it up here to the second column. We also want to change the layer boundary for this circle because right now it's the size of our document itself. So if I come over here, I actually need a zoom all the way out. We can see the layer boundary, which is this yellow and black dotted line, and we need to collapse that to the size of our circle. So let's go to layer crop the content and now the layer boundary has changed. I'm gonna go ahead and hide that Now we need to align this particular shape directly in the center of this column so I can use my arrow keys to move it left, right top or down one pixel at a time to align it directly left, right. But now we need to use our other technique for aligning by creating a selection in this area with our selection tool. And then we can grab our alignment tool. Click on that shape, make sure relative to selection is still selected and that your layer is selected and then a line middle off target. Okay, these select commander control in the letter D. Now we need to move that particular layer below the Air Jordan logo, and now we need to take this logo and line it directly in the center of our circle. So let's go ahead and grab our rectangle selection to again and make a selection. And then, with their alignment tool, you want to click on the logo and then align middle and center area. Let's go ahead and add a circle for our other two logos as well and a line each one of the elements within their space. So let's grab our circle layer. And instead of doing that from scratch, we can actually duplicate the layer by clicking on this icon here. Let's call it circled to, and we're gonna move that below the Hurley logo. Let's grab it with our move tool and move it over. Stupid Kate, This one. Okay, let's start off with aligning the Hurley logo, and then we'll do each layer after that. So selection, tool, alignment, tool, Click on the logo and then align it. Okay, so since we already have that area selected, all we have to do is grab our circle to layer, and then with our limit tool, click on the circle and then we can align that one. Kayla's do the alignment for the last layers de select. Let's go ahead and use our zoom tool to zoom out just to take a better look at the way everything is aligned. And that's looking pretty good. Go ahead, turn off the grid layer and the first part of our header is done. All right, so we're gonna go ahead and move on to the next tutorial, which is going to include adding the second part of our header, which is the second Dairy navigation over here to the right. And I'm gonna also give you some additional pro tips on finding topography or specific types of fonts being used in websites. Because maybe your client purchased or used a specific type of font in their website and because you're redesigning it, they want to use the same font, but they don't know the name of the fund. Well, I'm gonna show you exactly where to find the name of that font. So if you're ready, let's go ahead and get started on that. 21. Get Organized: hello and welcome back all right before we get started on the mega menu. Like I mentioned in the last lesson, I first want to help you get organized with your Web design files, and there's a couple of reasons why you want to get organized. The first is for your own benefit. As we work on this project, we're going to be adding many more layers to the layers we already have. And if you need to go back and make adjustments to something, you're going to spend a lot of time scrolling through trying to find that specifically er so. What you can do is you can organize the layers into group layers to make it easier to find what you need. The other reason why you want to get organized is this file most likely will go out to a Web developer to be coated if you're not doing it yourself so either you're going to send it directly to a Web developer. Or maybe you were hired by an agency that's going to outsource it to a Web developer. In either case, they're going to send this file back to you and say that it needs to be organized and grouped layers. And if that ever happens to you because they weren't organized, you're going to look unprofessional. And chances are you may not work with that particular group of people again. So let me go ahead and show you how to organize all these layers into group layers so you can make it much easier for yourself and toe. Look more professional when you work with other people on your team or if you're hired by an agency. So one of the things we need to do, like we did with some of our layers previously is we need to name the layers appropriately based on what that layer is all about. So right here we have primary box for our navigation box, which is fine, but our shopping cart. Although it has shopping cart in it, it's simpler just to do two words. Shopping cart versus what was there before. And then here we can rename this layer primary navigation menu, and then this one would be our secondary navigation menu. And what I recommend doing is to get into the habit of renaming and grouping your layers as you're working, not at the end of the project because if you wait till the end of the project, it's gonna take you a lot more time to go through and find all the different layers that are supposed to be together and group together. So again, it's much better and faster to do it as you're working versus doing it at the end. So let's click on our top layer right click and Select New Layer Group. So here's our group player and we're going to name this primary navigation. And then we're going to drag all the layers that are part of the primary navigation so that they're group together. We're gonna click and drag up once we release that layer will be indented toe the right, and that lets you know that that particular layer is in this group layer. So if we close this particular group player, that layer will disappear. So we also have our primary navigation menu. I'm gonna put that rate appear at the top. Okay, so that's it for the primary navigation. Let's go ahead and close that, and we're going to create a new layer group above our shopping cart. He and was called the secondary navigation, and we're gonna put in there, of course, the shopping cart and the secondary navigation menu. All right, now we have a bunch of logo, so let's go ahead and add a new layer group for the logos, and let's put each one of those inside. Now, the other thing you can do to help you further organize your layers is you can put group layers in other grouped layers. So if we select our Air Jordan layer right click and create a new layer group, it will be added above that. And then we can put the Air Jordan logo and circle one inside of there. And then we can rename this group here Jordan logo. So let's do that for the other two logos as well. And again, this just keeps everything together that is similar to other layers. Now that we have all those layers group together in three groups layers, it's not as hard to navigate and find what we need. We also need to do the same thing with the shoes, but we'll group those together as we get to those parts of the project. For now, we're just gonna go ahead and get started on the mega menu in the next tutorial. So if you're ready for that, well, let's do it 22. Header Part 2: Hello and welcome back. All right, so in this lesson, we are going to work on our primary and secondary navigation. But first, I want to quickly share with you a tool you can use to find specific fonts on live websites . This comes in handy if your client has a specific font they want to use either from their existing website or somebody else's website, but they don't know the name of the fund. So this tool, it's a Web developers tool and it's free. And it's already installed on most modern browsers, like chrome and Firefox. I prefer to use chrome. So we're gonna go ahead and go to chrome. And then if we right click on me piece of text, we then select inspect. And then we get these two columns down here at the bottom of the browser, and then we just need to navigate and find fun family, which is right here. And then you're going to see a list of all the fonts being used for that one piece of text . Now, why is there so many? Well, the 1st 5 family right here, one Nike currency is the primary font, and the one that should load in your browser if it's not available in your browser, because maybe you're using an older browser and it's not supported. Then it's going to load the second font, which is Trade Gothic. If that one's not available, that is going to load Helvetica, and then it's going to try Aereo, and that's why there's more than one. So the one we want to use and our Web design if the client still wants to use it, is one Nike currency. Unfortunately, we don't have access to this funt, and then Trade. Gothic is a premium farm, which requires a purchase, and then the last two are free fonts. But they look completely different from these two funds here, so we can either try and access that find from our client if they still have it available. Or we can try and find a similar Funt, and we can go to fonts dot google dot com to try and find a fund that is similar to the ones being used on the existing website. Now all these funds are free. There's other places where you can download free fonts as well, so it's just a matter of doing some research and trying to find a funt that is similar to the one they want to use if you can't get the actual font that they want to use. Unless, of course, they're willing to purchase that particular fund. So for this particular Web design, I'm going to use a completely different font. And I'm going to use a font called Oswald for the primary navigation and for titles and then railway for the secondary navigation and some other stuff as well. So you can download these funds from here. If you want to use the exact same fonts, it doesn't matter. You can use any font that you want to use, so let's go ahead and get started on the secondary navigation first by typing in, log in. And then we're going to add five spaces to add separation, type out help and then five more spaces. And that's because we're going to add a shopping cart icon to the right of that as well. I also need to change by font and the size, so I just double click inside to select the text, and then I just need to type out the name of the font that I want to use here, which is actually railway. And then I'm going to type in 16 for the font size. Once I clicked Tab, it's going to resize that content for me. Let's go ahead and move this up to the top. For now, let's grab our move tool. I need a zoom in just a little bit Here. Let's also turn on our guides with Commander Control and the son Michael and Key so we can see where to place it. So I'm just gonna move it up here to the right side of this last column. If we turn on the grid, we can actually see it a little better. Now we just need to find a shopping cart icon, and we're going to do a quick Google search for a free shopping cart icon. Now, just like with images, these may or may not be free, and they may or may not be copyrighted. If they have a watermark like this one here, well, we pretty much know that's going to be a copyrighted Icahn. So we either need to purchase the icon and then build our clients for that fee, or we can create our own in Gimp or we can try and find a free icon. This icon right here is free, but it has what is known as an ATTRIBUTION required to use it. So what is an attribution and attribution is a set of code that he had to put on your website? That is a link back to this Web site in particular, So it says right here, free license with attribution. So if you want to use it, you have to add a link back to the website. That's typically not something I want to do. I want to find a 100% free icon, but for now, we're just going to download this particular icon. Doesn't really matter any icon you want to use. It's just for practice. So let's go ahead and navigate to the download page. We're going to select PNG 16 for the size, and then you can see right here the code that you need to add to the website for an attribution again. This is not something I recommend doing. So that's why you want to find a 100% free icon. Let's go ahead and download this one for now and then to add it to our website design right here, I'm just going to click and drag it over my document. Once I release, it's going to be added in a new layer. So that's just another cool way of adding additional files to your document. Just going to zoom in a little bit so I can grab this icon and put it into place. All right, let's go ahead and grab our rectangle tools. We can align everything exactly where they should be. I'm going to go over the gutter area and this column here to align this layer directly in the center, top to bottom, right, the left to make sure the layer is selected. A swell. Grab your alignment tool. Now let's make sure we click on our layer here as well, so that gimp knows that's the layer that we want to ah, line in the space. Make sure you have selection selected and then a line center of target and align middle of target. Let's go ahead and de select and do the same thing for our shopping cart. All right, so the last part is adding our primary navigation. Let's go ahead and zoom out a little bit here. I'm gonna go ahead and hide my guys with Commander Control and the Semi colon, then back to the text tool. We're gonna type out everything in all caps gonna do men, and then we're going to do five spaces. And again, this gives us some separation between each line item. We're gonna hold down our shift key and then use our left arrow key and move over five spaces so we can select all five spaces so we can copy that and paste it to the end of each item. So the keyboard for cut is command or control and see. And then, if I hit my right arrow key, I go to the end, and I can continue typing and then command or control and V to paste those five spaces. Okay, I'm gonna go ahead and finish up the rest of the menu items. I'm going to select all with Commander Control and the letter A I'm going to change the font toe Oswald and 24 for the size. Hurry. Let's grab our move, tool, and let's just move it over here to the top, and then we're going to use our alignment tools again to align it directly in the center of our document. So let's start over here on the left side all the way to the right. Blame it, tool, click on it and then a line center and middle of target. Now, the last thing I want to do is I want to actually move this up a little bit higher because it's down too far. And if we turn on our guides with Commander Control and the semi colon, we can see there's too much space at the top and the icons we need to get it in a little bit closer. So this first guide is at 1 30 I think I'm going to do a second guide at 1 80 So remember to look at the bottom of your interface right now in order to get the guide at 1 80 All right, let's go ahead and turn off our grid. That's gonna make it easier to select this particular layer and let's move it up. So what we're gonna do is we're going to redo that alignment that we just did so we can place it directly in the center, talked about him and left right of this new size that we created for the menu. All right, let's go ahead and grab our rectangle tools so we can realign our primary navigation, got the limit tool, click on the menu and then realign a rate the select. Now, before we move onto the next part of this project, I think there's a couple things we can do to improve this header design. What I want to do is I want to grab these logos here and want to lower the opacity so that they're not as dark as they are right now. Because this is the primary logo. These air secondary and I don't want these logos competing with this one. And we can simply do that by lowering the opacity of these three layers. And I'm going to drop them down, too. 30 for the opacity on all three. Now, the last thing I want to do is I want to add a line above and below the primary navigation . This is gonna help give it some separation from the top hurt of the header. So to do that, we're gonna go up to the top here, and we are going to create a new layer. Let's call it primary box. We're gonna keep it set to transparency for the fill click. OK, then we're going to grab our rectangle tool and we need to turn on our guides as well. So let's make a selection here, go up to edit select stroke selection and then all the settings that we created for the circles should be the same. And we're going to use those again. So just click stroke. Let's de select Commander Control in the letter D and Haider guides And now we have that line above and below it. Okay, I think we are ready to move on to the next part of the project, which is going to be the mega menu of this web design. 23. Mega Menu: Hello and welcome back. All right, so the next step of our header is creating a mega menu so that our Web developer knows that these links for the navigation are not just standard links but links that link to a mega menu. So if we go back to that Nike website and I hover over one of the menu items, we can see the huge mega menu of additional links that show all the different products in the different categories. The other thing we have is this little black line right here underneath this particular category, and we don't see it anywhere else until we navigate to those other categories. So this is known as a hover state, and the other thing you'll notice is there's a hand there, and when I move away from it, it changes to an arrow, so that hand is part of the hover state as well. So when it comes to your hover state, there's a lot of different things you can do. Besides just adding a line at the bottom, you could add it at the top. You could add a box. You can change the color of the text or the background or both. There's a lot of different things you can do, regardless of what you decide on for your Web design. You need to show it in that Web design so that the Web developer knows what's going to happen when you hover over a certain area. So in this tutorial, we're going to create our hover states and create our mega menu. Let's go ahead and zoom into our primary navigation, and the first thing I want to work on is that line underneath the category that were hovering over. I'm gonna turn out of my guides with Commander Control and the semi Colon, and let's drag out a guide to the end and the beginning of this word here. We're then going to grab our selection tool with the letter M. Let's draw out a selection between those two guides and let's like our primary box. All right, use your keyboards were cut to copy that particular area with commander control in the letter C and then pace it with command or control and the letter V come back to your layers because we have a floating selection, we need to move it to its own layer so we can do that by right clicking and select to new layer. Kate. Let's rename this hover line, and this actually needs to come out of this group players, or we're gonna pull that all the way out. And let's create a new layer group called Hover State and let's put her hover line inside. Now what I want to do is I want to make that line a little darker. I'm gonna hide my guides here with Commander Control and Semi Colon. Let's grab our bucket fill tool. Make sure you have black selected for the foreground and then click on that line to make it pure black. All right, let's do a Google search for our hand icon. Lets type in free hover hand icons. Click on this PNG button to kneel down your searches. This one right here looks like it will work. We're going to right click Select copy Image and then Commander Control and V to paste it in. And let's right. Click on the layer and select a new layer. All right, definitely way too big. All right, let's go ahead and zoom out with command or control and the zero key and Let's grab our scale tool was Shift plus s and let's move this down a little bit so we can see it a little better. And let's grab a corner and drop it down to, let's say, 91. For now, we may need to go smaller. Let's take a look by zooming in. It's actually a little bit too big still right. So let's scale it down again. If you grab the center of this scale box right here, you can move it into position. So I'm just gonna move it right about there. Click scale. And the other thing I want to do is I want to remove this arrow because we don't need that . Gonna grab the rectangle tool with the letter m select it and then hit your backspace or delete key. It's not a very high quality icon, but it will work for now. If we're going to use a custom icons like this, I would spend a little more time on finding a higher quality icon. So to make this a little easier, we're gonna go back to the Nike website and we're going to copy the content of each column and create a new layer for each column in our Web design project. So let's go to the first column, select all Commander Control and see to copy and then what? Their text tool we can paste with Commander Control in the letter V. We're going to select all and let's resize it to 16 pixels for the font size, and we're going to use railway for the Funt. Let's actually go bold. Since this first column is bold on their site will go ahead and match that for now. I'm gonna select my move tool so I can get out of there and just zoom in a little bit. All right, let's go back in and make some other adjustments to our text. Right now. The text is too close together, and it's making it harder to read, so I want to add some space between each of the lines. The other thing I want to do is increase the size, and I think I want to change the style of the font as well to something with a heavier weight. I'm gonna go with ultra bold and then toe add the extra space between each line. We're going to increase the baseline of the selected text, so I think 14 will work out pretty good. Looks a lot easier to read, so let's go with that. Go ahead and zoom out here and let's put this first column over here to the right. Actually, let's pull it out of the hover State because it's not part of the hover State. And let's go ahead and move that we're here to the left. All right, let's copy the next column and basically the same thing this time. I'm not gonna go with ultra Bold. I'm gonna go with medium same size, those 16 pixels and then 16 again for the baseline. Now, the shoes title should be a little bit darker since it is a title. So let's change that to Ultra Bold. So we just needed to do this three more times. I'm gonna go ahead and speed up this video tutorial so you don't have to watch this in slow motion since I've already done it twice. And then you can go ahead and do this yourself as well. All right. What? They're grids turned on. I'm gonna go ahead and move this over to the right column here and then this one over here . I'm gonna move over to the left column, soda lines up with our Nike logo over here. But I need to change it to the pick a layer or guide option. Otherwise, I'm gonna continue moving this layer here. All right, We're gonna create a new layer group. Let's call it mega Menu text, and we're gonna put each one of these columns inside. I'm also going to organize my layer so that they are in the proper order and let's rename them. So we have new releases, shoes and clothing. All right, let's turn off the guides. All right, let's align all our columns so that they are all aligned across the top so we can grab our rectangle tool to create a selection to give us a starting point. And then we just need to grab each one of the columns individually with our alignment tool , and we need to make sure that we select it now. The problem is, we are selecting the entire group layer and not the layer that we clicked on. So we're going to need to move these outside of the group layer so we can align them and then we can move them back in. And then we're going to select a line to top edge of target. And then we're going to do that for the other columns is while we need to make sure that we select that layer as well with the alignment tool. Okay, lets de select and move everything back in. All right, I'm gonna grab the entire group of text, and I'm going to move it down. And before you try to move it, make sure you have move the active layer selected, and then click on it and then use your arrow keys to move it down. Okay, so the last thing we need to do is add some additional space between the columns. We have too much here and not enough here, So we're gonna go ahead and turn on our grid and Spacey's out a little bit better. Now before we do that, let's go ahead and zoom in and add a guide to the top of our columns here. So we know exactly where it needs to go to line up and let's elect the shop by trends layer . But they're moved tool and again, we need to make sure move active layer is selected so we can select that layer and not something else. I'm gonna move it right here to this grid column right here and then I'm just going to use my arrow keys to move it into place. Okay, let's go ahead and align the mega menu directly in the center. All right, so everything is looking much better now. So the last thing I want to do is add another line down here to show that that's the end of the mega menu. Let's go into our primary navigation and select our primary box and duplicated endless Rename it mega menu. Bottom line, Move this up here. Let's grab our move tool, and we're going to move this line down here to the bottom right about there should be good . What I want to do is get rid of this top line here. We don't need to, so let's go back to the rectangle tool with the letter M, select it and then hit your delete or backspace key. All right, let's make sure that we have an even amount of space between the bottom of this line and the top of this line for our mega menu text. Let's select it and use our selection tool again to make a selection for the height. Perfect. All right, let's create a new group, layer. Actually, not inside of that one. This name, this mega menu. And we're going to put this group layer inside and the bottom line as well as our hover state. We also need to put these particular group layers in the proper order as well. We should have the logos at the top, followed by primary secondary, and then make a menu. Okay, now that we're done with our mega menu, we can begin working on the next part of our website. But before we do that in the next tutorial, I want to go over some minor adjustments that we should make for our header before we begin on the hero section. So we're gonna cover that in the next tutorial. 24. Minor Adjustments: Hello and welcome back. All right, we are almost done with our header. But before we move on to the hero section, I just want to talk a little bit more about the header and the current design we have, because I think it can be done much better than what we currently have. So as I'm designing, I may realize that the current design that I have is not very good and I can make it better . For example, I believe the primary navigation should be the most prominent part of our header out of these three elements here. But right now we have the logos much larger than the primary navigation, and our eyes are kind of bouncing back and forth between these two. And then we have something over here and just keep in mind that the mega menu would be not visible until we hovered over the primary navigation. So it's really busy right now, and I think we need to fix it so it's not as busy and put the prominence back on the primary. Navigation and weaken simply do that by grabbing our logos and making them smaller. So let's go ahead and do that Let's grab our scale to with Shift Plus s and let's just grab a corner and make it smaller. So right there we can see that definitely puts the focus back on the primary navigation. So this is the first thing that we see than her eyes kind of gravitate over here, and then we can see that there's something over here, so it's not as busy as it was before. The other thing we need to do real quick is we need to realign the logos. So let's grab the logos and put it back into place along the left side of the grid. And we're going to grab our rectangle tool with the letter M and a line top to bottom. Okay, so that fixes that part of the design. Now the other thing I think we need to do is we need to make the fonts a little bit larger , and we need add some additional space now. The next thing I think we can do to improve the overall design of our header is to increase the amount of space between the words and increase the font size and maybe the style of the fonts as well to make them a little bit more bold than they currently are, and that's going to help it become much more prominent. And our eyes are going to gravitate to that section first, more so than it is now. So the first thing we're going to do is grab our text tool, and we're going to select thes five spaces in between. The words were going to copy them, and then we're going to paste them in on the end of each of the words so we can increase the amount of space between each word. All right, let's go ahead and realign to center. So let's grab our rectangle tool with the letter M. We're gonna make our selection, and we actually need to bring this primary navigation menu layer out of the group player so that we can select it with our alignment tool, and then we can align center of target. Let's go ahead and put this back in. Actually, I think we should have increased the font size first, but that's all right. Let's go ahead and select all and increase the font size to 28. And let's also select Oswald bold to increase the style or the density of that font. All right, so we're gonna have to go ahead and realign again. All right, let's go ahead and increase the amount of space between these two lines here, we're gonna grab our primary box. We need to go up to layer and select crop to content so that the layer boundary snaps to the lines themselves and not the entire document. Now we're going to grab our scale tool with Shift Plus s, and then we can just grab either the top of the bottom and just pull it down or bring it up to increase the amount of space something go ahead and select 78 for the height. And now we just need to align to the center of the top and the bottom of our box. So we're gonna pull the primary navigation menu out again. Grab your rectangle tool, make a selection, make sure you click on it with the alignment tool and then a line middle of target. Perfect Commander Control Andy to de select. Let's put this back in. And I think that is 10 times better than it was before. Our primary navigation is now the most prominent. It stands out the most. Our eyes gravitate to that. First, the header is not as busy as it was before. We still recognize that there's some logo's over here and these air possibly links to take us somewhere else. And we have a secondary navigation here that is much smaller than the primary navigation and logos. So we basically have our eyes going from here to here to here and then back to our primary navigation, which is where we want them to go, because that's where they're going to find the products that they are searching for. Now we're gonna have one other problem now that we've adjusted the size of the primary navigation and the primary box, and that's when we turn on our mega menu. Everything has shifted. We need and some additional space for our columns here because it's too tight and our hover states now need to be moved over here to this category as well. So let's go ahead and make these adjustments and we'll be all done and ready to move on to our hero section. So the first thing I want to do is work on the hover state. So let's find the hover state and we have our hand here. I also need to change the name of this too hover icon, and let's go ahead and move that over. I also have the hover line that I need to move over as well, and I actually need to make it a little larger. So I'm gonna grab my scale tool with Shift Plus s. And I'm just going to slide this over to the right to match the with of our word. All right, now that we have that, let's go ahead and zoom back out and we're going to move this bottom line down just a little bit so we can have a little bit more room for our columns to fit into. So let's grab our mega menu bottom line grammar move tool and just move it down a little bit. Let's grab our mega menu text grouped layer the letter M for our rectangle tool so we can align top to bottom, and we also had to pull this group layer out of the other group layer so that we can select it with our alignment tool allying middle of target and Let's put it back inside the mega menu de Select. And now let's go ahead and add our background to the mega menu. So we're gonna grab our rectangle tool again and draw out a selection. Let's change the foreground a white, and we're going to grab our bucket fill tool. We also need to create a new layer to put it into, Let's call it background, make a menu, and then we can fill it in with white. That's de select. And now let's go ahead and move this into the proper group layer, which will be in our mega menu at the bottom. Perfect. All right now, the other thing is, when you submit this finished Web design to the Web developer, you do not wanna have the mega menu turned on. Instead, you wanna have it turned off. As they're working through all the different groups, layers and layers, they will come across the mega men. You will notice that it's turned off, they'll turn it on, and then they'll know that they have to code that for the primary navigation as well. The other thing is, if you take a look at Nike's website, you see all these different categories, and each one has its own unique mega menu, so you would have to create a mega menu for each category to represent all the different links for that particular category. Otherwise, the Web developer is only going to code the one mega menu four men. So we're not going to do that since you already know how to do it. If you want to practice, you can go ahead and do that for each category, and then I would give them different names as well. So we have mega menu men, and then I would do one for women, boys, girls, etcetera. And then I would turn that off for the Web developer, of course, but for yourself as well, because you don't want to have that on when you're working on your hero section, which is in this area right here. Okay, now that we've updated our header, it looks much better than it did before. So again, as I am working on different sections of my website, I don't have a problem going back and making adjustments to make the design better. If I see something that's not working with the overall design Okay, so next up, we're going to work on our hero session. So if you're ready to work on that, let's do it. 25. Hero: Hello and welcome back. All right, so now we're going to work on our heroes section. And as you know, from previous lessons, the hero section is one of the most important parts of what page we need to grab a person's interest and hopefully get them to do something before they either navigate to another page or before they decide to leave the site entirely. So when a person lands on a Web page, they first need to decide. Am I in the right place? And if so, is this site going to give me what I need? In this case, we're going to use imagery in a creative way in order to ensure that that person knows exactly where they are and to grab their interest because they may be interested in the new Air Jordan nine. So let's go ahead and create our hero section, and it's going to be really easy to do because we have three main parts of the hero section . We have our headline that includes the buy now button are Shoe and Michael Jordan dunking into the shoe. So first we need to define the height of the hero section and that hero section is going to change based on the device or the computer monitor size that that person is using. So what Web developers have to do nowadays to ensure that that hero section is visible in the most amount of devices is create what is known as response of code. But for us, we need to define the hero section, the height of it that will accommodate the largest amount of screen sizes. And depending on who you talk to, it could be anywhere from 700 day 100 pixels. So I like to keep my hero section and that area. And then I let the one developer No, that the site needs to be responsive, and the hero section needs to be available or visible and as many devices and screen sizes as possible. So let's go ahead and turn on our guides with command or control and the semi colon key, and we're going to drag out a guide down to 750 this will be the containment area for our hero section. So let's go ahead and grab our first set of shoes, which is the Nike shoes. It doesn't have to be the exact same shoes that I selected. This is just for practice. So go ahead, grab the shoe, grab your move tool and move it into position. We also need a grab Michael Jordan. So let's find him. And let's bring him in to this part of the Web page as well. Let's grab our text tool and turn off our guides. And let's create our content for the left side of our hero section. And in all capitals, we're gonna right the new enter to put it a J nine on the second line and let's make our text black. I also want to change the font to Oswald Bold and let's increase the font size to 100. Let's grab our move tool and let's go back to our Nike shoe so that we can rotate it so that our new text fits in that area a little bit better. I'm gonna turn on my guides and then to rotate the shoes. We're going to grab our rotate tool, which is right here, and I have the keyboard shortcut set up to control or command plus T. So your keyboard shortcut, maybe different, based on whether or not you updated that in the beginning of the course. Once you have that, go ahead and click on the shoes, and then you can either type in the angle that you want, or you can rotate it manually by clicking anywhere on the outside and then moving your mouse left or right. So I'm just gonna move it to something like that around 32 or 34 for the angle. When I click, rotate and then with the move tool, I can move it into position right about there. I may need to change that once I get everything else set up. So let's grab our textile with the letter T. Let's select all because what I want to do is I want to reduce the amount of space between these two lines. There's too much space. So to reduce the amount of space between the two lines, we can use this second option here, and we want to add a negative number to reduce that amount of space. So I'm going to type in minus 40 and that looks much better now, okay? And let's grab our rectangle tools so we can create our buy button first. Let's go ahead and create a new earlier. Let's call it by button and let's go ahead and turn on our grids because what I want to do is create a buy button that is three columns wide. And then let's grab our bucket. Fill tool, choose a color for your buy button and then go ahead and fill it in and de select. Okay, I'm gonna grab my zoom tool here so I can zoom in a little bit. Let's turn on our guide so we can align everything. Let's go ahead and move our content first, and we actually have to put that up a little bit. That's Graham are by button and move that up into position right about there. Now let's create the text for our buy button. Let's go back to White for the color of the text. And let's do by now 75 for the size of the text, and I'm gonna go to Let's use railway for the button. I'm going to use Railway ultra bold. It's a little bit too big, so we can use our scale tool to condense it to fit inside of the box. So with shift and s we will get our scale tool. Let's turn off the link so that we can just adjust the with of our content. So I'm just gonna would that in, like, so click scale. All right, let's go ahead and zoom out and let's fix Michael Jordan so he's not as big as he is right now, So let's go ahead and grab debt layer. Okay, so let's grab our scale tool and scale them down. So he's not as big, probably too small. So I'm gonna go a little larger here. I'm gonna turn on my guides because I want to make sure that his foot right here is at the edge of that grid line. Let's scale it. Let's grab our move tool and move the shoe over a little bit, and I'm actually going to grab this content here and make it a little bit larger. But before we do that, let's go ahead and create a new layer group. Let's call it content. I'm gonna put our by nail button information in there as well as our content, and then we need to change the layer boundary for this particular group layer by going up to layer and selecting crop. The content can. Let's go back to the scale tool. And let's increase this to fill in the space here. Click scale. Let's turn off our guides and her grids. All right, that's looking pretty good. Let's go ahead and finish up getting organized here. Let's create a new layer group. I'm going to name it images. We're gonna put those inside, find the shoe. Let's put that in there as well. And then one more layer group for the hero section. So let's call it hero. Pull it out. We're gonna put our content and our image inside of there. And let's just go ahead and move this up here as well. So the other thing we need to do is which we haven't done yet is put all of these group layers in its own group layer called Header. So let's go ahead and do that as well so you can see by putting everything in their own group layers. We helped organize the layers panel, so it's easier to find exactly what we need. So now we have our header in our hero in separate groups, layers and our hero section is now done. So in the next tutorial, we're going to start working on the body section of our website 26. Body: Hello and welcome back. All right, So for this part of our project, we are going to begin working on the body section of the Web page, and we're going to take this existing content and duplicated so we can be consistent throughout our design, and it makes it easier versus restarting from scratch. But we have one small problem, and that is when we re scaled this text larger. In the last lesson, it reformatted the text from a vector layer to a graphic layer, and you can see that the text is nail blurry and not as sharp as it was before. And if we take our text tool and click on it, we're gonna get a little message here asking if we want to continue editing our text. If I click on edit, it's going to change the text back to the original size it was before it was scaled up. And then we need to select all and resize that text to fit the size that we want it. And let's do 130 for the pixels. And let's go ahead and move this text back up. So right about there should be good and let's go ahead and do the same thing for this content here for the by nail button. Click on it. And then this time let's actually select Create new layer and it's going to take that information and we'll put it on a new layer for us. So I'm gonna put this right in here. Now you quit. Let's take a look at our layers here and we can see we have two different types of layers. And we talked about all the different types of layers in the beginning of the course in the layers lecture, and we talked about all those different types of layers. So this layer here is a text layer, and we know that because it has this icon here as part of that layer, the layer blow it, even though it contains the same information. By now, it's not really a text layer. It's now a graphics layer worry pixels layer, and it was converted to a pixel layer when we re scaled it. So you have to be careful when you're re scaling your text because it's going to change it from a vector to a pixel layer, and you can simply change it back by using your text tool. So I'm gonna go ahead and delete this by now. Layer here, the pixel layer because we don't need that. McGahan renamed this removed number one, and we just need to move that back into position. All right, let's go ahead and a line our text directly in the center of the button along all four sides. And to do that, we need to first take this by now, layer and move it up to the top. So it's out of that group layer. Otherwise we won't be able to select it with our alignment tool. Now we can grab that rectangle tool to make the selection and the alignment tool. We're gonna click on it and then we're going to align center and middle of target. All right, listen with the by nail text inside of the group layer. Let's close this out. Select the Contact Group player and duplicate. All right, let's go ahead and pull this out because it's gonna be in a different section, and now we can grab that with our move tool and move it down into position. Let's turn on our guides so we can align it to the right side here. All right, find your Hurley sandals. Go ahead and turn that layer on. And let's find our surfer as well. All right, let's move our sandals into place here. The sandal looks a little bit too small of me. So I'm gonna go ahead and re scale that with my scale tool, make it a little bit larger and align it to the left side of our grid. Here, let's grab our surfer as well. Gonna put him in a place and re scale as well. So let's make it look like that surfer is surfing across the side of the sandal right here . It's gonna move him over a little bit sore right about there is good. And I also want to take this content and move it up. Actually, let's figure out some space between the hero section and our content. I just want to change this content to content and that content copy. All right, let's Graham our measure tool. And let's measure out 75 pixels from the bottom of the hero section so we can put that content at the bottom of those 75 pixels. So we're gonna click on our guide here, drag it down until we see 75 pixels down there at the bottom left of our interface. So right there, it says 75 when I let go, and then I congrats a guide and drag it down to where those crosshairs are. And then I know it's 75 pixels away from the bottom of the hero section. Let's go ahead and grab the move tool. And let's move our content so that the first line is right there at that particular guideline that we just created. Okay, let's zoom out. And I think we can move up our Sando and our surfer as well. I think our surfer still a little bit too tall. So I'm gonna grab the scale to again and just make him a little bit smaller. All right, let's create a new layer group for our images. And then let's go ahead and move them up with our move tool. Okay. I'm gonna scale the surfer down a little bit more because I want to make sure that elbow is not above that particular line right there. All right, that looks pretty good. I'm gonna go ahead and put another guide at the bottom of the sandals, and then I'm going to measure out another 75 pixels. So we have an equal amount of space between here and this shoe and the next product. So grab your measurement tool again and measure out 75 pixels and then place your guy there . And then it's just a matter of repeating the steps we just took for those sandals and doing the same thing for the Converse shoes as well. So let's go ahead and turn on our next to images and create a new Lear group for them called Images number two. Just gonna move everything down here a little bit and again our skaters a little bit too big. So we're gonna use our scale to again. And let's just make it look like he's skating across the top of these shoes here. So right about there should be good. I actually want to take both images and move them over to the right so that they're aligned with the right side of the grids. All right, let's take our content here and duplicate it again, and let's go ahead and move this down into position all the way over to the left side of this grid. And then we need to move the text so that it aligns with that new guide that we just created. All right, let's go ahead and move our images up just a little bit. Okay, so we now have an equal amount of space between each one of the products, but personally, I think it's still too tight. So let's go ahead and go back and add another 25 pixels of space between our content. So we're gonna use that measure tool again and just measure out 25 pixels and then let's put our new guide there. And then we just need to move everything to align with that guide, and we need to do the same thing for this one. But this time we're going to move this guy down to the bottom of the shoes. So we need to make sure in two options we select pick a layer or guide so we can select that guide to move it. And then what? The measure tool. I'm going to measure 100 pixels, and I'm actually going to get rid of this guide here we don't need that one anymore. And then we just need to move everything into position and make sure you go back to move the act of layers. He could move all the contents of the group layer. Okay, lets group these into their own gripped layer. So new layer group again. Let's call it Hayley Sando. So, content one goes inside of here as well as these images and then a new layer group for this one called Converse. Okay, I'm gonna zoom out with command or control NZ and hide the guides. Now, I think adding that extra 25 pixels definitely helps the overall design. So it's not as tight as it was before. One last thing before we move on, let's go ahead and take our sandals and our converse shoes and group them into their own group layer called body. Okay, let's move this out and then put the sandals and the shoes and there and that's it. We are all done with the body. Awesome! All right. I hope you're enjoying this. So far, we have one more section for this Web design project, and that is the footer. So if you're ready to get started on that, well, let's do it 27. Footer Part 1: So let's go ahead and copy of these columns and Adam to our document described the text tool pasted in select All We're Gonna Do 14 points for the font size. Let's change it to Railway that select railway Bold. It's early exactly where I need it, so I'm just gonna leave it right there now for the other Bombs were going to leave a column of space between them. So let's go ahead and copy the rest of the information. - Now the one thing I want to do is I want to take these. The only thing that should really be bold ID in these two columns is the titles. So let's go ahead and grab these three lines and just select railway regular and then the same thing with these five lines. We're gonna go ahead and change this just to railway. All right, we have one more line of content we need to copy, and that's the copyright information. Let's do railway medium italic just to mix it up a little bit, and then we're going to align this over here to the left side. Let's zoom out because we need to create a horizontal line two columns and this content over here, let's grab our let's grab our rectangle tool. And then as far as the color, I'm just a little bit brighter than the background. So 34 34 34 looks good for now. And then let's all right now we can go ahead and fill that in. Okay, They select. There's are lying. I think it might be a little too thick with the so I'm going to. So I'm gonna grab my scale tool with Shift Plus s. The only problem is the layer boundary needs to be fixed. So let's get out of that tool with the escape key. Make sure the layer content now. The only thing is, I think this line is a little bit too thick, so make sure and let's make sure we select our proper layer here. I also want to turn off my guides and my grid. Grab your alignment tool. Click on this content here it's working. So let's move this layer all the way up to the top like that and a line middle of target sometime. Well, so sometimes gimp will make us move Lee, so sometimes we can select those elements with our alignment tool where the layers are. But sometimes gimp doesn't recognize where we're clicking, so we need to move the layer into a new position most like up of the layer panel above all the other layers so that you can actually select. It's kind of hard to read. So let's start off with about Nike Graver Textual Select all with Commander control and a and then remember in two options. We can come down here and increase the amount of with this option right here. And this time we're going to increase the amount of spacing. So it's gonna be positive. Last time we had to saying for these as well, Okay, I'm gonna take a look at my guides again, and that's and let's let pick a layer or guide because I want to get rid of this guide here . Let's go ahead and put these columns into there, so let's go ahead and copy of these columns and Adam to our document that the text tool paste it in, select all we're gonna do 14 points for the font size. Let's change it to railway. That's select railway bold and let's change the color from black to white. And let's go ahead and turn on our guide so we can go ahead and align this properly. It looks like it's already exactly where I need it, so I'm just gonna leave it right there now, for the other two columns were going to leave a column of space between them, so let's go ahead and copy the rest of the information. Now the only thing that should really be bold ID in these two columns is the titles. So let's go ahead and grab these three lines and just select railway regular and then the same thing with these five lines. We're gonna go ahead and change this just to railway. All right, we have one more line of content we need to copy, and that's the copyright information. Let's do railway medium italic just to mix it up a little bit, and then we're going to align this over here to the left side. All right, let's zoom out because we need to create a horizontal line to create a divider or separation between the three columns and this content over here. Let's grab our rectangle tool so we can create a shape and then as far as the color, I'm just gonna go a little bit brighter than the background. So 34 34 34 looks good for now. And then let's fill that in with our bucket filter will. But first, Before you do that, let's create a new layer. Let's call it divider. All right, Now we can go ahead and fill that in. Okay, they select. All right, I think this line is a little bit too thick, so let's zoom in here and let's grab our scale tools so we can make it a little bit smaller . Let's unlike it. And let's change the height, too. Let's do three for the height, and I just want to move it down a little bit. So right about there should be good. Now we just need to do our alignment of all our columns and our content down here. So let's grab our rectangle tool with the letter M, and we're going to space this content between the divider and the bottom of the footer, and let's make sure we select our proper layer here. I also want to turn off my guides and my grid. Grab your alignment tool Click on this content here doesn't look like it's working, so let's move this layer all the way up to the top. All right. Now we can select it and a line middle of target. So sometimes we can select those elements with our alignment tool where the layers are. But sometimes gimp doesn't recognize where we're clicking, so we need to move the layer into into a new position at the top of the layer panel above all the other layers, so that you can actually select it with the alignment tool. Okay, lets de select. And then we're going to take our three columns here and align them to the top. So let's add our guidelines back, and then we just need to move each column to that guideline. It doesn't matter where that guideline is, because we're going to align them from the top of the footer and the divider in just a second. Now, before we do our alignment, I just want to add some additional space between the lines because it's too tight right now and it's kind of hard to read. So let's start off with about Nike graver textual Select all with Commander Control and a and then remember in two options, we can come down here and increase the amount of spacing between the lines with this option right here. And this time we're going to increase the amount of spacing. So it's gonna be positive. Last time we had to reduce it and it was negative. So let's do let's do seven. And then we're gonna do the same for these as well. Okay, I'm gonna take a look at my guides again. And let's let pick a layer or guide because I want to get rid of this guide here. Let's go ahead and put these columns into their own group layer, right click and select New Layer group. I'm going to name it. Three columns. Okay. Now we can grab this group layer and a line it to the center of the top and the bottom right here. So what? They're rectangle tool. We could go ahead and make our selection alignment tool, click on one of the columns, and again, it's not letting us select it. So we're gonna move this group player all the way up to the top, and we're gonna try and click on it again. This time it let us select it and then we can align middle of target. So now we have an equal amount of space between here and here. Que de select with Commander Control and D and let's go ahead and move this back down. So we need to create a new group later for the footer for all this information. But we have some additional content that we need to add to our other side of her footer over here on the right, which is going to include our social media icons. But we're gonna cover that in the next tutorial. So if you're ready to do that all, let's do it. 28. Footer Part 2: our final stuff for this particular project is adding some social media icons. But before we do that, I want to share with you something that you may never have heard of before because nobody is talking about this, and that is copyright infringement of social media logos. Now what exactly am I talking about? Well, let's take a look at the Nike website again and take a look at their foot or here, and you can see the social icons they have here for Twitter, Facebook, YouTube and Instagram. And each one of these logos are placed inside of a circle, and when you hover over them, you'll see the hover state, which turns out to be white. Well, guess what? This is a copyright infringement on these particular logos. Again, you're like, What am I talking about? Well, let's find out the proper use of Social Media Logo's so you don't infringe on these companies. Copyright. So let's do a search for Facebook logo's. We're not going to do images because these air all infringements, except for maybe a couple of them, let's scroll down and select assets. So Facebook, Twitter, instagram and all the other social media platforms have a resource on their website that looks something like this that explains how you're supposed to use their logo on your website. So if we scroll down here, we can see the logos and the badges that they provide for you directly from Facebook that you can use on your website. And if you scroll down, you're going to see some other items as well, explaining how you can use their logo without infringing their copyright. Now, if you want to use this particular logo icon, if you click on it, you'll end up going to another page. And then you can download this particular logo to use on your website so you have to choose your media's well. There's different requirements for online prints and packaging, TV and film. Now you can't even use these on TV and film without getting written permission from Facebook first. But since we're working online, let's take a look at the guidelines and let's go ahead and scroll down and look at those so you can't style eyes their logo. You can't warp it or modify their color or the shape. All of that's not allowed, and it says if you're unable to use the correct color due to technical limitations. Well, then you can convert it to black and white, and it says right here do not use any icons or images to represent Facebook other than what is found on this site. So here on the left, not allowed on the right allowed. So if you don't do what Facebook says you can do with the logo, then you are breaking the law. You're infringing on their copy, right? And they can legally come after you or the company that you're working for for infringing on that copyright. Now, does that mean they're actually going to go and seek damages for the millions and millions of websites out there that are using their logos and correctly? I doubt it, but that doesn't mean they don't have the right to do it. And I think at this point in time, it's become acceptable to reuse those logos with different colors and different shapes and what have you. But again, there's still a chance that Facebook can come after the website owner, whether it's Nike or small mom and pop shop and say you're infringing on my copyright, either change it or we will come after you for damages. Now again, I don't think they're gonna go after the small mom and pop shops, but maybe a brand like Nike. They may go after a company like that. It's a $1,000,000,000 company, and I'm pretty sure that Nike wouldn't be happy if you took their logo and started changing it and changing the colors and warping it and styling it in different manners to promote something on your website so that again would be an infringement on Nikes logo. But for some reason, it's OK for social media icons and social media logos, so that's just some information I thought I'd share with you. But what we're going to do for this Web design project is we're gonna go ahead and infringe on their copyright because we're going to take their logos and we're gonna put them inside a circle, and we're going to change them just a little bit. Not a whole lot, but it's just for practice so you can learn how to create these different shapes and gimp and toe learn some of the other tools that we have a gimp to do different things. So what we're gonna do is we're gonna go ahead and download. The resource is directly from Facebook and Instagram and Twitter and Pinterest or whatever social media platforms you want. Just download four logos from each one of their sites. Just do a Google search for Facebook assets. Twitter assets things like that, and you'll find each one of those companies will have a place where you can download their logos to use on websites. So they're going to give you some different colors, the original color, and then they should have some colors for black and white as well. So let's go ahead and download everything in white, so that's all consistent. And then we'll go ahead and go from there as far as the size. Find something around 50 to 60 pixels because we're gonna go ahead and reduce the size of them anyways. But let's start off with a fairly high quality logo icon, because if we go with something smaller like a 15 or 20 pixels and we need to make it larger, it's going to become pixelated. So let's start off with something around 50 to 60. Okay? So once you have all of those downloaded go ahead and add them to your document. You can just drag and drop them into the document, and then a new layer will be created for each one. Okay, I have all my logos in my document now, and I've put him in this order Facebook, Instagram, Pinterest and Twitter. You can do the same or a different order. It's entirely up to you. It doesn't really matter. The other thing I've done is I've turned on my show layer boundary because I want to show you some things with our alignment tool. When we go to a line, each one of the logos. And if he did the alignment exercise in the beginning of the course, then you're already familiar with what we're going to cover when we get to the point where we need to align our logos and are elements. But for now, what we need to do is we need to resize everything so that they are all the same height now , depending on the logo's you downloaded, they may be smaller than what I have, which is fine. We're going to resize all the logos to a height of 30. So let's Graham, our scale tool, and I'm gonna start with my first layer here, and I'm a new 30 for the height, and then I'm just gonna continue on with the other ones as well. Now, before I do the Twitter logo, there's one thing that we need to do, and Dad is removed this grayish background that we have in the logo right now because we can see that the layer boundary is around that background and not the logo itself. I want the layer boundary around the logo so that we can resize it so that it's the same height of all the other logo's. Otherwise, the Twitter bird is going to be much smaller. So let's grab our fuzzy select tool. And then in the tool options just set the threshold to around 2018 to 20 is fine. Select the background and then hit delete or the backspace key to get rid of that background. Then we're going to de select, and then we can go ahead and go up to layer and select cropped content, and now are layer. Boundary is where it should be, so let's go ahead and re scale it down to 30 for the height and let's go ahead and move all the little goes down into place over here. Now I can't see a couple of them because they are pure white. Actually, here's the Facebook one here, but that's OK, because But that's OK, because since I have moved the active leader on, I can just click anywhere on my document and it will move that layer for me. So I'm just gonna make that one the 1st 1 Let's grab Instagram. That's going to be second. We have Pinterest in here somewheres, and I'm gonna make that third. Okay, let's grab our instagram because if yours is black like mine, we need to change it into white. And we can do that by going up to colors selecting color rise and then click on this color bar here and select white. So that's going to change it toe white for us. All right, Next, we need to create some circles for the logos to go inside of, so we're gonna grab our Ellipse tool in the Tools panel. We want to have fixed aspect ratio selected, and they were just going to click and drag out a shape and let's make it 50 for the width and the height. We're gonna also create a new layer called Circle. Let's call it logo Circle with a fill with transparency Again, click. Okay. And then let's change our color to this number. Right here. 333333 Click. Ok, and then we're gonna grab our bucket fill tool to fill that color in de select, and then we have our first shape. Okay? With my move tool. I'm gonna move this over. And the other thing I need to do is I need to change the layer boundary for it because it's too large. And that's important because we're going to a lying all of our circles evenly, top to bottom and distribute and even amount of space between them. And we need to go up to layer crop to content in order to help make that process easier. Okay, I'm gonna put those circle right below the Facebook logo, and then I'm going to duplicate that circle. Let's move it to Instagram, and then move it under that logo. So let's repeat that for each one. All right. I'm gonna move with this circle down here and away. So I can show you how easy it is to align these circles to the top and distribute an even amount of space between all of them. Now, as you may or may not know, we cannot select more than one layer in the layers panel. But thankfully, with our alignment tool, we can select multiple layers and then use the options in the tool options to quickly align everything. So I'm gonna click on the first circle, and we can see those four squares showing that this particular layer has been selected to be aligned. Now, if I want to select the other circles, if I click on them, it gets rid of the other selections. So what we have to do to select all of them is holding on our show key and then click on the next circle. Now, while I'm holding down my shift key, I can click on the next circle to select it, and then I'm still holding my shift key down, which still allows me to select the 4th 1 The problem is, the other three were de selected, so it's kind of a bug. I think if you hold down that shift key as you're selecting different layers, sometimes it will work and will allow you to select all the layers. But sometimes it doesn't, and it will de select them. So here's the fix. We're gonna select the 1st 1 holding on your shift key. Click on it. Release the shift key. Hold down the shift key again. Click on it. Release the shift key again and you guessed it. Hold down the shift key again and then click on the last layer. So that will allow you to continually select as many layers as you want. Maybe you have 67 10 12 layers. So that's one way to allow you to select all the layers. All right, now that we have all the layers selected with our alignment tool, I want to align them so that they're all even at the top. So we're gonna go to tool options and select relative to first item. So this would be the first item. So we want to align them to the edge of the target. And we haven't apparel key, so that will be at the top. Now I want to add an even amount of space between all the circles right here. We have a huge space. So how do we do that? So we still have relative to first item selected. We're gonna go down to the other options here that say distribute so we can click on this item right here, Distribute horizontal centers of target and we get an even amount of space. You can also change the offset to any number you want. So if I change this to five instead of 90 and then click on it, it begins to overlapped of circles. So you have to find a happy medium and find the amount of space that you want between the circles by typing in a number for offset X, which is horizontal. If you have a vertical set of layers, then you're gonna do offset. Why? So now I'm gonna do 75 then adds an even amount of 75 pixels between each layer so I can continue adding different numbers to get different results. So right now we have 200 that's not actually working because it's going outside of the document over here to the right. So I'm gonna undo that with Commander Control in the letter Z and let's do 75 for nail. And we have everything perfectly aligned. All right, Now we're gonna place our logos inside of the circles online them, and we'll be all done. So I'm gonna select pick a layer or guide in my two options so I can simply grab that logo and put it in place versus coming over here and selecting the layer in the layers panel. All right, let's go up to our first logo circle. Let's elect are fuzzy, Select Tool, and we're going to click on the inside of it. And then we're gonna grab our Facebook logo, our alignment tool. We're gonna click on that logo, and then we're going to align it to the center in the middle of the target. But first, we need to change relative to two selection, since we're aligning B of the selection. Okay, so we're going to do the same thing for the other ones. We're going to grab the circle, the fuzzy, select tool. You can use the keyboard shortcut. I have w for the keyboard shortcut for me. I'm gonna make my selection. So, like the alignment tool. Select the logo and then a lying to that selection. So let's go ahead and finish that up for the other ones as well. Let's go ahead and organize everything. We're gonna create a new layer by right clicking nuclear group. I'm gonna name this Facebook. We'll go, and then I'm gonna create a new layer group for each one of the logos. - All right, let's go ahead and create a group layer for our footer as well. Put everything inside of there that belongs inside. And again. We're just organizing everything to make it easier to find what we need. Looks like I have an extra layer here, so I'm gonna go ahead and delete that. Just gonna tidy up some of my layers here. I think we need to align. Are social icons as well. I'm gonna go ahead and turn on my guides and move that over. I want to put it right here. Okay, let's turn off the guides and what we're gonna do is align our logos to the top of her columns as well. So let's grab our alignment tool. Let's select first item. Okay, lets try and selecting that group layer. It's not selecting it. So let's move. The three columns and social icons out of that group layer. Let's see if we can select it now. Still not working. Let's go up to the top. Here we go. So I've got that selected. Now want to hold down my shift key and click on the logos and then use relative to first item and a line to the top turned the guides back on. Everything looks aligned. Everything is aligned throughout the rest of the webpage, and I think we are all done. Let's just go ahead and put these back inside of the footer. Congratulations are hate. I think we are finally done with our first Web design project, and if you followed along and created this website as you were watching the tutorials, then you're all done. If not, it's now time to go through this project and redo this project yourself so you can become accustomed to using the tools and gimp and getting into the habit of aligning things and properly reinforcing everything that you've learned Now. Once you're done with that, for extra bonus credits, you can take what you've learned and apply it with your creative vision to create your own redesign of this Web page. So what can you do to make this? What page? Better for the user and the overall design of the site itself. You're probably a better designer than I am, and you could probably come up with something. Ah, lot better and maybe more creative than what I have come up with myself. So whatever you create, you can then use that for your portfolio and begin promoting your services. As a Web designer, you have to have a portfolio to show people what you can do. So I highly recommend taking what you learned in creating your own design. You can't use this one because it's my design. I own the copyright to it, so create your own design and begin creating your portfolio. And if you would like, I would love to see your final creative vision and see your webpage. So if you want to share that with the community, go ahead and post that in the Q and A section and let me know if you want any feedback, and I'd be happy to provide any feedback on what I think you can do to improve it. Or maybe it's perfect the way it is. So that's entirely up to you. If you already done both well, then you ready to work on the second project. So in the second project, we're going to learn Ah, lot more about design concepts and ideas. And we're going to continue reinforcing what we've learned about the tools and gimp and possibly learn new tools in the process. So if you're ready to start on, the next project led to do it. 29. Project 2: Manhatten Bridge Capital Briefing: Hello and welcome back. All right, we're gonna work on our second Web design project, this time for this particular company called Manhattan Bridge Capital. Now, unlike Nike that already has a well defined, brand clean, minimalistic style, this particular site or company, it doesn't really have a strong brand. The overall design or layout of the website is not clean. It's outdated. It has poor quality graphics and images and needs a lot of help. Although this website has a copyright of 2018 it doesn't look like this site has been updated with a new fresh design in 20 years. This Grady int background behind the navigation and along the edges and in the Footer is reminiscent from websites that came onto the scene 20 years ago. And it's extremely outdated. Not only that, it's very difficult to read what's being placed on this particular page, and the layout of the content is scattered everywhere, and we're not quite sure where to start. Our eyes bounce around from one element to another, and overall the site does not look very professional. This particular company provides loans to investors in the New York City area and because of the lack of professionalism of their website. I think overall that's going to hinder their effectiveness and getting new clients, not just because of the outdated elements and the non professionalism. It's very difficult to read this content. We have bright red for our headline and then the styling and the text chosen for that content is very small and difficult to read. So one of the first things I would want to do for this particular company is update their logo. It's outdated and overall it does look like a low quality graphic and text was used, so I would want to use something with a higher rez, graphic and better text. So it doesn't look as pixelated as it does now. And this background in the header right here is not necessary and doesn't add any value to the overall website. Imagery as well throughout the website is not very good and I would want to update the imagery as well to tell a better story of what this company does and why you would want to do business with them or actually get alone through them. There's other things we can do to increase the possibility that investors will want to do business with them to get their loan through this particular company versus through other sources, like a credit union or a traditional style bank. There's also no riel incentive for anybody to I want to contact this company. Yes, we have their contact information, but why should we contact them? What's in it for me when I'm designing a website, I want to put myself in the shoes of the visitors, and the first thing that a visitor wants to know when they go to a website is why, what I want to do business with you. What's in it for me? What am I going to get if I decide to do business with you? So that's where the called action in the hero section comes into play. What is it that you're going to offer them that they can't refuse? Because it's so awesome. They have to have that right now, and they're going to give you information, their name, their phone number, their email would or whatever information you want In exchange for something that you're going to give them. You have to start that relationship with that customer by giving them something. It doesn't always have to work that way, but I think in most cases you have to start building that relationship from the get go. Otherwise, they're going to navigate back and look for another company to deal with, because one they're probably turned off because of the design layout. Maybe they're not thinking all this design layout is awful. I'm not doing business with them. Instead, they're thinking, while this company doesn't look like they care about their image and this place looks unprofessional and my dealing with a loan shark, or am I dealing with a professional financial institution because they want to know that they're dealing with somebody that's not going to come after them and break their leg or take their life because they defaulted on the loan? Yes, they're probably going to take your property, but this looks more like a loan shark type of company, at least to me, because overall it just doesn't look professional. Nothing against loan sharks. So if you're listening, I don't mean anything bad. You just need to come up with something a little bit more professional so that you can ensure that you get MAWR prospects to contact you for your particular services. So there's things that we can do to ensure that we can get their information before they leave the website, and also we want to make it a little bit easier for them to contact us and find more information about us. Maybe they want to visit our institution prior to deciding on getting alone through you. Which, of course, that's probably the steps. You have to have a consultation. Find out what kind of property this potential investor wants, and you have to go through some different steps. Well, why not provide a way for them to visit your offices, even if you only take appointments? Onley If a person is willing to take the time to come to your office, to visit, find out more information and to make an appointment, that in itself is a much stronger client versus somebody that just calls. So there's a lot of little things that we can do for this particular website design to ensure that we give our prospects every opportunity to make an appointment with us or meet us in person in order to get their business. So the design I came up with is right here, and I have my called action and I have better imagery that relates Mawr to their potential . Investors versus just a simple handshake have also included some additional items and some additional content that the company can use to sell their services. Why Manhattan Bridge Capital? Why should you do business with us? Well, here's all the reasons why you should do business with us. I've also included some additional information, like frequently asked questions that they may want to ask at the time of the consultation. Let's give them some of that information now before they contact us. And then I designed a connect section with multiple ways of contacting the company as well as a built in map where you can get directions directly to their office. Maybe you're in the vicinity, and you wanted to stop in and say hello. Introduce yourself, etcetera. So I want to make. It is easy as possible for potential customers to do business with Manhattan Bridge Capital on their particular website. Everything is bunched up over here to the left. They don't even have an email address. Yes, they have their address here so I could take that information and drop it into Google maps or something like that, or I can do it directly from here. So we're making it as easy as possible for customers to get the information they want versus trying to do it outside of the website and then in the Footer area. I have our social links, additional links down here at the bottom copyright information. But I've also cleaned up the overall design. So it's cleaner. That's amore, minimalistic type style, more modern cleaner. And all of those different elements make for a much cleaner and easier site to navigate and to read. So that's our briefing on our next Web design project. We're gonna go ahead and get started with our logo redesign in the next lesson. 30. Logo Re-Design: Hello and welcome back. All right, so when you're quoting and job for a Web design project, you have a golden opportunity toe up. Sell your services to include other graphic design services, and I think in this case they could use new branding and a logo. So you'll just need to communicate why you think they can benefit from a new logo. And then you can also include that in your price, but keep it separate from the Web design project itself. Now that being said, this particular course is not about low good design in and of itself. We're not gonna go into a lot of detail about how to design logos. We're just going to create something real simple and basic like I created here. And even then, I still find that this is 10 times better than what they currently have now. So let's go ahead and work on the logo first, and then we'll work on the header of the Web design. So first, go ahead and grab your grid design master file, and then we're gonna go ahead and create a new document for the logo. Let's do 3 25 by 1 25 and then in advanced options. We want to fill with transparency. Go ahead and click. OK, now, let's go ahead and grab our text tool. And in all capitals, I'm gonna do Manhattan for the green color. I'm just gonna choose a nice dark green color. Any color is fine and from size will do 60. And then Oswald, bold and again, you can use any fun that you want. I'm going to move my logo, appear at the top with the move tool and then, with the rectangle selectable, I'm going to make a selection. I'm going to select my alignment tool, Click on it and then a line to the center. Let's go ahead and do selection. All right, now that it's in the center, let's go ahead and de select and grab our text tool again. This time was due. Bridge Capital Select all. And then let's do 30 for the size. We're gonna do the same font. Let's not do bowl. Let's just do regular. And I think I also want to drop the opacity down for this layer as well. I'm gonna do around 50. All right, let's grab our move tool. So we can move it up here now. What I want to do is I want to stretch bridge capital so it's the same length as Manhattan . Now we could use the scale tool to do that, but it's going to distort the letters a little bit, and it's going to convert it to a pixel layer. And I don't want to do that because I may want to change something later on. So instead, we're gonna go back to our text tool again with the letter T select all and then in the tool options. We have an option down here to increase the amount of space between each letter. So let's go ahead and increase it until it's the same length as Man Han. So plus eight looks pretty close. Let's go ahead and grab our rectangle selection tool again and align it to the center. Okay, de select. Let's grab our background layer, press the letter D and then make sure white is set to the four gram and then we're going to add that color to the background layer and that's it. Our logo is now done, so let's go ahead and organize our layers by adding them into a new earlier group. I'm gonna call it logo and let's go ahead and save this with Commander Control and the letter s. I'm just gonna call it logo and make sure you have X CF for the extension so that all the layers are saved. And this will make it easier for us to make changes in the future if our client likes the logo, but they may want to make a change or two. You can easily access the layers individually now because you saved it as an ex CF file. All right, let's go ahead and Graham our logo layer here, click and drag it to your grid and release. So that's a great way to add another document or layers of files to a new document. I'm just gonna place it up here at the top, and our logo is all done higher hate. So in the next lesson, we're gonna go ahead and add the header to our Web page. 31. Header: okay, we're gonna go ahead and finish up the header portion of our Web page design because technically, our logo is part of the header. So the first thing I want to do is a sign, a certain amount of space between the top of the page and the top of the logo. So let's go ahead and turn on our guides. And depending on the design and the graphic elements, I'm gonna add anywhere from 20 to 50 pixels of space between the logo and the top of the Web page. But then again, it could change based on the design. So if you click and drag out as you may remember, we can see how many pixels were adding that guideline to Based on the information that's displayed down here, it's going to say Add Guide, and I'm gonna pull that down to 25. Okay, let's go ahead and move our logo, but before you do you want to make sure you have move actively or selected Otherwise, if you click on the logo, it's going to select the layer that you clicked on inside of that group layer. So once we have that activated, we can move everything together and I'm gonna move that up right into position. Let's go ahead and zoom out. Let's turn off our guides and let's add our navigation. Appear to the right. So grab your text tool and then let's go ahead and type out the navigation so I'm gonna do home and then six spaces. Okay, let's select. All six spaces were going to copy so we can add it to the end of each menu item. And let's go ahead and finish typing everything out. Let's do about. I'm going to paste two reviews Paste Team and Connect. All right, select all with Commander Control and a Let's change the font to 18 and it's kind of hard to see right now, So let's go ahead and change the white font to Black. We're gonna change that back toe white later, but I just want to be able to easily see it versus seeing it on away. Background. Let's go ahead and change the font to railway. Let's select railway bold and then we can go ahead and move it over here to the right and then with our guides turned on, I just want to connect it to the right side of this column here and now I need to align it to the top of this logo so I can either drag this up, which would be the easiest option, or I can use my alignment tools. So now we have a nice, perfect alignment at the top between the two elements. Okay, I'm gonna go ahead and turn off my guides. Let's zoom out. And next, we just need to organize our layers by adding a new group layer right click and select new group Layer. Let's call it Header he and let's put both inside. I'm also going to rename this navigation, all right. Our header is now done, and in the next to Tora we will start on the hero section of the Web page, and we're probably going to break that up into two different parts because there's going to be a lot of information that I'm going to share with you on how I came up with this particular design and why I chose this image in particular. And I'm gonna give you some additional pro tips as well. So if you're ready to get start on that, let's do it 32. Hero Part 1: Hello and welcome back. All right, so we're now going to work on the hero section for this website, and we have a lot of cool things that we're going to learn in this particular lesson. We have a custom shape here in two different shades, and then we have an image confined to that shape. We also have a Grady Int that I applied to add a little bit of death. And we, of course, have are called action. So the called action is something that should be a benefit to the visitor of the website, and it should be something that is hard to turn down. So you have to find out from your client what their clients need or want and what kind of problems do their clients have? And how can your client solve those problems? So let's say, for example, sometimes loan approvals could take 23 or five business days to get approved. But let's say an investor needs the money a lot sooner because they're going to an auction for a building or a warehouse or a house or whatever it is they're investing in. And they need that money that day. But what if Manhattan Bridge Capital could do a loan approval in 60 minutes? Well, that offer that called the action wrapped around that 16 minute loan approval is going to grab that investors interest. And they're going to want to apply to find out if they can qualify to purchase that building through the auction that is happening that day versus waiting three 45 business days or however long it takes, because that house or that building could be gone already because somebody else had the money that day. So this called action is going to allow this company, Manhattan, to generate more business because they're offering something that their competition is not offering. So this is another type of service that you can offer in addition to your Web design service by helping your clients come up with a called action that will help them generate more business. So let's go ahead and start putting together the pieces of our hero section, and I'll provide some additional pro tips as we go along. So the first thing we need to do is define the height of our hero section. So let's go ahead and turn on our guides with command or control in the semi colon. And then we're going to click and drag out a guide until we get to 700 we know we're at 700 based on the information at the bottom and the interface. All right, we're gonna go ahead and add a background color for the hero section. So let's go ahead and create a new layer called Background. We're going to fill with transparency and then click. OK, we're gonna pull that out of that particular group layer because it needs to be in its own group layer. And then we're going to grab our rectangle selectable with the letter M, and then we're going to click and drag out a selection based on the location of the hero section. We're then going to choose a nice blue color. This is the color that I used. You can use any blue that you want, and then, with our bucket fill tool, we can fill in that color. Let's go ahead and move the background layer below the head earlier so we can see everything else. All right, we're going to de select and turn off the guides and the next thing I want to do is go back into the Header Group and select my navigation. And then with my text tool, I'm going to click on one of the words and select all. And we're going to change that toe white. All right, I think we're ready to add our image next. But first, let's take a look at this image because I want to explain why I chose this particular image versus another one that I had originally chosen, which was this image here. So our company, Manhattan Bridge Capital, provide loans to real estate investors. And my first thought was a picture of downtown Manhattan showing the skyline, some skyscrapers and some buildings and things like that. And I chose this image because it has a nice blue color overcast, and I wanted to have something that had a contrast in relation to the green of the logo and the button. Plus, it's not very overpowering because it kind of blends in with the other colors of the hero section as well. But then I started thinking, OK, because of that blue color. It's kind of cold and off putting, and it's just buildings. And who does Manhattan actually work with Who are they giving loans to? Well, in the end, even though they work with real estate investors or real estate loans, they're not really loaning money to the buildings themselves. They're loaning money to people. So that's why I decided on finding an image of someone that would better represent who they are and who they deal with versus a building itself. So because buildings can get loans and people do. That's why I decided on choosing an image with a person in it, and I ended up finding this image here. And the reason why I chose this image over some of the other ones I found with people were based on the type of investors that this client deals with or this company deals with. They deal with investors, but what kind of investors? So there's a lot of options when it comes to selecting an image with investors. Do you want somebody in a suit and tie, or do you want somebody in shorts and it shows them working at home by their pool? Or do you want somebody dressed in casual business attire in a casual Semite, business environment or maybe something else completely different. It all depends on what that company that you're working for is selling in their type of client toe. So who was their main clientele? Well, for this particular company, investors in a suit and tie are not their main client toe. It's the individual investor that works for themselves versus a corporation. So I felt that someone in casual business attire in a casual, semi business environment was more appropriate versus somebody in a suit and tie or a more formal business setting. Hey, so that's why I settled on this particular image here. But there's another reason why I chose this image, and that's because of the direction that she's looking in. So studies have shown that you either want people looking directly at the visitors to create eye contact. Or, more importantly, you want them looking at something, because when you look at that person, you want to see what they're looking at, and your eyes will tend to follow in the direction they're looking at, which is in this case and that's correct are called the action. So she's looking into this area, which leads us to that call the action and We want our visitors to notice that called action and because we took the time to find out our client what they're selling and the problems of their clients, we created a cold action that is irresistible. It solves a problem. They need money today. Let's get you approved in 60 minutes or less, and this is going to be a great way to grab somebody's interest because nobody else in their area is offering this type of loan approval service. So it's going to generate more business for the client because they're solving a real problem that their clients air having. So again, I just want to reinforce the fact that this is a marketing type of service that you can off your clients that other Web designers aren't offering, and you can go above and beyond what other Web designers air doing and help your client earn more business. And who do you think they're going to contact when they need to update their website? They're gonna contact you, So let's go ahead and grab this image here. And the cool thing about this website here picks obey dot com is all their images are not only free but their copyright free so you can use them on your clients live website without any attribution or paying a fee to use that image. So if you want to download this exact same photo, go to pick Subait dot com, create an account and then you can download that particular image in different resolution sizes. So to download this image, just type in this number here and picks up a will, find the image, and then you can download it, and then we'll continue working on our hero section. All right, let's go ahead and make our shapes that are gonna be on the left hand side of our image. Actually, don't have my image in here yet, so I'm gonna go ahead and grab my image and drag it to my document. I'm gonna go ahead, turn it off for nail, and we're gonna Graham are Ellipse tool. This time, we want to make sure that in our tool options we have fixed turned off and we're going to do a size of Let's do 5 40 by Let's do 7 40 For the height. We actually need to bring that down a little bit so we can fill that in with a color of our choosing. We're gonna go ahead and create a new layer. First, let's call it shape. Feel what? Transparency Click OK, And then for our color, let's choose a darker blue versus the background. So I think I'm gonna go with something like this just a little darker. You can do whatever you want any color of your choosing. I'm just gonna do that. Click, Okay. And then I'm gonna grab by bucket fill tool with the letter G to fill that in. I'm gonna go ahead and de select, and I'm just gonna move it over just a little bit. I also wanna go up to layer and select crop to content to change the layer boundary. And let's go ahead and create a new earlier. We're gonna call it shape too, And then with our Ellipse tool, we're gonna go ahead and create a new shape the exact same size. So let's do 5 40 by 7 40 Let's pull that down. And I want to choose a lighter color this time. So I'm just gonna choose something different little lighter, he and go ahead and fill that in. Okay, let's de select. All right, I'm gonna move this layer over so it overlaps the first shape am and go right about there. Let's go up to layer and crop to content to change the later boundary as well, actually going to align these a little bit better. So I'm gonna turn on my guide so I can create a new guide to put the second shape in line with the other one. Okay, let's move that guy. And out of there, we don't need that anymore. All right, so we're almost done. What we're gonna do now is we're just going to take the second shape and duplicate it. Because what we're gonna do is we're gonna use that to cut out both shapes. So we have that nice ellipse edge along the left side, and then it's going to be transparent on this side, so I'm gonna show you how cool and easy this is. So we're just gonna move that over a little bit, then we're gonna go up to our blending modes and select color or race and boom. We now have our two shapes with our transparency over here on the right. Now there's one problem it's erasing all the colors below it. So if I go back to my image here, it's going to take out the color or the pixels for that layer as well. So any pixel below this layer that has that blending mode on it, it's going to erase the colors and the pixels and give you transparency for the final result. So we're gonna fix that, and it's really easy to fix. What we're gonna do is we're going to right click select a new layer group. Let's call this shapes. And then once we put that shape layer in the group layer, it removes that blending mode from all the layers below it, because it's contained inside of the group. Now, once we bring the other two shapes and it will then erase the pixels underneath it in the group, it doesn't affect anything on the outside of the group. So that's pretty cool. I like that pretty awesome. All right, let's go ahead and move this up. We need to make sure we have moved the active layer selected, and let's go ahead and move this up into position. So right about there, I'm gonna turn up my image just for a second, so I can see where I'm placing this. So I wanted outside of the top of the page, and it's going to go on the outside of the bottom of the hero section as well. And then we're going to create a layer mask to remove it from the bottom of the hero section. All right, a sterner image back on because we need to put this into position. We also need to flip it because, as you can see, she's looking in the wrong direction. We want her looking at the called action, so let's go ahead and do that first by going up to layer, select, transform and then select flip horizontally. Unfortunately, I had the wrong layer selected, so I'm going to under that with Commander Control and the letters. A Let's select our investor here. I'm actually going to rename this layer investor, and then we're gonna go back up to layer transform flip horizontally. Now she's going to look at the called action Let's grab our scale to wish shift plus s, and then, for the height, I'm going to type in 700 which is the height of our hero section and then with the tab key , it's going to resize it. And then I can grab it in the middle and move it over to the right side. And I want to bring it all the way over. So right about there should be good and then click skill. I have a little bit of blue up here, so I'm just gonna grab my move tool and move it up just a little bit with my arrow keys, so that should work. Now, we just need to get rid of the image on the top left and the bottom left here. And we can simply do that by adding a layer mask and selecting white because, as you know, white ads and black removes. So we're going to start off by keeping the entire image intact with a white layer mask. Now, we're gonna grab our brush tool with the letter B. We're going to switch this to black and white with the letter D, and then we can paint with black to remove. How cool is that? Ah, love it. All right, let's go ahead and do the same thing for our Shapes group later. We can actually, and a layer mask to a group player. So same thing. Layer mask. White ad. Now, this time, instead of using our brush to remove it, we're gonna grab our right angle selectable with the letter M. We're gonna make a selection where we want to remove, and then we're going to hit our delete or backspace key. But unfortunately, nothing happened. And that's because it's taking the information from the background color to replace it with . So we need to switch the background and the foreground color with the Letter X. And then when we hit the delete key or the backspace Kate, it removes it. All right. I think this is a good point to stop and continue on with our hero section in the next tutorial. So if you're ready for that, always do it. 33. Hero Part 2: All right. So what we have left for our hero section is the called action and possibly making some minor changes to the overall layout of the hero section as well. So let's go ahead and start with our textual so we can add a title for our called action. I'm just going to type out loan approval in 60 minutes. Let's select all the content so we can change the font color to White. I also want to do 50 for the pixel size, and I'm going to use Railway bold for the fun family. And then we just need to move this over toe left here. So the lines up with our logo and it looks pretty good right there. The only problem is, now we're lapping on the shapes. Let's go ahead and pull that layer out because it shouldn't be in there. Bring that down below the header group, and I think we need to move the shape over and maybe the image as well. So let's take that shape layer and move it to the right. Right there should be good, and let's also move the image as well. Now, if you grab the layer mask thumb now and not the layer itself. Then you're just going to move the layer mask, so make sure you select the image thumbnail so that you can move both together. So I'm gonna play set right there. Then we need to remove this part of the image. So we're gonna grab the layer mask, thumbnail our brush, and then make sure you have black set to the foreground so you can remove that part of the image. All right, let's go ahead and rename this layer headline and let's just move it up a little bit. All right, let's go ahead and type out a little paragraph of information. Grab your text tool. I'm gonna go ahead and just paste in a paragraph that a pretty wrote So it doesn't really matter what you write. Just make about three lines of information, and then let's change the font size to 14 White, and I think I want to go with a different fot. Now, when it comes to a body of content of three or more lines, I'm going to use a font like Georgia or Helvetica, and those types of fonts are much better on the eyes it's easier to read them versus a font like railway or Oswald. So for now, let's go ahead and go with Georgia. I think I need to make that text a little bit larger, so I'm gonna go up here and change it to 18 and then we just need to move it up into position now. Right now, I'm finding that the paragraph is still kind of competing with headline. It has the same intensity of weight. Even though it's a different fund family, it's still kind of making it hard to read. So let's grab this layer and drop the opacity down to 50% and that definitely helps create some separation from the two and makes this easier to read. I think we can go ahead and create our apply nail button. Let's go ahead and create a new layer called Apply Now button transparency, of course, And then, with our rectangle selectable, we're going to create a shape with the following size. We're gonna do 3 75 for the with and 1 10 for the height. Now, what I want to do is I want to create rounded corners now we don't have a selection tool to do that. But if we go under the select menu option, we haven't option here called rounded rectangle. So once you select that you condemn. Define the radius of those rounded corners so you can set it between whatever you want. 0 to 100. So I'm gonna go ahead and do 35 click, OK, and now you can see the rounded corners. How cool is that? Awesome. All right, hopefully you're learning new stuff as we continue on with new lessons. Let's go ahead and pick out one of the green colors that we used previously and click. OK, let's go ahead and fill it in with their bucket fill to uh and D Select are right. Let's go ahead and take that layer and duplicate it so we can create kind of a drop shadow . Gonna pull that one down and I'm going to name it. Apply now, button shadow. Now, before we move those layers into position, let's go ahead and go up to layer and select crop to content to adjust the layer boundary. And let's do the same thing for the first layer here content and then what? They're moved to a we can click over to the left and up one. Okay, we can now go ahead and colorize the button shadow. Let's select that layer. Go up two colors and select colorize. Click on the color bar and then just click on the same color of green that you selected for the top button and then click OK and automatically makes it darker. And I just want to move mine over a little bit. And I'm just going to use my arrow keys to move it to the left, end up one pixel at a time. So right there looks pretty good. Let's go ahead and put those in a group layer. Call it. Apply now button and let's go ahead and line it to the other two elements as well. It's put a rate about there. Okay, I'm gonna go ahead and select my paragraph and let's go ahead and use our arrow keys to select that as well. And to use your arrow keys on this, you will need to click on it with your move tool first. Otherwise, you're just going to use your arrow keys to navigate in the layers panel. Let's go ahead and rename this paragraph we're gonna put the headline at the top are apply . Now button down below those and we can then create a new layer group for those called call to Action. Okay, we have one thing left that we forgot to do, and that's add our text for our button. So what? They're textual. We're gonna type out, Apply now and let's select white as well old and let's do 70 pixels for the font size. But that right there and let's go ahead and a line that directly in the center of our button I'm gonna move this down here with our apply nail button, and then we're gonna make a selection with our fuzzy select tool. Make sure you have your apply now button layer selected, and then we can use our alignment tool to align it directly in the center, and we need to pull this. Apply now, layer out into the top so that we can select it with their limit tool and then make sure you have relative to selection and a line middle and center of the button. The only problem is we have more space at the top than the bottom, so let me show you why that happened. Grab your textile and click on it and we can see inside of this text box. Here we have more space appear than down here, and that's where the alignment tool is making its alignments based on the size of that box . So if we click right here at the top, we can see a little yellow box, and we can click and drag that down so that it comes to the top of the text. The only problem is it pushes that text down and below the text box, so it's cut off. But that's okay for the purposes of aligning. That's fine. Let's go back to our apply nail button and and er selection with our fuzzy select tool. And then with their alignment tool, we can re center this directly in the center. Now we need to de select and go back with our text tool and move that box up until we get all of the text visible inside of that text box. And now it should be perfectly aligned. Beautiful. All right, let's go ahead and zoom out. All right, so let's take a quick look at our hero section here to see if there's anything we can do to make this a little better. So we have two sides, and the image of our investor is looking back this way, which is what we want. But I think there's too many competing elements here, and it's looking too busy. So what are the most important parts of this part of the hero section? I would say the apply now button is the most important because that's the call to action. This is the offer, but the apply nail button takes you to that next step, so that should be the biggest. Which is fine. It is. But it's still kind of competing with the logo up here because logo is fairly large. So the logo is competing with the apply nail button, and it's kind of taking our eyes away from this section. So I think we need to take that logo and make it smaller. Let's go ahead and move. Apply now, back down into proper group player. Let's find our logo, which should be in our header and with our scale tool, we're gonna go ahead and scale this down to a height of Let's go with 98 for the height. Now, as you know, this has now been converted to a pixel layer. And if we want to update this content, we have to select our text tool and select the appropriate option in order to change it. But that's fine, because we did designed the logo in a separate document and we say that hopefully then we can always go back to that particular document and update it based on feedback from our clients. If they like the logo as is, that's fine. But if they have changes, you can go back to the original document and then dragged that layer in versus trying to fix it from here. So, as you can see by making that local smaller, it's not competing like it did before. And now our eyes gravitate to this area. We read the headline. Maybe we want to read this paragraph here for more information, but we know what we need to do next, and that is apply now. And these are little things that you're going to have to think about as you're designing what are the most important elements? What should be the largest in what should be the smallest. That being said, I think our text over here and our navigation is a little bit too small. So I'm gonna grab my text tool and select all. The only problem is I can access the tool options above it because it's being hidden by the top of the document. So let's get out of that. And then with their move tool, we can simply to spring that down and then go inside and maker changes. I'm gonna make this 22 points for the size and then we just need to make sure it's realigned to the top and to the right. All right, I like the size of the navigation. Now it's just a little bit too close to these shapes here. So I'm gonna go ahead and close all these group players out and move my shape players over and left just a little bit. So right about there should be good. And now I need to grab the layer mask of the image so I can paint with white so I can bring back the image in this part and this part of the hero section, because we erased part of that earlier, and now we just need to add it back in that area. K so white ands and black removes. All right, so our hero section is now done. Or is it? There's actually one thing we can do to improve the hero section to increase the chances that an investor will apply nail versus scrolling to a different part of the page or navigating off of the page, or maybe even leaving the site. And I'm gonna explain more about that in the next tutorial. 34. Hero Part 3: we're gonna go ahead and finish up our hero section. Now we need added ingredient, which we didn't do in the previous tutorial, and we also need to organize our layers for the hero section as well. And then I just want to talk about one other thing that we conduce to to improve the hero section to increase the chances that an investor will take advantage of this call to action and apply now. And we'll cover that in just a minute because we may or may not want to add it to the hero section, and I'll explain more about that. Once we get through these other steps, let's go ahead and work on adding a Grady int to our background. And to start, we're gonna go ahead and create a new layer. We're gonna name ingredient with a fill of transparency. Go ahead and click. OK, let's pull it out of that group layer. So let's go ahead and turn on the layer boundary under view and then just click on show layer boundary and we can see that this particular layer is covering the entire document. And if we add our ingredient are ingredient is going to be added in this area as well, and we would have to use a layer mask to remove it from that area. But there's an easier way to do it. We can actually scaled this particular layer to the height of the hero section, so we don't have to worry about adding the layer mask for down here. So to do that, we're going to right click on Ingredient Select Scale here. We want to unlock it and set the height to the height of the hero section, which is 700. And then when you click scale, you'll notice that the layer boundary has changed. We can actually click and drag up that part of the layer to the hero section and now are layer. Boundary is around the hero section and ingredient will be applied just to this area. So let's go ahead and add ingredient with our greeting tool, which is located right here. I don't have a keyboard shortcut for it, but if you use it a lot, you may want to and one for yourself. Okay, in the tool options, we have some options here we need to set up for our ingredient under shape. We want to make sure we have radio selected so that we have a circular type ingredients, so it's kind of like a spotlight. We also want the blend color space, set toe linear rgb, and then we need to change the colors of our ingredient. Right now, mine is showing black toe white. Yours might be different depending on if you use this particular tool before or not. So I'm gonna go ahead and click on this, and I'm gonna get a list of all the different greedy INTs that are available again. Yours may be different than mine because I've created custom ingredients before and then automatically saves them in this panel. So to change the colors, we need to click on this little icon here to edit the Grady int. And then we're presented with a new panel up here called Degrading and Editor, and then we can make adjustments to this particular color. So we have some triangles here and the centre one. We can actually move the endpoints we cannot, so I can adjust how much black and white is added to the Grady int. I'd like to keep mine in the middle so it's 50 50. And then in order to change the colors, we need to make our color selections in the foreground and the background colors. So the color Grady and I want is white toe blue, and I want a specific color of blue, which is this color right here, the background of our hero section. So already have white set up. So go ahead and set that if it's different for you and then for the background color, we're going to select this color with our eyedropper tool, which is located right here. So once you click on that, you get a little eyedropper and then you can click on this color, and it's going to add that color over here. Okay, so we now have that color. We can see that my greedy and editor also changed from blue toe white automatically. So I'm gonna show you how to change this around a little bit because we want white toe blue and we can also make color selections from here A swell. So let's do that. I'm gonna click. OK, so if we come over to the Grady and Editor and we right click, we get a pop up menu, and we can see right here for the left color type. I have background color selected, and that's why it automatically changed in the Grady, an editor when I selected over here. Yours may be different. Years may be fixed, and it probably didn't change colors. So right click on the grating editor and then tell gimp which color you want to use for the left side. And in this case, I want white. So I'm going to select foreground color and then right click and select right color type and background color this time. So now I have my white toe blue. So go ahead and set up your colors and then go back to your layer panel. Make sure you have grating selected and then click and drag out your ingredient. So see how it's being confined to that layer boundary. If we hadn't done that, then it would have been covering Up. Down here is well, we would have spent more time editing that Grady Int, so it's not showing up down here because we just want it confined to the hero section. So the longer this line, the more white or the bigger the circle is for that particular Grady int. I come in here real tight, it's more of a spotlight and it's much smaller. That's not what I want. So I'm gonna drag out, too. Oh, I don't know. I guess maybe right about there should be good. Now we can go ahead and click, enter or return to create that greedy int. So our ingredient has been applied, and now we need to make adjustments to it because we can't see our image. So the first thing I want to do is I want to drop my opacity down to around 5 to 10 for the opacity. I don't want it too bright or too intense. And if I take a look at the before and after, it will give me a better idea of where I want to place that particular opacity. And I'm gonna go to six for me. You can do whatever you decide Looks best on your end. Now the other thing we need to do is we need to remove the Grady int from the image. I do not want the greedy int over here on the side, so we do need to make a layer mask to do that. So let's go ahead and add a layer mask with white and click and and then with my rectangle select tool, I'm going to make a selection right here. And then I want to make sure that I have black set to the background and then hit delete or the backspace key, and that removes ingredient from that selection. Now I need to make a selection here to remove the rest of it so we can go into our shapes. Group that layer, and I want to select the top layer, which is this one right here and then with my fuzzy select tool, I can click in this area to make my selection. I'm gonna go ahead and close this group player and go back up and select my layer mask for that Grady Int layer and then again, delete or backspace key to get rid of the rest of ingredient. Now let's take a look at the before and after. It's just being applied in this area over there. How cool is that? All right, so that adds a little bit of depth to our background, makes it a little bit more interesting and not s flat. All right, let's go ahead and create a new layer group and let's call it hero section or just Hero. And let's put all our group layers in here in any individual airs. Okay, so we have our header or hero section, and everything is nice and neat and organized. All right, let's go ahead and work on the hero section a little bit more because we may or may not have a section that we want to add in the hero section. And in the original design, I added some social proof to increase the likelihood that an investor would take advantage of this offer and take advantage of the called action by applying now. So the reason why I would want to add social proof is because it adds credibility and credibility. For a company like this is huge when you're talking about money in general. So by showing potential investors that this particular company has been featured in these particular publications and media outlets shows that that particular company is trustworthy and a lot of investors want to make sure they are dealing with somebody that is trustworthy and not a loan shark. So this could help increase the possibility that somebody will want to do business with this company versus not having this information. The only problem is, where do we put it? Do we put it inside of the hero section Right now? The hero section is up here, but the social proof is below it. So let's move it up into the hero section and take a look at what happens. So now the hero section is a lot busier. We have a lot more going on. What we can do is we can lower the size of the logo and the apply now button and move everything so that this information will fit. Or we can take this social proof and we can adjust the opacity of the logos to lower the intensity of them. They're still visible and they still show credibility, but it's not as busy as it was before. The other thing we can do is we can take these logos and weaken scale them down so that they're not as large as they are now, and then that way they're not competing with the rest of the content. So I'm gonna leave that creative decision up to you. If you're going to place it in the hero section, just remember to realign your elements and resize them accordingly so that the hero section is not as busy as it currently is. You're gonna have to move the image as well and move that up. Or you can do what I did and place them just below the hero section like this. Okay, so that's it for our hero section. Unless, of course, you're placing your social media proof in there. Either way, we're going to start on creating the social proof section and these three columns in the next tutorial, which is the beginning of creating the body section of our Web page. So if you're ready to do that, let's do it. 35. Social Proof: Hello and welcome back. All right, so in this tutorial, we're gonna go ahead and create our social proof section, and we're also going to create three columns of information. And in their original Web page, they had a link right here, services that went to another page that explained the three main types of investors that they provided loans for. So I thought it would be nice to place snippets of that information on the home page that way if they decided they wanted more information about one of these specific types of loans than they can easily navigate to that page via the link that is created through the headline. So we're gonna go ahead and create those three columns as well. So let's go ahead and get started with our social proof section first. So what we need is 4 to 5 logos. These were the ones that I chose forms the Street Money Inc and CNBC, and we're gonna add them to our document. So I just did a Google search for each one of those logos and I selected transparent or PNG whatever the options are because you want to make sure that that particular file that you're gonna add to your document is transparent. So we're going to right click select copy image, and then back in our document, we can paste with Commander Control and the letter V. If you don't get that option, where automatically adds it to a new layer for you, you may get this option instead. That says, floating selection. In that case, just right, click and select to new layer, and then it will add that to a new layer for you. Okay, I don't need both, so I'm gonna go ahead and remove one, and then we just need to cull, arise and resize each one of the logos, and we also need to rename the logos as well. So let's do Forbes. I have some different ones. Here is Well, I have CNN money instead of money. Doesn't really matter. This is just for practice anyways. And I'm only gonna go with three at this time. So let's go up to colors and select colorize. And then we want to select white to change everything toe white. So let's go ahead and do that for each one of the logos. Okay? With our guides turned on with Commander control in the semi colon. I'm gonna go ahead and and a guide to 785. Let's grab our marquee tool so we can fill it in with a color. Let's make a new layer as well. Let's call it background and let's pick out a dark blue color and then with your bucket fill tool, you can go ahead and fill that in. Okay, I'm gonna de select and turn off my guides. Let's move the background layer below the logos, and we also need to resize our logos and change the layer boundary as well. So let's go up to layer and select Crop the content and let's go ahead and do the other two as well. Now, if the layer boundary is already cropped to the content, you're gonna get this little message here, so it looks like the same for Forbes as well, so we're good to go there. Let's go ahead and grab our scale tool and make sure the height and the width is linked. And then, for the height we're going to do 50 pixels. I should let's go a little lower. Let's do 35 and then go ahead and scale it and just move it into position. Okay, we're gonna do the same with the other two logos as well. We're, however many logo's you have. They're all going to be 35. Okay, let's turn on our grids because I want to make sure that everything is properly aligned. They also need to move my grid lier above all the other layers. We can actually see it. Let's go ahead and place this logo here directly in the center of these two. So let's grab our rectangle select tool and make a selection. And then, with our alignment tool, we want to click on that layer and move it up higher if needed. And then we're going to align to the center of target. Okay, let's go ahead and put all those logos in a group layer. So right click and select new earlier group called Logo's. Now let's go ahead and allying our logos directly in the center of our background. Let's go to the background layer first and select layer and craft a content to change the layer boundary, and then with the alignment tool, we're going to click on it. But it looks like I need to move this all the way up to the top. So we're gonna click on that. Then we're going to move the logos to the top, holding on your shift key and click on the logos. This time we're going to align to the first item, which is the background. And then we're going to align center and middle of target to align those logos directly in the middle of the shape. All right, so that part of the what page is done, we're going to create a new layer group for it called Social Proof. Okay, we have all of that organized. Let's go ahead and move this down below the hero section. And now let's work on our three columns. Now, Before we do that, I actually want to go back and select the logos and drop the opacity down to around 50 just a kind of tone it down just a little bit. All right, so that makes it less busy than it was before. So let's go ahead and work on our columns now. So the first column we will set the title to Landlord. Let's change it to Oswald Bold. Let's do 30 for the size and then for the color, we're going to choose the green color of her button. So describe your eyedropper tool here and click on the button to get that color click. OK, and we actually need to move this particular layer outside of this group. That layer. All right, let's go ahead and put this down here at the bottom, and then we're just going to create a new paragraph with some new information. It doesn't really matter what it says. Just type something out. 567 lines is fine. And let's make this text 12 for the size and then for the color we're going to type in 333 333 Click your tab key Click OK, and let's change the font to Georgia looks kind of small. So maybe a little bit larger. I'm gonna go ahead and select all and change it to 14 and then let's just move it into position here, all right? I think we need to turn on our grid. So let's go ahead and turn that on, and I'm gonna go ahead and create a new earlier group for this content. It's gonna call it landlord and let's take a look at our spacing hair. I think when I want to do is I want to take this paragraph and condense it so that it fills in two column widths. So let's go back to our textile with the letter T. And then we need to go inside our group layer here to select our paragraph, and then we can click on it to activate the text box so we can resize it. So I'm just gonna grab this corner here and drag it to the left and down until it fills up those two columns just going to readjust my text here a little bit. So I have two paragraphs. That's fine. And now it's condensed to these two columns, which is what I want. And then we're going to add a couple of columns of space in between the columns as we create the other columns as well. And we're gonna make this really easy to dio. What we need to do is grab our landlord grouped layer, and we're going to duplicate it two times gonna put landlord one at the top that's called this one flippers, and we'll just call this one new. Let's grab this layer and then what? They're moved to a will. Just move it over to write about their. So make sure you have two columns of space and between them, as she I think that's too many. I'm gonna go ahead and move it over to the left, so we have one column of space between them and back to our text tools. We can change the title, select all, change it to 30 and then change the font as well. How Oswald Old and we need to make sure we had the color, and then we're going to move the other layer over as well. So we need one column of space. It's all right there and let's change the title. Now we just need to align them to the top so that they are perfectly aligned along that edge. Let's go ahead and turn off these three top players, and we should be able to select them now with our alignment tool. Let's go ahead and click on Landlord, hold down your shift key, click on flippers and then released the shift key, holding the on again and then click on New all right, we're gonna go to relative to first item and then select a line top edge of targets, All right there. Now perfectly aligned along the top. We just need to center them in the middle of our document here. All right, So before we allying these three columns directly in the center, let's create a section for those columns and specify a specific height for them. So let's turn on our guides with Commander Control in the semi colon. Let's grab our measurement tool and let's measure out 300 pixels tall. Kate, grab your guy and pull it down and and it to the crosshairs right there. Now, before we select these with their alignment tool, let's go ahead and create a new layer group called three Columns so we can put each one of those columns into it. And then we can just select that particular layer group with the alignment tool versus each column individually, and then it will make it easier and faster to align it directly in the center. So with our Lehman tool, we just need to click on it once and then ah, lying center of target and align middle of target. Okay, de, select and turn off guides, and then we can go ahead and turn on the other layers as well. We'll go ahead and keep grid off for now. Now there's one last thing I want to do before we move on, and that is, I want to align the titles directly in the center of the paragraphs. Now, when you do something like this and you've already grouped everything, it's going to be much more difficult than doing it from the beginning. But sometimes that happens because maybe the client will want to make a change and will want to center this. But you didn't do it in the beginning like we did, and you will have to go through each one of these, group the layers and pull all the layers out in order to select them with your alignment tool. We also need to turn off these layers again so we can select them, and then we can select those layers with our alignment tool so we can then a line relative to the first item and a line center of target. Now, in this case, the paragraph shifted to the left because we're aligning it to the first item. So instead of selecting landlord first, we can select the paragraph because I want landlord to move over to the right. Otherwise, we lose that even amount of spacing in between each column and then I can select landlord, and that will move or Okay, let's go ahead and put those back in and then do that for the other two columns as well. I'm gonna rename these title with the name of the title just to give it a little bit better description. And then as faras the paragraph name for the layer. I'm gonna go ahead and rename it paragraph so sometimes the client will not have the content available. So you'll just use some text like this, or dummy text, which we'll talk about in an upcoming tutorial. Or you can actually navigate to their website and grab some of the content that they already have the place inside of here. But for now, we're just gonna leave it like this. Okay, we have are three columns. Let's put that blow Social proof hero and header turned back on and everything is coming along just fine. All right, now that we have that done, we're gonna go ahead and work on the next part of our body in the next tutorial 36. Body Part 1: for our next section of our website. I wanted to create something that explained why you should do business with this particular company. So it's kind of like the about us page. What is it about us? What do we dio? These are the things we dio. So I think something that's a lot more powerful then and in about us. Page is listing benefits of why you should do business with a certain company you can still doing about us page. But I would rather try and sell my clients services to potential website visitors about why they should do business with them. And that's what this particular section represents. Why Manhattan? And then we list off 4 to 7 benefits of why you should do business with Manhattan Bridge Capital Now. This content is not available on their website, so it's something that I would have to talk to them about and ordered to find out what the benefits are of using their particular company versus other loan services in the area. So this is something that I would Upsell my client on because I would either help them right content for this section, or I would allow them to provide that information for me. If I were to write it myself on their behalf based on the benefits that they provide, then of course I would charge an additional fee for that. If they're providing the information, I'm not. So this is just another opportunity to go above and beyond. Being just another Web designer. You don't have to do the copyrighting yourself. If you're not good at writing like I am, you can still outsource it but mark up the cost of getting that particular content written , and then you earn additional income. But at the same time, you're doing a service to your kind by providing your professional experience to let them know that they can increase the amount of customers or prospects that are going to contact them by selling them on why they should do business with you. If you don't have this information, it's just general information. Yeah, we provide these kinds of loans. We can do a loan approval in 60 minutes, but it's not really saying why you should do business with us. Yes, you can get an approval in 60 minutes, but there has to be other benefits above and beyond us that will entice people to do business with them. They could provide lower interest rates versus their competition. And they can explain we're going to save you hundreds of thousands of dollars because our interest rates are lower than anybody else in the area. That would be one benefit. Another one would be your at an auction. You by the real estate. You already know you're approved for that particular loan. But Manhattan Bridge Capital could take it one step further and automatically transfer that money to the auctioneer upon approval or acceptance of your offer so that there's no delay in getting the funds to that auction house. So you can take possession of that real estate today versus waiting for bridge capital to send them a check or whatever the case may be for that particular company, you have to communicate with your client to find out what are the benefits of doing business with you. Why should prospects that don't know anything about you? Why should they do business with you? If you don't give them a reason why they should do business with you versus the competition ? Well, chances are you're not gonna get their business because maybe your competition is doing that right now. And that's part of your research. You're gonna go check out the competition in their area. You're gonna pick out the 4 to 5 competitors and their area and find out what they're doing on their websites. And if they're offering benefits on their home page, well, then that's another reason for your client to do it as well, so that they can increase their chances of getting new customers. I don't want this just to be another Web design course. Anybody can design a website. I want to share with you tips and ideas on how you can increase your bottom line, but at the same time help your client's earn a higher return on their investment as well when they're getting a new website done. So the easy part of this Web design is putting these three elements together. What we have, we have some text, we have a headline, and we have a photo. It's so easy to design something like this. It's harder to communicate with your client on why you're doing the specific Web page and why they should have it and the bottom line is, just ask your client. Would you like to have the potential toe earn more income by having more customers? Of course, they're going to say yes, they want more business. That's why they're having a website done. They want to generate more income. Well, based on my professional experience, this is one way to help sell your services so you can ensure that you get a higher return on your investment and secure more customers by telling people why they should do business with you. All right, so now that we've gone over that, let's go ahead and design this particular section. I chose an image of downtown New York or Manhattan, and I chose a skyline that allowed me to place content within it that also balanced out with the rest of the image, with a tall building to the right and additional buildings. Blow it because that's where Manhattan Bridge Capital does their business, Manhattan or downtown New York. So I wanted to grab an image from their backyard, so to speak. So for this particular image, I went to pick sbeih dot com. I typed in New York building. I selected vertical for the orientation because I wanted something that would provide a very tall building and not so much a landscape orientation. So once I typed in this and selected vertical, the second image right here grabbed my intention. I like the color of the image. It provides a lot of skyline for our tax. We just need to crop it in a way so that our main tall building right here is off to the right and the content is to the left of it. So if you want to download this image, go ahead and create a free account and then we're going to download the 12 80 by 1920 size . And you can also get to this particular linked by typing in this number. And it will take you directly to the URL for this particular image. Once it's downloaded, you can then drag and drop that into your document, so it's a pretty large file, but it doesn't cover the full with of our Web page right now, and what I want is a full bleed image, in other words, edged the edge. So we're going to re scale this image, but we also need to make our canvas larger as well because we don't have enough space down here at the bottom. So let's go ahead and do that first. By going up to image and selecting campus size, make sure that the within the height is unlocked and we're gonna do 5000 for the height. Once you click your tab Key, you're going to see the preview right here. And it's gonna show all the extra space that's going to be added to your canvas. Go ahead and click resize. The other thing we need to do is we need to grab our background layer and and white to the rest of that canvas as well. So I'm gonna hit the letter D and X to get white on the foreground and then with the bucket filled tool with the letter G, I can go ahead and fill that in. The only problem is our layer boundary is confined to the previous height of our campus, so we're gonna go up to layer and select layer to image size, and that increases the boundary for that particular layer, and then we can fill it in. All right, so our image is inside are three columns at least for me. I don't want it in there, so I'm gonna pull that out and let's pull it down below that as well. All right, let's go ahead and resize our image with our skill tool. And the canvas is currently 1400 pixels white. So that's what we're going to do for the image as well. And if it's locked, it will automatically do the height, which is 2100. Go ahead and scale, and then we need to turn on our guide so we can move this into position and align it with that guideline that we created earlier in a previous lesson. All right, so that's the top of it now. The only problem is, I don't have any space for my content over here on the left. So I want to actually make this larger so that the building will move over to the right and give us more open sky. So let's grab our scale tool again. This time, I'm going to use the top right corner here to click and drag to make it larger. So right there, go ahead and scale, and the lesson we need to do is create a background for our three columns so that the image is not bleeding into that section. So let's go into our three columns here. Let's create a new layer called background Click, OK, and I need to pull it out of that group layer and put it below it. And then I'm gonna fill with my bucket tool. And finally, I'm gonna go ahead and grab my rectangle selectable so I can select this part of the web page and scroll all the way down so that we can remove the background from this area and then go ahead and just click your delete key or your backspace key to remove that portion of the background. Can we can de select and turn our guides off? And now we have our image in place. All right, let's go ahead and create our text box and issue. We need our guides against We know exactly where to align it on the left side because we wanted to align with all the other content, appear in the hero section as well. So we're gonna place it right on this second guide, click and drag out so right about there. And this is the size of my current text, Box 600 by 9 78 It doesn't have to be that exact same size Justus, long as it's in this empty space of our image here, that'll be fine. It might be a little bit too tall. I need a little bit more room for my headline. So I'm gonna bring this down just a little bit. Kayla's crab, our image layer and create a new layer called text box. Click. Okay, and then let's fill it in with White. I think I want to tone down the text box just a little bit toe. Allow some of that image to come through behind it. So let's drop the opacity down this a little bit. I'm gonna do right around 80 so right there is pretty good. I don't want to do too much. Otherwise, it's gonna make it harder to read the text. Let's go ahead and grab our text tool and type out the title and let's do Oswald bold. Let's do 75 for the size so right there should be good and let's turn off all our other layers so we can use our alignment tool to align the headline directly in the center of the text box. And before we do that, we need to go up to layer and select cropped content and then holding on your shift key to select the headline. And then we can align Center of Target. All right, Next up, we're going to add our benefits to our text box. We're gonna add 56 or maybe seven paragraphs, and what we're going to do is use what is known as dummy text. So dummy text is text that is used by Web designers to fill in a space that requires or should have content. And it's used to fill up that space because the final content isn't being provided by the client. So maybe they're a brand new company. They don't have the content yet, So instead of trying to come up with something that should go in there for them, we're going to use dummy text instead. So it's not readable, and it's not meant to be read. It's just used as filler. Another name for dummy text is Laura um, Ipsum. It's the industry standard for design mock ups and prototypes like Web designs and, like I mentioned it allows you to show clients aim or complete version of your design without actually having to invest time and drafting Riel copy. But despite all the benefits of Warm ipsum, it's just random Latin text, and it can get kind of boring over time because it's not really readable. And in a way that's OK, because you really don't want the clients to be focusing on the content. You want them to focus on the design. But if you have a client that has a good sense of humor, you conduce to a Google search for dummy text generators, and you will find a lot of different sites that offer different types of content versus just random Latin content. And here's a list of some of the options that are available. You're gonna have dummy text in bacon. If your client likes cats, you can do can't ipsum cupcakes and many more. There's one for Bob Ross. If you're not familiar with him, he's from the eighties. Ah, there's one for Harry Lips, um, and many more. So just do a Google search for four dummy text generators, and you can get some of these types of Laura Um em some generators to use as filler for your content. So I'm gonna just go ahead and do a Google search for Laura. Um, hip some. And this 1st 1 here is just plain old, boring Latin text. So let's go ahead and grab four or five paragraphs of this dummy text. We're gonna copy it, and then we're gonna grab our text tool and pasted in. Now, the other thing we can do real quick is we can make adjustments to our tool options over here. So we have the correct size of text versus having to redo it up here. So I'm gonna go ahead and change my size down here to 16. I'm gonna change the font to Georgia, and I'm gonna change the color to that dark gray color that we used previously. Which is all these three numbers here can't now, once I paste in, it will end up adding in the font styles that we typed in over here. Now the other thing we need to do is we need to grab one of these corners and continue re sizing that text until it fits inside of that text box. Let's press command or control end zero to zoom all the way out, and that will make it easier and faster to resize this text box. So I'm just gonna put it right inside of here and let's go ahead and zoom back in. Now let's go ahead and a lying that text directly in the center of our text box, we're gonna grab that text box first with our alignment tool, hold down your ship key and click on the text and then a lying center and middle of target . The other thing I want to do is I'm gonna go back into our text here and resize the titles of each paragraph. So I'm gonna do 20 for the size and I'm also going to make a bold I'm also going to add a space between the paragraph and the title as well. So let's do that for each title just makes it a little bit easier to read. And I'm not so much worried about the text not filling the entire area. We have extra text here that is beyond the bottom of our text box, but that's fine. If this was actual text from the client, then I would spend a little more time getting the text box the proper size in the fonts, the proper size toe have everything fit. But for now, this will work out just fine. Okay, let's go ahead and turn our other layers back on. There's one last thing I think we should do, and I think we should tone down the color of this particular image, so it better matches the rest of the site. It's a little bit too warm, so I want to tone it down by adding a color overlay to it. So let's go ahead and grab that image layer. Let's rename it Trade Center, which is the name of the building itself, this big one here. And then we're gonna create a new layer called color overlay. Let's pick out a nice blue color. Any color blue will do, and then let's fill it in with that color and then drop the opacity down to around 15 to 20 . And I think that definitely helps cool down the image a little bit. So it's not as warm, and it better matches the rest of the site. So again, designing this part of the website Super simple. It's just a matter of communicating with our clients why they need this particular section on their website and how it will not only benefit them in the long run, but it's going to make it easier for prospects to decide if they should do business with them versus somebody else. And if these benefits that they have to offer are not being offered by the competition, then the chances are good. They're going to secure their business Now. In the next lesson, we're gonna go ahead and create another section for this particular Web page that's going to help visitors determine if they want to do business with this company or not. And in a way, it's going to help Manhattan Bridge Capital as well. Because what we're going to do is add a F A Q section, and we're going to take their most asked questions and answer them for those prospects now so that those questions are answered before they contact Manhattan Capital, which in turn saves them time from not having to answer those questions on the phone or in person. So if you're ready to get started on that, let's do it 37. Body Part 2: Hello and welcome back. All right, so in this lesson, we are going to create our frequently asked questions section, and this will provide a couple of benefits to visitors to the website and benefits to your client as well. For the visitors, it's going to give them easy access to answers to questions that they're going to have prior to taking that step of purchasing from this particular company. And then they can decide if they want to move on to the next part of the buying decision process based on the answers that they get from here. As far as your client goes, it helps them because one they don't have to answer these questions in person or on the phone or an email, and to kind of, in a way pre qualifies a prospect. Because if a prospect gets these answers to these specific questions and decides to continue on while they're highly interested in what you have to offer, what your client has to offer because they didn't decide, you know what, I don't like these answers. I'm gonna go some results. They like the answer, so they want to continue on with the buying decision process in order to do business with your client. So for this design, it's real simple. We have some text. We have a headline. We have a button, we have a text box that holds the question, and then we're going to also create a hover state that shows what happens when you click on this little icon right here. It's actually going to expand to reveal the answer underneath it, and we're going to design it and set it up in a way. So the developer knows that this is a hover state and what's going to happen when the button is clicked on before we get started on the FAA section, we're gonna go ahead and make some adjustments to our grid. Lier as well as organized are layers from the previous section, so we need to extend our grid to the bottom of the page, and we're gonna do that with our scale tool. I'm gonna type in 5000 for the height, and we also need to organize these layers. So let's put them in a new layer group called Why Manhattan? All right, let's go ahead and get started on the FAA section with our text tool. We're going to create our headline, and we're gonna use Oswald Bowled 72 for the color, I'm gonna choose our green color that we've been using throughout this project and then in all capitals of a Q and Lower case s All right, let's align this to the left side here to align it with all the other content in the hero section. All right, let's go ahead and create our first question box, and we're going to make it six columns wide, which is why we extended the grid to make it a little easier for us. So let's go ahead and grab our rectangle select tool and turn off fixed and then just create it six columns wide, and I also want to change the height so that it's 67 pixels and we need to create a new layer. Let's call it question text box and let's go ahead and fill that in with White, and I also want to add a stroke to the selection as well. So let's go up to edit and select stroke selection. I'm gonna do a line with of one, and I also need to make sure that I have black set to the foreground and we now have our stroke. Let's go ahead and zoom in and make sure that this is properly aligned with everything else . It looks like it's off a little bit, so I'm gonna grab my move tool and click on it and then use my right arrow key to move it over. And let's see if the right side is inside that column. It's not. We want pixel perfect alignment, and we'll go ahead and resize that with our scale tool. But first we need to go up to layer and select crop the content, and then we can grab our scale tool in the side to pull it in. All right, let's go ahead and create our button for this particular text box. So back to the rectangle select tool. This time I'm gonna go back and select fixed aspect ratio and let's go ahead and type in. Let's do 42 for the size. I also want to add rounded corners and we're gonna go up to select rounded rectangle, and I'm gonna do 20 for the radius for my rounded corners, and then I'm going to grab a light blue color to fill it in with. And before we do that real quick, we need to create a new layer. Let's call it question button the select and let's go ahead and grab our marquee tool again so we can align it directly in the center of this column. Let's turn off fixed so we can fix that right into the location. We need it. All right, let's turn off these layers. Here's we can select it with our alignment tool. And before we do that again, we need to go up to layer and selected crop to content. And then we need to make sure we have selection selected and then a line center and middle of target. All right, let's go back to our text tool so we can add a little symbol inside. I'm just gonna type out a plus sign, and I'm also going to change it toe White. So again, I'm using Oswald bowled 72 and now we just need to move it into position. So this time I'm just going to use my arrow keys to put it right in the center. All right, let's go ahead and create a new earlier group for these two layers. Call it question button. And now we're gonna go ahead and type out our question. I'm gonna change the font to Georgia. Let's do 18 for the size and then are dark gray color. And then just type out a question I'm gonna do. What is your 90 day interest rate? Actually want to make that larger? I'm gonna do 24 points. Okay, Lets just move this into position right about there should be good. Let's take a look at our guidance. So it's right along that edge of that column. That's perfect. I just need to make sure that it's perfectly centered, top to bottom as well. So let's go ahead and make our selection so we can do that. And if needed, pulled that layer outside, you can select it and then a lying middle of target. Okay, so that's aligned. Go ahead and put that back in. Okay. The next step is to create our additional question text boxes, but first we need to put these into a new layer group. And let's call it question one can. We're gonna put all those layers and sign, except for the F a Q. We don't want that in there, cause that's separate. So we're actually gonna put that one at the top and I'm a go ahead and turn it off just for the time being. And let's go ahead and grab our question one grouped layer and duplicated three times. Okay, what? They're moved to what? We're just going to select each layer and down. I think I want to bring in these in just a little bit closer, and then we're gonna use our alignment tool to distribute the amount of space between them evenly. But I think we have a little problem because I can tell by the layer boundary right now it is outside of our text box. Should be along the top and the bottom here. And I think that's because of our little plus sign that we created. We can see it's much taller than the rest of the box, so we're gonna go in and grab each one of these layers and crop the layer content down to the actual size of that particular element. So let's go inside of each one of these questions and go ahead and do that. All right, now, that we've done that, we can see that the layer boundary is now placed exactly where we want it. Let's go ahead and make our selections with our alignment tool. Hold down your shift key and release and re hit the shift key again for each item. And then we're going to go to relative to first item, and then we're going to select this option here to distribute vertical centers. The only problem is they're all overlapping and are in the same location now. So let's undo that with Commander Control and the letters A And what we need to do is we need to tell gimp how many pixels we want to offset the vertical space. So let's try 100 and then select this option here again. And now it's perfectly added an even amount of space between each question. If we change this number to something else that's going to increase the amount of space, so we're gonna stick with 100 for now because I think that's going to work out just fine. The other thing I want to do is make sure that each one of these group layers are in the proper location and then I'm going to rename each one of these layers. Question two through four. Now, let's take these four layers and put them in a new earlier group. I'm not gonna rename it right now because all we're going to do is take this group and duplicate it toe. Add four more questions on the other side. Case will take this layer group, duplicate it and then we can move it over to the right. Also turned on my grid so I can see where it's going. So right there, there we go. I'm gonna put this layer group of top And actually, let's go ahead and change the name of this one too. Questions. So we have our one through four, and then we're gonna take these layer groups here and put them inside of here and then rename them five through eight. And we don't need this one anymore. Something go ahead and delete that one as well. Can we just need to organize our layers just a little bit here? I'm gonna go ahead and turn on some of my other layers here as well. Let's turn them all on for nail. Probably a good time to save it. So I'm gonna go ahead and save with Commander Control and the letter s. Now, we just need to bring everything up because we have too much space up here. So I'm gonna take a measurement of the space right here, Toe Add that at the bottom of the Manhattan page as well. So let's grab our measurement tool. And let's do a measurement from here to here, and it looks like 75 pixels. So I'm gonna add the same amount of space right here. 75 pixels. I was at a guide there, and then we're just go ahead and move everything up. All right, let's go ahead and do another measurement. I want to find out how much space is right here. So let's measure that. So I have 32 pixels. Yours might be different. That's fine. Just measure it, figure it out. And then from the bottom of the Q. Measure out how much space you need. I had 32 and then we're gonna place our questions right along this guide. Okay, So are fake. You section is done. We don't need to create a hover state so that our clients and our Web developer knows what the code. When a person clicks on this little button, what's gonna happen is it's going to open up a text box with the answer to the question. And since this particular tutorial is getting pretty long, we'll go ahead and break it up into Part two in the next two tour. You all right? So if you're ready to do that, let's go ahead and continue on in the next lesson. 38. Body Part 3: Hello and welcome back. All right, so we're gonna go ahead and finish up our F A Q section with our hover state that will display the answer to our questions. So the first thing we need to do is create a new Lear group for the current part of R. F. A Q section. Let's name it F A. Q. Let's put these two inside, and let's go ahead and navigate to our first question and duplicate it. Let's rename it Answer, and we're gonna pull it all the way out. Hand above the F A Q. Grouped layer. All right, so let's make some modifications to this particular layer or layers. We want to select the plus symbol that we created previously. Let's go ahead and zoom in here so we can see grab your text tool and click on it. So we get a little message from gimp asking if we want to edit our text. We do so click at it and remember the reason why we got that was because we resized the layer boundary and cropped it down to the symbol itself. So let's go ahead and select all with Commander control and a Let's change it to a minus sign and let's change it to White and then we'll just go ahead and grab our move tool and put it into position. So I'm just going to use my arrow keys to visually place it directly in the middle. Right there should be good. And now we just need to add our little hover hand icon in this area right here. So let's go to Google and do a hover state hand icon search. And then we want to slightly PNG and Pointer. And I think the one that I found is this one right here. It is a PNG file, So I'm gonna go ahead and copy this and paste it in. So we have a floating selection, so we need toe and it to a new layer by right clicking and selecting two new layer. Let's rename this hover icon. It's also way too large, So we're going to scale it down with our scale tool and for the heights. Go ahead and link this for the height. I'm gonna do 40. I'm gonna select layer to crop the content. Let's click scale. All right, so now that it has disappeared Let's go ahead and zoom all the way out with Commander Control and zero there it is. So as long as you have moved actively or selected and hover icon Lear selected, you can find it. Put it into position here and we are almost done. Let's go ahead and create our answer text box. We're gonna create a box, fill it in with some text and we'll be all done. So let's go ahead and go outside of our answer grouped layer just for a moment, and we're going to create a new earlier and let's call it answer text box and then just draw out a rectangle that will cover all three of the other questions below it. And then with White will fill it in, and we also want to add a stroke around it as well. So let's go up to edit and select stroke selection. I'm gonna change the foreground back to Black and add my stroke. Kate. Let's de select and I need to select my move tool and click on it and then use my arrow keys just to move it over a little bit. Right about there looks good. And now I'm a little bit too far on the right side. So let's go ahead and crop to content the layer boundary. And then with our skill tool, we're just going to bring it down just a little bit among go ahead and type in 305 and trying that to try three or 43 or four works. Scale it. Perfect. Okay, let's go ahead and zoom out here and let's go ahead and put this inside now. All right. Four. Our answer. We're gonna start off with a big letter, a whole capitals, and let's change this to green. Put a little period on the end, and I'm just gonna move this into position. All right? Let's go ahead and find some dummy text. I want to add some bacon. It's, um so I'm gonna do two paragraphs. It's gonna be all meat and let's click on, Give me some begin. All right, so that's probably too much content. So I'm gonna go ahead and describe the first paragraph. Copy that, and then I'm gonna go ahead and add that in. So instead of just clicking and pacing, let's create a text box where we want that text to be so I'm gonna click and drag out a text box right here and now I can pace that in and we don't have to worry about re sizing the text box. So little things. I'm gonna be introducing you to new tips and techniques for working with gimp. Let's go ahead and change the signs to 16. Let's go a little bigger. 17. I want to fill it in to try 18. Perfect. So 18 works, But it's the wrong font. Let's go to Georgia and I'm just gonna go down here and paste in some or contents what fills it all in. And she I want to make this box a little bit smaller. It's raining this begun ipsum, and now we just need to align it. So it's directly in the center from the top and the bottom of the answer text box. Say that 10 times real quick. All right, let's go ahead and draw out a selection. So right there should be good. Let's grab our alignment tool and change it to selection. Now, I'm not sure if I'm gonna be able to select this, so I'm gonna go ahead and try. Doesn't look like it. So let's pull this all the way out. Try again. No, we have to turn off all our layers in the process of making our alignment selection. And now we can go ahead and a line middle of target. We de select and let's turn everything else back on. And then let's go ahead and put those back inside. Now I do have a little bit of a blue color caste instead of pure white. And that's because of that color layer that we created inside of the Manhattan section. And what we need to do is we need to add a layer mask so that we can remove that color cast from the rest of the document down here. Or we can crap the layer boundary to that section. So let's go ahead and do that. Instead. Let's go ahead and create a selection around it and then go up to layer and select crop to selection de select, and now our crop layer boundary is set to that size, and it removed that color overlay from the rest of the document. Now I just want to clean this up a little bit because I have a little bit of text showing here. So let's go back inside of that text layer and delete all that content. Okay? Our section is now done. We have our hover state. We have all our questions. And when I present this to my clients, I'm gonna leave this hover state visible so that they know what it looks like when somebody clicks air hovers over this particular area. And then when we send it off to the web developer, they will come across these grouped layers and realize that this is a hover state and will code each one of the questions accordingly, based on the information that we gave them in our design. All right, so in the next tutorial, we're gonna go ahead and start working on the connect section. 39. Body Part 4: Hello and welcome back. All right, so in this lesson, we're going to cover designing the Contact US section. Now. They did have a contact US page that you could go to to fill out a form, and then they would call you back or email you back and then on their home page. They did have the address for their office as well as their phone number, but it's kind of stuffed over here into the left. It's kind of hard to read, and overall, I just find it's very difficult for potential customers to contact this company. So we want to make it as easy as possible and give them a Zeman E options. So I've put everything in one place versus dividing it all up, so we have a way to email them. We have their address. We have their phone number and the best time to call because their offices open between these hours. I've also included a Google map of their office so they can get directions directly from this section of the website. So all of these things, including this little former here, if they want to just email and submit a question or two. Or maybe they just want to contact them. This way, please. Call me at this time. Whatever the case may be, I just want to make it as easy for prospects or existing customers to contact them instead of dividing it up into separate pages like they did here, where they have a contact us page. And then over here, you kind of have toe search for the contact information. It's not really a good place to put it, because you're not really expecting contact information over here on the left. You want to find out more about the company first and then Okay, yeah. I like this company. I want to contact them. Well, yeah, it's all right here. But again, it's just a very, very bad design and a bad layout. And I find this to be much more inviting an easier for prospects or customers to get the information they need, because maybe they want to visit the office directly instead of calling or emailing. Maybe they're in the area, and they can just quickly get directions from the Web site here. So let's go ahead and put this design together. It's made up mostly of shapes, so it's gonna be really easy to design and put together. We just need to find some icons and then an image from Google Maps. So let's go ahead and do that first. Go ahead and go to Google. Type in free business icons and go ahead and download some icons for email. Find us and call us so use which everyone's you want. I recommend using PNG files because we are going to add a color overlay versus using icons that air pre colored or black and white icons. Then you can head on over to Google maps and type in 60 cutter mill road number 205 And here's the ZIP code right here. So go ahead and type that in. You should get something like this. And then what I did was I condensed it a little bit so I could have something in a more horizontal format. And then I just used a screen capture plug in here to capture, and then I copied and added it to my document. So go ahead, download those images and we'll go ahead and get started. Okay, now that we have our icons and our Google map, Let's go ahead and finish our contact section. The first thing I want to do is I want to take these icons and and a color overlay to change the color from black to a specific color. The problem is, and gimp, we do not have a color overlay tool. But that's OK, because I'm gonna show you how to add a color overlay to your icons. So the first thing I'm gonna do is grab my map icon or my address icon and I also placed these in order based on where they're going to be positioned, and I renamed them accordingly as well. So if you haven't done that, go ahead and do that next. We're gonna go ahead and create a new layer. I'm going to call it color overlay. And then I'm going to use my color picker here to select the blue from this button, and then we're going to fill it in with our bucket fill tool. All right, next step is to go up to our blending mode and select one of the modes and we're going to choose addition and bam. Look at that. We now have a color overlay on each icon. How cool is that? The only problem is it's adding that color overlay to all the layers below it. So our Google Maps has that color overlay as well. So there's an easy fix for that. And we talked about how to do this Previously on how to confine a specific color to specific layers. So you probably already remember how to do that. Which is, that's correct. We're gonna go up and create a new layer group. Let's call it color overlay. And then once we place all the layers inside of it, that color overlay is going to be applied just to the layers inside of that group player. How cool is that? All right, I love it. Okay, so the next thing I want to do is actually let's grab these layers and just move them down a little bit. I want to add our headline for this section, so we're gonna go into F. A. Q. We're going to select the F A Q text layer, and we're going to duplicate it. Let's go ahead and pull that out of that group player and put it above the color overlays. Let's close F a Q and let's rename this contact. And now we just need to grab our layer with our move tool and move it down. Okay. Now, with their textile will go ahead and rename this contact. Let's do all capitals, and I think we need to work on our spacing a little bit. I want to make sure that we have an equal amount of spacing here and here for consistency. But I also want to go up to our Manhattan headline appear to find the measurement here because I think we have less space here versus this area down here. And we did a measurement previously, but I want to tighten things up a little bit, and I want to use the same amount of space that we have here. So let's grab our measurement tool and measure from the top of this section down to the top of this letter and I have 57 pixels of space. Yours may be different. That's fine. Just measure it out because we're gonna go ahead and measure it out here and add a new guideline. I'm gonna go back to my move tool, and I need to select pick a layer or guide so I can get rid of this guy that we had previously. So I'm just gonna move that up. I can get rid of this one as well, because we're gonna move everything up to this guideline now. So back to the move, tool and select. Move the active layer and make sure you have the F A Q group player selected. So once you grab that, you can go ahead and move that up into position. And if needed, you can use your arrow keys as well to get everything aligned where it should be. All right, we're gonna go ahead and go back to our measurement tool and make another measurement from the bottom of this section with the same amount of pixels as before to place our contact section raid along that line. So let's go ahead and grab another guideline. Place it right there, and then we can move our contact layer into position. Okay, We're gonna go ahead and work on our shapes now and we'll work on the spacing. Once we have everything set up, I'm gonna go ahead and turn my grid on just for a moment. So because we were using a 12 column grid system. We can divide each of these sections into four columns and with. So let's use our measurement tool to figure out the with of those four columns in his 375 pixels. Now, with our rectangle selectable, we're gonna make sure we have fixed turned on with aspect ratio, and we're going to draw out a shape and then type in 3 75 We need to create a new layer before we fill it in with color. So let's do that. Let's call this one address. Let's pick out a light color gray. Any color is fine. Just go ahead and choose one and then fill it in with your bucket fill tool. Let's also add a stroke by going upto edit stroke selection, and we need to make sure we have black for the four gram and then add that stroke. Okay, I'm just gonna grab my move tool. I need to de select first with Commander Control and D and move that over. The other thing I need to do is I need to crop the layer boundary, so let's go ahead and do that. Go upto layer corrupt content, and then we're gonna move that right into position. Since we're here, let's go ahead and measure out our spacing, and I want an equal amount of space that we have from here for here. So with our measurement tool, let's go ahead and measure from the bottom of the Q Teoh here, and I have 34 pixels, some to go ahead and measure that out. Go ahead and zoom in so I can get a better measurement. Let's add her guide, and then we can go ahead and move this box into position. Let's go ahead and move that particular layer. Below are icons as well. Okay, let's go ahead and take our address shape and duplicated twice and then just go ahead and move it into position. I also want to rearrange the layers so that they are in order. And then let's rename earlier is I'm gonna do email and phone. All right, let's grab our alignment tool with the letter A and let's go ahead and turn off all our layers so it makes it easier for us to select those layers and then, with their shift key, will select the other two and Let's change it from relative to first item and a lying to the top. Okay, let's turn everything else back on. Besides our grid. Okay, Now we just need to fill in our shapes with the contact information for each section. And I think I just want to move these icons around because I want to put the address part over here. So it's right above the Google Maps because we're gonna make this Google map smaller in just a minute. So let's go ahead and move these icons around. We're gonna go into the color overlay and then just move him over and I'm gonna take my email icon. He moved over here and then phone in the middle. Let's also move the address down to the bottom just to keep them an order. And now we can grab our text tool to add that information. So the 1st 1 is going to be email. I'm going to change the font to railway and then for the size will do 36. And I also want to change the color to a dark gray color. So I'm gonna do 333333 Now the problem is because we have our text layer inside of this group layer. It's not going to allow us to change colors because the color overlay is being applied to it. So this is how we're gonna fix it. We're gonna take this layer, and we're going to move it above the color or Relais. And now, because it's above it, it's going to add the color that we selected with the text tool. Okay, let's duplicate that and let's name it phone and will duplicate that one, and we'll call it address and then just put them in the appropriate position. Let's go ahead and grab our text tool and renamed each one. Okay, let's go ahead and add some additional information. Now what the textile selected? I want to go over to my tool options to make my selections from here so I don't have to do it from H Layer individually. So we're gonna do Georgia for the font. We're gonna do 16 for the size, and then we'll use the same dark gray color click, OK, and we're just gonna type out a fake email address. I want to select all this text here and align it to the center. Okay, let's go ahead and work on re sizing our Google maps and adding our form over here on the left. And then in the next tutorial, we'll go ahead and work on realigning everything and getting everything exactly where they need to be. So for the Google Maps, what I want to do is I want to confine it to eight columns, so we're gonna make a shape that size and then we'll put the map inside of it. So let's grab our measurement tool and figure out the size that we need, and it looks like 775 pixels wide. Okay, let's get out of this particular group layer and come down here to Google Maps and create a new layer. Let's call it Google Maps and then, with our rectangle selectable, will go ahead and create a size of 7 75 by 500. So make sure you have fixed turned off. And let's type that in so 775 tab key Oops went too far. 500. So I think that's a little bit too tall. Let's go ahead and resize that down to 3 75 so it's more of a rectangle shape so that this map will fit inside of there a little bit better. I'm gonna press the X key so I can switch my foreground color, toe white, and then I'll go ahead and fill it in with my bucket filter, and I want to add that stroke again. So I'm gonna go to edit stroke selection and then black on the foreground and stroke de select Commander Control and D and let's put this layer below Google Maps. I need to change this name to Google Maps box. Okay, the next thing we need to do is we need to crop the layer boundary for our Google Maps box . So layer cropped a content and let's grab our map and resize. It would shift plus s. And I'm gonna type in 3 75 for the height which will match our box and then this. Go ahead and just move it into position here. Okay, Now we need to confine our map to that box. So we're gonna grab our Google Maps box and then are fuzzy. Select tool to make our selection back to the Google maps layer, then go up to layer and select crop to selection. Okay, let's go ahead and de select with Commander Control and D. All right, let's go ahead and work on our form. Now this is going to be the email submission form. We're gonna make the rose four columns wide, like we did before. Let's go ahead and select background and create a new layer called form name. And then, with our rectangle selectable, we're going to draw out a shape and let's make it 3 75 wide by 50 pixels tall. And then let's pick out that same gray color that we used before and then fill it in. Let's add that stroke as well. The select and let's go ahead and duplicate this one. Let's move it down. Let's call it, form email and let's go ahead and crop to content for each layer as well. Now, as far a spacing goes, I wanna add the same amount of space we have between the columns from the bottom of this form and the top of this form. So let's go ahead and measure this out. So I have 25 pixels. I'm gonna go ahead and measure this out. 25. Okay, Let's go ahead and turn our guides off. So the next shape I want to have the same amount of space, and I want it the height of this area right here so that the bottom aligns with the bottom of Google maps. So let's go ahead and measure out 25 pixels again. And then we need to measure out from here to the bottom of Google maps. So I have 224 pixels toll. So let's grab background and create a new layer called message. And then with our rectangle selection tool, we can go ahead and draw that out. Let's make sure we have the right size. Here. We have 3 75 by 2 24 Okay. Same thing again, we're gonna fill in with that great color, and then we're gonna add our stroke. Okay, so the last thing we need to do is and a title for each section. Go ahead and select my form name here so I can make sure that that layer is set up at the top. I also want to change my information and two options. First, let's do railway. Let's do 30 for the size and then are dark gray color. So this one will be name. I'm actually going to change this too bold, and then we're going to do email for the next one. So this just lets the visitor know what information to put into each row. And then we have a message. Okay, so that was the easy part. We have all our information. We have all our shapes. The only thing we need to do now is we need to align everything directly in the center of our shapes. Make sure everything is perfectly allying to make sure we haven't even amount of space between all the different shapes. And we're gonna cover that in the next tutorial. 40. Body Part 5: Okay, So in this lesson, we're gonna go ahead and finish up our contact section, and we also need to organize our layers. And right now I have a huge mess of different layers in different places. So I'm gonna go ahead and start organizing my layers and renaming them as well to make it easier to find what I need and also to group them together to help us online them. So once we have that done, we'll go ahead and align all the elements within the shapes, adjust the spacing, and then we'll be ready to move on to the footer section. - Okay , Now that I have everything group together, we can go ahead and begin aligning all the different elements. Okay, So for spacing, I have 29 between the icon and the top of email. And then I put the email address closer to email. So we know those two are together. And then I will align the rest of the icons based on that amount of spacing. So now I Congrats. My alignment tool with the letter A. I can click on my first box here, and then I'm gonna click on my email icons based on that layer group, I'm gonna set first item for the relative to, and then I'm going to align center in middle of targets. Kids, go and turn our guides on pick, layer or guide. And we're going to move this up to the top of email so I can line everything else. And we're also going to place a guide here above the email. So now we just need to grab those layers and put them into position. Now, real quick. I'm gonna come back to email because I want to make sure that each one of these elements is aligned in the center of the other elements as well. So to do that, we're gonna bring everything out of the group, that layer, and then we will select each one with our shift key pressed, and then a line center of target. Okay, We need to put everything back in and realign middle of centre because I think that's going to affect how it centered in that shape. Let's do the same for the phone information. We're gonna pull all that information out. We also need to do our measurement here of 29 pixels and then Let's align everything in the center. Okay? Everything back into the group and then a lying to the background. Now it's going to move it up a little bit higher because we have a second line here compared to our email address, which is fine. So we'll go ahead and just leave it like this because I want it directly centered in the middle of the box. Okay, We're gonna go ahead and do the same thing for this information as well. All right, let's go ahead and align our three lines of text here. I also want to make sure that there are lying perfectly top to bottom as well. So we're gonna grab our rectangle selectable to make a selection and align them middle of target. And then we need to make sure we have selection selected and then a line middle of targets . Okay, let's do the same for the other two. And then for the last one will just measure out the amount of space we have here at the top , which is 14 pixels. - Okay , We now need to put our icons back in the color overlay group so we can make sure that those have the correct color. Okay, let's take a quick look here. Everything is looking pretty good. The last thing we need to do is create a new layer group for the section called Contact. Okay, so that was very boring and very repetitive. But it's important that we have everything properly organized, so we know where the information is if we ever need to access it again. And it also helps the Web developer and finding the particulars of the Web page as they're quoting the website and having everything, any specific order makes it easier for them to access that information and called the website. If everything is all over the place, then it's gonna take him much longer to code the website and the end. It's going to end up costing your client more money to have that website coded because it's not properly organized and chances are you're probably not going to get repeat business from that particular company or that agency if you're working through an agency because your layers are not properly organized, yes, it's boring and repetitive, but it's imperative to be organized as a Web designer. It will definitely make things easier for you and everybody else that is going to be involved in the project, and it's going to make you look much more professional in the long run. Now that the contacts section is completed in the next tutorial, we're going to finish up this Web design project by adding a footer to the Web page, So if you're ready to get started on that, let's do it. 41. Footer: hello and welcome to the footer design for this website. It's real simple. We just have some social icons, some links and some copyright information. Now, typically, a footer will have a lot of links to other parts of the website. But what we've basically done is we've created a one page website, although it's not completely one page, because we do have some links that will navigate to other pages within the websites as well as some options for the team reviews in an about section if we do an about section because remember, we did do this section here, but we could create a different page for the about section that maybe explains a little bit more about the company versus the benefits of using the company. So overall it is mainly a one page Web design because we have combined ah lot of these individual pages into the home page itself. All right, let's go ahead and finish up the footer section and will be almost done with this Web design project. So let's go ahead and create a new layer for our footer background named Well, let's do foot or background click. OK, then with your rectangle selectable. We're gonna draw out a selection 1400 pixels wide and 200 for the height. Then with our bucket filter, Will will go ahead and fill it in with a blue color that we used previously and D select. All right, let's grab our move tool so we can move this down into position was also select layer crop to content to crop the layer boundary. I'm just going to use my arrow keys to move it down. So right there, so that's looking pretty good. So here's the easy part. We're actually going to cheat a little bit, and we're going to grab our social media icons from the last project. There's no reason to redo these particular social media icons since we've already done them once before. Okay, just drop them in there, but I'm not quite sure where they are. All right. It looks like they're down here at the bottom, so let's go ahead and crop the Lear content. All right? Now that we have those down there, we need to go ahead and turn off these layers so we can align them with our alignment tool . I'm gonna select the background first. and then with the shift key, select those and then relative to first item and a line center of target. All right, let's go ahead and add our links down here at the bottom. Go ahead and change the font color, toe white, and then I'm going to do five spaces and copy it so we can paste it to the end of the other links. All right, let's go ahead and align those center of target as well. I actually need to move this up a little bit higher, right about there should be good and then one more. We're going to do our copyright next, and then I'm gonna choose the dark gray color for the color of the fund and then just type out a copyright information. And then, just like before, we're going to align these two center of target and we need to move it up. Let's go ahead and put those into a new layer group. Let's call it footer content, and we're going to align this one more time. Actually, I think my copyright is too low. I want to bring that up a little bit higher because I want to answer more space to the bottom of it. All right, let's go back to the footer content group delayer and align it to the height of our footer box. So line middle of target. And then finally, we're going to do a selection between the social media icons and the copyright information because I want to a lying the links here directly in the middle of those two elements. So I pulled it out of the group. I'm going to select it and then change it to selection and then a line middle of target. Okay, de Select. Let's put this back inside and let's go ahead and zoom out and turn our content back on. Okay, so the Web design is complete. But what I always like to do before I handed off to my client for review is to go through the Web page and to see if there's anything that I forgot to do. Or if there's anything I can do to make the Web page better. Now, there are a few things that we didn't do, and I did that on purpose just so we can go back and take a look at the Web page and do some final tweaks and reinforce the fact that you need to go through your Web page one more time before handing it off because you don't want to hand off a Web page for your clients review. If there's mistakes in it, because if they see the mistakes, then that's going to make you look on professional same thing. If you're going through an agency, if they see mistakes, it's not going to reflect Good on you. So there's a few things that we need to do to make this one page better and to better organize it for our Web developer as well. So we're gonna talk about that in the next tutorial, and we're going to tweak this one page just a little bit to make it just a little bit better and to make sure that everything is aligned up properly. 42. Final Tweaks: So we're almost done with this project. We just have some final tweaks that we need to do to make the website just a little bit better and and a couple of the things that we forgot. So what did we forget to do? Well, we have a form here, but we have no submit button. We're gonna go ahead and and that in. We need to tiene up our spacing here and make sure that the spacing between here and here is equal to the spacing here. It looks off a little bit right now, so we want to make sure that our alignments are consistent throughout the entire Web page. So, for example, spacing between here and here equals here and here. So we're gonna go through and make some measurements to make sure everything aligns accordingly, and then we'll make adjustments as we go. So let's go ahead and start off by making our adjustments here. So we're gonna go ahead and Graham are alignment tool and make some measurements. I have 25 pixels here, which is what we had down here is Well, so I'm gonna go ahead and measure out 25 pixels here and I'm going to add my guide right there. Now, I just need to move everything up. So let's find that group layer. So it's in contact. We have our email submit form and our Google content here, and we can go ahead and just move these individually. And so I'm just going to click and drag this up. Same thing with this one as well. Make sure everything is a line that looks good. Looks like our email here is a little bit too long. Something to go back inside of that and resize it with my scale tool. It's gonna do 3 66 for the with That should take care of it. And then with my move tool, I'm gonna go ahead and select it and use my right arrow key to move it over one pixel. All right, so that's looking pretty good. Now, let's go ahead and zoom out, Okay? Now that we have the right amount of space between all these different elements, that part is fixed up. Now I want to go through and make sure I have the right amount of space between each of the sections. Right now I can see I have more space down here versus here. So let's go up to the top of her page and take a look at the spacing we used in this section. So right here we have. It looks like a lot more space between these elements and the top of that section versus what we did at the bottom. So for consistency were going to measure and add the same amount of space and it looks like 75 pixels. So I'm gonna go ahead and make that adjustment to this section as well, to give it some more breathing room and to give it that consistency. So let's go ahead and measure out 75 pixels. And if yours is different in that three column section, that's fine. Just figure out the measurement and then use that for the rest of the website. The other thing I can do is Aiken better organize these layers. Here we have two elements that should be grouped together in a new layer group called Benefits. And we could also put the title in there as well. And this is going to make it easier for us to move everything. Okay, so right here we have less space between this building and this content versus what we had before, but that's fine. This is the important information here, and it's very legible and easy to read. So I'm not really worried about that space right there. Okay, we're gonna go ahead and continue measuring out 75 pixels of space and adjusting each of the sections. - All right, so we've added the right amount of space between each section and we're left with some empty space at the bottom of the canvas. You may have more or less than I do based on the amount of space that you added between each section. That's fine. What we're gonna do is we're going to reduce the canvas size, and if I place my cursor right here, it's showing me at the bottom of the interface that the height is 49 42. So I need to go up to image and select canvas size and type in that new number, 49 42. You also need to take a look. Answer a preview here to make sure that it's taking that information from the proper spot. It's kind of hard to see with this length of a document, but I can see right down here it's cropping off that area that I need cropped. So I'm gonna click resize, and we are now in business. Okay, so we are almost done. Let's go ahead and create our submit button. Let's go ahead and create a new layer called submit button. We're gonna grab our rectangle select tool fixed is turned off. And then, for the size, we're gonna do 100 for the length and 50 for the height. This time, I'm going to select a green color that we used previously. And I also want to round the corners. So under select, select rounded rectangle, let's do 20 and then fill that in with your bucket fill tool. I'm gonna go ahead and turn off this background so I can see my button. All right, let's go ahead and move our submit button into position. I want to align it to the bottom here, so I'm gonna drag out a guide just to make sure it's right where I need it. And I also need to move it over to the left a little bit so it aligns with this guide and these submission rose up here and now I'm gonna go ahead and turn this message layer on, and I'm gonna go ahead and move one of these guides up to the top of the box because what I want to do is measure out another 25 pixels from the top of this button. And I'm just going to draw out a new background for it versus re sizing it because sometimes it gets distorted a little bit. So I'm gonna do 25 pixels there. New guide. Let's delete that message and create a new layer called message background. And then what? They're rectangle selectable. We'll go ahead and make that selection. And then we need to grab our color with our eye dropper color picker Tool click OK, and fill it in with your bucket fill tool and let's go ahead and add a stroke to the selection. Black on the foreground and click stroke. Okay, The last thing we need to do here is type out submit in all capitals. I'm gonna do Oswald bold for the Funt, and I'm gonna drop this down to 24 for the size. And let's change it, toe white. Okay, Let's go ahead and move it up, pull this down and then we just need to use our alignment tool to align that directly in the center of our button. But first, let's go to our submit button and select layer. Crop the content and then go ahead and make our selections. Looks like we need to turn everything off again and then make sure you change relative to back to first item and then a line center of targets. All right, let's turn all this back on again. Can New Layer Group again? And this time it's for the submit button, and then we can place that inside of our contact group layer as well. Okay, let's go ahead and zoom out. I think we are almost done. The other thing I want to do that, I think will make this a lot better is I want to tone down the icons so that they're not as intense, and I also want to tone down the social icons in the footer. So let's go ahead and grab those first. I'm gonna drop the opacity down to 50. This way our eyes aren't jumping all over the place because we have so many things competing for our attention. We want to give certain elements more importance over others. So let's go ahead and grab our icons here as well. You actually take this group that layer and drop that down to 50 as well, so that definitely it makes it much easier on her eyes and add some importance to other elements versus the icons. All right, let's take a scroll up and take a look at the rest of the site to see if we need to add anything else. OK, I think that's looking pretty good, and we've made our adjustments. Everything is properly aligned. We tweet the contact area to make it look a little bit better than it was before, as well as the social icons. And I believe we are now done. Congratulations on finishing this second Web design project. If you haven't done so already, go ahead and go through and complete this project for practice and then go ahead and try and figure out what you can do to make this Web page design better unique in your own so you can add it to your portfolio. So that's your next assignment. Go ahead and come up with something that you think is much better than this. And if you like, go ahead and submit it in the Q and A section for feedback. Once you're done with all of that, you'll be ready to move on to our third Web design project in the next section. Thanks for listening and have an awesome day. 43. Project 3: Seaside Briefing: Hello and welcome to our Web design Project number three for Seaside audio and video. So we're just gonna do a brief overview of the existing site What you can see right now and then I'll show you the design that I came up with, and I will give you some tips on why I designed it the way I did. That's first. Take a look at the original site so we can figure out what we need to do to improve this website. So initially, the first thing I see is their logo, seaside audio and video. And it looks like they took some free cheesy Clippard from Google images and slapped together a logo. It doesn't look very professional. It looks outdated, and overall, I just think it has a cheap feeling to it. So I think a new, upgraded, more modern, simple design would be better for their logo versus what they currently have. So again, this gives you an opportunity to up sell your services to include logo design. So if you have a client that is coming to you for Web design and they haven't existing website or even just unexamined sting logo, you may want to take a look at that and see if you can come up with something even better. And then you can try and Upsell them on your logo. Design service. Maybe have some camp ideas laid out ahead of time before you actually give them a quote. Maybe just show them something simple just to kind of give them an idea of why your logo is better than what they currently have. That's another option for you to consider when Web designing is to up sell additional services. So as you can see in their navigation, it's a very simple website. They don't have a lot of content. They have audio, video and contact us, and all three of these go to a separate page, even though all this information is on the home page as well. So it wasn't quite sure why they had those additional pages when everything is on the home page, so we'll see that in just a second. So my thought is, if we're going to do additional pages, I would want to add additional information versus what we have on the home page. I don't mind putting some basic information on the home page. You can see here they have samples for their audio and for their videos, which is fine. But if they want additional information, then we can put that on those extra pages. So we're gonna keep the navigation pretty much the same. All right, so after that, we have social media front and center. And if you've never heard of this company before and you're visiting their website for the first time, you're probably not ready to start following them on Facebook and Twitter. Why would you want to follow somebody you don't know anything about? So I wouldn't make this prominent for that reason. That's why you're better off designing this up in the header and making it smaller, so it's not as prominent, but people can still easily access it when they are ready to follow you on those social media platforms, and I just don't like the idea of putting it front and center. So let's get started. Get started on what? It's not really a very strong headline. We have a very poor image for the background as well, and then we have their contact information again. I'm not ready to contact you. I don't know anything about your company? Why would I want to call you? You haven't given me any reason to call you yet, so contact information again. If you want to put your phone number in there, I would put it in the header and I would make it small. So it's not dominant, but still easy to access. So all of this information right here can be combined into the header. So now we're getting into why I should do business with you, audio and video for your brand. And then it goes on to explain what they do. And they have a called action, which is good. Find out more then. We have two links here that are the exact same links that navigate to the audio and video pages that are available up here in the header. So they're repeating that information again. We don't need to put this information in here twice. It's already in the navigation, but I do like the idea of putting samples on the home page because from here you can sample the type of work they've done before and see the type of work they've done before. And then you're going to navigate to the other pages. If you want to find out more information, So in this case, having what is known as a sticky header would be beneficial so that when a person scrolls down that navigation is still available. So that would be something that I would recommend for this website in particular. The other thing I would do is right now they only have one video sample, and the image for that video is pretty bright. It does grab your attention because it's very, very vivid, but I don't think it's a very good quality image overall, and I would probably change this. But more importantly, if we didn't change the image, what I would recommend is having a playlist of videos. Here we have several audio samples. I would like to see several video samples as well four, maybe five, maybe seven or eight videos, samples to include in this area as well, so that you can cater to different audiences based on who you're targeting, whether it's a professional company that you're targeting, or maybe you're doing weddings as well, you're going to want to have some video samples of that as well or other types of life events. You're gonna wanna have some video samples of each type of service or events that you cater to, and the types of companies that you cater to, whether it's just business to business or a combination of business to business and weddings and other types of life events. So that's another thing I would recommend for this particular company. And then down here, we have a contact US section, Drop us a line, give us a call, Harry. They make it easy for people to contact them either through calling or descending a message . And then in the Footer, we have a huge copyright section with additional information not related to the copyright. So again, I would recommend just including copyright information and then links to privacy policies and things like that. Because if you take a look up here, they have a cookie policy, so I wouldn't necessarily put that cookie policy link in this area here. I would recommend putting it in the footer can. Then we have some links to social media again, which is fine, and then we have powered by Go Daddy website builder. So this tells May this particular company built their website themselves, and it shows it's poorly designed, has poor layout, a cheap logo. There's no styling of the text, and overall, the user experience can be improved by having a website professionally designed. So we're gonna go over my particular design now and why. I think the options and the design that I created is better than this and how it's going to provide a better user experience. So let's go ahead and take a look at it. What I decided to do was create a new, simple modern logo. It's nothing fancy. It's not going to help me win any awards, but it's much more professional than this particular logo right here. I've added a couple other items to the navigation as well as a hamburger Icahn, which will show or hide the navigation when clicked. I didn't think it was necessary to have that navigation visible, since a lot of that content and links to this content is available on the home page now, as part of their logo and their image, they were trying to incorporate seaside palm trees, ocean view things like that, and I felt that overall that their logo and their branding would be better served with colors of the sea side. So that's why I chose a dark blue for the water and then a nice orange to a pinkish reddish Grady int color to represent the sun. So that's why I chose those colors and not images or clip art like they did originally. And then in the hero section. I just have a huge text statement making your vision a reality. It doesn't really say much, but maybe it grabs your interest because you have a vision yourself, and that's why you're going to this particular company and you're not a video AGA for or you don't know how to properly capture audio professionally. So this statement alone isn't really going to make anybody want to buy their services, but it may grab their interest Now. The one thing that I did add for the hero section are these logos of companies that this particular company has worked for or worked with for live events. So this adds social proof or credibility. It increases the credibility of this company and makes it look much more professional here . Cheesy, cheesy. There's no real credibility. Yeah, so you're on social media that's not credibility or social proof. There's no proof you may go on their Facebook page and they may only have 100 fans. Big deal. This is a bigger deal. You've actually worked with these companies. This video AGA for has worked with these companies. This is much more impressive than this. So I've included this in the hero section so that it's above the fold and visitors to this website will see this information and if you can, which would be even better. Is having links that go to a page on each one of these websites that showcases your client and the work that they've done. Then the first thing that we're going to see after we begin scrolling down are the services that they offer. And then each one of these can link toe another page for more information. So again, you need to sell your services. Why should I do business with you? Well, if you're looking for somebody to do video or audio for a live event while you're going to be interested in life events or life sound, or maybe you just need some consulting services so each one of these can go to another page that will sell them on why they should do business with seaside audio and video. Then after that, we can then see some audio and video samples. I didn't really change much for the design for this particular part of the website. It looks very similar to what they currently have now, and that's because they have their audio samples hosted on sound cloud. And what you can do with Sound Child is you can take some code or a plug in and put it on your website, and it will then showcase a playlist of all your music or audio for people to sample. So there's not really a whole lot that I would want to change with this particular design. I did just clean it up a little bit. I did make the images and the play buttons larger, but all these design updates are dependent on whether or not you're allowed to, or if you even can modify the code that's provided by Sound Cloud. I would prefer to see these images, and the play button is larger. But again, that depends on whether or not it can be done. And if it can the budget of the client because then the coder would have to go in and customize this based on what's available from Soundcloud. Next under that, we have our video samples. And for this design, I included a large red play button because they are hosting their videos on YouTube and you can see that with this little play button right here. That's a YouTube play button logo, so I thought it would be better to make it larger. But what I would recommend for this client is to host it on something else other than YouTube for the simple fact that once the video's done, you're gonna start seeing a playlist from other videographers and other types of events. And that may distract the visitor because then they're going to start navigating to other videos. They're gonna get sidetracked, and then they're going to leave the site. So we want to keep visitors on our website as long as possible, so I would recommend hosting the videos elsewhere if you can do it on Soundcloud than I would recommend doing that or choosing another service like video. The other thing that I've done for this particular design is I've added a playlist or a slider by adding some buttons over here to left and right, and we're currently on four of five video samples, and then I updated the connect section, and I've included additional text for a free consultation. So why should I connect with you? What's in it for me while I'm gonna give you a free consultation that's going to increase the likelihood that somebody is going to send you a message, whereas down here we just have contact us. Well, drop us a line. Why should I drop you a line? What's in it for me? So you want to make sure that you give the visitor a reason why to send you a message, and you can do that by just giving them something in return for sending you a message. And then I simplified the footer with a simple copyright line and some social media icons. The only other thing that would probably add is a privacy policy and a cookie policy that links to those pages for that content. And then I also took the background that I created for the header and the hero section and added it to the footer to balance out the overall design and connect everything together. So overall it's cleaner. It's more modern. It's more up to date. It's more user friendly, and it looks much more professional than what they currently have now. So for this project, we are going to recreate this particular design. I'm gonna show you how I did this. Grady int applied some of these special effects how to deal with situations when you have content coming from another website. How to get these images because it wasn't easy or straightforward getting these particular images. So I'm gonna show you how I got those images and then we'll go ahead and create a simple modern slider for our video section, and then we'll round it off with our connect and footer. So if you're ready to get started on this new project, let's do it 44. Logo: Hello and welcome to the first tutorial for our seaside project. The first thing we're gonna do is we're going to create our logo real simple design, so it's not going to take a lot of time to design. So let's go ahead and get started. So let's create a new document with command or control and the letter, and we're going to size it 200 by 100. We also want to set the background color toe white click, OK, and we're going to use to new fonts that we haven't used yet. And you may need to download and install these if you want to use the exact same funds. If not, that's fine. Just use any font you want. It's just for practice. So the 1st 1 is on Google fonts. It's fonts dot google dot com, and this is the fun we're going to use. Not sure how to pronounce it, but just go ahead and do a search for this font at Google Fonts and the other one is called a copper plate, and it can be found at fonts geek dot com, and you can download this font for free once you have those downloaded and installed. We're gonna go ahead and type out Seaside for the first part of the logo. But first, let's go into tool options and type in our information for that Funt. So I want to choose copper Plate. We're going to do 36 for the size and then for the color, we're going to use this dark blue color. So just type in this number here. Click OK, and then go ahead and type out Seaside. So I did the first letter in a capital. The rest are lower case. Even though they look like capitals, they are a little bit smaller. So I'm gonna go ahead and select all, and I'm going to bold that font as well. So let's go ahead and just move this up into position, and then we're going to grab our textile again, and then we're going to type in the name of the next fund we want to use. Let's do 20 for the size and we're going to use the same color, so just type out audio and video in all camps. Let's bold that as well, and let's go ahead and grab that text and move it over sort of lines with left side and the right side of seaside. Let's go ahead and grab it and move it down just a little bit because we're going to put a line that divides to to right here in the middle. So let's go ahead and turn on our GYNs and then just place a guide on either side of the text and then, with your rectangle select, will go ahead and draw out a selection. And let's make the size or the height two pixels, grab your bucket. Fill tool, same blue color. We need to fill it in. But before we can do that, we need to create a new layer. Let's call it divider de Select, and then use your move tool just to move it down into position. Let's go ahead and turn on our show layer boundary under view and then go to layer crop the content, and then we're gonna go ahead and align it with our rectangle select tool and our alignment tool. Let's also place the relative to two selection and then a lying middle of target. Okay, let's go ahead and grab our audio and video layer, and let's drop the opacity down just a little bit. Go down to around 80 for the opacity. Let's hide the gyn's and let's go ahead and place this inside of a new layer group as well called logo. And let's also make sure we save this file in case we need to make modifications to it later on. Next, we want to make sure we have our master grid document open so we can start from a blank slate for our new design. Once you have that open, you're going to grab your logo group layer and drag it into the document and then move it up into position up here into the header section. So that's the beginning of the header. Our logo is designed, and we're going to complete the designing part of the header in the next tutorial. 45. Header: Hello and welcome back. All right, we're gonna go ahead and work on our header as well as our hero section because we need to create ingredient that is seamless from the header down to the hero. So we're gonna go ahead and create the hero background as well. So before we create those backgrounds, let's go ahead and define the height of the header and the hero section, as well as the logos that are the social proof that add credibility to the company in that hero section as well. And we're gonna add some guides for each one. So the 1st 1 we're going to click and drag out a guide down to 150 then create another guide and 550 and then the final one is going to be at 700. So go ahead and add those three guides and we'll go ahead and create our ingredient. Let's go ahead and create a new layer. Let's call it ingredient. Okay. First, we need to define our color, so I'm just gonna grab the colors from the document that I created previously. So go ahead and type in this number for the bright orange, and you need to set that to your foreground. And then for the background color, it's going to be this bright pink color. So go ahead and type in this number right here. Okay? Once you had those colors set to your foreground and background color, we condemn. Go ahead. And Graham are ingredient tool. We need to go to the grating editor, which can be accessed by clicking on this icon right here and then up here and ingredient Editor, you need to define your colors if they're not automatically set, and you can do that by right, clicking and selecting left color type, selecting foreground, and then right click again. And for the right color type, you're going to select background color and then for our white triangle right here. We want to make sure that's in the middle, right around 0.50 So just get that as close as you can, and then we can create our ingredient. We're gonna start Argh! Radiant in the top left of the header. And we're going to drag down to right here in the bottom right of the hero section. So just click, drag out release and then hit your enter or return key to create that greedy int. And now it's an ID to our layer. So let's go ahead and create a separation between the header and the hero section by adding a drop shadow. So to do that, we're first going to create a selection with our rectangle selectable right around the header. We're going to copy that with command or control and the letter C and then paste with command or control and the letter V and your layers piano. You're gonna get a floating selection, right click and select to new layer. Okay, so we now have our Grady int for our header. Let's call it a header background and let's actually change this one to hero background. Make sure you have header background selected because what we need to do is we need to increase the layer boundary of that current layer. Right now, it's being cut off right here, which is fine, if that's all we needed. But because we need anti drop shadow, it's not actually going to show up because that drop shadows going to come down here below that layer boundary, so we need to increase the layer boundary to show the drop shadow. And we can do that by going up to later and selecting layer to image size. Okay, now we're gonna go up to filters light and shadow and select drop shadow. So from here, you can already see that the drop shadow is being applied. And then we can use these options here to customize the drop shadow. If you're not seeing the drop shadow, make sure you have preview turned on so we can increase the amount of the drop shadow being shown through the X and Y sliders. And if you have both of them linked together, you can adjust them both at the same time. So more or less, I'm gonna go less. I'm gonna go right around two. I'm also going to increase the opacity to make it darker. And I'm going to do that right around one. You can make yours however you want. I'm gonna go ahead and use these options here and click. OK. And now we have our separation between the header in the hero section. Okay, so the next thing we need to do is define the Grady int. So it only shows up in the hero section and not the rest of the document. So let's make sure we have our hero background selected. And then we're going to make a selection around that hero selection. And then we're gonna go up to select and select Invert and Net will invert the selection so that it selects everything but the hero section. So we have the header selected and we have the rest of the document selected. So now we're going to create a layer mask, fill it with white, and then we need to make sure we have black set to the background color and then hit your delete or backspace key to remove that Grady int from the rest of the document. Now, of course, it didn't really make a difference up here because we have our header background there as well. Let's go ahead in de select with command or control and the letter D Let's Haider guides for a moment. Our header and part of our hero section is now defined with that radiant, and it's seamless. Other than that drop shadow separating them. The colors are seamless. Let's go ahead and move our logo up to the top and let's go ahead and align it directly in the center in that header from top the bottom. Let's also make sure it's aligned to the left of the column as well. If not, grab your move tool. Make sure you have moved the active layer selected. Click on it and then move it into positions on the line to that first column of the grid. Go ahead and turn off the grid. I'm gonna keep that at the top for now, so I have easy access to it. Okay, let's grab our local layer now and our rectangle select tool and make a selection. I'm gonna grab my enlightment tool with the letter A and I'm going to click on my logo. I'm going to set relative to selection and then a line middle of target. So now it's evenly spaced between the top and the bottom. All right, let's go ahead and work on our navigation next. We've already done it a few times, and we're going to basically use the same concept that we used in the previous designs by adding five spaces after each menu item, copying it and pasting it at the end of the others. So with your text tool, lets go into two options and set the font to railway the size to 24 the color toe white. And you also want to make sure that you're spacing is reset to zero because we don't want any extra spacing between the letters for our navigation. And let's go ahead and type it out. Kate. Next we need to create our hamburger icon, so we're gonna do that with our rectangle select tool. Let's also create a new layer first called Hamburger, and then for the size we're going to do 30 by eight. And then we're going to use our bucket tool to fill that in with white camera and zoom in just a little bit and de select. And before we forget, let's go up to layer and select crop to content and duplicate that layer two times with your move tool. We're just going to move these down into position. Okay, let's grab our alignment tool with the letter. A hold on your shift key. Select them all set relative to first item relative to the first item and a line left. The other thing we want to do is distribute and even amount of space between each one of them as well. So let's scroll down and set the offset. Why? To 12 and then select this option here to distribute the space between them. Okay, let's go ahead and select the top layer, right? Click and select. Merge down and then do it one more time and that takes all three of those layers and combines it in tow. One. All right, let's go ahead and take our new elements here and align them to the right side of our column here. And then let's align it to the top in the bottom with their rectangle select tool and our alignment tool. We also need a gram, our navigation pull that out if needed. And then we're just gonna move that over next to our hamburger icon right about there. And because I added those five spaces to the end of contact, I can see the layer boundary right here. And that gives me an equal amount of space between each of the words and the hamburger. I come. Okay. I'm gonna go ahead and grab my rectangle select tool again so I can align the navigation directly in the center from top to bottom. Okay, everything is in its proper place. The last thing we need to do is and a hover state icon to represent what happens when you click on the hamburger icon because the navigation itself will be hidden until you click on it. So what we're gonna do is we're gonna go to the previous file that we worked on, and we're gonna grab that hover icon from this document versus trying to find it again online. So I'm just gonna locate it. It's going to the F A Q section, and then just click and drag that layer over to our current document, move it into position and that's s she moved that hover icon above the hamburger layer must rename this. I'm gonna remove copy, and then we just need to organize our layers. So let's go ahead and create a new layer group for the header and that's it. Our header section is now done. Okay, So in the next tutorial, we'll go ahead and create our hero section and and the logos for social proof 46. Hero: Hello and welcome back. All right, we're gonna go ahead and work on our hero section and finish up the design of this part of the project. It's gonna be real simple. We're gonna add some text and some logos for our social proof and add some credibility to seaside audio and video. So the first thing we need to do is find some logos, any logos or fine. I just picked out five random logos that may need the services of an audio and video professional. Doesn't have to be the same logo's. Just do a Google image search for some logos, download them, and then add them to your document. Because all we're going to do is align them with our alignment tool and just continue practicing with some of the tools that we're going to need to use as a Web designer. So once you have them downloaded and added to your document, we can go ahead and get started. So I'm gonna turn on my guides and grab my move tool, and I'm going to select the first logo and align it to the left column. Then I'm gonna grab my last logo and align it to the right side and this aligns with hamburger icon over here and this one with the logo over here. Let's then just move the other three into position. Now, the other thing you may need to do is resize your logos. So my logos, I re skilled with the scale tool shift plus s, and I resize the height to 75 pixels. Now, if you have a logo like this one here, there's no need to resize it to 75 for the height because the width is going to be much, much wider than it is now. So I'm just gonna leave this one like it is, and I'm just going to align it into the center of the column anyways and then evenly distribute the amount of space between them. So real simple. So let's go ahead and do that alignment first, where it's aligned within this area here from top to bottom. So we're gonna make our selection with our rectangle selection tool. We're gonna grab our alignment tool with the letter A and I'm going to click on that first logo. Doesn't look like it's going to allow me to select it, so I may need to turn off the header. So let's try that. There we go. Now that I have that I have selection selected four relative to, and then I can select a line middle of target. Okay, I'm gonna go ahead and do that for each of the other logo's as well. Okay, I'm gonna change this back to first item, and then I'm going to select my first logo with my alignment tool, and then I'm going to hold down my shift key to select the other logos. Okay, You probably know what's up next. That's right. We are going to distribute, and then we need to make sure we have our settings for the X and y set properly. I'm gonna set wide back to zero. I'm not quite sure what I need for the ex yet, so I'm gonna try 250 and then I'm gonna select this option here. Now. The problem is, it didn't give us an equal amount of space between h logo. So sometimes that's gonna happen. Based on the layer and the size of those layers and the number of layers you have selected , it's not going to always give you exactly what you want. I'm gonna undo that with Commander Control and the letter Z. So what can we do to align these logos evenly amongst them? Well, instead of using distribution, we can align this logo in the center and then use our selection tool to align this logo between these two and then this logo between these two and that's still going to give us an equal amount of distribution. It's not going to be the exact same amount, but they will be more symmetrical and closer to being evenly distributed that way. And that's because this logo here is longer than this one, and it's gonna have more or less base than the other. So let's go ahead and grab our middle logo with our alignment tool. We're gonna go up and select image and then a lying center of target so that aligns it directly in the center of our document, the width of our document. So now we can go to our selection tool and make a selection between the two, and then we can grab this logo, change it back to selection and then align it center of that selection. Now we can do the same thing with this logo over here with our selection tool de select with Commander Control nd and turn off the guides. And now it's all aligned perfectly. Okay, the next thing we need to do is and a drop shadow that matches the drop shadow that we've placed in her header. So let's go ahead and do that. Let's turn our guides back on. Let's make our selection around that section. I'm going to select my background layer because I want the background to stay white. We're going to copy it with Commander Control and see and pays with commander Control. Envy. Can we have a floating selection? So we're going to add that to a new layer. Let's move that up. That's called social proof background. Let's go up to layer and select layer to image size, and now we can go up and select filters, light and shadow and drop shadow to create that drop shadow to match the one previously. Now we should have wrote down the exact numbers that we used previously because it's going to default to the default settings, and I don't remember the exact number I used for the X and the Y, And the opacity I know is pretty close to one for the opacity. But I'm not sure about this, but it's close enough for now. So just remember that in the future, if you're going to use a drop shadow multiple times in a document, it's best toe have the exact same numbers. So you have the exact same shadow throughout the document. Okay, I'm gonna go ahead and click. OK, so we have our drop shadow nail, and we have the separation between this section and this section down here. The only problem is we have a drop shadow above it as well. So what I'm going to do is I'm going to make a selection with the rectangle selectable that excludes that drop shuttle. But we want to make sure that we select the drop shadow down here. And then when we go up to layer crop to selection, that's going to crop that layer boundary and remove the drop shadow from above that bar. We don't want that bar above it because it's gonna be too much separation. So we have our hero section and our separation from here and here and now we just need to add our text. So let's grab our text tool and let's change the font to copper plate. We're gonna do 1 15 for the size and then for the color, we're going to choose this dark blue color click. OK, let's make sure everything is set to zero down here, and then we can go ahead and type out the first line, select all and making bold. So it's a little bit too big. I want to make sure that I stay within the left side of the first column and the right side of the last column, So I'm gonna grab my textile again, hand select all and change the size until it fits within those boundaries. So let's try 107 pretty close. So text to again select all and it looks like 105 is going to be perfect. And then on a second line with our text tool will type a reality. Let's make it bold right about there. Let's go ahead and put them in a new layer group. It's called hero content, and then we're going to make our selection in that area. So right here and then with our alignment tool will go ahead and select it. But let's go ahead and turn everything else off. That's above it. We can actually grab it. And then a line to the selection center and middle of Target came in a de select turned all of these back on and this organized are layers just a little bit here. I'm going to create a new layer group called Social Proof, and we're gonna put all our logos inside of here. And then one more new layer group called Hero and that's it. Our hero section is now done in. The next tutorial will start working on the first part of the body, So if you're ready to get started on that, well, let's do it. 47. Body Services Part 1: Hello and welcome back. All right, So the next part of our design project is to create four columns of information to help sell the services of her clients to their prospects. So we're gonna divide up four different sections evenly along three columns of our grid. We're going to add a title and some information that will be a snippet of what that service is all about. And then, if that entices the prospect, they can click on the title or the image to navigate to the live Events page or the Video Productions page to read more about those particular types of services that they're interested in. And as faras the images go, we're gonna place them inside a circle and a drop shadow, create a stroke, and in regards to the actual images that I used, I just use some images from shutter stock. We can actually see the watermark on the images, and that just means the images are copyrighted. And as you know, in order to use them on a life site, you need to purchase the full license off those images and then get reimbursed from your clients. So if you want to download the exact same images. Go to shutter stock dot com and type in this number into search for the first item. This number for the second image, and then this photo I d for this image. And then finally, this photo I d for this image. So we're gonna go ahead and click on this little magnifying glass, right click, select copy image and then paste it into our documents. Okay, Let's go ahead and do that for each of the images. I have a floating selection for this one, so I'm going to right click and select to New Layer. Okay, let's rename these. I'm gonna call this one Consultations, live audio video productions and live events. I'm also going to rearrange the order that they're in want live events first this one next and then this 1/3. Okay, now we have our images. We need to go ahead and start re sizing them based on the number of columns we have and the number of images. So we have 12 columns with four images, so we're going to make them three columns wide. So let's grab our measurement tools so we can find out how many pixels wide. We need to make our images, and it looks like 275 pixels wide. So I'm going to re scale my images so that they're a little bit taller than that. So let's actually do 300 pixels tall. So let's grab our scale tool with Shift Plus s. Let's make sure they're linked together and select 300 for the height. And let's do that for each of the images. Okay, with removed told just move them down into position here. Actually, that one should be first this one second hand, this 1/3. All right. That was the easy part. Now comes the fun stuff. So our next step is to create some circles to place our images in and tow. Add some drop shadows to them as well. Let's go ahead and turn off our hero and header sections first, and then grab your Ellipse tool in the tool options. Make sure you have fixed aspect ratio selected, and we want to make our circle three columns wide, so just draw out a circle and we know the size is to 75. So type that in and then create a new layer called circle and then with our bucket fill tool, we're going to fill it in with white and then de select. Let's also change the layer boundary by going up to layer and select crop the content. And now we're going to create a second circle that's going to hold our image. We're also going to make this circle smaller so that when it fits inside of this circle, the bottom circle will create our weight stroke for us. So let's go ahead and type in to 65. For the size, we're gonna create a new layer again called Image Circle, and then we're going to fill it in with white. We also need to crop the content off the layer boundary and then with our lame it tool, we're going to click on the first layer. Holden, your shift key and click on the second layer. Then we want to set relative to to the first item and align center and the middle of target . And now our image circle is in the center of the bottom circle. All right, let's turn off the M circle. We're gonna grab this circle layer. We're gonna go back up to layer and select layer to image size because I want to add a drop shadow to this layer. And if we don't increase the layer boundary than that, drop shadows not going to show up like we had talked about in previous sections. So let's go up to filters light and shadow drop shadow and then adjust to match your other sections. Or at least get it close cause that it still don't remember what I used. I think it was something like that and then, for my opacity was 1.6 Now we can go back up to layer and crop to content again and turn on your image circle. Okay, let's get our image inside of that circle. Now we're going to grab live events and move it up to the top, and also use your move tool to move it over that circle. Now I want to compose this image in a certain way so that the foreground is in the center of the circle. Well, it's kind of hard to determine how to do that when we can't see our circle. But if we click on the circle, we see the layer boundary and then with pick a layer or guide selected with our move tool, we can click on the image and then position it inside of that layer boundary that we can see. Once we let go. It will disappear, and we can no longer determine the composition unless we click on that image circle and start over. I'm gonna go with that. That's fine with me. Now I'm going to grab my fuzzy select. You'll make sure your image circle is selected and click in the center to make a selection for that shape. Let's go ahead and invert the selection back to live events. Add a layer mask with white, make sure black is set to the background and then hit delete or your backspace key and boom ! Your image is now confined to that shape. How cool is that? I love it. All right. That's pretty awesome. All right, let's go ahead and go to Image Circle and create a new layer group called Circles. Let's put both inside, and now all we have to do is duplicate this three times for the other images. I'm gonna grab my move tool, move the active lier, and I'm going to move it over to the far right, and I also need to move this group layer to the bottom so that I have everything in the proper order. Let's make this 3rd 1 and then this one will be the 2nd 1 And let's rename these circles one through four. Now let's go ahead and create a new layer group for live events and the circles. Let's call it Image one, and let's go ahead and turn on our guides, and then we're going to move this group layer so it aligns to the left of the first column . So right there should be good for now. And then we're gonna take our other circles and place them where they should be. And this one should be in the fourth column along the left side. And let's go ahead and move these into position as well. Now let's move our images into position according to where their circle is. I'm going to turn off any circles that have not been worked on yet, and we're going to confine our image to that shape. Now we're gonna select circle one select, pick a layer our guide, and then move your image into place. Now we just need to grab our fuzzy, select tool, make a selection in verdant, and then add a layer mask to the image delete or backspace key and then the select. Okay, so we just need to repeat that two more times. Okay, let's go ahead and add some new layer groups for each one of these circles. Now, with our Lehman Tool, we're going to align them all to the top. So select your 1st 1 shift key and click on the others. First item still and a line to the top. All right, so we still have a lot more to do. We need to add our titles in our paragraphs, but the tutorials getting a little long. So let's go ahead and continue the rest of this section in the next tutorial. 48. Body Services Part 2: Hello and welcome back. All right, we're gonna go ahead and finish up this part of our body section. We're gonna add some content, a background align, everything organized, are layers and will be good to go. So let's go ahead and start off with our text tool. And let's change the funt. I'm gonna make it bold and let's make it 24 for the size. And I want the dark blue color for those headlines. So let's go ahead and type those out. Now, if I hit my escape key, it will get me out of this text box and then I can go ahead and grab another tool without adding that particular shortcut to the text box. All right, let's Paul all these layers out. Let's also organize them so that they are in the correct order. And then we're gonna go ahead and turn our grid back on and use our rectangle select tool and our alignment tool to align it to the center of these three columns. Let's go ahead and turn off our hero and header section as well, so we could go ahead and align this and we need to set it back to selection and then a line center of target. Let's go ahead and do the same thing for the other three headlines as well. All right, let's go ahead and grab each one of the layers. We'll do in your ship, K select all four and then a line to the top. Let's go ahead and put them in a new layer group as well called headlines. I'm gonna go ahead and grab it as well, so I can just move it up a little bit, just want to zoom in. So what I want to do is I just want to move this up without moving it away from where it's supposed to be. So it's still centered between the columns. I'm just gonna add a guide here. This way, I can just place it along this guide. All right? I can go ahead and remove this guy now because I no longer need it, at least for the time being. So for our paragraph, we're just going to grab some dummy text. We don't need a whole lot. I'm just gonna grab a couple lines here, copy it, and then with my text tool, I'll create a text box and then just paste it in. We also need to change the font itself. So I'm gonna select all and change it to Georgia 12 for the size, and then we're going to use the dark gray color that we used previously. I'm just gonna bring this in a little bit so that it aligns with our text here and here. And then in our tool options, we can select justified to the left and to the right to fill it in. Just gonna increase it on both sides just a little bit. And now everything is the line right there. All right, let's get out of there by hitting our escape key, and we're gonna go ahead and zoom out and duplicate this paragraph three times. Let's pull it out of the headlines group and go ahead and duplicate it and then just move them over. Let's go ahead and turn our grid back on. And the line are paragraphs to the center of these three columns, just like we did before. All right, let's hold down the shift key and select all the layers so we can align them to the top. Let's go ahead and put them in order and then renamed them paragraph one through four. All right, We need to add a little bit of space between the paragraphs and our images here. So let's go ahead and measure out the distance between here and here. So I have 21 pixels. I'm gonna add the same amount of space here, let's and her guide. And then we can just grab our images here. Let's actually put all four of them in a new layer group, okay? We just have a couple of things left to do, and that's to organize our layers just a little bit. And then we need to take all this content and align it directly in the center of our services background from top to bottom. Let's go ahead and grab our pair rest layer and create a new earlier group to put everything inside of it was call it Body Services and then we're gonna put all that content inside except for the services background. Let's just leave that out for moment. Now, In order to align this, if we select this body services layer, you're gonna notice the layer boundary and we can see that there is a lot of white space or empty space right here, and there's none at the top. So when we go to align this with our alignment tool, it's not going to center it perfectly in the middle of our target. Because of this extra space, there will be more space down hair than up here. So the so as you know, what we can do is we can crop the layer boundary to fit just under our images right here. The only problem is, as you know, it's going to crop off that drop shadow, and then when you go to increase the layer boundary, the drop shadows will not come back. So, in effect, when you crop it down, it's going to erase the bottoms of the drop shadows. And we don't want that because that's going to remove that visual effect. So here's how we're going to get around it. We're gonna go ahead and duplicate this group player and turn off the original. So now we can go into this group layer and find all the layers that are too tall and then crop the content to the bottom of the circles, and then we can use our alignment tool toe alignment, top to bottom. And then we can grab our other groups layer, turn it back on and move it manually into position and it will be aligned perfectly. So you just have a little bit of work to do. We're gonna go inside of here. We're gonna find our images. Let's go to the 1st 1 and let's elect our bottom circle and we could see that the layer boundary is below the circle. Now, if we go up to layer and select cropped content, we're gonna get a message. But saying that it's already cropped to its content. And that's because of that drop shadow, the drop shadows actually being feathered all the way to the edge right here. So what we need to do is we need to manually set the layer boundary to the edge of the circle itself. And we can do that with our rectangle selection tool. And I'm not really worried about the sides. So I'm just going to start here and bring down the selection to the bottom of that circle, and then we can go up to layer and select crop to selection de select and now we have it exactly where we want it. So we need to do that for each of the circles. So let's go to the other three layer groups and do the same thing. Okay, let's go ahead and turn off our heroes section here if you have it turned on and it looks like we reduced the amount of space. But we still have some space there, and that's probably because of either the images or the other circles. So let's go back inside of them and click on each layer, so it looks like the image layer is a little bit lower there. That circle is fine, so we're gonna go ahead and do the same thing for each of the images as well. All right, let's go ahead and grab our rectangle select tools so we can make a selection the height of our background. Now remember, we can't select the services background because the layer boundary is too tall, and if we crop it again, we're going to delete that drop shadow. So it's just easier to make a selection and then use our lame it tool. Grab it relative to selection and then a line middle of Target K. Go ahead and de select Turn on your other group layer, and then with your move tool. Just go ahead and click on it and then use your arrow keys to move it down. Let's go ahead and delete the body services. Copy and boom. It's now perfectly aligned top to bottom. How cool is that? All right, so that's your work around for situations like that. And we just need to put our services background layer inside of that group layer, and we're all done with this section of her body. Congratulations. All right. In the next tutorial, we're gonna go ahead and start working on the audio samples part of the body. 49. Audio Part 1: hello and welcome back. So the next part of our project is to create the audio and video samples section, and we have a lot of work to do. So we're going to probably break this up into three, maybe four different lectures. And in this tutorial, we're gonna go ahead and start grabbing our images, maybe make some buttons at some text and then in the next tutorial, will start putting everything together. So let's go ahead and start off by creating our initial headline for this section. Let's change the font to copper plate and the size at 48 then the dark blue color is fine for this as well. And then just go ahead and type out the following. I'm gonna select all and make it bold as well. I'm not worried about aligning right now. We'll go ahead and do that in the next tutorial, so I'm just gonna move it up here for now. The other thing we need to do is we need to increase the canvas size because we're running out of room. So let's go up to image canvas size and let's make it 5000 for the height make sure it's unlocked and then click resize. So the other thing I need to do is I need to grab my background layer here, press the letter D than the letter X that gives us white for the foreground and then with our bucket fill tool, we can fill it in. But we first need to go up to layer and select layer to image size to change delayer boundary. And now we can go ahead and fill that in with weight. Let's go ahead and create our background for our audio section. So in the audio section, we actually have to backgrounds because we have a drop shadow separating the top play list from the bottom playlist. So we are going to create two shapes for the background. So grab your rectangle selectable and make sure you have fixed turned off and then just click out and draw out a shape because we're going to do a custom size of 11 76 by 830 then with command or control and the letter C. We're going to copy, make sure you have your background layer still selected and then command or control, and the letter V to paste it right. Click on your floating selection here and select to new layer. Okay, I'm just gonna use my move tool to move it up just a little bit. And I also want to change the layer boundary to fit the image because we need to add a drop shadow. So let's go to layer layer two, image size. Let's go ahead and do our drug shadow filters, Layton Shadow and drop shadow. All right, we're gonna make another box for the top part of the playlist. So back to the rectangle selectable. And this time we're going to do 11. 76 for the with and 360 for the height. Let's make sure we have our selection inside of our document. Go back to your background layer copy and paste again and then right click to new layer. Increase the layer boundary size again and then add a drop shadow to that layer. Let's also move that layer above the other layer and let's rename these top playlist background an audio sample background. We can go ahead and grab this top one and just move it up. Now you may notice that the drop shadow is much darker here, here and here compared to over here in these areas. And that's because we're putting another drop shadow on top of another drop shadow, so it makes it darker. So let's go ahead and fix that. We're gonna grab our rectangle select tool and make a selection. I need to make sure that I'm getting the very top hurt of that drop shadow. So it's right above it. And then we're going to create a layer mask White, make sure black is set to the background and then delete or backspace key. So that removes the drop shadow from the sides. We still have a little bit more here, so we're gonna go ahead and Graham are right tingle selection tool here again to go along the signs and then we're going to delete it from there as well. And then same thing on the side. Okay, we have our drop shadows in our background set. Let's go ahead and grab some images. So the first thing we're going to do is do a Google search for a sound cloud logo. I'm going to select this one here is 300 by 300 it's a PNG files, so make sure you have a PNG file and then right click on the image, copied the image and then go ahead and paste it with Commander Control and the letter V and then on the floating selection, select to new layer. And then we get a little air message saying that it belongs to the layer Mass because that's what I had selected before I pasted. So we don't want to do that. And I just wanted to show you that in case you have that problem now or in the future, I'm gonna go ahead and undo that with Commander Control and the letters. A. So when pasting in from your clipboard, you don't wanna have a layer mask or any layer smaller the layer boundary than the item that you're pasting in. So the best thing to do is to grab your background layer because it has a layer boundary much larger than our image. And then we can pace that in and add it to a new layer, and then we just need to move that layer above everything else so we can see it. Let's rename this logo and let's go ahead and move it up here into the top, right? We're just gonna grab all our images, and then we will scale them in just a minute. Or maybe in the next tutorial, we'll see how long this tutorial goes. All right, we're gonna go ahead and grab six images. We're going to go to soundcloud dot com forward slash seaside dash audio, and then we're going to scroll down just a little bit. And for the first image, we're going to select this one. The only problem is when we right click, there is no option to copy that image. So let me show you how you can still get this image even though it's not available from this menu. So down here we have an item that says Inspect. I believe we've talked about this previously. In most modern browsers will have this option. And if you don't, you either need to date your browser or use a different browser. So this option is available in Firefox chrome and safari, and I'm currently using chrome. Once you select that, it's going to highlight the code for that item that you right clicked on. And then over here in the right column. You're going to see an option for the background image, which is this image right here. So if I turn this off, we can see that the image disappears. And then we have a URL right here that will take us to this image. So just copy the URL and then paste it into a new tab, and then you will have access to that image. So go ahead and copy of the image. We're gonna go back to the background layer and paste it and then added two new layer. Now, we just need to grab five more images, and it doesn't really matter which images you get. Any of these will work. We're just going to right click, inspect. And then we just need to get the URL. And you can also just right click and select copy link address and paste it in. So go ahead, download five more images, Adam to your document, and then we'll continue on adding some more information. And I'm gonna go ahead and speed up this part of the tutorial so you don't have to watch me do this And slow motion. - Okay . I went ahead and renamed each one of the images as well. 01 image through 06 image. So if you haven't done that already, go ahead and do that. And then I'm just going to move these over to the left side here. And then I want to grab my text tool so we can start adding some content for each one of the images. And we're going to change the fund to Georgia. Actually, let's use this font instead. And for the size we're going to do 18 and then are dark gray color. So let's go back to our website here, and we're just going to copy some of these lines here. So copy that information and then paste it in with your textual and then just copy five more lines of content and paste it in. Let's go ahead and put these in the proper order as well, and then we'll rename them a one content through 05 content. Let's go ahead and create some content appear and grab our wave form image, and then we'll go ahead and continue with this lesson in the next tutorial. I think for this one will make it a little bit larger Let's do 24. And I also want to take our second line and select just that and change it to our dark blue color. Okay, so the last thing is to grab a way form, Let's go back up to the top here. And then what we want to do is we want to start playing this playlist so that we can see the timer and the color orange coming in. So I'm just gonna do for five seconds, and then I'm going to grab my screen capture software, which is built into the Mac, and then I'm just going to make a selection around it, capture it, and then I'm going to bring it into my document. So just go ahead and use any screen capture software that you use capture that way, form image, and then bring it in and let's rename it way form. All right, so we still have a lot to do. We need to organize our layers. We need to create buttons, and we're gonna go ahead and start working on some of that in the next tutorial. 50. Body Audio Part 2: Now that we have all our images and our content, let's resize the images and move everything into position. Let's go ahead and turn off these three groups layers, and then we're going to select the entire document with command or control and the letter A so we can align our headline in the center of our document Can d select. Now let's take our logo and make it smaller. So grab your scale, tool shift plus s and let's do 100 for the height and then just move it back over here to the top, right? This is gonna move this one over, and I also want to increase the size of our way form. So shift Plus s again, and I'm just gonna fill in as much of the area here is I can so right about there should be good. I'm gonna go ahead and make a selection around my way form so that I can make that layer boundary tighter to the actual image. So I'm more concerned with the bottom and the right side versus the left in the top. So I'm just gonna go right there and then under layer. We're going to select crop to selection De Select and I want to align this to the bottom of our image and I'm gonna put both of those in a new group layer. Let's go ahead and select all again so we can align this to the center of our document. Now we can see that there's a little bit more space on this side vs this side, and that's because our background images need to be aligned to the center as well. So let's go ahead and de select, and we'll do that next. So I don't want Teoh allying the layer with a layer mask because we're not going to be able to drop the layer boundary down to that background. So we're gonna grab our audio sample background the larger one first, and then we're gonna go up to layer crop the content and now we can use our alignment tool to align it to the center of the document. And then we'll move the other one manually. So let's go ahead and turn that layer off so we can select this one select all again and then de select can go ahead and grab this one. I'm gonna zoom in here so I can take a look at it. And then I'm just going to use my right arrow key to move it over to the right que command or control in zero to zoom out to the interface. So we do need to make a button up here as well as some buttons own here. But let's go ahead and fix these images and the content first. So we're gonna take each one of these images and scale them down to about a height of 60. Let's go ahead and put her top image inside as well as our bottom one, and then we're going to align them all to the left and distribute the space evenly. I need to go ahead and turn off my layer mask here is well, so I can select them. Well, Daniel, shift key and select each image. Okay, We're going to a line to the left. Now let's go ahead and distribute the space between them in the offset. Why? We're going to type in 90 and select this option here to distribute verticals centers. And now we have an equal amount of space between all of them Now. You may remember previously when we were working on our logos, we weren't able to do that because the size of those layers were different from each other . But when the layers are all the same size, it will then evenly distribute the amount of space. Okay, let's go ahead and take our content and move them up into position, along with one of the images that it corresponds to. Let's also put our logo inside of the top images as well. Okay, now we're gonna take our content and align it to the center of our images. Grab your rectangle selection tool, make a selection, and then we're going to align middle of target. So let's do that for all the different layers. - Okay , Next, we're going to allying all this content to the left, So alignment tool, shit key. And then click on each one of the lines. It's changing back to first item and a line left. All right, let's take all this content that we just worked on and create a new layer group for it called bottom content. Go ahead and grab this and just move it over here to the right a little bit. So we have some room for our buttons. And I also want to make a selection to align all of this content directly in the middle of this selection. And just make sure you turn off that top playlist again so you can select this content, change it back to selection and then align middle of targets. So de select, turn this one back on. Let's take a quick look here. Okay, so we're almost done. We just need to create our buttons and align a few more elements and organize our layers a little bit more, but we're going to do that in the next lesson. 51. Audio Part 3: okay, we're almost done. We're gonna go ahead and create some buttons organizer layers, and then we'll see if we have anything left to do. So let's go ahead and create our first button, appear at the top and let's grab our Ellipse tool, and we're going to create a button that is 60 by 60. Let's grab our dark blue color and then fill it in with our bucket filter wool. But first we have to create a new layer. Let's call it top button. Fill it in the select. All right, let's go ahead and create our paws icon. Let's grab our rectangle select tool And inside of here I'm just going to draw out a rectangle, and we also need to create a new layer called Pause Icon. We're gonna grab our bucket, fill tool and fill it in with White. Go ahead and de select. Let's go ahead and take that icon and duplicate it. And then, with the move told, we're just gonna move it over here to the right, just to give it a little bit of space and between and then right, click on the top Pause icon and select merge down. Okay, there's are Pause Icon. Let's go ahead and crop the content for this layer and the top button. And then let's go ahead and put them in a new layer group called top button. All right, let's go ahead and grab that so we can go ahead and put it into position. Let's go ahead and align it to the left of our way form, which is right there. So that looks good and then the top of the image. So I'm just gonna use my move tool and move it up so it aligns to the top there. I also need to grab my content here and then move that down so it aligns to the top as well . Let's go ahead and create a new layer group for this content here. Let's name it Top playlist. I'm also going to take my logo and take it out of that group layer so that we can select this content and align it to the top and the bottom of the background. So we're gonna do that by making our selection and then, with their alignment tool, we're going to align middle of target. I'm also gonna take my logo and I just want to move it up just a little bit. Just going to use my arrow keys. So right about there. And then we could put that back inside of that group earlier. Andy Select. Let's go ahead and create a new layer group for this section. And let's call it audio samples. Okay, we're gonna finish up the rest of our content here, and then we'll put those layers inside of it. All right, We're gonna go ahead and create our buttons for our bottom playlist now and just like before, we're going to start off with our Ellipse tool and let's make it the same size, which was 60 by 60. Let's create a new layer called the button and then grab your dark blue color and fill it in de select so we can see it right now. And that's because it's below some of the other layers here as well. Okay, lets just zoom in a little bit. Let's go ahead and align it to the top of this image, so that looks pretty good right there. Let's go ahead. Turn the guides off. Now let's make a little arrow on the inside. That's pointing to the right. So we're gonna change our foreground color back toe white and then with our rectangle select tool, we can make a square shape. So let's make it 30 by 30. And let's create a new layer called Arrow Doesn't look like one yet, but it will and then go ahead and fill that in with white and de select. Now let's go up to layer and crop content, and now we're ready to rotate. So we're gonna grab our rotate tool from right here, and once we click on it, we can then click and drag to rotate from here. We can use this lighter up here or weaken type in a specific angle, and I want 45 for the angles so tight that in click rotate Now we just need to cut out part of our diamond shape to make it look more like an arrow. So we're gonna Graham are ellipse tool and create an oval type shape and then just place it over that diamond shape. So you get an idea of what it's going to look like. Let's create a new layer called cut out and then just fill it in with any color. Go ahead and de select and create a new earlier group called Arrow. And then we're gonna take the cut out and the air earlier and put it inside. And now we can take this cut out layer to, well, cut out that shape by using our blending modes and selecting a race. Okay, let's go ahead and grab our arrow and just manually center it so right about their looks good. And now we're gonna create a new layer group for it called hover button. And that's because the other buttons that are not being hovered on will be a different shade of blue. Now we just need to duplicate this hover button four times. But first, let's go ahead and organize a few of these other layers before we start adding Mawr to our layers panel because it's getting a little crowded right now. I'm gonna move this layer to the top, which is then followed by our audio samples. We have a top play list and aid bottom playlist, so I'm just gonna put that inside for now and then. We also have some backgrounds here that we can put inside of each layer group. So let's go ahead and those in. All right. So that helped clean up our layers panel just a little bit. Go ahead and move my hover button above everything else for now, so we can actually see it. And let's go ahead and duplicate that layer one time. Drag it down, and then, with our move tool, we're going to drag that layer down. Let's make sure it's a line to the top here, and let's go ahead and change the color of that button as well. And we're gonna do that just simply by dropping the opacity down to around 80. Now, before I forget. Let's go ahead and grab our hover button and crop the content. And let's do that for this button as well. And let's rename it button one. Let's duplicate it, and then we'll go ahead and move it into position, and then we're going to repeat that two more times. All right, let's make sure everything is aligned properly. Go ahead and add a guide here that aligns with this image, appear at the top, and then we're going to grab our buttons and move them into position. Okay, I think we are almost done. Let's go ahead and take all our buttons and put them in a new layer group called Buttons. And that's it. Our audio samples section is now done, and we're ready to move on to the video sample section, and we're going to start that in the next lesson. So if you're ready to do that, well, let's do it. 52. Body Video: Hello and welcome back. All right, we're gonna go ahead and work on the video sample section, and we need a couple of images to get us started. So let's head on over to pick sabei dot com and do a search for live concert images. Any image will do. So just go ahead and pick one out. I'm gonna select this one, and I'm going to download 12 80 by 8 53 Go ahead and download that and then add it to your documents. We also need to go to Google images and do a search for YouTube, video plate icons and then under tools. I selected medium for the size and transparent this 1 800 by 800. That's a little bit too large, this one still too large. But I think we'll go ahead and start with this one, and I'm gonna go ahead and copy this one and paste it into my document. And now let's go ahead and rename these layers and let's also go ahead and turn them off momentarily, because what we need to do first is create a background for this section. So I'm actually going to go up to our audio section and select this background here. If you have pick a layer or guide, it will select that background layer when you click on it and then it will open up all the group layers that it's inside and then you congrats it and duplicated. And now we can just click and drag this out and rename its Go back up here and close this group layer. And now I need to go back to move the active layer so I can click and drag it down into position. So right about there should be good, so that makes it much easier versus trying to create one from scratch. Okay, let's resize our YouTube image shift plus s for the scale tool. And then as far as the size, we're going to go 680 for the height, and then I have a width of 10 20. If you picked a different image, it might be different on the with, so you may need to go in and crop it or go back and download this image. So I'm gonna scale that and just move it into position right here. Let's go ahead and center it inside of this background. So with our alignment tool, we'll go ahead and select the background, actually need to turn off the audio samples first. Now I can select that shift key, click on the image and then a line center in middle of target. Okay, let's go ahead and add some buttons to the left and right side of the image, which will represent a way to navigate two different videos that are part of the playlist. So we're gonna go back up to our audio samples group to layer, and we're going to select one of these buttons. So let's go back to our move tool, pick a layer guide and click on the bottom one. So I'm gonna go ahead and grab button for and duplicated and pull it down, and I actually want to put that below the YouTube image so that part of it is hidden behind it. So I'm going to rename this button, right? I'm going to duplicate it and then call it Button left. Okay, back to move the active layer. Let's put our left button over here and then our right button over here. Let's close this out. All right, so we need to go ahead and resize thes buttons and make them larger. So grab your left button shift plus s and let's make it 90 for the height and the width and then the same for the right button. Okay, let's go ahead and move this into position. I actually want to center these buttons top to bottom with the background, so I'm gonna grab my alignment tool again and let's turn off audio samples. So, like the background shift plus the button and then a line middle of target, let's do the same thing for our other button here. And the other thing we need to do is we need to take this button here, the left one, and flip it horizontally, so it's pointing in the other direction. So what? They are left button layer selected. We're gonna go up to layer, transform and select flip horizontal. I'm gonna go ahead and click on this layer as well, so I can move the arrow and the button to the left a little bit. Let's zoom in and grab our measurement tool so we can measure the edge of the outer part of the button to the edge. of the image so we can add the same amount of space on the other side as well. So it looks like 67 pixels. Let's also take this image and lower the opacity, so it's not as intense. The only problem is we have part of our buttons showing through now, which is an easy fix with our selection tool. I'm gonna grab my rectangle select tool and make a selection. Let's turn on our guides because we do have a guide right here that my rectangle select tool is snapping, too. So I'm just gonna move that guy it over to the right, just a little bit to match where the edge of the images and let's check the other side as well. So that looks good. Now I can go ahead and make my selection. Let's grab our left button and and a layer mask and white black said to the background, and then delete or backspace key. Okay, let's keep that selection. The weight is grab the right button and same thing layer mask and then delete or backspace key. Okay, so that took care of that part of the video player. Let's go ahead and find our YouTube play button and let's go ahead and scale it down just a little bit right about there should be good, and then let's go ahead and align it to the background. Okay, now let's go ahead and create our circles that represent the number of videos in the playlist. We're going to create a few with a white circle and an orange stroke, and then another one with a solid blue color representing the video that's playing at this time. So let's grab our Ellipse tool and let's draw out a circle and make it 26 by 26. We're gonna create a new layer I'm gonna call a playlist circle. I also want to select the orange color from our header. Let's grab our eyedropper tool and make a selection, so I'm going to use that to fill in this particular circle. Let's de select and let's go ahead and create a new layer, and then we're gonna draw out a smaller circle this time of 20 by 20. Go ahead and fill it in de select. We also want to take both of these layers and crop the content. All right, let's use our alignment tool, new to select both and a line center and middle of target. And then, of course, a new layer group. Let's go ahead and duplicate this four times. Let's put them in the proper order. Let's go ahead and grab them and move them apart. So I name this one circle five, because it's going to be the end one. I'm gonna put the 4th 1 here, which is going to be a solid blue color. So just like before, reading Graham are Ellipse Tool. We're going to size at 26 by 26. I'm going to create a new layer. Then we're going to select our dark blue color and fill it in with that color. Okay, let's go ahead and take this layer. Nail and crop the content and then use your alignment tool to select all of them so that we can align them. Let's select a lying toe, bottom or top. Either one is fine, and then we want to distribute and then for the offset we're going to set. Why? To zero and x toe 100. Let's try that out. I think that's a little too much, so I'm gonna go down to 65. Okay, I like that. Let's go ahead and put all of these into a new layer group. It looks like it's off center a little bit. So let's go ahead and grab that group layer. Select all. And then a lying center of target can. Let's go ahead and de select. And let's take a look here. We need to clean up our layers here a little bit. So let's go ahead and create a new layer group for the video player and the buttons. Okay, We're gonna lead the background out of it for a second because we need to align all of this content in the center of our background. Right now, we have a lot more space up here versus down here. So we're gonna grab this group layer here, and then use your alignment tool again to click on the background and then a line middle of target. And then go ahead and put your background in there as well. Okay. I'm gonna go ahead and turn on our audio samples as well. All right? I think we are all done with the seaside audio and video samples. In the next tutorial, we're gonna go ahead and tackle the contact sections, So if you're ready for that, let's do it 53. Body Contact: Hello and welcome back. All right, we're gonna work on our contact section, and what we want to do is we want to add a bribe. We want to entice visitors to give us their email address. Now, if they really, really want to find out information about our company or your client's company, then they're going to give this information freely. But some people may need an extra push or an incentive for giving this information because either they're not really sure if they're ready to take the next step or they're afraid of being span because they've been spammed one too many times. I know how that feels. I'm sure you know how that feels as well. So if I knew how to spell, we would have a bribe that would help entice them to give us that information. So we want to make it as easy as possible to contact us, but also give them something in return. The original website did not have that. The only thing they really had was contact us and drop us a line. But why? What's in it for me? So I always think in terms off what's in it for the person visiting the website. What benefits are they going to get for doing something? So the reason why I'm emphasizing this is because we want to not only give our visitors to our clients website a good user experience. We also want to help our client get more business or more email addresses so they can market to them later on. So let's go ahead and create our contact section. It's nothing fancy or extravagant. It's not gonna win us any awards, but it's straight to the point. Connect with us for a free consultation or something for free. So let's go ahead and do that. Actually, before we get into doing the contact section, we need to create our background for the previous section and to put all of that content into its own group layer. So let's grab our background layer and our rectangle selection tool and make a selection so we can create our background copy and paste it, and then put the floating selection into a new earlier called audio plus video background. Let's also take the layer boundary and increase the size by selecting image size and then go to filters, light and shadow drop shadow to create the drop shadow for that particular background. Now let's go ahead and create a new layer group called Audio Plus Video. Okay, now that we have that done, we can go ahead and create our contact section. So let's go ahead and start off with our background. First, let's go ahead and turn our guides on and let's grab our measurement tool and draw out 800 pixels tall and then with our rectangle selection tool again, we can go ahead and make a selection based on that size. And then, just as before, copy paste set it to a new layer. We're gonna go up to layer and increase the layer boundary, and then we're going to add our drop shadow again. I am going to rename it Contact Background. All right, we're ready to add our content. Now Let's go ahead and Graham are text tool for the front. I'm going to do copper plate. Let's do 60 for the size and are dark blue color. I'm also going to set it too bold and then for a bribe, we're going to change the font. Let's also make that bold. I'm also going to drop the opacity down to around 90 just to give it a little bit of separation from our title. And I also want to make the text about the same width as our title. So we're gonna use the spacing option. I'm just gonna go ahead and a line these first and then with our textile weekend, select all and then increase the spacing. So that looks pretty close to go ahead and do 1.2, maybe a little bit more. Try 1.4 and 1.6. Okay, that looks good. Let's go ahead and put this information into a new layer group. Okay, let's go ahead and move this information up and then align it with their Lehman tool. We're going to select all first, and we need to turn off our other layers up here. Make sure you have selection selected and then a lying center of target. All right, let's go ahead and create the form. Nail was first turn on our grid. Looks like we need to increase the size so we can actually see it with grab our scale tool and make sure it's unlocked. And let's do 5100 for the height and our forms are going to be five grid columns wide. We're gonna have to at the top, and then we're gonna have one column available on each side, which will give us a symmetrical form directly in the center. So let's go ahead and Graham are rectangle selectable so we can create our first form row. Let's create a new layer called name, and as far as the size goes, we're gonna do the five columns, and we're going to make it 50 pixels toll. So 4 75 by 50. Let's pick out a nice gray color and then go ahead and fill it in K d Select. Let's duplicate it and rename its email. Let's also take both of those layers and crop to content. Let's move email over to the right, just going to make sure that we have everything aligned to the top, so that looks good. And then we're gonna create the message form again with our rectangle tool, and we're gonna do 10 columns wide, and then as far as the height, let's do 360. Create a new layer called message and fill it in. Okay, as far as the spacing. We're gonna do an equal amount of space between these two columns here and then this row and the message rope. And it looks like I also need to move both of my rose up here or to the right one pixel. So I'm going to select pick a layer or guide so I can select each one individually and then just use my right arrow key to move it over. Now we're gonna grab our measurement tool so we have 25 pixels there. Let's go ahead and draw out 25 pixels down here. Let's go ahead and and er guide, and then we can move this road up. I'm just going to use my arrow keys. Perfect can. We don't need the grid anymore. Let's go ahead and turn that off and then let's organize these layers here. Any nuclear group, we'll just call it form. Let's add her labels for each part of the form and then for the funds were going to do this font here and let's do 24 for the size, and then we're going to choose the dark gray color that we've been using in previous parts of the project. Go ahead and move. Name up to the top and we're gonna type out name here. Let's make it bold. Next, we have email, and by selecting the layer that were adding the text to will create that new layer above it , which just makes it easier, so we don't have to worry about moving it after. Okay. We're just gonna go ahead and align everything now. Okay, let's take a measurement here so we can add the same amount of space on the other side. So I have 18 pixels. So another 18 here. Okay, we're gonna line these to the center of the top and bottom of the row. So what? The rectangle select tool lets crab. That looks like we're gonna have to move these out of that group layer so we can select it and then selection and a line middle of target can. Let's put that back in, do the same thing for name. Let's take a measurement for the top of this part. So I have 17 pixels. So 17 pixels here for message candles. Put name back inside, and then we're gonna take the form, and I'm just gonna move it up a little bit. Okay, Go ahead and grab your rectangle selectable. And for this button, I want rounded corners like we've done before. And you may remember if we go up to select weaken, select rounded rectangle from here. But there's also a option inside of our two options right here says rounded corners. And you have to select us in. Add your radius before making your selection. So let's go ahead and type in 20 for the radius. And then for the size, we're going to do 200 by 85. I'm going to use the same orange color that I used previously, and I'm gonna fill that in de select. I just want to zoom in, make sure that everything is aligned properly right here. Looks good. And then what? Their text tool will go ahead and change the font to railway. I'm gonna use bold Let's try 24 white gonna make this larger. Let's try 36 when I try 44. Let's see if that fits inside. I just wanted as large as possible without going too close to the edges. All right, so that looks pretty good. All right, let's go ahead and grab our alignment tool so we can align. Submit directly in the center of the button. But first we need to grab our button layer and crop the content. And then we can make our selections with our alignment tool when changes back to first item and then a line center of targets and middle of target. Okay, so we're gonna go ahead and create a new layer group again called Button. Let's go ahead and clean up the rest of these layers here. So another new layer group called Contact and that's it. We're now done with the contact section. So one more section left and that is the footer. We'll go ahead and finish that up in the next tutorial. 54. Footer: Hello and welcome back. All right, so the last step for this project is to do the footer. We're gonna keep it real. Simple, riel clean. We're just going to add a copyright notice. Some social media icons and ingredients background for the social media icons I use the ones that we downloaded from a previous lesson. So go ahead, find those files and bring them into your document. I went ahead and put them in a specific order, and I also renamed each of the layers representing that particular social media icon. Now that you have that set up, let's go ahead and do the Grady int background, and we're gonna actually go up to our header and make a copy of this header background so that we can use it for the footer background. Let's go ahead and rename this footer background and then just drag this layer all the way down to the bottom, and then with your move tool, you're going to click on the background so you can drag it down to the bottom of the canvas . Now, right now, at this point, it's going to take forever. So if you have a squirrel button on your mouse. You can actually use that to navigate to the bottom of the page much faster. So that's something you have to set up in preferences if you have a scroll button. So let's go ahead and put this into position. And we have a lot of empty space now, so let's go ahead in crop are canvas to the bottom of the footer, minus the drop shadow. So I'm at 42. 21 and I know that because I placed my mouse cursor right at the bottom and down here, it tells us the height of our campus at that point. So once you figure out the height, you need to crop to go up to image and select canvas size and type it in. All right, I'm gonna go ahead and crop the layer boundary for this particular layer as well. Now it's showing its be on this point right here, and that's because of the drop shadow, and that's fine. We really don't need to do anything else with the background, so we're just gonna leave it right there. Let's go ahead and do our copyright notice, and then for the fun, I'm going to do Railway bold and I'm going to set it to 12 and white for the color. Okay, let's turn on our guides and let's align it to the far left of the grid. Let's go ahead and turn on our grids here, and it looks like it's this line here. So that's where I want to align it. And then let's go ahead and align it. Top the bottom of the footer background as well. And by now you should know how to do this. We're gonna Graham are rectangle select tool alignment tool and then a line to the selection middle of target. Okay, lets de select and let's go ahead and more on the social media icons. And I'm gonna place the YouTube logo all the way over here on the right side. And then I'm just gonna grab the other ones as well. Go ahead and turn off the guys. I don't need those right now. All right, grab your alignment tool so you can align these to the top. I'm gonna change the offset to 100 and it looks like we have more space here than here and again. That's because this logo is larger. We need to offset the space here even more. But instead of trying to figure that out manually with these options down here by typing in numbers over and over again until we find it, it's just easier to grab your measurement tool and make a measurement between these icons here, which is 46. For me, yours might be a little different. That's fine. And then from here to here, we're gonna go 46 So we need to move everything over to the left. But we'll do that in just a second. I want to go ahead and and a white overlay for this icon. So let's grab Instagram and create a new layer called Overlay. Let's fill it with white, and then we need to change the blending mode from normal two addition. And then we had to place those two inside of a new layer group. Once we do that, will then be able to see our icon in weight. All right, let's go ahead and grab these four layers and put them in a new layer group called Social Icons. All right, we're almost done. Let's go ahead and move everything over to the right. We also need to crop the content, and now we can go ahead and align it with our alignment tool via our selection. De select. Let's go ahead and create a new layer group for the footer and that's it. Our Web design is now done now, just like we did in the previous project. We need to go through our Web design and see if there's anything we can do to improve the overall design. Or maybe we made some mistakes and we need to correct those before we send them off to the client. So we're gonna work on the final tweaks of this Web design project in the next tutorial. 55. Tweaks: overall, I think we greatly improved the existing website. With our new design. It's much more user friendly. It's much more professional. The content is easier to read in. The overall layout is much better than what they have on their original site. Plus, we've added some information to help bride people in order to submit for additional information and provide their email address. And with the sticky header, we would then make it easier for them to find the next page of information that they need if they didn't navigate to it from this area here. And of course, we did add some credibility with our social proof banner right here in the hero section. So I think overall the design is much better. But there are some mistakes and things that we need to do to tweak it, to make it even better. And basically it's the spacing of the different sections are not consistent. We have this element here that is not properly centred with the background. We have a huge amount of white space right here. I'm not liking that at all. This area is unbalanced and it's just not good design. We could do some different things to make it better. One. We could create two columns of audio samples, or we could move this content over and feature a large image here. In this case, this image that we're playing can show up here so you could set it up, maybe to auto play the first video once they navigate to that section and then that image, whichever image corresponds with that audio will display here. But if they have enough audio samples, you could do multiple columns versus one, and that just fills up this empty space and balances everything out. The other thing that we didn't do is add our hover state icon that we used appear in the header. We need to put it here and create grouped layers, indicating that this is in fact, a hover state. And when you hover over something, it's going to change to this type of a button or this color button versus these other buttons down here. So I think all these little things are things you have to keep in mind. Remember to do so that the overall Web design and layout is consistent, and that will make your Web pages much better because you are paying attention to these small details. We want pixel perfect. We want an even amount of space between all the sections and I can see right here there is more space up here than there is down here. And we need to go in and measure the spacing between each section and adjust all the content within it accordingly. So either a. You can watch me do this or B. If you've already gone through and designed everything at this point, you probably already know how to do this so you can go ahead and go in and tweak the spacing center everything properly if you didn't do so already and you can go in and create a second column or come up with your own design concept. Overall, this project is just for practice and again, like the other projects, you can't use this particular design in your portfolio. So the best thing to do is to go through all of this and think to yourself, How can you make this Web page design even better? This probably isn't the best Web design. You could probably come up with something even better than what I've created. and that's the whole goal to create. Websites that are user friendly are going to generate more business for your clients and provide the best overall Web design possible based on your creative vision. Not my creative vision, your creative vision. You're gonna get inspiration from my work and from other websites. And then you're gonna take that inspiration and create something brand new based on your vision and your creativity. So I'm pretty confident that the 1st 2 sections are perfect. Everything should be perfectly aligned in the center because I specifically remember using the alignment tool on each of the different elements. So let's go ahead and take a look at our next section, which is the first part of our body. And I think we can actually improve the design of this section a little bit by increasing the length of our paragraphs. I think they're too short right now, and the text is too tight and it makes it kind of hard to read. So we need to increase the spacing between each line. So let's go ahead and do that for this first paragraph here, and we're just going to extend it to the left and right of our image here. So across three grid columns. And let's go ahead and copy this information and paste it in a couple times to fill it in. Let's also go back to our tool options down here and increase the lines basing. And I'm going to do two, maybe three, for the spacing. One hit my escape key to get out of it so I can take a look at everything here. And I think that's definitely ah, lot easier to read than this here. So we want to make it as easy as possible for visitors to read our content. Otherwise, they're just going to skip over it, move on, maybe even leave the site. So let's go ahead and change the other three columns to match this one as well. I'm just gonna grab the text box down here and move it up a little bit because I can see the tops of the next line a little bit. So I just want to get rid of that. So I'm gonna delete these three paragraphs. Then I'm going to take this paragraph and duplicated three times. Let's go ahead and put them in the proper order and then just move them over. What a drag and guideline down here is well, so I can make sure they're all lined to the top. Let's go ahead and rename the paragraphs as well. Okay, I think overall, that makes that content so much easier to read. And we've definitely increased the designed quality just by doing that alone. All right, let's go ahead and take a look and our next section, and we can see that the spacing here is less than here. I also want to increase the amount of space here that's equal to the amount of space appear . So let's grab our measurement tool and measure this out so it looks like 80 pixels. So let's go ahead and draw out 80 pixels here or whatever number you had based on your design. Lee out. I also need to increase the amount of space between the headline and our first section here as well. So I'm gonna do another 80 pixels, and I bet we need a Anson space down here as well, and also looks like it's all center a little bit. I'm gonna add a guide right here. Let's make sure these are lined up exactly where they should be. This one is a little bit too far to the right. So I'm gonna go back and select that one and move it over so it aligns with the other section below it. It's gonna move the guide over just to make sure. And I think we are good for the spacing there. I think the spacing between these two are fine, but I do want to add 80 pixels of space down here, so looks like it's more than 80 pixels. So we're gonna go ahead and crop just a little bit. In fact, we don't even have to crop. We just need to go inside and select the background layer. And then I'm just going to use my arrow keys to move it up. Okay, let's go up to the top of the section, make sure everything looks good. Can we still have a drop shadow? And everything is looking much better than it did before. No, If you take a look at my design right here, if I zoom in, I could kind of see a little lying going across the top, and I'm not quite sure what that is. I'm gonna go ahead and navigate to that section the audio samples, and let's go ahead and turn it on and off. Okay, so it disappears when I turned that group that layer off. So it has to be something on the inside, and I think it's actually the background itself. I'm gonna go ahead and navigate and find that background. So that's definitely it right there. Once I turn it off, that white line disappears. So I'm gonna grab my layer mask icon right here, make a selection, and then I'm going to delete it. Okay? I need to set black to the background. So d and then acts and then delete on the back space key to remove that line because it's adding black to that area and the drop shadow stays in place. Okay, so we've cleaned that up. That looks much better. This section looks better now. We need to move everything else up since I removed some of the spacing from the last section. So again, we're going to measure out 80 pixels, so I need to move the contact information up, so I'm gonna go inside of there, find it, and then I'm just going to use my arrow keys to move it up. All right, let's go ahead and grab our background as well. Let's go ahead and move that up to fill in the space up here for the spacing between these two elements here. I'm going to take the amount of space that I have here and add it right here. So that just adds consistency to the overall design. So let's go ahead and measure this. So I'm at 69 que grab your form layer and go ahead and move it down. Catalysts and a little bit of space. Now between our submit button and we're going to use 25 pixels, which is the distance between here and here, here and here. So again, we just want to add consistency to our designed by adding equal amounts of spacing between different elements. And then finally, we need 80 pixels of space below the button. Okay, I want to move the background down. Now. I know we just moved it up, so we're gonna have to go back in and fill it in with white with our rectangle select tool . So let's go ahead and do that. Her I were very close to being done. We need to go ahead and increase the size of the footer so that it matches our header. So let's go ahead and do a measurement of her footer. I'm at 1 48 and then my header itself is 150 so I don't have to end too much. I'm gonna go ahead and go to image canvas size and increase it by two pixels. All right, now that our footer matches our header, I think there's one more thing left, and that's the play timer at the top right here that they would be nice to have a plate timer that has a colored bar that goes across the top here. That matches our way form. So let's go ahead and create that. We're gonna put it inside audio and video and also inside of audio samples. So let's go inside of there. Let's create a new layer. Let's pick out an orange color that we use previously, and then let's draw it out with our rectangles select tool. So I'll go about that for it doesn't have to be an exact size. I'm just gonna go right there and then I'm gonna go ahead and fill that in. I think that's a little bit too big or at least a little bit too tall. Someone go ahead and de select and then with my scale tool shift plus s, I can go ahead and make the height of it smaller. But we do need to crop the content of it first, so I'm gonna do five re scale it and let's go ahead and take a look. All right, so I think that just adds a little bit. Extra design to that particular section makes it a little bit more appealing than it was before. Let's go ahead and close all these groups layers. Okay, I think there's one thing left that I want to do, and that's add our hover hand icon over this button. So let's go up to our header and find that hover icon, which is this layer right here and duplicate it and let's go ahead and move that layer to that section. I'm gonna go ahead and click on pick a leader or guide, and then when I click on this button, it's going to automatically open up all the group layers and show me the layer that I clicked on, so this is the area that I want to drag it to. So we already have the name of the layer properly labeled as a hover button, and we just need to move the hover icon into position. Now. The last thing I would recommend doing to make this a better design is to fill in this empty space. Right now it's unbalanced, and it's not very good design. So what I would recommend is creating a second playlist and place it over here on the right side, and that will just give visitors more opportunity to sample the type of work that they dio . So if we go in here and take a look at our playlist, which is in bottom content, we could take all this information and duplicate it, move it over to the right. But I have a feeling when we do, it's going to be too wide and the content is going to be too close to the edge. So let's try it out real quick. I'm gonna go ahead and grab my audio sample background and pull it out of the group layer, and then I'm going to duplicate this content. I'm gonna go ahead and move it down and then move it to the right and it is it's too large and then we have overlapping content here and it's too tight over here. So what I would do then, in this case is I would actually use my skill tool and scale it down. Let's make sure it's locked together. Let's try it with of 500 let's do the same for the other column as well. And I think this is going to give us the extra breathing room that we need now. We need to go ahead and pull both of these groups columns out as well so that we can align them to the center of the background. So to do that, we also need to put them in a temporary new layer group to make it easier to align them. Let's turn everything else off. Okay, now with your Lima tool, let's see if we can select the background doesn't look like it's going toe work, so we're going to take these two layers and move them up to the top. Alright, let's try it now. OK, so that's working hold down your shift key and click on the columns and then change it to first item and then a line center of target. Let's go ahead and take the sampled background and move it back into it's grouped layer. And now we can take our rectangle selection tool in the line top to bottom from here. Okay, we're gonna put this one back in now. Then we just need to take this content and remove it from this temporary grouped layer. Let's delete that one. Close it up. Actually, one last thing. We need to go back in and re name this left column right column, and we also need to remove the hover state from the first button. So I'm going to delete that, and I'm also going to change the opacity of this one since it's not being played and we need to change it to 80%. Perfect. All right, let's go ahead and close all this up and take another look at our website design. I want to turn these back on command or control and zero to zoom all the way out. Let's make sure everything is turned on here. It looks like I'm seeing my video section. There we go. Perfect. Congratulations. We're now done improving our website design project. And like I had mentioned before, I highly recommend going through this project and creating your own creative design so you can add it to your portfolio. Once you're done with that, you'll be ready to move on to Web design. Project number four. Thanks for listening and have an awesome day. 56. Project 4: Real Estate Briefing: hello and welcome to our Web design Project number four. So for this design project, we're going to take another existing website and redesign it to make it user friendly and help the client earn more business. And once I show you the original design, you're gonna notice a lot of similarities to some of the projects we've already done. There's a lot of bad websites designed out there that are not user friendly. But don't despair. We are going to learn some new things in this project. I'm gonna show you how to remove anything from an image. So we're actually going to do some retouching on the main image. And I'm also going to show you how to create icons out of shapes. And of course, I will share some additional pro Web design tips along the way. So without further ado, let me show you the original website design that we're going to redo drum roll, please. Here it is in all its glory. It's the rental real estate website and it's horrendous. We have a huge logo and a phone number with their office location right here. I know absolutely nothing about this company when I visited for the first time because I've never heard of it before. And I'm not ready to call you because I'm not sure why I am calling you. I'm coming to your site because I need a place to rent or I want to list a house or a condo that I want to rent out. But I'm not quite sure I want to do business with you yet, So why am I going to call you? We need to give our prospects a reason to call us. And by placing the phone number front center. This large really doesn't add any benefit for that prospect unless they're visiting the site because of a referral. And they just need the phone number. Well, well, In that case, it's easy for them to find. Overall, I just think that the header area is too large, especially for the logo. We have some buttons that were designed from the 19 nineties. This Grady int style is outdated. Different elements of the what page Do not allying with other elements. We can see the logo does not align with navigation. Image down here doesn't align with the navigation etcetera, so overall, the design is sloppy. We do have a headline here basically explaining what this company is all about and what they dio. They offer rental real estate offerings in the New England area more specifically, the Lincoln New England area. So as you scroll down, you'll notice an image here that is very pixelated. They used low quality images, and then it looks like they size them at the wrong size, which creates pixel ization and makes the image look blurry. So overall, the quality of the image is horrible. It is a slider, so you can slide two different properties, but they are all of the same low quality. And I believe higher quality, well photographed images are better then low quality images. And let me give you a little example. Why the last time you saw a commercial for, Let's say, McDonald's or Burger King or Wendy's? And they do a close up shot of their food. Whatever they're promoting and you see it and that food looks beautiful. The buns are of the right consistency. You can see the texture. It's sharp. You can see the condiments and the tomatoes and the lettuce. It's all fresh and crisp and the hamburger looks plump and juicy, and you're like, Oh my God, I'm craving that meal right now. I gotta have it now Let's imagine if they used what their food actually looks like. When you go to the drive thru order something and you open it up and you're like, OK, the bread is squished. The meat looks dried out. The lettuce is a little brown. The tomato doesn't look fresh, almost looks like tomato paste. Now that's really bad tomato, but you get the idea. If they showed that actual hamburger that you get through the drive through in their commercials, you're not going to be as excited about going to grab that meal at that point in time. So quality images are important in order to generate interest, hold their interest and make that person excited about that specific property. If the image was sharp, was professionally shot and maybe was shot later in the day so that there's like a sunset in the background, it's going to look so much more inviting. Then this poorly lit image right here, so imagery is very, very important. You can put the best images and your Web design, but In the end, if your client is giving you poor images like this to put on their website, maybe you're coding the website as well. There's not a lot you can do or you can up sell your services and take better photos than what they're giving you and charge him for that service. Maybe you're not a photographer. You don't have the equipment. You don't know how to take professional images, outsource it and then charge a fee for coordinating that service. You don't want to separate it on your invoice. You're just going to take whatever that photographer is going to charge you and then increased the price by 10 or 20% or whatever you want to charge for that additional service because you are taking the time to hire somebody and coordinate and manage the project. So you need compensation in return for doing that. So that's another type of service that you can up sell to your clients. All right, let's just scroll down and look a little bit more at this website and then I'll show you the design I came up with. So we have this huge grey block of nothing. This with their logo and a paragraph, so they've been in the area for almost four years. But their website doesn't reflect that because it's poorly designed, it looks unprofessional. It looks like they're a start up, and they are not portraying whatever their brand is. So I think they're doing themselves a disservice and weaken definitely increase their business, which is our end goal, because their goal is to rent more real estate to earn more income because they are a for profit company, and we can help them do that by creating a well designed website that is user friendly and professional, and that alone should increase their business. Now they're trying to add some social proof in addition to stating they've been in the area for almost 40 years, and that is via this box over here, which is a Facebook code that you can add to your sidebars that will list your most recent that you've posted as well as the number of likes you have while they've been in the area for over 40 years. And I know Facebook has only been around for what, 10 years? They only have 99 lights. This is not heading any credibility for this particular company. I would rather see what we've done in previous projects, and that's adding logos of companies that they've worked with before. And that's going to add more credibility than 99 lights. I would definitely take this off, at least on the home page. Now, if you have a blawg, you can put this in there, and that's okay. Okay, so now we have a button down here that says call R R E. Why am I calling you? I'm not quite sure why I'm calling you. I need a property. But I still haven't seen any properties other than these poorly lit over pixelated, blurry real estate images. So we need to make it easier for prospects to find properties to rent and make it easier for landlords that have property to rent toe list their properties. Now all that information is on here. Now we do have another section here for being pet friendly. So this is something that we can highlight as a benefit for going with this rental real estate company versus others because not everybody is pet friendly. But back to what I was saying Just a second go there are ways for people to navigate to different parts of the website to get the information they need. But I think we can actually place some of this information on the home page to replace some of the information they already have on here and make a better website design with a better layout to make it easier for prospects to find what they need, as well as to make it easier for property owners to list their particular home that they want to rent. So let me show you the design I came up with, and the first thing you're going to notice is I redesigned the logo. The logo is a little outdated, and I also reduced the size of the logo as well, as well as the contact information, just to place importance on specific elements. Okay, so they want to make sure that there logo is front and center. I still did that without having it this large just by creating a blue background which I took from the colors of their existing logo. So I kept their branding colors. I just changed the fonts and the logo itself to make it more up to dates and a little bit more professional or a lot more professional than this. So the first thing we're gonna see is logo than our eyes. They're going to navigate to the navigation, and then if we already know what we want or who we want to talk to weaken, See that we do have the phone number up here, and we can also apply now. So if we've been referred to this company and we know what we want, we can apply now versus trying to find it somewhere else. The other thing you'll notice, is a high quality image for the hero section, which represents what this company does real estate. We also want to make it easy for prospects to find places to rent front and center. In the hero section. We have an option to filter the type of property they want and where, so we can put in a budget with a drop down the city. We want to search for bedrooms and baths, and then we can filter based on these selections, and that will take us to a page with all the listings based on this filter again, we want to make it user friendly. We want to make it easy for prospects to find what they want. They're not ready to filter, so they're going to scroll down, and they're going to find four benefits of why they should work through this particular real estate rental place versus other. If they create an account, they will receive an email. When new properties are listed, people are busy and may not want to continually come back everyday to search for properties . So if we can make it easy for people to find what they need and to get them back to our clients, websites and not our competitors, because they may not remember the website that they visited 20 minutes ago and tomorrow or next week, they may not remember that particular company that they visited first, and they'll just find somebody else to rent through. So we're gonna make it easy to create an account and provide e mails of new properties. And this again, these air ways you can up. So your Web design clients let me help you generate more income, and here is my idea on how I can do it. So right here you can add this as an up sell. I want to help you generate more business, and this is how we're going to do it. Here's another service I recommend for your company to help you increase your business. Create away. Or somebody in the company can help tenants organize their utilities. You're gonna help them set up their new residents with electricity, Internet gas and more. So you can help them figure out how to do this. And you're going to charge them for helping them do this? Why not help prospects for tenants? Find a roommate. You can create a forum or another method of which people can find each other on your website, Mr. Client, to find a roommate. And, of course, you already offer a pet friendly environment. And pets are welcomed at select locations. Easily filter your search we're gonna and at as another benefit, I'm gonna show you how to create these particular icons as well by using our shape tool. Okay, so maybe they're not a tenant. Maybe they're a landlord. So as they scroll down, the landlords are going to see this because it's front and center. It's divided between everything else with a bright blue background based on that company's branding colors. Are you A landlord posed your listing for free list. Now case we have a called action for the landlords to list their properties now and then down below that, we can then start filtering properties based on the top four or five types of filters that people use. And then we can automatically place new listings in this section here. If you want to find more pet friendly rentals, you can navigate to it by clicking on this link Seymour again, we're making it easier for people to find what they need, So we have different types of categories for people to find what they want. Then another thing I would recommend for this company to ensure that people continue to come back to their site or just to discover them via search engines is to create a block so you can help them set up a blawg and get started on creating content for that blawg and provide your professional services at an additional fee above and beyond the initial design . So another type of service you can up sell to your clients, so I put together a little section for their new blawg and then over to the right, we can put together a sidebar of additional content or you can provide them with another idea for generating more income. And that is to offer this space as advertising space so they can sell advertising space here to companies in their area. Versus this right here provides no information and no value, no credibility Over here. This is always that space. They're better off offering a blawg with links to the most recent articles, as well as selling advertising space to generate additional income so they bend in the area for almost 40 years. I guarantee they know people in the area that would be happy to ever ties in this part of their website. So these are all suggestions you can give to your client to help them earn additional income and grow their business. And this is what we want to do as Web designers. We don't want to be just another Web designer. Hi, Mr Client. What do you want? What kind of design style do you like? Blah, blah, blah. OK, here's the design. Thank you. Bye. No, let's do something different. Let's be better than your average Web designer. Let's help these companies grow their business because in the end, that's why they're hiring you to design their website. They want a website that they can sell their products and services, and if you can show them ways to increase their business, then guess what. They're going to refer you to other people that need websites done to generate more business. And once you get one referral, you're gonna get another and another, and before you know it, you're gonna have more work. Then you can handle, and then you can start increasing your price accordingly because you are helping people make more money and you should be compensated for doing that. And then by raising your prices, you also control the amount of volume or the amount of work you're doing. Do you want to do 2025 website designs a month at $200 a website That's $5000 a month, Or would you rather do five website designs a month at $1000 per website? I would rather do five versus 25 because I'm making the same amount of money for less work . Now. I'm not saying this is what I charge or what you should charge. I just want you to think about how you can be different from all the other tens of thousands of Web designers out there. You have to separate yourself from them mawr than just based on your design style. You have to provide services that separate you from the competition. Finally, we have a simple footer as well, with some links to social media icons and then some links to other parts of the website. We have our privacy policy. We have some legal information. We have a site map that will provide links to all the different pages on the website. We also have a way for people to advertise with them if you don't have a link to a page about advertising, and then people are not going to know how to advertise with this company. So if you can sell your client on the service, you're gonna want to put a link somewhere so that people know that they can advertise on the site. We also need a copyright. We also need some copyright information down here is well, I didn't include it in this design, but that's not relevant. So what we're gonna do is we're going to create this particular website design starting off with retouching this main image here because the image originally had a car or two, I think down in this area. And I felt that it wasn't helping with the overall image. And I like the image better with out the car versus with the car. So I'm gonna show you how to remove the car from this particular image, and then we'll work on the logo and then we'll go ahead and continue building the site from there. Can't wait to share that information with you. If you're ready, let's do it. 57. Retouch: Hello and welcome back. All right, so I love this photo for this particular Web design project because I think it's a very strong image. It reflects what our client does, and that's real estate rental. Now that being said, this particular location will probably not work for the client one, because they probably don't have this listing on their site. And two, because of the location now based on the palm trees. We can guess that this is probably somewhere in the South, and our client is in the mid East because they cater to the Lincoln New England area. But I still think it's OK to show this image in the initial design because it is a strong image, and you want to portray to your clients a strong image so that they can see the difference between a great image like this one versus that first image I showed you in the previous lesson where the sky is washed out, its pixelated. It's got garbage in the front of the image, and it doesn't really reflect well on the type of properties that they may want to either rent or it doesn't really portrayed that particular location as well as this image Dozen like I had mentioned previously for that one image that we had from their website. It would make a huge difference to shoot that image later in the afternoon or early evening . So you have a sunset going on in the background with some clouds and some color in the sky . It's going to make that property look much more appealing, like this image does here with sunset and the lighting and the composition and everything else about this image is much more professional than that other image. That's not saying that all their properties are going to have images like that. But you wanna have a strong image in the hero section to grab people's attention. If you're showing an image with garbage in the front lawn and can really see it because it's pixelated or blurry or both, then it doesn't really look like the type of site you may want to rent from because they're showing low end properties. Nothing wrong with that. Maybe they have a lot of those types of listings, but you can still portray any type of location much better by paying attention to the detail in the image to make that image in that location look much more appealing than maybe it really is. Now. The one thing I don't like about this image are these two cars. So I think by removing these two cars like I did here, it's going to make that image that much stronger and much more appealing. So let's go ahead and download this image by going to pick sabei dot com and then just type in this number right here. 690086 and to search and you'll be taken directly to this page where you can download this image. So I'm going to download the 1920 by 10 82 image, and then I'm going to grab that file and bring it into my grid template. So you want to go ahead and open up that grid template from a previous lesson to start from scratch on this particular project, go ahead and close off the grids, and then we're going to resize the image so it's full bleed or, in other words, edge toe edge. So right now the image is 1900 pixels wide, so let's go ahead and re scale it with our scale tool shift plus s. And then we're going to type in the with, which is 1400. And then the height should be 7 89 Once he skeleton thing, just move it up into position here, and then we'll go ahead and retouch this image and remove both of these cars. Now, in the beginning of the course, we talked about two types of tools that you can use for retouching, and that was the clone tool and the healing tool for this type of edit. I think the clone tool would be the best option for removing these cars. So let's go ahead and grab that tool, which is located right here. Or if you updated your keyboard shortcuts as mentioned in the beginning of the course. I have mindset to the letter s for the keyboard shortcut. Now, once we click on it, we can't really do anything yet. If we take a look down here, it says, set a source image first. So what we need to do is we need to tell gimp, where do we want to clone from the image in order to retouch the area that needs to be retouched. So with that tool, if I hold down my command or control key and click in this area right here and then once I move, the tool outline is applied to this area, so we know that this area is going to be applied anywhere. I click and drag my mouse. Now, as I move up, you can see that tool outline to the right. There is following my brush movement, and it's going to continue adding from the right to the left. And that's how we re touch with this tool. Now the key to using this tool with images like this that have a specific perspective. You want to make sure that that perspective is not broken, because if you click in the wrong area, the start, then that line is that going to meet up over here to the other end. So what I recommend doing for this is starting this way and then dragging to the right Now , you may have noticed that the curb changed into something else at this point, and that's because as you drag down, it's going to continue pulling the data or the pixels from this area and when you go far enough. It will then take the pixels from the car. Over here is well, so we're going to click and drag release and then click and drag over any pixels that we don't want in that area. So I'm going to start right up in this area here, and then I'm just going to follow that line down to try and meet up with where I started with that tool. So now I have that car being applied in this area. So I'm just going to click over here and start over, and now I have a different stroke being applied to that area. Okay, we can also resize or brush with our bracket keys. Right now I have my breasts, I set to around 14. So you want to increase or decrease it based on the area that you're working in because you don't want to add pixels where they're not needed if they don't need to be added there. So if I hit my left bracket key, it's going to make that breast size smaller. So now it's closer to four. Right bracket key is going to make it larger, so now it's closer to 30 so that just makes it easier and faster than coming over here and adjusting your brush size as you're working. So you can literally resize your brush as you're working. So right in this area right here I have a little bit extra of the curb that I don't want, so I'm gonna make my birth smaller with the left bracket key. I'm gonna hold down my control or command key putting on if you're on a Mac or PC and then I'm going to reset where I want to clone from right here. And then it will cover that area up where I don't want the curve to be in that area. So I'm gonna go ahead and do the tires and the bottom of the car over here now, So again, control or command to tell gimp where to clone from and then just paint over that area. The other thing we want to do as a Web designer is we don't want to retouch images for free . If clients ask you to retouch an image, say yes, I can do that. I can provide that service. But this is how much it's going to cost to do So So you have to determine how much you're going to charge for retouching your images. And of course, some are easier than others. So you have to be able to know how much you want to charge for that particular service. If you're going to do it yourself or if you're going toe, outsource it. You then need to come up with a pricing plan for increasing that particular fee from the person doing the retouching so that you could be compensated for managing that particular project. I'm gonna come over here and grab the grass. I'm gonna cover up the shadow here because that shadow is coming from the car. And then I'm gonna go ahead and continue adding grass back into this area here, maybe add a little bit of sidewalk here and the other thing I'm going to do as a Web designer when I'm retouching an image for the initial Web design, I'm not worried about being 100% perfect. The clients probably not going to notice little things. And then once they approve any images retouched, you condemn, go back and explain that the original image was retouched. This is how much is going to cost to retouch it that you will ensure that image will be You want to make sure it's a high quality image, one going on a live website. So you're going to explain that the prices based on this particular service, this quality and why it's going to cost X amount. Then you can just charge a flat fee for doing something like this. Because once you learn how to do it yourself and you know how to do it, it shouldn't take all that long to do 10 15 20 minutes, maybe half a Knauer, to do a full retouch like this with full attention to detail. So I'm just going in and clicking my control or command key to fill in defense area now. Great. So I think that car is done. Let's go ahead and zoom out, and we could kind of see there's some remnants of the shadow of the bottom, the car right in this area, and that's what I mean by a higher quality retouch. I would spend a little bit more time blending this in with my clone and my heel tool as well to make that look much more natural. and much more professional. And because this is the initial design and chances are this particular client is not going to be using this image because it is from the South and it's not in their local area where they rent. There's really no need to go into perfection with this particular image. Okay, so basically the same thing. We're going to tell gimp where we want to clone for this particular image, and I think I actually want to start over here. All right, so that curb is done, let's go ahead and work on the bottom part here. So for this particular part of the edit, I started down here as the point where I told Gim to clone from, and it's not really matching the rest of the scene in this area here. So in that case, I would be better off starting my cloning either from up here or over here. I'm gonna try it here, and I'm probably going to get a better result. And that's simply due to the texture and the lighting in that area compared to where I was previously. I'm gonna go ahead, zoom in so I can see a little bit better. And now I have a reflection in the street here of this car as well. So I'm gonna move my starting point or my clone source from over here. So if we come in with our healing tool and we add a source toe work from, I'm just gonna click over here and then paint over that area that we just worked on with the clone. It's going to blend all those pixels together much better than the clone tool does by itself. Okay, I'm gonna go back to my clone tool with the letter s and I'm a go ahead and work on this grassy area here. So instead of doing long strokes, I'm just doing short strokes by clicking and dragging because I want to stay in this area here. Otherwise, I'm gonna go up in this area and start adding some of the sidewalk. And I don't want to end a sidewalk in yet, so I'm just gonna click short bursts very short and keep dragging over other parts of the car until I have the area covered. Okay, lets see if there is a piece of sidewalk over here. I think we can work with this right here. So again, just clicking and dragging short bursts. And I'm gonna add in some grass over here again because I'm losing the perspective of that sidewalk now because I'm making the sidewalk to large. I'm also going to make the breast size just a little bit smaller with my bracket keys. Okay, Now, in this area, we have the car covering up part of our trees. So for this, I'm going to add my clone source right about here in the middle of the tree because we have a long part down here being covered up. And I just want to click and be able to drag up and followed that curve along that way. Just need and a little grass over here. Now we can work on the fencing. I'm going to actually start over here with my clone source. So again, we need to be careful on where are clone source. Outline There to the right is in relation to where we're actually playing pixels over here on the left. Because now I have a column to the left of that brush. And on the other side, where the clone sources that column is much further away. So I'm just gonna paint in some of these bushes down, hair in the front, fill in the sidewalk just a little bit, and then I'm gonna go ahead and work on this side of the fence and work my way this way now , So I'm gonna go ahead and just click on the column here for my clone source, and then I'm just gonna paint over this way to the left and then to the right, so I need to go ahead and pick another part of fence in the center. So I'm gonna come back to this one and start on this little post right here in the middle, and then add my first breaststroke right here, which corresponds with the middle of this fence where a small post should be as well. Okay, I'm gonna and my close source on this column now and work on this column. So again, short strokes and just dragging up to fill in that area. I just want to see what these posts look like down here. Okay. I'm gonna go ahead and grab this post now and we're almost done. The other thing I'm doing is I have my left hand on the left side of my keyboard where my command or control key is located. So I can quickly click and select a new area to clone from Cam. Just gonna clean up the sidewalk here in the front. So the sidewalk is a little off right here. So if I were to retouch this image for the finished product, that would probably spend a little bit more time on the sidewalk. But I think for this particular project and the initial design is fine because they're really not going to zoom in at 769% and be like, OK, that sidewalk is off. It doesn't look good. I think in the initial design, they're not even going to notice it, especially when we have some content in this area as well. They're gonna be focusing more on this and that realize that the sidewalk is not 100% perfect. But again, if they're paying for my services to retouch this image, I'm going to spend more time to make it a perfect at it versus just an edit for the first draft. Okay, so that's it for retouching this particular image in the next tutorial, we're going to begin on the logo and the header area of the Web page, so if you're ready for that, let's do it. 58. Header: Hello and welcome back. All right, so for this lesson, we're going to work on the header section of our Web design project. We're going to add a primary and secondary navigation. We're going to create a new logo, which is going to be real simple to do. It's going to be clean and more professional looking than the logo they have currently. And the other thing I want to mention real quick is, as you designed more and more websites, you may find yourself using the same type of shapes or elements over and over again in new projects. For example, in our previous project, we created this primary navigation with a hamburger icon to show or represent that the navigation will be shown or hidden. When you click on that particular icon. Now I like this font. I like the size I like the hamburger icon, so there's really no reason for me to redo this from scratch when I've already done it previously in a different project, so we can actually take this navigation and add it to our current project, which I did in the initial design. We just need to change a couple of the lengths because these are property owners or people looking to rent versus videographers or an audio specialist. So let's go in here and pull out the logo. So go ahead and open up this file and then remove the header background as well. And then we can click and drag this group that layer to our current project and added in. So let's go ahead and move this up into position here. It's not going to be exact yet. We're just gonna get it up and out of the way, and I can go ahead and rename this primary navigation. Let's go ahead and define our header space. So let's pull a guideline down 2 20 pixels. So that's going to give us our spacing at the top. And then we're going to pull down another 1 to 1 20 which will be the baseline for our primary navigation, the bottom of our text here, or the hamburger icon and our logo. So we can actually graham our primary navigation now and put it into position. So, just like that, we are almost done with the header section. Let's go ahead and do the primary navigation I'm going to use railway for the font. I'm going to do 14 for the size. And then, of course, we need White. So I'm just gonna type out a phone number and then five spaces to forward slashes and then five spaces again and then apply now. So I'm gonna select this because I want to make this content bold. So go ahead and make that bold. And that just helps that stand out a little bit more versus the phone number, because I think applying now is more important than the phone number because a lot of times I think people will want to apply to have their building listed on the website. Or maybe they want to rent a specific condo or a permit or home or whatever the case may be versus calling. Sometimes they're busy, and it's just easier to fill out a form to say I'm interested in this property or I have this property for rent and here's my contact information. Let me know what the next step is. So that's why I would highlight apply now versus the phone number and again that all goes back to researching and finding out more about your client's specific prospects. Maybe it's the opposite for their part of the country. Maybe people prefer to call versus applying online, and they would rather apply via the phone or make an appointment to come in. And in that case, based on that information that I get back from my client, I would then make the phone number bold and not apply. Now I mean not even put apply now. If their clientele are there, prospects don't like to apply online. All right, let's go ahead and move this into position. Let's turn on our guides, Commander Control and Semi Colon, and I'm gonna place it right here at the top of this guideline. So that's going to be in line with our logo because our logo is going to cover the height between these two lines. So let's go ahead and start on that. I also need to pull this out and call it secondary navigation. Okay, let's create a new layer called logo background and then, with our rectangle select tool, let's make a rectangle. Let's say 1 90 by I believe it's 100 for the height. Okay, so before we can ask, you fill in this background color we need to find their exact branding color. So let me show you how you can do that. If you're at a client's website and they don't know the exact color to give you, you can actually find a color picker plug in. And I think we talked about this in a previous lesson. And when you have that plug in installed, I have one right here called the Color Picker. I can click on it and then hover over a color that I want, and it shows you right down there at the bottom, the hex. A decimal number. Now when I go over the logo, it changes because they're using a low quality logo that's pixelated, and there's different blues in there. So I'm just gonna choose this blue color here, and then I'm going to copy it. Just take note of that number there because you can type that in the HTML notation box right here. Once you type that in, hit your tacky and then you get that exact color we can now go ahead and fill that box in and d select. Go ahead and turn my guides off. I don't need those, and then as far as the fund family. I chose a font that is a more modern, updated type of font compared to what they have right now. And it's called Arrow, so you can go to w fonts dot com forward slash font forward slash arrow to download this font. Once you haven't downloaded and installed, you're going to have to restart gimp in order to finalize the installation of that fund. So once you have that set up, go ahead and set up the fund and the tool options here and for the font size, let's do 80 and the color white. Okay, let's go ahead and type out our E in all capitals and then just move it up into position. I think I want to go a little bit smaller on it. It's a little bit too close to the edge there, so I'm gonna go ahead and type in 75. Try that. Okay, I'm liking that a lot better, and then we're going to type out their business name down here at the bottom. Let's change the font to railway, and I'm not sure about the size. I'm gonna start off with 16 and we may need to increase that. So rental, real estates. Let's go ahead and make it 18. That looks pretty good. I think it's off just a little bit. So what we can do is increase the amount of spacing between H. Funt and the reason why is because I wanted to match the with of R E. So in two options, let's do 0.2. That's actually too much. I'm gonna go down one so it's gonna be 10.1. Hey, let's go ahead and create a new layer group cold logo. We're only gonna put our text in here because I want to take this logo the content and align it with the background. So let's go ahead and take our local background and crop to content. And then, with our alignment tool, we can go ahead and select both. Hold on your shift key, click on the logo and then set it to first item and then align center and middle of target . Now the problem is, we have a larger text box than we actually need, so we need to go back into our text here with their text tool and click on this text box at the top and then drag it down until it reaches the top of the letters. Now, after it does that, it pushes those letters down. But we now have the right size we need in order to align it perfectly in the middle. So let's go back to our linemen. Tools realign, and then we have to go back in our text box again and move this back up to where it was before. So I think was a little bit higher than that. Okay, we can go ahead and put our background inside now. So the last thing we need to do is update our primary navigation with the correct content to go ahead and double click with my textile on audio to select it and then type in property owners. And then we can delete this last one. The leading those extra five spaces as well. Hit your escape key, and I think we are are done with the header. Awesome! All right, now that we have the head or done in the next lesson, we're going to work on our heroes section. So if you're ready to get star on that, well, let's do it 59. Hero: let's finish up our hero section now to make it easier for prospects to find what they need . And in this case, they need a rental property to rent. And what we're going to do is create a filter so they can narrow down their search based on location, budget and some other filter options as well. And then they can filter and navigate to that page with those filters for those real estate properties that meet their requirements. So, in essence, this is a cold action, and we're making it easy for those prospects. Teoh easily find what they need by providing it directly in the hero section. This is really simple to design is just based on shapes and text, so let's go ahead and do that. So let's start off by creating our background for the call to action and this. Go ahead and create a new layer and let's show our guide so we know where to place everything. I'm gonna grab my rectangle selectable with the letter M, and I'm going to make it 1230 pixels wide and 200 pixels tall. Let's go ahead and pick out a dirt color. Let's just start off with black for now. Grab your bucket, fill tool and go ahead and fill that in de select. The other thing I want to do is I want to drop the opacity down just a little bit so that some of the image behind it comes through. So I'm gonna go right around. Let's try 75 and we also need to align this in the middle, so I think would be best to align it top to bottom left and right. And we can do that as you know, with our rectangle select tool. So let's go ahead and grab that and draw out a selection to center it inside of. And of course, we also need to crop it to the content. And then what? Their alignment tool. We can align it to the selection center and middle of targets. Perfect. Next, let's create our filter boxes. I'm gonna go ahead and create a new earlier called Budget Row and let's make it three columns wide. And then, for the height we're going to do 65. Let's pick out our blue color that we used for the branding and then fill that in okay, go ahead and de Select Commander Control and the letter D. All right, let's make the rest of the boxes and then we'll align everything after because we need an some text up at the top as well. This one. We're going to do four columns wide and let's make it the same height of 65 then the same colors, and I'm just gonna go ahead and complete the rest. We're gonna do one column, another one at one column and then the last 13 columns, and they're all going to be 65 for the height. Okay, let's go ahead and grab all of those and align them to the top. We also need to go up to layer and crop the content each of the different Rose. God, you're Lyman Tool. Well, Daniel, shift key and select all the rows. Change it. The first item and a line to the top. Okay, we're starting to get a lot of layers here, and it's getting this organized in a little chaotic here. So let's go ahead and organize our layers, and we definitely need to put everything in a group layer for the header as well So let's go ahead and do that nuclear group called Header. - All right, let's go ahead and add our labels at the top. Now we're going to use railway 14 points and white and you think I want to do italics instead of just regular. So railway, I tell it, came to turn off everything else right now, including the background, so we can align that text to the top. And we also need to pull this text out of that group layer. So again, with our alignment tool, we're going to select each of these with our shift key and then a lying to the top. Okay, let's add our form labels that go on the inside here. We're going to change the font 2 24 for the signs and railway regular. Okay, let's go ahead and take this one and make it really bold. So I'm gonna use well, trembled. Okay, so the last thing we have to do is align everything. So, for the label titles, let's align them to the edge of their rows and we can just go in and grab each layer. I also want to put these in order, and then I'm just going to use my move tool to move it over. So just do that for each one. And then we need to align our labels inside of the Rose directly in the center. And I want to give a little bit of space on the left side of each row as well. Also, looks like my row is off by one pixel. So I'm gonna go in and move that over, and we should also organize these in the order they should be in as well. I'm just gonna align it to the top and bottom new. So what? They're rectangles electoral. We can make a selection, and then we'll try to select it with our alignment tool. It's allowing us to do that, change it to selection and then a line middle of target. So I'm just gonna go ahead and grab each one of these other layers and align it to the middle of the target as well. Okay, let's go ahead and move all of these over. But first we need to make a measurement to find out the distance between the left edge and our text so we can make it all equal across all the different rose. Now the one thing I want to do, though, is I want to take this content and move it over to the right just a little bit to give it some more breathing room over here on the left. So I have 14 pixels. I'm actually going to select that and make it a nice even 15 pixels. And then we just need to measure each one of these as well to put these into place. So go ahead, make your measurements and move everything over accordingly. Now for these two, we're going to actually sent her directly in the middle of their boxes since they're square . So let's go ahead and grab the rectangle selectable again so we can align in the center so center and middle of target and then the same thing for this last one here. Okay, lets organized are layers a little bit. I'm going to create a new layer group for our titles, another layer group for our labels and then one more layer group for the hero section. Let's go ahead and zoom out. I think we just need to center are called action. Actually, we haven't defined the height of our hero section yet, So let's go ahead and do that and let's make it 700 pixels tall. Let's go ahead and make a selection around that, and then we're going to pull our condo image out so that we can align everything else in the hero section in that area. And then the final thing we need to do is we need to crop our image down here so that it's not being displayed below the hero section. So let's go ahead and grab that image. Let's make a selection just around this part that we want to get rid of and a layer mask and white press, the letter D and then the Letter X and then your delete or backspace key, and that will remove that part of the image. And our hero section is now done. Congratulations. Now we're ready to move on to the next part, which is creating the's services or the benefits section with these four columns. But first we're going to work on creating our icons for those benefits 60. Body Part 1: Hello and welcome back. All right, so we're now going to begin working on this part of our body, which includes are four main benefits. And first, we're going to create our icons for each of those benefits. Now, when it comes to icons, you have two options. You can either find them for free online or purchase them online from somebody else, or you can design your own so it wouldn't be too hard to find icons that are related to these benefits. But what is the fun in that? So what we're going to do is we're going to create these 1st 2 icons from scratch, and then we'll do these two from scratch in the next lesson. So let's go ahead and get started by creating a new document, Commander Control and the letter in. Let's Size at 75 by 80. And let's fill it in with White so our icons air simply going to be made from different shapes. So let's go ahead and create in new earlier for the first shape. And for the size, we are going to do 70 by 75 and we're just going to add a stroke around the selection to go up to edit and then select stroke selection. Let's do two pixels solid color and let's do Black Que de Select Commander control and the letter D. I'm just gonna move this into position here. We also need to crop the layer boundaries. We go layer, crop the content, and let's also show our lier boundaries. So let's go ahead and make our next shape. We also need to create a new layer Ford as well. This is not named this 101 And for the size we're going to do eight by eight, and then we're going to end a stroke around it again. Same size and D Select was also crop the content and let's duplicate it three times. Then rearrange the layers and then let's take each one of these and pull them down. So right about there should be good. We're going to grab our alignment tool and select them all with our shift key held down. And then we're going to change it to first item, and then let's offset it to zero for X and 25 for why it's a little too much. Let's try 10. Not enough. Let's try 18. Let's go a little less. There we go. That'll work. I'm gonna go ahead and put these in a new layer group, okay? We just need to make some lines now. So again, we'll just use our rectangle selectable to create a line. And I'm gonna make mine 40 by two. We're gonna create a new layer called lying. Fill it in with black, the select and crop to content. Go ahead and move this down. So it's at the bottom of this box here, and I'm gonna duplicate it three times and put them into position as human and just rename these 01 through 04 and put them in their own group layer. All right, let's go ahead and take both of these and put them in another layer group. This way, we can move them all down. Let's go ahead and make a selection right here so we can place it directly in the center of the outline itself. All right, let's create a new layer for our circle at the top. We're gonna grab our lips tool and let's draw out a circle. Let's do 15 by 15. Actually gonna make it a little smaller 13 by 13 and we're going to add a stroke. Let's do one pixel this time from the line with De Select. And then I'm just gonna grab my text tool to put in the letter X. And I'm gonna make this a little smaller. Let's do 12 two big. Let's try 10 and eight. So I'm gonna do mine at eight. Put that right in the center, and then finally, one new layer group for this content. Okay, One last step. We're gonna create a new layer group called Account, which is our first benefit, And then we're going to take that and add it to our document. So there is our first icon. Let's go ahead and work on our second icon. I'm gonna go ahead and delete this, Okay, So that 1st 1 was pretty easy. The next one we're going to do is are plug and we're going to use rectangles, rounded cornered rectangles and some lines to create the plug. So let's go ahead and create our first part of our plug with a new layer, and we're going to select our rectangle selectable. We want to make sure we have rounded corners selected and a size of 50 for the Radius. Now, as far as the size goes for our initial part of our plug, we're going to do 80 by 35. We're going to go up to edits and add a stroke to it as well. Two pixels for the line with Go ahead and do that de Select now because the selection was on the outside of my document here. It created the edge of our shape right here at the edge of the document. But that's fine, because I'm going to crop this so that I can have some room for the prom parts of the plug . So let's go ahead and grab the rectangle select tool again because I want to create a line and I'm gonna put it on a new layer in case I need a movement. Later, I'm gonna turn off rounded corners and then I'm gonna fill it in with black. Okay, I'm gonna go back to my plug so that I can cut that part out. So I'm just gonna make a selection and then coming under control and the letter X to cut it . I think I want to move this part over just a little bit and then cut it again. Okay, I like that size. So I'm gonna go ahead and go to plug to layer, right click and select merge down. And now that becomes one piece, and I'm gonna also go ahead and crop to content as well. It might be a little bit too big, but we'll figure that out after we do some more of the plug itself. Let's go ahead and create the prongs with our rectangle selectable new layer and then fill it in with black. That's also duplicate that layer and move it down. Let's also crop to content for both layers, right click and select emerged down again and then let's put it directly in the center of the plug itself. Okay, I'm gonna go ahead and right click and murdered that down as well. I'm going to duplicate it and turn it off and re size. It's smaller so I can work with a smaller plug head for the time being. And the reason why I duplicated it is because if I decide I need to go back to this size, I don't have to redo it from scratch and I will have the original there if needed. Once I'm done. If I like this size better than I will delete the one that I don't need. All right. Back to the rectangle selectable rounded corners And let's do 25 for the radius. And I was gonna create a little shape right here to start the cord Part of our shape. As far as size goes, going to do a little bit shorter, I'm gonna do 12 by four. And we're going to create a new layer and fill it in with black. And then I'm just gonna move this over to the right, and then let's crop to content as well. I think that's a little bit too big. So I'm gonna go ahead and grab my scale tool with Shift Plus s and make it smaller. So nine by three should be good. All right, we need to create the rest of the corn. Now, let's create a new layer called cord to grab your rectangle selectable Set the radius to 25 . Then for the size, I'm going to do 40 by 18 and we're going to add a stroke to it again. Black too. Perfect. Okay, lets de select. Let's go ahead and cut the end of that off. Make sure you have rounded corners turned off and then go ahead and cut it out. Let's go ahead and move this into position and crop to content as well. So this first part of the cord I want to make thicker. So I'm gonna go back to shift plus s and increase the height. So we have one more piece of that chord left. So let's create a new layer called Cord three and we're going to do rounded corners again. With a radius of 25 Kayla's and a stroke. We're going to crop the content again and then cut off the end of that with our marquee tool, Commander Control and X. And our plug is now done. We just need to clean up our layers a little bit. Let's go ahead and merge some of these layers down. In fact, I'm not. Go ahead and do that for all of them. And let's call the layer utilities and then bring that into your document. Okay, so this I kinds a little small. Overall, I'm gonna go ahead and bring my guides down to the other icon, and then I'm going to rotate it with our rotate tool and just turn it so it's at an angle a little bit, and that will help fill in some of that empty space. And now our second icon is done. The other thing I want to do is I want to lower the opacity of our icons because I think the black is a little bit too dark. So let's drop the opacity down to nothing to do. 50 for both. And there we go. We have two icons done, and we'll go ahead and finish up the other two in the next tutorial. 61. Body Part 2: So we have two more icons left to design, and we're going to use our shapes again as well as another tool, which is this tool here, the paths tool. So let's go ahead and create our home icon first. And let's go ahead and start with a new slate. Let's go ahead and create our first layer for the door and grab your rectangle select tool . Make sure you have rounded corners turned off. And then for the size, let's make it 18 by 30. Let's add a stroke with black going to do to for the line with. And let's make sure we also crop the content. And I'm also going to select all with Commander control and a and then align int to the center. Okay, let's create another layer. Let's call it house, and we're going to make this 1 54 by 54 another stroke de select and crop the content and let's move it into position. Same thing we're going to select all and use our alignment tool to a line to the center and then de select. Okay, now we're going to create the roof for the house and we're going to select this tool here, which is the paths tool. I'm also going to drag out a guide 2 37 pixels and then turn on your guide so you can see it. Okay, We're gonna start our path right here in the top left of the house. Just click right there, then come over to the left side of the document, click again, and then you're going to get the little path in between. Those two anchor points were gonna come up to our guide here in the top of the document and click on the guide right there and then back down to the right side. And then we're gonna go ahead and click right here to finish that path. Now, before we add the stroke to the path, let's go ahead and create a new layer called Roof. Then we're going to add the stroke by going upto edit and selecting stroke path. Okay, we now have the roof done. Let's go back to the house layer so we can delete this part of the shape. So describe your rectangles. Select tool again and then deleted with Commander control and X. Okay, let's go ahead and create a chimney was put rounded corners on and set it to 10 for the radius. And then for the size, let's make it nine by 17 and then add a stroke to it. All right, I want to erase this part of the chimney, so I'm going to grab my eraser tool with the letter e. From here, I can go ahead and erase this part of the chimney so it's not showing on the inside. I also want to get this part of the roof removed as well. So let's grab our roof layer and then delete inside of here. Let's go ahead and put all of these in a new layer group. It's caught roommate. All right, let's go ahead and add this to our Web design project. Drop it in there and let's also drop the opacity down to 50%. All right, one more icon left. Let's go ahead and delete this layer and turn off the guides. Let's grab our Ellipse tool, and then, for the size, we're going to size it 18 by 28. Kate. Let's add a new layer and then and your stroke de select. Let's make sure we don't forget to crop, the layer boundary and then duplicated four times. I'm just gonna go ahead and move these into position, so something like that. All right, let's go back to the Ellipse tool and I want to do mine and 42 by 29 New layer. And then add the stroke de select Commander Control and D. I'm gonna go back to my eraser tool because I want to erase part of this right here. And then I'm going to grab my brush tool with the letter B and then as far as the size, I'm gonna go four for the size of the brush and then I'm just going to paint in a little arch right here. So that's looking pretty good. I'm gonna put this in the new layer group. And the reason why I'm putting all of this in a new layer group versus merging them all is because maybe later on, I will want to resize part of the icon. And I can simply do that by selecting the individual layers that I want to resize versus having to do it all over from scratch. Okay. Make sure you drop down the opacity to 50 as Well, it's gonna clean up my layers here, renamed them a little bit. Put them in order, and we'll be all set to go on to the next tutorial. Okay, we're all done with our icons. In the next tutorial. We'll go ahead and finish up this section by adding some content, centering everything and organizing the layers. So if you're ready for that, let's do it. 62. Body Part 3 Benefits: Hello and welcome back. All right, so we have four benefits, 12 columns. So we're going to divide each two columns up into three columns. Let's go ahead and first define the height of the section, which is going to be 430 pixels. So I'm gonna go ahead and take a measurement from the bottom of my hero section and go down to 4 30 let's and a guideline. And that will help us center everything top to bottom once we get to that point. Okay, Let's go ahead and type out some content for the titles I'm gonna do. Railway semi bold 24 for the size and a dark gray color for the color. Go ahead and put this layer up here at the top. I'm just gonna type everything out for now. And then we'll organize and center everything accordingly. So, for a paragraph, I'm just gonna go back to railway regular for the content I'm gonna do 16 and the same color. I'm just going to click and drag out a text box. Already have some information that I'm just going to paste in. You can type out the same information or you can just use some dummy text. I think it actually make this text box the full width of all three columns also going to bring this up as well. And then we just need to create a text link down here at the bottom. I'm gonna make it bold, and I'm going to choose the blue color from the branding of the company. Okay, let's move this up into position. Gonna turn off my grids for now. Now, let's work on some spacing. So the spacing between our icon and our title, I want it to be 20 pixels. So I'm gonna go ahead and measure that out. Let's go ahead and align these two. Let's create a new layer group called Account, and I'm gonna put my title and my icon on the inside. And then I'm gonna go ahead and grab my rectangle select tool so I can align it between these three columns, return on my grades and make sure I have all the grids selected. Okay, let's turn off the grid and then what? The alignment will go ahead and grab that content and a line to the center or paragraph should already be centered. Since we applied it across three columns. We just need to Graham are create profile link and align that to the center. Okay, Next, we need to de select and continue on with our spacing between the title of the paragraph and the link down here. So let's grab our measuring tool again and let's do 30 pixels from the bottom of the title to the paragraph and then 20 pixels again for the bottom of the paragraph and our link. Okay, let's put all of this information into that group layer called account. Okay, We just need to do that three more times. We'll go ahead and turn my guns off. And to make this easier, we can just duplicate this group that layer, move it over, and then adjust the content and the icon with the appropriate icon. Instead of just typing everything out from scratch, we could use the same content. We can use new dummy text. Or if you want to take time to write out something new, you can do that as well. So I'm gonna go ahead and finish this up. You can watch along, or you can go ahead and skip this part and finish it up yourself. And then don't forget to align all of this content once it's in a new layer group called Benefits online it from the hero section in the bottom of the section top the bottom. So I'm gonna go ahead and turn my grids on and begin aligning all my new content. - All right, so we're almost done. I'm gonna go ahead and align everything. Now I need to put it into a new group layer, and that's it. Our benefit section is now done. 63. Body Landlord: since our client has two main people that they need to target, we have to create a section for that second group, so their main service is providing listings for rent. But they need those actual listings to come from property owners or landlords, so they need to make sure that they can continually add new listings, hopefully on a daily basis. So we want to create a section for the property owners to easily list their property. So it shows up on this website. So the first thing we're going to do is define the height of this section, which is going to be 150 pixels tall. So let's grab our measuring tool and measure out 150 pixels. But a guy down there and let's create a background to grab your rectangle selection tool, make your selection. Let's create a new layer called background. Let's go ahead and pick out that blue color that we've been using from their branding and then go ahead and fill it in with your bucket fill tool de select. Let's rename it property owner background. Next, we're gonna go ahead and grab our textile. Let's change it back toe white. We're gonna do railway bold. Let's do 24 for the size and then disco ahead and type out a line of text. Just gonna place it right there. I'm not sure where I want it yet. Okay, Let's go ahead and create our But now, go ahead and grab your right. Kingo Select Tool. We want rounded corners in 25 for the Radius and then for the size, let's do to 75 100. We're gonna create a new layer called button list now and then go ahead and fill it in with white. All right, let's grab our text tool and we're going to use arrow size 50 and we're going to use that same blue color Tapout list now. Then we just need to center it inside of the button. Let's grab our button list now and crop the layer boundary. Go ahead and select it with your lame a tool and a line to the center and middle. Okay, I'm gonna put that in a new layer group called Les Nail Button and let's go ahead and line that from the top to the bottom de select. Let's go ahead and move our text over just a little bit. I'm gonna go ahead and zoom in. All right, let's go ahead and add 50 pixels of space between the tool, so grab your measuring tool and measure out 50 pixels. Okay? I also need to align this in the background top to bottom. Let's go ahead and put those two into a new layer group. Let's call it property owners. So the button and the content will go in there. The background. We're going to leave out just for a second because we need to align this to the center of the documents. So select all with Commander control and a then select the content and align center of content de Select, then put the property on her background inside of that group layer. We actually need to move that back down to bottom. Close that up. I also have my condo image hear from the hero section, not in the group layers. So I'm gonna go ahead and place that on the inside and move it down to the bottom and that's it. Our property owner section is now done. That was an easy one. All right. In the next tutorial. We're gonna go ahead and start working on the four or five main property category listings , so if you're ready for that, let's do it. 64. Listings: depending on the stage that a prospect is in the buying cycle or at the point where they're ready to rent. Something may determine how much and how far they navigate on a specific website. So, for instance, they land on the home page, and they're given an opportunity right away to filter properties based on their budget, the location and a couple other factors. But they may not be ready to search four properties from this particular company at this time. They may want to find out a little bit more about the company first. Why should I do business with this company? So in that case, they may begin scrolling down or navigating to one of the navigation options appear so as they scroll damn, they are presented with four benefits for renting properties through this particular company. So we're selling the services of this company with this service section. They may be enticed to provide their email address so that they can become notified when a new listing is provided. They like the idea that this company will help them organize their utilities because they're very busy, and they don't really have time to do that. Yes, they could probably find time, but they're so busy, it would be nice to have somebody else do it for me. So what's in it for me? These are the things that are in it for that renter. So now they're starting to think, OK, this company has my back. I'm ready to start searching so they can either come back up here and begin filtering. Or if they scroll down far enough, they will then see property listings based on the four or five most popular categories, which is what I designed here. So the thought is we want to put the most popular requests at the top, followed by each of the lesser popular types of categories. So maybe for this particular company, their biggest selling point is that they have pet friendly rentals, and that's their most popular type off filters that people are requesting. So you want to put that at the top, and every time a new listing is added, it's added over here to the left and then the one on the right gets bumped so you have fresh listings always being listed on the home page. But you're gonna always click on Seymour too well, Seymour Properties in this particular category, Maybe that's not a category that you really care about because you don't have any pets, while maybe lofts are the type of property you want and these air the next most popular types off rental requests. And again, we just make it easy for prospects toe find what they need, and they can scroll down and find a particular listing that works for them. So we're gonna go ahead and design this part of the websites and put it together. It's really super simple. We have a headline. We have two shapes, one for an image placeholder, one for content. And then we place our content inside of there. And then all we have to do is once we create this 1st 1 is duplicated three times and the sea more link. And then we can take this entire content duplicated 34 more times. Change the headlines and of course, we want to go in and add different images. It's not necessary to do that. You could technically lead the same image for every listing because this is just for a review for your client. And, of course, leave the content the same for every listing. But I like to go the extra mile and not only pay attention to the little details, but I want to give my client a visual representation of what they can expect their site to be once it goes live. Yes, they can visualize that with this home in every single category enlisting. But I think it helps to break it up and to better visualize what's going on for their new website, when they can actually see different images and different listings in different prices. So it's really simple to do, and it only takes 10 15 minutes to go in and change some of this information and to change the images. So it's just going that little extra mile to help our clients visually see what their website is going to look like once they approve that final design. So the first thing you need to do is download some images. So I just went to pick sabei dot com and did a search for real estate homes. You can download one image, or you can download 16 different images based on the four different categories, and then once you have them all downloaded. Go ahead and add them to your project and place those images into the appropriate categories. And I have pet friendly loft rentals, rentals with pools and detached homes and then renamed those groups layers accordingly. And then you may want to rename each one of those layers as well, based on the category, so we could have pet friendly one through four and then do the same for the others as well . But before we do that, I just want to give you another quick tip. Now, even though I do like to rename my layers accordingly based on the content of that layer, I want to share a reason why you may not want to rename those layers. When you download those images from picks obey, they have a specific file name attached to them. So if we take a look at this 1st 1 here and all the others, we have house, then a seven digit number, and then ah, three digit number. If we go in and we select this three digit number and then we copy and paste into picks, obey search, it's going to take us to that exact image that we downloaded. And that's 6 40 tells us the resolution that we downloaded so 6 46 40 Now that makes it easy to find that exact image that you downloaded because let's say you did rename this and then your client says I love that image. Let's use it on the live website. Well, that resolution that you downloaded maybe two small, especially if you're going to make a large image like this. So now you need to go back, and you need to find this particular image so you can download it and a higher resolution. The problem is your renamed the Layer, and you didn't keep tract of the URL for that image. So this is a reason why you may not want to rename the layer because it makes it easy to find that specific image later on, if needed. Now, for this particular project, I know that this client is not going to use these images because they're not listening these actual homes on their site. So in this case, I'm okay with renaming these layers pet friendly one through four. And of course I would have to do this for the other layers as well and I will do that later . Right now, I'm just gonna go ahead and do these four, Okay? Now that we have the images in place, we need to resize them. We need to create a background so we can anti drop shadow to it for the image and for the content as well. But first I need to increase my canvas size because I'm running out of room. So I'm gonna go up to image and select cama size, make sure it's unlocked, and then, for the height, I'm just going to do 5000 and resize it. I also need to add white to that background layer as well. So I'm going to select a background layer and increase the boundary size to image size. And then with my bucket fill tool, I can fill it in with white. Okay, now we can begin working on our title and the drop shadow for the images and a placeholder for the content. Let's go ahead and do our title first, grab your text tool with the letter T Let's do Railway Bold 36 for the size and then dark gray for the color. Okay, let's select. Also, we can align this title directly in the center of the document. I'm also going to move this up to the top, and I also need to turn off the other layer groups as well. Okay, Now, with my alignment tool, I can select it and line center of target. Okay, Now that that's done, we can begin working on our images. So I wanna go inside my first group layer here. I'm going to create a new background called background. Make sure you de select as well with Commander Control in D to get rid of that last selection. Okay, we can now go ahead and create our background for images and content, and we're going to make it three columns wide, which is 275 pixels wide. And that will give us four images evenly spaced and sized across those three columns. So let's type in to 75 for the with. And then for the height, we're going to do 270. Let's go ahead and fill that in with white with our bucket tool. And if I press the letter D and then the letter X, I get white on my foreground And then I can fill that in que de select with Commander Control and the letter D and just go ahead and move it over here to the top left, and then we can go ahead and add our drop shadow. So filters light and shadow and drop shadow. Now, in the previous project, we had a lot of drop shadows throughout the entire design, and I want to give you another quick tip for using your drop shadow as well as other filters, because we have something within these filters that will make it easy for us to remember the exact settings that we used previously. And you may remember that I said, I don't remember the exact settings I used, and I did that on purpose so that I can then show you in this project how to easily remember the exact settings that you use if we make adjustments and we like those adjustments, we can actually save those settings for future use by creating what is known as a preset preset is a tool or a function that will save all the options that you select so that you can use it later on, and we can simply do that by clicking on this plus icon. Give it a dame. Just gonna call it Drop shadow Click OK, And then if you go inside of this preset drop down menu, scroll down to the bottom, you will see that name here. I also have another one here called Drop Shuttle. So right now I have 11.795 for the X and the Y. But if I select my favorite drop shadow, those settings change based on what I saved at the time, not only that, but also saves your last used drop shadows. So in the previous project, I could have simply gone in and selected this particular date, and it would, and those settings that I selected at that time and making it that much easier to apply the last used drop shadow. So there's no need to write down these settings or try and remember it. When you can create a preset, you can also apply presets to some of the other filters as well. So just keep that in mind when you create a specific filter and you like that filter, make sure you create a preset so you can easily access it again in the future. So I'm gonna go to my favorite drop shadow. I'm actually going to change the settings and increase the opacity. I'm gonna go ahead and save it. And because I've used that name before, it's just going to add a number after it. Which makes it easy to keep track of the different favorite drop shadows that I create now that I take a look at this drop shadow. I think it's too intense for this particular designs. I'm actually going to drop this back down to 50. I'm not going to save it because I can access the last used drop shadow from here. And there's also another place where we can access it as well. So let me show you that I'm gonna go ahead and apply that and let's go ahead and undo that with Commander Control and the Letter Z to get rid of it. And let's say I want to use that exact drop shadow again without having to go inside of that filter panel. Well, if we go up to filters, we can see an option right here. It says Repeat drop shadow and this is the keyboard shortcut. So command or control, it's gonna be command If you're on a Mac control plus F so I could be working on this project, I could select my background layer and then just apply that keyboard shortcut, Commander Control and F. And then it applies it directly to that layer without having to go up to the menu to select it. How cool is that? So that makes it that much easier to continue using that same drop shadow throughout your entire project versus how we did it in the previous project, where we went into that filter menu repeatedly to set up those particular options. All right, let's go ahead and move our background layer behind our first image here, and we're going to confine this image to the with of this particular background. I'm just going to zoom in a little bit here and make sure that my image is perfectly aligned with the background. So what's my move tool and my arrow keys? I'm just going to move it into position. Now I'm going to grab my rectangle select tool and let's create a selection that is 275 pixels wide, which is the three great columns wide. And then for the height, we're going to do 100 and 80. Then we can go ahead and take that selection and move it directly in the place where we need it, just by clicking on the inside of that selection and then moving it with our mouse. We can also use our arrow keys to put it precisely where we want it now. Because I do have my image still selected. I can go in and add a layer mask. Make sure you have selection and click add. And then it applies that lira mask to the image and confines it to that shape. Okay, Now we can go ahead and take this background layer and duplicated three times for the other images. And then I'm gonna go ahead and rearrange these so that they are in the proper order. And then we just need to move each one of them into the position they need to be in will also turn on our grids so we can make sure that everything is perfectly aligned where they need to be. Okay, I'm gonna group these two layers here so I can move them over. Just call it image one. I'm also gonna turn on my guide so we can anti guideline to the top so I can align all the other layers to the top of it. So the last thing we need to do is create those rectangles selections so we can confine the images to the backgrounds. Let's go ahead and turn our guides and our grid off and let's go ahead and move our other images into position so that they are above their respective backgrounds. This image needs to be resized, so I'm gonna go ahead and grab that. And my skill tool was Shift Plus s. Let's go ahead and do to 75 for the with. We have a height of 1 84 which is fine, because we're going to use our layer mask to confine it to 180 pixels tall. We just need to move it into position, and I'm also going to move my other images into position as well. Okay, I can go ahead and create my selection now with my rectangle select tool. And we're going to do to 75 by 1 80 Make sure you have the correct layer selected. I need my second image, and then I need to add my layer mask. So go ahead and do that for the other images as well. Okay, everything looks pretty good. Now, let's go ahead and add our content for our listings. So what? Their text to again? We're going to use railway regular and let's do 18 for the size and are dark gray color again. And then just type out a street address, the square footage and the price of that house. So it looks like I have everything centered. So I'm going to select all with Commander control and a and then in two options, I'm going to change the justification so that it's aligned left. I also want to take this price and make it bold and make it a little bit larger. So I'm gonna do 20 for that. And then I just need to grab that content and move it into position. Now, I can go ahead and duplicate this layer three times and move each one into position. Okay. I'm gonna go ahead and pull each one of these out so I can align them all to the top to make sure that they are all aligned properly. So what the Lehman Tool and your shift key held down? We'll go ahead and click on each layer, change it to first item, and a line to the top can go ahead and put these into position now and then organize them so that they are all in the proper position according to their listing. I'm also going to take each one of these layers and then group them accordingly based on their position. So nuclear group Image four and then we're gonna put each one of those layers inside. So let's go ahead and organize all our layers in the same manner. - Okay , so we're almost done with our first category. The lesson we need to do is add a Seymour link at the bottom. So what they're text to again? We're going to size it at 18 pixels. I'm going to do railway bold and then for the color, we're going to use our blue color that we've used previously. And then I'm just gonna tapout Seymour. Let's go ahead and pull that out. Select all so we can use our alignment tool to align it to the center and we're also going to move this up. I'm just going to use my up arrow key for now. Just to put this into position right there should be good. And then I can put this in at the bottom of this group player. Now that our first category is done, the next three sections are really easy. All we have to do is take this group layer and duplicate it three times and then replace our images and changed the content to make all the content different. I'm gonna go ahead and move this group leered down, and then I can take the images out of this group player to put them in this one, and then I can go in and change all the images accordingly. Canada, delete this group player, since I don't need that one anymore. And then all I have to do is go in and delete these images and then replace them with the new ones. So I'm gonna go ahead and finish up this category and the next to, but I'm going to speed up the rest of the tutorial because you should already know how to apply these images to that specific size. So go ahead and finish up the next three sections and then in the next tutorial will go ahead and work on the next section of our design project, which is going to be adding a blawg section as well as placements for some advertisements. So go ahead, finish up the next three sections and I'll see you in the next tutorial. 65. Blog Sidebar: after my initial consultation with my client and after some thought and research on their particular project. In reviewing their competition, I may decide that they could benefit from a blawg and maybe even from some advertising space on that blawg as well as on their home page. Then I'm not necessarily going to contact them and ask them about it before I design it, because this particular section right here doesn't take that long to do 10 15 20 minutes just to put it together. And then when I provide the design concept for my client to review, I will then talk to them about this particular section of the website and how it's going to benefit them and drive more traffic to their website and or add additional revenue via the ad space for that particular company. And in the end, if they don't do the advertising space, but they do agree on doing a blawg than the additional traffic will eventually generate more income because they're driving more traffic to their website. So these are additional services that you can up sell your clients on by helping them set up a blawg and get it started by getting somebody to write for them, whether it's you or maybe you outsource it. Or maybe they have somebody within the company that can do the writing for them. But what you can do is you can educate them on how to write for search engines. So again, that's another service that you can provide is search engine optimization if you're not going to be the writer, or maybe in addition to so you can make sure that these articles are going to be found for their specific keywords to dry the traffic back to their website. So there are multiple types of services that we're designing in this particular website that we're going to try and Upsell our client on after they see are designed concept and not necessarily try and sell them on it before. It's always easier to show somebody visually your concept and then explain how and why this particular part of the website will help their company grow. That being said, let's go ahead and put together this part of the website, So for this section, you're going to need to find five different images and add them to your project. These two images on the right. I just chose randomly from a quick online search and then for these three images, I downloaded them directly from picks. Obey. And if you want to use the exact same images, just take note of these seven digit numbers and then do a search and picks a bait to find those exact images. Once you have those downloaded and added to your project, we will then create that divider to separate those two sections. So let's go ahead and zoom in, turn on your guides and grab your measurement tool and measure out 40 pixels of space. So this is where we're going to place our divider. But before we create that divider, let's go ahead and create another 40 pixels of space between the top of the next section and the divider. Okay, we can nail create our divider with our rectangle selectable with the letter M, and we're going to do 1200 pixels wide, which is the size of our grid system. Go ahead and create a new earlier called divider, then grab a dark gray color and fill it in with your bucket filter. All these select with commander control and the letter D, and I think that is a little too thick. So I'm gonna go ahead and crop the layer boundary, and then I can grab my scale tool with Shift Plus s and I'm going to do three for the height. Make sure that it's unlinked click scale, and that's looking better, but it's a little bit too intense, so I'm going to drop the opacity down to around 20 and that's definitely much better now. All right, let's go ahead and turn our guides on and let's add our first title. So I'm gonna grab my text tool with the letter T. I'm going to do railway ultra bold and 24 for the size and then dark gray again for the text color. Hit your escape key to get out of that tool. Then grab your move tool to move it into position. So we want to keep it to the left side of this column and not on the outer edge here. Okay, we can now start re sizing art images in placing them where they need to go, so let's go back to our measurement tool so we can place 40 pixels of space between the title and the first image we can then grab our image and put it into position. So again, for this one, I'm going to make sure that the image is to the right side of this third column because we want to make it three columns wide. And if I go too far to the right, then part of his face is going to be cropped off. So with my rectangle selectable, I'm gonna go ahead and do 275 pixels wide and 180 pixels tall. Make sure you have your image layer selected and create a layer mask with a selection to crop it to that size K d Select with Commander Control and the letter D. Let's go ahead and do another 40 pixels of space between the images, and then we're gonna go ahead and repeat the same thing for this image. So to 75 by 1 80 and then create a layer mask que same thing we're gonna measure out, move it and crop it. Okay, go ahead and de select. Grab your measure tool, and we'll do that one more time for the next image. 40 pixels of Space Commander Control and D to de select. And then we're going to create our content for each one of our circles. I'm gonna grab my text tool. I'm going to change the font size to 18 and just regular railway Bold. I'm also going to click and drag out a text box that is four columns wide. Go ahead and type out your title. Make sure it's aligned to the left. I'm gonna go ahead and make this text box smaller so it's at the bottom of the text. Hit your escape key text tool again. Click and drag out, and I want the bottom of the text to be no longer than the bottom of this image over here. Then I'm gonna grab some dummy text to paste inside of here. I'm going to select all because it's too big. I'm going to make it 14 and railway regular, no bold. And then down here at the bottom, I'm going to type out, read more, then you can select it and change the color to represent a link. I think I want to make that bold as well to help it stand out just a little bit more I'm gonna go ahead and put this content into a new Lear group called Article One. Then I'm going to duplicate it twice, and then I'm just going to move it down into position. And now that our articles air done, we are almost done. So our images are gonna go over here on the right, and we're going to make them four columns wide. Let's go ahead and move the first image up to the top of the first image and to the right side of the right column. I'm also going to move this. So Aiken, center it a little bit better across four columns. So right about there, and then I'm gonna grab my rectangle selection tool so I can crop that image to this position. I also want to and a guideline right here at the bottom of the first image. And then I'm going to place my image right in this area here, and I'm gonna grab it one more time and move it up just a little bit so I can center it just a little bit better. And then I can use my rectangle select tool to make my selection and then and a layer mask . Okay, so that's the first ad. We're gonna do the same thing for the second ad, and for this one, I'm going to crop it to the bottom of our last article, and then I'm just going to recompose it, so it's a little bit centered and we can see more of the information. Okay, back to the rectangle, selectable again to make our selection and then add your layer mask the select Commander Control and the okay, let's turn the grid off. Let's turn the GYNs off now The section is done, but we have one more step left, and that is toe organize our layers. So we have a lot of layers here for both our new section and our previous section, which was our listings. So let's go ahead and organize our listings first, and then we'll do the other section. All right, Our blog's section is now done, and we're ready to finish up our design by adding our footer, and we'll do that in the next lesson. 66. Footer: next up the footer which I've already taken the liberty to design because there's not a lot that we have to do for this particular footer because there's not a lot of links. I've included a few here. I've added social media icons and I created the height of the footer 1400 by 150 pixels tall. And in this instance I used a darker blue to add a little bit of contrast to the overall section down here at the bottom of the website. And overall it still conforms to the overall design of the site, which is clean, modern, professional and there's really not a whole lot more weaken do for this footer. And if we did, if we did something more creative, it may not be cohesive with the rest of the website. So in this instance and in most cases I'm OK with a plain, boring modern professional footer because I would rather have the rest of the content stand out and not so much the footer. Yes, the footer is lonely and gets very little love at the bottom of the page, but the purpose of the footer is on Lee to allow viewers to easily access other parts of the website, which we have here with our media links and two links to other pages that are necessarily available in the primary or secondary navigation, like being able to advertise with this particular company. If you were to convince the company to sell advertising space, you want to have a link to that particular page. We also need legal and privacy pages as well, especially if the company plans on advertising on Google or Facebook or other types of platforms. Those social media platforms do require privacy and legal policies and sometimes cookie policies available for viewers to read. So they know what kind of information is being collected when viewing the Web site and what it's being used for. That's your typical footer. We could do something a little bit more creative, but again, it's probably not going to match the rest of the websites. So before moving on to the final tutorial for this project, go ahead and finish up here. Footer. Make it full with with the dark blue color end your social media icons and your extra links down here as well. And then we'll go ahead and do our final tweaks in the next tutorial 67. Tweaks: Hello and welcome back now, as I have mentioned previously in other projects. Once I complete a design, it doesn't go to the client right away. I want to tweak the design and see if there's anything I can do to make it better. Or maybe I can find some elements that are not properly aligned that should be fixed before going to the client. But another thing that I do besides tweaking the design is I step away from the project and , if possible, I try and step away from it for up to 24 hours. Now, if I'm on a tight deadline and I need to get this to the client sooner rather than later, I'd like to at least give myself a couple hours away from this particular project because I may be have been working on this project for an hour, two hours, three hours, whatever the case may be. And then I find if I step away from the project and come back, it gives me a fresh view on the design, and it's easier to see things that I missed while I was designing, for example, spacing and aligning different elements, or maybe it could be something simple, like forgetting toe. Add a hover state like down here in this section. I forgot to add a hover state for this particular link. Now they're being said. The other thing I have to decide on is what is going to happen when a user or visitor clicks on this link. Is it going to go to another page and open up another page with all that information? Or is something else going to happen when I click on that link Now, I'm gonna show you exactly what's going to happen when you click on this link in just moment. But first I'm gonna go back up to the hero section for a minute Now. Overall, I'm happy with the header and the hero section, but I think we can make this filter section much more user friendly right now. I think this filter button is too large. It looks unbalanced. I really don't need a button that large for filtering through these different options. So what can we do to make it better? Well, I think if we make this button smaller and instead of using three column grids, we can use two or even one column for that filter button. And then in the other two columns, we can add additional filter options to allow the viewer to narrow down their selections even more based on those other options. But the other thing that's really missing from this is a hover state, because what's gonna happen when they hover over these options? Are they going to be allowed to manually type in their budget in their city and these other options? Or do you want to provide them with pre made options? Available any drop down list so you could have four or five different budget options, and you can also have a dozen or more different types of locations. Same with your other options. Over here, you can have three or four different options for bedrooms and baths, and then you have the option to add additional filter options here as well. So let me show you the design I came up with to improve our called action filter. So this is the original, and this is the new design. So I made the filter button smaller and I added two more options. But even though I kept the filter button 22 grid columns. I took the city, and I made it smaller as well. Before it was four columns wide, and I made it three columns white instead, so I could add that additional filter option. We could do the same thing with the budget. We can make that two columns wide and then add another option. It all depends on your client's prospects and what you can do to make it easier for them to find what they want. And then, of course, I have this hover state right here showing that if you click on this, something is going to happen. So what's gonna happen? Is it going to give you an option to pre select from other locations? Or you're going to allow them to automatically type it in? Or is it going to go another page? What exactly is going to happen? Well, in order to make it easier on our prospects, I want to keep them on the same page in the same section. So what I created was a drop down to show additional cities from which to choose from. So this shows our client and the Web developer what happens when you click on that area. And if there's more than four or five options, you're either going to have to show that part of the drop down, either coming down and covering up more this page down here or you're going to create a scroll on the right side toe. Let the developer know that that person can then scroll within that menu background versus having to scroll down the browser, which again makes it easier on the prospect. Now the question is, what about these other options? Well, the bedrooms and the bath. You could probably leave that, as is and just allowed the visitor to type in their answer for these. But what about pet friendly? Do you want them to type that in, or do you want to give them an option? Yes or no? If you do it that way, then you have to create a drop down for that option. Same thing with pool, yes or no? And then for the budget. You probably want to create a drop down for this part of the filter as well, because you don't want them toe type in a specific number. Maybe your client has four or five budget ranges that they typically rent from. So in that case you would create another hover state or another drop down menu for this part of the filter as well. And you have to do all of these as part of your design before giving it to the Web developers so that they know how to properly code each one of these different sections. So what else can we do to make this Web design even better? Well, if we scroll down to the listing section, you can see that the spacing between the titles to see more and the image backgrounds are all different. I didn't take the time to properly space all the different elements from each other, and I just did it randomly and by I. And it looks on professional now, even though some people may not notice that you still want to notice it yourself before you give it to the client and the Web developer. Because all these little small details that you work on is going to make your website design better than other Web designers that don't take the time to align everything pixel perfect. And you could get a Web developer that is going to code this exactly based on the pixels that you have laid out in your design because they think that's what you want. So you could end up with a live website that looks unprofessional because there's no symmetry between the spacing of all the different elements. Now another thing we can do to make this listing section better for the user is to create a hover state that when clicked on it's going to provide more information for what they're trying to find. So remember, I mentioned we should have a hover state for our Seymour links. So if I turn it on okay, we now have our hover state. But again, what's gonna happen is our visitor is our prospect going to be taken to another page to show them more of the listings? Or, better yet, what we can do is keep them on the home page and load those additional listings below this row of content. Now you may be thinking, What's the difference between going to a new page with the information versus having that information showing up on the home page? Well, if they're viewing this particular Web page on a mobile device. Chances are their Internet speed is not going to be as fast as, let's say, on a desktop or a laptop. So when you navigate to another page, a lot of information that's already on this page, like the Header and a Footer and some other things are going to have to reload on that new page. Plus, all the additional listings also have to load on that new page. So that's gonna take a lot longer to load versus having them show up on the home page. Because you can have the site coded so that these images, even though you can't see them, they will pre load in the background so that when they click on this link, those listings will show up instantly versus waiting 5 10 20 seconds for them to load on a new page. Because the larger these images and the more listing there are, the longer it's going to take the load. And the longer it takes the load, the higher the chance that person is going to leave that website and try and find what they're looking for from somebody else. So in the end, we want to make it as easy as possible for prospects to find what they want. And by doing it this way, it helps keep them on this page, because if they have to wait that 20 seconds or 10 seconds or whatever it is, chances are they're going to leave the website and go to another site to find what they need. They don't have the patience to wait for that information, the load. So by doing it this way, we increase the likelihood they're going to stay on the page and do business with our client, which is part of our goal as a Web designer is to help our clients earn more business through better design. So how would this look? How would you set this up as a designer to show it off to your clients? And so the Web developer knows how to code it. Well, just like we did in the hero section. We need to create all this content and another group layer to show everyone what's going to happen when you click on this link, which will add two more rows of listings for that category, and all the other categories will then be pushed down. So this is the hover state, and this is what happens when you click on that link. Now the other thing we can do to make the site even better is to improve the readability of the listing content. So right now we're using one font. They're all the same size, and it's kind of crowded and busy, so it makes a little bit harder to read. So what can we do to increase the readability of our content? Well, I think we can use different fonts, different sizes, and maybe change the layout of that content as well, to add emphasis on certain elements or certain text versus others so that it makes it easier to read. So that was the first option that we came up with. But this is what I came up with as my second option to make it easier to read that content . So I changed the font of the street, and I also changed the size from 22 16 and I also made it bold, and I used the font arrow versus railway. The other thing I did was I took the square footage and I made it 14 for the size versus 20 over here. And then I took the price and I moved it to the bottom right, and I also removed the bold styling, and I reduced the opacity of the layer from 100 to 75 to de emphasize the price. So now the street is emphasized more than anything else, based on the styling and the funt. So this overall makes it much easier to read this than it does this because it's less crowded and our eyes gravitate to the street name first versus over here on the right. Our eyes aren't quite sure what to look at first, even though we did bold the text for the price, it's still much busier than this content over here. So it's always a good idea to step away from your design for a couple of hours form or if possible, and then when you come back, rethink How can I make this design even more user friendly? And then all those little things you do to improve the design will make it that much better . So your next assignment consists of two things. One go through and make all those tiny tweaks to the design to make it better make sure everything is aligned properly and make sure you have an appropriate amount of spacing between all the elements and make sure you didn't leave anything out. We also need to crop are canvas to get rid of all this content down here. And the other thing you need to do is you need to go through all the different hover states that we covered in this lecture and create them on your own. At this point of the course, you should know how to create all the different shapes, resize and all the other elements, group them together and how to crop your canvas. So I encourage you to take the time to do this assignment, and this will help reinforce what you've learned previously by doing it on your own. If you get stuck, just go back to previous lectures to get a refresher on how to do certain things. And by doing this on your own, you will learn exactly how to do it for your own projects in the future. In fact, you actually have 1/3 assignment, and that is to redo this website with your own creative vision so you can use it for your portfolio. Thanks for listening and have an awesome day 68. Project 5: Watkins Glen Briefing: Hello and welcome to Web design Project number five for this website. We are going to redesign this Web page from the state of New York, and this one in particular, is for Watkins Glen State Park. Like so many of the other websites that we've redesigned, this one, too, is outdated. And although it does have a lot of information, it's kind of hard to navigate and try and find exactly what we want. Yes, we have some buttons over here to give us the information, but I think that the overall layout is poorly designed. It's difficult to read because the font selections and the styling could be done much better than it currently is right now. The other thing I find about this site, at least for this particular site, is even though they're describing exactly the things that you can see at this park. There's a lot of text describing that information, and I think it would be better to show an image off all the different things that you can do in Watkins Glen versus Reading What you can do. There's an old saying that a picture is worth 1000 words, and I would think that an image would better describe what you're going to see because, well, you're actually going to see a part of what you can do at the park or in Watkins Glen in general, the city or the town of Watkins Glen. Yes, they do have a couple of images, but this image here is not representative of this park. It's a poor image. It looks distorted. It looks like it was squished from the top down. The lighting is not very good, and overall, I just don't find this image very inviting. I would rather see a professional photograph and not something that looked like it was taken by a tourist. This image here is better, but it's so teeny tiny. It's really hard to make out what it is. And if you're on a mobile device, that's going to be even smaller unless it's coded to be larger. But it seems like their overall Web design is more text based versus image based. So let me show you what I came up with for the design of Watkins Glen State Park, and it's basically a more photo intensive Web design versus text based. So I start off the hero section with a large image of the state park itself. When you enter the park, this is one of the first things that you come across. We have a little waterfall, a stone bridge, and it looks very inviting. We have a large called action button up here at the top to discover Watkins Glen, which will navigate to another part of the website to show you the things that you conduce you at this park. I've also consolidated all the menu items inside of a hidden menu to help consolidate all this information and to clean up the site. As you scroll down, you're presented with professional images that show off all the things that you can do at Watkins Glen. So instead of describing each one of these items, we can actually see the things that we can do. And we may be mawr motivated to visit the park based on these images vs reading. Yes, I've put that information in here as well to give a description of each one of these types of things that you can do. But each one of these images also will link to another webpage going into more detail about what you can do, plus a photo gallery of each one of those. So that would be part of my conversation that I have with the client at the time of revealing the initial design concept. I'm not gonna go in and design each one of these pages separately if the client isn't approving that particular type of design concept toe, have them all on different pages, even though they already do have all those pages. I still want to get their confirmation that they do like this design concept, because I am going to match each of these individual pages to match this main page as well , which is toe have large images that Philip the browser from edge to edge. Then, as you scroll down, there is a list of a lot of information that you may need to know about the part. For example, hours of operation. I do have a hover state here so that when you do click on the button, a small window will pop up with that information inside of it, and I've also included two options to close out that window. So easy access to all the information you need right here. There's actually one missing. It looks like here we go. And then we also have an easy way to book a campsite. There are places where you can camp within the park, and you can quickly and easily book a campsite via this option here. If you're not familiar with the park, you can click on this link to get a map of the campsite, and it will navigate to another page to provide you with more information. But again, we want to make it as easy as possible for campers to book their stay, especially if you've camped here before and you know what you're doing. You can do so right here from this part of the Web page without having to navigate to other parts of the site. And then below that, we have a cleaned up, updated footer with all of their content linked to all the different pages. Everything is evenly spaced now, although there footer now isn't that bad? I just updated it a little bit with new fonts and different colors to help make it easier to read. So this is going to be a fairly easy Web design to create. But like before. I'm going to share some additional pro tips along the way as we designed this website, so if you're ready to get started on this project, let's do it. 69. Header + Hero: hello and welcome back are in this US, and we're going to design both the header and the hero section. So go ahead, grab your grid template so you can start from scratch. And we also need to add to image files to our document, both of which are attached to this lesson. So the 1st 1 is our New York state logo. So go ahead, grab that and bring it into the document and then just move the logo up to the top left and then grab the hero image and bring that in as well. So this image is a low resolution file, and we need to enlarge it to make it full with from left to right or full bleed. And when we do, it's going to become pixelated or blurry. Which is fine, because this is just for practice and not for our portfolio. Let's go ahead and re scale this image with Shift Plus s and lets type in 1400 for the with , and then the height becomes 9 38 a song. Does he have it locked? Go ahead and scale it's and then just move it into the left and right side of the document . We're gonna crop in, composed this image in a minute once we get to the hero section, but we're gonna finish up the header section first. Okay, let's go ahead and create a new layer called header background click. OK. And then for the width, I wanted to be full bleed as well left, Right, So let's go ahead and create a selection with our rectangle selection tool. It's OK if it goes past it because it's going to confine that selection to the boundaries of your document. So the with I'm not worried about a tight. I want to be 100 and then for the color, I want to use this cream color, which is this Hexi decimal number here. So go ahead and type that in, and then go ahead and grab your bucket filter will with the letter G and fill it in. And don't forget to de select with Commander Control and the letter D. All right, let's go ahead and crop the layer boundary. Now go to layer, crop the content, and then just move it up into position. Okay, I'm gonna go ahead and move this down below both images Let's go ahead and align our logo. Let's go ahead and measure out 30 pixels of space between the left edge and the left side of the logo. Okay, let's go ahead and reposition our logo. All right. Next up is aligning it to the top and bottom of our background. So with my alignment tool, go ahead and click on my header background first and then shift key. Click on the logo and then a lying middle of target. Now let's work on the navigation. I'm just gonna add a hamburger icon representing the navigation. First, we need to create a new background for it called hamburger Background. And we're going to make a selection 100 by 100. And then for the color, I'm going to use this dark green colors to go ahead and type that number in. And then let's fill it in, make sure you de select coming under control and D and then I'm just gonna move it up here into the top, right? Okay, I'm gonna grab my hamburger icon that we created in the last project, so I just need the hover icon and the hamburger icon, so I'm just gonna grab those two and bring them over into this document. Okay, let's put this up and over now. The hamburger icon is a little small, so I just want to make that larger and not the hover I kind itself. So I'm just gonna grab my hamburger icon than Shift Plus s and I'm going to enlarge it. So right there, 50 for the with 53 for the height. And then I'm just going to go ahead and move it over into position here. Actually, let's go ahead and allying the icon directly in the center of the hamburger background. Make sure you have hamburger background layers selected and crop to content for the layer boundary. I'm gonna go ahead and pull the hamburger icon out as well so I can go ahead and grab both with my alignment tool and then I can align middle and center of target. Let's put the hamburger icon back in. I'm just gonna move the hover icon down into the right just a little bit. So right about there. Let's go ahead and zoom out. Let's turn off our guides and our grid so we can take a look at the header section, so the header section is done. I'm just gonna go ahead and clean up my layers here and create a new group layer called Header. All right, let's go ahead and grab our hero image and move it up to the bottom of the header section. Just going to zoom in and make sure it's pixel perfect. Looks like I just need to move it up a couple more pixels so right there looks good. So we have a couple of things left, and that's heading our title and call the action button for the hero section. So when it comes to the font families that I choose for a Web design project, I usually do it prior to designing. And I will choose my fonts based on one of two things either popular fonts at the time that I'm designing the website. So, for example, we've been using railway a lot throughout these projects and its popular at this time in the future. It may not be as popular, so I probably won't use it as much war. Depending on the company, I will use a font family from their branding. So if we type out Watkins Glen and we change this to railway. They use ultra bold. It's a nice fund, but it doesn't really match the branding of their company. So instead I would use a font like arrow that better matches their branding. And we can see that in the letter W here. It's very similar to the W in their logo. So I'm either going to use the exact same front they used in their logo or any other type of branding, or I'm going to use a font. Similar. Now the lower case letters don't really match. But if we did these in all capitals, they would better match their branding. So that's why I would choose a font like arrow for this particular design. So I'm gonna go ahead and put this in the center and select all. And then with my alignment tool, I can go ahead and align it to that selection. So go ahead and do that. The select Come in our control and the letter D, and we're gonna go ahead and create our But now let's call it C T A button and C T. A. Is short for called the Action. Let's grab our rectangle select tool, and we're going to add some rounded corners. Let's do 15 for the Radius and then as far as the size we're going to do to 35 by 75 then we're going to fill it in with this same dark green color that we used up here. Go ahead and fill in your button and de select, and then I want to align the button to the right edge of our title. So let's go ahead and crop the layer boundary as well, and then just move it into position. Okay, let's go ahead and grab our textile. I'm gonna go ahead and change it to Railway, but I want to choose an italics style. Let's go ahead and change it back to white and then just type out discover and then for the size. Let's go ahead and bring this down to 48. All right, let's go ahead and the line it inside of our but new Okay, we are almost done. The last thing I want to do is I want to recompose the image a little bit by moving it up. So what the move to? I'm just gonna go ahead and grab the image and move it up. I don't want to go to high because I don't want to discover Button to be down here in this area. I want it to stay where it's currently dark in that part of the image. So I'm gonna go right there, and you're also going to notice that thief old line for that hero section is right around 700 to 800. But the actual image is going below that fold line, and that's fine for this particular site, because when they click on the Discover button, it's going to automatically scroll down to the next section. So I'm not worried about the image bleeding over or past that hero section. Okay, let's go ahead and take our layers new and group them into new earlier groups. Let's go ahead and do our button first to do C T a button and then a new layer group for the hero section, and that's it. Our header and hero section are nail done 70. Body Things Part 1: when a visitor to this website clicks on our called action, which is our discover button, the site will automatically navigate down to the next section, which is the things to do. So this is something we have to explain to our client. When we present the actual design concept, this isn't going to navigate to another page. Instead, it's gonna auto scroll down to the next section. And once approved, we also have to let the developer know this as well so that they're not thinking that this goes to another page or that there's a pop up. Instead, they need to code it to scroll down, and then when the visitor does click on it and it does scroll down to this part, they're going to be presented with all the things that you can do at Watkins Glen. They can either read a brief introduction of each item, or they can click on each one of these images or text titles to navigate tomb or information. So before we start designing the site, I just want to talk a little bit about images because we need to find images for each one of these things to do their seven and total one of my favorite places to go for free images without worrying about purchasing a license and being able to use them for commercial projects. And things like that is picks obey. We've talked about it before, so if we go in here and we start doing a search for Watkins Glen, we can see he there's not that many images. There's only six images total, so now we need to start doing deeper searches. Watkins Glen Hunting Watkins Glen boating. But there's even fewer images for those categories as well. So now we need to do general searches for, Let's say, waterfalls because there's only one waterfall and we don't want a vertical image. We need a horizontal image for each one of these links, so this image will not work. Yes, you can crop it and make it horizontal, but I don't think it's going to be a very good image cropped horizontally because you're crapping out a lot of the image. So we want to find horizontal images. The only problem is none of these images, or even this image, is a waterfall located in Watkins Glen Park. This waterfall is actually about three hours away any completely different perk. So when you're developing a website with lots of images or just a few images in general, whatever the case may be, you want to make sure that those images are representative of the location for that company , or that park, or whatever the case may be, because if you put this image in with the Watkins Glen Park, while people are going to be disappointed, if they want to see this waterfall and they can't find it, and then they finally find out that it's actually three hours away. So the moral of the story is to choose your images accordingly. So if we can't use picks, obey, we have to find a different site to use. And there are stock photo agencies with more images from Watkins Glen that you can actually use versus the images from picks, obey or even Google images. This image here I found on Google images, but it's not readily available for commercial use. The client will need to pay for a licence to use this. It's okay to use in your design, but you can't use them on a live website until a licenses purchased for commercial use. So before we get started on this project, you need to find seven images. Whether that's through picks, obey or maybe a company like shutter stock or Google images. Either way, find seven images for each category. Download them and we'll go ahead and put together this section of the website in the next lesson. 71. Body Things Part 2: Hello and welcome back. All right, Now that you have your images downloaded, go ahead and add them to your document. If you haven't already renamed the layers accordingly and then go ahead and position them in a order similar to this. And you may also need to increase your canvas size, which I've already done by going up to image selecting canvas size and then adjusting the height accordingly. So go ahead, do that. And then we can go ahead and begin sizing our images in placing them precisely where they need to be. Now, as far as the size goes, we're gonna do 400 in 67 pixels wide by, 310 pixels tall. For the 1st 6 images, the last image is going to be 1400 pixels whites. What fills left toe right of the document. And then I'm going to size mine and 450 pixels tall. Now, the image you downloaded may be different than this one. So in that case, you may need to make it taller or shorter, based on the composition of that image. So you will size your image at the bottom here. According to what you downloaded. All right, let's go back up here to the top and let's go ahead and resize our first image right here. Now real quick. You may be wondering why I chose 467 pixels wide. Well, as I mentioned, based on the design style I chose for this Web design project, I want the images to fill up the document from the far left to the far right. So we have three images, and the signs of our document is 1400 pixels wide. So when we divide that, we get 4 66.6 and I just rounded up to make sure that it all fit on the page. And the other thing you're going to notice is we're not really relying on the grid system or the columns to align. Our images are text and other elements because of the design style I chose. And when we go to and are content in this section, we're not using the columns at all. We're just going to make a selection to align that text directly in the centre versus using the grid columns. All right, let's go ahead and begin cropping our images to the size that we want. So if needed, you may need to re scale. Your image is according to the size that we're going to use for each image. So I would recommend scaling your images down as close as possible to the height or the with for that particular image. So right now, I have 3 11 for the height, and we're going to do 3 10 for the height, so I can't really scale this anymore. So I'm gonna go ahead and grab that particular layer, which is this trails image, and I'm gonna make a selection. And then I'm going to add a layer mask to crop it to that particular size, which again is for 67 by 3 10 And then if I want, I can actually grab my move tool with the letter V. And then I can either use my arrow keys after I click on that layer and move that image into position to recompose the image according to how I want to compose it. So once I do that, I can Then go and add my layer mask, make sure you have selection selected and click add and the image is cropped. So this image here is much larger than the last one. We also need to de select with Commander control and D. So I'm going to select this particular layer, and then I'm going to use my scale tool to scale it down. I also need to make sure that I have everything locked here so it stays and proportion. And I'm going to pay attention to these numbers up here because I don't want either one of these numbers to be lower than 4 67 or 3 10 I think that's fine right there. So I'm gonna go ahead and re scale it, and then I'm going to use my rectangle tool to make another selection. But what I need to do is make sure that I am aligning this particular image to the right side of this image so we can turn on our guides and add some guides along these images to help us make a better selection before making that selection. Otherwise, if we crop it and it's out of place and we have to redo it, Okay, I'm gonna go ahead and grab my move tool again so I can move this image up a little bit and recompose it because I really don't want to crop out this part of the image again. These air, the little details that you need to work on when designing your websites to make your designs better than the average graphic designer. All right, let's go ahead and and a layer mask again. And then we just need to repeat this for all the other images. So I'm gonna go ahead and do this real quick, and I'll probably speed up this part of the tutorial so you don't have to watch me do this and slow motion. - All right, let's go ahead and add our body content in this section. New. Let's go ahead and create a color background for it first. And let's go ahead and create a new background layer called text background. Let's go ahead and create a selection right here, and then we're going to fill it in with that cream color that we used in our header section up here. I'm gonna grab my eyedropper tool and select it, and then I can go ahead and fill that in. All right, let's go ahead and and our content nail. Grab your text tool. Let's change the font to railway Ultra Bold. Let's do 72 for the size and then our dark green color. And let's type out things to do. Can just gonna move this up and out of the way now, before we and our body content, I want the size of that content to be a specific size. So if I grab my text tool and click out a text box, I can't really define the size of that text box. So a way to get around that is by creating a new layer. It's going to be a temporary later because we're only going to use it to make a shape for the size that we want and then we'll delete it when we're done. So let's go ahead and make the shape. Let's do 600 wine by 4 50 tall, and then we're just gonna grab a light color gray and fill it in with that, and that's the size of the text box that I want to use. Go ahead and de select and grab your text tool, and before we do that, let's make sure we have the correct Funt now, when it comes to the font family for the body content, I like to use a font like Georgia, which is much easier to read at a smaller size of 14 or 16 or 12 versus a font like this, which is much easier to read at a much larger size. We're gonna do Georgia at 16 for the size, and then for the color we're going to do a dark gray color. Now we can take that text tool and click and drag out a shape around it. But first, let's go ahead and the crop, the content of that Lear boundary to make it easier to see where to place that text box. So now our text box is the exact size I want it. So now I'm going to grab some dummy text, whichever already selected from a different monitor, and I'm gonna go ahead and paste that in. Okay, so I have some additional text down here that's being cut off. So I'm just going to make that text box a little bit shorter and then hit the escape key to get out of it. Now I do want to make the next set of paragraphs a specific size as well, or at least be confined to a specific size. So we're gonna take our background layer here, and we're going to resize it with our scale tool. And this time it's going to be 1 50 for the height and it's 600 for the with. Make sure you unlock it first, resize it skillet, and then we can take this box and moving down here so we can create a new text box based on this new size. I do need to go back to my text and a just a little bit because I can still see a little text there. OK, now that I have that done, what I want to do is let's take a quick look and the old design. They have a section here that has an update that is giving information about the status of the park, and right now it's closed based on the state. So this is some important information that we should include on the things to do, because if somebody is looking at the things to do, it would be nice to know if the park is open or not. So we're gonna go ahead and and that information down here. So I do have that information from a previous document and another monitor over here to the left that you can't see. So just grab some dummy text and then just grab your text tool and create a new text box based on the new size of our shape. Go ahead and paste that in hit your escape key. And now we can delete this text background because we don't need it anymore. And then I think we should add a title for this section as well. I'm going to call it park updates, and I also want to change the font back to railway bold. Let's also make the font size larger. Let's make it 20 and then just choose a dark red color. All right, I'm gonna go ahead and turn my guides on now so I can go ahead and align everything to the left. As far as the spacing here, let's go ahead and measure out 25 pixels of space. Let's do 50 pixels of space between this paragraph and the next title, and there's really no reason why I'm using these exact numbers. I just find that these numbers work well for this design. So when you're designing, you're gonna have to decide and choose the amount of spacing based on what you think looks best. Okay, I can go ahead and put this one into position, and then we have to make 25 pixels of space for the next paragraph. All right, let's go ahead and start organizing our layers here. So now we need to take this content and align it perfectly in the center of this area here . So I'm gonna go ahead and create one more new layer group for all this content called body content. And this will make it easier to align everything directly in the center. I'm gonna go ahead and make a selection for this area here. Now, we could have done it with the text background, but I believe the text background is actually larger than this area here. And that's why I'm using a selection instead of aligning to the background. So line that center and middle of target, de select Commander, Control and D, and that's all done. We have one more thing left to do and that's the ad. Are titles for each image. I'm gonna go ahead and scroll back up here because I want to click on my trails Image for the first title and I'm gonna tell you why I am doing it this way in just a moment. Let's go ahead and grab our textile with the letter T. Let's change the font, Teoh Arrow For the size, we're going to do 60 and let's change it toe white. Okay, I'm gonna click on the image here, and I'm gonna type out the first title in all capitals. And here's why I selected my image layer before adding the title. When you do that, it's going to add that text layer directly above the layer you selected. So if I come to camping image and type out camping, that camping layer is now above the camping image. So this makes it easier versus doing it all down here or somewhere else and then having to go back and move all those titles into position. So just another quick tip for helping you get organized faster by selecting the layer first before adding your title. Now that we have our white text on our images, we have a small problem Some of the images have light colors and wait in the background, and it's making it difficult to read those titles. We want to make it easy for people to read the content, so we need to do something with our text here. To make it easier to read, weaken either lower the opacity of the images or make the image is darker. Or we could create a text box behind the content and use a dark color behind it. Or we can add a drop shadow to the text to make it easier to read, because it's going to help separate the text from the image. And in this case, for this particular design, I like the idea of the drop shadow versus the other options because I don't wanna and anything else to the images, because the images should stand out on their own. And if I add a background for the text itself, it kind of takes away from the image. So because this is an image intensive design style, I want those images to stand out as much as possible. So let's go ahead and select our first title here. We're gonna go up to filters light and shadow drop shadow. So let's go ahead and play around with our settings here to find an option that works out best for our titles and the images. I'm gonna go ahead and drop X and Y down. I'm also going to drop the Blur radius as well, which sharpens up that drop shadow, and it helps it separate from the image behind it a lot more when you lower that radius accordingly, based on your own personal preference. So I'm liking these settings here, and I can either create a new preset based on this and then come back into this filter drop shadow dialog box every time I want to add that drop shadow to all the other titles. It's really not necessary unless I want to use this particular job shadow in a different project. I don't plan on using these specific settings for another project, so I'm okay with clicking OK, because if you remember, if you select another text layer and then use your keyboard shortcut, which is command or control and F, it's automatically going to apply that filter setting directly to the layer. How cool is that? So that makes it so much easier and faster to use that keyboards for cut versus going back up into the menu to do it manually. So go ahead and apply your drop shadow to all your titles. Now that we have our drop shadows added to all our titles, we need to then take all our titles and the line, then perfectly in the center of our images. So let's go ahead and start off with our first image here. I'm gonna grab rectangle selection tool so I can make a selection around the image and then I can use my alignment tool to align it to that selection. So I'm gonna go ahead and do this for each one of the titles and the images. Okay, We are almost done. The last thing we need to do is organize all our layers and I'm gonna take all the titles and images and place them in individual layer groups called Image One through Image seven and that's it are things to do. Section is now done in. The next tutorial will go ahead and begin working on the info section of our body. So if you're ready to do that, let's do it. Okay? 72. Body Info: Hello and welcome back. All right, so we have another section for our Web page that is going to provide additional information for anybody that wants to visit the park. We're gonna handsome content at the top and some buttons at the bottom that will provide additional information when clicked on. And then we're also going to add a little section down here for those that want to reserve a campsite at the park. The first thing we need to do is add a large image for the background of the section. Any image will do. So go ahead and go to pick Sabei, find an image and then go ahead and scale it. So it's a least 1950 pixels tall, and it covers the full with of the document doesn't have to be the exact same size. Just make sure it fills up at least that much. All right, let's go ahead and grab our textile with the letter. T fun family is going to be arrow. The size is going to be very large at 95 and we're going to use white and this is going to be for our title. All right, I'm gonna go ahead and turn these other layers off. This way I can select the layers I need with my alignment tool because we are going to align our title. So First Commander Control and a to select all. Then you're lame, it tool and then a line center of target. I also want to add a drop shadow to this title because it is kind of hard to read right now . So with Commander Control and F, we can add that drop shadow that we've used in previous parts of the project. So that definitely makes it much easier to read versus not having the drop shadow. All right. Next, I want to create two text boxes to contain the content for the top portion. So we're going to create a new layer background called text box one. So the next thing I want to do is I want to add two text boxes to contain our information. So let's create a new layer called text box one. Okay, For the size, we are going to do 700 by 3 50 Then we're going to fill that in with white, go ahead and de select with Commander Control and D Let's go up to layer and crop the content. Just gonna move it up, select all and then a line to the center of the document again de select. And we're gonna create another text box this time called text Box, too. For this one, we're going to size 700 by 700 and we're going to fill it in with white again. Just gonna zoom in here so I can grab that layer and move it into position. We also need to crop the layer boundary, so let's not forget to do that. And I think I also want to lower the opacity down to 30 and this will allow some of that image below it to come through. All right, go ahead and grab some dummy text. Then grab your text tool and change your font family to Georgia. Let's drop it down to 16 for the size and a dark gray color. I'm just going to draw out a random text box. Any size is fine. Go ahead and paste in your dummy text and if needed, movie layer above the text box. Okay. I'm gonna go ahead and add another paragraph here to fill in the space a little bit more, and then I'm going to adjust my text box accordingly if that Texas being cut off. So I'm gonna go ahead and grab my alignment tool now with the letter a grab that text box background shift and click on the paragraph and then a line to the first item. All right, so that's looking pretty good. Let's go ahead and add our buttons. Now we're gonna go ahead and create a new layer called Button. Let's add rounded corners with the radius of 15 and then, for the signs were going to do 3 75 by 75. Grab your bucket, fill tool and then make sure you grab your dark green color and fill it in. Go ahead and de select and let's go up to layer crop to content and move it into position. And then we just need to align them button in the center of the document again. So select all. Grab your alignment tool click on it and a line to the selection. Okay, lets de select Commander Control and the letter D. Hey, we're gonna go back to our textile again, and this time we're going to change the font to railway Bold. Let's do 34 for the size and we're gonna do white for the color. And I bet you know what we need to do next. That's right. We need to align our content in the middle of our button, Okay? And let's go ahead and organize some of these layers. Now let's go ahead and take our button and duplicate it five times, - okay ? And let's use our alignment tool and select all the buttons are holding on your shift key and click on all of them and then a line left. Next, I want to distribute the amount of space evenly between all the buttons. So let's girl down to distribute and then for offset. Why? I want to change this to 100. Then click on this icon here to distribute vertical centers. Okay, I want to rename all these layers now button one through button six and then I'm going to put them all in their own layer group. Okay, let's go ahead and a line to the text box and then a new earlier group for this section. Okay, so the first section is pretty much done. I think we just need to take this title here in the line it from here to here. So make your selection and go ahead and align it So the final part of this section is going to be a called action, which is going to be a place where visitors can reserve a campsite. So we're gonna build kind of a filter like we did in the previous project, and we're going to start off with a content box first. And I want that box to be the full with of the page. So let's go ahead and create a new layer first. All right, let's go ahead and make our selection. And let's make that selection 525 pixels tall. Now. The only problem is my selection is going below the image. I want it contained within the image in this area here so I can just click and drag it up into position. Once we're done making, this section will go ahead and align it in the center of the bottom of this part in the bottom of our image. For now, let's go ahead and fill it in with White. Let's de select and lower the opacity down to 75%. All right, let's add the title for this section. Grab your textual with the letter T. We're gonna use arrow from the font 95 from the size again, and then are dark gray color. Let's go ahead and align it. So I'm gonna create another background for the filter itself. This time I want to make it the full with based on our grid system. So I have an extra guideline right here. I'm gonna go ahead and move that So my left side is here to here. So let's go ahead and draw out a selection all the way to the end, and then we're going to change the height. 2175. We're gonna use that dark green color again. We also need to create a new layer first gonna call it filter background, and then we can go ahead and fill it in de select. And I'm going to drop the opacity of this background layer to 10. I think that's a little too much. Let's try 20 and I'm gonna go with that. And now we can create our forms for that filter. Let's start off with the titles of each column that we're going to create. So we're gonna change our text back to Georgia. But I want to choose italics for the style. Size will be 14 and then dark gray again, and the first column will be arrival date. Then we're gonna have length of stay and then less column will be flexible again. We could do many more columns based on how that visitor can narrow down their selection. But we're just going to stick with three columns for now. All right, let's work on the Rose now. Just gonna call it Row One. And then for the size, it's gonna be similar to our buttons up here. Maybe a little smaller. Let's do 300 by 75 and fill it in with the dark green. Okay, let's duplicate that twice. All right, let's go ahead and crop the layer boundary for each layer. Let's align them all to the top, and then we're going to set offset. Why? Back to zero and all Set X 23 50. Then click on this icon to distribute horizontal centers. Let's go ahead and grab our titles, nail and put them into position. Okay, Back to the alignment tool so we can select all of these and align them to the top. Kate, let's organize our layers. All right, let's go ahead and a line are content to the filter background. Go to your filter background layer first and crop to content, and then use your alignment tool to select both to align. Okay, I just want to add some information in these rows so visitors know what information needs to be inputted in each row for the fun family. We're gonna go back to railway, gonna select Bold 24 and white. Now, as we did previously in the last project, we may want to create some hover states for some drop down boxes. So I'll leave that up to you if you want to add those when you do your own design for your portfolio, the last thing I want to do is add another link down here, and this particular link will be used if they're not familiar with the different options or the park itself and not familiar with the different campsites. If they click on this link, it will take them to another page that can provide them with additional information about the different types of campsites. So the last thing we have to do is organize our layers. - Congratulations . We're now done with our info section of our Web page design. So in the next lesson, we're going to work on the footer of this Web page. So if you're ready to get started on that, well, does it do it? 73. Footer: Hello and welcome back. All right, so we're gonna finish up our Web design project with our footer. Now it doesn't look too much different from the original footer, and they currently have a total of five columns with their social media icons down here and a separate row. And I thought it would be nice to have everything in columns versus spreading it out. We also have five columns up here. Plus this would make a six column, which is nice, because then we can put one column across to grid columns each and that will evenly spaced everything out. And then I just kind of changed up the colors a little bit to make it a little bit easier to read. So let's go ahead and start off by creating our background for the first section of the footer. Let's go ahead and create a new layer called Foot or one for the height. Let's set it to 4 25 I also need to move this up. Looks like I'm running out of room on my canvas, so we're gonna have to increase that will do that in just a second. Let's go ahead and choose our dark gray color. Go ahead and fill that in and then crop the content and move it down. Okay, let's go ahead and increase our canvas size. I'm just gonna add 800 pixels to the height, and then we'll readjust it once we're done. All right, let's create a new background called Footer to this time. We're going to size it smaller, So let's do 1 25 and then select your dark green color to fill it in with De Select and crop the content. Okay, now that we know the height of both the footers, we can go ahead and crop or canvas. I'm at 51 81 again. You may be different based on the images you selected, so go ahead, figure out the height of your canvas and then go ahead and crop it for the first title. We're going to set it to Railway Bold 24 and let's make it white. So go ahead. Just type out some dummy text for your title and let's go ahead and align it to the first column on the left side. I'm gonna go ahead and create my secondary title, and then for our next title. We're gonna use railway regular, and we're going to size it to 18. Then we have some more text to place below it. I'm gonna create a text box that goes across two columns and then just paste in some information to fill it in. Let's resize it to 14 and I also want to increase the spacing between each line to make it easier to read. So let's go down and increase the spacing. And I think 15 for that line spacing will work out just fine. All right, let's get out of there. And the other thing I want to do is that Want to create a line that is two columns wide, so I'm gonna go ahead and create a new earlier called line. Let's draw out a selection across two columns and let's go ahead and fill it in with white . I also want to make this line a little thinner. Let's go up to layer, crop the content, then grab your scale. Tool was Shift plus s and let's make the height, too. Go ahead and move this line down just a little bit. Let's go ahead and arrange some of our layers here Okay , now that we have all of that inputted and aligned, let's go ahead and duplicate this layer a few times so we can fill out the rest of the columns. All right, let's go ahead and find our grid layer here. Make sure it's turned on and let's go ahead and scale it so we can actually see it at the bottom of our campus here. So that's gonna make it easier for us to place our columns where they need to be, can. Let's work on the second part of our footer. We're gonna keep it Railway, but I'm gonna make it 14 for the size. Let's go ahead and add our logo down here. I'm gonna go ahead and grab it from the header section and duplicated and bring it all the way down. Now we need to grab it from up here as well. Kayla's organized are layers a little bit. The one thing I want to do is I want to take this logo and make it all white, so let's go ahead and create a new layer called overlay. Let's fill it in with white, and let's go ahead and put those two layers and a nuclear group called Logo Overlay. And then we need to change the blending mode for overlay and we're going to select Edition Perfect. So the only thing left to do is to add the social media icons, and I'm going to let you do that on your own. It's real simple. Just create your title and then add your social media icons like I did here. The other thing I would do is I would update the footer to represent different titles and different links. I don't think you want to sit here and watch me type all this information out. If you want to practice doing it on your own, you can go ahead and do that. And that's definitely something I would do before I give it to my client for review. I would also change. The links down here is well to be different versus having everything exactly the same. All right, so that's it for our footer. And as you know, we have to go through the entire webpage before we give to our clients to update it and make it better if possible, and to tweak anything else that we forgot to do. like spacing and alignments. So we're gonna go ahead and take a look at the overall what page in the next tutorial. And there's one other thing that we need to do that we haven't done yet. And that's adding our hover states to our info section for these buttons right here. We're gonna change the names of these and then create a little pop up window for the hover State. And what happens after you click on that particular link? So we're gonna cover that in the next tutorial, so if you're ready for that, let's do it. 74. Tweaks: hello and welcome to the final tweaks for Project number five. Overall, I think we did a pretty good job. There's not a whole lot to change or fix. I think we pretty much aligned everything properly centred everything properly. I like the funds that we used. The only thing we didn't do was and a hover state for this particular button here. And we didn't change the names of the titles for each one of these buttons. So these are two things that we definitely have to do before we send the design concept to our clients. So I'm gonna go ahead and update these buttons real quick. The other thing I want to mention is there's definitely more information on their overall website than these five buttons. So my recommendation would be to expand this section to include buttons for all the information. We're not gonna do that because it's just repetitive of things we've already done. You already know how to create a button and text center, it etcetera. But that's something that I would keep in mind before submitting a design for review or for approval is to make sure you have all the information included in your design. You don't want to skimp and leave anything out because the client may be confused and reject the design not necessarily based on your design, but because there's information missing. So just make sure you have all the information included. Let's go ahead and designed the hover state, which is going to be a pop up window when you click on one of the buttons. Actually, before we do that, let's go ahead and a lying are content within the buttons. Now, as you know, from previous lessons, we cannot select these individual text layers because they're buried inside of group layers , at least in the current version of Gamper, which is 2.10 point to Maybe hopefully, in a future update of gimp, they will allow us to select these layers with their alignment tool, even though they are nested in grouped layers, and the only option is to turn off the layers or the group layers above it. But even in this case, I still can't select my text, and then we can select that particular layer with our alignment tool, select all and a line to that selection. Then we have to grab that layer and move it all the way back inside of the group layers. Not very productive. So this is why you may want to update things like this at the time you are creating them and not during the tweaking process, because this is going to add a lot of time to production of your Web designs. I'm gonna go ahead and finish up the rest of these titles and align them with their buttons . All right, let's go ahead and grab our HOVER state icon from our header and duplicated and add it to the first button. All right, we're now ready to create our hover state pop up, which is the state after clicking on a button. So let's go ahead and create a new layer above button one called Hover Pop up. We're going to create a background that covers up all of our current buttons right now that's going to display all that information. So for the size, we're going to do 5 25 by 600. Just gonna move it over here to the left and kind of center it just a little bit and then I'm gonna go ahead and fill it in with white. I also want to add a stroke. So let's go To edit stroke selection, I'm going to switch my foreground color to the dark green, a line with of three and click stroke Que de select with Commander Control and the letter D . Let's go ahead and grab our text tools. We can put a title up here of hours of operation. I'm gonna change the color and size and then go ahead and grab some dummy text, click and create a text box and paste in some content. Definitely too big. So I'm gonna do 14 for the size. We're gonna change it to Georgia and are dark gray color again. I have to much content, So I'm gonna go ahead and make this content a little bit smaller. Let's make it a size 12 and that should work. Let's go ahead and just move it up a little bit. And now we need to create an option to close this window. I'm gonna go inside my text box real quick and resize the text box to a line to the bottom right here. All right, let's go ahead and pull these layers out of the button group and let's create a new layer group cold hover pop up. I think I'm gonna actually pull this one out of the buttons group since it is a hover state and not actually a button. Okay, let's take this hover, pop up and crop the content and then let's make a selection of the background and then select the hover pop up grouped layer again. It's not gonna let me select that's home and go ahead and pull this all the way out, and we're just going to select it so we can align it to the center of the document. Okay, let's put that back inside de select. And we're gonna go ahead and add a link down here that's going to allow our visitors to close this pop up window when they're done reading it. And then let's choose our nice blue color for the color. And I'm going to select underlying to add a underlying under it, and I'm going to set it to 16 for the size and railway. Bold is fine. Okay, I'm just gonna put this right here again. I'm gonna pull this out so I can align it to the center in and make a selection from the bottom of that text and make the selection around the rest of the bottom of that section so we can align it directly in the center of that selection. So when I hand this off to my client, I will have it turned off, and then I can show them what's gonna happen. Once they click on one of these buttons options for more information, they're going to see that the Hover State is going to pop up with a new window with the information based on the button that is clicked. And, of course, our Web developer is going to notice that as well. So the only thing we have to do is to fix your footer and organize any layers that need to be properly organized. And then and then you'll be all done with Project number five. So go ahead and finish up this Web design project and then, as always, go ahead and redesign this webpage with your own creative vision so you can editor portfolio and then you'll be ready to move on to project number six. Actually, this next project is my favorite design out of this entire course. It's my favorite. So I can't wait to share with you how we did. The next design has got a bit of a commerce feel to it with a retro kind of style to it. So it's a lot of fun, and we're gonna learn some new stuff in that design projects. So when you're ready, I'll see you in that project. Until then, thanks for listening and have an awesome day. 75. Project 6: Retro Briefing: Hello and welcome to our Web design Project Number six. I am so excited that you finally made it to this particular project. This is my favorite Web design. The project. In this course, let's go ahead and take a quick look hat their existing website. There's not a whole lot going on here other than a lot of bad design choices. Their logo is pixelated, and it's a very low quality logo, not the design itself. But the actual file that was used is of a low quality, and it doesn't look very professional. We have a dark background with dark text for the menu, which is not easy to read, so we're going to fix it so that the menu is much easier to read. And if you're wondering what this company does well, what they do is they sell old movie posters, and one of those posters is being featured here in the hero slash body section of their website. And then we have some contact information down here, so if you make it down to this part of their website, you will notice that they sell by appointment in person or at various art and antique shows , so you can contact them to find out where they're going to be to buy their posters. But my thought is, wouldn't it be better were easier or both to offer the posters for sale directly on their website. They already have a log in section for customers, but they're not selling directly online, so I'm not quite sure why they have a log in. They do have a guestbook, not sure what the benefit of that is. And then they have some information about their company and what they dio and then a contact page, which is basically this information here. So overall, this website and this client can easily grow their business by displaying their posters online and selling them directly online versus limiting themselves to in person sales. So let me show you the e commerce home page that I created for retro gallery bone. It has a retro design style. We've updated the logo. The menu is easier to read. The log in now has a purpose sense. Clients or customers can review their orders in their history via an account. There's a shopping Kurt to take them directly to their current to check out The Hero section features their most popular movie posters that customers can navigate up to five different movie posters in the hero section alone. We can always add more if needed, but I thought we would start off with five. We have a description of the movie poster. If they want to find out more, they can click on this Mawr link, and a pop up will show more information about that particular poster. And if they're ready to buy taken by right now, then if they want to explore more options, they can scroll down. And we have an e commerce type set up that customers can filter by price year genre quality . Teoh easily find the types of posters that they like to collect, And, of course, they can buy now or get more info first. Then, of course, we finish up the home page with a footer. So overall we are taking this Web design concept from their existing logo and what they're selling. And that's why I chose a retro design style for this particular company. And I love the design style that I created, so I'm gonna show you how to update this logo. But you may be thinking all right already know how to do that? I just need to pick out the font and redo it. If it was that simple, Yes, that's all you have to do. But what if the person that designed this logo didn't tell your client which font they used ? All they have is a flattened J peg file, and they have no idea the name of this font. You're gonna have to scroll through thousands of fonts to try and find this. Or are you Ah, him so excited to share with you how easy it is to figure out what font this is among thousands. And you can do it literally in a minute or two at the most. So I'm going to share that secret with you in the next lesson. Then we're going to create this retro slider. I'm gonna give you a tip and the resource that I use for backgrounds and textures. So we have a linen type texture for the background, and I can add this in one click and I'm gonna show you how I do that. And then, of course, we'll go ahead and create the e commerce section and I'll give you some tips on how I created some of the effects for these listings We've talked about drop shadows before, but we also have a drop shadow on the inside of the button this time instead of the outside . So I'll show you how I did that. And of course, I'll provide additional tips along the way. So if you're excited as I am about this project, let's do it. Let's get started with figuring out the font used in this logo. 76. Logo: before we can actually redo our logo for this client. We have to figure out which font was used for the logo. The problem is, the client doesn't know which font was used or the name of that font. All they have is a flattened J peg file. And, as you can see, this is very pixelated. Have actually included this logo as part of this lesson, so you can download it and use it yourself to figure out which funds. So let me show you how to do that. Go ahead and download it. Then we need to go to this website. My fonts dot com forward slash w t f, and what this website is going to do is it's going to take the file off that logo, and after you upload it via this browser, it's going to scan that file, and it's going to compare it to it's thousands and thousands. Actually, there's 130,000 fonts and counting. It's going to compare that file with all the fonts in its database to narrow down what font was used in that logo. It's so simple, it's mind blowing. How easy that says. So I'm gonna grab my file here, and I'm going to drag and drop it into this area. Then we need to click on this little blue button here to identify the selected Funt and Boom. There we go. There's the far right there, Plaza. There are other versions of that fund as well, This one here. There's other styles of that font, so you can pinpoint the font used for that logo without having to sift through 130,000 funds. How cool is that? Now you're looking at this, and you can see over here to the right. We have to buy these funds. Or do we? There's actually free versions of this funt that you can use in your Web design, and then you can decide if you want your client to use that free font. Or maybe they would be better off with a high quality version of the original font. And the price of the font is not that much. This is actually in Canadian dollars, so it's probably closer to like 25 to $30 U. S. So if we do a Google search for Plaza Free fund, our first option right here from fonts geek dot com You can download the regular size for free. So what's he had the local damn witted Go ahead and install it in gimp Restart camp to finalize the installation and then come back into gimp and we'll go ahead and recreate the logo so we can add it to our project. So let's go ahead and get started. We're gonna create a new document with command or control and the letter end. This is the size we want to 80 by 68 then we're going to select the foreground color, and we're going to choose this dark gray color. So go ahead and type debt number in and then click. OK, so we're gonna go ahead and create a couple of backgrounds before we enter text. So let's go ahead and create a new layer called retro background filled with transparency and then, with their rectangle selection tool, will create the size of those boxes, and the 1st 1 is going to be 1 35 by 58 and then just go ahead and move it up and into the document and then grab your white and fill it in with your bucket, fill tool and then de select. Let's go ahead and duplicate that background and call it gallery background. I also want to crop the layer bhandari for both layers and then for the gallery background . We're actually going to fill it in with Black, So hit the letter D and then grab your bucket fill tool with the letter G and go ahead and fill it in. We also want to add a guide that is halfway across the logo, so we're at to 80. So let's drag a guideline out at 1 40 and then we're going to move the gallery background over to the right. Great along that guide and then make sure your white background is aligned with that guideline as well. Okay, we can go ahead and hide the guide now, and let's go ahead and grab our text tool. We're going to choose the font that we downloaded and installed Plaza de Wreg and then for the size, we're going to do 60 and we're going to do black for retro. So go ahead and type out retro in all capitals and then just move it into position now because the layer boundary is on the outside of the retro text above and blow it. We either have to go in and adjust the size of that text box until it covers it all so that we can, then a line that directly in the text box I'm gonna go ahead and do that. Hold the shift key, click on the logo and then a line to the first item. Okay, we need to go back into the text box now and resize the text box accordingly. Let's go ahead and add gallery on the side, but let's change it toe white so I can go ahead and the line this content with the retro logo now with without using the alignment tool simply by adding a guideline here and making sure it aligns at the top. I can visually see that it's equal on both sides as well. So I'm gonna go ahead and leave the gallery text right there, and that's it. Our logo is now done. Let's go ahead and put this in a new layer group called Logo. We can now add this to our project, and I need to go ahead and open up my grid master template and I'm not really seeing it here right now. So what I can do is I can come down here to document history, and this is going to show me a lot more files that I've opened up in the past. And I can navigate through this to find that grid master template and then open it up directly from here versus trying to search for it on my hard drive. So I see it right here. Actually, that's my PST file. So here it is, grid dot Exe CF. So if I double click on that, it will open up that template. And now I can grab my logo from here and and it to the documents. I'm just gonna drag it right there and just move it up to the top. All right? Now that we're done with our logo, we're gonna go ahead and work on the header section in the next tutorial. So if you're ready to do that, let's do it 77. Header: Hello and welcome back. All right, we're gonna go ahead and work on our header section. Now we're gonna add our primary navigation as well as a secondary navigation. So I'm gonna give you some new tips along the way, as well as creating a new keyboard shortcut for a specific feature that we've been using in every project. And we've been using it over and over and over again. So we're gonna go ahead and create a new keyboard shortcut for that. But first, let's go ahead and create our header background. So create a new layer with the name header background. Let's go ahead and make our selection. We want it to be full with. And then for the height, we're going to do 1 50 Go ahead and grab, are dark gray color and fill it in. Okay, let's go ahead in de select before we move this into position. Let's go ahead and create a keyboard shortcut for that tour that feature that we've been using over and over again. And that is the layer to crop to content feature. So we've been using this on every project nonstop. So if we go up to edit and select keyboard shortcuts. We can assign a keyboard shortcut for that specific feature. So in search, we're gonna do crop to content. So of these to the one we want to assign the keyboard shortcut to is the layers option. So we need to click right here to be able to assign a keystroke to that specific tool or feature. So originally I thought maybe the letter C, but that's being used for the crop tool. So instead, what we can do is we can use the shift key in conjunction with the letter C. So holding on your shift key and then press the letter C. And now that is the keyboard shortcut for that particular tool. Make sure you have saved keyboard shortcuts on exit and hit close. Now we can simply use Shift plus C to crop the layer boundary to the content. All right, let's go ahead and move that up into position. Go ahead and turn my grids off for now, and let's go ahead and add our primary navigation. Now, as far as the fund goes, let's try the Plaza de Wreg that we used for the logo. But let's size it 24 and we're going to use White for the color. So let's type out home and then fight spaces shop and let's take a look at this. So right now it's kind of hard to read, so maybe we need to increase the size of the font. So let's go ahead and try 30 and see if that helps any now, although that does help a little bit, it's still kind of hard to read, and the text is kind of competing with our logo, since we're already using that particular fund in the logo. So I do want to use a retro type font for the navigation, and in this case, I don't think using the logo fund family works for the navigation or for even the titles of the Web page. Now, in the previous project, we did use a font similar to their branding, but it didn't compete with it as much since the logo was off to the left and much smaller than the actual titles. But in this case, they're too close together, and even with a large size, it's still difficult to read. So we want to make sure that we make the navigation and titles easy to read as well as the body text. So we're gonna go in and change this to Oswald and let's go ahead and change it down to 24 because I think 30 is too big. So that's it much easier to read versus what we had previously. Now let's go ahead and add our other navigation menu items over here on the right. But before we do that, let's just go down here and type in Oswald so that it defaults to this font as we add more text. So let's go ahead and type out about five spaces and in contact. So now the question is, how do we align all of this information? Do we want to align it to the grid columns, or do we need to do something else? So let's go ahead and a line to the third column and the third from last column over here. And let's take a look at what happens when we do that. I'm gonna go ahead and put that one there, and then this one needs to go over to the right this a little bit. I'm going to select both with my alignment tool so I can align them to the bottom. Now I need to select all. Grab my alignment toe again so I can online my logo to the center of that selection. All right, let's go back to our Lima tool and click on one of the navigation items. Shift. Click your logo so you can align it to the bottom of the menu items. All right, now that we have everything properly aligned, I'm not sure if you can notice, but the layout is unbalanced right now. If we zoom in here and take a closer look, I can see that there is more space on this side vs the side. Even though we aligned everything to the center and across the proper columns. There's still extra space here, and if we take our measure tool here and measure out, I have 125 pixels there and then on this side I have 97 so there's 28 more pixels of space on the site. So how do we fix that? Well, the problem is our navigation menu items have a different amount of characters in them and different characters in general that are of different sizes, so that's creating the imbalance. So the question is, do we move the primary navigation over here on the right, further to the right toe, add more space in it, or remove this one or to the right? If we do that, then everything is not going to be properly centred in the browser itself. So it's gonna be unbalanced again. And I think that's going to be much more noticeable than the current spacing dilemma we have right now. So this is what I would do. I would take our logo and center it directly between the two sides of our primary navigation, and that's going to balance it out. But when you zoom out overall, you're going to kind of see that the logo is not centered in the browser, but because the spacing is so much further apart over here on the left and the right, it's not going to be as noticeable as it is now, so it's the lesser evil of the three options. So I'm gonna go ahead and make a selection between my navigation and then what? The alignment tool. I can select it and align it to the center of our selection, so that makes it much more balanced right here. And even though it's not balanced in the browser, it's not as noticeable as it was before. At least that's my opinion. So these air things you're going to have to decide on based on what you see and your creative vision. The other solution is to put all of our primary navigation on one line and then with below , over to the left or right so you have that option as well. All right, let's go ahead and create our secondary navigation. We're gonna tapout log in. Let's do three spaces to forward slashes three spaces. I'm actually gonna change that to five spaces on both sides here and then hit your escape key. And let's move this up now because this is our second dairy navigation. It shouldn't be as large as our primary navigation, so we need to go back in and make this smaller. In this case, I'm going to do 14 for the size if we zoom out and take a look at it, the problem is, it's difficult to read, So this typeface Oswald is not a good font to use at smaller sizes it's much easier to read at a larger size. So what we're gonna do is we're gonna go inside, double click on log in, and then down here, we can change it to railway, and now you can see that's much easier to read than it was before. Now we need and a shopping Kurt to the end of that. And I'm just gonna grab one of the ones that we used any previous project, which is the first project. And I'm gonna go ahead and grab that shopping Kurt and bring it over so you can do the same . Or you could just find a new one through Google images. Now, real quick. Before we put this up here and align it. I have another quick tip for you right now. I have my move tool selected, and I have pick it earlier or guide selected. Sometimes when the contents of that layer Israel small or maybe there's a gap in between different elements. Sometimes it's hard to pick the contents of that layer and move it, and instead you'll end up moving something else, because when you pick a layer or guide, it's going to pick the layer that you click on. So, for example, if we come up here and I tried and select this part of our navigation and I click in the middle, it's Ashley selecting the background layer and moving that instead. So if I come down here and try and click on this, I'm going to move the background. So sometimes it's hard to use this move tool with this option to make a selection in some cases. But here's how you can get around that. If I take this background layer and come up here and click on this lock option, it's going toe lock the layer in position so I can't move it anymore. So I could do the same thing with my header background as well, and like that into position. And then I can't select it. But I can select something else that I do click on now. Another thing you can do is you can still take your background layer here and and a color to it, even though it's lot. But if you want to protect your layer even more, you can select this option here, which will lock the pixels of that layer. So now I can add any color to that layer. And it even says down here this active layers pixels are locked. So when I try and move it, you're gonna get another message. The active layers position is locked, so that's a great way to make sure you don't accidentally move a specific layer or layers or accidentally add additional pixels to them. Because as you're working with a lot of layers like we have in previous projects, sometimes you try and move something, and maybe you have the wrong option selected and you end up moving a layer that you don't want to move, and you don't really find out about it until you get to the final stage, where you're tweaking the final design and then you have to go back and fix it. So I just wanted to share this with you so you know how to protect your layers and minimize the extra work you may have to do at the end of your project. All right, let's go ahead and go back to our shopping Kurt icon and move it up into position. Let's go ahead and a line this with our guides and her column so everything is perfect. I also need to grab my secondary navigation here and make sure that it's properly spaced between the forward slashes and the beginning of her icon. Since it's not, I need to go ahead and move it over. And that's why we added the five spaces at the end so that we can see that the layer boundary is over here and not here. All right, let's go ahead and start organizing our layers. We also need to take our shopping cart here and change it toe white, so you may remember how to do this. What we're going to do is create a new overlay background. We're then going to fill it with white click. OK, let's create a new layer group called Overlay and then grab that overly background and change the blending mode to addition. Okay, we now have our white shopping cart. Let's take a look at our header so far. Looks like we have one thing left to do, and that is to separate our secondary and primary navigation a little bit more because it's kind of competing with each other still, and it's a little bit unbalanced because we have more content over here on the right, so this side of the design is heavier. It's kind of leaning to the right because there's more elements or more content over here. So one way to fix that is to create another background for the secondary navigation to help contain that content within it, and that should help balance it out a little bit more. So let's create a new layer called secondary background and change it back to transparency . Click OK, and let's go ahead and fill it in with that same dark color. Let's go ahead and make the height of it 40 and we're going to use that dark gray color. All right. Now we get to use our new keyboard shortcuts, so shift plus C go ahead and move that up. We need to move this below that group layer. Let's go ahead and zoom in here so we can align our secondary navigation between the top and the bottom. Here, grab your alignment tool and go ahead and click on the secondary navigation. The only problem is because we created that new overlay. We need to crop the content back down to allying with the content itself. So grab your secondary navigation grouped layer. Use your new keyboard shortcut shift plus C. Now we can select it, and the line middle of target can go ahead and de select. Now what we need to do is and a drop shadow to help create that separation. The only problem was, we got a little bit of ahead of ourselves by cropping the content down to that content. So I was really excited about using the new keyboard shortcut. So let's go ahead and undo that with layer layer two image size. Let's go up to our filters are drop shadow and add a drop shadow. So that's a little bit too big for me. I'm gonna go ahead and drop the X and Y access down, and that's looking pretty good right about there. It's kind of zoom over here and see how it's affecting the rest of the design, so it's all looking pretty good. So I'm gonna leave everything else at the default and click OK now, if you want to, you can go ahead and use your keyboard shortcut to crop the content. But as you know, it's cropping the bottom to the edge or the bottom of that drop shadow, so that definitely helped balance it out a little bit. It's still a little off balance. It's still a little heavy here, but not as much as it was before. And there's definitely separation now between the secondary and primary navigation. The only thing I'm not really liking is the spacing of the logo because we have more space down here than up here. So let's go ahead and the line the logo to the center of the top and the bottom here. All right, so that looks a lot better now, and I think we are all done. All we have to do is organize our layers here and put them in a new layer group called Header. Congratulations. We're now done with the header part of this design project. In the next project, we are going to start working on the slider of the hero section, and this is going to take a lot of time to do so. We're probably going to break this up in two, maybe three different tutorials. So if you're ready to get started on that, let's do it 78. Hero Part 1: Hello and welcome back. All right, so we're gonna go ahead and start working on the hero section, which includes our slider of different products. But before we actually start on slider, I first want to talk about the background because I do have a textured background on the back, and I want to show you how to and these different types of textures or patterns within gimp by installing pre made patterns in the gimp that you can then use with your bucket fill tool. You could even use it with your brush tools, your path, tool and more. So I'm gonna show you the resource that I'd like to use to get these types of patterns for free. So let's go ahead and check that out. And here's the site here. Top tail dot com forward slash designers forward slash subtle patterns. Now I did a search for linen, which narrowed down the number of patterns for that type of texture or that pattern, and in total. Right now, the site has 491 patterns, and they keep adding more and more patterns on a regular basis. Just a few months ago, there was only about 470 patterns. So it's a great resource to find free patterns that you can use for your Web design projects, especially for background type patterns, because they're going to provide a file for you that is going to be fairly small in size, roughly 50 pixels by 50 pixels or 100 pixels by 100 pixels. But the way that that pattern is designed or that file was designed, it becomes seamless when you enlarge it from 100 pixels to 1400 pixels, and it's done automatically for you based on the way that file is created. So let's go ahead and download one of these patterns. I'll show you how to install it and gim, and then we'll start working on the color of that particular pattern because, as you can see, they're mostly dark gray, black and white and don't really have any color to it. But I'm gonna show you how to add color into that pattern. So let's go ahead and download low contrast linen. So either do a search for this here or just Lenin or just linen and general. Go ahead and download it, and then we have to unzip the file. So inside of here you're gonna find three files, read me text and then two files for that pattern. So this file here to X the actual pattern is twice as large. That's not the one we want. The one we want is this one here. So I'm gonna go ahead and drag this into my document to see what size it is. And it looks like it's around 250 by 250 pixels tall. And right now, it's not going to be easy to make this full with and fill up the entire hero section with this one file. And that's why we want to go into our patterns and apply it that way. So if you go to your bucket filled tool, you'll see different options down here to fill with the foreground, the background and then a pattern fill. So I already have this one installed. So let me show you how to install this so that you can then apply it with your bucket fill tool. So we have a specific folder that we need to put our patterns into, and this is the directory you need to follow in order to install the pattern into gimp. So you want to go to your local disk users? Your user name? AP data roaming gimp 2.10 and then patterns. So you're gonna take this file that you downloaded, you're going to right, click and copy and then go to this patterns holder and paste it in. So that's how you install it for PC users. Now, if you're on a Mac, you're going to go to users. User name, library applications, support gimp 2.10 and then patterns. And then you can paste that file directly into this folder. And then once you have that in the correct folder, you need to go back to gimp and go to your pattern panel, which can be accessed by Windows Doc Kable dialogues and then selecting patterns. You're going to get a window like this, and then you want to click on this refresh patterns button, which will update any patterns that you added to that folder, and then you just need to locate that particular pattern through here just to make sure that you have it in the correct folder. So mine is showing up right here, and I can see the name of that file right here. So it's been successfully installed. Okay, so now that you have that done, all you have to do is create a new layer. I'm gonna call it hero background, fill it with transparency, then grab your bucket. Fill tool. Go to your tool options. Select pattern Phil. Click on this icon. Locate the pattern, select it and then you can fill that background with that pattern. So that's the first step in getting your pattern into your design project. Now we need to colorize that pattern so it's not those plain boring gray color, and it's more of this orange color here, and we're going to do that with a series of different overlays. So let's go ahead and create a new layer called overlay one. We're going to fill in with this bright orange color type in this HTML number right here, and then go ahead and fill it in with that foreground color. You want to go back to your tool options and make sure you have foreground color fill selected. Now we need to change the blending mode of this layer too soft, light and We also want to change the opacity of the background layer so we can make it much lighter. I don't want it that dark. So in this case, I'm going to do 90 and I'm gonna create another overlay called overlay to I'm going to fill it in with the same color. And this is going to allow me to make this color much brighter orange than it is right now . So we're going to do the same blending mode, a soft light, and this time we're going to drop the opacity down to 30. So just by adding the second overlay, we can make that color much brighter than it was with a single overlay. So when you're blending in your colors with your patterns, you can experiment and try out different capacity settings as well as different blending modes to come up with different color schemes and different effects by choosing different blending modes and different capacities. So that's something you're going to have to experiment with on your own, to see how you can come up with different types of colors and intensities of those colors. But this is the color scheme we're going to use for our hero background for now. So once you have this done, we'll go ahead and get started on creating the slider in the next tutorial. If you're ready for that, let's do it. 79. Hero Part 2: Hello and welcome back. All right, so this is the moment you've been waiting for your entire life. Well, maybe not that long, but we're now finally going to start working on creating our retro slider. So let's go ahead and get started. We're gonna probably break this up into two parts because it's going to take quite a while to create all the different elements that we need for the slider. So let's go ahead and start off by creating our background for the slider. So let's create a new earlier S e. I'm gonna take these layers and group them together to get them out of the way. Let's call it hero background. Now you may have noticed once we put these three layers, any group layer, the color and the capacity of the overall background has changed. And that's because the blending modes aren't necessarily working as they did before, because we don't have this background layer in there as well. So once we put that in there, we then get the result that we want. But we don't necessarily want to put the background layer in this group the layer because there's going to be other sections below this, and they are going to be hidden. So let's undo that with Commander Control and the letter Z. So the solution to that is grabbing your hero background group delayer going up to blending mode and then select passed through. So that's going to pass all the elements inside of this group. Layer through it so that the background layer will be applied the way we want it with the other layers. Let's also define the height of our hero section by dragging out a guideline to 700 and we also need to contain our background here to that height as well. So let's grab our rectangle select tool and create a selection in that area. And then we're going to add a layer mask to the hero background grouped layer. Make sure you have selection selected in click Add Que de Select with Commander Control Andy and turn off your guides. Okay, now we can go ahead and get started on the slider, so the first thing I want to do is create a new background called slighter background. And let's make the size of that background eight columns wide. So actually, let's just go ahead and type in the dimensions, which is 775 by 4 75 It's gonna move this up here, so it's in side of the hero section, and then we're going to grab a light cream color here. This is the hex, a decimal number that I selected. So go ahead, type that in and then go ahead and fill it in. All right, now we need to crop the layer boundary so we can do that with Shift Plus C. Let's make a selection around our hero section and let's elect our background layer with our lame it tool, and then we can align to the center and middle of target. Next, I want to create a image placeholder that's going to act as our guide for sizing our product images so we can create a new layer called Image placeholder. And then, for this one we are going to size it 7 20 by 3 60 and let's go ahead and fill it in with black, and let's not forget to crop the content as well. Shift plus C. So let's go ahead and measure out a specific amount of spacing for the top, and then we'll align it to the center. So I'm going to do 20 pixels for the spacing at the top. And then what? Their alignment tool. Let's go ahead and select our background, then shift click on the image placeholder, change it to first item and then a line center of target. We're gonna add in our image in this in a minute. I just want to add some other elements first. Okay, we're now going to create our buy button. Let's grab our ellipse tool, make a selection. Let's size it 1 25 by 1 25 Let's also create a new layer for it, and then we're going to fill it in with a dark gray color. So I'm gonna use this color here. Go ahead and fill it in now, before we de select. What I want to do is I want to add a stroke around it, which is going to be the same color as their background, and that's going to give us an effect where it's going to look like it's cutting out part of the image. So we're gonna go up to edit select stroke selection. Let's try four, and we also need to make sure we have that color selected. So use your eyedropper tool to click on the background to get that color and then go ahead and click Stroke de Select with Commander Control and the letter D. So there is our by bun that looks pretty cool. And like I said, it does look like it's cutting out that part of the image, So that's pretty cool. All right, let's go ahead and hit Shift plus C to crop the Lear boundary. Let's add some text over here on the left side, and this will represent the condition of the poster. So I'm going to use a large font, and we're going to use Oswald bold and let's set it to 60 for the size and then are dark gray color. So in all caps, I'm going to do meant, and then we can just go ahead and move this up, and I want to make sure it's aligned to the left side of our image Placeholder. So the layer boundary is a line to it, but I want the actual letter to be aligned to it, so I'm gonna place it right there. I'm also going to align it top the bottom as well. Now again, we do have more space appear in the layer boundary versus down here. But if we hit shift plus C, that will crop the layer boundary to the text. So this is a more efficient and faster way, versus the way I've taught you previously. Although it works, it's less efficient. So always try and use the crop to content to crop the layer boundary to the pixels of that layer. So now we can use our rectangle selection tool, make our selection and then select mint with your Lima tool. We need to go back to selection and a line middle of targets. Okay, lets de select and let's go ahead and zoom out again. I'm gonna go ahead and save this with Commander Control and the letter s. Let's go ahead and turn our grids on because what I want to do is I want to create a paragraph right here that is going to be the description of this particular product. So I want to make it a specific size four columns wide by 56 pixels tall. So we're going to create a new shape to define the size of that text box. I'm gonna call a description box, and then we're going to type in 56. For the height, I'm gonna go ahead and fill it in with Dark Grey. Doesn't really matter, because we will be deleting this later on. So go ahead and de Select Commander Control and the letter D. And let's go ahead and a line this top the bottom of our slider. So right here. And make sure you crop the layer boundary as well with shift plus C, and then you can select that layer and align it middle of target. Okay, Commander Control nd to de select. We're gonna add in the information or the description in just a second, and we'll do that after we get our image. I just first want to work on a couple other elements first. So let's add our text for our buy now, button. So for this one, I'm going to use a font called copper plate, and it is a retro type of fought, and you can download this for free just by doing a Google search for copper plate fonts, free fonts. And if you don't have this already installed you can go ahead and find that, download it, install it, restart camp and then come back and we'll go ahead and add in our by now text for the size I'm going to do 30 and the color weight. So the first letter is a capital and then lower case for the next two. Same with now. Even though it looks like they're all capitals, there's still a little bit smaller versus the first letters that are defined as a capital letter. Okay, I'm gonna go ahead and make this bold, so I'm gonna select all of them and click on Bold right here. Let's also go ahead and a line this to the center, and I think I want to increase the amount of line spacing. So I'm going to try 0.5. Click the techie. That's not enough. So 1.5 2.5 Let's try four. And I think that's good right there. So four for the line spacing. Let's go ahead and place this directly in the center of our button, so I'm gonna move this stance so it's above the buy now button and then select your circle with the alignment tool and then the text and a line toe. First item. Let's go ahead and create a new earlier group for our buy. Now, button. All right, let's go ahead and create our navigation buttons on either side of her slighter. Okay, I'm gonna go ahead and scroll down here and select the hero background grouped layer because I want these layers to be behind our slider. So I'm gonna call this left navigation, and then we're going to use our ellipse tool to create a button that is 65 by 65. We're also going to fill it in with a cream color, but I want it to be darker than the slider is right now. So it stands out a little bit more So for the color. I'm going to do the following f six e d. Nine. Go ahead and take that in, and then go ahead and fill that color in, and then we can de select, so it's very similar. But if we zoom in here, you can see it's a little bit darker. We're also gonna add a drop shadow in the second toe, help it stand out just a little bit more So let's go ahead and place this so that half of the circle is hidden behind the slider. So the easiest way to figure that out is to turn on our guides and do a measurement of half of that circle. So we did 65 so 32 pixels should be roughly half. So it looks like I want a little bit too far. I'm gonna put this guide right here. I'm also going to crop the layer boundary with Shift plus C and then we're just gonna move it over to that area that we just measured. Okay, lets Haider guides. And now we need to create an arrow pointing to the left. So to do that, we are going to use our rectangle selectable. Let's create a rectangle that is 19 by 19. I'm going to select that orange color that we used previously for the background. Let's create a new layer called left Errol and then go ahead and fill it in. Go ahead and de Select Commander Control and D and let's crop. The later boundary was shipped plus C. I can't see the color right now, and that's because the layer is behind the slider. So I need to go ahead and move this over here anyway, So I'm just gonna grab this with my move and active layer selected, and now we can see the orange. All right, let's go ahead and duplicate this layer. Let's go ahead and zoom in really close. All right, Now we're going to take a measurement again because I want to move this current layer down into the right three pixels. So let's take our measurement tool and measure out three pixels. Let's add a guide right here and then down three pixels and another guide. And now with our move tool, we want to move it right into that area. Let's go ahead and create a new layer group. Let's call it left Arrow. We're gonna place both of these inside. I'm gonna call this one left arrow, cut out, and then we need to change the blending mode to cut out that square. So let's go to blending mode and select color or race. Okay, Now we can take this left arrow and rotate it 45 degrees, so it points to the left. So let's grab our rotate tool, which is right here and my keyboard shortcut for that is Commander Control and the letter T and then for the angle we need to type in 45. Unfortunately, that's going to make it point up. So let's try minus 45 Click Tab. And there we go, our arrows now pointing in the right direction. Go ahead and click, Rotate and then I'm just going to manually move this into position so I can get it right about in the center. Let's see if we can use our alignment tools to get that to align top to bottom. I'm gonna grab my enlightment tool and I'm going to click on the button shift, click on the arrow and then a lying toe first item, which would be middle of target. So that aligns it. I'm gonna go ahead and grab my move tool now And I'm just gonna move over to the left A couple clicks and I think that looks good right there. Go ahead and zoom out so I can take a quick look at what we have so far. So that's looking pretty good. I may want to make that arrow a little bit larger. So what I can do is, I can zoom back in. And now with your move tool. Just click on that layer and use your right arrow key to move it over one pixel at a time until you're happy with the thickness of that arrow. So I'm gonna go to pixels more to the right. Let's go ahead and zoom out and take a look at it, and I think that looks much better. So I'm gonna go ahead and leave mine like that. You can do whatever you think looks best. Now we need to take this navigation and put it in a new layer group called Left Errol. Let's duplicate it and rename it. And that's right. We're going to rename it right arrow. Let's go ahead and and a guide to the top of this button here so that we can align it over here on the right side as well. Okay, I'm just gonna grab mine. Move, Tool, Make sure you have active layers selected, and I'm going to move it over here to the right side. Okay. All right. Let's go ahead and measure out 36 pixels to make sure that we have enough of the button showing doesn't look like I do. I'm gonna go ahead and place a guide right there and then just move it into position. The only problem is we can't see the arrow. So to fix that, we just need to flip the layer horizontally. So go up to layer, select, transform and then choose flip horizontally. Her hate. Now that our navigation is done, let's go ahead and put those two buttons and a new layer group called Slider Navigation. Let's go ahead and save it again, Commander Control and the letter s So we have the majority of the elements for our slider. We just have some graphic elements to add here. A paragraph, our image and then it will be done. So let's go ahead and finish up the rest of the slider in the next tutorial. 80. Hero Part 3: Hello and welcome back. All right, we're gonna go ahead and finish up our slider and let's go ahead and add our product image . We're going to do a Google image search for the last A sounding she monster, and we're going to select this one right here. It's 7 40 by 5 60 Let's go ahead and copy that image and paste it in. Make sure you take this layer and put it to new earlier and then scroll up to the top with that layer. So it's above everything else, and then we're just gonna use our move tool to put it into position, but also drop the opacity down so that we can see the image placeholder behind it, which will allow us to crop the image or composed the image exactly the way we want. I'm just gonna move this down and to the right a little bit, maybe down a little bit more right there and then let's go back to 100% on the opacity and then I'm going to grab my image Placeholder. Let's go ahead and put that under the image layer and I'm gonna show you a little different way of cropping your image to a specific size. So since we already created an image placeholder with the exact size we want, we now need to make a selection with it. So we can right click on this layer and select Alfa to selection, and that's going to automatically apply a selection around that shape. Now we can go to our image layer and add a layer mask based on selection, and it will crop the image that way. So that's just another way of doing it versus how we've done it in the past. I'm gonna go ahead and create a new layer group for these two layers called Image, and let's go ahead and move it down so it's below are by button here. All right, let's get our description for our text box. Let's go back to Google images and click on visit, so we're just going to see if there is a description here that we can use based on this particular poster. Now we could just use anything or use dummy tax, but I just want to go in here and see if I can find a description of this poster so this will work I'm just gonna grab this text here in this first paragraph. Copy it. Let's go into our document here, and I'm gonna zoom in, grab your text tool, and let's also turn on our grids just to guide us a little bit. Okay, let's go ahead and create our text box Nail. But first, with our textile selected, make sure you type in the font family, which is railway. The size is 14 and then the color is are dark gray. We can now go ahead and create our text box and make it the size of that shape and then go ahead and paste in that information that you copied previously. Okay, let's go ahead and turn off our text box here so we can actually see our text. And I think I need to align this to the left. So I'm gonna go ahead and select all align it. And I think we have our line spacing still turned on. I do. I have four and I think that's too much. I'm actually going to bring this down to one and then hit your escape key to get out of it . And now we have our paragraph or our description. Let's go in here and modify or paragraph a little bit. I'm gonna go ahead and add three dots because what I want to do is create aim or link right here. So in all capitals, I'm just gonna type mawr, and then we can double click on that word, and we can actually go in and change the color of just that word. I'm gonna choose this orange color, and I also want to add a underlying to it to represent a link. I also want to add some graphics here just to kind of give it a more retro type feel by adding three lines. So let's go ahead and start organizing some of these layers here, and I'm gonna go ahead and take my description box and delete it because I don't need any more. And then I'm gonna create a new group layer for my content. Okay. I think everything else is pretty good. Will put them all into a new group layer called Hero at the end. So let's go ahead and add our graphic elements here. Now I'm gonna create a new layer cold line and then, for the size we're going to do to for the with and 50 for the height. Let's grab our blue color and let's go ahead and fill it in que de select. Let's go ahead and move this one over just a little bit and crop the content with shift plus c. Okay, we're gonna create two more lines, but a little bit smaller on either side. So the next to are going to be the same with so too. And then the height is going to be 35. So go ahead and create two more lines. Actually, we could just duplicate this one, and then we just need to align everything. I'm just gonna move this one over a little bit, and I'm gonna go ahead and drag out a guideline so I can align these to the top. Let's make a selection re here, and I want to select the middle layer with my alignment tool so I can align it to the center of that selection. I also need to do the same thing for our middle line here. It looks like it's off by one pixel. So I'm just gonna move it up with my left arrow key and then I'm going to right click on the top layer here and merge down to combine all of these and 21 layer. I don't need them individually anymore. Let's go ahead and turn everything else back on again, and then we just need to align it within this space here. So let's go ahead and make our selection. So I want to center it directly in the center, but I may need to turn off these other layers again. Let's grab our limit tool. Click on the graphic with your alignment tool. Make sure you have selection selected and then align center and middle of target. Go ahead and diesel I and then let's go ahead and turn the other layers back on. Let's go ahead and zoom out. So the last thing I want to do is and a little depth to the overall slider, and we're going to do that by adding a drop shadow. I want to add a drop shadow for the navigation buttons separately from the background slider itself, because I do want to drop shadow going over those buttons as well. Let's go ahead and start with our navigation buttons, and if we select those and go up to filters, light and shadows. We can add a drop shadow to it. And the reason why is because we can add a drop shadow to grouped layers. So we need to go inside and find the actual buttons themselves and then apply a drop shadow to them. And, of course, we need to change the layer boundary to fit to the image size so we can add that drop shadow. Now I can go up to filters, light and shadow, drop shadow and create my drop shadow. So let's go ahead and play around with some settings here until we find a drop shadow that we're happy with. I'm kind of liking that right there. So I'm gonna go ahead and click, OK, and then let's grab this button here. Same thing layer layer two image size and then command or control plus F to re apply that drop shadow again. All right, now we just need to go ahead and find the background layer of our slider and apply the drop shadow to it as well. But first we need to go up to layer and selected layer to image size and then command or control and f to apply the drop shadow. All right, let's go ahead and put everything in a new layer group cold. That's right, hero. So we have our background color changing again because we put that group layer inside of a new group player. So we're just going to select our hero group Layer and Select passed through for the blending mode, and that will fix the background for us and congratulations. We now have our retro slider completed. Now we need to work on the e commerce section of our website, and we'll go ahead and get started on that in the next tutorial. 81. Body Part 1: Hello and welcome back. All right, we are now going to work on our e commerce section for this webpage, and we're going to create our background and some of our filter buttons, and then we'll finish it up in the next tutorial. So let's go ahead and work on our background first. But actually, we need to increase the campus size. Let's go up to image campus eyes and increase it to 3000. Let's also grab our background layer here and go to layer and select layer to image size. Now, right now, I can't select it. And that's because my background layer is a lot. So if yours is locked as well, go ahead and unlock it and then increase the boundary size. Grab your white color to fill in the rest of the background. All right, now we need to go in and add our pattern as well as our new colors. So I'm gonna go ahead and just go into our hero background group layer and select this layer to duplicate it. And then let's go ahead and pull this out camera. Go ahead and move mine down here, so the first thing we need to do is delete this layer mask, and we can do that by right clicking and selecting Delete layer mask. Okay, you can go ahead and move this into position now, and we also need to increase the layer boundary size for each layer. So let's do that for each of the overlays and for the pattern as well. So layer layered image size. Let's grab our bucket Fill tool. Let's select our pattern and go ahead and fill it in. And now we need to select the color overlays so we can add a new color to each layer, and we're going to use this blue color here. So go ahead and grab that and then go ahead and fill that in with the new color. Now that our background is done, we can go ahead and work on our filter buttons. Let's start off with our text tool. Let's set the font to Oswald and 24 then white for the color. Okay, lets type out filter by now, we're gonna go ahead and create four new buttons. The 1st 1 is going to be button one, and then for the size we're going to do 95 by 45. But let's first add a rounded corner of 10 and then the size again is 95 by 45. And then we're going to fill that in with our dark gray color. Go ahead and de select and let's go ahead and duplicate three times. Now let's go ahead and crop are content with shift plus C for each layer. Let's go ahead and a lion and distribute the layers. So alignment tool. Let's turn off our heroes section here and then shift. Click on the other buttons. Let's align to the first item to the top, and then we need to distribute the space between them. So right now I have 3 50 which is too much. I'm gonna try 1 50 I want to do less than that. Let's try 100. Not enough do 1 40 and 1 25 Looks like the best option. Now we just need to add some titles for our buttons. So back to the text tool, same font, same size, just need to change it back toe. White case of the last thing we need to do is align everything to the buttons and then we just need to organize our layers. So for the content, I'm going to crop the content with shift plus C for each layer. Now you may have noticed that when you do that, it changes the text from a text layer to a pixel layer. So if I want to go in there and change the spelling or the font or the size and I click on it, I then need to confirm that I want to switch it back to text editing, and I can either do it on a new layer or directly on that layer. So it's still a good idea to crop your content for your text in this manner, because you can always go back to that text layer to updated if needed. Just makes it easier to crop the content this way so you can easily align it as needed. So back to the alignment tool and aligned to the first item. We also need to take a measurement of the amount of space between here and hair so we can add it down here as well . So go ahead and measure. I have 40 pixels. Now that our buttons air done, we just need to add our products for this part of our page design, and we'll go ahead and download those images in the next lesson and get them set up so it looks more like this. 82. Body Part 2: Hello and welcome back. All right, we're gonna go ahead and finish up the e commerce section and we need eight images to fill out this section. So go ahead and do a Google image search for old movie posters. Vertical is preferred. Add them to your document, and then you can go ahead and resize them in a minute. Once we add the image placeholder, and then you'll know what size to scale them down, too. So let's go ahead and work on our 1st 1 and we're going to start off by creating a background for the product listing. So let's create a new layer called Product one. And then for the size we're going to do to 76 by 450 and then let's fill it in with our light cream color. Go ahead and click, OK and fill it in. Okay, lets de select and let's also turn on our grid for the moment. And if we move this over, you're gonna notice that it's exactly three columns wide, which will allow us toe add four different products. All right, let's go ahead and crop the content shift, plus C. Now we're gonna go ahead and create an image placeholder just like we did for the slider previously. And then for the size, we're going to do 2 30 by 3 20 and we're going to fill that it in with Black. So I hit D and then grab your bucket fill tool with G Phil Iden and de Select Que Shift plus C to crop the content and then move it into position. It's gonna move mine up a little bit, and I'm gonna take a measurement here. So I'm at 18 pixels, so go ahead and move yours. So you have a space of 18 from the top, and then we're going to use our alignment tool toe, align it to the centre, left and right of our background image. So go ahead and do that. Okay, let's go ahead and make our by nail button. Grab your selection tool, and then, for the size, we're going to do 95 by 95 and we also need to create a new layer for it. Let's grab our dark gray color and go ahead and fill it in. Now, before you d select, we need to go up and add a stroke. So at it stroke selection, we're gonna do four pixels, and I also need to choose my color. So grab your eye picker tool here, make sure you select the background color click OK and your stroke, and then we can go ahead and move this over to the right de select and then shift. Plus C. Let's add our text for that buy. Now button. We're going to use Copper Plate 26 for the size and white. Let's also center the text as well, and then use your alignment tool to align that text. Let's go ahead and put it in the new layer group. Let's create our title for this particular poster, and I want to change the font to Oswald, and then we're going to do 18 for the size and we're gonna go back to our dark gray color. So for the title, I'm just gonna type out a title that matches the movie poster for this particular product. So yours may be different, depending on the poster that you downloaded, so just go ahead and type out a title for it. Okay, let's do Railway Bold and 12 for the size and now I'm just going to type out the dimensions of that movie poster as well as a price. I think I'm gonna change that font. I want to make it much darker, so I'm gonna choose Ultra Bold. And then I'm gonna go back to the title and see if I can find a different font or a lighter font. Let's try Oswald light. Okay, I like that much better because that adds importance to the dimensions in the price more so than the title itself. So just remember, we want to make sure that specific elements of text is style properly, so that one title or subtitle was more important than the other. That way makes it easier to read. Can this go ahead and save with Commander Control and the letter s? We're now going to create a button down here as well. That's going to give them an opportunity to learn more about that specific movie poster. So let's type out more info and let's do copper plate again for the font and 18 for the size. All right, let's go ahead and create a new layer for the more info button, and then we're going to add rounded corners. Let's do 10 for the radius and then as far as the signs were going to do 1 15 by 30 and we're going to fill that in with a light gray color, so I'm gonna use F one F one F one click OK, and then go ahead and fill that in De Select Commander Control and the letter D. Let's actually make this text a little bit smaller, because what I want to do is I want to create an inner shadow. So I've shown you before. How toe add a drop shadow. But creating an inner shadow is not an option through the tools itself, so we have to get a little creative on how we do that. So I just want to make sure that the inner shadow isn't going over our text itself. So I wanna do 14 from the size, and I'm going to go ahead and align it as well. So let's go back to our more info button shift plus C to scale the layer boundary, and then we'll use our alignment tool to align the text. Okay, let's go ahead and create our inner shadow now. So basically all we're going to do is create another button the same size and a darker color, and then we're going to cut it out and then blur the edges. So let's go ahead and create a new layer was Call it in her shadow and then we're going to use the same size and the same radius 1 15 by 30. And then we're going to hit D. Grab your bucket tool with G and fill it in with black and de select. Let's go ahead and move this over and behind the other button. So that's about the size that I want for my inner shadow. So now what we need to do is make a selection. So let's go to our more info button, right click and select Alfa to selection. Go back and select your inner shadow, and then you're going to make a cut so command or control and X, or you can go up to edit and select Cut from here, que de select Commander Control and D. Now let's move our inner shadow back above more info shift plus C to crop it and then grab your move tool and place it over top of that other button. Okay, now we're gonna go up to filters, blur and select ghazi in Blur. So from here, you can adjust the settings anyway, you like. And I'm just going to use these settings right here, which I think are the default. 1.5 and 1.5 click. OK, now, that's a little bit too dark for me. So I'm gonna grab my opacity and drop that down. So right now, it looks like I need to move it up one pixel. So I'm gonna grab my move tool, select the layer, and then move it up one pixel. And now I just need to clean up the edges a little bit so that it has a more rounded corner here and over here as well. So I'm just gonna zoom in here, grab the inner shadow grab, might eraser tool with the letter e. And then I'm just going to erase some of these pixels. That might have been too much. So I'm gonna undo that with Commander Control and the letters e and then redo it. I also need to do this site as well, and I think I want to drop the opacity just a little bit more. So right there. Let's go ahead and grab our zoom tool. Hold down your command or control key so you can zoom out and then just go ahead and select any other layer and their ego. You now have an inner chateau. So the last thing we need to do is add our image to the placeholder. So find your image. Place it above the image placeholder. Move it into position. Select the image placeholder. Right. Click on it. Select Alfa to selection back to the image layer. And then we need to recompose the poster if needed by grabbing our move tool with the letter V and clicking on it. And then we can use our arrow keys to move it into position. So right there looks good for me. I'm gonna go ahead and add a layer mask and boom! I now have the image cropped exactly the way I want it. All right, let's go ahead and clean up these layers here. - So the last thing I want to do is I want to add a drop shadow on the back of our image here. So let's go inside and find the image placeholder, and let's go ahead and add a drop shadow. But first, of course, we need to increase the later boundary size, and then we can go up to filters, light and shadow and add a drop shadow. All right, Our first movie poster is done, and the only thing left is to repeat that seven more times. So instead of watching me do this over and over and over again, I would like you to take the time to practice what you learned by adding the seven other posters. And in fact, you can actually cheat a little bit by taking your first poster, duplicating it and then moving it over into the appropriate columns and then update the content. So go ahead and complete that as part of your assignment. And when you're done, you'll be ready to finish up this Web design project, which will be completing the footer and doing any type of tweaks that we may come across 83. Footer: Hello and welcome back. All right. Now that you have all your product listings in place, we're now going to do our final tweaks as well as finish up our footer soas faras spacing goes. I took the spacing between the two columns here and added that to the bottom of the posters as well. I also took the spacing from here and applied it here. So hopefully your e commerce section looks similar to this. You probably have different posters, and that's fine. I also took all my posters and I put them in a new group layer called posters. And now I need to create a new group layer for the section. So let's go ahead and do that if you haven't done so already. Now we're gonna have the same situation with our background that we did in the previous section, and that is, once you put it in the layer group, the color of it is going to change. So I'm gonna select the e commerce group layer and select passed through. Let's go ahead and finish up our footer and then we'll do some final tweaks. So for the social icons, real simple, I just used some simple black and white social icons, and you could probably grab those from a previous project and then just bring them in. Let's go ahead and create the foot or background, and then for the size we're going to do no rounded corners full with and 210 for the height . Then we're going to fill that in with our dark gray color de select and shift plus C to crop the content. And then we'll go ahead and move this up and we'll add 40 pixels of space down here. Now we can go ahead and crop our overall canvas, so I'm gonna go to image canvas size and re adjust the height accordingly. Then I'm just gonna add some information down here that has a copyright notice as well as some links. And I'm going to set it to Oswald, 20 and White. So go ahead and type out something for that part of the page, and then just go ahead and move it into position. Let's go ahead and grab our rectangle select tool so we can align that to the background. Okay, I just need to find my social media icons now and align those as well. Okay, are footer is now done, and we're just gonna go through here real quick and do a couple of minor tweaks. I'm not liking how our navigation is sitting tor words the bottom. It's not the exact bottom, because in the beginning we did align the logo from top to bottom. So let's put our navigation in the center as well to help balance it out. The other thing we need to do for this page is to add some radio buttons on our slider. We forgot to do that. So I'm just gonna go back to this seaside video project and grab the radio buttons that we created previously. So if you select your move tool with the letter V, then click on Pick a Layer guide. Once you click on it, it's going to navigate to all of those playlist circles or radio buttons, and that we can just drag that into our current project. I'm gonna go back to move the active layer. It's pulled us out of that group player and move it down. Actual has put it inside the hero section, which is where it belongs, so I want to do a couple modifications. I want to make the circle smaller and reduce the amount of space between them. So let's scale them first with Shift Plus s anything to do 1 75 by 16 and I want to change this blue circle. Two are lighter blue color, but first we need to grab Ari Lips tool to create a new size. And let's do 16 by 16. Let's create a new layer, and then we're going to select that light blue color and fill it in Commander Control Indy to de Select Shift Plus C, then back to our move tool, and then we can move it into position here. Now we're gonna grab our Lehman tool, and we actually need to take all of these out so we can select them and then, with your lame a tool, select the 1st 1 and then we're going to change the distribution space between them. We're gonna set first item and for the offset. Let's try 1 25 way too much. Let's drop this down to 50 too much down to 25 and I just want to do a little bit more. I'm gonna do 35. And there we go. Let's go ahead and put these back into the play list. Let's go ahead and select all with Commander control and a and let's go ahead and align it to the center de select and then go ahead and use your move tool to move it down just a little bit. Okay, let's go ahead and zoom out. I actually want to move those down just a little bit more. So right about there should be good. Let's create a new layer group for the footer and let's see if we need to make any other adjustments. And I'm not like in the filter. By being up here at the top, I want to actually place it in the center of the actual button, so let's go ahead and Graham R Selection Tool. Let's make a selection. Let's pull the filter out, really filter by, select it and then a line middle of target. Can we put that back in? Let's see if there's anything else we need to dio. I think everything else is lined up pretty good. I'm gonna turn on my grids just to make sure everything is aligned exactly where it should be. The only thing I'm not liking is that the footer is now taking on that pattern as well, so I don't want that. I want a solid color down there, So in this case, it's OK to put the footer above the other group layer. You know, the one thing I may want to do is toned down this orange color of the background. So let's go in the hero section and go to the overlays, and I'm just going to adjust the opacity of overly one to around 75 just to tone it down a bit. And I definitely like that a lot better. Congratulations. We're now done with Project number six. As always, finish off any tweaks and updates that you need to do for this particular project and then go ahead and redesign it with your own creative vision so you can add it to your portfolio . Once you're done with that, I'll see you in the next project, which is Project number seven. Thanks for listening and have an awesome day 84. Project 7: Trek Briefing: hello and welcome to our final Web design project. Don't be sad, though. We're gonna learn a lot of cool stuff in this project. So let's first go over the original website and then I'll show you my Web design. Now. The one thing you're going to notice about this website versus a lot of the other ones that we've done is that overall, this website is not that bad. So let's take a look at it. It's professional, it's clean. It has much better images than some of the other projects we've worked on. They have some styling, but I think that could be improved a little bit and make it easier to read overall. So I'll share with you what I think we can do to make this part better again. The images aren't that bad. We do have some empty space over here. It's unbalanced a little bit, no big deal. We can just slide this stuff up into here. That's nothing major again. Everything is styled nice and neat and clean. They chose good funds, so overall it's pretty easy to read. But we can actually make it a little easier to read. They have some social proof down here to add a little bit of credibility to the company. I would rather see this up near the top. But then again, if they have a strong brand already and there are a large company, they don't really need a lot of social proof like lesser known companies Mom and pops things like that. So either way, the social proof could be down here at the bottom or it could be up a top, so we'll take a look at that. And then they're footer. Nothing major. They have some links to other parts of their Web site. Their primary navigation is down. Here is well, they have some social icons. Copyright prove privacy policy, your typical stuff in the footer. So nothing major on the footer again. So overall, this site really isn't that bad. Yes, we can do little things to make it better. But the main thing that I came across when I was researching this site in their competition was their competition pretty much looks exactly the same. They have header, they have a logo. They have navigation, they have content. They have pretty images. So it's the basic layout. The corporate style clean layout. You know, everybody is looking exactly the same. So in an effort to stand out and to be different and have a different image, a different brand, a different style. I wanted to come up with something that nobody else was doing for this particular niche. So I thought about the different design styles that we covered in the previous section, the seven popular types of design styles. And I was looking through them, and I was trying to figure out which one would be better versus clean, modern corporate. And I wanted to do something that nobody else was doing in this niche, and I decided to do something more artistic When mountain biking. It's more than just pedaling down a big hill or a big mountain. You have to go with the ebb and the flow of that trail, and you have to be aware of the rocks and the bumps because you don't want to hit a rock or a bump and fly off the cliff. So there's an ebb and flow to riding down a trail on a mountain, so it's kind of like an art form, So I wanted to incorporate some type of artwork versus just ordinary, plain boring images. Yes, image isn't that bad, but it's not that great either. So how can we create the ebb and flow of mountain biking and art? So I came up with the idea of taking their main image and transforming it into a piece of art, and I chose water color as my medium. And now you're probably thinking, Okay, how am I going to create a watercolor I've never painted before? Well, guess what I've never painted before, and that's why we have the power of Photoshopped at our fingertips. So let me show you what the final design that I came up with, and we'll explain a little bit more about the design style, and here it is. So we have that same image and it looks like a watercolor painting, and this can be done directly. And Photoshopped. You don't need to buy a canvas or paintbrushes or water color paint. We can get this effect directly and photo shop, and I'm gonna show you how to do this in the next lesson. So we have our primary navigation. Nothing fancy, but it didn't put it on. It's own background. It's on top of the water color as well as their logo and then a called action to register for booking. A time to go with a guide for this mountain bike trail or other trails of your choice. So when a person lands on this website, we want them to do something. We want them to register. Four. The product or service is that the company is selling in this case guided tours for mountain bikers. Maybe they're not ready to register. That's fine. That's why we have additional content below the hero section to help sell them on why they should choose our trails or the dirt. Siri's mountain bike camps trails. And then we're going to give them another opportunity to register once they've read some information. I've included some logos from their website that they've already used to add credibility at the top so that anybody not familiar with this company or this camp will see this. And this is going to add some credibility for them as we scroll down, were introduced to the content that is going to help us decide on whether or not we want toe register for this camp. I've included some images as well and have taken the watercolor concept and applied it to the edges of the images to not only add consistency with our water color image, but to break it up and make it different. Everybody is doing images with four straight sides. Nobody is doing this and it also continues the design style of the watercolor concept throughout the rest of the home page. We then have our register option here. If they're ready to book now and then we have our footer below that. So again, I took a main image as part of the background and applied a watercolor edge to it at the bottom and the top can't see it at the top because the clouds and the sky were washed out. So I'm gonna show you how to add this effect to the images, how to create this background here for the register option, and then in the next lesson, I'm gonna show you how to create this watercolor effect. So if you're ready to get started, let's do it 85. Watercolor Part 1: Hello and welcome back. All right. Before we get started on transforming our ordinary image into a watercolor painting, we first need to download some resource is and install them as well. So that's what we're going to do in this lesson. And then in the next lesson, we will go step by step in creating our watercolor artwork. So we need to download an image we need to download and install watercolor brushes. We need to download and install this plug in, and we also need to download a watercolor textured paper as well. So I put together a text file with the URL for each one of these. Resource is. So go ahead, navigate to that file, download it and then navigate to each of these URLs to download that specific resource for the image. I did Whistler Trek Dirt, Siri's Mountain as the search in Google images, and I found this image here so you can just right click, copy the image and then open up your grid master template and pasted inside of there. Next, we need some watercolor brushes. So once you navigate to the URL provided in the text file, you will then click on this button here to download those brushes and I'll show you how to install those in just a moment. And then for the G m I C Plug in, you will need to go to the URL provided. And then you can download for Windows or for Mac and Windows. Users want the ZIP archive, and Mac users should download the T GZ archive file. Okay, so go ahead and download those. And then when you go to this specific Earl, you could just right click and copy the image like you did with the other image. All right, let's take a look. Aunt are brushes here and we'll go ahead and unzip those. Then you will find a few files inside. And what we want is this file right here. It has an extension of dot a b R. So you're going to right click and copy this and then inside of gimp, we need to find the exact folder to place it in. It's going to be different for PC users versus Mac users, and I'm gonna show you how to do either one, and we'll go over windows first. So if you go up to edit and select preferences and then click on folders Down here. You will find all these different folders where you can install different types of resource is in this case, we need to find the Brushes folder, and this shows the exact location of where you should install it. You want this top one here, not the bottom one. So once we navigate to that specific location, which again is users user name app, data roaming gimp 2.10 inside of the brushes folder, you want to right? Click and paste that file that you copied. Once you do that, you'll find it right here. Now, for Mac users, you want to go to users? User name, library application support gimp 2.10 brushes. And then inside of there, you will paste that file. So here it is, right here. And then Once you do that, you need to go back to give again. Select your brushes panel and then click on refresh brushes. Once you do that, you will then find those brushes inside of this panel. And all the brushes are listed alphabetically. So when I installed my watercolor brushes the first time, I added the letter z to the front of that file name so they would be added to the bottom off all my other brushes. So yours, if you didn't do that, will probably be somewhere in the middle so you can go back and re name that particular file with the letter Z. If you want to add it to the end or a if you want to add it to the front and then just makes it easier to locate specific brushes if you want to rename them in a specific quarter . If you do rename that file, you need to go back and refresh the brushes options for them to be updated in the panel. So that's how you install the watercolor brushes, and we're going to use those to paint our water color image. Now. The other thing we need to install is this plug in right here. So this particular plug in has over 400 different types of filters, which enhances gimp Overall, even though gimp has a lot of filters built in, this particular plug in already have it installed will provide you with a lot more options versus what we get directly from gimp So let me show you how to install these particular plug ins. One for Windows and one for Mac. So let's take a look at Windows first. So here's the windows Zip filed, and here it is, unzipped. Inside you'll find a bunch of files. But what we need to do for Windows is right. Click and copy this folder, and then we need to go to a specific folder again to find out exactly where to install it. So in this case, we need to go back to 2.10 and then scroll down until you find plug ins, right? Click and select paste. You will then see that folder just like this inside of there. And then you need to restart gimp in order for the installation to be completed, and then you will see that plug in option right down here at the bottom of the filters menu . Now, for Mac users, you just have to go back one step again, find plug ins, and then you need to go inside of the folder that you unzipped from and copy the Fuller and this file here. So copy both of those and then paste them inside of here and again. You have to restart. You will then find the plug in in the same location. So real quick, we're almost done. I'm just going to show you something else real quick. When you started up, this is what is going toe look like. But what I want to do is I want to get rid of these four logos here because I really don't need them. Gives there just the sponsors for this particular plug in. And they also want to change the theme to a darker theme that will better match the theme that I have inside of gimp. So to do that, we're going to go to settings. We're going to uncheck this option here, and we can change the theme right here from default to dark. There's other options as well, but I'm just gonna leave everything else at the default for now. Click OK, and then click. Cancel, because we need to restart the plug in for the theme to take effect. All right, so go ahead and finish installing your brushes, the plug in getting the other two resource files, and then we'll go ahead and finish up our watercolor artwork in the next tutorial. 86. WaterColor Part 2: Hello and welcome back. All right, Now that you have all your files and everything installed, we're gonna go ahead and create our watercolor artwork. So the first thing you need to do is resize your image so that it's 1400 pixels wide. And then, for the height, it's going to be dependent on the image you selected if you selected this exact same image than it should be 931 pixels tall. If you picked out a different photo, don't worry about the height. As long as it's around 900 that should be fine. And then we can go up to filters and select our new plug in to get started on the watercolor aspect of the image. So the first thing we're going to do is go to our search option right here and type in smooth so we can smooth out the overall image and we're going to select bilateral these air , the default settings, and that's what we're going to use. Go ahead and click, apply next. We're going to do a search for Contour and we want segmentation again defaults, but we want to make sure that the output mode is set to new layers. Click apply, and then that will and a new layer with those filters applied to it. Let's go ahead in turn off this layer now are plugging. Menu has disappeared, but if you go down to your task bar, you should be able to find it. So go ahead and click on it and we're going toe. Add the same contour segmentation filter again, but this time we're going to adjust the settings for smoothness. The farther the right you go, the smoother the image, the further to the left, the more detail you're going to see in the image. I want to bring back detail in this layer here in some areas. So we're going to drop the smooth this down to something like that. And then we can also increase the edge threshold to bring back additional detail in the image. So these air the settings that I'm going to use, and then I'm going to apply to a new layer again. I'm gonna rename this step one this one step, two more detail. Let's go ahead and turn on the step one layer, and now we can see that we have more detail in this layer. Now, in order to bring more detail back into this layer, I'm going to move this layer below it. And then for this layer, we're going to add a layer mask, as you know, white and black removes. So I'm gonna go ahead and add a white layer mask. Now I can grab my paintbrush tool and a brush. I'm gonna select this one right here, which is hardness 50. And then adjust your brush size accordingly. And then you can click and paint back some of that detail. So I may want to come into the trees here and add a little detail and these trees because the point of focus of our camera is on the bikers here. So we want to and back detail with any elements that are in line with the people on the bike. So I'm gonna undo this part over here by hitting my ex key in painting with white to remove some of that and then paint with black again in the trees here to bring back some of that detail. Now, if you want, you could actually, and detail back anywhere you want. I'm just gonna focus on this area for now. Once you're done adding back your detail, we're gonna go ahead and take these two layers and put them in a new layer group. Let's just call it detail step. So technically, we can take these two layers and merge them together by selecting merged down. However, I like to work non destructively, and at a later time I may want to come back in an add additional detail to my artwork. So if I were to flatten these layers, I wouldn't be able to do that. So that's why I like to put them together in a new earlier group. And then we can right click and select New from Visible. It will then combine both of those layers and put it on a new layer so I can come back later and start over from here versus starting over from scratch. Now it's and a new layer we're going to fill it with white was called background, and we're going to put it below the visible layer. Now we're going to end a layer mask to the visible layer in white click and and now the fun begins because we can grab our brush tool with the letter B, and then we can use our new watercolor brushes in order to give it a more painterly effect so you can select any one of these watercolor brushes that you want to use. I'm gonna go ahead and select 006 to get me started. So once you select that brush, you can see that it looks quite different from the previous brush. We also want to go into our tool options and make some selections that breast size is too large. I'm gonna go down to around 150 and I also want to turn on dynamics pencil shader. So if you click on this icon here, you can select different types of dynamics or the way that the brush is being applied to your campus by default. You probably have basic dynamics, and that's just going to apply a simple stroke that is consistent with the size and the shape of your brush. When you select other dynamics, the way that your brush interacts with the layer you're working on will be different from one another, so you'll have to go through all of these and play around with them to see how your paintbrush is being applied with these different options. So when you select pencil shader, it's actually going to take maybe a minute or two. Forget to actually activate that brush because it's a very extensive or an intensive type of brush that is going to applied the brush differently as you paint around your image. So it's not going to be a smooth, consistent stroke. It's going to be more random, and it's going to add more realistic strokes to your canvas versus a simple, consistent stroke. So right now gimp is still trying to activate that brush, and I cant apply it anywhere yet until gimp catches up and actually loads that brush. So now that I have it, make sure you have your layer mask selected. You want to paint with black, and the other thing you want to do is you want to do two things. You want to adjust the opacity as you're painting, and you want to change your watercolor brush, and this will break it up so it's less consistent and more realistic. So I'm just gonna show you real quick what happens as you're painting so as you can see the amount of a pass ity around the edge of that brush is different in different parts of the area that I'm applying the brush. So I'm just going around the edges here, and it's applying that stroke randomly because you can see the actual brush itself change size and it rotates. And it's adding different random strokes. When you have those tools, options set up the way we do. So the thing I want to do now is drop my opacity and choose a different brush again. Any brush is fine because they're all going to give you different types of strokes, different results and is going to make your watercolor painting look more realistic. So I'm gonna go down a little bit smaller for this particular brush, and I'm just going to do the same thing. I'm just gonna paint around randomly along the edges of the image, and you can see the strokes are different than they were before. I'm gonna go ahead and turn off my original layer here, and my detail steps later because we don't really need those turned on right now, So I'm gonna go ahead and continue going around until the straight edge of our photo disappears because I don't want a straight edge for this particular watercolor painting. Okay, I'm gonna go ahead, drop the opacity, I'm gonna choose a different brush, and I'm gonna make this one a little smaller. Let's do that as well. And then I'm just gonna click randomly in the background here just to break it up a little bit more. Now, the capacity, I think, is a little bit too high. So I'm going to undo that with Commander Control and the letters E. And I'm gonna tone this down just a little bit because I just want some random strokes in the background here to make it look like some paint strokes were applied on the actual image itself. And that helps break it up and makes it look more realistic and more like a watercolor painting versus just leaving it blank the way it was before. All right, let's go ahead and add our water color texture paper. We want to make sure that we have a layer without a layer mask selected. If you're going to paste it into your document, Otherwise it's not going to work. I'm just gonna click on, Create a new layer here, and it then paste that particular content that I copied into a new layer. Let's call it watercolor paper. I'm gonna go ahead and scale it so that it's 1400 pixels wide, and then we just need to move it into position. We also need to add a blending mode so we can actually see the rest of our artwork. So let's go to blending modes and select multiply. So that adds some texture to our artwork. And now I want to get rid of this lying down here, and I also have some text on that file as well. So I'm gonna go up to layer and select layer to image size. I'm going to add a white layer mask and then with my watercolor brushes, I'm just gonna go ahead and paint with white to get rid of some of that watercolor paper down here. I need to increase my opacity first, though not like in this brush too much. So I'm gonna go ahead and pick out a different one. Okay? That one seems to be working a little bit better. I don't want to get rid of all the paper texture. I'm gonna leave some down here is well, at least for now until I decide otherwise. So just go ahead and clean up your edges down here. And I think I want to go back to this layer mask with a new brush again. It's tried this one, and I'm just gonna paint in some of the corners here a little bit more, a little bit more up in here a little here. I don't like that. So I'm gonna switch to black so I can get rid of some of this here, increase the opacity and this is just a matter of taste. So years is definitely gonna look different from mine because you rapacity settings your brushes you're selecting, they're all different. So go ahead and do exactly what you like based on your creative vision, and that's it. Our water color image is now done. The last thing I would recommend doing is creating a new layer once you're done applying all your settings in your brushes and your textures and all that, So let's go ahead and do that if you're done. If not, go ahead and continue working on your watercolor painting and then put them all inside of this new group layer, and that's it. Once you're done, I'll see you in the next tutorial because we need to work on our header for our Web page. So if you're ready to start on that, well has to do it. 87. Header + Hero: Hello and welcome back. All right, we're gonna go ahead and work on the header and the hero section in this tutorial because the header is going to be really simple and super easy to do. I went ahead and typed out my primary navigation. I added five spaces between each of the menu items. I used railway bold and 24 for the size and white, of course. Now the one thing I need to do is I need to make this content easier to read. But first, I just want to show you where I placed my primary navigation, which was on the left side of the first column, and I used 30 pixels of space at the top of the browser in the top of the primary navigation. I also added a guideline at 700 pixels down to represent the full line for the hero section . So go ahead and pull those guidelines out and finish up your primary navigation and put it in the place. Once you have that, we then need to add a drop shadow for the content. But first we need to go up to layer and select layer to emit size to increase the layer boundary size and then we go to filters, light and shadow drop shadow to add our drop shadows. I'm gonna go around one for the opacity and then just go ahead and make any other adjustments. You want for your text to make it easier to read. So I'm gonna go with these settings here. Once you're done, go ahead and click. OK, Once you have your primary navigation done, let's go ahead and put it in a new layer group called Header. And even though there's just one layer, I still like to organize all my layers and group them based on that section. Now we need to download four logos toe add to our hero section. So the 1st 1 is going to be this one here, and you're going to do a search for this. You want to find the PNG file, which is going to be black and white. But once you click on it, you'll see the transparent file. So go ahead, copy that and paste that in, and then we just need to resize the layer. So grab your scale tool and then for the with, we're going to do for 20 and let's go ahead and place it to align with our primary navigation, and I want to make sure that all the text is inside of the mountain. Kate. Let's increase the layer boundary size and use Commander Control and F to paste are drop shadow. Can we have three more logos to download? The 2nd 1 is Trek logo, Fox Shocks logo, and then the last one is this hear? So go ahead and find PNG files for each copy them, paste them in and then we'll go ahead and resize them. So as far as sizing, we're going to do 50 pixels tall for each of the layers. Now that we have that done, we can go ahead and put these into position. But the question is, do we want to put our logos above the fold or below the fold? I think in this case for this particular company, it's a well known company, and I don't think adding the social proof above the fold is as important as we have done with other companies that are not as well known as this company. So that's just something else you have to consider when you're adding your social proof up in the hero section or just below the fold. I think for this case, it's fine below the fold. So for this first logo, I'm going to a line to the left side of the second column, The last logo I'm going to align to the right side of the second toe. Last column. Let's go ahead and grab our alignment tool so we can grab each one of these layers, so I'm having trouble selecting my logo. So if I go up to my other local, appear the top. If I crop the layer boundary, I should be able to select my local now. Okay, let's go ahead and select the other two by holding down our shift key and clicking on each logo, select first item and a line to top. They also need to center my second logo directly in the middle of these two logos, so we're gonna grab our selection tool, make a selection, and then we need to align it to the center of the selection. All right, go ahead and de select, and the last thing we need to do for our logos is apply a white color overlay to these two logos, so let's go ahead and create a new layer called overlay. Let's fill it in with white. And let's put all of the logos in a new layer group called Logo's. We want to make sure we don't select the first logo in the hero section. So grab the other three, put them inside and then grab your overlay layer and change your blending mode to addition . Now we need to take this logos group layer and duplicated because we need and the drop shadow, and we can't add drop shadows to grouped layers. So what we're going to do with this new layer is we're going to right Click and select Merge Layer Group. And this way, if our client has a change in once the logos, any different order, we can go back to the original group layer here and rearrange them versus merging them, not having this option. And then we have to start all over from scratch by downloading and creating an overlay so you can actually turn this layer off because we don't need it right now and then. Once your client finally approves the design, you can go ahead and delete this group layer altogether prior to giving it to the Web developer. Okay, so we can now go ahead and use our keyboard shortcut, Commander Control and F to add the drop shadow. So the last thing to do is decreed are called Action Button. Let's go ahead and Graham are text tool. Let's change the font signs to 36 white for the color. Let's create a new layer called button. Make sure you fill it with transparency. Now, before we create the button, we need to go to our tool options and make sure that the dynamic settings is set back to basic dynamics. Then go ahead and choose out a color of your choosing. And then to make the button. We are just going to click multiple times in order to create the button the size we want. And the more we add, the darker the button becomes. So I'm gonna go right there, and I'm going to move it below the text. Let's go ahead and Graham are text layer as well. Let's increase the boundary size in. Let's add a drop shadow command or control and the letter F can Let's go ahead and group these two layers. Let's go ahead and also create a new earlier group for the hero section. The last thing I want to do is I want to grab this button here and move it over a little bit because it's a little unbalanced right now. So I'm gonna go back in and grab my called action button. Let's go ahead and crop the boundary as well with Shift Plus C. And I'm going to place it right below our logo here. Her hate. So that's it. Our header and Heroes section are now done in the next lesson. We're gonna go ahead and get started on the first part of her body. 88. Body Content: Hello and welcome back. All right, we're gonna go ahead and start working on the body section of our Web page. We need three images, and you go to pixel bay dot com or Google images and find three images of cyclists as far as the size we're going to make the 1st 2 images on the left side, five columns wide, and this image over here will be seven columns wide. So go ahead, re scale your images accordingly. Renamed the layers and make sure you go up to layer and increase the layer boundary of each image. Because later on, we're going to take a watercolor brush and adjust the edges of the images to create that watercolor effect. All right, so once you have that done, we then need to go in and increase our campus eyes. I'm going to do 3500 for now. And then once I turn on my hero section here, all my images are not visible. And that's because inside of the hero section within the watercolor group, we have this layer right here called active. That is too tall. So it's hiding my images. So I'm gonna grab my rectangle selection tool, and I'm going to resize the layer boundary so that the rest of the page can be seen. Okay, now that my images are visible, I also need to go to my background layer. Once I close this and I need to increase the later boundary size and then we need to fill it in with weight. All right, We're now ready to start working on our images and our content before we work on the images . Let's go ahead and add our title. So we're going to use Oswald Bold. Let's do 76 and Dark Ray. I'm just gonna move this up and out of the way for now. Okay? Let's go ahead and and some additional content and we're going to make it seven columns wide, and we're going to adjust the height of it later on once we get all our images in place. So let's use Georgia 16. Grab some dummy text and pasted in. All right, I'm gonna go ahead and turn these two layers off for a moment so we can work on our images . Let's grab one of our rounded watercolor brushes. I'm gonna choose number 006 Make sure in the tool options you have dynamic set to pencil shooter and then adjust your opacity accordingly. I'm gonna start off that 100% and then we need to add a white layer mask. And then with black, we can paint along the edges to remove that hard edge. So I'm gonna go ahead and do this for all three images, and then we'll go ahead and move them into position. So go ahead and work on your images as well. Try and remove as much of the straight edge as possible. Adjust your A pass it E and your brush size as you're working to create more random strokes can. Once you're done with your images, we're gonna go ahead and turn the grid back on so we can align these exactly where they need to be. I'm also going to crop the content for each layer as well with shift plus C and that will make it easier to align everything. And I'm gonna put this 16 columns wine, and in order to move it, we want to make sure that we select the image thumbnail and not the layer mask. Otherwise, we're moving the layer mask and not the image. So I want to align these two at the bottom. Okay, so that looks pretty good. Let's go ahead and align our title. So the contents a little bit too tall. So I'm gonna go ahead and the line it so that the text aligns with the top of her title, and it's a little too long down here, so I'm gonna go ahead and remove some of this content as well. Okay, so that's looking pretty good. Never a quick. I wanna give you another tip on content. I'm gonna go ahead and turn off our title in our image here. And I'm going to duplicate this layer just to show you this tip. So when it comes to content, the wider that content is, the harder it is to read. And studies have shown this to be true. Your eyes tend to get tired the longer the line is of text. So even aunt seven columns wide. It's still a bit hard to read because the lines are still fairly long. Now it's much easier than 12 columns. But even then I wouldn't go more than seven columns wide. Unless, of course, you make the text much larger. The same is true if you go too far the other way and make the lines too narrow now becomes difficult to read again because you're only getting 2 to 3 words per line, and that makes it that much more difficult to read. So I'd like to go anywhere from 3 to 5 columns wide on average, and I will adjust that based on the size of the text. Go ahead and undo all of this. Let's put this in a new layer group called content. Then we have our images. Last but not least, we have our body group and guess what her body content is all done. So from here on out, I really don't have any additional tips for you in the next tutorial we are going to cover are called Action Section for our body, which is going to consist of a register form that can be filled out toe book specific dates . This isn't gonna be much different from what we've done in previous projects, but I'll go ahead and go through it with you just so we can complete out this project and then we'll do the footer after that. So if you're ready to get started on the registry, part of this project will go ahead and get started on that in the next lesson. 89. Body Register: Hello and welcome back. All right, we're gonna go ahead and create a registry section within the body content, and we're going to use a large, full bleed image as the background. So go ahead and find one downloaded, resize it toe 1400 pixels wide, and then apply your watercolor brushes along the top and the bottom edges of the image so we can keep the consistency of the design style throughout this page as well. And remember, you have to add a white layer mask to do that and also increase your layer boundary size. And then once you're done, you can go ahead and crop the layer boundary size again with shift plus C. I'm gonna go up into my hero section here. I'm going to grab my C t a button and duplicated and then with my move tool. I'm just gonna click and keep dragging down until it comes down to the bottom. I'm also going to re crop the layer boundary manually with my rectangle select tool so I can align it to the center of our document and then select all. It also need to bring this layer out and down. Selected with your Lehman tool and then a line center of target. Based on that selection de select, Go ahead and close up this group player and then we're going to cheat by grabbing our filter form from a previous project. So I'm gonna go ahead and just click and drag this over. Now, a lot of times you're going to use elements that you've created before in new projects. Now, of course, you can always go back and redo these from scratch. If you want to use a slightly different design, maybe you want rounded corners instead of perfectly square corner. So in that case, I would redo it. If not, then there's no reason why you can't take existing content, reusing it for another project and then just updated accordingly for that project. So I'm gonna grab my move tool here enemas, and let's select Pick a layer guy because I want to click on this date right here. I want to find out where it is, and then I can update it accordingly. I don't need it for this design, so I'm gonna go ahead and delete it when I delete that layer and I'm going to take this content and deleted as well. Can we zoom in here so I can grab my text tool and update this content to start date? Let's select all Let's change the color to White and I'm also going to do Oswald bold. Let's do the same thing for the content right here. It's still kind of hard to read this content right here. So I'm gonna go to my background layer here and change the opacity by increasing it from 22 . Let's say right around 80. Okay, so that's easier to read now. Just gonna move the text up a little bit, so it's not too close to the filter forms. Let's go ahead and and a guide so we can align the next layer as well. I also want to change the color of the rose as well, so I'm going to select each row and fill it in with white. Okay, I'm gonna move this content down and let's change this to book. Now let's make it larger. Let's do 48 and Oswald bold again. I'm going to crop the content with Shift Plus E, and I also need to take this row out so I can select it with my alignment tool. Same with her content. And then go ahead and align to the first item center and middle of target. Okay. Need to put those back in. Just gonna rearrange some of these layers here. I also want to move this filter up just under the registry content here. So it's together. All right, so that's it for the registry section. In the next lesson, we're going to finish up our design by doing the footer and any final tweaks. 90. Footer: Hello and welcome back. All right, so for the foot or section, I went ahead and did it. And it's nothing fancy, quite boring. Professional. Not a lot more I could do with the footer section. It's just there to provide additional links for information that a visitor may be looking for. I do have a hover state right here for one of the icons so we can see what it's going to look like when we hover over one of those social media icons. It's going to be a little bit darker. I did use the branding colors from the company itself, and I also used those colors in the links as well again. You probably don't want to watch me do this from scratch. It's real simple to do. By now. You should know how to do it. So go ahead and practice what you learned on creating the different content for the footer and your social media icons. Addy hover states at all the different lengths copyright information, a privacy link and anything else you want to add. Then, just like before, we need to go through and make sure that the design doesn't need any adjustments The only thing I see that we need to do is our spacing between each of the sections. So go in, make sure that the sections have the same amount of spacing between them. And then the last thing I think we need to do to improve the hero section is make our water color image darker. It's too bright, it's too white. It's kind of hard. Read all the content. So what I did is I went in with a new textured layer that I downloaded from picks. Obey and I placed it over my artwork and made some adjustments to the paper. I drop the opacity. I changed the blending mode to multiply. And then I added a layer mask to remove the hard edge along the bottom of it. And I find that it looks much better with the darker color over it versus the bright white , because I think that again makes it too hard to read. This definitely improves it. The only other thing I may do is come in here and remove some of the water color down here and kind of tone it down just a little bit. Other than that, I think we are all done. So, congratulations on completing all seven design projects. Practice what you learned. Create a new design for this particular company for your portfolio. And then, if you want, take any of the designs that you created for your portfolio and post them in the Q and A section to show off your new design skills. Or maybe you just want feedback on the designs you created, and I'd be happy to take a look at those designs and provide any feedback if necessary. You may end up doing a better job than I did designing these pages. If so, I'll congratulate you and then you'll know that you're on your way to succeeding. As a Web designer, thanks for listening and have an awesome day.