Starfield Tileable Twitter Background Tutorial
Posted on 23. Apr, 2009
by Tutorials Etc in Backgrounds
This is a Tutorial with one purpose: to create a Twitter background. Not just any Twitter background though, this is a Starfield Tileable Twitter background.
Here we’re going to show you how to create one of the backgrounds from the Free Starfield Tileable Twitter Background series at Backgrounds ETC, specifically the one we are using on the BackgroundsETC Twitter page.
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 |
 | Curtains Pattern |
 | Abstract Windows Pattern |
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.
That’s All!
Didn’t get the exact same results? Want to save some time? Download the source files below.
What’s Included in the Download:
• Fully layered source PSD
• .ASL file containing the layer styles for the text effect layers
• .PAT file with any patterns needed for the tutorial – ready to install!
• .JPG files of any patterns used
Related Tutorials
Premium
Tamixes
24. Apr, 2009
Thanks so much for sharing! And for offering resources that actually are free!
thegroovychannel
25. Apr, 2009
Great Job! Thank you. Found you via Twitter. This is a fantastic tutorial that has many more applications. Thanks also for providing the project source files.
Looking forward to more of your posts, will Tweet you!
Cindy
huwaw69
27. Apr, 2009
Good tutorial and thanks also for sharing a great knowledge
Herb Tucker
27. Apr, 2009
Many thanks for a very good tut
Godspeed
Debbie McNeill
28. Apr, 2009
Great step-by-step tutorial. Very creative.
Rui
01. May, 2009
Hey!
GREAT tutorial, I actually saw it posted on http//tutoriaisphotoshop.blogspot.com/
It’s translated for my language (portuguese).
You should consider posting the PSD file on http://www.photoshopfiles.com/
If you post it, don’t forget to mention your website and the URL of this tutorial.
OK?
THANK YOU for sharing this, I am already using it as my Twitter’s background.
Jess
06. May, 2009
Beautiful! Thanks for the easy-to-follow tutorial and for bringing this technique down to the level of Intermediate PS users!
Pamela
15. May, 2009
@Tamixes ~ You’re Welcome!
@thegroovychannel ~ Thanks for tweeting us! Glad you found the project source files useful!
@huwaw69 ~ You’re Welcome!
@Herb Tucker ~ You’re Welcome!
@Debbie McNeill ~ Thank you!
@Rui ~ Wonderful! Thanks for the tip – we’ll be submitting it soon.
@Jess ~ Thank you! BTW love your twitter background!
KrisBelucci
02. Jun, 2009
Great post! Just wanted to let you know you have a new subscriber- me!
Twitter Traffic
03. Jun, 2009
Thank you
retoucher77
04. Jun, 2009
wow, that was nice, thank you so much for posting
Roger
11. Jun, 2009
@retoucher77 ~ You’re welcome. Glad you like our tutorial! ! !
@Twitter Traffic ~ You’re welcome. We appreciate the comment.
Roger
11. Jun, 2009
@Kris Belucci
Thank you for your kind words. We are happy to have you as a subscriber! ! !
Vic
14. Jun, 2009
Thanks so much for sharing,your tutorials are accessible and very very worthwhile learning
Roger
15. Jun, 2009
@Vic
We are happy to share our tutorials. Enjoy, we’re glad you like them! ! !
Twitter Traffic Stats
06. Jul, 2009
Hey very nice blog!!
Lita
06. Jul, 2009
@Twitter Traffic Stats ~ Hey, thanks for the compliments!
Elena
27. Jul, 2009
THANKS A LOT…very easy-to-follow tutorial! KEEP UP THE GREAT JOB AND CREATIVE/AWESOME IDEAS!!
Pamela
28. Jul, 2009
Elena ~ You’re welcome, glad you liked it.
jjmm
17. Aug, 2009
how can i use, starfield tileable to my twitter background?
Pamela
18. Aug, 2009
Log into your twitter account
1. Click on the “Settings” link in main menu
2. Then on the “Design” tab
3. Then click the “Change background Image” button
4. Browse for the image you just created above
5. Make sure “Tile background” is selected then hit “Save Changes”
jjmm
18. Aug, 2009
thank you so much!! i use a backgroud “royalty foliage swirl bright ruby” to my twitter account..its a beautiful..thank’s again..
Irene
22. Aug, 2009
wondering tutorial. I love Photoshop!
Lisa
24. Aug, 2009
I love you~! I saw this before but forgot about it was looking for ages xD
Roger
24. Aug, 2009
@Lisa ~ Glad you found us again!
penny stock
19. Sep, 2009
Nice post! GA is also my biggest earning. However, it’s not a much.:)
N.S.Manthira Moorthi
04. Oct, 2009
Thank You Very Much Sir, This is very useful to me
Jeffrey
14. Mar, 2010
I want to know what you think of mine.
I didn’t get the colors right, so I made my own ones.
Also, I did… Just look at it. lol
http://s304.photobucket.com/albums/nn196/Jeffrey_Alonso/?action=view¤t=StarField.jpg
Lita
15. Mar, 2010
Nice job, especially the moon. Good luck on your sales!!!
Issac Maez
01. Apr, 2010
There’s clearly a whole lot to understand about this. I imagine you produced some very good things in Elements also.
Lita
14. Jul, 2010
Sorry for such late response. We have yet to try using Elements, all our work are done in photoshop so far!
Trackbacks
24. May, 2013