#19 How To Create Slices and Use The Slice Tool in Illustrator | Dawid Tuminski | Skillshare

#19 How To Create Slices and Use The Slice Tool in Illustrator

Dawid Tuminski, www.dawidtuminski.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (16m)
    • 1. 19How To Create Slices and Use The Slice Tool in Illustrator

    • 2. 1How To Create Slices and Use The Slice Tool in Illustrator

    • 3. 2How To Use Slices for Web Development

    • 4. 3Slice Options

    • 5. Class project


About This Class

Promo video

Welcome to another episode of the Every Illustrator Tool Explained series.

In this particular class you will learn how to use slices and how to use the Slice Tool in Illustrator

So if you want to know how to:

  • Prepare your artwork for web design purposes
  • How to use the Slice tool
  • And how to use different methods for saving just a fragment of a bigger piece of artwork

Enroll in the class, because it is a concise source of thorough Illustrator knowledge great for newbies and everyone who feels that learning a piece of software like Illustrator can only be efficient when you get to know the tools it offers.

But you don’t have to watch all the videos to gain real-life knowledge.

Each lecture is a standalone project, so you can just select the tool that you want to learn today, watch that particular video and watch your skill set grow.

Enroll in the class now and I will see you inside!


1. 19How To Create Slices and Use The Slice Tool in Illustrator: Hi there. My name is David. Too risky, and I wanted to thank you for choosing this course. I know that there's a lot, of course, is out there. That is why I am so grateful that you chose this one. Welcome to another episode of the every illustrator to explain Siris in this particular class, you'll learn how to use slices and how to use the sly still in illustrator. So if you want to know how to prepare your artwork for Web design purposes, how is the sliced ill and how to use different methods for saving just a fragment of a bigger piece of artwork in rolling the class? Because is a concise source off for a illustrator knowledge great for newbies and everyone who feels that learning a piece of software like illustrator can only be efficient when you get to know the tools it offers. But you don't have to watch all the videos to get real life knowledge. Each lecture is a stand alone project, so you can just select the tool that you want to learn today. Words that particular video and what's your skills and grow So we grow in the class now and I'll see you inside 2. 1How To Create Slices and Use The Slice Tool in Illustrator: In the next few videos, we will talk about one of the Web design features in Illustrator. We will talk about creating slices. So what are those? Let's say that you have created a Web layout inside Illustrator. And let's also say that it has some graphic elements that can be rendered using plain CSS code, for instance, icons or custom bullet points. If that's the case, you need to save them as images, either as J Packs or PNG's Illustrator lets you save those elements as slices created in the slicing process, which basically is a way of telling illustrator which parts of the layout you would like to separate from the rest and save independently. So let's see what it looks like in practice. I got a landing page designer right here, and as you can see, it's got a logo in the top left corner and some icons down here and all the way down here. Most of the elements off this designer can be created using the CSS code, but the logo and the icons can and in many cases have to be turned into separate images. Let's start this license process, and we can do it in two different ways. We can head over to the tools panel and choose the slice tool and notice that it has a default short cut off the shift plus K key combination. And so now we can click and drag around, for instance, the logo to create a slice. Alternatively, you can just select a piece of artwork, then go to the object menu slice and then make notice that illustrator created a slice whose boundaries are exactly encompassing the artwork. So using this technique, you don't have to worry that you will select parts of the artwork that you don't want. So just for practice, let's move on to the eye comes down here. Choose one head over to the object menu slice, and this time, let's choose. They create from selection to create a slice, which would be a separate icon for Web development purposes. That was great about this technique is that you don't need to select your objects one by one to turn them into slices. You can shift click on more than one. I come and then go to the object menu, slides and then make, but we can speed the process up even further by assigning a custom short to this function. And to do that, let's go to the Adit menu keyboard shortcuts and Ana Mackey would go to illustrator keyboard shortcuts and in here, let's choose menu commands. Let's find object, slice and make, and let's sign a keyboard shortcut to it. Just make sure that it's not already being used by illustrator. Now, if I just scroll down to these icons, I can select all of them, press my newly created shortcut and create all the slices in Wana batch. But there is yet another way off, creating slices. We can use guides to create them, so let's bring out to the rulers and bring out some guides. Maybe this time around this I come. Now let's head onto the object menu slice and then create from guides. And as you can see, Illustrator is creating a slice which size is determined by the guides we just created. But what if the slices that she created needs some adjustments? I mean, when you create slices with the slice stool or with the guides like we did a second ago, chances are that the slices will be too big or too small to do it. Just the signs of a particular slice. Let's grab the slice selection tool that sits beneath this life store. And now, when we hover over the sliced boundaries, the cursor will change into this double arrow symbol, which means that if I now click and drag, I will effectively change the size over the slice before we move onto the next video. There is one really important piece of information I wanted to share with you. You probably have already noticed that under the slice command, we have two different options that at a first glance, do the same thing. I am talking about the make and create from selection options and dependent which option you choose, the slices going to behave differently. Let me show you what I mean. So I will grab this first icon and create a slice from it by using the make command. Now I will grab the second icon and create a slice using the create from selection command . It seems like there is not much difference, right, but watch what happens when we try to resize the first I can. I will grab it and initialize the scale tool, and I will make the Eiken bigger notice that the slice has adapted itself to the new dimensions. Even if I moved the icon around, the slice follows. But when I repeat the process with second I come, the size of it changes, but the slides remains intact. So if you think that you might want to play around with the size and the position of the object you turned into a slice, better use the slice Mike Commander instead of create from selection. So I think that we got the slides creation process covered pretty well. In the next video, we will take a look at saving slices for Web development purposes, so stay tuned. 3. 2How To Use Slices for Web Development: In a typical Web design scenario, you would either developed the website yourself or handed over to a Web developer. In that second scenario, you could also hand the design over with the graphic elements of the layout, like the logo or the I comes. So if you want to go the extra mile for your client or you just want to export separate design elements from your artwork, you can simply save the slices as images or HTML code. Let's first take a look at the quickest way of saving your slices as images. All we need to do is to select the slices we want using the slice selection tool and head over to the file menu. Save selected slices. Now we can simply give a name to our slices. I'll type in icon and notice down here that the Onley file format we can choose is PNG, which actually is a good thing because P and G is the most versatile image format for weapon purposes. And as soon as I hit OK elsewhere will save this license as images given them in the name we set upon saving the file and will add a suffix which is the number off the slice, so that's the easiest way off making use off your slices. However, even more control over the exporting process used the second way simply head over to the safe for Web command. And let's take a look at the options we got here. Slice wise. Of course, in this preview window, we can see all our slices. We can select them with the sliced selection tool that we can grab from the stool bar on the left. And this is important because down here on the right, we can choose to export all slices or Onley. They're selected slices and, by the way, by shift, clicking on the slices weaken, select more than one slice and then export them. Using the experts, selected slices command up here we can choose between different file formats. We got gift. We got Jay Pek and PNG. Usually you will be choosing between PNG and JPEG now. What's important here to note, is that we can preview the changes made to the images by the file format, which owes if I just gave back as my file format and now choose to see the original artwork and the modified one side by side. We can now see the differences we are making to the artwork that we're about to export with our file format choice. Now with Jay Pecs, we can control the amount of the compression applied, which will determine the overall quality of our graphic element. Notice that net on Lee. Can we preview the changes that we can also set different settings for different slices? I can grab another slice and make illustrator exported as a different file format or is the same file format, but with different quality settings. So once you are set on the file format and the quality and you decided whether you want to export all slices or just the selected ones, you can save your slices simply by clicking the safe bottom down here. So give you a slice is a name and hit save. Now all the slices are being exported by illustrator and are ready to be used in your Web development project. So this is how you can save your slices. In the next video, we'll talk about slice options, so keep watching 4. 3Slice Options: with the slices options. We can determine what the content of the slice will look like and function in a webpage to set options for a specific slice. We need to select one and then and go to the object menu, slice and then slice options. And here we can choose the slice type, which can be image no image and HTML text. The most natural sliced type would be the image, and we can give it a specific name in this first field. We can make it to link to a specific Web site by typing the Web address that would start with the http Kahlan doubled, slash prefix. And once we do it, we can tell the browser whether we want to the page toe open, for instance, in a new tab or the same time as Theo opened website. You can also specify a message that will appear in the browser status area when the mouse is positioned over the image as well as the alternative tax that will appear when the images invisible. Word of advice here, it's a good idea to type in the alternative tax when you're creating image slices. This is very helpful for users who have visual impairment. The old attacks would be read by a screen reading software informed such person about the content off the image. Also, Google robots really like alternative tax, so typing it in can help your site rank batter in the search engines. And if you want, you can set a background color for the table cell down here. Now the second slice type is the no image selected. If you want the slice area to contain HTML taxed and a background color in the webpage, you can enter the text you want in the tax to display in cell text box and form of the tanks to using standard HTML tags. But be careful not to enter more tax than can be displayed in the slice area. If you enter too much tax, it will extend into neighboring slices and affect the layout of your webpage. However, because you cannot see the tax on the or board, this will not be apparent until you view the webpage in a Web browser. And if you want, you can set the horizontal and vertical options to change the alignment off tax in the table self. Now the last slice type is the HTML text. This type is available on Lee when you created the sliced by selecting a text object and choosing object slice make. So, for instance, if he created slice from the your logo text and then head over to the slice options and choose HTML text as the slice time. You can see the HTML code describing the slice and again if you want, you can set the horizontal and vertical options to change the alignment of tax in the table cell and the background color off the table salt. So there you go. These are the slice options you can set for a specific sliced type. Slicing. It can become really handy when you're creating Web layouts in Illustrator and your design contains lots off graphic elements that can to be created using plain CSS code. So this video was the last lesson in the slices and slice tools class. I hope you learned a thing or two and that you enjoy the class off soon. The next class having eyes design 5. Class project: I want to see your slices and for the class project, I want you to either create pieces of artwork that you can turn into slices or use your existing projects like layouts, icons, etcetera and use the methods you saw in the class to create your own slices. You can use the Web layout attached to of the class as reference, so play around with this different slice creation methods and different file formats to see different results and you're done. Share your project with the community.