What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

How to make this kind of Headers for web layouts ?


balavalli

Well-Known Member
Messages
156
Likes
36
How to make this kind of Headers for web layouts ? I know its shape and clip masking. I tried my ways of doing it.I used s shape and searched for the same image and adjusted it and clip masked it. on another layer, i took the same ship image and cut the background of it.Please find the attached layers PSD.Also if anyone can give me a tutorial it's useful to all of us in here.Seems this kind of effects is very popular nowadays.

This is the original one Look at the ship its come out of that shape.Looks awesome

attachment67.jpg


Layered PSD Of my effort.
 
Last edited:

IamSam

Administrator
Staff member
Administrator
Messages
22,721
Likes
13,258
Can you kindly explain it in detail, please ?? Thank you.

This is very simple.
Decide on a pattern (shape). For this example I will use an arrow.
You make a selection with your Pen Tool that also includes any part of the ship that you want to be "sticking" out of the shape.....in this case my arrow. So I will also make a selection of the bow of the ship. (I have darkened the BG so you can see the Pen Tool paths)
Screen Shot 2017-10-22 at 10.50.53 AM.png

Here is the path after I have converted it into a selection by right clicking inside the path and choosing "make selection".
Screen Shot 2017-10-22 at 10.51.22 AM.png

Now that I have a selection, just select (highlight) the image (ship) layer and hit the "add layer mask" icon located at the bottom of the layers panel. This will add the layer mask to the image layer in the shape of selection you made with the Pen Tool. You may have to reverse the layer mask by selecting the layer mask and hitting Command + I.

This is the result.
Screen Shot 2017-10-22 at 11.04.33 AM.png

Layers panel.
Screen Shot 2017-10-22 at 11.12.03 AM.png
 

Top