Skip navigation
Currently Being Moderated

How do I crop an image from CS4 Illustrator for use in Dreamweaver?

Apr 16, 2009 5:21 PM

I have designed in Illustrator for years but I am fairly new to working with Dreamweaver.


I would like to cut part of an image from an Illustrator design to use as a background in a Dreamweaver design:

- How is this done?

- Is there a better way?





  • Currently Being Moderated
    Apr 16, 2009 9:41 PM   in reply to A1 Leasing

    There are several ways for instance if you hold the shift key while you have the artboard tool selected and then drag over the area of the art you want to be cropped for use on the web, then you can simply save for web and device and that active area will be the only area selected and saved.


    You can also with this technique use this artboard when using the file as a smart object in Dreamweaver no need then to save for the web and if you make changes you will access that through Dreamweaver which will open the smart object file in Illustrator for you to edit. This is a very good way of doing things. Probably the easiest and best way.


    The other ways would be to make a clipping mask of the area you want and either do a save for the web or again bring it into Dreamweaver as a smart object.

    Mark as:
  • Currently Being Moderated
    Apr 22, 2009 12:54 PM   in reply to A1 Leasing

    Well yes and no hold the shift key click down with the artboard tool let go of the shift key and while the mouse is still in the down position drag to make a new artboard of any dimension and proportion.


    Oh I almost forgot they did not implement smart objects for Illustrator perfect!


    But you can do this with an artboard as I wrote originally I am thinking since you can bring an Illustrator file in as a smart object into Photoshop and a Photoshop file into Dreamweaver as a smart object it should be possible to combine the two.


    Haven't tried it yet but might be worth the try.


    It should work.


    Yes i tried this and it works so you can have Illustrator smart objects in Dreamweaver keeping in mind that you have to make it a smart object in Photoshop first and then import the Photoshop file. But since you access the photoshop file directly from Dreamweaver and the the smart object directly from Photoshop and you will have to update the art when you are in Dreamweaver I think it is just really an small extra step and why they did not see this themselves is a mystery.


    It can be done they way you have always worked and want to continue to work.

    Mark as:
  • Currently Being Moderated
    Apr 22, 2009 2:43 PM   in reply to A1 Leasing

    A1 Leasing wrote:


    Is there a way to do this in Illustrator? I wish I knew which software to use for what. I've always used Illustrator for graphic design and Photoshop to deal with raster images that would then be used in Illustrator.


    Well, nobody uses vectors on the web except for Flash and a few excotic apps that generate SVGs dynamically for visualizing data or other procedural stuff. There's also some Java applets that use SVGs, nbut otherwise the format is pretty dead in the water. In addition, the standard web measurment unit is pixel, so with these two hints, you could conclude that, while you may be able to do the actual base design in Illu, you will eventually be far better off rasterizing your artwork in PS and take it from there. Especially your web designer will at one point come up to you and ask for elements tailored to specific sizes so they fit in his hidden table cells and background div containers, therefore PS is way to go. I'd even go so far as to not use smart objects in PS, as their dynamic rendering may affect their appearance when you re-arrange things, which may result in differences if e.g. you need to generate palette based images (PNG, GIF). It really depends, but in general you should consider that there are severe limitations in web design that will affect how your stuff will ultimately look in a browser...



    Mark as:
  • Currently Being Moderated
    Apr 22, 2009 3:01 PM   in reply to Mylenium

    Never had a problem like this with smart objects in Go Live so and 

    since you can set what the final out put would be of the smart object 

    directly in Dreamweaver i would say smart object is the way to go 

    regardless of mylenium's fears.


    I think he will find this to be a plus as in AE or PPro this would be 

    a plus never to have to look for the original art from AI to 

    Photoshop. I thik you will find by letting dreamweaver take care of 

    the conversion to a web format this will give the most error free 



    the other way you end up with a ton of variations you will never ever 

    remember what they are there and what they were for.

    Mark as:
  • Currently Being Moderated
    Apr 23, 2009 9:50 AM   in reply to A1 Leasing
    Mark as:
  • Currently Being Moderated
    Apr 27, 2009 11:00 AM   in reply to A1 Leasing

    It is very simple. crete  your artwork, then crop the area using a new 

    art board with the artboard tool by holding down the shift key then 

    start to drag then continue to drag but let go of the shift key so you 

    can drag without restraint. Then when you have the area you want while 

    the art board is selected go to File>Save for Web and Device and in 

    the image tab check to make certain yu have clip to artboard as you 



    That is all there is to it.


    Now since you have tried this several times and are convinced we are 

    telling you something that is not possible even though it is easy to 

    accomplish this means you have what I call controlitis ,


    Which means you want this to work they way you think it should rather 

    than the way it actually works. So in order for you to get this to 

    work you will have to ollow the direction given to you even if it 

    kills you or forget about it.


    Good luck.

    Mark as:
  • Currently Being Moderated
    Apr 27, 2009 11:39 AM   in reply to A1 Leasing

    I'll let you go this time but next time I get really tough…

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points