Creative SVG Backgrounds for Modern Web Design

hey everyone Gary Simon of course Seto and today I wanted to do a tutorial on is VG's and using them as both background images and also not in order to create the sort of eye it's kind of trendy I've been seeing in a lot in 2018 this type of landing page as you can see here on my monitor eye where basically you have different cutouts in the SVG itself and I'm gonna show you exactly how to do that using a adobe illustrator CC though you don't have to use it you can use any vector application and then I'm also gonna show you how to actually make it a reality in the browser with HTML and CSS alright so before we get started make sure you check out corset row comm and subscribe here alright let's get started alright so to get started I'm using adobe illustrator for this though you can use any other vector drawing application that has a pen tool that allows you to use Bezier curves all right so if you don't have illustrator don't let this to you know detract from the experience of watching this tutorial so I'm gonna come up here to the let's see here we'll go to web and we will just leave this preset on so I'm gonna hit create alright so now we have all these windows up here let's get this zoomed up so we can see the whole thing alright so we'll say this just as the the above-the-fold portion of a web layout and by the way what I'm doing here this could also work with you know something that's for mobile or for apps or whatever - alright so what I want to do is I will just start off with the pen tool in and of itself and I'm gonna start up here up top by just putting an anchor point around upper left corner you have your guides that will help you naturally here in most applications and it's somewhere probably around the middle doesn't have to be the exact middle but I guess I'll we have the guide there might as well just left-click and so here's our second Anchor Point we have one two and then now this section will cut it out from the SVG so that it's pure white and that way the navigation can go here alright so I'm just gonna come down a little bit I'm going to hold shift and just to drag out to create a Bezier curve and then just end it right around I'd say right around there I'm just eyeballing it really and this is one of these common trends I'm starting to see more of like some type of unique cut out where there's a navigation here so I'm going to just come all the way around and then there we go it's holding shift just create perfectly correct angles and lines there so now with this selected we don't want to you know and a stroke so I'm going to hit zero all right sweet now the fill don't want white and I'd rather have a gradient so if I click on the gradient over here and click it with the gradient tool over here I'm just gonna choose Leonard linear hit G and then just drag kind of like a diagonal alright and again there's no right or wrong and this is just the approach I'm taking so for the first color switch to RGB here I don't know maybe I'll have something like a a blue I didn't have one like really specific in mind something like right around there will be good so that color code is to a a 9ff right there alright hit enter we'll take this second color picker and we'll go back to our G B this one will just have well kind of come over here to the green section actually like that right there so that's three fffe see I believe it's kind of small on my monitor I'm at a 4k resolution though I'm just in this container of 1920 alright so that's good right there you can of course have more colors if you wish you can use a radial gradient or whatever but um I'm happy with this right here it's pretty subtle but it does have nice color so now we could just call it quits and that's it you could have a logo over here you have your navigation over here and that's that but we can add even more we can do you know here in Adobe Illustrator at least and I know other vector applications have it just the ability to cut out easily from this shape to just to create more you interesting a more interesting background here so I think I'll do that and one thing that you can do I mean once you start to understand the vector tools and all of the different things you can do you can just have fun with it so I'm gonna take the ellipse tool alright just drag out something around that size for now control C control F to duplicate alright notice I kind of put it directly in the center over here holding shift waiting for those guidelines to show up control C control F control C control F maybe one more time so I have like five of them alright now we're gonna take all of them and we're gonna go to window and then Pathfinder it's showing up on my other screen and we're just going to unite them and since that has happened oops I think I also had the background there you go now we want to unite them now we have the single shape right here what I want to do is you know we could leave it like this that's fine but I want to kind of smooth these out these these edges right there so to do that we can use the small smooth tool and that's right here so I'm just going to go over this area I'm just gonna left click and that notice now it's just smooth those out ever so slightly you can do it several times and it'll make it even smoother I think I'm happy with that we only did it to the top portion bottom portion isn't going to be used and what I mean using this for by the way it's make it white I'm gonna cut it out of this section down here I'm gonna make this really large one holding shift and I want to get this into place all right something right around there you take both of these paths selected and then just minus front all right so now we just have something it's a little bit different instead of just a straight line to separate whatever contents beneath this this hero section now it's you know something just unique I'm not sure necessarily if I even like it but this is just for demonstration so at this point we could call it quits but there's one more thing I want to do you can also I also another thing I'm starting to notice is I as a common trend is having other kind of SVG overlays of different geometric shapes and so I'll do two of those common just say a common element lips just get this here in the center and maybe we'll just have this half so I'll take the direct selection tool up there just like the left anchor point and delete it and then also to make it stand out in different color we can just take this here and we're going to modify this gradient for it right here so first I'm going to take this color right here and we're going to make the opacity zero and then we'll take this and we'll just kind of make it more on the pinkish side all right so it's kind of subtle and that's that's the look I'm going for so that's the first one we could do other unique stuff we could take the polygon tool all right and then so we have like a 1 2 3 4 5 6 a hexagon and I we have these you can barely see them these little corner radiuses pull these in something interesting like that all right let's go put this up over here and then delete the right side of this and then move it over alright I know it looks kind of crappy right now but once we get the type on and a navigation and kind of like a centered sub like a headline in sub headline it starts to look pretty decent alright so these are the three shapes that we're going to use for this sort of colorful landing page and so real quickly I'm just going to take these and where's my layers at and we can click this I collect for export alright so we could do that for each one of these let's see here here and here probably could have selected all three and just clicked it once what am i doing oh I had all three selected apparently let's back up I just want this layers oh we need to select it actually right here there we go so now let's see if I could select all three this is like one of the first times I'm using this option there we go now they're all there and we have them named this one's going to be this is going to be on the right I'm just going to call this the right side this is the right here this is on the left and then asset 4 is just a BG for background alright so now we want this to be of a type SVG and I have a new folder for the project for the web project and my code folder this is where I store my project sacks I just call this SVG BG's but design whatever name in what you want and then also an empty images folder that's where we're gonna put those so select folder and now it's exported them awesome so now we can go ahead and get started on the coding portion so to do that I have that folder opened up with the images we need to create an index.html file I'm gonna put hold oh by the way I'm using Visual Studio code this is free and it gives you some handy snippets I'm gonna put an exclamation point hit enter to get just our basic boilerplate down control B right here will hide the sidebar all right so just call this SVG BG's and then we'll get a reference to a CSS file so link rel equals stylesheet and then a href is sports / CSS folder doesn't exist yet this will be main CSS all right let's just knock out the HTML real quick so um and there's not gonna be much so the very first two elements I want a place here so if you think about this in terms of I you know eight HTML in terms of what's comes first first we have the body tag this will contain the BG SVG as the background and then on top of that next comes the two left in right images so that's that would be this one and this one and we'll use position:absolute for that so we'll have image source equals forward slash images left is VG we'll give it an ID of Left will replicate this ctrl shift down arrow key this will be right and we'll call this right as well all right then next after that we have a nav I'm just going to put the logo inside of it it's going nowhere the ID is logo and we'll just say awesome company after that an unordered list for the list navigation so we'll have list item a link going nowhere about us and then we'll hit shift alt down arrow key just three times and then I'll put in services and contact something very simple alright then after that we only have a div class of container and we'll put in an h1 element with my snazzy headline and then ap paragraph I'm just going to type in lorem hit enter I don't think I wanted to be quite this much text so I'm gonna just get rid of over here alright there we go that's it for the HTML very very simple so next let's go ahead and create that folder so control B we're gonna create the CSS folder inside of it a file called main CSS alright so to get started let's control B again we'll have our body and our HTML element and we'll just say height a hundred percent margin zero to get rid of default margins the color of the text elements will be white for our headline sub-headline then font family I have I Mont Surat installed on my PC but if you don't it's a Google web font you can just use the link code above from paste in main CSS at the top use whatever font you want of course reference the anchors here so color will say is white as well text-decoration:none we don't want an underline and then referencing the body specifically will give our background alright so URL is going to be pointing down out of folder to images and then to PG SVG and no-repeat and then also we're gonna have the background size is cover height oh I already have height hundred percent and then padding-bottom I'm gonna give a lot just to simulate you know what it looks like beneath so we can see those eye those little things there's a little ocean wave thing that we did so left position will say is absolute and then top so from the top of the browser will push it down by 60% at this point let's check to see just what it looks like it's gonna look like crap but see what it looks like in the browser I'm gonna go to view integrated terminal and I have I'm just gonna put HTTP server here now this is an NPM package if you don't have an install just type in NPM by the way you need nodejs and NPM as well before you can run that command but NPM I install HTTP - server - g4 global so that looks like for instance MPM i and then i is a shorthand for install it would be HTTP server - g you only have to run that once then you can just run HP server from anything and now it's going to give us a little quick server at localhost 808 oh oh and by the way when we exported it from Adobe when we specified the images folder it created an SVG folder itself which will break the links so if I reveal this in Explorer we just have to get into there and then put that into images itself and then delete the SVG folder so right now it's being used we'll just leave it there alright so now this is what we have going pretty ugly so don't worry we'll fix that momentarily alright so I'm coming back here to our main CSS file let's just take control B and now so what see we have our left now we need a right the position of course will be absolute as well and then if I could actually spell it or type it right and then this one we're going to have top by about 20 percent and then we're going to have right 0 that will push to the right of the browser and then z-index I'll put 1 and then after that we're gonna have a nav so the padding when you give it thick padding so 50 pixels by the way we're not going to make this responsive so just be wary if you wanted to make it responsive you know you're gonna need to use media queries to kind of reset things or change them a little bit so next we have our nav ul our unordered list list style type none we'll get rid of those bullets and then we're going to float it to the right of the browser next is our nav ul Li these will just display inline float:left or ya float:left oh and by the way you don't need to do that when we already have display inline kind of using the old-school stuff you can use the CSS grid now actually when just making it this fast uh we're gonna make them black padding will be 0 30 pixels from the right and left and then our logo we're gonna increase the size to 2 e/m let me just save this for now check out what we have so far in the browser mean let's see your CSS mean CSS by the way this is an ideal development environment I've normally would use something that would auto refresh I'll reload the browser and stuff upon file changes but I don't want to have all that setup for this tutorial so now we're actually getting there pretty quickly so let's keep on going it's actually not very much left I think just three more rule sets after this so we're gonna have our container will say text-align:center width is 60% and the margin will be 110 pixels from the top and bottom and auto will center it then we'll have our h1 element we're going to increase the size to 3.5 am and then our container paragraph will say font size increases well to 1.3 and then the line height will increased by 1.4 so now let's go back refresh there we go so I hopefully that was a pretty good primer just on using you know being very creative with your SVG graphics and using it you know to relatively quickly to create something that's pretty colorful and vibrant

Channel: DesignCourse

Views: 520,245

Keywords: svg, svg backgrounds, svg tutorial, svg background tutorial, svg in web design, svg web design, web design, web design svg, 2018, svg gradients, svg gradient, background svg

Id: OjIxscGV-Qg

Length: 19min 29sec (1169 seconds)

Published: Tue Apr 24 2018