Texture in Web Design Part 1: Inset / Outset Elements
Tuesday, August 24th, 2010
A growing trend amongst top web designers is to use an assortment of subtle textures in their work. This helps give depth and, even if you don’t notice them at first, add an extra degree of complexity and intrigue to a design. If used intelligently and effectively (and by that I mean tastefully!) textures can really lift a website to the next level.
Over the next two weeks I will walk you through a range of techniques that can be applied to many different elements of your designs to give them just that extra bit of style…
This week we’ll be mostly talking about insetting and outsetting page elements in Photoshop (and CSS3), as well as covering how add these effects to non-vector patterns without having to manually cut them out!
Inset / Outset Text & Objects
This is a pretty simple one really and it works on almost any style of font. For both effects you begin in the same way… First, type out your text and select your colours / background colour in Photoshop. Then, in your layers pallet double click the far right of the text layer that you want to apply the effect to. A Layer Styles box should open…
