• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 667
  • Last Modified:

Gradient textured border to blend in with background color webpage

Hi,

I need step by step instructions on how to create an either gradient or textured border to blend images into the background color of a webpage.

I have CS6, but I'm not against downloading or buying other tools, especially if it can be done in batch :)

Thanks
~j
0
prosit
Asked:
prosit
  • 3
  • 3
2 Solutions
 
captainCommented:
Could you point us to a website where a look that you are aiming for is implemented. It is difficult to envisage what you are looking for without some visual guidance.

Thanks
capt.
0
 
prositAuthor Commented:
Kind of like this, but on all four sides.  

http://www.sitepoint.com/photoshop-fade-layer-mask/

I can get it do do it if I do one side then flatten it and do it again for each side, but I'm thinking there should be a better (or faster) way.

tnx
~j
0
 
captainCommented:
Hm. I think the easiest way to achieve this is to use transparency and feathering in your images.

If you have your image on a layer in a PSD file you can draw a rectangular mask around the inside perimeter of the image leaving a gap to the edge of the image, maybe 5 pixels but maybe more depending on the size of the image.

Then invert the mask so you have the outer 'frame' (the previously unmasked area) selected. Now use 'Feather' from the  Select > Modify > Feather menu. Specify the amount of pixels that you like to blend in. This may be trial and error and you can undo the next step if not quite right.

Once you set your feather options, press Delete to delete the framed part of the image. this has now created a blended edge, from fully transparent to fully opaque. If the amount of blend is not sufficient, undo the delete and change the amount of Pixels to feather.

All you then need to do is to save it for web as a PNG-24 with transparency and it will blend in with any background.

hth
capt.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
David BruggeCommented:
I think the captain's method is a good one.

The only thing I might be able to suggest is to use the a Gaussian Blur instead of feathering the selection. The advantage is that you can see how soft you are making the edges as you go along instead of using a "guess and check" method.

To Do this, make your selections as before but then click the Quick Mask mode icon at the very bottom of the tool bar,  (the white rectangle with the circle) The active area becomes clear, and the inactive areas (the parts protected by the "mask" become red.)

Now invert your selection as in CaptianReiss's method.

You talk about doing these in batch. A batch will work if all of the images are the same size. You can either record the steps as an Action and then run the Action on a folder of images, or you can save your mask and apply it to each image.

If you have several different size images, you can very easily create a series of actions, or a series of masks.

Or, if all of your images are near each other in size, you can try a one size fits most approach and run an action of a batch and let some of them have softer edges than others.

Next add a Gaussian Blur to your mask. You can see how soft the edges become as you adjust the amount of blur.

Once satisfied, okay the blur, the click the QuickMask icon again to turn it off. Your marching ants return.

The rest is the same. (Press Delete then save as a PNG)



You might add the intermittent step of switching to QuickMask mode right after inverting your selection.
0
 
prositAuthor Commented:
Hi,

Very nice, thank you both.... I couldn't get the fethering to work initially but with D_Brugge's comment I was able to.  I liked the feathering better although it's more work, it just worked better for my specific project, but I appreciate you both, thanks for helping out!

~j
0
 
captainCommented:
Seems we are making a good team D_B :)

Thanks for the accept and good luck with the project.
0
 
prositAuthor Commented:
It's one of those things where I can use Photoshop but I am in no way an expert, so steps that seem simple to the advanced user make no sense to a noobie :)

thanks again!

~j
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now