Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Blending one picture into the next

Posted on 2004-08-01
Last Modified: 2013-12-13
  I'm pretty new to Fireworks (I know a little, but not too much). I'm trying to create a banner and in this banner I have 2 pictures next to each other - one is a globe that is kinda dark blue, and right next to that is a pic of a cruise ship which is a lighter blue with some green. I'd like to be able to have the tail end of that darker-blue globe just "blend" in gradually with the beginning of the cruise ship image, so it looks nice and seamless. Know what I mean?

How would I do this?

You can view my banner here: http://www.dingo-software.com/newbanner.png

...and download the png file here (if you want) : http://www.dingo-software.com/newbanner.zip


Question by:aztec
  • 3
  • 3
LVL 10

Accepted Solution

Havin_it earned 50 total points
ID: 11692083
1) Select the layer you want to fade-out, and click the 'Add Mask' icon (dotted circle in a rectangle) in the Layers panel. You should see a the mask icon and a second (blank) thumbnail appear in that layer's line.

2) Go to the gradient tool (click-hold on the paint-bucket to reveal it if it's not visible).

3) Click the colour-picker in the Properties panel, you'll see a gradient box, normally with black at one end and white at the other. There are little squares with arrows above and below each end. The top squares are opacity (transparency) and the bottoms are colour.  Make the top-left 100% opacity, top-right 0%, bottom-left black, bottom-right... doesn't matter as you won't see it!

4) Fireworks seems to extend the transparency right across the layer (did when I tried it on your PNG anyway), so drag the right squares (top and bottom) to about 1/3 or 1/4 from the left side. Click back on the panel area to close the popup.

5) Click-drag from the edge of the fade-out image to as far as you want the fade to extend. Holding Shift while doing this keeps the line straight. When you release, the image's edge should have disappeared. In your case that'll mean seeing the obscured ad-copy underneath, so I'd put a rectangle of blue underneath to keep it regular.

Hope that covers it. If the gradient does not go the right way, just drag it in the other direction instead and you should be OK.


Author Comment

ID: 11698798
I'm kinda lost... I *think* I followed your instructions, but the whole left side of my banner whited out totally when I did what you advised. When I tried from the other side, it whited out all the right side of my banner.

Also, I don't kno what you mean by this:

"In your case that'll mean seeing the obscured ad-copy underneath, so I'd put a rectangle of blue underneath to keep it regular."

...I don't have any ad-copy at all on my banner... it's just pictures.

Anyway, do you think you could just go and do that quick change for me, and just upload the new PNG ? Or is that maybe asking too much?


LVL 10

Expert Comment

ID: 11702202
I can do that if you like, but I'd sooner see the resolution played out here so others can benefit.

When I said 'ad copy', I just meant the blurb on the right end of the lower layer which is obscured by the picture of the ship. It's not visible in the actual banner.

Re the whiting-out, it appears like either you have not set the opacity to 0% on the gradient, or you have not linked the mask to the layer. Or possibly both. A mask of any kind should not put any new colour into the image.

I did slightly mess-up my instructions: It's probably best to setup the gradient tool first, because the appearance in the dialog is a bit confusing when you are already in masking mode (sort of like transparent, to dark, to transparent) if you follow the above in order (sorry!).

If you want to be sure of getting this right, start by ensuring 'Linear' is selected in the property inspector before you open the gradient settings (this is the default anyway unless you've already been playing with it).
Then, in the Presets dropdown, select Black/White. That gives you the starting point to set it as I described above.

Once that's done, then add the mask. A word about that: it should be the 'cruise ship' image (not actually a 'layer' in Layers Panel terms, as both images are in one layer) that you select. When you click Add Mask, an icon like the button should appear next to it, and a second (blank) thumbnail should appear with a chain icon. A yellow border round the mask's thumbnail means you are working on the mask - if that is not what you see, click on that thumbnail to activate it again.

I know this procedure (like many in Fireworks) isn't very intuitive, but once you've cracked it it's very handy! Please let me know if any of my wording is unclear.
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.


Author Comment

ID: 11709811
I don't know what I'm doing wrong - I'm still getting the same results as last time. It whites-out everything to the left of where I click-drag the paintbucket. This is really weird.

See, I followed the Fireworks built-in tutorial the other day and it did a little bit of masking. It first "merged-down" 2 bitmaps into one before it did the masking... so that's what I did first too - I merged-down the cruise-ship picture, with the rest of the main banner to the left to make only one bitmap... then I tried following your instructions. I don't know if that's why I'm having this trouble or not.
   The "ad-copy" you mention is the stuff that I'm trying to block out with the image of the cruise ship - I don't want that stuff there at all.

Anyway, I guess I'm asking you now if you can just do this for me... :-)
I'd *like* to be able to know how to do it myself, but it just doesn't seem to make any sense.

LVL 10

Expert Comment

ID: 11711260
Ah. Yes, unfortunately once you have the two images merged together, the operation we're discussing is no longer possible. I see you still have the original PNG on your server, so follow my instructions using that file.

Author Comment

ID: 11720551
Yep, that's what did it!

I've got it working now!


Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can i manage a few hundred thousand pictures? 9 346
web server IIS tiff files 2 78
Prototype / Wireframe App 3 139
High Resolution .gif files 3 110
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.

856 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