Translucent MAC-like icons

Posted on 2004-04-01
Last Modified: 2013-12-13
How to create translucent icons likese these in Fireworks 3 or Fireworks MX?

Pleae note : Specific design like the icons called DOMAINS, FILE MANAGER, LOG VIEWER, DNS

Give step by step process and I will check it. If it works, I am willing to part with 500 points :-)
Question by:sylviawee
  • 2
  • 2

Expert Comment

ID: 10740223
I really don't know what you expect for an answer here.  It's pretty cut and dry.  You'd just draw your shapes and color them accordingly.  The only prob you may run into (depending on your skills with the drawing tools) is that FW won't let you save the file in an .ico format.  You'll need another tool to convert the image into an icon when you're done.  Can you be more specific with the issues you're having?


Author Comment

ID: 10754395
I want that translucent-transparent look (just like the design example given, ie domains, file manager, log viewer, dns)

Accepted Solution

monolith_888 earned 500 total points
ID: 10759467
To get a translucent-transparent look, you need to use a combination of Alpha Transparency and Masking...

Fireworks MX:

1) Draw Shape (say Rectangle 200x200, color:white).
2) Set Opacity = 50%
3) Draw second shape (rectangle 100 x 100, color:green)
4) Click 'Add Mask' (bottom set of buttons on the Layers Window)
5) Select the Gradient Fill Tool from the tool bar.  Use a Linear Black-White fade pattern (or any other pattern that you want) from the Gradient Properties Box.
6) Change the order of layers so that the orignal rectangle is on top. (top of the physical list / top of the gradiated layer).

Example img:

I will send you the PNG if you like.


Author Comment

ID: 10762465

I'm a beginner so I tend to ask questions that may be similar to you but different to me. Everyone has it's own way of learning and if you just gotta live with that. It's either you don't reply and close both eyes and pretend you don't see this question OR you can help. I don't pay for my account just to get dry remarks for some serious questions I pose here and in the other posting of mine too.

To Blake, I really appreciate your answers. Turns out I can use the same procedures on Fireworks 3 as well, as I use Fireworks 3 and Photoshop 5.5 in the office and Fireworks MX and Photoshop CS at home. You can have the points. Thanks...

- Sylvia Wee

Expert Comment

ID: 10763059

I in no way was intending a dry remark.  I was simply stating how I saw things.  Nothing of what I said was meant to have any implicit/explicit attack on you, or your talent as a designer.  Being that this was how I saw things, I just wanted to get a clearer idea of what you were having problems with.  Was it the shapes of the opacity?  That's all.  And as far as your other Question goes, I removed the second post you made simply because it was a verbatim repeat of this question.  Posting two questions in one thread is against the MA, but I didn't think you knew about it, so I deleted it, and explained myself.


Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question