Blending an image with a gradient

Hi
I am putting together a flyer which will have a rectangular bar across the top of and A4 sheet of paper with a gradient applied left to right dark to light. On the the right hand side of the rectangle i have placed an image on top of the gradient. I would like to blend the image into the gradient so it looks as if the gradient starts of dark then gets lightsbefore emerging as an image. Not really sure if it will look anygood but i dont know how to do it so i cant say.
Any one out there understandwhat i mean and offer some help???
Thanks in advance
Phil

Okay. You caught me. That was a plant. I was testing to see if you'd notice that. ;-)
One of the rather odd but useful cavats of Illustrator's features is the behavior of its basic radial grads. Try this, just by way of experiment:
1. Rectangle tool: ShiftDrag to draw a square.
2. Give it an ordinary (boring) radial grad fill.
3. Black Pointer: Drag the bottom middle handle of its bounding box upward to make the square a horizontal rectangle.
Note that the radial grad also takes on an elliptical shape. Now do this:
4. Get the Grad fill tool. Click (don't drag) somewhere inside, but far toward the left of the rectangle.
Note that the grad fill is no longer concentric. It's "glow" focus is now off-center; "shoved up" against one side of its elliptical shape, like a pattern suggestive of, for example, a meteor or the wind displacement at the front of an airfoil.
5. Grad Tool again: ShiftDrag across the rectangle, left to right.
6. Click inside, but to the far right of the rectangle.
See how you can manipulate this "squashed" radial fill? You'll occasionally encounter seemingly errant behaviors like this in AI. When you do, it's usually worth taking some time to experiment with them, using the simplest constructs you can, to isolate the behavior you are exploring and thereby coming to an understanding of how to exploit them with some measure of predictability.
JET

Similar Messages

How would you replace a solid color image with a gradient?

I am trying to figure out what I am even trying to ask, so I can search the appropriate terms, but basically I am trying to get the texture with the white background on the left to have the color replaced with the gradient on the right. Seems simple, but I can't figure it out.

Hi FloridaLegend, this is an adjustment layer grouped to the image (so you keep the original sourced image). This way you always have the original artwork you can go back to.
I added a b&w adjustment layer so you don't get the blue coming through, then I grouped to the layer (Ctrl+Alt+G) then added the blend to the layer above.
Here are some screenshots that should help:

Changing the base color of a raster image with a gradient.

Hi,
I have a small (8 pixel wide x 75 pixel high) raster (png) image that is I nice looking arangement or gradient of shades of green. I have a sample website I created when reading DreamWeaver CC Classroom in a Book that repeats this image horizontally to create the backgroung for a navigation menu.
I would like to "recreate" this same effect for my own website but in shades of gray instead of shades of green. Can anyone tell me what is the best way / tool in either Photoshop or Illustrator that would allow me to change this raster image so that each shade of green would be converted to a corresponding shade of gray, while preserving the same general effect / appearance that I am trying to re-create? If you could point me towards a tutorial or explanation of how to do this, I'd really appreciate it.
Thanks in advance,
Paul

One of the easiest ways is to just convert your color image to grayscale.
Image>Adjustments>Desaturate or shift-ctrl-u (windows) shift-cmd-u (mac)
Image>Adjustments>Black and white This filter will allow you to preview while to change individual colors if needed to darken or brighten that shade. (This would be more noticeable with a multi color image)
Image>Adjustments>Hue and Saturation or ctrl-u(windows) cmd-u(mac) This command will allow you to desaturate a color or alter its hue and or brightness. (This works good for changing the green to blue for example but will work for desaturating the green as well)
Most of those are called destructive commands as they are permanent.
Layer>New Adjustment Layer>Hue/Saturation
Layer>New Adjustment Layer>Black and White
Layer>New Adjustment Layer>Gradient Map
These are all non-destructive layers in that you can go back any time and alter these setting assuming you save in a format that supports layers. Like psd or tiff.

Does Photoshop always blends transparent images with white color?

It looks like merged-image-data in PSD files contains RGB data which is blended with white color (based on transparency). Is that correct for all versions of Photoshop/PSD? Can I disable it or change that color?

I think you're misinterpreteting what you're seeing. In the specific example you cited, IrfanView is reading the flattened composite, assuming you're saving as a Maximum Compatibility PSD, as it hasn't the ability to mix layers.
Perhaps this flattened composite is what you're asking about.
In the actual layers of the file, when Maximize Compatibility is not specified, Photoshop puts pure white in the pixels where there is complete transparency, but for partially transparent areas there's no premultiplication.
Consider this sequence:
-Noel

How do I apply multiple gradient feathers to a single image with the Gradient Feather tool only?

Is there a way to do this WITHOUT the Directional Feather tool? That tool has limited options for transparency. I know Photoshop lets you do this.

Thanks. That's what I thought I might need to resort to. It's disappointing that multiple effects is not longer an option. However, from reading through the forums, it sounds like things are a lot better since '08 (I must have been on a hiatus from video production during that iteration of the program!)...

How do I make a custom brush image in a gradient color scheme in Photoshop Elements 12?

I want to make a custom brush image in a gradient color scheme. I know how to change the hue jitter, but I want to "paint" the image with a gradient between two colors. For example, I have an image of an octopus that I have used to create a custom brush. I want the top of the octopus to be hot pink and gradually fade into a deep orange at the end of the tentacles. Everything I've looked up just colors the background. Thanks in advance!

Try the following:
Open the octopus image
Open a Gradient Map Adjustment layer above this. There are several preset gradients, but in my version of the program I don't see one with pink to orange.
When you double click on the gradient bar in the Adjustments palette, this will open up the Gradient Editor, where you can tailor the gradient to your specifications with color and opacity stops. (see below)
This will apply the gradient to the entire picture. However, the adjustment layer has a built-in mask (the white rectangle).
Left click on this and paint with a black brush to hide the gradient outside of the octopus. If you go too far, you can correct with a white brush.
Now, as to the Gradient map adjustment layer, here is how to configure it:
http://retouchpro.com/tutorials/?m=show&opt=printable&id=132

How to Blend Image Edges with a Gradient

Hi All
I've created a transparent gradient over an image. The problem I am having is that the edges of the image are visible beneath the gradient. I know how to correct this in Photoshop but I am having difficulty in Illustrator.
How can I create a smooth blend of the gradient over the image without seeing the edges of the image?
Thanks
George

If the background of image that you have underneath the gradient is a uniform color (it appears to be a uniformly white background, as best I can tell), you might also try adding a rectangle the same size as your gradient below both the image and the gradient, and fill it with white (or whatever the specific background color of your image is). This will only work if you have a uniform background color around the edges of your image, but it looks like in your example that it might work. (see attached)

Layered image with blending mode won't display properly in Indesign CS3

Hello,
I'm having trouble placing a layered psd and/or tiff with blending modes into my indesign cs3 document. Basically I have a flattened image with a shadow on a white background. I've had to doctor the image a bit in photoshop and I've used the multiply blending mode to remove the white background. (I'm trying to get around having to clip the image and having to recreate the shadow). Anyone know how I can drop my layered image into indesign and have it keep the blending modes I've applied in photoshop?
Any help would be much appreciated.

