Formatting Illustrator logo for web

I have two questions regarding formatting a logo for the web.
1.) I am putting an Illustrator logo on a Photoshop web banner graphic. What is the best procedure to apply this to the banner? Right now, I am exporting it from Illustrator to a native Photoshop file with export options as follows:
Color model RGB
Screen 72 dpi
Write layers checked
Preserve text checked
Maximum editability checked
Anti-aliasing checked
2.) What is the best format to to send to my client if he plans to use this logo for future web use? Simple RGB, or should I output on Save for Web and Devices for other options such as a GIF or PNG-24?

The web is uncalibrated. Desktop browsers may be able to read image color profiles and correct them for monitor profiles, but that doesn't do you any good on mobile devices nor on the 90% of computers that are uncalibrated. just use the defaults - sRGB, no embedded profiles. the rest wil ldepend on what your client wants to do with it, but your post implies that he wants to merge the logo with other artwork and do his own web compliant version, so sending a PSD file would be the most lossless and efficient method.
Mylenium

Similar Messages

Saving logo for Web

I am having trouble with saving my logo for web. I went to Save for web but what are the specs to save as PNG? I am using this logo for signature use in an email..but when I print it out it look very pixeleted. The logo size I reduced to 1.5 in X 0.4288 in... should I flatten transparency or rasterize
Please Help
Thanks

What application are you using? Despite our best efforts to advise you that WebHelp isn't the place to post this issue, you ended up posting in the RoboHelp WebHelp forum category.
I suspect you aren't using RoboHelp.
I'm moving this thread to Forum Comments until we hear back what app you are using. Then I'll move it to the appropriate venue.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

Saving Illustrator Image for Web

I have a simple logo that I'm trying to save for use on the web. The original has a transparent background but the edges are white so I have included an image with a dark background for reference. The challenge here is that the lines don't look smooth. I have tried setting AA to none as well as Art and Type Optimized. I've also tried blowing the image way up in Illustrator and scaling it down in the "Save for Web" Dialog box to match the size I need for the web.
In Illustrator the white lines are smooth and clean. When I save for web (or export at 300DPI) they are either blurry or blocky depending on the AA settings and never smooth. I've seen other vector art done in Illustrator that is smooth and clean, I just can't obtain the same results.
Thanks in advance for any help.

a screen-capture will only save your image to the monitor's resolution which is typically between 72dpi and 96dpi depending on if you're using Mac or Windows. I have found my Macbook Pro display resolution to be sharper than my HP tablet resolution though the pixels per inch are the same. I have found that to be true for the Macbook Pro vs my 30-inch display as well when viewing webpages. For some reason Apple has a sharper display. If you export your Illustrator document to a bitmap image with a high resolution such as 300dpi you will have a sharper result, though it won't be as sharp as a vector format file, such as PDF (Not Photoshop PDF, though--Illustrator PDF). Vector formats redraw the information based on mathematical equations which represent your drawing each time you upscale or downscale the drawing by zooming in on it. You will find this to be true with "Scalable Vector Graphics" which is the .SVG file format . It is not very popular currently because not every browser supports displaying SVG, though I have heard that this will change in the future with Internet Explorer 9 and other browsers. I think Apple Safari currently supports SVG. If you export your file to SVG it will export the file and an html file which is used to render the SVG xml data. In short it is similar to publishing a webpage of your drawing or publishing a SWF file into an HTML document from Adobe Flash Pro.

Converting illustrator graphics for web

what is the best way to convert Illustrator CS6 artwork for use on a website? I've tried Save for Web > PNG24 but the results are still not great when viewed in Preview or on my web browser.

Many thanks once again Jake. Your point about creating the image at the exact size as for final use is the information I had been looking for. I had suspected this to be the case but could never find any reliable confirmation on forums/google etc, so thanks for that. I've also just noticed that when creating a new file there is an option to increase the ppi resolution to 300, which seems to be an obvious solution to achieving sharper images. Thanks once again for your help, Jake

Saving logo for web – What's an Illy thread doing here?

This thread:
http://forums.adobe.com/thread/470690?tstart=0
Is in the Illustrator forum... so, why is it here?
Are the threads now starting to bridge the continuum?

