- Now that our nicely shaded device independent
logo is complete, let's say we want to hand it
off to a colleague or a web designer or even the client.
Well, we could give them the native AI file,
the very thing that I'm looking at.
You need Illustrator to edit this document,
but you can open it in Acrobat as I have done here
or in the free Adobe reader,
which you can download from Adobe.com,
or in Preview on the Mac,
or inside any other program that supports PDF.
But let's say you're looking for
absolute, maximum compatibility.
You want to create a file that can be displayed
on anything, any platform out there.
Then your best bet is to export the logo.
Not as an EPS file, the days of EPS are over.
But rather, as a PNG file.
Now, PNG is a pixel based format
so you don't want to use it for print,
but it's great for screen graphics.
And here's how it works.
First of all, make sure that you've saved
any changes to your document.
Then, go ahead and choose Save for Web
which allows you to preview your
PNG image as you create it.
Now, notice that I've gone ahead
and expanded this dialogue box
so it takes up the entire screen
and I'm also looking at the optimized view.
Now I'm gonna go ahead and drag my image up
so that I can see the text.
And you also want to change your file format
from GIF or JPEG to PNG-24 which will save
a full color version of your document
without any lossy compression.
And you probably want to go ahead
and turn on the transparency check box
so that you can set your graphic against any background.
Now, I'm gonna go ahead and zoom in
by control-clicking here on the PC
or command-clicking on the Mac.
And now I'll go ahead and drag
the image over so that I can see the E.
And notice that it's surrounded by a ton of anti-aliasing.
We shouldn't see any anti-aliasing
because after all, the E is just a bunch of rectangles
that should fit right into the square pixels.
The problem is that I didn't align
these characters to the pixel grid.
So I'm gonna go ahead and cancel out of here.
Now, you may wonder, well why didn't we
set up the document in the first place
to align to the grid?
Because after all, if I press Control-N
or Command-N on the Mac and I switch my profile
to let's say, basic RGB, and twirl open
this Advanced area so that I can see this check box,
Align New Objects to Pixel Grid.
You may recall when we first created this document
that I specifically told you to leave this check box off
and that's because if you were to turn it on,
it would adversely affect other elements of the logo.
What we want to do now is just turn it on
for the text and nothing more.
So I'm gonna cancel out of this dialogue box
and I'm gonna partially marquee my letters
with my black arrow tool in order to select
all the text and then I'll click on the word "Transform"
over here on the right side of the control panel.
And now you can see that we've got this check box
aligned to pixel grid which allows us
to align our characters after the fact.
So I'll go ahead and turn that check box on
and then I'll press the Enter key, or the Return key
on the Mac in order to accept that change.
And now I'm gonna click off my text to deselect it.
Now, to make sure everything's worked out
the way it should, go ahead and scroll
to the bottom of the layers panel,
assuming that you're working along with me,
and turn on the Guides layer.
And now, go ahead and zoom in on your text here,
specifically the R is the thing that typically goes wrong.
And notice in my case it looks great.
Illustrator's bumped the letter up
just a little bit so it's actually
altered the position of the anchor points
in order to better align those points to the grid.
But if you take a look at the underside
of this portion of the R, inside the bowl
it looks just great and this area of the R
looks fine as well.
And now if I scroll over to the other R,
it should look fine too.
So you just want to make sure that
things haven't bounced around too much.
Then, return to the file menu and once again choose
Save for Web, make sure that the file format
is set to PNG-24 and that transparency is turned on.
And then go ahead and zoom in on that E once again
and I'm gonna zoom way in as we're seeing here
and notice we no longer have any anti-aliasing.
We just have nice, sharp edges.
Now, you are going to have anti-aliasing
around the curved surfaces, that's to be expected.
You just don't want to see any
along the perpendicular edges,
along those edges that are either vertical or horizontal.
Next, you want to change your anti-aliasing algorithm,
this guy right here, from None or Art Optimized
to Type Optimized because it'll give you
the softest, most natural transitions.
And finally, go up to this little pop-up menu
right there, the Optimize menu,
and make sure that Convert to sRGB is turned on.
Now, assuming all your settings
are set to the way mine are with Clip to Artboard turned on,
then go ahead and click on the Save button
and I'll go ahead and save my image
under the name 72ppi-logo.png
and then I'll click the Save button
and as you can see, I'm gonna go ahead
and save over the file that I've created in the past.
Alright, now I'm gonna go ahead and zoom out here
and I'm gonna turn off the guides as well
so that I can see the illustration by itself.
Now let's say you want to open that PNG file
because it's a pixel based image inside Photoshop
just to confirm that everything's okay.
I'll go ahead and switch over to Photoshop
where I've opened this image in advance
and you can see, if I go ahead and zoom in,
that I've got nice, sharp edges around my E
and that's gonna be even more obvious
if I flatten the image by going up to the Layer menu
and choosing Flatten Image down here at the bottom
and that way we get this nice, white background
and you can see all the anti-aliasing
around the curved surfaces of the letters.
One problem, however, notice that the colors
are a little bit off.
So once again, here's what the
image looks like inside of Illustrator.
Notice that sort of dullish, turquoise right there.
Whereas, when I look at the image
inside of Photoshop, it brightens up considerably
and that's because Illustrator went ahead
and converted this image to the sRGB color space.
It did not include a color profile
so what we need to do is the following.
I'm gonna start by going to the Edit menu
and choosing Undo Flatten Image
and that way we regain our transparency
and notice that we have a floating layer
over here inside the Layers panel.
And then, you want to go up to the Edit menu
and choose Assign Profile.
And if you see this alert message,
just go ahead and click OK.
And then, inside the Assign Profile dialogue box,
select the profile radio button
and change your profile to sRGB IEC61, et cetera.
There's only one sRGB so that's the one we want
and then click OK and now notice that we have
a duller looking turquoise which is exactly what we want.
So now, you can go up to the File menu
and choose the Save command in order to update
that image on disc complete with color profile.