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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Clipping Paths in InDesign 1 224
Adobe Illustrator CS6 - font not found 7 2,295
Microsoft Image Composer 6 117
Color? 8 91
I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
In this second Micro Tutorial in the series,  viewers will learn more basic shortcuts and functions of Illustrator. In this tutorial you will learn about the eyedropper tool, zoom , ellipses and more.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now