Solved

Blending one picture into the next

Posted on 2004-08-01
6
3,121 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
  • 3
  • 3
6 Comments
 
LVL 10

Accepted Solution

by:
Havin_it earned 50 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:aztec
Comment Utility
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
Comment Utility
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
Comment Utility
Yep, that's what did it!

I've got it working now!

Thanks
   Shawn
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Cross-Platform website design 4 278
Grabbing a Graphic 7 66
Microsoft Image Composer 6 115
Graphics quality 5 60
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 tutorial viewers will learn how to create blended and gradiated shapes in Illustrator using the blend tool Draw two shapes, one of them in a different color: Select both and create a blend by going to Object > Blend > Make: Blends can also b…
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.

772 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

12 Experts available now in Live!

Get 1:1 Help Now