Download Source Files
In this tutorial I will show you how to create an abstract background image using Photoshop only. The design has a cool wavy pattern with interesting lighting effects, like the Blackberry 9000 wallpaper. This is a tutorial you can sit down and complete in less than an hour. Let’s get started.
Final Image Preview
Before we get started, let’s take a look at the image we’ll be creating. Click the screenshot below to view the full-size image. As always, the full Photoshop file is available via our Psdtuts+ Plus membership.
Step 1
Create a new document, using a black color for the background.
Step 2
With the Rectangular Marquee Tool (M), create a rectangular selection. Then select the Gradient Tool (G), and use red for the color of the gradient for both the start and the end, but use 100% and 0% for the Opacity so the gradient will go from red to transparent. Then create a new layer and fill it with the gradient, as in the image below.
Step 3
Go to Edit>Transform>Distort and distort the rectangle, as in the image below.
Step 4
Go to Edit>Transform>Warp. Then select Flag and use 20% for the Bend.
Step 5
Create another Rectangle and fill it with the same red to transparent gradient. Set the height smaller than the first one. Then repeat the Warp command; however, this time make it to the opposite way, as in the image below.
Step 6
Lets add a Layer Style to the shape. Go to Layer>Layer Style>Inner Shadow, use a light pink color (#ffb3b3). Set the Angle at -90 degrees, Distance 45px, Choke 0%, and the Size 70%.
Step 7
Now go to Filter>Blur>Gaussian Blur, use 2px for the Radius.
Step 8
Repeat Step 6 for the other shape.
Step 9
With the Pen Tool (P), create some paths, as in the image below. We will use them to create some light effects.
Step 10
First create a new folder, and rename it “Lines”. Then change the Blend Mode to Screen. Thereafter select the Brush Tool. Grab a basic brush with 0% Hardness and 13px size. Then with the Direct Select Tool(A), select a path. With the right button of the mouse choose Stroke Subpath. Then the dialog box will open. Make sure that Simulate Pressure is not selected and Press OK.
Step 11
Lets create a Layer Style for the lines. Use Inner Glow with Color Dodge for the blend mode. Set white as the color, 100% Opacity, Choke 0%, and size 8px. After that select Color Overlay and use pink for the color (#ff5c78).
Step 12
Repeat Step 10 with the other paths. Always create a new layer for each path. You can vary the size of the brush, and you can use Simulate Pressure with some paths, as I did in the image below (1, 2, and 3).
Step 13
Let’s Mask some paths, and create new ones duplicating existing paths. With number 1, select the layer of the path and go to Layer>Layer Mask>Reveal all. Then select a brush with 0% Hardness and a medium size, like 50px. Then select black for the color and start masking that line. Repeat this with numbers 2, 3, 4, and 5.
Step 14
Here we’ll make some adjustments to the shapes. Yet again, select the Shape Layer. Then go to Layer>Layer Mask>Reveal All. Then with a black brush, start masking some areas of the shapes. Tip: you can simply delete the layer as well. Just use the Eraser instead of masking it.
Step 15
Create a new layer beneath the lines but above the shapes. Then select red and select a big 100px brush. Make sure that the Hardness is 0%. Click 1–2 times, only click enough times to create an effect like the one in the image below.
Step 16
Go to Layer>New Adjustment Layer>Hue and Saturation. Make sure you select Colorize and use Hue 11, Saturation 82, and Lightness +4. Then go to Layer>New Adjustment Layer>Levels. Follow the image below for reference. After that go to Layer>New Adjustment Layer>Photo Filter. Use yellow, and Density of 85%. Make sure that you select Preserve Luminosity.
Conclusion
In this tutorial we created an abstract design similar to the new Blackberry’s wallpaper. It shouldn’t have taken you more than 40 minutes to finish. Even though it might look simple, this tutorial has very useful techniques. You can use them to create some nice lighting effects and wavy designs. Besides that, you will be able to create a Vista-style wallpaper using these techniques as well (as some readers requested), just change some colors and Layer Styles and you’ll have it.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Fabio
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Show, brother! Muito boa sua arte. E o step-by-step também!!! Abçs
Hey,
So for some reason i can’t stroke the subpath, i followed everything you said and it didn’t work. Also, i didn’t see mention of when to create new layers, if at all in the tutorial. CAn someone please send me an e-mail as to why i may not be able to stroke the subpath?
bburghdorf@gmail.com.
Thanks!
please , Turkish tutorial … :( help
C’mon guys, cut some slack.
I know my way around Photoshop CS3, and this tutorial was easy to follow for me.
That being said, if you have an older version, things can / will be different. If you find a difference, post it and be HELPFUL to other users, don’t bitch & moan. If you don’t like it, don’t read the site.
Seems this tutorial was ripped without credit here:
http://www.okapixel.com/2008/06/create-wavy-blackberry-style-wallpaper.html
Not a nice thing to do….
Eppe
Thanks so much! Greatly appreciated, your skills are helping others better their paychecks!
Hi there, welldone Fabio
Just a comment if I may, I did read few comments in here and thought of mentioning the fact is that there are always “others” who are trying to learn Photoshop; new commers looking for these tutorials.
why do we always have to expect from others? for 9 dollars a month? come on; you guys have learned alot from this spectacular site, you think they’ve run short or out of new stuff? No creativity or inspiration? OK, why don’t you say, at least “thank you” and try to give and share your tips and tricks you’ve learned in a unique way in the site? Or maybe you’ve just learned to get rathar than to give from time to time.
As about vedio tutorials I think it would really be a pain in the neck for many ppl who often suffer from internet connection and how slow it might be.
Thank you very much Fabio
Very nice, thanks for sharing
Hi!tgnn! http://uwpdbrof.com jfijq rusqc http://yeqjyxhh.com wmenc fxiyi
Really really useful, and so well explained. Thanks!
Thx, for the nice tutorial, the outcome was so satisfying :)
why cant i find ‘warp’ in edit>transform? all i find is scale, rotate, scew, distort, perspective.
Thanks for the tutorial.
_______
Rob G
Macworld Editor
1st tutorial i read here and its amazing! Thanks!
hey ,fabio that is brilliant, good stuff man
I thing t your methods are great i’ve one ofyour method b4 the “Magic Hat” and i like that on too
Very nice tutorial, but this tutorial doesn’t explain some steps as well as they should be explained.
This is a nice tutorial, but unfortunatelly i cant find the wrap function. I use photoshop cs maybe i shoul use cs2.
i liked . black and red
simple and alegan
Hmm. I’ve been trying to figure out how to do step 3 for an hour now. The problem is, the gradient doesn’t rotate with the distortion, but the gradient stays horizontal, and just the borders of the layer move around. I wonder if I created the new layer in step in a wrong way or something?
There isn’t enough information in this tutorial.
Simlpe and Cool !!!
Hi…i have a question…
“I don’t find warp in step 4 ??? and i do not compelete this step…
i use photoshop CS3…
please guide me…
“So for some reason i can’t stroke the subpath, i followed everything you said and it didn’t work. Also, i didn’t see mention of when to create new layers, if at all in the tutorial.”
I also bumped into this minor obstacle this morning… you need to have and active layer in order for the Stroke Subpath command to appear in the contextual menu.
So, your question already contains the answer!
thank you so much, that’s what I was searching for!
nice work and thanks again.
!!!!!!!!!!!!!!!!!!!!!!!!! thanks abduzeedo, always genius !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
hi…how to create a layer..and i am not able to use this pentool in a way that you have used..one i select pentool its being for all the lines.!?
is that we have to create a layer for every shape of the line or else once we have to make all the lines nd create a layer to name it as lines???
i thought its like line1 line2 line3 layers so on..!! and then how to get this subpath layer??
exellent……
Hey man. Thanks a lot. I am an Upcoming Designer and this tutorial has really taught me a lot. Safety & Peace to you Friend. !!! :)
Thanks for you tutorial, excellent and easy yor explanation.
That was a great tutorial!
Is there any kind of decisions, like where which tool is used to create which efffect?
Like, Cloud -> Fog, Cloud, Smoke, etc. Something like that
thanks for your tutorial,,its beutiful art
I can’t get step 11. The colors are switched… can anyone PLEASE help me??
Instead i have a white border for the preview and pink on the inside
I don’t seem to have done anything wrong… but it just doesn’t turn out O__O
Easy to follow with nice results- Thanks!
very very nice !
lookin great and useful
Very Nice and simple tutorial to Create a Blackberry Style Wallpaper. Thanks for shearing this nice tutorial.
Great tutoriyal..Thanku..
great! thank you very much!
thanks for the tutorial, it was cool
wow nice..simple,like it vry much!
i love all your great tips, tricks and tutorials, thanks for such excellent information!
this is one perfect and clean tutorials, thanks for sharing
very nice design
please give some sesision for every for creating new backgrounds
Really nice and useful. THX All
omg not that easy 2 follow, at least for me, could you please put some screen of the layer tablet while you do all the stuff? cause i dunno wich layer is selected in each step, also, im spanish n my PS3 is in this language, so its even harder for me, i dont underestand when it says “change the Blend Mode to Screen” ..? what does Screen mean? i know several meanings for this word, but none appears on my blend modes -_-
When creating the shadow for the first 2 chapes, doesnt it say on your image: “Opacity: 330 ” ???? max = 100 so..wtf?! xD
I dont know how to use pen tool, neither the direct selection tool (A) cause it just doesnt select anything -_-
i hope some1 helps me…
thanks for the tutorial, i underestand that the main cause of my problems is that im beginner xD
Gud Effect it help me alot 4 creating background
im stuck on step 5, can someone help me please…
its excellent, i loved it