textures-patterns-webdesign-header-image
Tuesday, April 30th 2013
Photoshop
5 comments

Textures & Patterns in Web Design – Photoshop CS6


Effectively using beautiful textures when designing a website adds an amazing level of depth to your finished website. Let’s jump in and have fun learning about using existing textures to create fresh and beautiful textures for use in our designs! We’re going to cover a wide variety of great ways to create an amazing amount of depth and subtle distinction for any website or graphics project!

Video

 

Written Tutorial Starts:

 

1. Find Amazing Textures.

The web is loaded with amazing design resources and textures, you will be bombarded with loads of content if you run a google search, but here are a few of my favorite places to find amazing textures.

Subtle Patterns: http://subtlepatterns.com/
Lost & Taken: http://lostandtaken.com/
Brusheezy Patterns: http://www.brusheezy.com/patterns

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

2. Create Your Own Texture!

Just remember that any photo can be a texture! Don’t let the term ‘texture’ define how you use or don’t use a graphic/picture if you see cool details, brightness,etc… don’t hesitate if you think it will apply to your project nicely.

Do you use any amazing pattern/texture resources? If so, share in the comments section!

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

3. Starting With Texture

Typically I do not create textures. I usually start with a texture and play with it by adding additional textures with Photoshop and additional textures that I love. Creating textures from scratch can be as easy as photographing an amazing pattern that you stumble across or you can take the time to build rows of pixels and create amazing,beautiful patterns with straight lines. There are literally hundreds of ways to create millions of patterns.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

4. Starting Playing With Textures

I’m going to go with the route that I typically use and play with and customize existing existing patterns, essentially we’re going to layer and build a complex pattern that we think looks cool. In Photoshop we’re going to create a new document with the specific size of 500px by 400px.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

5. Add Noise

With the “Background” layer selected, we’re going to go Filter>Noise>Add Noise and add 100% noise set to Gaussian and Monochromatic checked on.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

6. Pixelate>Mosaic

Next go Filter>Pixelate>Mosaic and set the cell size to 20 square.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

7. Download a Texture Or Pattern:

Go grab the “SubtleNet” texture from the good people over on SubtlePatterns.com. Link: http://subtlepatterns.com/subtlenet/ Unzip it and open the “subtlenet2_@2X.png” file in Photoshop.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

8. Adjust Our New Texture

With this pattern open, go Image>Adjustments>Levels and drag the upper black handle to the right until you set it’s input box says “160”. Go ahead and hit “OK” to commit those changes. Let’s move on.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

9. Define a Pattern in Photoshop

Now we want to define this small image as a pattern. I love using these little patterns to build on because they already have seamless edges built in; It’s just one less thing to worry about. To define this a a pattern, go Edit>Define Pattern and give it a name.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

10. Build It Slowly

Jump back over to our “build-a-texture” document and add a new layer. Grab the Paint Bucket Tool (G) located ‘under’ the Gradient Tool and look to the control bar for this tool and set it to fill with “Pattern”. Choose our pattern from the drop down box.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

11. Blend Modes & Opacity

Click anywhere on this new layer to fill it with our pattern and then set the layer to the blend mode “Multiply”. This is going to knock out all the white and preserve the mesh look over our mosaics. Reduce the layer opacity to 20% and move on to the next step.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

12. Pepper In The Goodness

Let’s add another texture to this. I am going to repeat step five,except I’m going to download the “Vintage Speckles” texture and open it in Photoshop and convert it to a pattern. (I used the “vintage_speckles_@2X.png” pattern.)

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

13. New Layer, New Texture

Create a new layer in our new texture document and use that same Paint Bucket and “pour” in our new pattern and set this layer to “Multiply” as well.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

14. Continue Building The Texture/Pattern

I want to apply that “SubtleNet” pattern again, but I’ll use the smaller version this time. Drag that into Photoshop and convert it to a pattern like we’ve done and create another new layer in our new pattern document and “pour” this new pattern in and set the layer to the Multiply blend mode.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

15. Add Texture, Add Brightness

The texture is pretty dark at this point and I like dark textures, but I love light textures so let’s brighten this up. We can do that while still adding a little more texture to it. We want to grab the “Light Paper Fibers” pattern here: http://subtlepatterns.com/light-paper-fibers/ follow our normal steps to convert this to a pattern and head back to our new texture document.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

16. Building & Blend Modes

Create another new layer and “pour” our pattern in and set this layer to the Soft Light blend mode. Notice how this helps really brighten things up.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

17. One Last Texture!

We’re going to add one last texture before we convert this whole thing to it’s own pattern. Grab the texture “Vichy” from right here: http://subtlepatterns.com/vichy/ and bring it into Photoshop. We’re going to make some changes here so don’t jump too far ahead yet!

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

18. Levels Adjustment

With this “Vichy” pattern open, we want to go Image>Adjustments>Levels and drag upper black slider until the input reads “130” and also drag the white slider until its input reads “225”. Go ahead and commit your changes and define this as a pattern.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

19. Pour It Right In!

Create a new layer in our new texture document. Grab the Paint Bucket tool and “pour” this new pattern in. Set this layer to an opacity of 30%.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

20. Adding Grain/Noise

We’re going to add a dash of noise before we convert this to a seamless pattern repeating pattern fill. Create a new layer and go Edit>Fill and choose to fill the layer with 50% gray. Go Filter>Noise>Add Noise and add 5% noise and then set the layer to a blend mode of Soft Light.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

21. Hotkey: Merge All Layers To New Layer

Before we make this pattern a seamless pattern we want to merge it all to a new layer. Do this by using the very long hot key Cmd/Ctrl + Shift + Opt/Alt + E to merge all the layers into a new layer.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

22. Create a Repeating Pattern

Now that we have this newly merged copy of our layers Go Filter>Other>Offset. In this case it is absolutely key that we set the horizontal and vertical of Offset to half of the width/height of our document. We also want to be sure we’ve set it to “Wrap Around”.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

23. Clean Up Time

All we have left to do is examine the pattern to ensure there aren’t any weird lines in it. If you do see a few lines, grab the Healing Brush (J) and clone them right out. Next, go Edit>Define Pattern. I named mine “our-new-pattern”.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

24. Apply The Texture

I’m going to jump over to a little website I’m working on called “Magic Hat”. Let’s apply this background to this site using the Paint Bucket tool on a new layer beneath the content. Feel free to adjust opacity until it looks exactly how you like it.

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

Textures and Patterns for Web Design - Photoshop CS6 Tutorial

Enjoy!
Textures and Patterns for Web Design - Photoshop CS6 Tutorial

 

Follow Me On Twitter!

Like Tutvid on Facebook!

  • http://twitter.com/CarlFindahl Carl Findahl

    This was extremely useful! I was inspired to make a web site now :D Thank you, sir!

  • Chavez

    Do you have a video of how you created the actual webpage on photoshop?

  • T.White

    PSDtoXHTML.co.uk
    Professional PSD to HTML Services, PSD to Email, PSD to WordPress

    London · UK · PSDtoXHTML.co.uk

  • http://www.sujonmaji.com/ Nazmul Islam Sujan

    Its tricky tutorial to make own texture. You can also visit my design

  • https://www.behance.net/ashanurzaman Naeem Islam

    awesome tutorial