How to crop or mask vector graphic compositions?

Hi Team,
I'm loving Fireworks CS5, and want to take advantage the CSS & Images export features. This, of course, requires that design elements fit into the rectangles to be used as the "div containers" and do not overlap them. Often the original design of the element exceeds the dimensions of the container. Is there a way to crop the composition?
Here's an example:
I want to add a bit of shadow at the ends of the rectangles below.
Step 1: I've created shadowy elipses to partially overlay the ends of the rectangle.
Step 2: I overlay the ends of the rectangle
Step 3: Now I'm stuck. Can't find a way to mask, punch, or crop the resulting composition to produce a result similar to the "flattened bitmap" below.
Can this be done? It would be great if I could continue to edit the source components as vectors and didn't have to flatten to bitmap.
Many thanks,
Monu

Sorry Linda,
Your advice made perfect sense, and paste-inside looks good on screen. However, when exporting to CSS, I'm getting the error "header_bg_elipse_right overlaps with header_bg".It seems that having the handles poking out beyond the dimensions of the mask upsets the export
Any other ideas?
Thanks
Monu

Similar Messages

How to copy and paste vector graphics

I have a program that draws curves and I would like to copy and paste them as a path into Adobe Photoshop.
I am using the Clipboard class (Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard()), but I
do not know what string I should use for the StringSelection argument in the setContents method. I tried the
string that describes my curves in PostScript.
But that didn't even work for pasting into Adobe Illustrator, although Illustrator is capable of opening
a PostScript file. (However Photoshop only opens a PostScript file as a bitmap, not as a path.)
With Illustrator, instead of pasting the curves, it just pasted the PostScript text.
Please help.
Thanks.

For me, freehep is the fifth hit when googling "java vector graphics library". But of course I don't get to "[Access hidden information|http://www.copernic.com/en/products/agent/index.html]" without paying up :).
For a simpler way: since you already say you can save to postscript, make a temporary ps file and export it in a file list (keywords "java drag and drop files"). Perhaps Illustrator then opens the file and the user can copy/paste it there. Otherwise you have to figure out what Illustrator expects on the clipboard and put it there in the same format.
Another option might be to use some com wrapper to talk to Illustrator directly (but probably need a commercial com wrapper for that).

How to Use the Scalable Vector Graphics API (JSR 226)

im doin an Application with Maps and locations...
i need 2 use the Scalable Vector Graphics API (JSR 226)..
can anyone plz guide me to get it and use the API.. Im using netBeans 5.0
it will be great help :)
Regards
Muhammedh aka MNM

Thanks Rohan :)
i did read some stuff from the URLs u gav me :)
and I manage 2 solve the prob i had :) (Thank God)
1. downloaded latest version of netBeans (5.5)
2. Java SDK 6 :D...
3. the key thing: Wireless tool kit for CLDC 2.5 Beta
now when u create a project make sure u set the above given tool kit :)
when u set it.. u get an option 2 select the APIs frm a List.. Check on SVG API :)...
Other APIs Such as,
* wireless Messaging API
* Location API
and many more...
Cheers 2 Every1 :)
regards
Muhammedh

How to "crop" a masked BMP?

I have a 'puzzle' with the pieces 'scattered' haphazardly around. These pieces are all instances of my PTPuzzlePiece.as class, which works great for all intents and purposes. When the user selects a photo from the picture library, the pieces all properly display their 'masked' portion of the image. See below:
However, I have a problem in that the masked bitmap displayed in each piece is only 'masked' and not cropped. This means that, for instance on the third piece down on the left hand side, 100 not-visible pixels of bitmap extend below the piece and out of the 'framed' area. This totally throws off my calculations when I go to scale and then print the screen using the AIR PrintJob, and when I scale that 'card' down to a 'button' on the menu where the user chooses which 'card' they wish to use.
Is there a way to crop the not-visible area out, or copy only the visible pixels as BitmapData into a new Bitmap entity so that the layout is entirely contained within the 'frame'?
I've poured over the documentation and have come up empty.
Thanks for any help.

