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
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!
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.
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.
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.
6. Pixelate>Mosaic
Next go Filter>Pixelate>Mosaic and set the cell size to 20 square.
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 “[email protected]” file in Photoshop.
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.
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.
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.
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.
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 “[email protected]” pattern.)
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.
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.
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.
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.
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!
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.
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%.
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.
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.
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”.
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”.
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.
Enjoy!
Leave a Reply