How to Design a Website in GIMP

[Music] hello and welcome to yet another tutorial by a Davies media design my name is Michael Davies and today I'm gonna be showing you how to design this website you see here now keep in mind this is a front-end website designs meaning that there's no code involved here this is just the design that the user sees and then it's a whole other subject to get into how to code this onto a website but for all you front end designers out there this is a perfect tutorial for you you don't have to buy Photoshop and if i zoom in here you can see what this website would look like to somebody who landed on the page so this is the home page and then you've got the menu here the navigation you've got some social media here this is what's called the hero image and we've got some text here the title text with a button and as you scroll down you've got another paragraph here this has some dummy text in here and then keep scrolling down you've got the team with some photos here and another paragraph and then you've got the project section and then you've got the contact section here with a submission form and a submission button here and then of course social media and a copy right on the bottom but before I get into that of course I want to direct you guys over to my website Davies media design.com slash tutorials we've got plenty of video and text tutorials on here so definitely check that out you can also enroll in our udemy online course photo editing from beginner to pro photo retoucher and the images I'll be using in today's tutorial includes some icons here from icon finder these are free to download you just choose a size I recommend either a 48 by 48 or 32 by 32 and you hit download I use the PNG version so I did that for the Twitter icon and the Facebook icon and then of course pixabay is where I got a lot of my images as well and then I'm also using one of my own images so I'll include links to all the images I use in this tutorial in the description of the video all right so one other thing I want to know I'm gonna hit control shift T and that's going to show my guides and you'll see a ton of guides here and what these guides represent is what's called Twitter boots it's a twelve column web design framework it's a layout basically that almost every website uses at least a majority of the websites use and the twelve column system is showing you twelve columns here to put your design elements in and this is also for like dynamic websites it just tells you where the content is going to be and as you can see some of the content here is within those columns and we'll get a little bit more into that as I design but I've also got some guides here these are just to separate the various parts of the website so up here of course you've got the home navigation and then you've got another guy down here which indicates the end of the hero image and then this is the first column here and here's the second you can see the guide separating these items right here and then you've got the project section and then of course you've got your footer here and you can see there's a guide separating that footer from the project section above now you'll also notice that these guides for the grid kind of stop right here and then the site keeps going keep in mind that when you're designing a website screens come in all sizes so you've got tablets you've got mobile but then you've also got different screen sizes for desktop and some screens can go all the way up to 1920 if you're wanting to design for all screens definitely go all the way to 1920 wide but in this case we're gonna go to 1400 you can see the dimensions right here but Twitter bootstrap is gonna stop the grid system at what most desktop screens are gonna be able to handle you want everything inside these last guides here this is kind of like your safe zone and actually I'm just gonna move this real quick while I'm talking about this so it's best to keep all your items within this zone and everything that spills outside of it is sort of for the wider screens I'm going to show you how to design this fullscreen website here I'm gonna go ahead and get started with the clean slate and so this is the template I came up with you guys I'll put the link to this in my description so you guys can download it for free but basically this has the Twitter bootstrap grid setup also important to note I'm using Game two point nine point eight so this is designed for new eversion I'll also get a template out for the older versions you know two point eight point two two and that way you guys can open it into get no matter what you're using but just now I'm using two point nine point eight and so here you can see what the template looks like without any designs in it so here's our navigation here's our hero and so on and we'll go into it again just to save time but I'm gonna start here by going on my background layer and I'm gonna go ahead and grab my gradient tool and I'm going to change my colors I'll do like a grayish color and then I'll come over here and choose a black and I want this to be a little lighter so I'm gonna drag my V or my value slider to the right and I don't want it to be too light either and we can adjust this if you're using the newest version of I'll click OK we can adjust this after we draw it and I'm gonna change the shape to radial and I'm gonna keep the gradient where it is right now foreground the background and by the way this is your foreground and this is your background and so now what I'm gonna do is with my background layer selected I'm going to click and drag somewhere in the middle somewhere near the middle and just drag it to the bottom here and that's going to create a radial gradient with the center being right here and if you're using two point nine point eight you can click and drag this you can move the starting point of the gradient and you can flip the gradient to change you know reverse it or you can change the shape I like this how it is so I'm going to leave it how it is if you guys are using an older version of game people just have to redraw the gradient but I will go ahead and grab my move tool and that's going to solidify our gradient there next thing I want to do is open my image into that we're gonna be using for the hero image so go to file open and this will bring up the open image dialog box which allows us to search our computer for our files and so I'm going to go into my web design file folder here that I created before the tutorial when you click on an image it'll generate a preview here if it doesn't do it automatically you can just click right here and it'll generate it so this is the image I'm using for our hero image so I'll hit open and now we've got this background photo here so I'm going to bring it into our composition by going to edit copy and then come over here and go to edit paste and that's going to paste our photo into our composition or onto our canvas as a floating selection so I'll click on that and then click to create a new layer and you can name this hero image by double clicking the name there if you would like otherwise you can you can keep it as however you brought it in and it should snap there and if it doesn't you can go to view snap to guides and that should allow this photo to kind of snap either on the guides or at the top of your image and you can actually grab your zoom tool first hit Z on your keyboard or grab it from your tool options now after I've dragged this to the top I do want to scale this a little bit so I'll go ahead and grab my scale tool and click on that hero image layer and scale it down and by the wave right now you'll see there's a chain icon right here that's not locked and so I'll hit control Z you can either click and lock it or you can hold shift while you click and drag and that will lock that proportion right here so basically it just keeps the width and the height scaling in proportion with one another that way you don't have a wonky looking image and you can click on the center here these boxes and drag and that allows you to realign your image as you scale it because you'll notice that as I drag to scale this it kind of goes off-center and I'm letting this snap to this guide right here because this is my center guide and that looks pretty good to me so I'll go ahead and hit scale and that will scale our image down a little bit so that it fits a little better on the page and now what I'm going to do is go ahead and duplicate this hero image layer and I'll go ahead and drag that copy below the original and then I'm going to grab my rectangular select tool and go ahead and click and drag and draw this rectangle and I'm going outside the canvas you'll see because the selection is gonna stop at the edge of my canvas and then you can actually click and drag this down and then back up to make the snap to the guide so you know it's exactly where you want it and then what I'm gonna do is click on that hero image layer right click and go to add layer mask and then choose initialize layer mask to selection and click Add and you'll notice nothing really happens and that's because the layer below is the same exact photo but when I hide that copy layer you'll see that all this stuff has been cropped out here and so now I'm going to unhide this hero image and I'm gonna go ahead and click and drag this up to the very top and again you can go a little bit past the very top make sure I'm on this layer and then you can right click add layer mask initialize layer mask to selection again and click Add and I'll go to select none and now what I can do is click on my main layer here for the hero image copy layer and then you can turn that opacity down and that's going to help us create some separation between where we want our navigation to start and where we want our hero image to start so I'm just turning down the opacity slider of this layer here and by the way you can hit control shift T and I'll be doing that throughout the tutorial and that just hides those guides so that it's a little easier to work with but for now I'm gonna turn those back on so I'm gonna go ahead and grab my text tool here and I'm going to click near the center of our navigation here and I'll just type home and I'm actually gonna have my caps lock on here and I'm going to highlight this text and you can either use the textbox editor which is kind of hidden right now because it's cut off here or you can come over here and use it over here but I'm going to change the size of my font to 20 and I'm going to change the font itself to myriad Pro bold and so if you start to type the name of your font a list of fonts will pop up here and so there I can choose myriad Pro bold you notice that this font is looking a little grey well that's because it's great so I'll change the color right here to white and then just make sure that you drag this to the very top so that it's not hidden below the other layer and I'm going to go ahead and grab my zoom tool and just zoom in a little bit here so we can see this better and if you want you can drag a guide from the top and just put it wherever you're planning on allowing your navigation item to be so I'll put it right there and that way you can line up the rest of your menu items here with that first one so I'll type services and by the way the reason this keeps turning grey is because it's using my selected foreground color here which I'll change in a second but I'll just change this for now grab my move tool and make sure I'm clicked on the text here and just align that up here so now I'm going to come over here change this to white so that our next text that we create is white and not that grey color so I'll just type our team and you can type whatever menu items you want here and I'm just going to eyeball these to try to get these equidistant equally spaced and then so now I'll hit control shift T and I want to I'm just going to eyeball these and try to make sure that again they are equally spaced and actually look like they're pretty good so I'm just gonna leave that there and now we have our navigation menu so the next thing I'm gonna do is grab my text tool again I'll come over here and I'm going to type my title text and so I've clicked on my composition here and I've got my caps lock key on again so it's time to get creative and I just made this up for this tutorial so I'll go ahead and highlight my text here and come over here and change the size of my text make sure that's grammatically correct so you can do about 60 maybe a little larger I'll go to 62 grab your move tool and go ahead and control shift T I want these guides back here because I'm going to align this within the grid items here so you can see this is a grid item and it ends right here and then there's a space here and I've put this guide here to mark the spaces between each grid items so I'm just trying to keep everything within these grids here and so this one is going to be five columns wide basically so now I'll grab my text tool and go ahead and click and drag and that's going to create a fixed text box and then I'm going to go ahead and change the font size to 20 and I'm going to change the font to Arial because this is going to be paragraph text and you don't want the paragraph text usually to be the same font as your title text and now just for the sake of this tutorial I'm going to add some dummy text you guys can add your actual text if you have some but I'm going to just Google lorem ipsum text so here I am on the alarm if some dummy text generator so I'm just copying this paragraph here and come over here and paste it and I don't need all this so I'll just go ahead and delete the cutoff point where I don't need any more text and you might want to use dummy text if you are for example creating a website mock-up for a client so this might be actually a good tool for you guys to use if you don't already have text and I am gonna scoot this down I'll hold ctrl while I drag and that's going to ensure that it drags down in a straight line because I am going to actually add a subtitle here so I'll grab my text tool again and click right here and I'll type work with our design team and then I'm gonna highlight this text because I do want to change the font and there's a font called Lobster and I'm gonna use that and as you can see it applies that new font here and I'll just grab the move tool and just make sure that these items are pretty much aligned and that looks good the next thing I want to do is add a button and so you can draw a button pretty easily in just go ahead and grab your rectangle tool if you want you can add rounded corners by checking the rounded corners box and you can increase how rounded those corners are I'll just stick with five and go ahead and click and drag until you get the size button you want go ahead and drag this down a little bit and then grab your bucket fill tool and I'm gonna go ahead and create a new layer and I'll just name this button and by the way you can add a color tag if you're using a newer version of so click OK and then we've got our bucket fill tool here so we'll change the foreground color to the color we want our bucket to be I'm gonna use this blue that I use for my company you can copy that HTML notation if you want to use the same blue and I'll click OK and then I'll go ahead and make sure I'm on my button layer still and fill that in and you can go to select none and then you can go ahead and grab some text and I'm gonna change this font to myriad Pro again myriad Pro bold keep the size of 20 and then whatever you want your button text to be and I just type to learn more you can't see because it's the same color as the background right now so I click to change the background color clicked right here I'll try over here and this is a newer version of it is the development version so they are working out bugs and I just had a bug there but anyway you can adjust the spacing here this is the text spacing or it is over here as well in the text edit box and I'll grab my move tool once I have this space the way I want control shift T to hide those guides and then I'm just using move tool to eyeball this so that it's even and then I am once I click on it with the move tool I can then use the arrows to adjust where this is located and now we have our button so there's actually two options here with the button because there are two elements to a button and we're gonna need to duplicate this throughout the tutorial you can add it to a layer group which makes it a little bit more organized but it's not super easy to move around still or you can right click and just go to merge down if the learn more text is directly above the button text and that'll merge the two layers into one and only do that if you know that this is what you want your final button to be otherwise you do have to start over I'm just going to keep this as it is on its own layer and then I'm clicking on it with the move tool and just adjusting it so I get a position properly and then once you've done that to keep the file size down just go to layer crop to content and that's going to bring the file size of this layer from the entire size of our composition down to the size of our button and it's gonna save a ton of room alright so moving on we're going to scroll down a little bit here I'll grab my zoom tool and actually zoom out I'm holding ctrl to zoom out and you can see this is already starting to look like a website so definitely good so we'll hit control shift T to bring back our guides and we're gonna come down here and so now I've got my column right here my first column and so I'm going to grab my rectangle tool and uncheck the rounded corners because we don't need that anymore and then I'm gonna click and just drag so that this is aligned with that bottom grid there and I'm just dragging these so that they snap to the grids as well so I'm gonna go ahead and create a new layer and name this column one rectangle make sure your caps-lock is off and again you can assign this a color tag click OK and by the way the color tag disappeared on the button here when we merge the layers but you can click this and then right-click on it and go to color tag and reassigned and if you wanted to get really organized you can assign the same color tag to all of your elements in your hero right here your hero section but for times sake I'm going to skip that so I'm going to come back here to my column one rectangle grab my bucket fill tool and change the foreground color to white and go ahead and fill this in then I'll go to select none and now we've got a nice white background here for our first column then I'll grab my text tool and I'm going to click somewhere near the center here and I've got my caps lock key on and I'll type modern design for the modern business and this is white so you can't see it right now I'll go ahead and highlight all that text change this to 40 and you can hit enter and then I'm going to change the color to black hit OK and then I want this to be centered so I'll grab my alignment tool click on that text and then click a line relative to first item you may need to change this to relative to image so that's now centerline so we can grab the move tool and move this up a little bit and hold ctrl while while we do that so that we drag it in a straight line and then I'm going to grab my text tool again change the size here to 18 and then change the font to Arial I'm going to turn my caps lock off and then I'm going to click and drag to create a text box but you'll notice that I'm basically clicking to the end of where this column is right here so this is the first column and then I'm dragging to the end of my last column here and I'm just doing that to ensure that we don't go outside the basically the safe area and that way your text won't get cut off on other screens I'm gonna come back to my lorem ipsum text copy that come over here and paste it and it is white so I have to change the color here to black and then I'm going to change the justify to Center and that's going to Center line my text want to make sure that the spacing here is set to zero so I'm just highlighting my text again and decreasing the spacing and I could probably increase the size here to 20 and actually their spacing here to them in a race so I just clicked on the text and I'm just deleting the line spacing here and then I'll just grab my alignment tool and realign this alright so the last part here is we're going to duplicate this button so I'll click on the button and hit the duplicate layer icon so now this is called button copy and I'm gonna grab my move tool you can grab it up here or hit M on your keyboard and just click and drag that into this section and again this is the center guide you can't see it now because it's too low right here in the layer of stacking order so I'm just going to drag that to the very top as long as it's above this column you should be able to see it and now I'm going to adjust my paragraph text and my title text so that everything is spaced out how I want on this column and I'm just eyeballing this right now so it might not be perfectly centered but that looks pretty good to me so now we've got our first column here completed and you can hit control shift T if you want to preview this without all the guides and you can see how this is starting to shape up so we'll go ahead and scroll down and head over to our next section which I'm calling column 2 and should be calling it row 2 these are rows so this is the first row the hero image and so this is actually the first row not the first column so I'll actually change this to row 1 I should be using the correct terminology here and then I'll come down here this is what we'll call Row 2 and we'll go ahead and add some more text in here and keep in mind I'm gonna have two different columns in this row and so each column is going to be 6 grid spaces wide and in coding you would call that like a call Co lmd 6 that means there's six of these but we're not doing any coding again so but just keep in mind that we're basically using 6 of these spaces and that's basically going to take up half of the size of the website because remember this is 12 columns wide so I'll grab my text tool again and I'm going to keep the font to myriad Pro bold and I am going to keep the color at white but I'm going to change the justification here so that it's right aligned and then I'm gonna click on the composition here caps lock is on get the best performance for the best price and I just made that up go ahead and grab my move tool and so if you count with me you got one two three four five this is the six one so right now this is going a little bit too far over so I'm just going to bring this back a little bit and I don't want this right on the edge because it's going to crowd the next column here so I do have this a little bit back from the right edge of this column here and I am still making sure that it doesn't come too far over here because I don't want to coming outside of this area so now what I'm going to do is grab my text tool again and go ahead and click and drag to create another text box and keep in mind that there's going to be a button below this so we don't want the text box to take up too much space but I'll grab my lip some text again ctrl C come back over here make sure that I've got the right font and we'll change this to Arial and make sure yes it's set to white so I'll hit control V to paste that text and if you want you can hit enter here to create a second paragraph and that looks good and then what I'm going to do is duplicate this button again and by the way you can change this for instance to say button row one and that way you know which sections these buttons belong to or button here oh and we can keep it all caps and this is also where the color tags help out as well and since this button is with Row one I'm actually going to right click and change the color tag to green so that we know that these are part of the same row and then I'm going to click and drag that title we just created to the very top and also the lorem ipsum text to the very top so that we also know that these are with the second column and then I'm going to just real quick right click on this and change the color tag to green because this is in column row 1 I should say and then right-click and change the color tag of this to green as well because this is also in the first row now that being said I'm going to go ahead and duplicate this button and then I'll change the name to button row 2 and move that to the very top and this has a green color tag I'm just going to right click and change this to a yellow color color tag and I'll do the same for these because these elements are all in the same row but now I can make sure I'm clicked on my button row to layer grab my move tool and go ahead and move this button so that it aligns with these paragraphs right here in this title and again you can use your arrows on your keyboard to further adjust the position alright so the next thing I'm going to do is work on my second column here for Row two and so I'm going to come up here to my text my title text and we can duplicate that and then we're going to click and drag and hold ctrl while we do it to make sure it stays in the same spot and we'll go ahead and release that there and then we're going to go ahead and change the name of this to meet our team and so I'll grab my move tool and I do have to Center this now so I'm going to basically I'm going to skip this grade so I'm going to leave this grid item here empty this created column and I'm just going to rely on these five right here which means that I want this to be in the center of these three and you'll see when I click on this that there's a plus sign in the middle of the textbox I'm gonna hold ctrl to make sure that this stays at the same height and then I'm just going to approximate where this is so that it's centered here and I'm going to use my arrows on my keyboard and you'll see that there's pretty much equal spacing between these guys right here and so this is pretty centered up and now the next thing I want to do is create some circles you'll remember from the original here I'll hit control shift T to hide those guides we've got team member photos here and then we've got links to BIOS so I'm gonna come back over here and I'm going to grab my ellipse select tool make sure the mode is set to replace the current selection and then I'm going to click to draw the ellipse but I'm going to hold ctrl and shift and that's going to allow me to draw this as a perfect circle while also drawing from the center so I'm gonna put this about right here and then I do actually want to shrink this down a little bit because it is a little bit too large and so I'm just holding shift while I drag this down to about there and then you can click in the middle to go ahead and move this again and I'll go ahead and put that right there so go ahead and create a new layer and I'll name this team member circle and assign a yellow color tag since we're still on the second row and I'll click okay and now I'll grab my bucket fill tool and go ahead and fill that in with white and go to select none now we've got our first circle here I'm gonna duplicate that twice and grab one of these I'll go ahead and grab my move tool click and drag and just hold ctrl while you drag and then I'll drag this down a little bit and go ahead and do the same thing with your other duplicated circle so I'm holding ctrl and I'm just eyeballing this and this is a good example of when you want to click on your layer and go to layer crop to content just to bring that down to size and I'll do that for the other two as well so clicking on the layer and going to layer crop crop to content and then that'll allow this to be a little bit smoother all right once you've got these in place the next thing I'm going to do is add my text so I'll go ahead and grab my text tool and we can change the font here to 20 and I'll change this to Arial and then go ahead and click and drag to create a text box and if you want to put just placeholders here for now you can type first name or you know first last position and then read full bio just as placeholder text I'm going to go ahead and select this and justify it to the left or you can type the actual names of people which I'm going to do these are fictitious names apart from my name of course but and I'll keep this the same but what I'm gonna do is go ahead and highlight this and make that text bold I like this and click here to make that text italic and then highlight this and you can click this icon here to underline it and that way it's like a link and then we can grab our move tool and go ahead and click and align this a little better you can even bring it out a little bit if you'd like and I'm actually going to grab my zoom tool and just zoom in on this section real quick and then what I can do is go ahead and duplicate this twice and then just drag these down I'm holding ctrl while I drag them down and align these with the other circles here and I just eyeballed these you can spend a little bit more time aligning these but I'll go ahead and put my fictitious names here and fictitious positions and then just make sure these are styled so I'll highlight that and click bold I like this click italic same thing here and then of course you can come to each one of these layers and if you want to stay organized add a color tag alright so the next thing I do is come over here and try to find that first circle I created so right here you can see by the yellow border that's surrounding here and then I'm going to bring in my first picture here so I'm gonna go to file open and just search for that photo so here's the first photo I'll go ahead and open it and then I can go to edit copy and then edit paste or ctrl V and that creates a floating selection layer and so that looks kind of weird so I'll go ahead and create a new layer there grab my scale tool and you can either click and drag this and just kind of eyeball it and I can go ahead and again grab the middle squares right here to reposition this or you can come up here and just type in the values that you want you know go ahead and click scale and they'll go ahead and right-click on this and go to alpha to selection and you can see that we've got a circular selection area here and then I'll come back up here to my bio photo layer here and right click on this and go to add layer mask and then under initialize layer mask to choose selection and click add and now that has gone ahead and cropped our image into a circle right here you go to select none and that will deselect that and I'll just repeat that step for these next two items here you so go ahead and grab my zoom tool hold ctrl and zoom out a little bit so I'll go to control shift T to get rid of the guides and as I scroll down you can start to see how our website is laid out and so now I'm going to work on the next section here and I'll hit control shift T again to bring that back and what I want to do now for this section is I want to create a project section and you'll see in the original here that I've got title here and then I've got four images and so the way I'm going to accomplish that I'll come back here to our composition we're working on I'm going to grab my rectangle select tool and draw a rectangle and now I want this to be a certain width and height that way I know what the dimensions are when I'm trying to create equal images because you'll remember that that was broken up into four equal images of equal sizes I should say and so over here you can see the size of your rectangle and right now it's set to 1145 by 296 to make this a little easier I'm going to highlight this and change it to 800 by 300 and then I'm going to click within that rectangle and just drag this until that Center that plus sign there snaps to the middle guide and then I'll drag it just a little bit down but not too far that way there's a little bit of room between this rectangle and the bottom of our third row and then there's also space at the top for our projects title so now what I want to do is create another layer so I'll come back up here click to create a new layer and I'll name this row through your rectangle and I'll assign a new color tag to this so I'll sign this an orange color tag and you'll notice here the photos I brought in don't have color tags so if you want you can go ahead and right-click on these and add the matching color tags but I'll come back up here to my Row 3 rectangle grab my bucket fill tool and fill this in with white and now we have a rectangle here and now what I'll do is come back to my rectangle select tool and click within that rectangle that we just drew but now I'm going to change the size here so I'll drag it down a little bit and you'll notice the numbers over there start to change what I want this to be is half of the width and half of the height so it'll be 400 by 150 and then you can hit enter and so now we have a 400 by 150 rectangle here so we'll come over here and create a new layer and we'll name this project rectangle 1 and we'll go ahead and assign it that orange color tag we're using for this third row here and click OK so I'll go ahead and grab my bucket fill tool here and I'm gonna change the color to something other than white it doesn't really matter what color this is because it's not going to show up in the final but I'm going to change this to like a light gray for now and click OK I'm going to go ahead and fill this in with that light gray make sure you're on your project rectangle layer when you do that and then what I'm going to do is actually grab a guide and bring it down and just level it with the top of that and you can grab your zoom tool real quick and go ahead and zoom in here grab your move tool and go ahead and align this with the top there and I'll grab my zoom tool again and hold ctrl to zoom back out and then I'm going to grab my rectangle select tool again and click within the middle of that rectangle we just drew and go ahead and move it to the right and you'll see it'll snap to the guides here so it'll kind of snap in place and it'll also stay on that guide we just drew and then go ahead and create a new layer and you can name this project rectangle too and then give it that orange color tag and click OK and grab your bucket fill tool and again fill that in with that gray color or whatever color you chose and then I'm going to grab my zoom tool and zoom in here and grab a guide and just align it with the bottom here and then hold ctrl and zoom out again grab my rectangle select tool and go ahead and move this over here and that should snap into place create a new layer and name this project rectangle 3 and click OK and I forgot to add the color tag there so I can right click and just change that to Orange grab my bucket fill tool and go ahead and fill that in with the grey and then we're gonna do that one more time grab the rectangle select tool click in the middle of that rectangle I'm going to come up here and create a new layer and name this project rectangle 4 and give it that orange color tag and click OK and then we'll go ahead and grab a bucket fill tool and fill that in with the grey we're going to select nine and now we've got four separate rectangles all the same height and width to display our projects and I'll show you how to do that in a second I'm gonna go ahead and grab my font tool again my text tool and I'm gonna go ahead and change the font here to myriad again myriad Pro bold and I'll change the font size to 40 and go ahead and actually change the color to white click OK and then I'll come over here and click on my composition and with all caps I'll just type projects and then you can grab your move tool and go ahead and snap the center of this text box to that Center guide there or you can also use your alignment tool here click on your text and just click to Center that all right so now what I'm going to do is start working on grabbing my project images and bringing them into so start by going to file open and I'm gonna go ahead and find the file I want to use I'm not going to upload these in any particular order because it doesn't really matter to me these are all placeholder images but I'm gonna go ahead and open this as my first image and then you can go to edit copy come over here edit paste and now this will be pasted as a floating selection layer go ahead and add that to its own layer a new layer and you can change the name of this to a shell name this image 1 and right click and give it that orange color tag and you can drag this to the very top if you want and I'm going to go ahead and grab my skin and click on this and keep in mind we want this wif to be a little bit over 400 because that's what our rectangle width is here and we want it to overlap just a little bit and you'll see why so change this to 405 so it's a little larger and then click scale grab my move tool and go ahead and move this sort aligns with that rectangle and you can come over here to that first rectangle right click and go to alpha to selection and this will show you the outline of what's going to be there so that looks good for me we do just want to make sure that this fits inside this right edge here it's a little close so I'm going to just click on that image and see if I can move this yep so we've moved that and so now what we're going to do is what we did before with the bio photo so I'll right-click on that image go to add layer mask and initialize layer mask to selection and click Add and then I'll go ahead and zoom out and now we've got our first image there now I'm going to select none and so now we're going to repeat that for these other three images you all right so grab my zoom tool and hold ctrl while i zoom out and now you can see we've got our projects here and it's definitely coming along nicely the last thing I do want to do for this project section is come back to our original row three rectangle and you can go to filters light and shadow and drop shadow and this is going to add a drop shadow around your rectangle here I'm going to change the color of my drop shadow to black and just increase the blur radius a little bit to about eleven and I can increase the opacity a little bit as well and click OK now I've got a drop shadow around our rectangle but that completes the third row here the projects row and you can hit control shift T again and just see how the progress of your website is coming along here and now what we're gonna do is the footer so hit control shift T again and zoom in here I don't want to zoom in too much actually I'm gonna go ahead and actually do want to apply color tag to this real quick so it matches I'm gonna go ahead and create a new layer and we'll name this footer and we can give this a brown color tag click OK and now what I want to do is grab my rectangle select tool and draw the rectangle like so so it's gonna cover this entire bottom area here you'll notice that I went a little bit outside the boundaries here and that's alright and then I snapped this to that top grid there and I'm gonna grab my move tool and actually get rid of these guides because we don't need these anymore these were for the projects rectangle but I'll go ahead now that I have this rectangle created click on my footer layer grab the bucket fill tool and change my color to black and go ahead and fill that in and this can be whatever color you want your footer to be and then I'll grab my zoom tool and zoom in so in the original I did have a little triangle here but it looks like I didn't leave a ton of room in the new project I did but you can go ahead grab your move tool and just move all these elements up if you do want to do that triangle like I did in the original but for now I'm just gonna make this triangle a little smaller than what I originally did and so all I did for that triangle was I grabbed my free select tool and I went ahead and clicked on this left guide here and then I clicked on the middle guide and then on this right guide and then connected these guides like so grab your bucket fill tool and go ahead and fill that triangle in there and then 9 and now you've got a triangle you can hit control shift T and that still looks pretty cool even though it's not as big as the triangle I did originally like ctrl shift T again and by the way you can hit ctrl s while you work to save your progress and I'll grab my text tool again I'm gonna change my color to white change my font back to the lobster font and then change the size to 20 and click in the footer area I'll go ahead and add my footer text which just says get in touch and grab my move tool and make that plus sign snap there to that Center guide and then I will grab my rectangle select tool again and I do want the rounded corners again so I'll go ahead and check that and I'm gonna set this to white for now and I'm going to come over here and create a new layer and we'll name this contact forms and give it that brown color tag and click OK and by the way real quick I'll just right click on this go to color tag and make sure that's set to brown as well but I'm back on my contact forms layer and I still have my rectangle select tool and I'm going to draw my contact forms here and I want these to be three columns wide so go ahead and click somewhere here around the start of that third column and you can adjust the width here it can be whatever really you want it to be and that looks pretty good there so I'm gonna come over to that contacts forms layer and use my bucket fill tool and fill that in with white and then I'll grab my rectangle select tool again click in the middle and then click and drag this down and hold control and that way these are both the same size go ahead and fill that in again and then grab my rectangle select tool again and this time I'm going to draw basically from the start of this contact form in the bottom of this one and then I'm going to also make this three columns wide so it's the exact same width as the ones I drew before grab my bucket fill tool and fill that in and now we've got three contact forms here I'll go to select none you can play around with the opacity if you want these to be more of a gray color or you can keep them at white whatever you want to do and then I'm going to grab my text tool and go ahead and click in here and I've got my caps on and I just set this to say name and you can change the font here I'll do Arial and change the color to black and then grab my move tool and align this like so and then you can either duplicate this or just create a new text layer using the text tool I'm just duplicating this and I'll click and hold ctrl while I drag this down and then I'll change grab my text tool change this to say email and then I'll duplicate it one more time and grab my move tool move this over here to my larger text box here and then I'll just change this to say message and real quick I'm going to add my color tags to this again so that these all match and so the next I'm going to do is create my submit button here and instead of just duplicating the buttons I've been duplicating this entire tutorial I'm going to create a button from scratch because it's gonna be a little different this time but I'm going to grab my select tool here and go ahead and click and drag I want this to be two columns wide so I'm clicking at the start of this guide here and over to the end of this guide here and that way it's two columns wide and what I'm gonna do is draw a stroke around the outline of this rectangle and so I want the foreground color of this to be whatever I want the foreground color of my stroke to be or they sorry the color of my stroke and so I'm also going to come over here and create a new layer and name this submit button I'll give it a brown color tag and then I'm going to come to select selection editor and that will open the selection editor in a tab over here and then I'm going to click paint along the selection outline and that's going to paint a stroke with our foreground color I'll make sure the line width is set to three you guys can set that to whatever you want and you can change the dash preset to line that I'll just draw a standard stroke line and then I'll go ahead and hit stroke and that'll draw a stroke outline around your rounded rectangle there and I'll go to select none and now I'll just grab my text tool change the font to myriad pro bold and come down here and in all caps I'll just type submit' and then we'll also highlight this and increase this to four or five grab my move tool and go ahead and Center this up and it's actually two too much line spacing for me I'll turn that down and then go ahead and recenter that all right and then real quick what I'm going to do is come to my contact forms layer and go ahead and change the crop to the crop to contents so it's not the size of the entire composition it's just the size of this area and I'll do the same with my footer so I'll click on that layer and then go to crop to content and then my submit button same thing layer crop to content and I just say that until I was done with those items that way if I need to make any more adjustments I don't have to redo that and the last thing I'm going to do text wise is grab my text tool and go ahead and click on here and I'm going to type the copyright with the business name the year and all that good stuff I'm gonna do this by using what's called Unicode text so I'll hit ctrl shift you and you'll see a little underlined you here and then I'll type 0 0 a 9 and hit enter and then I'll draw my copyright symbol and then I'll go ahead and type Davies media design and I'm actually going to change this font here to just another fine I'll just do Times New Roman for simplicity's sake and I'll actually add the date in here and then I just drew a straight line there and that's shift forward slash on your keyboard so I'll hit space shift forward slash to draw that straight line and then I just added tutorials here and I'm gonna highlight this I have line spacing here I'm just gonna reduce that and then grab my move tool and click on this and align that plus sign to the center guide and now that's centered at the bottom there now our website is pretty much completed I'll hit control shift T the only thing that's missing is the social media icon so I'll go ahead and go to file open and I will open this Facebook icon and then file open and also open the Twitter icon and so you can just go to edit copy and then ctrl V to paste this is a floating selection layer and I got to find where this was pasted so paste it down here at the bottom so go ahead and add this bottom one first control shift T to bring the guides back and you can just drag this guide down and align it with the fields here and just make sure this is within the area the safe area as I've been calling it and we'll do the same thing with the Twitter logo so edit copy ctrl V to paste and we'll go ahead and add this and I'll change this to Facebook and this to Twitter so it's easier to keep track of and grab that Twitter logo and bring it over a little bit so that it's next to the Facebook and we can go ahead and assign the brown color tags to all these real quick that way we know they are all within the footer and then you can go ahead and duplicate these and we're going to bring these up into the navigation area and so I'll go ahead and click and just drag these all the way up to the very top and I'll just stick with the Facebook one for times sake and you can name this Facebook nav and you can click and drag this so that it's with the rest of the navigation items that we created earlier and I don't think we added a color tag to those which is fine we'll just leave it as is for now so the next thing I want to do real quick is just add a drop shadow to this I'll go to layer layer to boundary size and I'll just increase this to about 55 and then click Center that'll Center our logo in that new layer size we're creating and you can see the boundary of this just grew a little bit and now what I'm going to do is come over to filters light and shadow drop shadow and I just turned down the blur radius to around two or so I changed the color to white and then I changed the opacity down to about 36% then click OK and that just allows the outer blur here to not get cut off by the layer size it might have still gotten cut off a little bit here but it's not as bad as it was you guys can go back and increase that layer size if you don't want it to get cut off there so hit control shift T and you can see that our website is now complete so I'll just scroll down here and now we've got a pretty good look at homepage and now what we can do is go to file export as and if you're using the newer version of there's a lot better Photoshop document integration with this version and so what that means is you can scroll down here to the select file type by extension and you can choose a Photoshop image and go ahead and export this and that will export your file so that it'll open up into Photoshop and I'll show you guys in a second I know I don't usually do Photoshop on here but I'll show you what it looks like in Photoshop and that way if you're working with somebody who's using Photoshop they can open this on there and you can also just save this as a PDF so you can go to file export as and choose Portable Document format for PDF or you can just save this as the native file type which is dot xcf and you can do that just by going to file save as and it'll automatically save it as an XC f file alright so here is our final file opened up in Photoshop I know I don't usually do Photoshop tutorials but I'm just demonstrating what this looks like here when you open it directly into Photoshop it's a Photoshop document this is exactly how we saved it in and as you can see over here it has all the layers it even has the color tags which is kind of cool but this is what somebody on the other end would see if you sent them the project you just created in a Photoshop document and they could then take this and develop a website out of it keep in mind though that the text layers on here aren't actually text and so that's the one downside if the person tries to grab their text tool and edit this text it's not going to do anything but if they don't need to edit the text or they just want to be able to open this up in Photoshop very useful that allows you to export it to Photoshop documents now and you can then open those documents up into Photoshop alright so that's it for this tutorial thanks for watching if you liked it please subscribe to our youtube channel at youtube.com slash Davies media design you can also visit our website at Davies media designed.com slash tutorials and of course I'll include all the links from this tutorial in the description including a link to our udemy online photo editing course so thanks for watching and we'll see you next time you

Channel: Davies Media Design

Views: 66,740

Keywords: gimp, gimp 2.9.8, gimp tutorial, gimp for beginners, how to gimp, gimp graphic design, gimp photo editing, gimp 2018, web design, website design, design a website, website tutorial, gimp website, gimp web design tutorial, home page design, landing page design, photoshop, twitter bootstrap, text tool, layers, gradient, blend tool, color tag, front-end designer, front-end website

Id: xKpjtYAVs0M

Length: 55min 28sec (3328 seconds)

Published: Tue Mar 06 2018