Transcript:
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 a custom bullet point. If that’s the case, you need to save them as images either as Jpegs 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 a logo in the top left corner and some icons down here going down here. Most of the elements of can be created using the CSS code of the logo, and the icons can, and in many cases have to be turned into separate images. Let’s start the slicing process and we can do it. In two different ways, we can head over to the tools panel and choose the slice tool notice that it has a default shortcut of the shift plus K key combination. And so now we can click and drag around, for instance, the logo to create his life. Alternatively, you can just select a piece of artwork, go to the object menu slice and then make notice that illustrator created a slice whose boundaries are exactly encompassed in 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 icons down here, head over to the object menu and this time lets to create from selection. Prius lies, which would be a separate icon for web development purposes. I 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 icon and then go to the object menu slice, then make we can speed the process up even further by assigning a custom shortcut to this function and to do that, let’s go to the! Edit menu, keyboard, shortcuts, and on a Mac, you would go to illustrator keyboard shortcuts and me here, let’s choose menu commands. Let’s find object, slice and make and let’s find a keyboard short to it. Just make sure that it’s not already being used by illustrator. Now if I just scroll -, these icons select all of them. Yuli created shortcut, create all the slices in one batch, but there is yet another way of creating slices we can use guides to create them, so let’s pin out the rulers and bring out some guides. Maybe this time around this icon. Now, let’s head on to the object menu slice and then create from guides 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 you created need some adjustments? I mean, when you create slices with the slice tool or with the guides like we did a second ago. Chances are that the slices will be too big or too small so to adjust the size of a particular slice. Let’s grab the slide selection tool that sits beneath the slice tool and now when we hover over the slice boundaries into this double arrow symbol, which means that if I now click and drag, I will effectively change the size of the slice, so before we move on to the next. 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 depending which option you choose, the slice is 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 item I will grab it and initialize the scale tool. We’ll make the icon bigger notice that the slice has adapted itself to the new dimensions, Even if I move the icon around the slice followed, but when I repeat the process with the second icon Changez but the slide 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 might command instead of create from selection, So I think that we got the slice creation process covered pretty well in the next video, we will take a look at saving slices for web development purposes, so stay tuned.