Adobe Illustrator for Web Design

July 28, 2019 posted by



hello guys in this video I'm going to show you how you can create the mock-up of a website in Illustrator let's start all right guys here if you can see I have the mock up of a website in three different sizes because in web design we have to work with responsive design the idea is the design gonna adapt to the size of the browser in that case you can design a website you have to design first a form view then the tablet view and then the computer view okay you can create different sizes but here you can see this is for the phone with smartphones okay then I have the tablet and then I have the DEXA but I'm gonna focus just on this one all right if you see here you have text pictures we are going to create this in 3d and I have this looks pretty cool all right how we gonna start okay first let's create a new document in Illustrator I'm gonna go to the file new and here the first thing that you have to do you have to select web in that case automatically illustrator gonna select the document on RGB then here the size the one that I have here is the most common is 1,300 but I would like to design this one in 1200 pixels right and then the height is going to be 1500 okay and then automatically is portrayed we don't need bleed everything is okay just click create then we're going to create the other pages the other artboard for the tablet and the phone all right what I can do here first I'm gonna create my background I'm gonna select the rectangle tool okay and with the same rectangle tool I can do just one click here and here on the window I'm gonna type the size is 1000 by 1500 just click OK and this is the rectangle first I would like to remove the stroke color and then for the fill color I would like to create my own color I'm gonna put here on the this particular mixer and I'm gonna sell you something kind of brown all right I will I this one maybe 150 or maybe from here and then I would like to decrease a little more a little bit this alright I like that kind of color is kind of brown alright then I would like to position this element on the center of the page how you can do that go to the window menu and open the align panel okay the align panel is a very good panel if you want to align element between each other for example let me show you if you have one element here okay I'm gonna create one element there and then another element here okay what I can do with the align panel I can select these two elements these two shapes and I can highlight on the left on the right on the center okay but what if you want to align this element on the center of the page you have to do a few things follow me on this first on the same align panel you have the option here okay click there and select show option then here in the align tool click here and select align to artboard what that means do you wanna align a relationship of the arbor you can align just one element okay as soon just like that then if you click here on the center first you have to select the rectangle click Center now the element is on the center of the page and center like that okay I believe I'm gonna use very often the align panel in that case I can drag and drop and put here as a part of the stack of my panel but I'm gonna redo the site to see just the name okay then I would like to create another rectangle okay in this case means rectangle is going to be something like these size okay and if I want this on the center of the page again I can open the align panel until Center okay alright if you see the design here on the top part it's a little like this one is like a ribbon with that shadow let me show you how you can do that okay first I'm gonna slightly change the color okay I can go to my feed color and I'm gonna move a little bit like this it's a little darker something like that okay and then what I would like to do I would like to create that kind of shy with that kind of I'm reading here in this area the only thing that you have to do is select a rectangle tool put the mouse on the corner here with the rectangle tool first I'm gonna deselect this one with the rectangle tool put the mouse try on the corner click and drag and create our rectangle like this you can hold down the shift if you want to create a perfect rectangle perfect square all right then go to the fill and change these four black color okay and then go to the pen tool right click and select the delete Anchor Point tool and I'm gonna delete just this corner click alright and if you see you have that effect you can see it's pretty easy then you can scroll all the way to the other side okay so I let the rectangle tool put the corner hold on the shift and create a perfect square select the tool and remove that anchor see it looks very nice and then for this shape I'm gonna press command 0 to see the entire thing for this shape okay I'm gonna go here to the appearance panel and click on the effect and here I have the stylize and I'm gonna select drop shadow ok with the drop shadow I'm gonna select preview ok I'm here I can see I have a drop shadow to the right eye blink offset on the X in that case I can put just 0 here okay from the bottom maybe a little of offset but I'm gonna put I'm gonna increase a little day blur and reduce the okay the Y offset I believe that it looks nice and then just click OK alright it looks pretty cool but the thing is look at this the background if you see the background here you have like a illumination on this area it's darker on this one in that case what we can do we can use the gradient tool all we can use the mesh tool let me show you the difference first ok I'm gonna set up this rectangle and I like this color okay one thing that I can do I'm gonna go here to my window menu and agri open the swatches panel okay on this watches panel I'm gonna increase the size all right and I like this color I'm gonna save that color I'm gonna click okay all right and it's they're the color and then I can select my ingredient panel I'm gonna go to the window menu and here I have the gradient okay and I would like to apply that color to the gradient okay if I put here on this area I can drag and drop that gradient and you see you have that color alright and for example I'm gonna remove this one just click and drag down and I have a cranium from that color to black and I can apply that gradient just drag and drop here if you select you can use the gradient tool okay here you can select the gradient and click and drag from one direction to the other one and you got that very nice gradient that is one option okay but the other option that you have is for example what if you want to create more organic ingredient one of the thing that I can do I'm gonna apply again the same color okay you can work with a mesh tool the mesh tool is here okay I'm gonna send em a show and I can click for example over here click and I'm gonna create a mesh pollen and then I'm gonna click here I'm gonna create another mesh point and now what I can do with the same mesh tool oh I prefer to do this with a lasso tool you can select the point for example I'm gonna select this point okay and I'm gonna go here to my colour panel okay I'm gonna select from the window menu select color okay and here I can reduce the luminosity of that can see all right and then for example here on the bottom part I'm gonna select all these points okay and I will I a darker color than that I'm gonna go back to the panel here and I'm gonna sell a very dark color like this one maybe these two ones right I'm gonna switch to RGB and I'm gonna say another darker color you can see that is the option that you have you can select many different colors on the same gradient you don't have to create a greener that is linear or radial what you can do you can put different points create different colors and you can create a very organic and looks very nice okay also here on the top part I'm gonna so at this point for example and this one will be shaved okay I'm gonna sweet and I'm gonna apply a little maybe a little red my IDs are you know science to avoid something darker and I like how that looks like okay I believe I'm gonna use the color panel very often and the gradient panel also I'm gonna put a stack of my panels okay alright let's continue all right now if you see on the design I have these 3d lmn okay and a coffee cup and that looks pretty cool how do you can create that first I'm gonna create those element on this area okay first one on the tool that I can select is the art tool okay and with the art tool I can click on drag can see how you can create an hour ink I'm gonna select just something like this maybe it's too big maybe this is the size okay and I need just a quarter of one line okay and we the properties panel I'm gonna increase the stroke okay maybe around 7.30 maybe 14 point and then open the stroke panel and here I'm gonna put the rounder okay in the cap okay it's a little round there alright and of course I'm gonna change the color for something very light gray okay that is the first part of my coffee cup then I have to create the liquid inside in that case you can use the same art tool again I'm gonna clean for example from this area okay and I'm gonna drag this is for the content okay but the thing is I don't need that line in that case I'm gonna remove the stroke okay no stroke but I need a color the coffee I'm gonna select for example the coffee there but then with my pen tool I'm gonna click here all right I'm gonna drag them out with a shift until I can see that line because I'm gonna intersect there and then here and I have a perfect quarter circle okay alright then I need the plate okay that case I'm gonna select my pen tool alright and I believe they say of the play I can just click here this is going to be the base and then you have something slightly like this you can click on drive a little bit like that can see it's a very simple thing press escape ok and then I'm gonna remove the fill and for this stroke I'm gonna put the same color very light stroke and I'm gonna increase these ones to the same 14-point and also put the cap with rounder and Kappa okay I have all the elements ok and to finish I need just circles to create the handle I'm gonna show you how you can create the candle I mean something like this ok but just feel not a stroke alright this all the elements that I did first okay a with this one I'm gonna group these two element okay I'm gonna just select this too I'm gonna go to the object and select group and then go to the effect 3d revolve okay that's when you click in preview you can see that is a coffee cup and looks very nice just click OK and then select the plate go to the effects you can apply again with the same setting the revolve okay and then you can just right-click then select arrange and send to back okay and I'm gonna put on that area alright I'm the handle it's a little more tricky a little smaller I'm gonna put here you have to go to the effect 3d three balls all right I'm gonna select preview look at this here I'm gonna increase a little bit the offset you can see and then I can move like this but the thing is I have to cut this in that case here if you see the 360 you can increase the angle up to maybe something like that and then you can start moving this kill until you have the perfect alignment like that I believe I'm gonna decrease a little bit the offset maybe 28 okay a little more okay if that is a little difficult to you can type the number also okay I'm gonna do something like this maybe that is ok all right I'm gonna click ok all right if you want you can increase a little bit this and something a little thicker and then put on the correct position okay any position that you want all right if you want also I can create shadows for example here I'm gonna create shape like this okay I prefer to start with a perfect circle and then I'm gonna go to again to the gradient panel and I'm gonna apply this gradient okay and then switch the gradient to video okay and flip okay from the inside to the outside alright and then what you can do is you can click on this one I'm gonna put the opacity in zero you see you can have a opacity for the gradient but double click and to the color black also you see you have opacity black to black but this one you have zero opacity and then select the same gradient and shrink this okay I'm gonna stretch a little bit and I'm gonna put and here underneath the coffee cup okay select the coffee cup select a plate I'm both sent to back okay with a arrange send to back you see you have that kind of shadow okay something that is not too real okay anybody's the idea how you can create a simple logo alright I'm gonna select everything alright I'm gonna group it then I'm gonna go here and I like to put the coffee cup on this area I would like to shrink a little bit okay but look at what happened I see your shrink you didn't shrink okay with the handle in that case what I recommend you to do is select the scale tool okay because if you select the scale tool I don't thing that you can do it you can scale like this okay but in order to preserve the effect double-click on the scale tool and here put scale a stroke and in fact okay you can put preview like here you can type any number for example like ninety percent eighty maybe sixty percent is okay I'm gonna click OK and you will scale the effect also alright let's continue I'm gonna put my coffee cup on this area okay and then I would like to put a few things I'm gonna take advantage of Adobe bridge because I have this material this music note that you can download on internet or you can create those one but in this case I download from Internet okay I'm gonna select this shape and this one I'm gonna copy all right I'm gonna go back here and I'm gonna paste okay in this case this note I'm gonna switch the color the fill color to white okay on this watches panel again select much matter alright and then I'm gonna put there the coffee is like this and then this area okay it's not pretty much the same the same but back in C is the idea of what you can do alright what about the pictures okay in this case okay let me move this one little to the right in this case I'm gonna use picture that I have here in Adobe bridge but let me show you why this idea I'm gonna drag and drop this picture then this one and then this one okay other thing is you see I have these pretty cool looks like a poor alloy with this tape on that area with the shadow looks pretty nice let me show you how you can do something like that first what I have to do I have to create a rectangle okay I'm gonna create with my rectangle tool a rectangle like this okay this is the side of that slide if you want you can add a little bit baby of rounder –corner okay just a few pixels if you want okay and that is the outside part then I need the inside part but the inside part has to be smaller than the smaller picture on the width or the height for example if I put is the thing like this okay maybe this size this has to match okay I have to match with this picture also you see I'm gonna reduce a little bit okay because we need that size okay that gonna match with every single picture and then I'm gonna put this one here okay I'm going to slightly change the color just to show you what I'm doing and then I'm gonna reduce the size maybe okay that is the side that I want I'm gonna select these two I would like to align on Center okay I can open the align panel but remember if you click align Center you're not allowing on the center on the page in that case I'm gonna change to align to selection and click on the align perfect okay if you take a look I have a picture inside alright let's continue next I'm gonna put this here alright then I'm gonna copy paste I'm gonna put another one here all right I'm gonna paste again I'm gonna put the last one here for these two guys okay then select both right click and select make clipping mask okay in that case we have the same size for every single one all right in in Photoshop and you can crop this image also you can crop here in Illustrator if I select the image alright I can select your crop image but I'm not playing to clock just wanna thing that I can do if you see here I can select the white arrow and then I can slightly move the image if I want okay in that case I'm not planning to crack all right then aracely this tool right click make clipping mask okay and of course I have to duplicate this one you can hold on the option key and drag okay and I'm gonna put this guy here on the center they're not gonna put this one here okay I'm the last one on this area okay and again you can select these two and you can align then I'm gonna sell this to align and the last one on line alright if you see the lowest part maybe is too small I can select this one and then I can change a little this size maybe okay and if you see here on the panel I have the width and the height 118th okay I'm gonna do the same with this one okay 1:18 alright and I'm gonna do the same for the last one okay I have the images that I want and now I'm gonna put these on my design alright I'm gonna select the images but the thing is one other thing that I would like to do I'm gonna create a kind of tape here on the top okay and only thing that you have to do is just create one rectangle alright and here I'm gonna put this rectangle with a fifth color maybe some you know I got a little yellow okay and then one thing that I can do I can select the eraser tool for example so like the eraser tool I'm gonna increase the size a little bit and I'm gonna erase something like this okay I can leave my point you see something like a very random and then I'm gonna put over here and I'm gonna slightly rotate a little bit with a little transparency here you have the opacity and you can reduce a little bit the paucity that you have that kind of thing okay in addition for this I would like to apply for this shape effect okay then stylize here and I have drop shadow okay automatically you have the same drop shadow that I have on this one okay and I'm gonna click OK and I'm gonna do the same for the other ones okay I'm gonna select this one alright I'm gonna go here to the effect and I'm gonna apply the drop shadow okay okay okay alright and then I'm gonna do the same for the last one alright em drop shadow and click OK and I'm gonna use the same type for the other one just select this one copy paste but the thing is I would like to rotate maybe to the other way all right I'm gonna duplicate again okay to do not cover that girl all right I'm gonna say the image also with my white arrow I'm gonna move a little down okay that is much better all right I have all my images and then just select everything oh by the way if you see the other one I have that color okay one of the things that I can do I can create just a rectangle covering this one like this okay I'm gonna put the same color that I have here with the eyedropper I can just click here on this color okay and then in my appearance panel I got the opacity and here I can select let's say for example overlay can see that is one that you can do or for example soft like and see or also you have you can you see or call but here if you have color in this case I believe I'm gonna select em soft light okay I like how that looks like and then what I have to do I have to put the same one here on the next one okay and just copy paste and on the last one all right and then I will lie to soon out I'm gonna select all this one I'm gonna group this one group and this one's gonna grow okay and then I can put this guy on the position that I want with the next one like this maybe a little or laughs I can also and the last one can see that is the idea of what you can do maybe a little more to the left the coffee cup okay and excellent you think that is they a little more complicated part okay because if we see the rest okay on this area here you have to create just a rectangle we takes over then you have the big title okay with more text okay this part is very simple okay the only one that is a little more tricky is this one okay let me show you how you can do that from Adobe bridge I'm gonna drag and drop for example this picture okay and you see here the only thing that you have to do is create a rectangle over this and then you can put around the corners select both right click and make clipping mask and to finish okay you can select the effect then select stylized drop shadow as you can apply the same drop shadow that we apply to the other okay pictures and then you can continue doing the rest of the design okay and actually that is your assignment all you have to do you have to try to finish that design okay with the other and with the other artboards okay in order to create another artboard the only thing that you have to do you have to select the artboard tool if you see here on the lowest part i have the artboard tool and here you can just create one over here on this area for example for ipad okay and in this case i can put for example the width I'm gonna put 768 that inside of the portray iPad okay bye the hi doesn't matter okay you can pull 1,700 1,500 okay it's a pen how big is going to be the scroll okay and then for the phone you can put for example a 4500 okay I'm gonna put something like this or 320 that is a lot all iPhone okay I'm gonna put for example 350 by that I'm probably the iPhone is going to be pretty long because you have to fit all the elements okay the only change on the iPhone that I did if you see I don't have enough space to put all this material here and look at what I did I removed okay the the element here on the left and I put on the top and I remove the the menu and I put this hamburger menu that it's very common to see on website can see you can change that alright this is your assignment what you have to try is to finish all this design alright guys I hope you liked this video see you on the next one

11 Comments

11 Replies to “Adobe Illustrator for Web Design”

  1. Youssef LEGMIRI says:

    great tutorial man. thanks for sharing

  2. Nii Anyah Yartey says:

    You are a great teacher, watching from Ghana

  3. Dalila Henni says:

    Thank you so much, your tutorial is sooo clear and easy to follow !!!

  4. Rowan Hix-Dunn says:

    You have solved so many of my problems thanks so much man

  5. Riddlez says:

    Thank you man you are super talented. do you have any tutorials on how to actually make these websites work to upload to the web I see you use dream Weaver

  6. Fernando Cel says:

    The coffe cup design was perfect, Thanks Eugenio

  7. brian lusigi says:

    this is nice

  8. Marah Eissa says:

    Thank you Sir

  9. ky zacarias says:

    very helpful video

  10. E Skills says:

    Really Helpful!

  11. tjalexforever says:

    Thanks for sharing..

Leave a Comment

Your email address will not be published. Required fields are marked *