- [Instructor] In this movie, I'll show you
how to scale your artwork
to suit a specific device or destination
and not to spoil the ending,
but the ultimate moral of the story
is to scale inside Illustrator
as opposed to Save for Web.
So let's say I want to take this iPhone 6 graphic
and scale it so it exactly fits on an iPhone 6 screen.
In that case, one way to work
might be to go to the File menu,
choose Export
and choose Save for Web.
And now, I'll just go ahead and scale the dialog box,
so it takes up the entire screen.
Now notice that my Optimized tab is active.
At which point, I'll go ahead
and change the file format once again
to PNG-24 and then I'll turn off the Transparency checkbox.
Now I'll drop down to the zoom ratio
in the bottom left corner of the screen
and change it to 400%.
And then I'll scale my artwork
so that I can see this brown case.
And notice that the horizontal and vertical edges
exhibit no anti-aliasing whatsoever,
and we have a very smooth drop shadow.
Now, if you were to look up the specs for an iPhone 6,
you would see that when it's set on its side,
the screen measures 1334 pixels wide,
and so I'll go ahead and click on that width value
and change it to 1334
and because the Link icon is turned on,
that changes the height automatically.
After which point, I'll press the Tab key
in order to update the preview.
Now I need to scroll my artwork, quite a bit actually,
in order to see that case once again
and notice we've made a mess
of our horizontal and vertical edges.
The horizontal edge exhibits anti-aliasing
both above and below the stroke.
The vertical edge not only has anti-aliasing
but you can also see the sharpening artifact
in the form of this column of light gray pixels.
And so obviously, this is no good.
Now, the culprit is this percent value.
If it's set to anything
other than a multiple of a hundred percent,
you're going to run into problems.
So, I could change it to 200%
and then press the Tab key
and if you have this problem
where the preview doesn't update,
then just go ahead
and change this optimization setting to None
and then change it back to Art Optimized.
After which point,
I'm going to have to scroll quite a bit
by dragging inside the preview
until I can see that brown iPhone case.
At which point, quite happily, I'm seeing no anti-aliasing
along the vertical or horizontal edge
and we have no sharpening artifact in the shadows.
So once again, as long as you stick
with a multiple of 100%, you're fine.
Problem is, that doesn't give you much flexibility
and it doesn't allow us to match the iPhone 6 screen.
So, I'm going to cancel out
and I'm going to scale the artwork inside Illustrator instead.
So, I'll just go ahead and zoom out a little bit
so I can take in the entire artboard
and then I'll switch to the Artboard tool
which you can get by pressing Shift + O
and now notice up here in the control panel
that I'm working in inches,
which is not the way to go.
And so, I'll press Control + R or Command + R in the Mac
to bring up my rulers
and then I'll right-click on either one of them
and choose Pixels
in order to change my unit of measure to pixels,
which is what you want when creating screen graphics.
All right, now I want to scale the artboard
with respect to its center
and so, I'll click in the center
of this reference point matrix
and then I'll dial in the desired width and height values
which are 1334 and 750 respectively
or better yet, I could just go over here
to this Presets option and select iPhone 6/6s
in order to scale the artboard like so.
After which point, I'll press the Escape key
in order to exit the Artboard mode
and return to the previously active tool.
All right, now I need to scale the artwork
and so I'll press Control + A or Command + A in a Mac
in order to select everything
and then I'll click in the word Transform
to bring up the Transform panel
and I'll go ahead and turn on this Link icon
which is going to link the width and height values
and I'll change my H value to 640 pixels
and I'll press the Enter key
or the Return key on the Mac to invoke that change.
Problem is, if I go ahead and zoom in on this corner here
and I press Control + H or Command + H on the Mac,
to hide those edges,
you can see that the corner of the case
does not properly align to the corner of the iPhone itself.
And so, to fix that problem, I'll press Control + Z
or Command + Z on the Mac to undo that scale
and then I'll click in the word Transform once again
and I'll turn on the Scale Corners checkbox
which will scale the rounded corner
so that they match each other.
Now, it'd be nice
if we could also turn on the second checkbox
which would scale the strokes
and thereby, make them thicker,
but if you do that, you're going to change
the line weight values
from even increments to decimal values
and that's going to introduce anti-aliasing,
which obviously is not what we want.
So just go ahead and turn on that Scale Corners checkbox.
Make sure the Link icon is turned on.
Click on the H and change it to 640 pixels
and then, once again, press the Enter key
or the Return key on the Mac
and you can see, that goes ahead
and scales those round corners so that they match.
All right, now I'm done with the ruler,
so I'll just press Control + R or Command + R in the Mac
in order to get rid of them
and then I'll scale over to this case right here
and I'll go up to the View menu
and I'll choose Pixel Preview
or you have that keyboard shortcut
of Control + Alt + Y or Command + Option + Y on the Mac.
And now notice, if I zoom in,
even though the second icon is selected
over here on the far right side of the control panel
and if I click this down-pointing arrowhead,
I've got Snap to pixel while scaling turned on.
Because Illustrator actually snaps
the bounding box to the grid,
we still have anti-aliasing.
So I'll just cancel out of here
and with my artwork still selected, which it is,
we just have the edges hidden for the moment,
I'll go ahead and click on this first icon
which will align the artwork to the pixel grid.
At which time, we no longer have any anti-aliasing
associated with the horizontal or vertical edges.
All right, I'll go ahead and press Control + H
or Command + H on the Mac
to bring back my selection widgets
and then I'll press Control + A or Command + A on the Mac
and just like that, we no longer have any anti-aliasing
associated with our horizontal or vertical edges.
Now, the one problem with what we've done
is we've messed up the text once again,
which is not something I want to do
and so I'll just go ahead and press Control + Z
or Command + Z on the Mac to undo the snap to the pixel grid
and then I'll press Control + H
or Command + H on the Mac to bring back my selection edges
and I'll just go ahead and zoom out here
so that I can see my artwork in its entirety.
And now, I'll Shift + click on the text on the right
and Shift + click on the text on the left
using my Black Arrow tool in order to deselect that text.
And now, just for the sake of variety,
I'll right-click inside the document window
and choose Make Pixel Perfect
in order to snap that artwork to the pixel grid
and then I'll press Control + Shift + A
or Command + Shift + A in the Mac
in order to deselect my artwork.
And now notice if I zoom in on the right hand phone,
that the text continues to look great
and that we have no anti-aliasing
along the horizontal and vertical edges.
And now, the only step left is to scale your strokes
which I'm afraid you'll have to do manually.
And that's how you scale your artwork
to suit a specific device or destination
here inside Illustrator CC.