Design & Animate SVG Illustrations for Web Design

alright guys so here's a look at what we are going to do today if I hover over this SVG graphic this really cool sort of looping holographic logo cut out starts occurring all right so what's basically happening is or what's going to happen in this tutorial I'm gonna show you exactly how to create this and by the way it's isometric for added bonus this isometric illustration in Illustrator and then we're gonna export the SVG code paste it into an HTML document and then use CSS to create this animation that's occurring right here alright and it's based on user interaction such as a hover and also it looks really interesting it's a see-through and transparent in a sense because we're adding a blend mode to it to make it look really cool alright so there's a lot packed into this tutorial hopefully you enjoy it today's question is how do you charge clients if you're working on a project per hour or per project and this is assuming of course you're a freelancer of some sort alright so go ahead and state what you personally prefer to do in the comments along with an explanation alright so before we begin make sure you subscribe here the channel has been exploding lately making me really happy and I've increased my content production so let's keep it up and let's get started alright guys so we're gonna get started here in adobe illustrator i would say that you can use any other vector application but we are going to be using a specific feature here in illustrator that may not be available in other vector apps and that's going to be 3d extrude so just keep that in mind so I'm just gonna leave it at a thousand by 700 we'll be changing this manually later alright so so just to give a little bit of context here again this is for a fictional VPN service or virtual private network service and basically that's just I did a real quick mock-up here of just kind of like a fictional landing page and it's VPN services you know there's something to keep you anonymous online you know that's what I came up with and so the idea is to have some type of you know illustration right here in this section alright so I've done is just taking this background color and you'll see what that is momentarily I'm just going to put it in a rectangle for the background and then we'll go ahead and change that fill here to the color code is - 8 - 8 - see if you want to follow along we're actually not going to be using this or including it in SVG because we want it to be transparent but still I want to see what you know roughly what the background is going to be while we do this illustration okay let me get rid of the stroke real quick here alright sweet and let's go ahead and open up the layers and we'll make this path something we can't select okay so just a few days ago or last week I did an isometric tutorial here using Adobe Illustrator and this is going to be isometric however we're not going to use that grid in that process of creating a grid to do it we're gonna use the 3d tools here in Illustrator so you'll see how that works momentarily there are some advantages and disadvantages to it and I'll describe those as we go along so my idea going back here to this where is it there it is for this landing page in the service and in order to give it context you know you want your illustration or whatever you have here especially it's gonna be on this side or whatever it's it's an illustration it's a focal point they're gonna see it you want it to have context and relevancy in terms of you know whatever the service is about in this case it's an on it's being anonymous usually it's when people are using a browser so I thought okay we can use a browser and we'll have a fictional logo of some sort that kind of I you know when it's hovered over I the logo kind of fills a gap in the browser so it's kind of like a it's it's just an interesting play on the concept of what this service provides all right so we're gonna start off by doing or creating rather a rounded rectangle for a browser all right so we'll choose the rounded rectangle tool here by left-clicking and dragging out and I'm just gonna something like that I'm just gonna eyeball it doesn't have to be exact all right and then so for the color I'm just going to use a lighter shade of blue so let's go ahead and go to fill and that's a little bit too saturated I think actually probably come over here choose one of these yeah still not good I think right around there might be pretty good okay so then what I also want to do is we'll have just um we'll fill it out and make it so it's more obvious that it's a browser with kind of like a couple buttons and a URL bar up here so to do that I'll just hit ctrl C ctrl F that'll copy what we currently have and right now I if you go to window and properties or it wait no sorry transform there it is if your if your strokes and effects was checked off then your scale coroner's rather was checked off then this it wouldn't have behaved the same but we can always just readjust them with these little icons here to it to adjust the the border radius all right so we want this to be a little bit smaller actually something yeah right around there looks good and so then we'll give it some eye color I think I'm just going to make it white and yeah I think I liked that I was going to bring the opacity but that's fine so control C control f all right and I'm just holding shift and dragging it out and now I'm letting go of everything all right so that right there is what we don't want we don't want to scale corners we want it to maintain the same corner so we're gonna check that off all right and it's something like that extremely simple so now at this point you know before we don't want to extrude it we want the whole thing to be designed and and how it's going to be in final form before we do this 3d isometric perspective on it so my idea is to have a cut out so we're gonna use the pathfinder right here you can go to window Pathfinder to find it and this allows you to do a bunch of different things which you'll see in a second so what we want to do is create that fictional logo of sorts I showed it to you briefly over here I'll recreate it though this little thing it's just I don't know some some random concept I came up with and we're gonna drag these up it'll have slight rounded corners like that yeah that's that's good and then um I'll go ahead and control C control F will make this one bigger something like that and then control so you can show off the original and just put it down here tada you have your logo not much thought into it actually you know what no no we'll leave it like that because I I was gonna do something too round awful I wonder what that would look like by the way I'm sorry I just have to do this if I take these all Mirjam and go to file scripts around any corner this little thing over here shows up preview oh that's kind of cool Oh anyhow I don't want to do that so I but by the way that scripts is there adobe illustrator CC scripts if you just type in in google you'll find this free free one that has all the ones that i just had all right so anyhow let's continue on now at this point we're just going to unite these so with all three of the shape selected they're now a single path and I'm going to just leave this here patrol C ctrl F and scale it up holding shift and then we want the rough size you know of where we want it to be placed I'll make this a little bit bigger yeah right around right around there is pretty good that's where the cutouts going to be so holding shift oh by the way is this okay good we just want this single path here and then this this path holding shift to select both and then just choose minus front because this is currently in front of that so it just cuts that out when that happens though it takes the new compound path that it created and puts it at the very top of the layer so just drag it back down and we have that there oh god no no I didn't realize that was kind of awesome Center there we go do that again drag it back down damn it you all right cool alright so this is the final I shape I guess you could say I'm gonna back up one more time I'm sorry I'm gonna create a copy of that we control C control F and they just hide the top one and then do this again because I wanted to create a copy of exactly where it's at right here yeah this thing right there that way we have the same exact size that's important for this process as you will find out here shortly so now we have these two different things going on here let's say let's go ahead and we'll group these together so those these paths up here will be grouped and then let's go ahead and go to effect 3d extrude and bevel alright now this is the fun stuff so I hit preview it's just gonna give us some type of ox ass rock surface off axis position but if you come down here you'll see we have isometric left right top and bottom so shoes left and there you go it's in perfect isometric perspective based on these angles that I have applied to it all right so the extrude depth that's quite thick I actually want something around seven uhm yeah maybe maybe nine all right that looks good to me um actually no it doesn't twelve okay I like that and then if you want to adjust the color it became quite dark dark and that's because of the lighting and you can experiment with some of these other options on your own but if hit more options you have the Lightning section so if you take this little square slash circle thing and just drag it over there there you go I think that looks much better so once you're happy with it and you can experiment with all this different stuff if you want on your own we'll go ahead and hit okay now we're gonna do the same thing for this logo so we're gonna go to effect and then just apply it and there you go it's ready to go and you'll see it will fit exactly in there that's why I backed up and created that copy as you can notice though when we hover over this we could see the path for some reason in the original path is showing up and that's because the 3d effect is still applied and we can go back and make modifications to it but we're gonna want to go ahead and kind of a just create well basically it's called expanding the appearance once we're happy with it that's what we want to do so we're gonna take both of these object expand appearance and there we go now you may be wondering yourself why not just do this from scratch every time instead of using that previous method from a week ago we were just kind of creating everything by ourselves without 3d tools well I when you have especially rounded corners like this let me I'm gonna get up here real quick real close rather you see we have all these paths that it creates and if we were using SVG which contains actual code that's a lot of code that you're dealing with here so what I want to do instead of leaving these here and you could I mean it's not like it's a massive file but it would be several kilobytes what we can do is take all this stuff like on this the edges here here and here and we're gonna simplify them by joining them so we will lose some of the color associated with it but that's fine we can still it'll still work and look well or look good all right so what we need to do first if we select this we can see everything is currently a part of a group we're gonna right click in ungroup okay we're gonna right-click an ungroup again so now we just have this space right here it's a group two but there's only a path in there and so what we want to do is I'm gonna go ahead and just lock this layer so we can't select it so this front face is now locked we're gonna take everything right here and then we're gonna go to unite alright so now it's much more simplified and trust me when I first did this for the preparation of this this tutorial that I'm doing I didn't do this process I left all that stuff in there and it was massive amount of SVG code to put in the index.html so that's why I'm doing this it's gonna simplify the code greatly it's gonna meet a lot less all right so it still looks good especially because we're gonna be applying a mix blend mode in CSS and so yeah let's go ahead and do the same process that we just did for the other stuff so one thing that's interesting is you can notice when I select this it also extruded you know each individual these two toolbar things up here which this is all code that would be baked into the SVG file that we don't need so I we have a little bit of work to do I'm just the same process I'm gonna right click on group on group okay so now what is this anyhow just kind of alright alright cool so now I can take this and we're going to lock that I may even hide it there we go so I'll take both of these because we want these we're gonna lock those as well all right so now we have almost everything that we're gonna want here so let's see here how can I select this easily can I do this I never use this tool before so yes I can so that way I if I we try to if I tried to use it with this simple square selection it's gonna select all this other stuff which I don't want so we're going to unite that all right great and all right so how can I separate these this is one big section actually right here you know let me see here see if I could select this all right will you use the magic wand tool but we can change the settings hopefully where are the settings at for this thing so we can we can control tool options where you at oh of course it can't be simple all right well what I can do is we'll find where these layers are at and I'm going to simply hide them just by selecting so for now I'll just group them what I need to do is create a selection out of just this stuff so that's why I'm kind of being concerned or not concerned but we'll group that we're going to group this let's here control G this is tedious and not like this but that's okay hide that as well but one more thing over here will hide that okay so now we can just take with our this selection tool here I'm just gonna drag it around this and it's not gonna select the white part just dye the blue part because this is these are locked and then just group those finally now I can hide this one and we can bring back the other stuff that we just did so bringing these all back alright great so now we can create a selection around all of these and then group those actually they don't even need group let's just delete the damn things there we go haha okay so I'm gonna unlock some of these and bring back yep everything that we need so now the code is greatly reduced we can still do a little bit of setup that's going to make our lives easier when it comes to the CSS process though so here we have all these paths right here to make your life a little bit easier you could rename each of these based on what is being selected but really we just want this one in its own group so select it all ctrl G and then we're gonna rename this group to browser all right then we're gonna take this and that's a path in a group we're gonna group it this is going to be logo alright so what's going to happen is when we export this or we grab the SVG code it's gonna have an ID attached to this groups from the SVG croud code one will be logo and the other one would be browser alright so let's get this into place roughly in terms of where we actually want it to begin and we'll say I guess we'll say like right around there will be pretty good like that's where it will begin all right and then we'll use the transition property with translate X & Y to push this into place and as well as other things so alright once you have that ready to go I we can go ahead make sure you save it on your desktop as an actual AI file somewhere and then we are going to let's I use our artboard tool down here and we're just gonna scale this in alright I'm just giving myself maybe like a pixel or two or three away from the edges what happened there we go something happened I think that the mouse let go or something alright and then we don't need this anymore this this rectangular rectangular background so I can just delete that all right and there we go so at this point let's go ahead and go to save as and we're gonna change this to SVG alright and then I'm just gonna name it browser now what's going to happen is we're not actually I'm not actually saving this as an SVG file you can if you wish what I really am interested in is just the SVG code alright so this is the SVG code of the entire thing a bunch of zeros and ones it looks like essentially but you can see our group of ID browser right there and then if we search far enough which I'm not sure if I can identify it yep GID GB the ID is logo right here all right so we're gonna copy all of that so ctrl C for those of you who don't know how to copy it and then we're gonna open or yeah I guess I'll do this where'd it go there it is let's go ahead and see decode this is where I store my my projects at and then I'll just go will make a directory called VPN SVG and then CD into VPN SVG code period to the launch Visual Studio code my code editor it's free very popular from Microsoft alright so let's go ahead the usual stuff if you've been following me an index.html I will do a main CSS will hit the exclamation point hit enter create some boilerplate type in link hit enter and main to CSS okay alright so now with that still copied we're going to go ahead and paste that sucker in control B to get rid of that sidebar so there we go it's it's still not too bad the style right here we're just gonna copy all of these it's not too bad but I don't want them in the HTML so I'm gonna really get that I'm gonna get rid of all that stuff we can get rid of this XML stuff up there and everything right now is wrapped in an SVG element within the body element so that's just something worth noting remembering here so we'll save this we'll go to main and then just paste all that stuff in like that alright so at this point if you right click open with live server this is what it looks like it's absolutely terrible because by default SVG scale-up so let's go ahead and start working on this and making it look like we want so the very first thing we're gonna do is reference our body and HTML let me scale this up one more time make sure you guys can see it height 100% and the reason we're doing height 100% when we're going to create a CSS grid out of this and if we want to Center I want to Center at least the the SVG graphic in the browser we need to set the height 200 percent margin zero and any padding zero all right and then we're gonna reference the body specifically all right so we're gonna put in a background and I will do two eight two AC a to C and that's that same color that we used as the background for the path in Photoshop Illustrator rather and then we'll put in a width of a hundred percent a display grid so the CSS grids new kid on block when it comes to layouts search my channel to learn more about it this is a grid template columns here property just I'm gonna put out Auto that's just that's the CSS grid stuff as well and then also let's go it well let's save it first and it's still gonna be large I think because we haven't yeah we haven't done anything to it so now let's reference our SVG specifically it's just make it a flat 300 static pixels aligned self Center and this is the grid stuff working here so we're saying align self and justify self to the center horizontally and vertically alright so I'm gonna put a margin left as well of 500 pixels there we go awesome at this point I remember that XD the idea was to have you know everything kind of I did the the illustration showing over here on the damn right side oh we can't talk I I'm not actually gonna do all the HTML for this so a real quick way of doing like a whole mock-up process is just to take everything in Adobe XD put it in a group and then export it as an SVG file alright so SVG and then you want to put that wherever will call this BG - wait no no this okay there we go select folder export group three already exists maybe I will provide this file for you yet although I don't understand why you would want it it's not really that pertinent to the tutorial on the topic of this tutorial now I'm going to open up my files here all right gonna go back here Patrol B and I'm just gonna drag that SVG it was created it's called group three it's it's massive this is just for the purpose of demonstrating this little technique though let's go ahead and rename this I'll just call it BG SVG we'll go back to our main CSS and we're going to reference that in our background property so right after here you don't have to do this by the way I'm just doing it just to give it some context alright no-repeat background position is top right so now hopefully there we go now it looks you know it's a very simple landing page you can it's it's all SVG you can't use the damn thing alright so now let's go ahead and work on this SVG so it's there's a bunch of things we need to do although most of our works almost done actually so what we're going to do is we're gonna make it so that when a user hovers over the SVG canvas not just a specific element like the browser in it but the whole thing we're gonna make that front logo animate all right so to do that let's go ahead and give yourself some space to do that it'll be SVG hover so reference our front wait is that what I called it no I didn't it's actually logo I believe ctrl F logo yep right here at the logo and by the way if you ever if you ever forget like what you name things are you trying to find a name or a way to access something in the website then if you go back to your site you're here real quick ctrl shift I you can just take this little button right here start hovering over elements and it'll tell you the name right here so if you click on it it'll show you where it's at so this path that's not it start hovering eventually you'll find what's responsible for whatever it is you want to adjust browser right there okay just a quick tip all right so now this logo what we're gonna say is we're gonna add different animation properties to it so we'll say animation I'm going to show you a shorthand method of this and then all first I'm going to show you each individual property so animation duration I will say 1.2 seconds will say animation name got to give it a name so it was called animate logo and then we'll say animation iteration count and we'll say infinite so we want this to loop forever for as long as the mouse is hovered over it will do animation direction and this will be alternate so that it will go back and forth automatically from between the from and 2 position I was just see in a second you know we're gonna add the mixed blend mode right here but not right now all right so right now won't animate because we haven't created we haven't find the key frames for animate logo so let's do that so at key frames will say animate logo and you can do multi-step animations with percentage based values but I only want to go from and two so it will just say from transform translate X 0 so we're basically saying start from all from the regular starting position all right so translate Y and that'll be 0 as well and we're also gonna make the opacity 0 so by default it'll be hittin they won't see that logo and that's just the choice I'm deciding to make you don't have to do it like that transform translate X 25 pixels and then translate Y negative 23 pixels and negative 23 happen when I first did this tutorial and I created it from scratch 23 seem to align better with that with the cut out all right so I will say opacity one here all right let's see if it works damn thing better work so that's cool one thing that's definitely different is it's it's not going closer all right and it's also not being hidden and I think I know why like when when the it's it's let me see here let me refresh yeah it's not hidden by default and that's because I don't have it set so what we need to do is reference the logo and set it a pasady zero it wouldn't work here because it only works on hover so yeah go back now it's hidden like that awesome okay so now let's add a Khalil it's fix this it's a little bit too far away from that hole so I'm gonna try 40 all right that's I'm pretty happy with that right there all right awesome so you could just leave it like this it's a cool effect I'm but a in a recent tutorial covered mix blend mode so mix blend mode if we apply it to the logo I which I think we could apply here to just the logo selector as well and I this will change you give it the same kind of behavior like in Photoshop layers for instance where you can change the blend mode so we could change it to overlay and look how cool that is you know what's also to know you don't have to make this so that's only hover based you could just apply this directly on to the SP ID the animation and it would work by default it would just you the person wouldn't have to hover over it but I thought it'd be interesting just to do it that way kind of scaling out the browser so we can see this even better how awesome alright so hopefully you guys learned a lot through this it's really funny funny it's really fun creating these I'm these illustrations that can then become interactive and I think it's a really cool way that can that can spice up a landing page alright guys hopefully you enjoyed that and found value in it and make sure you subscribe here and also don't forget today's question is do you charge per hour or per project when dealing with design or development clients alright I'll see you guys real soon goodbye

Channel: DesignCourse

Views: 195,786

Keywords: svg tutorial, animate svg, animate svg tutorial, svg animation tutorial, svg for web design, svg ui design, illustrator cc 3d tutorial, extrude svg, adobe illustrator 2018 tutorial, mix-blend-mode, web design svg animation, svg illustration tutorial, isometric svg, isometric tutorial, isometric design tutorial, web design isometric

Id: Ca3ZkTV4RdM

Length: 34min 39sec (2079 seconds)

Published: Fri Jun 22 2018