Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Gradient textured border to blend in with background color webpage

Posted on 2012-09-16
7
Medium Priority
?
659 Views
Last Modified: 2013-11-19
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
Comment
Question by:prosit
  • 3
  • 3
7 Comments
 
LVL 31

Expert Comment

by:captain
ID: 38405559
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
 
LVL 2

Author Comment

by:prosit
ID: 38405581
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
 
LVL 31

Accepted Solution

by:
captain earned 1000 total points
ID: 38406768
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 1000 total points
ID: 38407986
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
 
LVL 2

Author Closing Comment

by:prosit
ID: 38409285
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
 
LVL 31

Expert Comment

by:captain
ID: 38410271
Seems we are making a good team D_B :)

Thanks for the accept and good luck with the project.
0
 
LVL 2

Author Comment

by:prosit
ID: 38410314
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Recently, an awarded photographer, Selina De Maeyer (http://www.selinademaeyer.com/), completed a photo shoot of a beautiful event (http://www.sintjacobantwerpen.be/verslag-en-fotoreportage-van-de-sacramentsprocessie-door-antwerpen#thumbnails) in An…
PaperPort 14.5 Patch 1 update is often not detected or downloaded automatically. This article provides direct download links to solve the problem for retail (non-bundled) versions of the Standard and Professional editions, as well as the Professiona…
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
Suggested Courses
Course of the Month20 days, 15 hours left to enroll

810 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