logo: cropping circles and preserving transparent background

weikelbob
weikelbob used Ask the Experts™
on
Using Imageready CS2

On our logo, how do I make the background transparent (saving for web) so that the two white rectangles that are cropping our circles are transparent.

In other words, how do we make the background transparent and also get our effect where the circles stop at the screen's edges?

www.own-designs.com/nlpwiki/logo/expand1.ai

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2004
Top Expert 2004

Commented:
im sorry but its a bit unclear to me

your logo consits of 3 blue lines
and that gives us 3 white circles
and the last white part which is merging with the square blue line
and you want the 3 white circles to be transparent and the last white part to be white......am i right or....??
Commented:
If I get what you are trying to do, you have a white background, coloured shape and then white shapes over part of that to create your logo and want to make all the white transparent?

This is based on the assumption that you have a background layer, a layer with your coloured logo in and then some layers above this with the background colour to make it seems like bits are chopped out. Youre coloured logo layer(s) will have to be merged for the layer mask to work (it only applies to one layer)

I cant look at the .ai at the moment as I dont have PS on this machine.

Do do that CTRL click the main (coloured) logo layer and then CRTL-ALT click (should give you a little - icon) the white layers above it. Make sure the coloured layer is selected and then hit the quick mask button. Thats at the bottom of the layer window and is toiwards the left of the icons and the icon is a circle within a square. So instead of having white over your coloured layer to hide it you have actually masked that area out. Hide the white layers now and the background, just leaving the coloured layer with the layer mask on it. Save for web and pick PNG-24 or GIF (they have transparency) and youre done!

Hope that helps!

Author

Commented:
CaseMJ:

As long as you're talking about illustrator, you've got it. I'm extremely busy with clients this morning. In about an hour I'll be able to follow your directions.

Thanks!
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Author

Commented:
I can't figure it out. Every time I click on that little square and circle to the bottom of the layer pallet, the whole thing disappears.

I have the colored layer in one group and the white boxes in one layer above the colored layer.

I select the colored layer and deselect the white boxes, hit the mask button and everything disappears.

What am I doing wrong?

Commented:
do you want the land masses in the globe transparent too?

Commented:
here are two versions:

http://www.tsquared.com/ee/weikelbob/

let me know if either are correct. the yellow background is just there to show what would be transparent, it can come out easily.

i tore apart your ai file, and the way it was built. it has several objects behind other objects that would prohibit you creating either of these versions in imageready without altering the ai file first.

i'll be happy to send you the file if i'm on the right path.

Author

Commented:
Version A is great.

How would I do this myself?

Commented:
i don't think you can with just imageready and the illustrator file you have because of all the hidden objects in the illustrator file. if the hidden objects in the illustrator file are cleaned up, then you should be able to do this normally.

here is the 'cleaned up' illustator file and the gif with transparent background.
http://www.tsquared.com/ee/weikelbob/versionA.zip

Commented:
>i don't think you can with just imageready and the illustrator file you have


meaning i think you would need illustrator too in order to do the 'clean up'

Author

Commented:
I just noticed that I said imageready lol :)

I meant illustrator. I'm working in illustrator

The file I downloaded looks great. How did you do it?
Commented:
ok here is how i did it.

if you look at it in wireframe mode (choose view > preview) select the outter most box and color it yellow and then send it to the back (choose object > arrange > send to back). now jump out of wireframe mode (choose view > preview) and you'll see the white box behind "Where to go when you need to know" and "NLP infopedia." delete those boxes. now you can see the white box like thing behind the "F" in "infopedia." go back to wireframe mode (choose view > preview) and find that obscure line behind the "nfo" select and delete it. there is actually two lines, delete them both. now jump out of wireframe mode (choose view > preview) again. see the extra land masses extending beyond the globe? we need to get rid of that too. here is how. first select the land mass inside the globe (its one object so one click will do it). with it selected choose object > hide > selection. this "hides" the object for us. now select the globe and hide it the same way. now you'll see another hidden obscure shape that is the same color as the globe. select it and delete it. select all the white land mass still there and delete it. now choose
object > show all and the globe and land masses should come back. last we need to mask the circles. select all three circles (hold down the shift key and click on each circle till all are selected. choose object > group to group them together as one unit instead of three individual ones. with the circles selected, choose object > arrange > bring to front. now select the retaining box and bring it to the front too. now the stacking order is the box then the circles. select just the box and choose edit > copy and then with the box still selected choose edit > paste in front. this gives us a second copy of the box. select the box and holding down the shift key, select the circles too and choose > clipping mask > make. thats it.

when making a clipping mask, the trick is that the object doing the masking needs to be in front of the object being masked.

Commented:
oh yeah, delete the yellow box and do a save for web.

Author

Commented:
Great.

I'll work on doing the same thing myself.

The clipping mask is the only thing I would have trouble with.

Thank you guys for your great help.

Bob

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial