Solved

Blending one picture into the next

Posted on 2004-08-01
6
3,131 Views
Last Modified: 2013-12-13
Hi...
  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

Thanks
   Shawn

0
Comment
Question by:aztec
[X]
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
6 Comments
 
LVL 10

Accepted Solution

by:
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.

Cheerz
0
 

Author Comment

by:aztec
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?

Thanks
   Shawn


0
 
LVL 10

Expert Comment

by:Havin_it
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.
0
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

by:aztec
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.

Thanks
   Shawn
0
 
LVL 10

Expert Comment

by:Havin_it
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.
0
 

Author Comment

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

I've got it working now!

Thanks
   Shawn
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
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…
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"…
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…

691 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