Tutorial #5: Making a Cool Website Banner with Photoshop


So for my last tutorial, we’re gonna create a cool watercolor effect on a landscape photo. This is used for website purposes but you can apply this concept to any kind of design. This tutorial was inspired from here.

Step 1: First, open a landscape photograph similar to this one (I found mine through google images). Make three duplicates of the original and call each one “land”, “mountain” and “sky” respectively.

Step 2: Next, you will separate land, mountain and sky from each other and have each in the layers we made previously. Trace the outline of the land with the lasso tool (L) and then right click to select its inverse (as shown above), then proceed to delete the mountain and sky.

Step 3: Do the same procedure for the rest of the layers. Now you will have each section in separate layers.

Step 4: Now we will apply a watercolor effect on each layer. I went over here and pasted a watercolor image I liked on a new layer above “land”. Now set the watercolor layer to Screen.

Step 5: Repeat step 4 with the other layers. Notice that the second layer of watercolor will pass over the land layer, so make sure to delete that by selecting the land with the wand tool (W), then going back to the watercolor layer and deleting the extra.

Looking good so far, huh? But it’s a little flat, so we’re gonna add a few more effects to really make it pop.

Step 6: Select a textured brush on the default brushes library, then choose a dark brown color to work with.

Step 7: Make brush strokes around the edge of the first layer on a new layer on top of the original and the watercolor one, then set the layer to Difference.

Step 8: Repeat the same steps with the rest of the layers. Now our image looks better, a little more organic than before.

Step 9: Add a new layer on top of all the others and add a small dark blue gradient, then set the layer to Color Dodge. This is just a small detail to erase some of the green in the sky.

Step 10: Set all layers into separate folders labeled “Sky”, “Mountain” and “Land” as given in the image above. Then add a new text layer on top and write the title of your website.

Step 11: Click on the “Add Layer Mask” button to add a mask layer on your text. Then go to the mountain layer and select the space around it, then right click and select its inverse. Proceed back to your mask layer, then delete the selected area. The text that was on top of the mountain should now be gone.

As you can see, I can change my text as much as I want and the text will always be behind the mountain.

And here’s the final result! Thank you for reading and message me with any questions you may have. Peace, E.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s