Design an awesome Single-Page Website in Photoshop | Jestoni Esteban | Skillshare

Design an awesome Single-Page Website in Photoshop

Jestoni Esteban, Graphic Designer • Online Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (2h)
    • 1. Overview

      0:30
    • 2. Fixed & Center Headers

      4:25
    • 3. 3 types of header

      3:02
    • 4. Introduction

      8:07
    • 5. Wireframe

      10:47
    • 6. Heroheader

      17:55
    • 7. Menu 1

      12:47
    • 8. Menu 2

      10:13
    • 9. Blog

      16:57
    • 10. About us

      5:35
    • 11. Location

      9:10
    • 12. Gallery

      7:52
    • 13. Footer

      13:08

About This Class

Welcome to design a beautiful single page website in photoshop. My name is Jestoni and I will be your instructor for this class. In this design class, you will learn how to prototype a single page in case you want to design own website in the future. You will learn different types of header and navigation styles for your website. I can't wait to show you how to design this awesome single page so enroll now and let's get started.

Freelancing Guide Classes.

Introduction to Web Design Freelancing in Photoshop

Learn UI/UX and Mobile App Design in Photoshop

Make Money With Photoshop: Real World Project

Portfolio Builder 1: Logo Design

Trending Graphic Design Classes

Develop Design Skills #3 Low Poly Design

Basic Effects in Illustrator for Badges and Logos

Design Infographic Elements in Adobe Illustrator

Typography: Learn the Foundation and Design

Create Mock-Up Template with any Images

Develop Design Skills #1: Badges

Develop Design Skills #2: Illustration

Basic Label Design: Sketch to Vector in Adobe Illustrator

Vintage Coffee Poster Design

Design Comic Effects in Illustrator

Graphic Design Tips and Resources

How to Start your Graphic Design Career

Free High-Quality Graphic Design Resources

How to critique your design in simple ways

7 Graphic Design Terms New Designers Get Wrong

Transcripts