I'll try and do my best to describe what it is I'm doing.
I've started out with a “flat” image of a product on a white background with a shadow on it. I need to make the background transparent and so that all I’m left with is the product with the shadow on a transparent background.I want to be able to place this image over another image in indesign and have the background remain transparent.
On the first layer I have a clipped out version of the product with no background (All by itself with no background or shadow). On the second layer I have the original “flat” image with the shadow and white background. On this layer I’ve used the multiply blending mode to remove the white background.
Now that I have the product on one layer by itself and the product and shadow on layer two with the multiply blending mode I have an image of the product with a shadow with no background. When I place this into indesign, my image shows up with the white background as if the multiply blending mode isn’t applied.
I’ve tried this on other images. It doesn’t appear that it lets you bring an image over with that blending mode. It's like I'd have to bring over a clipped image and then place that on top of my original image with a blending mode placed on it "in" Indesign.
Hope that make sense?

XFCE: background-image with gradient displays incorrect

If I use a desktop-backgroundimage with a gradient, XFCE doesn't display it correct. It looks like if it uses 16bit color depth instead of 24bit. But I can't find anything to check which color depth it uses.
If I open the same image in GIMP, GIMP displays the gradient as it should. It also works in GNOME.
Part of a screenshot in XFCE:
Part of a screenshot in GNOME:
How to fix this?