Hi Jay
That one was me. Sorry.
Despite our best efforts to advise folks what our forums are for, It appeared in one of the forums I monitor (RoboHelp) and I knew right away it didn't belong there.
Until I heard from the OP what product s/he was using, I moved it here as a temporary measure. Then when I heard back I moved it again to Illustrator.
Cheers... Rick

Illustrator best for web page development?

In the past I have used PS CS to do some graphic text and rollovers. I basically did almost evrything in PS and then used go live and inseted smart objects.
I am re-doing the sites now using Dreamweaver. A friend recommended that I do the type and graphic stuff in Illustrator because it was vector based. Is this accurate information and is there and advantage here? I am more familiar with PS but willing to learn Illustrator if there is reason too. Can anyone shed some light on this for me?
Thanks

IPT,
Have a look here: http://www.adobeforums.com/webx?128@@.59b660c7

Avi format to flash for web?

hi everyone how are you?
This is my first post and first time. so please help me out
here.
I have got a video edited on Adobe Premiere and i wanted to
put that in flash format so i can have it on my website. I need
help with the conversion.
i was told by someone that if i use Flash CS3 i can import
and then export it.
Flash CS3 is not available from Adobe until 1st July. I
installed Flash 8 and tried to import avi file but it said its not
supported.
I can get real player format from adobe premire 7 pro too.
My questions is which one is better real player type or flash
format? how do i convert to flash?
And what is a flv? compare to swf? how do i go and get a
movie that can be seen in youtube?
I uploaded my avi file of 507mb to youtube but the quality is
bad i cant see the face of anyone.
I hope i can get some help here.
thank you so much for everyone's help.
thanks

> Flash CS3 is not available from Adobe until 1st July. I
installed Flash 8 and
> tried to import avi file but it said its not supported.
> I can get real player format from adobe premire 7 pro
too.
>
> My questions is which one is better real player type or
flash format? how do i
> convert to flash?
Bottom line is that Flash Player penetration is very high.
Every browser comes with the
player, maybe not the latest, one or two generations older,
but most of the devices
and browser comes with a flash player by default. Unlike Real
Player.
In regard to incompatibility:
There are many formats of AVI, with different sound
compressions etc... Not all supported
by Flash. Try MOV, WMV, MPEG or perhaps try different AVI
export options.
> And what is a flv? compare to swf? how do i go and get a
movie that can be
> seen in youtube?
FLV is flash's native video file format. It can only run from
within the SWF file, it can't
run alone on a website like MOV files can. You will need to
place the FLV player within SWF
and place that SWF into html document.
> I uploaded my avi file of 507mb to youtube but the
quality is bad i cant see
> the face of anyone.
Try different video formats or smaller size. Perhaps due to
very large file size, they apply
very low quality while encoding into FLV so make it as
reasonable for download as possible.
> I hope i can get some help here.
Please try with variety of AVI export options or best just
try another format.
My best results converting videos to FLV so far are when
exporting to DVD MPEG-2 and then
encoding that MPEG-2 using Flash Video Encoder. Quality and
file size very satisfactory.
Do let us know if you have any problems.
Best Regards
Urami
"Never play Leap-Frog with a Unicorn."
<urami>
If you want to mail me - DO NOT LAUGH AT MY ADDRESS
</urami>

Is save for web in JPEG format lossless when quality is 100%?

I am trying to figure out if I can reduce optimised JPEG sizes further than what Photoshop can offer.
My boss has recently questioned whether the file sizes can be reduced using lossless JPEG's further than the sace for web function in photoshop.
From what I can make of it, lossy is the option on GIF files, and therefore I am assuming that the optimisation is lossless for a JPEG at 100 percent quality and lossy when the quality is reduced?
I just want to clarify that I am saving images for the web at the smallest size I can without losing too much quality.
All the images I save are 450px wide @ 75 dpi, but vary in length from 800px high to 1500px high, but have to be saved under 100kb.
Can anyone clarify the lossless and lossy in JPEG format in save for web?
Thanks
Ray

