- Now the one problem with our PNG graphic
that we created in the previous movie
is that it's pretty darn small.
Now here I am inside of Photoshop,
if I drop down to this dock item right here
in the lower left corner of the window
and click on it,
notice that this image measures 964 pixels wide
by 672 pixels tall.
That's a total of just more than 640,000 pixels,
so in other words, this isn't even a megapixel image.
And of course, we've got a lot
of empty space around the logo.
In other words, this logo is pretty big by web standards,
but it's very small if we wanna project it on a big display,
or if we wanna blow it up and back light it.
So let's say you wanna create a larger PNG graphic
then what you do is you switch back over to Illustrator,
and again you wanna make sure
that your text is aligned to the pixel grid,
then you return to the File menu
and choose Save for Web.
And you should see that all your previous settings
are still in place,
that is the file Format is set to PNG 24,
the Transparency check box is turned on,
if we go up here to this little menu,
Convert to sRGB is turned on, and so forth.
What we wanna do is drop down to the Image Size options.
Notice that we're seeing a Width of 964 pixels
and a Height of 672 pixels.
Now you may recall when we first created this document
we set it to 964 points wide
and 672 points tall,
so one point translates to one pixel inside of Illustrator.
What we wanna do is blow this guy up
to let's say about 400 percent,
so I'll go ahead and type in 400 percent
and press the tab key,
and notice we have a little bit of a bug here.
Nothing happens automatically on screen.
If you encounter that behavior then just go ahead
and click in the Width value and then press the tab key
to advance to the Height value
and that should force Illustrator to redraw the graphic
here inside the Preview.
Now I'm gonna go ahead and scroll down
just by dragging inside of the image,
and you can see that we have much smoother edges.
So once again, we have no anti-aliasing
around the perpendicular surfaces,
which is to say the E, and the I, and the T,
and those other characters are absolutely smooth,
but we also have some very smooth curved contours as well.
And that's because we're exporting the file
at a much larger size.
Then make sure this little anti-aliasing algorithm
is set to Type Optimized,
in which case go ahead and click on the Save button
in order to save your graphic.
And I'm gonna save over this guy right here,
400-percent.png and I'll click the Save button
and click Yes, because I'm saving over that graphic.
Alright, now let's turn around and open the image
once again inside Photoshop.
And as you can see I've gone ahead
and opened that 400-percent.png file in advance,
but as witnessed by this little number sign
up here in the title tab this file
doesn't have any color profile associated with it.
So what we need to do is go up here to the Edit menu
and choose Assign Profile, and if you get that alert message
just go ahead and click OK.
And then I want you to watch the screen.
Make sure that the Preview check box
is turned on, incidentally.
I've got my Working space set to Adobe RGB (1998),
just as you should as well,
but check out these colors,
especially those highly saturated turquoise pixels,
notice as soon as I switch this Profile to sRGB
I lose a lot of that saturation
and we end up with those very same colors
that we were seeing inside of Illustrator.
Because after all Photoshop and Illustrator
share the exact same color management engine.
Alright, so having assigned a Profile
I'll go ahead and click OK
and you can see that instead of that number sign
up here in the title tab
we now have an * inside of the parentheses,
which tells me that I'm looking at a profiled image.
And to go ahead and save that profile
I'll go up to the File menu and choose the Save command.
And that way the colors inside this PNG image
will display properly inside other applications.
And now, just so we can see this image
against a white background,
I'll go up to the Layer menu and I'll choose Flatten Image,
and then I'll press the F key a couple of times
in order to fill the screen with that pixel-based image.
And now you can see, if I zoom in,
that we've got tons of pixels
and we have some very smooth edges,
both around our text,
as well as the graphic portion of the logo.