Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Blending one picture into the next

Posted on 2004-08-01
Medium Priority
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
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
  • 3
  • 3
LVL 10

Accepted Solution

Havin_it earned 200 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying 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

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.
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…
Suggested Courses

618 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