Blending edges of jpeg on background solid color

[jernatety]

Hello, I just got the trial version of PSP today, thinking about changing from Photoimpact x3 since that appears to no longer have much user support. I have a sports website. I'd like to use an image I created with a gradient background. I'd like to blend the base of the image with the existing background color. The gradient is the same color and white but you can easily see where it cuts off when you scroll the page. I've tried using the blur and smudge tools but I'm not getting the outcome I'd like. I see this on a zillion other sports websites.

Any help is greatly appreciated, thank you to all in advance.

[Kathy_9]

It might help us if you would post an example of what you want to achieve and also your images.

[Linda Lou]

Hi jernatey,
I'm not exactly sure what you mean, so as suggested above, a picture would help. When I want to blend an image's edges with a background I use one of the Selection tools with a Feather setting.

[jernatety]

Thank you everybody for responding.

The background color on my website is #EAAE10 and the image I placed over the background has the cutoff line where the image ends. I'd like to blend the edges in.

My index page background

And this is what I'd like to do with mine, just like the background on this site.

The background I'd like to do mine like

[LostNow]

By their nature, JPG images can't be transparent, so any background you use other than the color of your website will likely be visible. I'm not sure I understand what you want, either, but perhaps you could try adding a small solid border to the image using color eaae10. If you don't like what that does to the final image size, compress it to the desired measurements before you save it. Let us know!

[jernatety]

By their nature, JPG images can't be transparent, so any background you use other than the color of your website will likely be visible. I'm not sure I understand what you want, either, but perhaps you could try adding a small solid border to the image using color eaae10. If you don't like what that does to the final image size, compress it to the desired measurements before you save it. Let us know!

I don't want my background image to be transparent. I can make it a PNG if I wanted to do that, but it would still have the visible end line from the image. I want the edges of the image to be blended or "faded" into the background color. I don't want a visible border around my image.

The image will be a background image on my website. I posted a picture of my index with a picture of the index of the site I'd like my background image to be like. Notice their image is blended or faded into the background color blue.

[hartpaul]

This may provide you with a method
1. Use the dropper tool to sample your top color as the Foreground /stroke color (left click) and the bottom color as your Background /Fill color (right Click)

2. In my example I made a feathered rectangular selection and then a new transparent raster layer and then selected the gradient for the Foreground color using the Foreground / Background gradient. (Corel 06_029). This uses the chosen foreground and background colors and blends them using a gradient.

3. I used a flood fill tool and filled the selected area on my top layer . This shows a blend from the top color to the bottom color and after deselection you can use the pick tool to move it up or down for the beat blend .
A quick example is shown - I forgot to feather the edges - so it is a bit rough but you can get the idea.

4. Lastly merge all and save as jpg.

[LostNow]

Another possibility: try using a mask with a border that fades to transparency on the image you want to add to your index. Then, beneath the merged masked group, add a layer of your solid web page color and save to a new jpg. Would that supply the blend you want?

[bruce1951]

Another quick and dirty way!
First save your image as a PSPImage to keep transparency.
Open a second layer for your lower section. Place it where you want/need it and using the eraser with a low opacity erase the edge of the lower section. Keep changing the opacity to blend the two layers. Then flatten the image and save.

bruce

[Jean-Luc]

The background color on my website is #EAAE10 and the image I placed over the background has the cutoff line where the image ends.

The attachment index2.jpg is no longer available

It has a cutoff because
- your above image has two different colors on the bottom
- your background has an unique color on left and right
What you need to do is make a progressive transparent area in the bottom of your above image so it will fade with the solid background.

Or... easier...
you create a background with a gradient from left to right (taking the color values from the bottom of your above image):

[jernatety]

The background color on my website is #EAAE10 and the image I placed over the background has the cutoff line where the image ends.

index2.jpg

It has a cutoff because
- your above image has two different colors on the bottom
- your background has an unique color on left and right
What you need to do is make a progressive transparent area in the bottom of your above image so it will fade with the solid background.

Or... easier...
you create a background with a gradient from left to right (taking the color values from the bottom of your above image):

gradient backgroung.png

This! That's what I want to do. How can I effectively make this happen?

[Jean-Luc]

This! That's what I want to do. How can I effectively make this happen?

I Don't know if Wordpress permits to have a gradient color background.
If not, you need to create an horizontal image (2000 x 5 pixels) with the gradient and repeat it on the background (don't know if Wordpress offers this repetitive feature).
Or it would be easier to modify the background gradient of your original image : make it from top (dark) to bottom (light) insteed of diagonal like now.

[jernatety]

Ok, Wordpress, (the .com free website) that I'm using doesn't allow editing .CSS. Guess I'll just make the image one color and not bother with blending anything. Thanks

EDIT*** - How did you know where to find my website to get that screen grab?

[Jean-Luc]

EDIT*** - How did you know where to find my website to get that screen grab?

Google knows ... if I search for "The 2017-2018 DVHL season is over"

[jernatety]

Good job, I never would've thought of that. LOL