Using texture to add depth

- [Instructor] The third element of design is texture, which when used effectively, can give your design depth. A distinctive characteristic that helps make designs more visually tactile. Of course, there's a current trend for flat design that purposefully ignores texture. Even so, understanding how texture works can really help you create designs that are more visually interesting and compelling. The simple definition of texture is the surface quality of any shape within your web layout. Textures can be very tactile or visual. Think of how a texture would look and feel, such as rough, smooth, hard, soft, shiny, dull and glossy. Also consider how textures are created. They can be made from natural and synthetic materials, like wood, fur, nylon and vinyl. There are lots of ways to add texture to a web design. You can photograph or scan your own textures, and then manipulate them in a graphics program, like Photoshop. You can create your own textures in Photoshop using filters and blending modes. You can use free Photoshop brushes to paint textures into your designs. You could use free stock images, or pay for them if you like, and then add those to your web designs as needed. Here are a list of sites where you can download free textures. And of course, there's a lot more but I found that these particular sites have quite a bit to offer. There's Smashing Magazine, TextureKing, Lost and Taken, Texture Mate, Zen Textures, Grunge Textures, and CG Textures. One reason texture is so effective in web design is that it can instantly add that sense of depth to an otherwise flat, two-dimensional medium. Textures can be used in a variety of ways in web design. They can help emphasize a focal point in your layout, or they can be used more subtly as a decorative element that you might not even notice. Textures can also be combined with shapes, lines, colors, lighting, and even typography. And of course, textures can be used as decorative backgrounds, in headers and footers, and sidebars, on your navigation bars and buttons, regular buttons, banner ads, bars, and dividers. Let's take a look at some creative ways that you might consider using texture. One of the most popular examples of using texture is to add a sense of depth using a reflective surface. You may have seen this kind of effect on pretty much every Mac product shot. The trick here is what you're seeing is not an actual reflective surface but a digitally created illusion using a fading gradient over an inverted image to make it look like an object that was photographed on an opaque, white plexiglass surface. Another popular use for textures on the web is using them as backgrounds to add depth. Here are some nice examples of textures used in banner ads. Digital textures like these can give the illusion of physical textures, which in turn help to create the illusion of depth. You can even combine textures with photographs and other Photoshop tricks to give your images a grungy, weathered effect. So here's one way of using like a crumpled folded up piece of paper to make an image look weathered. And I have a few other examples to show you. Here you can use coffee stains, and then scan that stained piece of paper into your Photoshop program, and then manipulate the blending mode to create an interesting negative effect. You could also play around with other scanned textures and filters to make the images look weathered. Keep in mind that textures like color and value can help create a mood. Take a look at how changing the texture on the background of this particular layout affects the overall design feel. You can use textures on your background, your menu, your header, your footer, your sidebars, and your buttons, in any combination that supports the design. Combining textures is also a really interesting way to delineate the different areas on your web page, which can help visitors see at a glance which areas might be more important than others. So I'll just go through these layers and show you how it changes the look and feel of a particular design. So the original is a photograph of some metal doors. Here's what it looks like on stained paper, maybe not nearly enough contrast there but you get the general idea. Here's some crinkled paper. There's a little sidebar with grass behind it. A textured leather background really adds a nice tactile feel, or a little bit of cardboard on one side, leather on the other. You could do something like vintage wallpaper, or even something like this watercolor effect. Textures can really transform a design and give your web layouts a unique sense of depth. And when used wisely, texture can go a long way toward making your designs memorable and unique.