As c. says above, JPEG is a lossy compression - there is no lossless JPEG.
PNG 24bit offers lossless compression, that is it performs compression analogous to a zip archive, whereas JPEG works by (in extremely lay terms) building a new image that resembles the original.
GIF and PNG exports let you reduce the number of colours to get better compression - there are fewer pixel differences to compress at 8bit colour depth. Hence a 16 colour PNG will have a vastly smaller file size than a 24bit PNG, and depending on the image may be much smaller than a similar quality JPEG.
Depending on how far off your 100KB ceiling you are, you may be able to improve your file exports by cleaning up the source image - reduce noise and if possible explore exporting as 8bit pngs with fewer colours - avoid using diffusion or noise in the export options. Find the balance between acceptable file size and image quality... photographs tend to be the hardest thing to compress because there's so much detail data, especially in darker (low light) areas.

Vector logo to web graphic- which way?

Hello,
I am designing a web page in Illustrator and will be slicing the images. I have a fairly simple vector logo, no more than 128 colors needed.
My question is if I should:
a) convert the logo to a different format (gif or png) and then place it in my template and then slice and save for web, and if so, which file format in "save for web" would be best?
or
b) place the vector logo as is into my template and then slice and save for web- again, which file format would be best to save as?
Or perhaps there is another option I haven't considered? Any tips for keeping the logo sharp?
Thanks in advance.
Jen

.svg has never been greatly supported and requires the user to install a plug in to see it. It's really not wise to use SVG for general web graphics.
PNG is not greatly supported in IE6, especially PNG24. IE6 does still comprise about 20% of web users unfortunately.
PNG8 or GIF would be best if you need transparency. Without transparency, JPG may also be appropriate. Which one you use depends greatly on the logo and the resulting file size (kb) and appearance. There is no hard and fast rule as to which format to use.
As for the template... it really makes no difference how you do it. Just follow whatever path seems to work well for you.

CS5 bug rendering anti-aliased text in 'Save for web'

Seems like there's a bit of a bug when using 'Save for web and devices' with thin weights of type in CS5 for Mac. Although thin type looks fine while working in Illustrator, as soon as you enter the 'Save for web' dialogue, it gets badly mangled. Looks like this issue has been present at least since CS4. It does not happen in Photoshop. It looks particularly bad for light text on a dark background.
Some people may say "sure, Illustrator is not really meant for intensive bitmap work". However, with features like 'pixel preview' and 'snap to pixel', Illustrator has (generally) become a very viable tool for web design, and personally I much prefer it to Photoshop. It is also clear that Adobe intends it to be usable in this manner. So the anti-aliasing render bug is definitely a problem. Just surprised they didn't address it when CS5 was born.
I put up some example images on http://www.thesheep.co.uk/2011/06/24/illustrator-save-for-web-anti-aliasing-problems/ to illustrate the problem.
Does anyone have any clever work-arounds for this? It's a bit annoying to have to move stuff over to PS before exporting, but maybe that's what I have to do. Hopefully Adobe will address this soon.

Hi,
I am experiencing this same problem of pixelated gifs when I use the "save for web" dialog from Illustrator, but this solution has not worked for me. I have tried the trick of using type-optimized anti-aliasing, but it doesn't change the output at all. I've done this from within the "Image size" tab as well as through Effect>Rasterize>Options)Anti-aliasing: Type Optimized. My image is a logo made entirely from text, although for some of it I used "outline path", so I'm not sure if it still qualifies as text...I'm a newbie at this stuff, so the technical details are still quite opaque to me.
Does anyone know of a solution to this that does not require me to add Photoshop to my workflow?
I'm using Illustrator in CS5, version 15.0.2.
Thanks in advance
Jonathan

When rotating a simple black rectangle, jagged edges are created. How can I fix this? (for web)

I have been messing with a simple black rectangle and when I transform it, jagged edges appear. This is the base for a logo for web. I have anti-alising checked in pref. The logo looks horrible and blurry/jagged on the edges even when previewed on several screens from pc to mac. Any suggestions are welcome!
p.s. this is also happening with text, that has been made an object (top of text seen in the rectangle.)

I don't see anything unusual. That's the best anti-aliasing you can possibly get. Have you seen another black on white hard edge at the same angle that looks better? When comparing raster images make sure you view all of them at screen resolution which is 100% zoom.
Obviously anti-aliasing of horizontal and vertical lines is the best followed by 45° angles and at your angle it is one of the worst because with this angle you have less pixel lines to render it on the pixel grid of the screen. Also the pixels of each monitor screen are different sizes and if you happened to be viewing it on screens with relatively larger pixels the aliasing will be more noticeable.