1. Overview: Hello and welcome to designing beautiful single feature website in fourth shop. May name is this Tony and I will be your instructor for this class. In this listen class, you will learn how toe prototype a single pinch in case you want. So design your own website. In the future, you will learn different types of header and navigation. Stine's for your website. I can't wait to show you how to design this autumn single beach. So anyone now and let's get started. 2. Fixed & Center Headers: Hello and welcome. My name is Tony, and in this video we're going to talk about the types off headers, the fixed and center headers. These headers are very common and popular in Web designs. We will start with fixed header. Most fixed other websites placing off their logo, usually on the left side, and the navigation bar is on the right side. But the basic idea is when you scroll down to see the content of a page, the header on top space. It won't move. So whatever part of a page you go, you will see the other area. That's why it's called fixed Heather. Let's see some examples. This is the first example this site uses fixed heather. As you can see, single beach websites usually use this kind of feather. Like this site single page website is when you click on the navigation, you don't go to other beach just on one fish. Let's click one Nick here and other one is volunteers. You can see I didn't go to other pitch. Another example from went in money that that come and you can see the header. It stays up and didn't move right, and these are the links minutes example From yahoo dot com. You can see this header. You see that when a scroll down, it just stays on top. Nasty fix header. That's idea for ah, information. Maybe sign where you want to go to other pages immediately, and these are the examples off my own designs. Here you can see the head there with transparent background. It means that if sticks Edgar, you condone that by lowering known your capacity. If he and it's the layer, you're different, You're developer will understand that the next example. Just white background. Also fix header. All right, and let's go toe. Another lesson for today. Just the center heather center header is the When your logo on your page is right on the sender and below that is their navigation bar or links it straightly simply. They go for this type of weather because everything looks balanced and clean on the other part, where you want to focus on your logo for Brenda. Okay, so let's see some websites using this type of weather. The first example, excluding usa dot com, you can see their logo here on top and below. That is the navigation bars. Oh, Navigation bar and see the next example many, many simo dot com The letter m and next is I t B that worldwide that gun also using center header and finally, the EPO dash i. N. C. That JP and show you some of my designs where I use the centre either and year example, You can see the header and the navigation and let's see the next one and usually another one big logo there and the navigation bar a simple Anglin website website design. Let's see the first design again. This design is an equal MERS design that I did before and the soul for this video. I hope you enjoy it and see you next time. I hope you practice doing Web designs and post your questions and designs on the discussion bird. Thank you. 3. 3 types of header: In this video, we will continue our study of types of heather stony the greater discuss. That's video. We talked about the fixed and center. And so today we discuss another three left, right and split tenders. So let's start with left when the website puts its no go to the next site. And under the logo is the navigation that this left header. Sometimes you see search button on the right side, like one hour layover. Not always a search bar, sometimes a contact info here on my own projects where I used left Header In this design, contact information is in the search box. Another example from on the same. And see if Heather inaction is such that got on the right side. They used such next for me for me. Call you that on the left head of sight. Public class. Okay, next on the happy. He's right, Heather. This one logo is on the right side. You rarely see a website using this back. Heather, I think I did this type of the other ones. Regressive line that is so that's not good. Let's see some real live examples Knicks and find an example. Is that and for our less type of weather is split. Either. This type of heather is also popular. These days I've seen another Web pages using. The reason for that is simple because everything looks balance and equal. It's my own design I did for applying the local centered. And the navigation is it's worth well, if you have a few minutes turnings for our first example into Joy directed that next is panics, ups that price. So using speak tender is then he will develop for death, interacting that are so using this type of heather and find any V of the local website. That's a lot for our examples, in case you have a tragic in the future that on a few things by using big together if my world fell, I hope you learned something. See you next time. 4. Introduction: hello and welcome many Mr Stony. And in this video you will learn how to design a single page website in October 40 shop. So you can use any other Bayport ship this force despite RC six and is not the thing that we're going to do. The middle section, the black section thes air very easy. And you can follow along with me if you want Toe Fargo, you can just post the video and the thing that we're going to do. Yes, very easy. Good for beginners. And the type of website is fixed. Header. I haven't show you some websites using a fix header. And this one If you scroll down, you can see the header. It stays there. And every time you're going toe scroll down the header of Ian. Stay on. That's basically and you can click one they want It's ah good example Off single page Another one. Another single bitch when you click it. It didn't go toe Another beach just goes down. This click and the images that we're going to use here This is spaghetti are from picks Obey. You can don't know that here Bixby is three. Yes, the spaghetti it's free. And although it you can lugging, I mean signed up. And for the icons are social media and got farm authentic themes Here I used that here on the floater social media icons and for the front off the logo. I used this clear line and the other one is lobster. You can don't know that in the point that is our logo, I guess. Made up the name restaurant name and for our fun for our takes. Just goto Google fronts. And just like Mary, where there is ever meaning fun, it's free, you condone. Know this fronts for family this flick do collection or you can click the one by one select one you can don't know Total de find styles in this family make taking this You will get the fighting and rightly and struck him struck here and and these are the points Next we're going toe to install it. But actually I already started May computer. So I want to start it again and the other phone that we're going to use is really where you so already is here in Google. Fun now know didn't like what we did. Just do collection are brick one by one. The fun stuff that you need. We're not going to you sick every once tinier. Okay. And for the icons, I just I just don't know that from Flat Icon. And here's the icons that we're going to for location or going down. And also this one social media for the migrants from flat Eigen are flat on Show you how, how you can download it later. You can actually just like the name and search this data When you click one, it will go to your my guns. No, I don't have. So just click this plus icon and it will out there and you can choose the categories There are being or svg GPS are basically type and especially are being sometimes But for now it's down that BNG fighter slickness and now you condone it Unit to give some attribution Now I see her all right. Before we start designing this webpage, let me show you first the anatomy of a website. So you will have an idea what I'm talking about when they say heather or hero are anything that arrogated to him. So first we start with a header. If the header. You will see there the no go in the navigation. Some people call the menu Are, you know, bar and you will see the links here. Thanks for different different pages or different sections off the beach. Like Like what? We're going to do a single beach and the next is hero area. They call it hero area. Sometimes pictures lighter. That's corny hero area for now and the next for hero Theseus, the content Area or the body from Lepage. This is the area where you want toe. Put all the information for your website, and that's basically the body and the sidebar is optional. If you have a website that so many things, then you may want to put the cyber. But it's an option. I don't know. You don't want toe put the sidebar if you have a short website and not so many information , and the last one is the floater in Footer, they put the are the quick links also the social media vehicles. And sometimes I put the novel off a company that's basically the folder in other website you would see some has newsletter sign up, so that's medically delay Further This is the basic requirement of a website. You have the heather, the hero area, the content area and the floater. Always remind yourself that when you're designing a website with finish your design with all right. 5. Wireframe: before we begin toe design this single webpage in the shop you need to go down that first day. Responsive bootstrap grids here in dribble. Here's the link. Not worry. I will put the week down below in the description box. Just click this download, and when you download it, he will have this find or you have to do is right. Click and 70 extract here, and you will have this fighting. We're going to use the 11 70 just drag it to D and are therefore chop. And here the great that we're going to use Twitter. Bootstrap Spice agreed. It's 11 70 Next exit, treating that we're going toe precise this canvas goingto image and then Denver size exchanged the stool, 1600 pictures and 5700 pixels in night. Click this Uncle Proper Oncor so it will lead in the bottom in Greek. Okay, now these every done for us. It's trust transparent. So let's edit the background, the white control de your keeper, and then just drag it here to the bottom. And when then click district in this hour, 10 of us let's zoom in an extinct that we're going to do is put the guides no guide. You mislead vertical and we're going toe happy. The guys that I put my design now to add guide go to view and then you got tight 123 and click. OK, make sure it's vertical and it's here. Next I use the cable choice that I said my door f drink and then type 786 and click. OK, this for our hero area. Let's see the next for the space, the euro and the minnow. Evil charges of every three And then I ate eight feet. Click OK are enter or the next day, etc. In this the number Thank you again the 157 and hit enter in your keyboard or the next You can follow along with me if you plus the video and happy the guides that I'm putting here two or three settle for Let's see the next game you see guides for the replacement, the section of our pinch. Actually, the first time I designed this, I didn't but guide just designed it. But now I'm putting it so easy for your guys toe. But all the sections the next time type three for three Big Sense. And then it's called down. See the next. It's 4036 cents and this type of here for 036 and enter the next night. It's for 152 pixels and you want to do and tender and how far that's part of the location section that center for 7 to 2 and for our gallery section. Let's see it's for it. 30 meaning my sit and then it for eight 30 Let's see the bottom part of our and gallery, including the bargains for 370.370 and for our photo, its fight for 30 And these are our guys, etc. Yeah, it's perfect with next thing that we're going to do is to put on the section names Power Website so great. So we want movie. Next. We need to look this background layer. Click that and I'll click to making your father click and then type our new girl. I mean might free. Now we're going toe the section names, like I said, changing color toe at least the fun size. This will be our editor and next hour, zero area our background will be. That will be our backgrounds. Well, for our hero and then menu. The reason for doing this is is toe not forget when we're doing the individual sections you want Oh, what the tightens up Each section's right next but me about us. The location and gallery course footer finance And next let's get their capital were going toe put. The lighter frame might offering is very important because it will serve us our backbone. The design distinction, the color So we can see. Now we will do the boxes. This will be our white friends you can use on programs like mock ups for for mark flow There are there are other framing you instead you can use for free. Of course, what I'm doing right now is the middle section. Yes, capping the boxes that click and run copy and then control the precise shape. This will be the black both section lugs section and next is about us Doing the background are right now just this. But the image here and then takes on the right side. All right for the occasion. There will be an image here, so let's cover the hole location section and next list this copy that for our gallery sexual but the biggest here. Let's try putting the individual boxes for the images. Copy that and select posts. And then this truck holed up in drug on, lastly with footer section. And that's our my friend very fast. You can make it nicely and clean unless it for one toe show it your client client. Then you want to use other programs like cops to send them because they're going toe approved the wire brains before moving on to the project. So you really need a very nice and presentable wire frames. But for us, since we're going toe, just practice it and we're going toe. Delayed it anyway later. So it's fine. Just, um, the point of our wiping his toe. Remember the areas in the parts of our website, So it's OK. That's their right frame 6. Heroheader: we'll start designing the euro area, so I'll click this group so we can put any money type here big. Our area is full with and it reserved US background as well for our header. So I feel like this layer off hero area and put it put it Toe Hero Group than now. Drugging image Open toe A new tab on this and drug many of us hey controlled in your keyboard and decisive. Make sure you cover the layer for the bucks that reading and hit Enter on your keyboard and put your pointer in between these two layers and alky in your keyboard. And to make a flip, must double click this field corner and will enter our main color. This this companies, and that's our main corner. Next, we'll create a new field like this icon and just solid corner in this hour corner. Click OK clipping. Mask this field corner to our image and make clicking click again. Now it's lower down. The opacity have to 30% and it attracted 30% a system of the gates for no so we can see it . Our image, thanks to go toe Brenneman and use screen you can just anything you can play along with these savings, but I just scream for now. Let's show the guys again by pressing control. Semi colon in your keyboard played a new group and name it Heather. Next you singing your little drew, a rectangle on top of our canvas. This will be our header background, the power header changing the caller toe. I don't break that some name and this will know. Let's lower Dhoni Capacity door, 57%. It's no time to design our logo using our the once Let's zoom in, get your tiptoe. Are Christie in your Gibbard spaghetti and controlled a too cynical and just the front lobster Napster to. But, uh, next it's changed the call your toe right and click OK, position over our rectangle and change the front size toe Certify points and district. Now let's type the letter Y just need fun. Clear line The fun size and smart this position close to our spaghetti takes. The next one is yummy. The police the once ice but over the top of power spaghetti X and make sure it looks okay and balance. I mean and explain to me I don't mean nature. If you move away your back tools, it will become a motor so you can move your takes When done arranging this little lateral quickness check to commit. And next next time, exclamation mark, Exclamation mark and put it above the world s spaghetti. They were down, the for insights again, something like that. And that's fine. Using the move to select the players one by one and move it using my off. I mean, using my keep on battles up in Don's are left. All right, hold shift, key and click Contacted like all and then control Jake to make a group Made me logo. Next we're going toe center this logo control a using the move to and the next stop to align horizontal centers. Make sure you stick the right layers are there and next put the navigation need links to our beach We'll be using Merriweather Front that we don't know did from nobody wants. And let's set the front size toe 21 points. Now I home having made five spaces here using space bar and then next is minimal. Another five speeches and for the last one is Block turned on your guys and make sure it's while Colin separation from the logo and highlight this home. We'll put them under link here and change the Stell toe and check. And next, we're going to do e store, duplicate this alky and then drug the right side and next first and intensity and changed it. Do about for our first in this right side and then changed this one toe contact. And for the last one, let's put gallery and position it highlight police about and click this underlying removed . And make sure regular in front sight district and this our navigation and next movie logo to the left side make it center and it's against the other. Since we adjust our logo, I'm using my keyboard arrows move. It's a moment, the gates, and it seems fine to me. Let's zoom out to see it matter. All right, then some in again. Next we're going to do is to put the text or statement in the hero area. This day, heading and typing me thinks the best expurgated in down control a twilight. Then let's see the phone lobster to regular select D. Forget it and make it and silicone again increased the one size until you're satisfied. Drink it, Do something. Lobster 67 Fun size looks all right then I 90 seconds, but italic. Alright, then click Check winning toe sentry control a and then click this Stop a land horizontal centers. Now it's sender and move it down using keyboard arrows for our takes. Making a paragraph takes goto and face Lottum Epsom. If you don't have it for six more seats, you can goto Lauren, Epsom Netcom and it's and if the fronts control a and the fun site STO. 24 points and 36 points for leading in character Bannon. Put the period there and enter hide. This in this hour takes for our hero area. Next, we'll put a small circuits Assauer bottoms for our pictures later in changing the corner toe something Greek. There are good and we're going to duplicate it on G and then run to the right, so like both layers and hold alky. And and then I changed the color white. They didn't sell it. Got this buttons and political these distribute horizontally centers to make the space is equal and then group them. Put the name on it modern's and that Santa is again control day and click this align horizontal centers. It's seek, and next put the arrows to the left, using the line full hold, shifty dragging to make a negative country that five degrees. Let's change the corner toe. One D. One D one d and think OK, next we're going toe. Duplicate it. Control J in your Hubert and Control T toe. Show the transparent selection tour and right click and click Flip vertical. Now using your move tool, Move it down, make sure it's looks arrow, and then group this too, on duplicated again Control J and then control Key right click again and fully horizontal. And they're now let's drag to the right side. Let's edit the arrows. They are overlapping the two lines, so I select the upper part and move it using the keyboard Arrow up Come Mimi three pick sense the same time, the other side. Make sure they're not overlapping and select both and group them. But any money does. And then let's see now saying next we're going toe. Put a design here that he got out from this white part here in the middle of our image. So let's select the background control control and then click to press the image and then click this layer is the background off our area. Move it down and then next on top of our field corner, using the McDonnell tool dry shape, changing the corner to right. And next get the polygon told not in the custom shaped get deep polygon Tony, and for the sites, make it three and draw the shape. Hold shift key in your keyboard to make an upside down triangle like this, Then release it if you have the triangle upside down, we need that because we were going tow truck. This strangle to our wrecked under that we just did available. So Andrade, then control, See to copy Finnic our rectangle then controlled the pace. Position the triangle in the media off Dungan, then go to this icon and subtract from shape. And now we cut out the triangle. Indirect angle. Next. Next, let's edit the rectangle. Select that in the layer funding. Make sure you're in the right player in control, and then more this side of the So we have a very nice looking cut out in the hunger in there. That's our hero area. And Heather, I hope you enjoy it. In the next video, we will design the menu. Sexual. I hope to see your data. 7. Menu 1: the next section that we're going to do for our sing in my page is the middle section. Create a new group and name it Ming. And next get your title are type in your table with 41 points, one size like our milk and then moving to the center. And please check if you are satisfied. Duty, position and next, we're going to put a decoration, just one ornament ornament. One. Now here you can use anything. Just click and drunk in the canvas. Shifty. Make a eight to constrain the shape, all right, and then they changed the color. Let's make it something great like this one. Basics Basics, basics and click OK on next. Next center this control A and, like these align horizontal centers like the Mayor and Control de Toe Select and get the gun told and like the 370 for me and for height 334 pixels, and we're going to edit the science of this ship. Its position it first to our grill. And let's see, this is the design we're going to do. Let's measure so we can make sure that the squares that we're going to do is align mean my snot. Yes, but a are 33 and the position off then picked eight. All right. And now get your derricks and I condone Click on the ship. So your property this initial thea other options are don't have the properties goto window and play care properties Click on link and then 70 big since and number Don't 76 Senses Will and I ds It's close to stop every going toe up in a new image Drug one. Well, where when you drop the image on that, it will open a new term. And this, I mean lefties and drag it over many of us. He controlled the toe, show the transform tool and recites it. Make sure it will fit to our shape and always on shift key when drugging rece icing and clip it to our ship and position it using your keyboard. And now I will show you how you can announce your image. If you have a bad image, just click this adjustment layer and Levins there so many choices. But we use levels for now. You need to do is just drug it block somewhere somewhere like here and That's basically how you ended the colder or the night and block off your image in case you have next, select layer normally of the base layer, make a duplicate off our base layer and put it above our covered. The adjustment layer and sleeping must again the spaghetti image and New Sea or Derek selection to go to this option And, you know, next time off, because, er and for its toe what they write stroke and no points. And now he was control. Tito, short transform tool and drug in the side will make it smaller. This will be our style for our menu. Aren't on the images in the city. That's our It's time for our next Let's group this and said The main title, What did you put that item? Government? I just. And this we're going to duplicate especially, and what we're going to do first will put the spaghetti with red, get the one sites and the color, copy the X code, right click and click. Copy France and that minimize this and the state the sighted off our spaghetti with red. All right, and then it's precision. I know Kate like the above Let's zoom in. Is he moved? Tool the text using your cable arrow right? Then get the lengthen and draw a line holding our shift geek when drugging. And that's changing the color toe something great. 666 Let's copy this. We may use this later and use in your costume shaped hole. Roya, speak this the booth wanting ship Kiesler dragging. It's changing the color, and it's already basics. Basics. Musics. Zoom in and position it nicely using your move. Tool is your keyboard, and then Saki and drug make a duplicate, and it looks nice on its position. All right, and next. Let's put the price. Let's see the one size it's 18 points in the numbers are 35 points, 18 points, far in the world price. And that defy points for me. They're doing that. It's here. Just the word Merryweather that will be our one occasion T one size, too. Eating points can be done that no one price. $9 right? Let's highlight this. Angie's rectified points That's backspace and cities facing. Make sure they are firm. Nicely done. Your move student moving. You using your keyboard arrows. Make sure you selected the move toe and all right, that's our first middle Knicks. That's a group This alright? It seems everything is okay. This duplicate and then drugs the right to make a duplicate. Always lucky when you are duplicating the image that I used here. All right, Spaghetti with a shrimp. Let's get that image image. Listen to this. Drop it to our maker unless mean canvas in this icy control deke, make sure it will show the transform tool and then recites it. Chief key. It's very important. Menace Eyes in your image shape and then lt toe clipping mask. Position it using your move Tool the short, cutie removed toe. Move! Move, too. Is that Ravi in your keyboard? 8. Menu 2: you see you next election to go to not feel and changing the color red. This will be the over state when one of your when your visitor go to your website and over the mouse this'll what it looked like. Let's change the title of this mineral toe shrimp, spaghetti control A to select one and then exchanged the fun style Bold. Then, of course, the quarter and pricing. $42. This will be the hover states, all right, And then let's put a pointer icon that I don't know did from flat this open toe predatory canvas. Let's move it on top off the image and zoom out to see our design. All right, but also the one on our header the homes home A link from navigation. All right, make sure you have a nice layers. You shouldn't have a very organized layer. When you're submitting your designed during playing, save it. Let's type Yami is spaghetti and just click this Okay, Always save your design will never know when you're when you're 40 Crash. So all these savior design When then let's continue. Let's make another cap off this one. The 1st 1 on its egg dispersed the sites. Let's remove the corner points. So said the base and using on, Derrick said. I controlled Click the Shape so the like, Hey, properties will be like and let's type 70 because we need 30 pixels on the Regis. But this this is the first step. Link all of them. Then let's type 30 pictures. So it it applies toe all the corners and the other one, but we're going to do it is through the layer person and click the shape. It's individual. We can link on the corners and individually, the 30 vixens like what I'm doing 1930 but much better if you know the 1st 1 All right, then let's see. It's close, this group now let's duplicate the 1st 1 key and then drug right and position it, for instance, the Gorn nurse again. Select the base layer, then get the direct selection toe, clipped the sheep and open your life properties a link so we can enter the values separately. Zero on the left side and the bottom 70 pixels zero and then on the upper right, 70 pixels. There's another way, toe. We're going to reverse it. Actually, it's another one on underway. Just control and then rightly and sleep. Vertical or horizontal? I see it's another way. Next, let's change the image that and Whitney right layers before you hit the on your keyboard. Next drug. This in drop to our canvas precisely holding our shift key and drag it okay, hit. Enter in your keyboard and I'll click between the layers to clipping mask and also the levels adjustment layer. All right, misjudged Evening spaghetti Bolognese and this change the price as well. What's the price? $49 and that's our first line off Minnow and then on your grades are going to duplicate this. So what we're going to do is be just changing the images. Today the's seem lattice and the median part exchange these red I'm on the field color, moving that and changed the white stroke but the right stroke and also the pointer. Let's change the Feinstein off the title toe regular, and of course, the caller changed and it's too light. So get the type total and by tapping the cooler that our word and peace all right, this hour middle section. But let's change the images off our menu on this on the left side and the right side. So said the right layer and deleted in cynic one and drug to our canvas on chief Geek and positioning and it enter and flip it kick and then click in the middle of the two layers. Now also this one that and get the best. The image that we need thinks one. Drop it to our canvas and cheeky enter and alky and then click to clip it on our base shape and see. That's our menu section. I hope you enjoy doing that and disclose these groups in the next video. Dodi Luck, boss. All right, See you next time. 9. Blog: in this video, we're going toe design the black section off our single beach website that zooming a little bit and waken see it better now. Create a new group and tight black books. Then it's hide this line of cream. We already have the guide, so it's good. Then, using the rectangle rectangle, make sure you're using your guide. Double that at the name, then the pattern of early. Be using this one. Now you can use anything one but something that very important here is the then moved. Okay, wait an experiment. Then let's see a shadow zero in distance in size nine. Let me see the original Wisconsin. He's our original and toe go to the that right on that layer control click and the CD shadow. It's 59 the nine pictures and with the other leg. Yeah, yes, I'm using on 90 degrees and 59. Okay, let's put that never designed in a shadow degrees and increase this picture name itself. You can play along with the capacity in this hour bathroom for our bread boost. And next we're going toe happy. The Titan click toe Duplicate the layers layer on. Now let's more get up our black. Both group. It's changing the golden backspace toe play the macron cooler and position it sent. Ever get the title This change the name, toe reason black posts and then nets move it up, using most the name the group name lampposts and then get the rectangle and clicking the canvas and like 170 pixels for with and also 176 s, right, it will be the base they re going toe our image. Make sure our rectangle is aligned. Our agreement. Next, let's drug image that really this one guitar canvas, precisely holding shift key and then get our basic position it and clip it on and flicked in the middle of the two layers. Next, that's type liteks. Let's get the layers tithe. Drop shadow is 27 pixels or size I want to apply and 17% for the capacity. Now let's apply. Don't be shape the stroke. Our big sense changed the colder toe. Thesis one are B B and shut up the stance zero 29 and click. OK, let's change the stroke Color toe T C C Fee Fi Fi. I think it's better and just entering your people and also the pattern. I think they've changed that. It's in this way. This one's, I think, the original one and next. See, that's putting It takes now in London for Please stop it, fun size doing my points and merry way they're going now let's type it, get the type tool. It's already applied, as you can see the Eckstein's in the Bronstein's Some ready Merryweather during the high points. Now let's type wonderful place. You can type anything here, do the thin species then I think, right now and and also de spaces waking up in the spaces here if you want. But it's not. I guess I involving it and using the keyboard arrow. Now let's get me like ones that we need social media accounts and these are the icons that I don't notice from. That ones are that ones that is really small, So let's make that bigger And now, like all and then you control your keyboard and precise them, and the pixels are now positioning and cilic one and more to the right. Then select on the icons the distribute horizontally centers, and it's changed the order off the cyclones that to show the style and other overly change the orderto not You're right. Maybe it's the 60 66 copy that, and nobody again in the layer it controls week and press enter in your keyboard. Do that again and it enter in your keyboard. And that's our social media icons. You can recite it if we think is quite big there. And this group that ontology rename it Tankan's and using your make sure they're in right position for our 16 points regular in very way. Appoint. Israeli bowlers have toe toe toe. Now, using your type Tony, make a paragraph takes my click and drag. Don't release your mouth. Let me read it the height and that's basically not and if so, that you can found in type. That's a moment. These I always did it. The few first lines off the and then it's got this. And there it's our dicks that looks find me on. Let's see, they are equal position. Rightly this hour background housing on the mayors and group because we're going to duplicate it century control and then hit the nine distribute centers and copy I didn't drag down. Now it's moving down again using keeping battle, doing the nice presentation, this image first and then next drugging thistle chickie and click it to that base ship off the image using your given battle on this. Edit the title Nice presentation so we can see the the alignment of our day. It's not actually equal on the top, so a remove some breezes so it didn't it didn't make it 19 and that's happy again. Is duplicate holding our key keyboard Natural. What's in Mark? Computer issues forgetting on this image on many and flip it How are beast, sheep and, of course, the Titan spaghetti. I am the dates trying toe. Thank you. Look at the there. A line on the top, All right. And this group, Can you see your moved? You can moan. You are both making spaces. I think there are three d green right now. So and that's it for this video. I hope you enjoy it. And in the next video we will do the about that section 10. About us: In this video, we will design the about US section. So let's see the airframe. It's an image and then takes on the right side, have been weak. That will be our about section. Create a new layer, I mean in your group and then click and then name it about us and they're using your number . And there and then find the black Post title drug it one holding key and then move the layer up about that group and then backs peace to apply the color off the foreground, then exchanged the name that I don't do about us, right and C bring back the rights of the groups and using your keyboard arrow up. Move it. Then let's make a box. It's type 100 70 pixels, and for the hype around eight pixels, this will be our base for our image. Let's put the ground. Let's make it rounded Dungan. So enter the to make it around in. Let's position our can get nicely Keyboard arrow, and then it's dragon in each and wrap it here and thanks to you, make sure it will be our ship and hit. Enter and clip it our beast and position nicely and then make a duplicate of our base. Get up and I'm of the cooler. And at the stroke, order off white pixels and control T and and then shift key, then drug inside. All right. Next we'll do the type a click and making cupcakes. Goto type in peace. Nor in Epsom. Let's remove the upper part of Epsom and don't know that starting picks changing the corner something gree. And let's divide this and it's divided, photographed into toe and making this capital letter m All right, and then it's got the sentence here. Make it period and then hit. Enter Control late to sell a call extension the night to 39 points. I will make this stores in both capital and make them video in Feinstein darker like okay and District Committee takes. And that's our text. Let's zoom out to see it clearly. Let's see if we can end it something here now that looks fine. Now let's grow the image in the base ship. I think the this shape the upper part and in the base in the media. That is the image group that on the group name about us and also the about us and they say our my frame in the next video, we'll do the location. I hope you enjoy this video on See you next time. 11. Location: Hello. In this video we'll do the location and on top in four section. So let's make a new group and then the name, location slash contact and next next, make a base ship. This will be the bishop for our Google map. I open the you come up here and we're goingto bring screen this. It brings screen Prince killing on your keyboard and this space it. So I know document here. It's fine here. So control V and then let's get your let's get the markets jitter marked, told and throw. Cut it out, using the most and get to our mean 10 of us quite small, But let's make it bigger control T and drag it. Hold the shift key to make a constraint the shape and then click in the middle toe, clipping the lower layer. Next nets, but some stands to it. Number plate. The dish base ship in a shadow zero in distance and size 29 pixels. Never done the capacity door 37 because is that 7%? All right, then a rectangle enter the of 600 pixels, and for the I, the one that 59 cents it's all right it's actually in the middle, so it's unclear on and then using the move, don't its position it nicely. Then they changed the caller toe. Right. Noble click this layer and Bleakney stroke option for a size 10 fixes and then lower down your capacity to make it transparent. 36% on size 16 exists. All right, it looks good. And then let's get this home icon. Put these. Put the address here. Yes, I see toe one pixels both with a night there again to show the first time said a color overly just d read our main color. And now get the type and it's type our address. Make a paragraph, Tex. And there any address Put me Andres here. I just made up this address from the building Send Philippines And so the Philippine and although I don't know wasn't home at this just made it. All right then. First the home icon using the keyboard battle in the address and next me contact phone number Make it smarter. Explain this drug aligning our home icon still beaks on making smarter publicly the layer and our men color Just copy this key and then dragged down and Theis address. Enter value planting, then hit. Enter in your number G not your main. Enter in your favor. Okay? And then position it the icon. The next one's the maid. Make its mother big cells and hit Enter in your given the main enter are you can use the numbers. Enter what I'm using on the thing I changed the color toe friend and then copies duplicated on alki in your gibbon. And then that's type in full yummy spaghetti. Okay, and then let's see if they are select this layer. Let's see if we be lowered down the field capacity and it looks it's not good. So this pull it back again and this put me being being here, this one that you don't know that this well and hit enter your given I mean red. Okay, let's zoom out and see if our I promise. Okay, it's more a little bit to the right. You see people battle on and then it's cool stuff in your mouth again. Next safety. First, make sure you always save your design, your project all right, and then this. Let's arrange the layers properly. Now let's find the layers that are related and group there this contact info and that's separately being like this. Put it down and then click, kiss and hold ship and click on the upper layer and control G cycle. And it's no in one group. Let's move it side. I'm eyeballing it, all right? And that looks fine. In the next video, we'll do the general section of our design. I hope you enjoy this video and see you next time. 12. Gallery: Let's continue designing our single page inside and now gunnery section of our design, creating new group and name it gallery. Make sure you turned on the guides and its drug making, duplicate our fighting our country groups and changed the title capsule and there in your number and next. This name it first, and the next thing we need to do is tow. Create a base ship for our images. Rectangle with 320 pixels and for height, 320 pixels as well. Get the most, and it's position it close to the edge of our canvas. Let's more video a little bit using your keyboard, arrow up or much matter it be. Put a guideline up in your in your gate and enter for 973 Click OK, and what's he showing it when done, that's hoping any new image and clip it to our canvas. I mean to our make sure you over the square rectangle and in the middle of two players on the monkey on next Group E because we're going to duplicate it, alky again and drug for the right now. Next position it. Make sure that there's no space is changing the image and hop in this canvas the same process for all the the meaning. Even just here on our gallery, I duplicated the two groups. So is easy. Then control. Click in that layer in the images so it directly select the images again, our base shape. And this will be the over area off our gallery in case we put our point there. Here is a lot like and never done Your pathetic to 77% are even 72 get your pointer icon and put it over on our Dungan, and it's like my name here. Change the corner toe wife having type Lauren Gibson and fun swinging all right. And for the next Nets stream of deep images just like that. But before we move on that arranging the position of this not get up and let's get an image holding your ships keep string the sheep and right isn't obligated again. Let's make sure there's no spaces, and this is our final image image for our gallery. It's basically pretty simple and easy to do close the groups, so we have a nice and organized layers. This will be the rotating gallery So let's put the bottoms But some buttons here. 22 pixels for width and height of our but on Syrians Just a great corner and identified 85 85 for the Exco and obligated both and in drug Joseph One Circle and changed the bowler. And surely is basing are equal and center them right buttons and that's it for our gallery sexual this design and I hope you learned something that's finishing design next video. 13. Footer: in this video and finish our single red beach website in and every POTUS shop and we do the foot section of our design. It's making your group and name it footer and get down and select our rectangle. It will be our base, our voter background off our porter Exchange the corner toe. Next, That's Heidi wear prints. We're going to copy our logo from the header. So go find it. Control J. To duplicate to make a copy and then drag it to our Porter group. And now, meaning my C. I mean, zoom out our canvas and drug down our logo. It looks small, so let's make it bigger control to show the transform, tune and hold shifty dragging this corner and the most. If you're satisfied with sighs in it, end up there all right, and next put a newsletter sign up. You sign up with the front off Merryweather regular and 25 points, and sure it. See, it's a four column from the left on a sex sign up to receive, and this comes from young spaghetti. One size is 18 points way with, and they get the rounded rectangle to draw at this port apart. Pixel C night are 41 Fixes night changed not pure white. Something like here. Ito, Ito and then make the round corners. Six Vixens major speak Since Majors Cornice, then Control J, the duplicate and precise control cable hit Enter Window. It's strange to call a tow with controlling backspace. There of the corners. Make it Seattle Big sense. Right now it looks good Next, and Terry or women never done the one size toe. 15 points changed the color toe. Something great. The one is way. Position it in the center that's even a little bit darker. 71 71 71 this Chick state submit me the fun size bigger 19 points according to, and this one is both in front style are. Maybe it's anybody right, 20 points for once one size, then make them equal. And let's see all of this newsletter Sign up and then move it up. Using a Gibbard at all. Make sure the move toward the selected when you use your cable data, then drops on the related layers, goingto duplicated this letter and then on your guys and complicated you keep on Drug way. Don't need here. The newsletter sign of title will remain, for course, and that's changed that toe. Connect with us $90. And next we'll be using the social media O'Quinn's that we don't know that up in the PSD file in Adobe Fort Shop. Drop it here went up to make a new tab off canvas or document, and now we're going toe select or the icons that winning. We need the square Cordant icons, So select Ni instagram, Google Glass, Facebook. Twitter said this Twitter, Facebook and RSS and drop it to our main canvas here and like this, make a line on vertical centers and one more to the right. And so I called the icons and the or distribute horizontal centers more get up and this group and name it social, media or social. And also this group. Name it social media. And finally, inside the Capitol here, Sierra one in 69 to make the capital right icon in your keyboard. And then you see 169 to get that capital. Then yummy spaghetti 2015 on right, I said, looking good and dis checked to apply to commit the text. All right, that's our quarter Arrange security. Spacing are equal and out to sea Our footer, dusty groups on and see. All right. Next, let's save our design. Control s in your neighborhood. It s That's the market and your keyboard. Hide those planets upset. Get back that. Let's look, Pelosi, if we miss something here and so we can see the base my father and saying price each in my cable, Get the handle like most of us, it seems good. All right, and then begin. And if you want toe, save it as being are being goto fighting and save forward you just PNG eat for energy drink or use the n g eight And it's safe removing that BNG and hit hanker making. But And this hour single beach website designed in Adobe 40 shop I hope you enjoy it and give any comments are feedback about this video and see you next time. Good enough one defining