Today I thought I’d show you a way to create a simple engraved wood effect to use in your future web designs using Photoshop. It only takes about 5 minutes (tops!) and is very easy to do.
Step One
First of all, prep your canvas with any wood texture. Then, draw or type on what you’d like to engrave. For this example I’m using a classic – text encased in a heart. Cute. You can draw/type it on in any colour, it doesn’t matter. I’ve chosen white because it’s easy to see.
Step Two
Cmd+Click your text/shape in the Layer panel (for PC users, I think it’s either Ctrl+Click, or possibly Shift+Click) so that it all gets selected. Now hide the text/shape layer – you should be looking at something like this:
Step Three
Select your wood layer and copy your selection. Create a new layer above it and paste your selection onto it. You won’t see anything at this stage, but don’t worry that’s about to change. Open up you Brightness/Contrast dialog (Image > Adjustments > Brightness/Contrast) and change the values to around 66 Brightness and keep Contrast at 0 – the exact numbers are really up to you at this stage.
When you’re done, click “OK”.
Step Five
Now time for the important bit, to add a bit of depth. Open up your layer effects and click onto the Inner Shadow.
Change your settings to something like this – Distance 2, Choke 0, Size 2. Leave Contour as a straight diagonal and 0%.
I’ve changed the Blend Mode to Normal and the colour to almost black, I’ve also whacked the Opacity up to a full 100%, however if you have a lighter wood, you will need to play around with this a little.
Then go down to Color Overlay and select a dark brown, and turn the opacity down to about 50%. In the example here, I’ve used #050201 at 51% (Normal blend mode).
And that’s it! I’ve included the finished article on the right. Happy experimenting and thank you for reading our web design blog this week. Don’t forget to check back on Friday for James & Nick’s video blogs!
