Moving image to website 3

[gsbbr]

I created a 2"x7" bookmark in Illustrator, saved it for the Web as a gif, loaded it onto our website under the name of "test." It's the very last image on the page:

http://www.actsofkindness.org/inspiration/media.php#graphic

It looks terribly pixilated on the website. If you click to download it, it looks great. If you right-click and "Save Picture As" (as directed by website) and then print it, it prints nicely, but 24% smaller in size (yes, I did the math) on our HP Deskjet 970c color printer.

As you can see, I have a variety of problems here, not the least of which is that I'm not a graphic designer but am doing this job in our very small nonprofit. I have Illustrator 10, PhotoShop 7 (both new, of course). I am a former Quark user and have some learning to do about Illustrator.

I need to know how to get it to look better on the above cited webpage. I also need to know how to fix the sizing so our users will print a 2"x7" bookmark as intended. Any ideas?

Can anyone help me? Notes: (1) All the other graphics on the page cited above are jpegs (graphics moved from Quark into PhotoShop via pdfs, and jpegs made from there), and are basically unprintable for the user, which is why I'm still working on this. (2) I used RGB color in the "test" bookmark (as well as in all the other graphics).

Thank you in advance, and have a great weekend,
Barbara

 

[jimoblak]

I need to know how to get it to look better on the above cited webpage.
When saving from Illustrator (save for web), find the 'anti-alias' checkbox and see what it can do for you.

I also need to know how to fix the sizing so our users will print a 2"x7" bookmark as intended.
You cannot specify physical image sizes with JPGs and GIFs. If you want to ensure the correct size, your best bet is to save your artwork as PDF. This will also offer the best quality printing from Illustrator artwork.

 

[sundemon]

Hi,
This suggestion isn't particularly relevant to your specific example, as the type in your graphics are on a white background, but if you're using transparent gifs, in the "save for web" dialog box, in the "matte" option, select the background color the gif appears over. Then when you anti-alias you'll have a smooth blend into the bg color of the page.

 

[gsbbr]

You both have really helped me, and I am almost there. Since the graphics part of our website isn't programmed (yet) to accept pdfs, I have solved the sizing problem by beginning to redo all the graphics (big job) so that a 24% reduction will get them to the correct size.

(I tried making a pdf and then a jpeg from that, and the graphics still lost 24% in size.)

Using Illustrator instead of Quark has streamlined my process, and the web graphics will print much clearer once I get them all redone in Illustrator rather than Quark. The "test" bookmark that I've been working on at the bottom of the page is much improved.

Your other suggestions were great, and my problems (in this area!) are almost solved.

Thanks so much,
Barbara

 

[jimoblak]

...our website isn't programmed (yet) to accept pdfs...
The PDF is the file that gets downloaded when you click on the JPG image on the page. A web site does not need to be programmed for this. Simply use the PDF file as the target of your A HREF tag (aka your image link).

 

[gsbbr]

Okay, jimoblak, I'll be exposing my vast ignorance here, as usual.

1. I can create a pdf via Adobe Acrobat. When I try to load a pdf into our graphics webpage, a red x shows up instead of a graphics image.

2. I can create a jpeg, etc., in Illustrator through Save for Web. When I try to load a jpeg into our graphics webpage, I get an image instead of a red x. (This is good.)

3. Whether I load a jpeg or a pdf that I later made into a jpeg, the image loses 24% of its size upon printing on our color printer (HP DeskJet 970c).

I suspect that my problem is in #3. Are you saying that when I create a jpeg for the Web, that a pdf is created with it? (I did see a quick message during my Illustrator work that made me wonder about that.) Why is there no file with a pdf suffix? How do I access it? How do I get my webpage to give me an image instead of a red x?

If this is too hopelessly elemental (I know it's elemental), that's okay, don't worry about it. I will find a way somehow. But I want to understand, and of course I would appreciate any light you can shed on this.

I have the manual that came with the program. It is helpful at times but pretty cryptic on some subjects.

Thanks again,
Barbara

 

[blueark]

The PDF isn't actually displayed on your web page. What you do it create a link something like this....

<a href=&quot;my_pdf_file.pdf&quot;>[red]xxx[/red]</a>

The [red]xxx[/red] part is replaced by what you want users to click in order to download the PDF. It might be a bit of text saying &quot;Click here to download the PDF&quot;, or it could be a graphic representation of your PDF (your JPEG). You can't create a web page with part of it as a PDF. If you open a PDF file in a browser (assuming you have a plug in), it will open in the entire page. It's all or nothing.

So, to summarise jimoblak's posts (which are all very accurate as usual!), you should have two copies of your image: one as a jpeg/gif which is what people see when they visit your site, and one as a PDF, which is downloaded when you click on the jpeg. It's the PDF that people should print if the size has to be accurate, not the jpeg.

Hope this clears things up a little!

 

[jimoblak]

Ignorance can be entertaining but I think you are battling with more than ignorance... (this is not an insult, read on)

Our comments here have been intended for plain HTML files but I revisited your page and realized you've got to wrestle with a template created with PHP. The page at:

http://www.actsofkindness.org/inspiration/download_media.php?idx=whatever

rubber stamps To download, right click on the image and select, &quot;Save Picture As...&quot; on every page. I have no clue what you have going on in the background with the PHP on the download page but I assume that it may be difficult to vary the message to say ...right click on the image and select, &quot;Save Target As...&quot; only on the items that are PDF. This 'download_media.php' page is redundant and may be confusing the whole matter for you. The page can be ignored.

I would suggest that you do not use

http://www.actsofkindness.org/inspiration/download_media.php

and allow all downloads to occur directly from

http://www.actsofkindness.org/inspiration/media.php

Instead of using the '>>DOWNLOAD GRAPHIC' links on media.php, replace all of those with the same type of 'Download PDF' links used on the lesson and project documents above.

...So if your 'ignorance' was your only problem, you would be lucky. The use of PHP to display secondary pages has thrown you off a bit. Keep it simple with one page (media.php).

 

[gsbbr]

Thank you both for your kindness to me and for your insight. I will have to digest what you wrote and get some advice from our IT guy (who is presently in Thailand).

He doesn't know much about Illustrator, et. al., but he may have ideas about the website changes. Our website developers are in another state and not affiliated with our nonprofit.

So it may come down to working out something with them. In the meantime, I am continuing to revise our graphics as I'm already doing. However, I plan to print out this entire thread and sit down with someone to see what can be done about the website graphics section.

Thank you, thank you for sharing your expertise.

Barbara