A couple Illustrator Questions

[mmmPeanutButter]

Well, after installing Adobe Illustrator last night, and reading through Frostillicus's (ultra-helpful) vector guide, I am now the master (not quite).  

Anyways, in order to get my feet wet, I decided to design my friend a much-needed logo for his website.  It's all done right now, and (I think) it turned out really good.

So my questions are these:

1.  I have the Artboard sized the way i want (6" * 1.75").  (as mentioned on page 24 of the guide) I created a box the size of the Artboard and tried to use the "clipping mask" command with no luck.  When I do it, a bunch of stuff within the drawing dissapears too.  I tried gouping the picture first, but when I group it, stuff dissapears again.  I think my problem has something to do with the layers, but I can't figure it out.

2.  For a webpage logo, what would be the best way to export it.  I've tried a bunch of things, but they've all come out huge and/or really ugly.  (file is 6" x 1.75")


As I mentioned, I tried a bunch of things with no luck.   Any ideas?

Thanks.

(and thanks for the guide Frostillicus)

[mahuti]

1. Create the mask object, make sure it is on the TOP most layer, above everything else. Select it & then select ONLY the items you want masked. Then make a mask.

2. You have to make it "at size". You might want to set your "units" up to be pixels, and then scale the logo & artboard to the pixel size you want the logo to be on the website. Save as a JPG. I don't know how to fix the "really ugly" problem.... what exactly do you mean by that? AI isn't really intended for web applications. Photoshop and other raster programs are really built more for that purpose.

[mmmPeanutButter]

Thanks for the reply...

1. Create the mask object, make sure it is on the TOP most layer, above everything else. Select it & then select ONLY the items you want masked. Then make a mask.

I got the mask working (finally).  I was having problems where when I masked either I lost all the colors (on everything), or part of my drawing dissapeared.  I think the problem was with my layers.  I played around with them and 'grouped' some stuff and now it works.

2. You have to make it "at size". You might want to set your "units" up to be pixels, and then scale the logo & artboard to the pixel size you want the logo to be on the website. Save as a JPG. I don't know how to fix the "really ugly" problem.... what exactly do you mean by that? AI isn't really intended for web applications. Photoshop and other raster programs are really built more for that purpose.

Still having problems with the exporting.  The image itself is already at the correct scaling.  It's at 432 x 108 pixels (6"x1.75").  When I try to export it as a JPEG, the JPEG Options box comes up.  If I select the "screen" resolution, it comes out like crap.  If I select 300 dpi, it comes out awesome quality, but the image itsel is very large (not file size, but actual image).  

I want to export it to a specific size while getting a good resolution (maybe what I just said is impossible?  Am I an idiot??   ).


In the meantime, I opened up the file on my other computer (in adobe reader 6.0) and then I used the "print screen" command and then used microsoft photo editor to isolate it and save it as a jpg.  The quality isn't bad.  And if I change the size in Adobe Reader and then use "print screen" again, I can get different sizes.

There has got to be a way to do it non-ghetto styles.

Anyways, this is what I've got so far if anybody's interested.  I wasn't looking for anything too elaborate.  Less is more.

[mahuti]

Screen resolution is 72 dpi. That's it, that's all, ever.*

You have to trick an image into doing what you want.

I've said a number of times... I need to write a print / screen res primer (like Frostillicus's tutorial) These issues have a number of good & bad ways to take care of them. In the meantime...

What exactly are you trying to do with the image?

[mmmPeanutButter]

Screen resolution is 72 dpi. That's it, that's all, ever.*

What exactly are you trying to do with the image?

It seems to me that if i specify the dpi, I should have a sharper, clearer image (ie. 72 dpi - Y" x z" size, ok quality; 150 dpi - same dimensions, better quality).  But when I export and choose a higher dpi, all I get is a larger image.  

I like the sizes for the second and third ones that you did (what did you use to resize them?).  They look good, but when I put the AI next to the JPG (of same size) the jpg just doesn't look as nice.  Also, to colors aren't uniform.  The main grass part has some anomolies in it.

Is this just a result of the vector to raster switch?

Check out the galaxian graphic on the following link.  Looks good to me.  How did he do that?
(I'm sending a PM)

http://www.arcadecontrols.org/yabbse/index.php?board=13;action=display;threadid=16905

Ultimately, I would like to export (to JPG) while specifying the image size AND the resolution.

Are you frustrated with me?  Yea, me too.  

[mahuti]

1. What you HAVE is a VECTOR image. AI is a vector program. It doesn't deal with DPI at all. It only deals with math. A "vector". So you can scale up and down infinitely. All the points are plotted mathmatically. NO dpi.

2. What you NEED is a RASTER image... a bitmap, which is based on a finite amount of data contained in a a finite amount of space. Programs like Photoshop deal with raster images (used for photo correction, manipulation & in your case, output to gifs & jpgs) One piece of information in one area of space... DPI, dots per square inch (or Pixels per square inch on a monitor) Monitors only have 72 DOTS (or pixels) per inch available. If you are viewing a high-res bitmap, you can zoom in and see the tiny details. You are still only seeing 72 DPI. Same with AI, when you zoom in, you are still only viewing 72 DPI. You might be able to PRINT at a higher resolution, but all you can ever see on a monitor is roughly 72 DPI at any one time.

3. If I had your source file. I could make it look roughly the same as your ai file at the same size, this includes quality & color uniformity. Starting with your flawed screengrab, though,.. doesn't get us very far.

This is just a summary.... Image production is a professional field, and there are a lot of issues regarding image quality on the web, and in print. To be able to take a basic illustrator file, and make it an acceptable JPG requires a little research, experience, & practice.

Give me your file, and I'll show you how it's done.  

[mmmPeanutButter]

To be able to take a basic illustrator file, and make it an acceptable JPG requires a little research, experience, & practice.

Research - this is what this is
Experience - in time
Practice - every day  

Give me your file, and I'll show you how it's done.  

PM Sent

[Nannuu]

I've had good success creating the image the correct size but upping the dpi.  Then when you create the webpage you specify (force) the size you want the image.  I don't do this for all images, just for headers/icons.  They have turned out better for me that way anyway.  But I also don't design webpages for a living so this may be the incorrect way to do it.