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

Similar Messages

  • 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.

  • 4 questions on export/importing graphics for Web and Photoshop.

    Hi, I have 4 questions here, and if you can answer one or more, I'd be happy!! :-)
    1. In general, can there be a loss of quality when I export a file from Illustrator CS3 to Photoshop CS3, and then re-import it into Illustrator?
    My guess is that you can switch applications with one single file, but you have to know what you're doing (any advise? I'm working with files that contain both text with either illustrated graphics or photos).
    2. When I switch applications like that, which one is the final application I should save my final work from (for use in print and web)? Does this matter at all? (Example: I have text created in Illustrator. I export it into Photoshop and add a filter, and maybe a blured-layer of the the whole graphic.)
    3. After completing the steps in the example above, and I do re-import it all back into Illustrator, the image appears with horizontal path-like blue lines, that let me slice the photo/text if I wanted to. Why does it do this and how do I get rid of those blue lines?
    4. When exporting a file for web, what options are you setting for .gif and .jpg in order to NOT see its white background/frame around graphic?

    1. Yes. The artwork will be rasterized to a fixed resolution in Photoshop. When re-imported it may appear the same, but it will have limited resolution on output, whereas Illustrator vector art has no (or infinite) resolution.
    2. Depends on the artwork and what the client or printer has requested. If you can keep the text editable in Illustrator (blur and some Photoshop filters are available) then you'll have a more versatile and resolution independent file than you would if you switched to Photoshop. In the end, if the resolution of you art is adequate, it's up to you which is better for you to work with, based on your skills and experience. Keep all working files so you can make changes to artwork imported from one program into another.
    Some features you might enjoy: You can place Illustrator files into Photoshop and make them Smart Objects. They remember they are Illustrator files and can be edited in Illustrator at any time. Rotate, scale, or distort the artwork in Photoshop and it is re-rendered a the PSD file's native resolution. In CS3 you can add filters to Smart Objects while keeping the vector data intact.
    3. I have read about this, but as I'm not fully up on CS3 and don't have it installed on my main system I can't help.
    4. To not see a white background for JPEG use a different matte colour. JPEGs cannot be transparent, so some colour must show where you want transparency. for GIF, the same applies, but you can turn on transparency. The artwork will be transparent, but the matte colour will determine how the anti-aliased edges are rendered. Use a matte colour that's as close to your expected background as possible or choose None. PNG 24 supports 8-bit transparency, which looks best of all, but is not supported by MS Internet Explorer versions 6 or lower.

  • 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

  • Graphic for web , aspect ratio 16/9 to be displayed in any monitor

    i have to realize an animation 15 sec as intro for a web page, what is best preset in motion to wirk with hdv? dvdpro?
    and what is the right deliver format for web? ( web page maker asked me an AVI i don't have in compressor that extension, i am supplying an h264)

    hi,
    work in any preset you like. It depends on what footage you are using if any. You will just want to make sure its set to anamorphic so it will be 16 x 9.
    When you deliver you can choose what size ( ie width and height in pixels) to output at.
    As has been discussed here recently avi is a container for many different flavours of codec. I would ask the web page man to be more specific ( and not to choose an avi style but thats my opinion ). Compressor doesnt save as this so you will have to save as some other format and then convert with a someother software. Unless there is a quicktime extension like Perian or flp4mac that handles it?
    hth
    adam

  • Does LR automatically convert to sRGB for web gallery?

    Searched and searched, but can't find this anywhere! I have AdobeRGB PSDs and camera RAW files, that I develop in LR and then export for web. Does LR default to a conversion to sRGB? I can't find a tick-box for this. All web images seem to get tagged sRGB, but I'm not sure whether this is a genuine colour space conversion, or merely a re-tagging.
    Is this stated anywhere, or are we all working on assumptions? Thanks as always for any help.

    You select the color space in the Export settings to HDD, etc...under File Settings you have Image Format and Color Space to select.
    If you are referring to the Publish settings for Facebook/Flickr, then Lr does default to sRGB for web.
    If you are referring to the Web Gallery setup in Lr, Lr defaults to sRGB.

  • Work Flow - FCE to QT then compress and convert to AVI for web upload

    I am creating movie clips that will be 5 to 10 min in length to be streamed on my website. At the current time, my CMS (content management system) for the web cannot accept H.264 (MP4) files, but can accept FLV, AVI and WMV. So, given this constraint, my workflow has been:
    1) export from FCE to QT as self contained movie (Large HD files some up to 10GB)
    2) compress down to a web usable size (maybe 180MB or so) at 640 X 480 using Elgato Turbo H.264 (however it only converts to .MP4 format)
    3) use MPEG Streamslip to convert the compressed file from MP4 to AVI file
    4) upload to web
    My problem is that I seem to lose quality when converting from MP4 to AVI. Can anyone improve on this workflow or recommend products that might make this process and improve the quality of the final product?
    I am still searching the forum, but only finding bits and pieces and not the full picture for my problem.
    Thank you.

    After doing this a few times, I remember why I was using Elgato...it is very fast and the quality is really good. MPEG Streamslip is almost as fast but slightly lacking in the quality. Still, it is really good. I just need to select the best output from Streamslip for the best quality.

  • How to properly convert 1920x1080 graphic for DVD SP

    I have a PSD file created at 1920x1080 for an HD project.
    I'd like to use this same image, with layers, for a DVD SP standard def DVD menu.
    I was wondering if anyone could point me to the proper procedure to make this conversion.
    One thing I do know is that DVD Sp is not great at converting images to different sizes. I've read that in many places. So I want to do that in Photshop.
    I'm just not sure on the steps to take to make a 864x480 image so it still looks good in DVD SP.
    For example, the 1920x1080 is square pixels. Do I simply convert this to non-square and then resize the image to 864 x 480, and then resize again to 720x480 to create an anamorphic image?
    Or is there a better way?
    Any help would be appreciated.

    If your DVD is using a 16:9 aspect ratio for menus, the graphic will look fine as both the graphic and the new menu share the same aspect ratio. If the menus were to be 4:3, then you would be looking for less simple solutions (unless it did not matter if the images were stretched vertically.)
    Have fun.
    x

  • Converting color space for web

    i shoot all my photos in adobe rgb. i would like to convert them for use on the web. i have read that they should be in sRGB color space. in photoshop i convert to sRGb color space but they still look the same as they did with adobe rgb, muddy and desaturated. can anyone help? i am getting extremely frustrated! thanks

    Probably you're using a web browser that assumes monitor RGB for untagged images, and the gamut of your monitor is smaller than sRGB. So when monitor RGB is assumed, your images look desaturated.
    You can get a wider gamut display. You can use a browser like Firefox with color management enabled, which assumes sRGB for untagged images. Or you can tag all your images with the sRGB profile (at a cost of 3.5k per image). In PS, you can assign your display profile after you've converted to sRGB to simulate what your browser is doing (or proof setup > monitor RGB).
    In general though, don't sweat it too much. All the images you've ever viewed on the web that were prepared for sRGB have been muddy and desaturated as you're now experiencing, and it's never bothered you before. Have faith in your users' capacity for ignoring these details...
    http://www.gballard.net/psd/saveforwebshift.html

  • 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

  • Save an Illustrator graphic for MS-Word

    Hello,
    I have saved a graphic in illustrator in different ways, but can't get something razor-sharp in MS-Word.
    Doe someone know a sure technique - that will produce a graphic in MS-Word that prints as sharp as in Illustrator?
    Many thanks
    Guy

    Doe someone know a sure technique....
    There is no "sure technique" for this. It's not a matter of technique; it's a matter of technical differences between the capabilities of the programs. So the success of having Word (and most all "office" or "works" programs like it) accurately replicate the vector paths you create in Illustrator (and most all programs like it) is highly dependent upon the nature of the specific paths you are creating. That's why:
    You can try your luck by exporting your Illustrator-created artwork in Enhanced MetaFile (EMF) format and import that into Word, but don't expect perfectly accurate results in the translation.
    The default "lowest common denominator" conventional-wisdom approach to the problem is to resort to exporting your Illustrator-created artwork in a raster format. PNG is the primarily suggested raster format for that.
    JET

  • Scaling Graphics for Web

    I have a question for all Web Designers / Developers.  I typically like to create my web graphics large, due to flexibility, retina display etc.  The problem lies when I need an image to fit a container.  Resizing the image stretches the image horizontally or vertically, all proportion is lost.  Content Aware Scale is an option I've tried but getting the dimensions correct for horizontal and vertical appears to be a hit or miss.  Is there a solution to this dilemma ?

    I have a question for all Web Designers / Developers.  I typically like to create my web graphics large, due to flexibility, retina display etc.  The problem lies when I need an image to fit a container.  Resizing the image stretches the image horizontally or vertically, all proportion is lost.  Content Aware Scale is an option I've tried but getting the dimensions correct for horizontal and vertical appears to be a hit or miss.  Is there a solution to this dilemma ?

  • Crisp ,Sharp, Bright Shiny Graphics for web?

    Hello all...I hope you guys will answer my question..How to create nice looking professional crisp sharp bright shiny images in Adobe Photoshop and Fireworks..What actualy do i have to consider...?Generally my designs are not crispier and it always saddens me..

    azsmatswabi,
    I would suggest your posting in the forum(s) of the application(s) you create the artwork in, and that you post images (using the Camera icon to avoid delay by queueing).
    Is Illustrator out of the question?
    Depending on the nature of the images, you may consider saving for the web as PNG, GIF, and JPEG.

  • Convert dvd file for web ...

    I have a dvd disk that a friend sent to me that he made of a home video. I would like to get that dvd disk and have to converted or compress so that I can upload it to my site.
    I have done a similar project, but only with raw mpeg-4 files. Not sure how to go about doing this when the footage has already been converted to dvd format.
    any suggestions would be appreciated. I tried to used compressor but it will not recongized the .vob files.

    normally I wouldnt suggest this, but since your going to web and probably scaling it down to 320x240 anywayd it shouldnt matter. Pop your dvd into a dvd player (set top) then plug that into your camera and then plug your camera into your computer. Capture the whole thing and then export that through compressor and it should look pretty good. You could also get some kind of app that pulls the vob files apart and gives the streams that were on it. These probably cost money though. Good luck hope this helps.

  • Colors turn neon when opening a previously saved for web graphic

    Whenever I flatten and save a graphic for web and try to go back and reopen it, all of the colors go to a funny neon. It doesn't let me adjust the colors back completely either. It also happens when I open screenshots. Any idea why this is happening all of the sudden? It didn't used to do this and then just started. I haven't changed anything except maybe did an update to Photoshop. Any ideas?

    I have my settings at custom. Color management is set to "preserve embedded profiles."
    My working spaces are prophoto RGB for RGB and US Web Coated SWOP v2 for CMYK.
    I haven't ever gone in and changed any of these before. Should I?

Maybe you are looking for