Puzzled... I thought I had marked it as answered.
Found this as a possible less exact but more efficient example as it appears that the 'rect' region of all of my pieces is within the 'frame'... if that makes sense.
var square:Sprite = new Sprite();
var circle:Sprite = new Sprite();
var holder:Sprite = new Sprite();
square.graphics.beginFill(0,.5);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
circle.graphics.beginFill(0);
circle.graphics.drawCircle(0,0,50);
circle.graphics.endFill();
addChild(holder);
holder.addChild(square);
holder.addChild(circle);
square.mask = circle;
var cloneData:BitmapData = new BitmapData(holder.width,holder.height,true,0x00FFFFFF);
cloneData.draw(holder);
var clone:Bitmap = new Bitmap(cloneData);
addChild(clone);
clone.x = 30;
I'll see how well I get on with that. I may in the end be forced to do it pixel by pixel, but I'm hoping not.
Thanks!

How can I make ANY vector graphics with graphics2D and save on clipboard?

I am at my wits end here, and need some help. Simply put, I have a program that creates a basic x-y graph, drawn in a jpanel. I want to create the graph as a vector (emf, eps, svg, I don't care anymore, any of them would be good). But, all I get is a jpg or bitmap.
I tried using the infamous FreeHEP programs, but it won't recognize the output as anything but "image" which means bitmap/jpg.
     The user enters x/y data, clicks a button, which crreates a jpanel thusly:
public class GraphMaker extends JPanel {
static BufferedImage image = new BufferedImage(600, 500, BufferedImage.TYPE_INT_ARGB);
GraphMaker(double[] xVals, double[] yVals, double[] sems){
setPreferredSize(new Dimension (600,500));
symSize = 10;
XminV = 0;
XmaxV = 0;
// code here just converts input x and y's to pixel coordinates, spacing of ticks, etc...
for (int i =0;i < ArLn; i++){
gX[i] = xO + (gX[i] * xRat);
gX[i] -= xStart;
gY[i] = gY[i] * yRat;
gY[i] = yEnd - gY;
semVal[i] = semVal[i]*yRat;
     Ymin = yEnd - (Ymin*yRat);
     Ymax = yEnd - (Ymax*yRat);
BufferedImage anImage = new BufferedImage(600, 500, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = anImage.createGraphics();
g2.setBackground(white);
g2.setColor( Color.WHITE );
g2.fillRect(0,0,600,500);
g2.setStroke(stroke);
// here I use the values to draw lines and circles - nothing spectacular:
          g2.setPaint(Color.blue);
          int ii = 0;
          for ( int j = 0; j < ArLn[ii]; j++ ) {
g2.fill(new Ellipse2D.Float(LgX[ii][j] - symOffst, gY[ii][j]-symOffst, symSize,symSize));
g2.draw(new Line2D.Float(LgX[ii][j],(gY[ii][j]-semVal[ii][j]),LgX[ii][j],(gY[ii][j]+semVal[ii][j])));
g2.draw(new Line2D.Float(LgX[ii][j]-2.0f,(gY[ii][j]-semVal[ii][j]),LgX[ii][j]+2.0f,(gY[ii][j]-semVal[ii][j])));
g2.draw(new Line2D.Float(LgX[ii][j]-2.0f,(gY[ii][j]+semVal[ii][j]),LgX[ii][j]+2.0f,(gY[ii][j]+semVal[ii][j])));
                    g2.draw(new Line2D.Float(xLoVal[ii],yLoVal[ii],xHiVal[ii],yHiVal[ii]));
image = anImage;
And, when the user clicks on the "copy" button, invokes this:
public class Freep implements Transferable, ClipboardOwner {
     public static final DataFlavor POSTSCRIPT_FLAVOR = new DataFlavor("application/postscript", "Postscript");
     private static DataFlavor[] supportedFlavors = {
          DataFlavor.imageFlavor,
          POSTSCRIPT_FLAVOR,
          DataFlavor.stringFlavor
     private static JPanel chart;
     private int width;
     private int height;
     public Freep(JPanel theGraph, int width, int height) {
          this.theGraph = Graphs;
          this.width = width;
          this.height = height;
//******This is the key method right here: It is ALWAYS imageFlavor, never anything else. How do I make this an EPS flavor?
     public Object getTransferData(DataFlavor flavor) throws UnsupportedFlavorException, IOException {
if (flavor.equals(DataFlavor.imageFlavor)) {
return GraphMaker.image;
else if (flavor.equals(POSTSCRIPT_FLAVOR)) {
               return new ByteArrayInputStream(epsOutputStream().toByteArray());
else if (flavor.equals(DataFlavor.stringFlavor)) {
               return epsOutputStream().toString();
          } else{
               throw new UnsupportedFlavorException(flavor);
     private ByteArrayOutputStream epsOutputStream() throws IOException {
EPSDocumentGraphics2D g2d = new EPSDocumentGraphics2D(false);
g2d.setGraphicContext(new org.apache.xmlgraphics.java2d.GraphicContext());
ByteArrayOutputStream out = new ByteArrayOutputStream();
     public DataFlavor[] getTransferDataFlavors() {
          return supportedFlavors;
     public boolean isDataFlavorSupported(DataFlavor flavor) {
          for(DataFlavor f : supportedFlavors) {
               if (f.equals(flavor))
                    return true;
          return false;
     public void lostOwnership(Clipboard arg, Transferable arg1) {
The same happens with FreeHEP - I want the flavor to be EMF, but the program sees an image so it is always imageFlavor. I know I am missing something, but what, I don't know.
thanks for your help.

I don't think there's a built-in solution. One workaround I've seen is to create a dummy graphics class that overrides the desired drawing functions. Instead of actually drawing pixels, the object writes postscript commands to a buffer. There also seems to be commercial code that does exactly this.

New to FW - how to resize a simple vector graphic?

I'm brand new to Fireworks and just downloaded the trial version of CS5 a couple hours ago. I hunted around and watched some of the tutorials but haven't found an answer to my question so I'll take the easy way and ask here!
I've got an existing png file I need to modify to use as elements to a website I'm building in Dreamweaver. There are a couple vector based boxes that I need to change the dimensions of. They've got rounded corners and a stroke border. Question: How do I simply lengthen the width of these boxes without changing the shape of the corners?

Jim, double clicking on the objects didn't work for me. Here's what I had to do:
1. select the object w/ black pointer
2. go to Modify > Symbol > Convert to Symbol
3. specify as graphic and enable 9-slice
4. change the width numerically in the properties inspector.
Thanks,
John

How do I edit individual vector graphics on a background layer?

I am using Photoshop CS6. I have a .psd file with a background layer that has a sublayer called "bitmap".
I want to resize the rectangles on the background layer, and add additional "button" graphics, but am unable to edit any one shape.

I was a bit confused as there were vector masks and layer masks that I was able to reveal from the Layer menu.

How can I load bitmaps/vector graphics in my application using only actionscript 3.0?

I want to have DisplayObject that will randomly contain bitmaps/vectors from some database. I want to implement this using only code. How?

use the loader class:
var loader:Loader=new Loader();
loader.load(new URLRequest("image1.jpg"));
addChild(loader); // or, yourdisplayobject.addChild(loader)

Vector graphics with Photoshop Elements 13

How can I maintain the vector graphics that are saved for Illustrator (AI or EPS) in Photoshop Element 13. There are a lot of free typography graphics for Illustrator that I would love to use in Photoshop Elements 13
Mireille

if you downloaded both the exe and 7z files to the same directory, double click the exe.

AIR performance for vector graphics

Hello,
I prototyped an app in AS3, and now I want to move it iPhone. When I had came to this forum before a while back (it was called something else; the Flash to iPhone convertor wasn't a part of Adobe AIR), I got scared by the performance issues reported by the users. Therefore, I recently bought a Mac Mini to do iPhone development with the intention of porting it using Cocos2d-X. After going through the APIs and examples, I see that Cocos2d-X is not as good as AS3. My app uses a lot of vector graphics. My apps uses 100+ vector Sprites with different fill effects. I could also apply transformations on them. I've read the performance for the iPhone has improved, but how is the performance for vector graphics?
Thanks.

Does AIR 3 for iPhone use OpenGL ES 2.0 in the backend?
Judging from this http://www.adobe.com/products/air/tech-specs.html they imply they don't.

How do you prevent Acrobat PDFMaker from rasterizing vector graphics?

I am using the "Create PDF" button (provided by the Acrobat PDFMaker in Acrobat X) to create a PDF from a Microsoft Word 2010 document.
This works fine, except that vector graphics in the Word document appear in the resulting PDF as raster graphics. (That is, when I zoom in, document text outside the graphics appears smooth, but the graphics are blocky; and text inside the graphics that should be retained as text - it's not converted to curves - is just pixels.)
The original artwork for the vector graphics is in CorelDRAW X6 (sorry, Adobe!).
I have exported the following files from the original vector drawing in CorelDRAW:
- EPS (with TIFF preview)
- Windows metafile (.wmf)
- Enhanced metafile (.emf)
I can insert any of these files into Word okay (Insert > Picture), but the resulting PDF always contains a rasterized (bitmapped) version of the vector graphic ("line art").
From memory, this didn't use to happen in my previous working environment (Acrobat 8 Pro with Word 2003, using artwork exported from CorelDRAW 12).
How do you prevent Acrobat X PDFMaker from rasterizing vector graphics? Or is Word 2010 (or CorelDRAW X6) somehow to "blame" here?

Transparency Flattening is being invoked.
From the Create PDF button, select Properties, what is your setting for Default Settings? Select High Quality Print

How to print a Proe .drw ( Vector Graphic ) file to a printer.

I am having a drawing model (proe .drw file). I want to print this file to a .tif file using java.The print driver is "Informatik Image Driver 3.20".
.Can some one help me out with the steps involved in this.
I understand .drw file are of type Vector Graphic. How to print it.
I also have a corresponding postscript file generated from the .drw file. Is there a way to print this post scritp file to the printer mentioned above to create .tif.
Any quick help will be deeply appreciated.
The postscript file content as below
%!PS-Adobe-2.0
%%BoundingBox: 0 0 1190 841
%%Creator: Pro/ENGINEER
%%Title: c:/temp/xx.plt
%%CreateDate: 18-Mar-10 17:29:28
%%DocumentFonts: Times-Roman
%%EndComments
%%EndProlog
%%Page: ? 1
%%BeginPageSetup
systemdict /setpagedevice known
<</PageSize[1190 841]>> setpagedevice
} if
%%EndPageSetup
newpath
%90 rotate 0 -11.6929 72 mul translate
/m {moveto} def
/l {lineto} def
/rm {rmoveto} def
/rl {rlineto} def
/slw {setlinewidth} def
/srgb {setrgbcolor} def
/sd {setdash} def
/gs {gsave} def
/f {fill} def
/gr {grestore} def
/s {stroke} def
/np {newpath} def
0 setlinecap
2 setlinejoin
0 0 0 srgb
72 72 scale
s
[] 0 sd
s
[] 0 sd
s
0.02 slw
1.21121 0.393701 m
1.21121 11.2992 l
1.21121 0.393701 m
15.3242 0.393701 l
15.3242 11.2992 l
1.21121 11.2992 m
15.3242 11.2992 l
8.01388 7.69355 m
5.49708 7.69355 2.5168 0 360 arc
14.2189 7.69355 m
10.8812 7.69355 3.33771 0 360 arc
8.03498 5.85547 m
7.69023 5.85547 0.344747 0 360 arc
11.1515 5.53362 m
7.81378 5.53362 3.33771 0 360 arc
3.33558 4.07796 m
7.52551 5.0152 4.29347 192.609 398.596 arc
7.44242 10.0908 m
4.1278 2.50717 8.2764 66.3911 106.456 arc
s
0 0 0 srgb
0 rotate
showpage
---------------------------------------------

I did try google. But could not get a solution. Any idea what is the doc flavor for .drw file.?
Edited by: ekuriakose on Mar 22, 2010 11:47 PM

How do I automate global vector shape, mask & path transfers to Illustrator?

Using: WIN7, Adobe CS5, PS, AI (but others may appreciate answers for CS6, etc.)
When I need to move a project from Photoshop to Illustrator, I need an automated way to prep shape and vector mask items for export--preferably preserving the structure and layout that already exists as layer names and order, character and paragraph settings, and of course global registration. My scripting is limited to recording actions, so I need to find an existing script or get coached on this. Any recommendations?
I have googled and waded through numerous forum posts trying to research this on my own, so I know about the ability to export my path collection, but that's usually inapplicable in reality. It only deals with vectors from the Paths pallette. In Photoshop, I use the Paths pallet to store master and WIP paths, but all the working paths are either shapes or vector masks--or active type layers. Often enough that it's become an issue, I'll need to move the whole project to Illustrator. Obviously, the process has issues; I'm not expecting the rastor layers or Photoshop styles to carry over, but I see no reason why I can't capture text, shape and vector mask elements.
They all have a vector component, but simply opening a PSD in Illustrator flattens (badly) the layers. I select the "Convert Layers as Objects" but have yet to see it extract editable text. I'm not sure if it even attempts to do anything with vector shapes or masks. I've got a process for moving a project one element at a time, using registration marks--but this requires turning text into shapes most of the time, especially if I am trying to preserve kerning and leading crucial to the layout. Maybe I just have not found the right info, and there is a way to transfer editable text without losing character and paragraph settings. I'd love to hear about it.
For now, I'd be happy to stop wasting time doing a ton of conversions and renaming by hand, just so I can preserve the work I've already invested.
One suggestion, posted under a multiple path export question, was to use scripting... but no one explored or explained how to go about it. I'm not asking for the impossible, however. I simply need help working out my own solution: if there is no application method for transferring the elements, try to script a method to prep those elements for export. Before I even attempt to reinvent someone's wheel, I am putting the question out there:
Does anyone know of a solution that already exists?
I appreciate hearing your advice and thank you for giving this some attention!
edit: I kept at it and managed to open my current project PSD in AI with text and shape/mask vectors successfully--not as cleanly as I'd hoped but the relative positioning of things was acceptable. I am still interested in hearing people's suggestions on better ways to transfer work from one tool to the other, though. I know this is going to come up for me again and again...
Thanks!

Hi,
It sounds like you have gotten this working for your project, but you might look at this thread for a few different solutions. http://forums.adobe.com/thread/1045757

How do I replace one vector mask with another?

I have a template for a web site that I'm trying to figure out as I learn CS5. The template has a vector mask created out of some writing that was converted into an object/vector mask. I would like to replace with a layer I created that has different writing in it. How would I replace the vector mask in the template with the new object I created?
Thanks for any help you can give.
Best -- Catherine

• In the Layers Panel draw the Layer’s Vector Mask icon onto the trashcan-icon
• move that Layer above the new Text Layer
• invoke Create Clipping Mask (command-alt-G) from Layers Panel’s fly-out menu or alt-click on the line separating the two Layers’ icons

How do you apply a vector mask to a folder in Photoshop CS6?

The ways you apply vector masks in CS6 is different than in CS5.
I knew how to apply a vector mask to a folder of layers in CS5.
I cannot figure out how to do it in CS6.
So my question is:
How do you apply a vector mask to a folder in Photoshop CS6?
And while we're at it, what are the best methods for applying vector masks to regular layers?
Thanks.

thomasbricker wrote:
Im back...
The thing is, Im not usiing the pen tool to create the vector shape. Im using the vector box tool to create a rectangle [...]
Yes and that's why I wrote the words "vector tool" and never mentioned a pen. (Although the instructions would be exactly the same for using the Pen Tool because the Pen Tool is a vector tool.)
which I then want to turn into a layer group mask.
And yes, this does not work the same way as it did in CS5.
I wish it did. : |
Adding a vector mask to a layer or group is exactly the same in CS5.1 and CS6 on my Mac. Maybe that's done differently in CS5 than in CS5.1, but it seems unlikely.
You have the layer or group targeted. Now draw a rectangular path after making sure the Rectangle Tool is in Path mode, and not Shape mode and not Pixel mode. Then Cmd/Ctrl-click the Add Mask button at bottom of Layers panel.

How to crop or mask vector graphic compositions?

Similar Messages

Maybe you are looking for