3 Replies Latest reply on Oct 23, 2009 7:27 AM by Frigglesworth

    the web process??

    Frigglesworth Level 1

      Hi everyone,

       

        The book I have been reading lays out an entire web page after creating a New Document with the "New Document Profile" as "Web."

       

        I am not interested in this as I prefer to do my XHTML and CSS in txt editors. Anyway, I STARTED to learn Illustrator (1 week ago) to do some basic tasks for the web: logos, gradients (CSS repeat-x and y), cartoon art.

       

        I know HOW to create simple art in Illustrator, but the overall process is confusing to me. Say I wanted to create my company logo (GIF) to use on a web page, and I also knew the specific pixel by pixel size I needed the logo to be when I insert into my CSS--

       

      1) Would I set my New Document up as a "Basic RGB" with custom pixel sizes rather than "Web" as the "New Document Profile?"

       

      2) After I created my vector art for the logo, what would be the correct method to convert it into a fast loading GIF for the web?

       

      3) Should I consider making a bigger logo when making vector art so I can scale the logo bigger and smaller later much easier?

       

      Thanks in advance,

      Friggs

       

      ....

        • 1. Re: the web process??
          Jacob Bugge MVP & Adobe Community Professional

          Friggs,

           

            I know HOW to create simple art in Illustrator, but the overall process is confusing to me. Say I wanted to create my company logo (GIF) to use on a web page, and I also knew the specific pixel by pixel size I needed the logo to be when I insert into my CSS--

           

          1) Would I set my New Document up as a "Basic RGB" with custom pixel sizes rather than "Web" as the "New Document Profile?"

          I will leave that to someone with a newer version than 10.

           

          2) After I created my vector art for the logo, what would be the correct method to convert it into a fast loading GIF for the web?

          GIFs are fast loading, as are PNGs. Just use the 256 colours, transparency, and in the Image Size window Anti-Alias (to prevent jaggies). PNGs work in most browser and is a superior format, the exception being old IE; you may use the pngfix.js javascript to put in the GIF instead, depending on the browser, see below.

           

          3) Should I consider making a bigger logo when making vector art so I can scale the logo bigger and smaller later much easier?

          No. GIFs/PNGs dislike random resizing which yields jagged edges, except for halving (and halving again etc).

           

          /*

          Correctly handle PNG transparency in Win IE 5.5 & 6.
          http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

           

          Use in <HEAD> with DEFER keyword wrapped in conditional comments:
          <!--[if lt IE 7]>
          <script defer type="text/javascript" src="pngfix.js"></script>
          <![endif]-->

           

          */

           

          var arVersion = navigator.appVersion.split("MSIE")
          var version = parseFloat(arVersion[1])

           

          if ((version >= 5.5) && (document.body.filters))
          {
             for(var i=0; i<document.images.length; i++)
             {
                var img = document.images[i]
                var imgName = img.src.toUpperCase()
                if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
                {
                   var imgID = (img.id) ? "id='" + img.id + "' " : ""
                   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                   var imgStyle = "display:inline-block;" + img.style.cssText
                   if (img.align == "left") imgStyle = "float:left;" + imgStyle
                   if (img.align == "right") imgStyle = "float:right;" + imgStyle
                   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                   var strNewHTML = "<span " + imgID + imgClass + imgTitle
                   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
                   img.outerHTML = strNewHTML
                   i = i-1
                }
             }
          }

          • 2. Re: the web process??
            Frigglesworth Level 1

            I'm sorry, but that didn't really answer my questions. Did I ask the questions in a hard to understand way?

             

            Your answer was much appreciated though.

            • 3. Re: the web process??
              Jacob Bugge MVP & Adobe Community Professional

              Friggs, you are welcome. I forgot to mention that I would just use Save for Web.

               

              I'm sorry, but that didn't really answer my questions. Did I ask the questions in a hard to understand way?

               

              That is hard to say. What you understood may have been what I meant from what I understood was what you meant, the latter apparently wrongly.