What's new

make a square photo fit an unusual shape


enerlove

New Member
Messages
2
Likes
1
[FONT=Helvetica, Arial, lucida grande, tahoma, verdana, arial, sans-serif]I have a photoshop file of my website homepage. one of the layers is an unusual shape (it happens to be the website header) and has a solid green background. I need to swap out the green background with a photo, i.e. place the photo on the green layer and have the square photo only apply to the unusual shape. i can't figure out how to do this.

I also have a gif file of the
[/FONT]website header.gif[FONT=Helvetica, Arial, lucida grande, tahoma, verdana, arial, sans-serif] unusual shape....if i need to use that one instead of the PSD file. attached is hte gif for reference.

I've tried googling how to do this and it got me a whole lot of confusion. I believe i need to make the unusual photo a smart object? please help! and thank you in advance.

elise
[/FONT]
 

MrToM

Guru
Messages
3,504
Likes
3,227
There are two other alternatives...

1: Via HTML5 Canvas. [Coding]
If you have the ability to change the code then HTML5 Canvas does now have a clipping option.
It would be best to search for the info on that as although pretty simple its too much to explain here.

2: Blend If. [Photoshop]
You can have the image above your existing header, double click its layer and from the Blending option dialog use 'Blend If'.
The existing header is predominantly green so blending if 'green' works quite well.....see below.

Web_Header.png

Those two options do of course depend on what the ultimate result needs to look like, ie, does it need the transparency as in Sams example but even then removing the white is easily done.

Regards.
MrTom.
 

IamSam

Administrator
Staff member
Administrator
Messages
20,053
Likes
12,268
MrT. the green header image I downloaded from above was already on a transparent BG, I did not remove any white.

Screen Shot 2014-12-16 at 4.28.22 PM.png
 
Last edited:

MrToM

Guru
Messages
3,504
Likes
3,227
Ah ha!

I wondered who would be the first to spot the fact that MrTom didn't download the right image!

Drat.

Yeah, you're right, it has transparency.
Still, the theory was right even the image was wrong......yes?

I never meant to imply you had removed any white, merely that to get the same effect as yours using my (wrong) image you'd have to remove the white...but using the right image you wouldn't.....confused yet?

I dunno......my penguins have stopped talking to me.

Regards.
Cell #5.
 

IamSam

Administrator
Staff member
Administrator
Messages
20,053
Likes
12,268
Not confused at all! LOL!! It was the blend if option that you offered, which was a great option by the way.

Just wondering how your header had a white BG and mine didn't.................still wondering!
 

MrToM

Guru
Messages
3,504
Likes
3,227
...Just wondering how your header had a white BG and mine didn't.................still wondering!
LOL....because I did that classic schoolboy error of downloading the pseudo image in the post (which doesn't contain transparency), rather than the actual image itself....which does.

Totally my fault.....clicking the post image opens the real one and hey-presto....transparency.

I just didn't notice my cursor change to a hand when I initially hovered over the post image.......doh!

Nothing to see here.

Regards.
MrTom.
 

enerlove

New Member
Messages
2
Likes
1
Thank you very much for helping me discover clipping masks! Using a clipping mask worked beautifully, appreciate the help and everyone's input!
 

Top