Partial transparency with save for web gif?

Hey all,
I remember back in the day of photoshop 6 or maybe even 7, when I would create partial transparent .gif files through the "view menu" export transparency button, or something like that, and it would let me create beautiful partial transparent .gif files all with nicely rasterised edges.
I'm noticing in these newer versions of photoshop I have to save in the .png format to do that same thing (get that clean transparency).
Am I still able to create clean rasterised transparencies in gif file format via save for web in PS CS5 etc??? Or am I missing something?
Once of those things that bugs me and I need an older head to set me straight.
Any help would be great

One can still use them, I guess. But read this article for GIF and its replacement PNG. http://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CCQQFjAA&url=http%3A%2 F%2Fwww.w3.org%2FQA%2FTips%2Fpng-gif&ei=_JQTT_rOMcHjiAKF-vXtDQ&usg=AFQjCNHQ7JbGtlwXdnK5BWp 7tXEJ7IpfhQ

Possible Problem with Save for Web and Devices?

II've come here to the forum for some insight on why a gif file created by save for web and devices command is not showing up as an image in an uploading dialog box for my website. I'm buildiing my website with word press and a custom freelancer theme. I've created a customized header with Illustrator and have been saving the file with the save for web and devices command. Once I have my gif file, I go to my theme uploader and try to upload the gif image and place it on my homepage. I've not had any problems with doing this until yesterday, when I tried to upload an updated file. What usually happens is that the thumbnail image shows up in the dialog box, I select my options, and click insert. But what's started happening yesterday is that the thumbnail does not show up, unless I click on edit image. This makes no difference, as when I click insert and go to my homepage and refresh it, the header doesn't show up. I've tried working with the developer of the theme to resolve this problem and so far we've not found a solution. I've tried to upload the header with different file types: jpg, png, tiff, but they don't work. I thought I'd come here to see if anyone might have some suggestions. The problem may not be with Illustrator's save for web and devices, but I thought I'd give this forum a shot. Thanks for any and all respones. :[

CT,
If you can see and open the GIF/whatever (with any viewing application), the Illustrator Save for Web&Devices works. If not, you may ask about it in the Illustrator forum:
http://forums.adobe.com/community/illustrator/illustrator_general?view=discussions
If the image is there, to have the issue solved quickly, I believe you should ask in a forum covering the web building application.

All graphics / vector in Save for Web are getting blurry / unsharp from Illustrator

All graphics / vector in Save for Web are getting blurry / unsharp from Illustrator. Same problem with save for web in Photoshop. Frustrating to be working as a designer and not be able to create sharp logos for mail sign, word templates, PPT templates etc etc. I purchased this Adobe Creative Cloud package in Sept, and are working on my Mac HD, OSX, Vers 10.9.4. I have been using the same programs on a PC for years and never had this same problem. Its frustrating!! What to do??

gif, jpg and png are pixel formats, so please clarify what the problem is supposed to be.
Screenshots or posted files might help.

Logo is missing elements when I save for web

I was given a logo to work with for a project, but whenever I try to save it as a gif, jpeg, or in another image format, the text of the logo is missing.
Here's a screenshot of what it's supposed to look like:
Here's a screenshot of what it looks like when saving for web:
I've adjusted the colors of the butterfly and the text to the lime green color you see, but the text is missing and some of the original colors appear on the save for web preview.
I've tried the following to no avail:
Copy & pasting the logo
Changing colors
Ungrouping the logo
Expanding the logo
Adding stroke
Live paint
Saving as a PDF works, but when I tried printing flyers with the image at Kinkos, I ran into the same problem with the text disappearing. Does anyone know how to fix this? I know I could just put it in Photoshop to get the final product I want, but I'll be using this logo in the future and don't want to have to experience the hassle again.
This is in Illustrator CS5, and I'm working on a PC.
Thanks.

You're welcome. I wishthere was a way to have "white set to overprint" marked some how of course you can always tst it by turning on overprint preview.
But if you do not have that turned on it would be nivce to have a marker of some kind.

Formatting Illustrator logo for web

Similar Messages

Maybe you are looking for