8 Replies Latest reply on Feb 1, 2010 9:46 AM by JETalmage

    Illustrator files in Dreamweaver

    aangle1823

      Can you create a web page/templete inside Illustrator and import/open in Dreamweaver to use as the graphics for the web page you are creating in Dreamweaver?

        • 1. Re: Illustrator files in Dreamweaver
          mhtruflo Level 1

          The way I've done this is go File > Save for Web and Devices - this enables you see how long they take to load up, and make and required changes to the format / resolution etc if you want that to be quicker.  (click the 2-up or 4-up tab to see 'before' and 'after')

           

          You then open up dreamweaver and simply drag the file in where you want it.  If you've sliced up your image, I make boxes in my table of exactly the same size and position and drag each sliced bit in separately (should create a folder wherever you've saved it called 'images' which contains each slice).

           

          Hope that helps, but I am a beginner myself.

          • 2. Re: Illustrator files in Dreamweaver
            aangle1823 Level 1

            Thank you very much, that is helpful and kind of what I thought.  You are probably not a new as I am.  One last question if you don't mind, what exaclty are slices, why and how do you do this?

            • 3. Re: Illustrator files in Dreamweaver
              aangle1823 Level 1

              Thank you very much, that is helpful and kind of what I thought.  You are probably not a new as I am.  One last question if you don't mind, what exaclty are slices, why and how do you do this?

               

              Thanks,

              Allen

              • 4. Re: Illustrator files in Dreamweaver
                mhtruflo Level 1

                Hi Allen,

                 

                Seriously, I probably don't know that much more than you at all!!  Just started this about a week or so ago and finding there's lots to know - great to be learning it though.

                 

                Slices are quite literally 'slices' of your image / design.  So let's say that in your design you have a header section with text / logo over your image, a middle section with just image and no text, then a bottom section with a bit more text.  You can use the slice tool to cut each one out, which means that rather than one massive image loading up, there will be three smaller ones which saves time.  I've attached an image which shows where the slice tool is.  The best thing to do would be to have a play around with that and work out how you'd use it.

                 


                Once you have sliced your image up into the different sections, do the File > Save for Web and Devices and you can optimize each slice individually.  That's a really useful tool as it tells you exactly how long each part of your image will take to load.  If it takes 10 seconds, you know that you'll have to reduce the size of the image in that tool or in Photoshop/Fireworks if you prefer.

                 

                Cheers,

                Mark

                • 5. Re: Illustrator files in Dreamweaver
                  mhtruflo Level 1

                  P.S. Make sure your image in Illustrator is exactly the size that you want it to be in Dreamweaver.  So if you want a 600px wide page, make sure the designboard you're using in Illustrator is 600px wide as well.  There may be a way to resize in DW but I've not worked it out yet.

                  • 6. Re: Illustrator files in Dreamweaver
                    aangle1823 Level 1

                    That is all very helpful, thanks.  This should get me started on the right track, I am going to download the Dreamweaver trial and try all this to get strated.  Already have everything in Illustrator now, will play with slicing that up now before trying in Dreamweaver.

                    • 7. Re: Illustrator files in Dreamweaver
                      mhtruflo Level 1

                      Well if you're only just starting, a little bit of advice from a fellow beginner.  It seems like the best way to do things is by working inside tables.  In the admittedly rubbish tests that I've done so far, I've learned to first create a table which is simple one box (1 row, 1 column) and set the width to 100% - the alignment of that should be set to 'center'.  I've been making everything inside that 1row/1column table because this ensures everything stays central and doesn't get defaulted to the left hand side of the page.

                       

                      Inside that table, create a new table with whatever width you desire your website to be (e.g. 600px).  You then work with that table to create your website / HTML email.  If I think of anything else, I'll give you a shout.

                       

                      Good luck.... to the both of us!

                      • 8. Re: Illustrator files in Dreamweaver
                        JETalmage Level 6
                        what exaclty are slices

                         

                        Slices are quite literally 'slices' of your image / design

                         

                        More precisely: Slices are html table cells that Illustrator's interface "automatically" generates to contain the objects on the page, when exported to an HTML page. When exporting, the feature also cuts up raster images to fit the table cells.

                         

                        This is a somewhat archaic way to build web pages nowadays. Better to use XHTML and CSS, which allows web page content to effectively be "stacked" or "layered".

                         

                        You've seen web pages where what should be a single image downloads and displays in a sliced-up, one-grid-piece-at-a-time fashion, right? Isn't that annoying?

                         

                        This is no way to build web pages. Learn Dreamweaver and/or to do basic XHTML & CSS coding. Keep your images in one piece. Build layouts that are efficient for the web, not layouts that are designed for print and then "re-purposed" for the web.

                         

                        JET