Learing to Code - Photoshop Masks

Photoshop and Layer Masks

I meant to write this post on Tuesday but I've had a fairly heavy cold this week so I haven't managed to write anything until today. 

It's week 3 of our Web Design course and things are starting to take shape. As mentioned in my previous post, I have a good idea of what I want my site to be about and I'm now feeling much happier with Photoshop than I was last week. 


For class on Monday, we were told to bring in a web banner which we could use on our website. I had been playing about with using layers in class but as with so much in life, you learn by doing, so it was good to have a piece of homework to focus my attention on. I have this really nice promotional picture of the last vessel I worked on:

So I thought it would be a good idea to try and incorporate it into my web banner. I've been getting to grips with layers so it wasn't too difficult to extract the vessel from the image, but I also wanted to include some of the wash behind the vessel to give the impression of movement, which is where I thought a layer mask would help. To that end, I found this tutorial online which describes how to apply a layer mask with a gradient filter. The only problem was I couldn't find the bloody gradient tool in photoshop! Therefore my first attempt at a layer mask, and the resulting banner I made for class, wasn't particularly good:

I attempted to soften the edge of the wash, with the boat layered on top of an image of the sea I found online, but I think most people would agree that it doesn't look quite right. I also added Inner Shadow, Inner Glow and Bevel & Emboss to the edges of the 3 composite images. This was more to have a play with some of the photoshop filters rather than liking the effect they gave. Actually, I think it makes it look a little bit like the internet, circa 1995. 



I had another go in class and I found the gradient tool the tutorial had been talking about:

For those of you who might have difficulty finding it in photoshop yourself.

A bit more playing around with my image and I was able to achieve the layer mask effect that I had been after:

You can see that the vessel's wash fades out so much more naturally than before; it almost looks like the vessel and the sea behind it are part of the same image! Having said that, the hue of the sea is not quite right and there appears to be a white-ish edge to the left side of the boat's nose. I didn't notice these issues on Monday but I'll need to fix them if I want to use this image as my banner.