27 Replies Latest reply: Nov 13, 2009 3:02 PM by thesergie RSS

    Do you use Illustrator to design Web sites?

    luciele Community Member
      Hi everyone,

      I'd like to know how many people here use Illustrator to design Web sites. I've been looking for information about Web design, and it seems that a great majority of people use Photoshop in the design stage.

      I definitely prefer and am more comfortable in Illustrator, but I'm starting to wonder if I should be designing in Photoshop instead.

      Are there features in Photoshop that make it a better tool to design Web sites (the actual layouts) than Illustrator?

      Thanks.
        • 1. Re: Do you use Illustrator to design Web sites?
          S.D.A. Community Member
          I use Adobe Fireworks, it's far superior than either Illustrator or Photoshop for designing websites, and works seamlessly with Dreamweaver.
          • 2. Re: Do you use Illustrator to design Web sites?
            Kim Luchetta
            I really like Illustrator for designing the rollover buttons I use on Web sites. It's much easier to change colors and to use the transform palette to pinpoint where your text is. I can probably make buttons 5 times faster in Illustrator than in Photoshop/Paint Shop Pro.
            • 3. Re: Do you use Illustrator to design Web sites?
              Bert-Bert Community Member
              Illustrator, as long as you keep snap-to-pixel enabled, works wonderfully for creating web graphics, but I don't let it write my html/css for me.
              • 4. Re: Do you use Illustrator to design Web sites?
                Jacob Bugge CommunityMVP
                Illustrator for images.

                If you are tough enough you can create everything else in Notepad.

                Hi Bert.
                • 6. Re: Do you use Illustrator to design Web sites?
                  Community Member
                  You can use Illustrator very well to layout and the html but will need Dreamweaver (or other) for the final html.
                  • 7. Re: Do you use Illustrator to design Web sites?
                    luciele Community Member
                    Hi SDA,

                    Thanks for mentioning Fireworks, I had never looked into this app. I just downloaded the demo version and I'm trying it out now.

                    Do you use Fireworks exclusively to create your layout and graphics for Web design, or do you sometimes need to go into Illustrator or Photoshop as well? Does Fireworks cover all your graphic needs?
                    • 8. Re: Do you use Illustrator to design Web sites?
                      badchess Community Member
                      Depending on how much web desiging you are going to be doing, SiteGrinder http://www.medialab.com/sitegrinder/ is a kind of fun way to design.

                      You won't be able to do as much as dreamweaver, but the learning curve is pretty shallow.
                      • 9. Re: Do you use Illustrator to design Web sites?
                        luciele Community Member
                        Thanks Philip, I will look into that.
                        • 10. Re: Do you use Illustrator to design Web sites?
                          S.D.A. Community Member
                          Lucie:

                          I use Fireworks exclusively. Once you've started using it you'll understand why ...

                          It truly is better than anything Adobe had specifically for web graphics prior to the merger with Macromedia.

                          Here is a blurb about it;
                          http://www.adobe.com/devnet/fireworks/articles/why_fireworks.html
                          • 11. Re: Do you use Illustrator to design Web sites?
                            S.D.A. Community Member
                            I should clarify the preceding somewhat. I use Fireworks exclusively for Web graphics, for print design I use Photoshop/Illustrator/InDesign. But as a long time computer user, I tend to want to use the right tool for the job and photoshop/illustrator are great print design applications, but quite inferior for web graphics IMO.
                            • 12. Re: Do you use Illustrator to design Web sites?
                              luciele Community Member
                              Thanks, that's a very informative article. I'm also involved in creating UI's for applications, and I've been trying to find a tool that would permit me to design layouts, add interactivity and convert to htm files for demonstration purposes. So far, I was using Illustrator for the layout and to convert the pages to htm, and then adding the interactivity in Dreamweaver. Fireworks just might be the tool I was looking for all along.
                              • 13. Re: Do you use Illustrator to design Web sites?
                                Community Member
                                I've been doing web sites for 12 years. I've used everything from frontpage, hotdog pro, some coffee cup program (cant remember exactly) and I have to agree on Dreamweaver and Fireworks. After using fireworks I hate photoshop. I can create rollovers faster, and I like how you can right click in DW and edit in fireworks. I could do the same thing with photoshop but it would take me twice as long to make changes between layers.
                                • 14. Re: Do you use Illustrator to design Web sites?
                                  luciele Community Member
                                  Thanks to everyone who took the time to post so far, it's been very helpful. I definitely prefer working in Illustrator (except photo touchups, etc.. in Photoshop) so the fact that Fireworks seems to be more like a vector application definetely makes me want to explore it further.
                                  • 15. Re: Do you use Illustrator to design Web sites?
                                    Community Member
                                    DO NOT use Fireworks, Photoshop, Illustrator or any other Non html program
                                    to create a web site. It will ultimately be a disaster.

                                    Use Dreamweaver, notepad or any other text or html editing program (DW
                                    preferred) to create with, and use those other programs to create only your
                                    graphics.

                                    Once you let a program not specifically designed for web authoring to create
                                    your HTML, you will lose control of the whole project.

                                    While there are many developers who use these programs this way, you will
                                    find that the real pros do not. Slide over the Dreamweaver forum and read a
                                    bit and you'll soon see why.

                                    Fireworks is probably the best at creating web graphics as it is both vector
                                    and raster based and will allow you to manipulate a lot of things, then save
                                    in the best optimized formats for web publishing.

                                    Photoshop is without argument the best photo editing program on the planet.
                                    Illustrator is probably the best vector editing program. All three of these
                                    programs will write really crappy html code that will mostly work but is not
                                    cross browser compatible in all cases.

                                    Don't use a hammer to drive a screw, just because you can. Use the right
                                    tools for the job. Learn HTML and CSS styling. Design your site, create it
                                    in DW and supplement it with the graphics program of your choice.
                                    • 16. Re: Do you use Illustrator to design Web sites?
                                      LucieL@adobeforums.com wrote:
                                      > Hi everyone,
                                      >
                                      > I'd like to know how many people here use Illustrator to design Web
                                      > sites.

                                      No. I use Fireworks. You might prefer it to Photoshop is you are used to
                                      vector based programs.

                                      Linda R.
                                      -------
                                      • 17. Re: Do you use Illustrator to design Web sites?
                                        luciele Community Member
                                        Thanks for your response Linda. Do you use Fireworks exclusively for designing and coding? That is, as well as designing the layout and graphics with Fireworks, do you also use the code generated by Fireworks for the final Web site?

                                        Also thanks Clifford for your thoughts. What I'm looking for at this stage is an application with which I can easily create layouts and preview them in a browser. I do agree with you that the final code shouldn't be created with a non-html application. But, the fact that with Fireworks it seems that I could preview the pages with interactivity fairly easily is interesting to me, even if I weren't to use this code for the final Web site.
                                        • 18. Re: Do you use Illustrator to design Web sites?
                                          Quick "flash" question. I need to supply a flash animation map of the US, where the user clicks on individual states... afterwhich the state color changes to a 2nd color and the data is ported to a website/dbase. Based on that info, can this be done in Fireworks or does it need to be Flash? Any help is greatly appreciated. :)

                                          Jen
                                          • 19. Re: Do you use Illustrator to design Web sites?
                                            Jack Cates Community Member
                                            > Quick "flash" question...
                                            > can this be done in Fireworks or does it need to be Flash?

                                            This is best asked in the Flash and/or Fireworks forums.
                                            • 20. Re: Do you use Illustrator to design Web sites?
                                              Community Member
                                              Several people responding here obviously don't understand the difference between design and implementation. That makes sense because many sites are implemented without having first been designed.

                                              Illustrator is a terrific tool for designing web layouts but not the tool for implementing them. Dreamweaver is a terrific tool for implementing web designs but worthless for designing them. I don't know Fireworks, so I can't speak to it's relevance.

                                              The right tool for the job also matters a lot on what your designs are like.
                                              • 21. Re: Do you use Illustrator to design Web sites?
                                                JETalmage Community Member
                                                > Based on that info, can this be done in Fireworks or does it need to be Flash?

                                                I'm not a web guru, but I think what you describe could be done in either Fireworks or Flash, but by different means.

                                                Graphically, Fireworks would use an image-swapping routine to swap out the different colors for the map region clicked (like a two-state button). It could be done that way in Flash, too, but in Flash it could be better done programmatically with a simple line or two of ActionScript to change the color of the vector objects.

                                                I imagine (corrections welcome) if you've used Fireworks for the graphics/animation part, the sending of the information to the server-side database could be coded into the XHTML / PHP. But I suspect it could also be coded into the ActionScript of the Flash.

                                                But I'm in over my head here--I haven't yet used ActionScript for that kind of thing; aside from an experiment or two to communicate between two SWFs via the Flash Player, all my ActionScript so far is used internal to manipulate the SWF application. I know that Flash ActionScript can do external communication for various things; don't know if Fireworks lets you script/code that kind of thing in its authoring environment.

                                                As suggested, best to ask those kinds of questions in the other programs' respective forums.

                                                JET
                                                • 22. Re: Do you use Illustrator to design Web sites?
                                                  David C Johnson Community Member
                                                  You can download an Adobe Illustrator file of the U.S. state map here:
                                                  http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1045405
                                                  • 23. Re: Do you use Illustrator to design Web sites?
                                                    Aadil.k

                                                     

                                                     

                                                    When it comes to designing da software we are developing our web page matters but not very much because according to to me on the whole designing a web page is the ability of graphical appearance of content which is conveyed to an end user through using the world wide web so, for this all you need is to be creative which is just a mental process involving the generation of fresh and innovative different ideas and I think if u aint using photoshop its not really a big deal. Illustrator works.  You can have a look over these sites they aren’t very updated like photoshop stuff but still the designs very balanced and eye catching http://www.templates-web.com and http://www.clothesdir.com/ .

                                                    • 24. Re: Do you use Illustrator to design Web sites?
                                                      thesergie Community Member

                                                      Yeah, you need to know the difference between web implementation (programming) and design (graphic design).

                                                       

                                                      If you are doing both, i'd say find out which one is your strength and grow in that. If you end up designing the visuals/ui of the website, you'll probably use Illustrator or Photoshop. If you end up engineering a website using code, you will probably be using some kind of advanced notepad software (they're free usually) and other tools. My strength is in visual communications so graphic design is my tool. I work closely with programmers to create a finished professional website. Two gifted people using their specific gifts to collaborate on a website (or whatever)

                                                       

                                                      I design mostly everything in illustrator and then use photoshop to add photo-realistic touches. Illustrator is faster for brainstorming and implementing design ideas. It's like having a big space available to you where you can freely move objects around while not really having to pay attention to what specific "layer" you have selected. The layer order is arbitrary. Here's my method: grab some objects, group, double click and work in an isolated environment on those grouped objects. It's fast and simple.

                                                       

                                                      Here are some screenshots of UI design i'm working on in illustrator. The last screenshot is in photoshop (you can see the finishing touches).

                                                       

                                                      -Sergie

                                                      • 25. Re: Do you use Illustrator to design Web sites?
                                                        Tonyp543212003

                                                        I usually use the slice tool in photoshop for my graphics after creating a mockup. I hide the layers i dont need and export as pngs. I then hardcode any colours in the CSS as this allows more flexiablilty with design changes.

                                                         

                                                        Tony

                                                        • 26. Re: Do you use Illustrator to design Web sites?
                                                          lisa-renee Community Member

                                                          Hey Sergie,

                                                          Hope you can help....

                                                           

                                                          Im just starting to create web pages in Illustrator and would appreciate being able to see your screen shots clearer.

                                                          can you send me a link or some other reference.

                                                           

                                                          I'm trying to understand, if everything that I'm seeing in illustrator, shadows, graduations on the edges of boxes,etc will

                                                          translate over to the actual site.

                                                          Also, once you have your pages laid out do you then import them into photoshop for slicing(not totally familiar with this step)

                                                          and then im guessing the slices are named for the html tagging and coding?

                                                           

                                                          Am I totally off?

                                                           

                                                          -Lisa

                                                          • 27. Re: Do you use Illustrator to design Web sites?
                                                            thesergie Community Member

                                                            Lisa,

                                                             

                                                            You can totally slice up stuff in illustrator and export them as you would in photoshop! Just select the slice tool and slice away! Sometimes it is a bit tricky to have the vectors perfectly line up to finally represent crisp pixels when you export to the web.

                                                             

                                                            I attached two screenshots.

                                                            - 1st one is in vector view, everything looks alright

                                                            - 2nd one is in pixel view, you can see that the lower box is antialiased because the vectors don't perfectly line up with the pixel borders.

                                                             

                                                            This is why you have to always switch to pixel-preview and have Snap to Pixel on to make sure that things look correct in the end. Illustrator just recently (couple versions ago i think) started supporting pixels-specific environments so sometimes working with pixels gives major headaches.

                                                             

                                                            I hope this helps!

                                                            Sergie