Yep i have the same problem here ?
whats up with it? ANyone?

Printing a graphic with a gradient mask in Flex 3-problem

Hello, I am fairly new to flex development. I am puting together a little program that allows the user to upload a picture add a vignette mask in order to achieve a soft edge, and have a problem I cannot find an answer anywhere, maybe someone could help me please.
I want to print a the user photo with a gradient mask or vignette from flex. I managed to show the image correctly on screeen with the gradient mask using this class but the output to paper is a rectangle without the soft mask.
//package to add the mask for display
package com.dm.graphics
   import flash.display.Graphics;
   import mx.containers.Canvas;
   import flash.display.GradientType;
   public class FrameBorderSoft extends Canvas
      override protected function updateDisplayList(w:Number, h:Number):void
         super.updateDisplayList(w,h);
         var g:Graphics = this.graphics;
         g.clear();
         g.beginGradientFill(GradientType.RADIAL, [0x000000, 0x000000, 0x000000, 0x000000],
         [1,1,0.8,0],
         [1,128,195,255],
         horizontalGradientMatrix(0,0,w,h) );
         g.drawRect(0,0,w,h);
         g.endFill();
It works beautifully until I try to print the graphic. The image prints but without the gradient edges (soft) instead it is just a sharp edge rectangle.
Does anyone know how to do this?
Here is my print function:
private function doPrint():void {
                // Create an instance of the FlexPrintJob class.
                var myPrintJob:FlexPrintJob = new FlexPrintJob();
                // Start the print job.
                if (myPrintJob.start() != true) return;
                // Add the object to print. Do not scale it.
                if (tabnavigator1.selectedChild == img1) {
           //switchcolor is a variable to detect if the user changed the background to white or clear.
                         switchcolor = 100;
                      //printCF is the card front container with the photo masked
                   myPrintJob.addObject(printCF, FlexPrintJobScaleType.NONE);
                   myPrintJob.printAsBitmap = false;
                } else if (tabnavigator1.selectedChild == img1b) {
                   switchcolor = 100;
                   myPrintJob.addObject(printCB, FlexPrintJobScaleType.NONE);
I hope this helps to visualize,
I would greatly appreciate any assistance or advise.

Hello, back on my issue, i tested a little bit more the message dispaching.
I read the lazyLoadPolicy class and noticed that it always has to have a ModuleId property in the message to work, that's why the broadcast message didn't work to awake the module with the lazy loading policy.
So i added copy of my module:
     <cairngorm:ParsleyModuleDescriptor objectId="test"
          url="TestModule.swf"
          applicationDomain="{ClassInfo.currentDomain}"
     />
     <cairngorm:ParsleyModuleDescriptor objectId="testbis"
          url="TestModuleBis.swf"
          applicationDomain="{ClassInfo.currentDomain}"
     />
Set them both with a basicLoadPolicy, and tries to dispatch a message to only one of them using the ModuleId metatag. I then noticed that both modules received the message and not only the one i expected.
I then changed the ModuleMessageInterceptor configuration to dispatch to only one kind of module:
<cairngorm:ModuleMessageInterceptor type="{ OpenViewMessage }" moduleRef="test"/>
and this worked as expected. Only the first module catched the message. I am obiously messing with the ModuleId metatag but i cannot see what's wrong...
I compiled with
-keep-as3-metadata+=ModuleId
but this hasn't changed anything...

Importing images with Lightroom 2 & Camera RAW 4.5

The following query has been raised with Adobe Technical Support (5 days ago and I am still waiting for a response/reply. They claim to reply within 24 hours but they have not on this occasion......they seem to be ignoring me
Perhaps a fellow user can help to identify or resolve the problem.
Operating System:
Windows XP Professional (Service Pack 3)
Software:
Adobe Design Premium CS3 (10.0.1); Photoshop Lightroom 1.4 (which was working fine) and Lightroom 2 (on trial and not working particularly well)
I am using a trial download of Photoshop Lightroom 2 (with Camera RAW 4.5 in Photoshop CS3).
I am having a few problems with editing Lightroom 2 images in Photoshop CS3 but I understand that Adobe is currently investigating a solution to this problem.
I have also noticed another potential problem since I have started to import images from a computer drive to Lightroom 2 and converting the Manufacturers RAW files to DNG (with the option to leave the files at their current location/drive).
My RAW and JPEG files open ok in Camera RAW (v 4.5) for basic editing and subsequently to Photoshop for more detailed work. The problem is that all my images are now opening as Smart Objects by default in Photoshop CS3, as opposed to opening as a Background layer". (I have not knowingly opted to use the Open as Smart Object option.
I am not entirely sure how this came about but I have also lost the capacity to edit images with empty Levels adjustment layers or percentage (%) grey fill option).
I am able to highlight the respective layer and create the empty Levels adjustment layer, change the blend mode to either Multiply or Screen, fill the Layer Mask with Black (Alt & backspace), change the opacity level as desired, select the brush tool and change the foreground colour to white to enable the applicable Dodge or Burn processes.
Unfortunately, it does not function irrespective of the preferred opacity level. The Dodge or Burn feature is static with no effect on the image.
I cannot recall any settings to open all files as Smart Objects in Photoshop CS3 but would welcome some help in identifying such a setting if it exists. Alternatively, I would welcome any other suggested methods of correcting the above difficulties.
The same difficulties are evident when I try to use the Dodge or Burn features via the Edit and Fill option with a percentage of Grey and the Overlay Blend Mode.
The "Common Denominator" of the above difficulties appear to be Lightroom 2 and Camera RAW 4.5 (individually and or collectively) and now I am stuck between a rock and a hard place.
Are any other users experiencing similar issues or have any suggestions about how I might correct or resolve these problems? ......
I am not afraid of hearing or accepting that the "Dummy Factor" has played some part or how I may release myself from the said "Dummy Factor".....any help is welcome help.
Adobe Technical Support seems to be ignoring me......I wonder why?
Regards
Bob Wallace

Essentially you are wrapping the raw image data into a special type of layer, a "smart object". You can then revisit and fine tune the Camera Raw conversion as often as you want and take advantage of working directly on the raw data in its pre-Photoshop purity. You can also apply to this smart object layer a number of Photoshop adjustments and filters - and again redo and fine tune them as often as you wish.
You'll find them explained in a number of recent books. I know Scott Kelby is keen on them, there are examples on Russell Brown's site, and my own book last year on B&W strongly advocated their use.
Have a play.
John

How do I import an image with an opacity mask from AI into FW

I have created a graphic in AI which contains several images with associated opacity masks. The mask use a radial gradient to achieve the desired effect. I am unable to import these images into FW with the mask effects intact even though the layers appear to be there. What am I doing wrong? I don't see away to do it in FW directly. If there's a work-around that would be appreciated too.

Fireworks' masking is pretty good. If you have your object and your mask in FW, arrange the objects so that the mask is above the object, select both, then click on
Modify > Mask > Group as Mask
Where the mask is white, your object will be fully opaque. Where the mask is black or 100% transparent, your object will be fully transparent. Where the mask is grey or partially transparent, your object will be, as well, proportionally to the grey level/transparency level in the mask.
Fireworks also has some built-in masks to fade objects radially or linearly. In CS3, these are under
Commands > Creative > Fade Image
but they got moved someplace else for CS4. I can't find the info on that in the help, though, sorry. Oh wait. It might be the Auto Vector Masks:
http://help.adobe.com/en_US/Fireworks/10.0_Using/WS29D46793-C43E-4941-960E-F238FB1977C8.ht ml
Mask info here:
CS3: http://help.adobe.com/en_US/Fireworks/9.0/help.html?content=frw_layers_la_19.html
CS4: http://help.adobe.com/en_US/Fireworks/10.0_Using/WS4c25cfbb1410b0021e63e3d1152b00d169-8000 .html

Inserting images with no backround

hi, i'm creating a simple webpage with a few pictures.i know how to insert images but the problem is that DW always inserts an image with a white background or any background i have set before exporting edited image from PS or any other image editor. i need to insert a picture with a blended stroke, i mean a picture which is cropped through curves and then its stroke is blended. even though i set no background, the image is exported in white background and DW recognizes it this way. i hope you understand what i have in mind. to illustrate it i need to achieve something like this:
that yellow background is a background of my website and the flower should be inserted the way you see.
thanks for your help

Below, I made a Twitter icon in Photoshop on a transparent background layer, denoted by the gray & white checkerboard. See screenshot.
File > Save for Web. Select PNG-24 with transparency.
See screenshot.
Nancy O.

Method needed to combine 50+ images with same background. Not a portrait.

Hello,
Here is what I want to do. I have taken about 50 images of people walking in a heavily trafficked area. I want to have all the people added together into one image. Each person is to have full opacity.
I started by making an image with no one in the scene using the Median blend mode with a layer stack to remove all the people. Worked fine. Now, I am hoping there is some way to create masks or knockouts of the people in each of the individual images by somehow comparing them to the scene with no people. Some way to mask out or knock out those areas which are different, i.e. the people. I will then stack all the images of the people on top of one another to create a very complicated image showing the volume of traffic.
Any suggestions would be greatly appreciated.
Using CS3.
Best regards, Seder

Difference blendmode. Put the people on your clean BG, switch the mode. Flatten the result, use adjustments to properly make it b/w. Select all, insert as custom channel or into an existing layer mask to get the transparency. If the photos were shot under same lighting conditions, you could even create an action for it to easily repeat all steps.
Mylenium

Is it possible to apply a PNG image *and* a gradient to a single div background?

I am looking to create a div that will have a css gradient as a background, but also a PNG image to go on top of that gradient. This div will also contain text.
So the desired stacking order is :
Top : Live Text
Middle : PNG image
Bottom : CSS Gradient
Question : Can this be done with only 1 div?
I know that if you specify a background image AND a background color on the same div, you will get both, and it works quite well. But it seems much more complex to do it with a gradient instead of a flat bg color.
If it's do-able, what would the syntax be?
Thanks!

Hi
You could also use multiple background images, though this will not work in IE8 or below, (use Nancys 'stacking order' as a fallback but specify these first).
#multipleBackgroundImages {
background-image: url(gradient.svg),
url(your_image.jpg);
background-position: top left, bottom right;
background-repeat: no-repeat;
see also - http://www.css3.info/preview/multiple-backgrounds/
I specify an svg as the first image as this will work across all modern browsers.
For IE8 or below -
You could use an IEFilter for the gradient and an image over that, providing your image is not too large, or use the IEFilter 'alphaImageLoadeer' to place the image in the top r/h corner of the div, with the gradient below.
PZ

Blending an image with a gradient

Similar Messages

Maybe you are looking for