Step 1
You will need to download and install a couple free tileable patterns and textures from Filterforge which you will find below. Alternatively you can download the project source files which include these patterns at the end of this post.
Nebula Pattern
tileable-nebula-pattern.zip
Curtains Pattern
tileable-curtains-pattern.zip
>
Abstract Windows Pattern
tileable-abstract-windows-pattern.zip
The easiest way to install any photoshop preset is to simply drag the files into Photoshop, but it doesn't always work. If the drag and drop method doesn't work for you, you will need to find the appropriate presets folder and drop your files in there.
BRUSHES (.abr)
WINDOWS: C:Program FilesAdobePhotoshop (version)PresetsBrushes
MAC: /Users/(username)/Library/Application Support/Adobe/Adobe Photoshop (version)/Presets/Brushes
SHAPES (.csh)
WINDOWS: C:Program FilesAdobePhotoshop (version)PresetsCustom Shapes
MAC: /Users/(username)/Library/Application Support/Adobe/Adobe Photoshop (version)/Presets/Custom Shapes
PATTERNS (.pat)
WINDOWS: C:Program FilesAdobePhotoshop (version)PresetsPatterns
MAC: /Users/(username)/Library/Application Support/Adobe/Adobe Photoshop (version)/Presets/Patterns
Layer Styles (.asl)
WINDOWS: C:Program FilesAdobePhotoshop (version)PresetsStyles
MAC: /Users/(username)/Library/Application Support/Adobe/Adobe Photoshop (version)/Presets/Styles
Step 2
Open up the the first pattern above and Desaturate it by pressing Ctrl+Shift+U or Command+Shift+U. Then Invert the pattern by pressing Ctrl+I or Command+I.
Now we need to save this as a photoshop pattern for later. To do this highlight the entire image by pressing Ctrl+A or Command+A then go to "EDIT >> DEFINE PATTERN"
The other two patterns don't need to be inverted. Just open them up, desaturate, and then define them as patterns. Below is what you should end up with. If you like you can also download these three patterns as a photoshop .pat file at the bottom of this tutorial with the rest of the project source files.
Step 3
Ultimately we want to create a tileable image that is 512px*1024px, but it's nice to see a larger area when you're designing so you can get better feel for what it will look like tiled. Our base patterns were all tileable at 512px*512px so we want to choose some multiple of that to keep our image tileable.
So create a new document 1024px tall and 1024px wide. Then create a gradient fill layer by going to "LAYER >> NEW FILL LAYER >> GRADIENT". You can approximate the gradient I used below or chose any gradient you like as long as it starts ends with the same color. Download the PSD within the Project Source Files at the end of this tutorial if you would like to use the exact gradient I did.
Step 4
Now lets start adding the patterns we created in STEP#2.
Start by creating a new pattern fill layer by going to "LAYER >> NEW FILL LAYER >> PATTERN" and selecting the first pattern we created. Then set the layer blend mode to "SOFT LIGHT" with a fill opacity of 40% as seen below.
Step 5
Now create another pattern fill layer but this time select our second pattern and then set the blend mode to overlay with an opacity of 40% as seen below.
Step 6
Now duplicate the layer you just created and bring the opacity back up to 100% as seen below.
Step 7
Now create another pattern fill layer and this time select our third pattern and then set the blend mode to color dodge as seen below.
Step 8
Now duplicate the layer you just created and set the blend mode to overlay as seen below.
Step 9
Now to optimize this for a Twitter Background we need to crop it to a tileable 512px*1024px and save for web.
To crop it press Ctrl+ALT+C or Command+ALT+C and enter 512px for the width and 1024px for the height as seen below.
Step 10
To save for web go to "FILE > SAVE FOR WEB & DEVICES" and set the filetype to jpeg and quality to 90% as seen below.
