Fundamentals of Web Design in Illustrator | Dawid Tuminski | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Fundamentals of Web Design in Illustrator

teacher avatar Dawid Tuminski

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

20 Lessons (1h 22m)
    • 1. Web Design in Illustrator :Welcome to the course

    • 2. My Web design workflow

    • 3. Principles of good web design

    • 4. 5 most important web design trends

    • 5. Create a webdesign workspace

    • 6. Create custom shortcuts

    • 7. Create new web design document

    • 8. Responsive web design principles

    • 9. Building a responsive template artboards

    • 10. Rearrange artboards and layers

    • 11. What is Bbootstrap?

    • 12. Responsive desktop grid

    • 13. Responsive mobile grids

    • 14. What is a wireframe?

    • 15. Wireframe elements: color and images

    • 16. Typography and flexible buttons

    • 17. 2 ways of using wireframe library

    • 18. Handing the design over to a client

    • 19. Exporting to Photoshop

    • 20. Let's sum up what we've learnt

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This is an amazing course. It is well structured and it shows one of the best workflows a designer should follow.

Very clear and thorough, a great explanation that will establish healthy work flows going forward. Thanks so much for the great class Dawid, looking forward to more!

Are you a web design beginner?

Have you been designing web sites for a while, but never in Illustrator?

Or maybe you have been using Illustrator for some time, but never thought you could use it for web design?

Stop wasting your time on wondering and guessing.

Thanks to this course you will gain all the knowledge you need start designing amazing websites independently.

Inside you will find unique information on:

  • How to transform Illustrator into a web design supertool.
  • How to easily build a wireframe and a website on top of that – fast!
  • How to master desktop, tablet and smartphone web design – all in one file thanks to Illustrator’s artboards
  • How to make your design faster and more professional with a custom, Bootstrap like 12-column grid

What you get is an exclusive occasion to start designing wonderful websites, that you can charge thousands of dollars for.

And yes, you can do that using Adobe Illustrator.

So click that Enroll button and take your first step to creating sensational web designs in Illustrator.

See you inside.


PS If you like the class, please submit your review and class project.  It will help other students, just like you interested in topic I teach, in finding my classes. Thanks!

Meet Your Teacher

Designer, coder and educational entrepreneur.
Adobe Certified Expert in Illustrator whose courses were listed in the Udemy's TOP 10 best reviewed courses.

Creating online courses on design tools like Adobe Illustrator and Adobe Photoshop, logo design, web design, graphic design freelancing, online teaching and digital marketing .

Teaching +30k students in 160 countries worldwide.

Loves the freedom of creating courses and prides in his teaching method, which is straight to the point and with a smile.

His motto: Boring instructors are worse than boring topics!

His students value his courses for their conciseness, professionalism and actionable tips and techniques they can apply in their day-to-day design tasks and online education businesses.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Web Design in Illustrator :Welcome to the course: Hello and welcome to the course. My name is David to music, and in this course I want to show you the fundamentals of designing beautiful and professional websites using Adobe Illustrator. Now, this course is for all of the new designers who want to understand how illustrator can let them design amazing websites, but also for those who are either new to the concept of illustrator of being a Web design tool or those who are making a transition from print to digital world. But before we dive into the course, let's quickly see what actually is in it. We're going to start with my Web design workflow in its fair, and I wanna show you my process of creating a website where the actual design process comes . At the end, they will take a look at principles of good design and contemporary Web trends. After that, it's time for setting up Illustrator for a Web design job will create the right workspace and created documents suitable for Web design. We will also discover responsive Web design principles, and based on that bill, they're responsive template. You learn how to quickly and effortlessly simulate a 12 column bootstrap grid inside Illustrator and then save it as a template. We'll see how to set up a website wire Friend Illustrator will learn what is a wire frame. Why it's a good practice to use it and how to set it up finally will make our design suitable for a client to preview and that developer to develop the site. But that's not actually all in the upcoming bonus lectures. We'll find some great tips on how to choose the right fund for your project and how to effectively create a news font and character styles will do the same with images and collars for Web design. Jobs at the end of the course will have all the tools and knowledge to start designing fantastic websites in Adobe Illustrator. 2. My Web design workflow: in this section, we're going to take a look at a typical Web design work float later, it will get ourselves familiar with weapons and principles and discover the most important trends to know when designing a website. So let's start with the Web design. Workflow would see details off the process off getting from inspiration to the final design . Let's start our adventure with Web design and illustrator by exploring my Web design workflow. It's not that I want to brag, but over the years off developed a working pattern that enables me to design much quicker and produce more coherent websites. Is that just about using the right tools with your eyes closed? But it's more about a working pattern, so let's see those steps in detail. The first comes inspiration. It's never a bad thing to look at what other designers have already done. It serves two main purposes. It allows you to be aware of the trends, and it also allows you to see right off the bat what would work for your project and what would not. And in this day and age, it's impossible not to look for Web design, inspiration well online. There's a ton of great sites with fantastic designs to get inspired. My typical workflow. I used two main sources, so to speak. The 1st 1 is theme forest. Here you're gonna find tons and tons of fantastic WordPress themes aged in, well, templates, etcetera. I usually go for WordPress themes, but mainly because the choice of things here is humongous, and I got all I needed. One place. The other side I turned to is, well, Google. It's so easy to simply type in Web design trends and get tons off articles, block boats and gather all the latest and greatest in Web design to date. After the inspiration comes that document set up, I usually work with a pretty find template or profile, and you will learn how to greet one later in the course. What's great about starting a project for from your own custom template is that you not only have the art boards and guides ready for you, but also the layers and setting the layers varieties essential in a smooth Web design work float. We will talk about the layers set up in the responsive Web design section of the course when the document is set up, it's time to create a websites blueprint. A wire frame illustrator allows you to create markup elements with ease. And in a typical Web design workflow, this comes as a great advantage. Will have a whole section about wire frame in an illustrator, By the way, and after the wire frame is done, it's time for some font and color inspiration, of course, when working on a project would probably be dealing with some clients. Expectations regarding the colors or maybe the funds even. But there are some general rules regarding the use of colors and France and Web design. Well, first of all, it's a good idea to use Google Fonts Senior Project. They are good, free and easy to implement by developer. Of course, you don't need to limit yourself to Google funds. For instance, you could also had to find squirrel and look for funds there as well. They got some great funds to choose from, and a developer could generate a Web fund kid easily. But if you want to take advantage of Google funds but not drown in the font choice, there are great tools on the Web that will allow you to check what certain funds look like in combination with others. And as for the colors, you're probably aware of the flat design kids evaluate available on the Web. But if you don't want to use those color schemes, it's a good idea to look how other websites utilize certain color combinations. And, as a general rule, try not to overwhelm the user with too many collars, try to keep them harmonious and leave the biggest contrast for hover and active states off menu items or buttons. Now, proper use of photos is crucial in contemporary Web design. Many designs make big, bold follows the most important parts of the site. And in a typical weapons and scenario, you would either have the photos supplied by your client or you would need to get them yourself. In the second case, one way is to go for paid stock photos from commercial services. The other way is to go for free stock photos, and you can find a ton off sites that offer high quality, stuck for hours for free, and the ones that I particularly like and find useful are free pick dot com and pixels dot com. After all the preparations. It's finally the time to start designing. The base concept is ready in our head. We got the fonts and colors we like. We've set up the wire frame, so now is the time to start the actual design process. And when the design is finished, at least the first version of it, it's time to hand it over to the client. It would be extremely unusual if you're phrases and got accepted right away. Get ready for sometimes strange and almost always numerous adjustments. But when the design is finally accepted by the client, it's ready to be developed, as you concedes, quite a long process. It requires a certain level off skills and knowledge, but it is actually a good thing. It simply means that you can charge more for your work because you are not in it only for the design, right. You also want to get paid for it, right? That's what I thought. Now in the next video in the next, videos actually will take a look at principles of good design and contemporary Web design trends, so keep watching 3. Principles of good web design: tell me something when you want to buy a certain thing. What is the most important factor that actually makes you buy it for me? It's the benefit I will get after the purchase. In other words, what's in it for me? Think about it when the user looks at a page layout and he must feel that he's actually getting what he came here for. It doesn't matter if he wants to get some contact information, really block post or buy something because it all depends on what the page wants to convey . He always must have the ability to do it quickly without thinking too much about it. Well, this brings us to the most important rule in web design today. Usability through simplicity. It's an implementation off more than a 50 year old kiss rule, which stands for keep it simple, stupid or keep it short and simple. So in short, a website well designed should not be clattered, overloaded with unnecessary elements, and it should get to straight to the point. Whatever that point is. This also applies to the collars and found styles. When designing a website, you need to remember to keep a coherent color scheme throughout the whole side. It's not only about keeping harmonious colors on every page, which of course, is essential, But it's also about being cautious about using colors appropriate for the type of the project you are working on. For example, it would be extremely not okay to design a law companies website in vivid pink and yellow toned down greys blues. That maybe shades of gold would be much more appropriate. But if you were designing a kindergarten site than using doll blend, colors wouldn't show the fund kindergarden experience either, And same goes with ponds. They should also be consistent throughout the site and individual pages. The headers should use the same font and decrease in size Gradually. The body copy should use the same front on every page, etcetera. Nowadays, the fun choice designers have is huge. It used to be just aerial. Verdana times, New Roman and the likes. When Today the Google Fonts repository has more than 700 funds alone. Look to my choice is not always a good thing, but luckily, there are size that can help you choose the right fund, and we'll show you what funds go well together. Also, I refer again to the law firm. Kindergarten Analogy. Funky, playful looking front probably won't look nice in the law firm website, but it will be a good choice on the killing. Kindergarten site images play an important role in contemporary Web design, so it is vital to choose thumb Well, I mean, remember to keep them appropriate for not only the character of the site, but also balance with the color scheme of your choosing. Additionally, if the mood of the site is uplifting and lively, try to use images that would reflect just that. On the other hand, if decided supposed to convey professionalism and seriousness, find the news images that would emphasize just that. But please avoid cheesy stuck photos. They fall out of the good design, a category period. In the next video, we'll take a look at five most important Web design trends in 2015 so keep watching 4. 5 most important web design trends: Let's spend a few minutes now on checking out the five most important trends to know when designing the website. According to the latest TechCrunch report, 80% of mobile data traffic will be generated by smartphone users by the end of 2020. Right now, every third visitor logs onto a website from a mobile device, and if a site does not provide a comfortable mobile experience, it loses its visitors. And that hurts that conversion rates. Simply put a designer whether he or she likes it or not. When designing the layout must think about the mobile experience that that he's creating with the design you must answer. The questions like would be visible enough on a smartphone with scroll easily will be easy to tap on it, etcetera. The best way to bring focus to a certain aspect of the site is to not to distract the user from it. It's not only on a synthetic form of the less is more rule. It's also a usability thing. The more sophisticatedly simple decide is the mawr. It is easier to received by the user. Simply put, the last distractions. The more information could be conveyed by the side because the user knows what to focus on . He or she is not confused by what this I wants to say or expect him to do. You've probably noticed this trend. It's been there for for a while, and apparently it's not going away. Think baked means using large, even very large topography is the first thing the user sees on the side. Put it against large background, stretch it across the screen and finish the whole effect. The bold call to action This trend has been so prominent that it's actually strange not to see a website use it. But you can find designs that try to follow this rule and change it a bill a little bit. And I'm talking about the use of bold line. A large typography is the focal point of the design, but it's not being brought against the full with background photo. Instead, the background explain not distracting the user from the main message. This one has been with us for around three years now and has become the most important and widespread trend across the design world in general, not just Web design. The key aspect of flat design is to turn the user's attention to content its simplicity. We talked about, but in a slightly different form when Android Lollipop came to market. Google's material design, which derives from flat design, has become widely adapted as well, especially in the mobile APP development industry, which is no surprise. It turns out that users prefers crawling over clicking Scrabble website. She's also easier to navigate through on a mobile device. Scrawling feels more natural and is not making you user wait for the content to load after the link has been clicked. Websites built in the single page spirit are filled with full with backgrounds, big photos and typography presenting information in big chunks that can be unnoticed. So there you go these Air five most important trends to know when designing a website in 2015. Mobile first simplicity thing, big flat design and single page design. There are plenty of other trends emerging as new or getting traction, like collapsed menus, storytelling or grid layouts. The list we just went through shows you shows you the trends that affect the designers work the most right now, and in the next video, we'll start setting up illustrator for a weapons on jobs, so keep watching 5. Create a webdesign workspace: in this section will learn how to create Web design, workspace in illustrator, How to Create Your Own shortcuts and How to create a document for a Web design project. So let's start with customizing the illustrator workspace so it suits our Web design needs . Before we start treating Web design documents, profiles and templates. It's a good idea to set up the illustrator workspace, and there is no right or wrong here. It's up to you. Which panels and toast will have turned on. It's up to you how you will lay them out on your screen. I just wanted to show you how you can set up a workspace for Web design based on what I use . But of course, workspace is yours and customize it to your liking. The first thing you might want to notice there is that illustrator actually provides you with a pretty find workspace called Web, and this is illustrators idea of what you might wanna use when designing the layout. Most of the tools I am going to keep, but there is actually quite a lot of things that I never use, and some tools that I use are missing. First of all. I don't think I'll be needing the actions panel, so I will drag it out and close it. Same goes for variables. Attributes. Attributes are more or more of a print thing. I won't be using brushes either. Uh, okay, the rest looks fine. There's a few tills I will add to my workspace. First of all, from the window menu, I will choose. The align tool occurs in a typical weapons on workflow. There is a lot of aligning. I will also go for the Pathfinder. You never know when you might want to use it, so it's a good idea to keep it handy, and I will make the Navigator active. Navigator really helps a lot when navigating multiple our ports. I'll dough these guys with the other tools. Usually I make the right panels single column, but for recording purposes, I'm going to keep them in two columns and just quickly tip here, guys, if you don't know what hides behind these icons but you doing to expand the panels so you have more room to work, you can simply drag by the edge of a panel to reveal the names off the tools. Now that we have all the tools in place. It's a good idea to save a new workspace in the workspace switcher. So let's just choose new workspace. And in this box, let's type in the name of the new workspace, and it's a good idea ticket with some descriptive name, just we know what we are saving. So I'm going to name while you work space as my Web design work space. Okay, and if you decide that you meet some other tool added to the workspace, just choose it from the window menu and doc, it'd docket with the other guys, and for some reason you accidentally mass your workspace up. Just head to the workspace switcher and choose resets and whatever your workspace name is. So now that we have our workspace created, we can take it one step further and create or custom, shortcuts said, and that's what we're going to do in the next video 6. Create custom shortcuts: The thing about custom shortcuts is just like where they cost workspace. Everything depends on your personal preference. Only show you what shortcuts. I used my typical Web design workflow. I bet that rounded rectangles are going to be one of the shapes you'll be creating a lot. Illustrator, as you can see, doesn't provide us with a default shortcut for the rounded rectangle. So let's fix that. So let's had to the added menu. If you are on a Mac, just go to the Illustrator Manual in Top Left Corner and let's choose keyboard shortcuts. In here, we can add custom shortcuts to the tools and manu commands. We want to add a shortcut to the rounded rectangle. So in the search box I will type in rounded. And for the shortcut, I will type in the letter N. Now illustrator will warn me that this case already used by the pencil tool, but since I don't use it in my weapons and workflow, I just won't worry about it Now. I would like to create custom short, but for the Transform Menu Command, this command is extremely useful when creating menus. Just create one menu element and then dynamically clone and move it to create a menu. So I will choose menu commands from this little switcher. I'll type and transform. And it is this guy right here that I want to have a custom shortcut. And this time I will be a bit more elaborate and type and control shift and Q on immaculate to use command instead of control. This is a shortcut. I came up quite a long time ago. It's not gonna flicked in with any other shortcut in illustrator, and it doesn't hurt your fingers to actually type it. Now all that's left to do now is to save my custom shortcuts. And I will do it by clicking this little I come and they will name it my Web design Shortcuts. Now, when we take a look at the rounded rectangle tool, you can see that it has a custom shortcut assigned to it and the in the effect distort and transform transform menu. You can see our casting short, but as well. Of course, these were just examples of how you can create your own tools and manu command shortcuts. It all depends on your workflow. What tools you use the most what Manu commands you use the most. So have fun with it, and it's a good idea to simply just pause every once in a while and notice which tools or commands active. I'd buy you activate by clicking, and if they don't have a default shortcut, just create one. And now we are truly ready for creating our first Web design document in Illustrator, Are you excited? I hope you are. So let's get started. 7. Create new web design document: Once we've set up our workspace and shortcuts, it's high time we created a new document for work design. So let's head up to the file menu and choose new. You could use control and shortcut to create a new document as well. And, of course, on a Mac you'd go for command and and in this dialog box, first thing to do is to type in the name of the project, of course, and you make attempted to choose Web profile from the profile switcher. But the artwork sizes we get are actually different screen sizes, and none of these maybe, except 10 24 by 7 68 which is the iPad size corresponds with the stander website size. The main trend nowadays is to create websites that are 1200 pixels in with. That's because all mother monitors support at least 12 80 by 10 24. Pixel resolution plus 1200 is easily divisible, which makes it highly flexible. When I create a typical Web design document, I do have in mind that most importance support at least 12 80 pixel resolution, but I also think about the largest, most used screams out there and buy largest I mean the highest resolution which is 1920 by 10 80 pixels or full HD, if you will. Of course, we're not talking about five K i mags or four K monitors assed. They're not widely adapted yet. But of course, when we get to the responsive tempered creation will see how to prepare our document for those screen resolutions as well. But for now, I'll stick to the good old full HD resolution and make sure that my units of measurement are set to pixels. And in the advanced stamp, I want to go for the RGB as the color model. RGB stands for red, green and blue and is the standard color model in the digital world as opposed to see him y que, which is standard collar model in print? No, In the raster effects switcher, you can go from 72 pp. I threw 150 all the way up to 300 peopie I most cases is going to be totally irrelevant as all your artwork when a safer web is going to be saved at 72 pp. I setting the raster effects at 300 people will let you see your drop shadows and blurs as if they were off higher resolution, but I usually live it as 72 pp. I preview mode. I will leave as default and I will move on to the align new objects to pixel grid option. This one right here, I think, is the most important choice to make when designing inside illustrator what this option dance is, it snaps all the objects to pixel grid, preserving all the dimensions and stroke with from breaking into fractions of pixels. It's supposed to simulate a pixel environment for your artwork. If you leave it unchecked, will be able to create objects with any size you want. Your bottoms, for instance, could be 156.5 89 pixels wide. But I like to have this kind of creative freedom. When I create Ah you I elements that I know I will be saving for Web as P G's or J Banks or as veggies that later will be imported into my actual layout design. But if I want to create the layout itself, I keep this option checked, and this is what I will do in this case as well and all that's left to do is to hit okay and keep working. So in the next section, we're going to talk about responsive Web design, and we're going to set a responsive template up, so keep watching. 8. Responsive web design principles: in this section will talk about responsive Web design in the context of designing a website in Adobe Illustrator. Of course, we'll take a look at some responsive Web design principles, but in this section out of focus on building a responsive template, I and your own grid. So let's get to work. You might have heard the term responsive Web design a throw. It is. Well, the Web design and Web development has been all about for around five years now. But there might be some confusion, especially in terms of design what responsive Web design actually is. So let me try to clarify a few things. First of all, responsive Web design is not about making a website look optimal for all devices. Yes, it's not about devices themselves, but a boat experience that you get from a website on a certain device. So when designing a website, what you should have in mind is not what the content is going to behave on an iPhone or galaxy tab, but how it is going to behave on a desktop, a laptop, a tablet or a smartphone. In other words, responsive Web design is all about content driven layout it is the content that dictates and the look of the design, and what it means is that one that is on when the device is change. The content should change as well. It should shift. It should rearrange or even go away. Before responsive Web design, we had fixed layouts. The websites were designed and developed with desktop computers in mind. And no one expected that in a few years everyone is going to go online, look in a tiny screens off their smartphones and even with all the responsive Web design hype, still many websites use fixed layouts. That which hurts their content experience, diminishes their potential client base and hurts their conversion rates. And transition from a fixed layout to a responsive layout is a process that takes time and apparently is more about changing the way people think about Internet. Then just a change in the sights looks. The first efforts to make the layers look better on different screens came with the adaptive and fluid layouts that tried to use percentages as units of measurement instead of pixels. But the results were merely in the company's elements size not in the structure itself, and it was responsive Web design, the reoriented, the design and development process towards the content delivery and seen as a similar experience across different devices. And the result is a completely changed way off thinking about counting delivery. Some elements might be great on my desktop and laptop, but in smartphones they might need to be changed or even removed. Everything is devoted to a great user experience. There is one more extremely important thing to bear in mind when designing responsive layers with the abundance of for different devices out there, you cannot control what you can't. It is going to look like on everyone off them. And this lack of control can be especially for designers who quite often feel that special connection with their designs. It can be scary, but unfortunately it is unavoidable. Now when your design is finally handed over to a developer or you start to put your designing to motion yourself with the HTML and CSS, things may start to behave unexpectedly, at least in some devices, and that is totally fine. In most cases, you are going to have to. It's just the layout later in the process, maybe at some more white space or remove it. Maybe you're going to have to get rid of some elements or make the bottom is bigger. Designing a responsive layer is about making sometimes difficult from a design standpoint. Decisions. So how does illustrate of fit in this kind of scenario? And if we can't control what the layout is going to eventually look like on different devices on, I mean, we can't write HTML nor CIA's as an illustrator. So how can we at least simulate the look and feel of the site on different devices? Well, the answer is simple. The Arctic ports Since Illustrator CS five, we can create different our boats within one document, it means that we can design a desktop tablet and smartphone experience with then just one file, create one set of elements and with proper adjustments, use thumb across all our boards to create responsive layers. It's that simple. So, in conclusion, responsive Web design is about rethinking how the content of the website will delivered on different devices. It is not about the screen size. Also, the lack of control over a total look and feel of the design across multiple devices can actually be a positive thing. It can make you focus your design around the most important aspects off the content. And if you accept these, Frank's nothing is going to stop you from creating fantastic, responsive Web design layouts in Illustrator. 9. Building a responsive template artboards: when a story, Any Web design project. It's a good idea to have a pretty fine document template. It saves a lot of time that you can spend on actual design process. In this video, I wanna show you how I can create a responsive Web design template in Illustrator. We'll start with creating in your document. I'll just head over to the file menu and choose new. The first thing I want to do is, as always, name my file, and actually, this is really a good practice to get into creative file, name it and then save it. This process says a lot of time and is a great professional habit. So we find creating a responsive Web design template. I guess I will name it what is what it is or what it will become. Ultimately, I want a creed, our board simulating a desk up experience, a tablet experience and a smartphone experience. So the template name will reflect just that. So I will type in responsive Dash desktop dash tablet, dash smartphone, dash template. I know it's kind of long, but I want the file name to be clear and descriptive. And as for the profile. Webbys, of course, a good place to start, but it creates one major problem in the sidestep. I can't find what I'm actually looking for, and the value I need is 1920 by 10 80 which we already know why I want to start with this size or resolution, if you will, because I want to seem like a large desk of experience. Or at least I want to start with that quick. Don't hear guys I'm using illustrators, CIA. Six. If you are on a C C, you might have different values in the size stamp. So if you have 1920 by 10 80 on you want to follow along. Just choose that the rest of us will just type in 1924 with and 10 84 height like so, and notice that the orientation changed automatically toe landscape because most people keep their desktop miners horizontally. And since you want to simulate three different kinds of experience, we need three aren't boards to work on. So in the our board stamp, all said, the art boards count to three, arranged them by row and space them out quite significantly. I guess 100 pixels will be fine. But if you want to change the space and value to something else, go ahead. It's really a matter of personal preference. The Web profile we chose before really takes care of all other parameters that I need. Units are set to pixels, which I want. Obviously, collar model is set toe RGB raster affects the 72 pp. I preview mode will be set to default and I want new objects to be aligned to pixel grid. All that's left to do is to hit okay, of course, and what we have right now are three art boards. There are 1920 by 10 80 pixels and 100 pixels away from each other. Perfect, That's what you wanted. So now let's take it up one level with our goal in mind, which is to simulate three different kinds of experience. Let's change. The signs of the aren't bored, so they correspond to those experiences. Let's assume that my first art board will be the large desktop, so I will leave it, as is the next one we might tablet experience. So with my audible tool, which you can access from the tools panel or by President Shift Oh Combinator on the keyboard. I will select the second tired, bored and in the control panel answered 10 24 4 of the height and 7 68 for the week. And that is actually the first iPad and iPad Mini. And many would argue that I boats are the real tablet experience, so let's stick to that. Okay, next up is the smartphone, and with the third our board selected, I will enter 11 36 for height and 6 44 the with which, by the way, is Theo iPhone five resolution. And since I still have my audible toe active, I will name my art boards as smartphone, tablet and desktop before we move on. Let's take a quick pause and understand why I chose those exact dimensions for my art boards. With the abundance of different devices that have different screen sizes and resolutions, it is impossible to target them all. I mean, it is physically possible, but it is not what is all about. I've mentioned the word experience a few times already, and that word is the key to understanding good, responsive Web design. It's not about the pixels and By the way, if you dig deeper into the subject, you will eventually get a headache from all the resolutions and pixel densities out there. It is about how a user will interact with the websites content on a desktop, on the laptop, on a tablet and on a smartphone. And with that in mind, the screen resolution becomes less important. But it was still got some more things to do. Responsive, template wise, and we will continue building it in the next video. 10. Rearrange artboards and layers: in this video, we will continue creating a responsive template, and we will start with rearranging our art boards. Let me show you what I mean. When we had to the art aborts panel from the panel menu, we can choose this last option that says, Rearrange our boards again, just like when creating a new document. Weaken. Set the space in and I will set it to 100 pixels, and I will make sure that arranged by row is selected. And when I click OK, everything that ranges beautifully If you'd like to take them mobile first approach in your design. Just head over to the real ridge are birds option again and changed the rearrange left to right layout, which will assange actually display your smartphone art board as first. But since I don't want that, I will just undo that change. Now let's head over to the Layers panel and in here I will create three layers There will correspond with my art boards, so first I'll make sure that the desktop our board is selected and I will create a layer called Desktop with the Tablet Art Board selected, I will create a layer called tablet cell, just a cult or option on the Mac. Click the new layer icon and name it tablet. And of course, the same goes for the smartphone art aboard. So just selected old or option click their new layer icon and named the Layer Smartphone. Now I will arrange my layers properly and we are almost done. But before we save our template, let's make our work even easier and better organized. I guess you could say that it will be easier because we will organize it better. What I want to do is I want to create separate sub layers for all the main components of a typical website, which usually are Header section, article and footer. So the desktop players selected I will again Old Eruption, click on the creed New sub layer. I Come and all name it as Header. Now, with the desktop players selected, that is very important. We want to create a sadly for the desktop player, not the heather sub layer. I will alter or option click create new sub layer and enter section. I'll do the same for the article, and I'll do that for the footer as well. Now I will rearrange all these sub layers. I will select them all and from the pound menu choose duplicate selected. And as you can see, we get all the sub layers copied and what we can do now is we can move them onto the tablet layer like so. And with all these copy to Sabliere selected, I will copy them once more and move them onto the smartphone layer. The really old it's left to do now is to remove the copy appendix. But I think you want to watch me do that. So I would just fast forward a bit. Now, Really, all that's left to do is to save our file as template. And to do that, I'll head over to the file menu and choose save as template. And as you can see, we already got the name of the template in here so we only need to hit saver. And there we go. We got our template created now, every time we want to use it, it's as easy as going to the file menu and choosing new from template and just choose your template in the next video. I want to make something special with our template. I want to simulate a bootstrap grid layout. It's totally optional. It just makes creating layout much easier. So if you're interested, keep watching. 11. What is Bbootstrap?: when creating Web design projects. It's a good idea to use some kind of a grid system. It simply makes designing easier and faster. The most popular of them is their 12 column grid. It is used by Bootstrap, which is the most widespread front and website development framework out there. Around five million websites were built using bootstrap. I want to show you how you can recreate the bootstrap environment Inside Illustrator. In other words, we will create a 12 column grid that is based on the bootstrap grid. But before we start, we need to learn about some basics that we need to have in mind when it creating a bootstrap like 12 column grid. I want to start with the desktop grid layout. It just will be easier for me to visually explain it to you. So my desktop layout will be 1200 pixels wide, and that's the rule Number one Rule Number two is that our 1200 pixel layout will have 15 pixels margin to the left and to the right, that which will ultimately make our work in space 11 70 pixels wide. 15 pixels is a standard bootstrap value for the left and the right Marty. According to Rule number three, we will add 30 pixel space between columns in both struck grid. Each column has a 15 pixel margin to the left and to the right, the rule number four. We will use 12 columns to build tablet and smartphone grits, and the space between columns will also be three pixels. But obviously, because of the smaller device, size columns will be narrower. And with all those principles in mind, let's start creating our first grid, and we will do that in the next video. 12. Responsive desktop grid: I have opened my previously safe template, and the first thing I wanna do is tow actually mark my future designs with, as we already know, what the with of the layout is supposed to be. 1200 pixels. Soldiers create a humble rectangle given eyes black. Fill with no stroke, and we'll make it 1200 pixels wide, and the heart is really up to your preference. I will make it as big as the art aboard, which is 10 80 but you can make it smaller or bigger. What matters here is the with off it and let me show you why. So I will make sure that my rectangle is positioned in the center of the art board, so I will align. It's properly and with my rulers on. If you don't have rulers own, just press control or command Plus are on the keyboard. I will drag one guide out so it aligns in the position with the left edge of the rectangle . If you're not sure if it aligns properly, you could always and I think it's a great practice. By the way, click on the rectangle, go to the control panel and just copy the acts value, which now you've been based as the X value off the first guide. Of course, for this technique toe work, you need to make sure that your guides are not locked. Now let's do the same with the ride guide. I will bring one out, make sure allies properly with the right edge of the rectangle. And there we go. We've marked with our layup, so we're one step closer to success. So I'm sure you remember our rule number two. We toe add 15 pixels. Padding or margin depends on how you look at it to the left and to the right. So really, all we need to do is to select our rectangle. And in the control panel, make sure that the transformation reference point is set to center so that now we can simply subtract 30 pixels from the with of our of a rectangle. And we're subtracting 30 pixels because the last time I checked 15 plus 15 awas 30. Okay, now we have the true with off our design or 11 and 70 pixels, 1170 pixels. All that's left to do is tow. Add 12 columns with 30 pixel patting between them. And to do that, I would just had Teoh to the object menu, Choose path and split into grid. And in here I wanna have 12 columns with 30 pixel Ghadir, and I'll just get okay. What we end up with is a beautiful 12 column, bootstrap like grid and what I typically due to finish until is off course, I make it significantly bigger. I drop the opacity down and I will change its color, maybe to something like this. If you want to take it up one level, you could select all the rectangles and go to the view. Menu and shoes make guides from the Guides sub menu. So now we've transformed our rectangles in two guides, but that's really totally optional. It all depends on your preference, and there we go. We've created a nicely looking 12 column grid for our desk up that simulates the bootstrap trid. In the nice video, we will continue with the grid for the tablet and smartphone. So if you're interested, keep watching 13. Responsive mobile grids: in this beautiful as promised, we will continue creating a responsive 12 column bootstrap like grid was so the tablet and the process will be exactly the same as it was with the desktop, the only differences in the size of the reference rectangle, which, of course, since to fit in the smaller art aboard. So let's start with creating the rectangle. And I wanted to be 768 pixels wide, minus 30 pixels in total cause. Remember, that's the marching bootstrapped uses as default. The height will be something around 1000 pixels. An opposition is going the center of the on board, not bring out the guidance. Making sure that snapped a point option is turned on. Well, just make position in the guide's much easier. Okay, and now let's split our rectangle into 12 columns with a 30 pixel Ghadir. So a gun I'll head over to the object menu. Jews path and split into grid again. As with the desktop, wanna make it 12 columns and have 30 pixels gutter like so all that's left to do is to adjust the height on the capacity and the color if you want, and then we go, We got our tablet grits set up. It's really that easy once you know the right technique. Now the situation of the smartphone is exactly the same. All we need to do here is to create a rectangle with the right dimensions at guns and split the rectangle into group. But you know what? I've decided on that I am not going to do it. I mean, I want you to do it yourself. You know the tools. You know what to do. In effect, I encourage you to share screenshots of your complete grits with the rest of the student community. Sure, your content on a smartphone most probably would spend across all 12 columns. But many smaller elements, like buttons or culture actions are created easier with the help of the 12 column in grade . So I again, I highly encourage you to take an active part in this grid creation. But of course I wouldn't be myself if I didn't give you that extra something. So I wanted to show you how you can make this pretty laborious good creation process a bit faster and learn a new skill along the way. So instead of constant going to this split into grid and entering 12 columns and 30 pixel Gardere. Let's greet an action or a macro, if you will. Now actions are not that commonly used in illustrator. They are in photo shop, but in this case they will really make our life easier. So first thing we need to do is to make the actions panel active by going toe the window menu and actions, I will create a new set of actions. I will call it my actions. Why not? And now I'll just create a 1200 pixel, were wide wrapped and go and do it really fast. And with its selected, I will create a new action. I'll call it 12 column Grid and just hit record and illustrator will no record my steps, so I'll go to the split into grid option. Enter 12 for the con count and 34 the gutter. I'll hit okay and I will stop recording. And now every time on a created 12 column grit with a 30 pixel gutter, I will just hit play and OK, and that's how we can simplify our work inside illustrator. So that is it for the 12 column good creation process and illustrator. I hope you enjoyed it and are eager to go to the next section, which is about wire frame, so keep watching. 14. What is a wireframe?: in the sectional talk about why are framing an illustrator. I wanna show you what a wire frame is and why it is advisable to use. It will also build our own wire frame shapes library that you can use in different Web design jobs With these first, let's understand what a wire from is and the difference between wire frames and more cops. Well, the market is almost they finished designing. It incorporates the company's colors. It uses images, chosen topography, etcetera. In other words, it is a visual representation of the client. Brief. This right here is the same design, but you can see right off the bat that it is much simplified. The colors are gone, the images have been replaced by placeholders and everything looks much simpler. And this is the purpose of a wire frame. It's supposed to give you an overall sense off the design. Well, there are some basic principles when assembling wire frames, so let's take a look at them now. My wire frames arm onal chromatic. I want to distract myself with color, so I used shades of gray, put lighter graze on darker backgrounds or vice vice versa. For greater contrast, I built certain gradation. Darker means more important and lighter, meanest. Less important, of course, you can use your own color scheme. It doesn't have to be shades of gray used or whatever you think's best your needs and helps you in establishing the best contrast and relationship between the U I I'll elements. Now the key idea behind wire frames is to focus on the content and to show how the user will interact with the content. Will there be enough space between buttons? So where should the images or the icons go? Is the farmed big enough? Is it readable, etcetera? It's about creating a blueprint of the website or the app, not the finished design. Use simple shapes like circles or squares that could represent the images or icons. Also on this stage used placeholder text like Lauren Ipsum or some other placeholder text of your choosing just to get a sense of what the paragraphs are going to look like when you build a mock up over the wire. Frank, you couldn't go the extra mile for a client and actually replaced Lauren Gibson with some more adequate text. For example, if a website is supposed to be about fresh food. Come up with some simple paragraphs about fresh food. This will make the climb to feel like you, like you care about his or her business. Create a color group for your wire frame. Whether you choose to work in shape is in shades of gray or some other colors. Create a cholera group consisting of 4 to 5 colors that you will use in your wire frame. And again, it's best to keep it monochromatic. It's also a good idea to set up the right layer structure for wire frame when I create a wire frame, a use separate layers or sub layers for header sections. Sidebar, footer, etcetera a separate later ful labels that would explain what certain parts of the U. Y are also comes in really handy. And it's particularly useful when working on the project with some other designers or developers. So now that we know what wire frames are and what are the key aspects off them, I think it's the right time to learn how to actually build one at will start doing just that in the next lesson 15. Wireframe elements: color and images: in this video, we're going to take a look at creating wire frame elements to get us started. Let's take a look at this landing page layout that I've put together for the purpose off this lecture. It's a simple site for a fake company of name, a big city life. And as you can see, we got a big heather with a big background image week up the sections, and we got the footer with links. Now this design was based on this wire frame, and I guess the most common elements for this kind of wire frings. I've used logo menu image symbols and noticed that there are rectangular, elliptical and square images here of his buttons and backgrounds. What's also important to notice here is the layer structure, both the design and the wire frame using naming convention that corresponds with the what you would see in a typical website structure. So we got the head a layer, we got sections and the footer. Okay, now that we've got all that explained, let's create the most common wire frame elements. So I was moved to another document, and before I start creating anything on a make the art aboard much taller than it is wide, and I will explain why in later video. For now, let's just head over to the art of boards tool and stretch the article to like soap. I think this should do it now. I'll start with the colors for my wife frame, and they will also work as my backgrounds. So I'll grab the rectangle to and create one rectangle, just like so I will make it black with no stroke, and now I will duplicate it five times. Do the right, and the last one of them will have an off white Phil. Of course, we could now just go to the swatches panel and choose the Grace Kate collars would like, But I want to show you a different technique. Grab all of these guys. I'll go to the addict added colors, and I'll choose blend horizontally to get a nice gradation from black to off white. Now, the benefit of this technique is say that if if you don't want a grayscale because you're a big fan of the green color and you want your father wire frame to be green now what, you can do it instead of figuring out with shades of green to use, you could simply add a dark green, failed to the first rectangle and lighter green to the last one. And, uh, go go to the edit and colors and blend horizontally to get in eyes. Green scale. Yes, that's that's what it is. It's a green scale, but I think I was stick to the Grace condos all on Do that last modification. Okay, now I'll create landscape images for the wife frame. So what I can do? I is just Aiken duplicate this rectangle, and as you probably know, most contemporary computer milers display the image in the 16 by nine aspect ratio. But the image on the screen are of different sizes, right? So to keep the aspect Rachel intact but also preserve the freedom of images of image sizes we want to use, Let's in the control panel. Make sure that our clothes rectangle is six and pixels wide and nine pixels toll. It's like we're simulating the 16 by nine aspect ratio, and now the constrain proportions option checked. Let's enter some value like 100 and 50 pixels to get a bigger rectangle. No, I'll just create two intersecting lines and, ah, I want them to be pretty dark. I'll group all these guys together and clothe them to the right. Make this guy bigger. Some like to 320 pixels wide, maybe, and also create the last one. And this guy will be sound like 400 pixels wide now deeply cut. Probably make the make the images bigger. But since I am recording in just 77 20 p for your convenience, I'm keeping the images small and another quick known here. If you want, you can start with just one rectangle. You can always adjust its size later, really, depending on your needs. Okay, Now go ahead and create a square image for my wife frame, and I'll do that with the rectangle tool. I just click anywhere in the document and enter of 50 pixels for with and height. Now again create two intersecting lines and I'm using the reflect told by the way to create this intersection, I'll group all these guys together, and I think I'm gonna stick with just this one square. I wanted to be an avid er kind of symbol, and they are usually rather small. I could also create an elliptical avatar, avatar symbol or an icon symbol. And I'll do that by duplicating the square. I'll make the intersecting lines a bit smaller. Of course, I need to have a group these guys first and with square selected, I'll go to the Effect menu. I'll choose stylized round corners, and I will around the corners until they form the circle out of my square. Of course, I need to expand the appearance and I'll group these guys again. Okay, great. But of course, contemporary websites are which with not just images but videos as well, right? Some create video placeholders, too. All we need to do is to clone one off our image, place holders on a group it and delete the lines and with the polygon tool, click and drag and also press at the down arrow key. To get a triangle now will simply rotated until it looks like a play button. And there we go. We got the colors, images and videos ready for our wife. Frank. In the next lecture will add typography and flexible buttons. So if you're interested, keep watching 16. Typography and flexible buttons: topography. Elements in our wife from library will contain titles or headings, single sentences and single paragraphs. So I would start with the headings. I'll just grab the Type two click and drag the document to create a text box. I will type in heading one. I will make the fund considerably big. Something like 42 pixels should do, and I will also make it bold since heading elements are usually bowled. Now we'll just clone this guy down, changes to heading to and make it to smaller to around 32 pixels. I will do the same for the heading three. No heading four. And I think I'll stop here if you go. If you want to go all the way up to heading six, it's up to you really. Now I want to create single sentences and paragraphs. For that, I will need some placeholder tax like Lauren Gibson, right? Well, unfortunately, illustrator doesn't have an option to just based placeholder text, like in a photo shop or in design. So what we could do is we could use the sights than provide placeholder text. Or we could use a plug in for this and the plug in that I use is free and actually quite handy. Unfortunately, you Timmy doesn't allow any more to show you the direct link to it. So I just have to advise you to Google. Search the term Lauren Gibson plugging illustrator and click the first search result. All you need to do is to install it and then you can find it under a window extensions. And in here I'll just generate some Lauren Epsom and with the type. It'll create a text box, grab one sentence of Lauren Epsom and paste it. Now I want to see paragraph and three paragraphs as well. Quit will not hear guys when adding paragraphs off text like this one, trying not to create breaks between the paragraphs by hitting, Enter or return twice hitter Andrew once and then go to the paragraph panel and set the space after paragraph to whatever you want. Ah, usually don't go over 20. Now let's move to flexible buttons. I'll click summer here and just type in something generic like like button. I guess it can get it. Can't get any more dinari than that, By the way, if you want to use this technique, don't create a taxed box. Just click and type. Otherwise, this technique won't work. So now we'll head over to the appearance panel and in here I'll just create to Phil's. The top one will be my off white, so just simple it and the bottom one can stay black now with the black fill selected all head over to this FX symbol. Select, converted to shape and choose rectangle was extremely important. Here is to leave the size as relative, but you can set the extra width and height values to your liking. Now let me show you the biggest benefit of this approach. What? I want to change the name to something else like submit or maybe read more. Our buttons background is changing dynamically. Pretty cool, huh? But I will take it up one level and created dynamic local placeholder. I'll upload the button, duplicate the bottom fill and change the converted shape option to ellipse. I'll change the size toe absolute and just click OK, no lady transformation because I want to move my lips to left. So at a negative value in the horizontal movement option. And here is my lips. Now I can go back to the lives. I can change its size a little bit, and I'll type in something like, um, company local, for instance. And there we go. We got the flexible buttons and local created. Of course, you could change the colors if you want or play around with size. But that's the beauty of flexible or dynamic buttons. You can change them the way you like in an instant. The last wire from Element I want to show you Here is the menu, and creating it is as easy as simply typing in menu item than going to the distort and transform transform menu and the owner ads, say, three copies and move them horizontally. And I want to keep it dynamic because depended on my design scenario, I might wanna bring their the elements closer together, or maybe put them further away from each other. Or maybe add or subtract menu elements. Okay, before we finish this lecture, let's organize our library. So first we got colors and images, so I will type that in. Now I will clone this guy and type and typography, and I'll do the same for the buttons and menus. Of course, our library could be expanded with form elements or social media. I guns or harm hamburger menu icons, and I actually encourage you to do that. But by now you should understand the method and the purpose of building a wire frame library. And in the next video, let's explore how toe actually use it in a Web design project. 17. 2 ways of using wireframe library: in this video, let's focus on using our of wife frame library. If you're working along with me, I hope you already have your own library created or you are using the one I provided you with. Well, there are two ways of using a wire frame library. The 1st 1 is to create a symbol library off all your elements, and the other one is what I call a split screen method. If you want to create a symbol library out of your wife room elements, it is as easy as selecting any of your objects and heading over to the symbols panel and from the battle menu, choosing a new symbol. Just give it a descriptive name, and now every time you want to use it, you can just drag it into your document. So after you're done creating your library, you can easily save it so you can use it in any of your future Web design project. The biggest advantage of this approach is the fact that using symbols reduces the overall file size, and the biggest disadvantage is that you lose that dynamic effects apply to your objects like the flexible buttons. Now, if you If you're using any version of pills for CC, you can take advantage of something called libraries. Work works pretty much the same as any other library in Illustrator, but it also preserves that dynamic effects of your objects. So let's take a look now at the split screen method I mentioned before. For that, I'll just quickly create a new document. And now, from the arrange documents tab, I'll select to up so I can split my screen like soap. I'll adjusted a little bit, and now you can see why I made my wider frame library document a bit taller. And right now all I need to do is to Dragon Element. I need onto my wire frame document and build, say, a blawg boast wire frame, mark up with a few clicks and drags like so. So these aren't two methods off. Using your wife frame. Choose the one that suits your needs that works best in your workflow. So in this section, we learned what is a wire frame and why it is important have to build your own wire frame and, lastly, how to use it to build Web layout elements in the next section. will take a look at finalizing a Web design project, will embed some images saver file, create notes and expert to file for photo shop. 18. Handing the design over to a client: in this section learn how to finalize our Web design project before handing it over to the client or the Web developer will see how to save our file, however, embed images and how to export an illustrator file to photo shop after your nice and shining design is ready, or at least the first version of it. It's time to hand it over to the client, and you get two options here. You can save your design as you would save any image for Internet use. And it is as fast and easy as going to the file menu and choosing safe for Web. You could always use Old plus control plus Shift Plus s on the keyboard and on a Mac you'd go for option Command shift s in here. We can choose from various image formats, but I would stick to just two of them J, Pack and P and G 24. If you go for J pad, you can adjust the image quality. And of course, poor quality means smaller filed size. But if your design contains some images that used transparency, it will be lost. If you need transparency, go for P and G P and J is widely supported, offers good quality and a full color spectrum. But the final size is a bit larger than J pic, so it all depends on the kind of design you want to present to the client. Also, if it is a wire frame, plain old Jay Peak will suffice. This method has one major drawback. If your design contains multiple art boards with multiple layouts like tablet layout or smartphone layout. In addition to a standard desktop layout than saving for Web would save, only one are poor. So if you want to get the best of both worlds, save all arbors in one file and preserve high quality of your design. Just go for PdF. PdF is widely supported, and none of your clients should have any problems viewing it, even if they don't have Adobe reader installed Web browsers like Chrome or Firefox handle. Pdf's just fine. So saver file as a PdF. Just go to the file menu, save as and choose. PdF and up is down here that you have the option to save all our boards or choose which ones to say. Now, from the presets, I'll choose smallest file size, which will inject most of the options. And actually, it's a good thing because we really don't. You don't need our client to have the ability to added this file himself. I don't just hit, okay. Illustrators idea of the smallest file size is not actually making it the smallest file size possible. Let me show you want very, very helpful website where I shrink my Pdf's even more now. This sign is called small period dot com, and here I can just drag my file, let it do its magic, and the results are absolutely breathtaking. I think the average file size reduction I get here is around 50% which is just amazing. So after the compression, all you need to do is to down on the file, name it properly like a new design version one. It's always a good idea to give your files versions, send it to the client and wait for the feedback. Now, in the next video, we'll take a look at preparing our designed to be handed over to a Web developer. So stay tuned 19. Exporting to Photoshop: So when your client is happy with the design and provided you don't develop the website yourself, it's time to hand it over to a developer. And for that we need to do a few things. First, let's head over to the window menu and choose links. And in here we can see all the link objects in our design, and the word length is really important here. If we handed the file over like this, the person opening it would get a warning about missing images, and we definitely don't want that. So if you click on any image in the top left corner, you'll see the words linked image. And what we want to do is tow in bad them in our document. So the quickest way to do that is to simply select all the images in the links panel and from the panel manual. Choose in bad image. Good. Don't hear guys. If you're in bad images in Illustrator CS six and earlier versions, you can't un embed them. But you can do that in Illustrator Assisi. Okay, now that we got, the image is embedded. Let's create some helpful info for the developer. I'll create a new layer and call it notes, and what I want to do here is I want to indicate what fonts and colors of used. So just type in the funds and for the logo. I used lobster, too, for the body. Kobe are used cabin and for the bottoms are used cabin, too. As for the colors, what it typically did to make the workflow faster. I create simple rectangles with Phil colors corresponding to colors used throughout the site, and it's a good practice not to go overboard with the number of colors. It's great to keep it under six, so create the rectangles and sample the colors. I'll start from the top, so a sample, the local color. Then it's this button color and these icons caller, we need to add the body copy color, of course. And this part of the food er, the copyright info background is the same. Cholera is the body copy. Not that we got all this for. What I want to do is to select one rectangle at a time, double click on the film and just copy the highlighted hacks color value, and I want to base it in as text. I'll duplicated a few times and start copying the rest of the color. Inflexible. The reason we're doing this is that it will be so much easier for the developer or yourself if you develop beside yourself to just copy the color info and based in code. Rather than sampling the color to check the hex code and then copy and paste it before we export the file to a PSD, let's quickly organize her document. When you handle file over the person receiving it will be able to work on it much faster if the naming convention of the design is logical and straightforward. So in addition toe properly naming the major layers, so to speak, let's name the objects as well. So, for instance, at group these guys right here and call this group camera, these guys will be named hat and these guys. Let's call them coffee. I don't continue this understanding throughout that design, so when we export the file for photo shop, it will be easier to distinguish the element of the design. So let's do that now, shall we? Let's head over to the file menu, choose export and my final four months will be Photoshopped PST. The color model, of course, will be RGB resolution will be set to 72 pp I and for the options I wanna go for maximum creditability. So I want to ride the layers and keep all the rest checked. Not just hit. Okay? And now I will head over to photo shop and opened my file. Okay, so this is our file in photo shop Have been quickly created background layers, so you can see everything better. As you can see, Illustrator did a pretty good job exporting our design that we got everything here. We got our notes. We got our layers with proper names and we still can add it. The tax if we choose So So, if you are working with a developer who absolutely insist on receiving a PSD from you, here's how you can deliver it. Using illustrator working this way gives you the best of both worlds. You can freely design a layout using powerful illustrator tools, but you can still export everything for photo shop if you wish. So now in the next video, we'll wrap the course up, so stay tuned 20. Let's sum up what we've learnt: So here we are. We've made it through the course. I hope you enjoyed it and learned a lot. So by now you should at least start developing your own Web design. Workflow. As demonstrated in the first section, you should understand the principles of good design, know how to set up illustrator for a Web design job, how to create the weapons and workspace and a new document for Web design and how to build your own responsive Web design template. You should know the importance of wire framing and build your own wire frame library and know how to present your final design to a client and how to prepare a document for a Web developer. So all you need to do right now to start design. But if you don't know how to start doing that or you want to see the actual designing part in illustrator, take a look at my other courses where I show just that. So I hope you enjoy this course. My name is David Tomaszewski and have a nice design