PDA

View Full Version : cool absract backgrounds tutorial



the catalyst
October 14th, 2006, 19:33
I thought, in light of Malkster's awesome abstract grunge sig tutorial, I would post a tut for some of my favorite abstract backgrounds, great for signatures/avatars/whatever.

For this first installment, I have done a cool tech/lighning tut. Saw this somewhere else a while ago, can't remember where, but I modified it a bit and though i would post it.:)

-First open a new photoshop document, I'm using 250x250 pixels, but if you want to make a sig keep it under 520x120.
-make sure that your colors are the deault black and white by clicking the little icon to the left and below the colors on your toolbar.

1. lets begin, first do filter>render>clouds
http://img47.imageshack.us/img47/2362/cloudsjx1.gif
2. on the same layer do filter> render difference clouds (same as above, but darker)
3. go to image>adjustments>levels and a box should show up. Move the grayish knob at the bottom towards the black nob under the dark area. This shoud give you jagged lines that look like lightning. Actual thickness depends on personal preference
http://img285.imageshack.us/img285/7761/levelsns1.gif
4. Hit Ctrl+I to invert the colors. Here's what it should look like
http://img253.imageshack.us/img253/9919/lightningbq9.gif
5. duplicate the layer and on the duplacated layer go to filter>pixelate>mosaic and set cell size to something fairly large. I used 25.
6. on this same layer go to filter>brush strokes>accented edges and set the settings as follows
-edge width=2
-edge brightness=50
-smoothness=8
-should get something like this
http://img291.imageshack.us/img291/8357/accentededgeseq8.gif
7. set blending mode to "overlay", by using the drop down menu on your layer panel.
http://img525.imageshack.us/img525/2904/blendingmodebi2.gif
http://img511.imageshack.us/img511/7710/almosttherebr0.gif
8. Now all that's left is to change the colors. I like to change both layer colors individually for more controll, but you may also just flatten the image by right clicking and selecting flatten image from the menu.
9. To color press Ctrl+B (color balance) and adjust the knobs for shadows, midtones, and highlights. Or if you just want the easy way press Ctrl+U to change the hue, but makes sure to hit the "colorize box in the bottom right hand corner, or it won't get colored.

Ta-Da
http://img244.imageshack.us/img244/1448/alldoneec4.gif

Stayed tuned in the future for more background tuts:D

S34MU5
October 14th, 2006, 19:39
thats a cool tut.
wheres malks tut anyone got a link....?

the catalyst
October 14th, 2006, 20:14
K, ready for #2? Well here it is. One of my personal favorites, and also incredibly simple. Difficulty level=1.

Step 1 open a new photoshop document, I'm using 250x250 pixels, but if you want to make a sig keep it under 520x120.
2. Click on the gradient tool,
http://img129.imageshack.us/img129/7015/gradienttoolly2.gif
now on the top of the screen a menu should appear showing which gradient you have selected among other controls. Click on the gradient to change the colors.
http://img129.imageshack.us/img129/7668/gradientclickxq8.gif
Now we are goint to change the colors. You can add a new color, simply by clicking underneath the current spectrum in the popup box. You can change the color by clicking on the small icon under the color and then on the larger one beneath it. To remove a co0lor drag its marker off of the spectrum.
http://img420.imageshack.us/img420/8094/colorgradienttv0.gif

3. It is ideal, with this background to use multiple different colors and or, alternate colors multiple times as pictured above. This will make it work out the best.
Almost there... already.
4. Now, even though this looks good as a square gradient and any of the others we want a circle gradient, so select that from next to the gradient colors we clicked on earlier, it looks like a circle (duh?)
5. While we're here, select Difference blending mode for this gradient.
http://img237.imageshack.us/img237/8648/differencemv8.gif
6. K last step. simply drag your cursor across your canvas at different angles and for different lengths to get a cool effect. Just don't overdo it or it will begin to look sloppy.

Here are some samples I have done
http://img245.imageshack.us/img245/1896/done1xc4.gif
http://img245.imageshack.us/img245/8559/done2pk6.gif
This one I did using another gradient besides circle, still cool though.
http://img130.imageshack.us/img130/323/done3ik9.gif

More to come in the future :D

the catalyst
October 14th, 2006, 20:18
@ S34MU5, it's been stickied in this forum. Here's the link http://www.dcemu.co.uk/vbulletin/showthread.php?t=26144

S34MU5
October 14th, 2006, 20:47
thanxs for that second tut. looks like im on acid.
i wasnt in the forum sorry.
i saw it at the side of the psp main page.
but thanks!

Malksta
October 19th, 2006, 23:24
Nice :)

I might make another tut..

my last one is OOOOLD.. back in my n00bie days :p

the catalyst
October 21st, 2006, 02:20
I know, I saw the actual date when it was posted after I started this thread, but it's been getting quite a bit of attention as of late. Nice Job.

ACID
October 22nd, 2006, 08:22
Thanks for the tut. It took me for ever to figure it out i wish i would have seen this sooner.

the catalyst
October 23rd, 2006, 19:09
#Three

Saw a tutorial like this at tutorialized.com and modified it to look a bit cooler.

-pretty simple stuff, for beginner/novices
--Step 1: paint the entire canvas black using the paint bucket tool
--Step 2: go to filter>render>difference clouds, do this multiple times by hitting Ctrl+F multiple times until you get something like this
http://img300.imageshack.us/img300/7559/diffcloudsnm2.gif

Step 3: Okay, now we want to use the filter>distort>wave
and use the following settings:
-Wavelength min(66) max(164),
-amplitude min(38) max (62).
-And make sure, this is important, that you check off the "square" bubble in the box that says "type" in the upper right hand of the popup window

Randomize it until you get something like this
http://img59.imageshack.us/img59/5818/squarefj9.gif

Step 4: now use the wind filter (filter>stylize>wind) and selct the "wind" bubble, and "from the right". Now repeat the filter by pressing Ctrl+F once only

Step 5: Here's where I strayed from the path. You can go one of two ways here. For a smoother look use filter>brush strokes>accented edges and turn the smoothness notch to the left. For a more tech-y look use filter>brush strokes>crosshatch with low stroke length, high sharpness and low strength (stroke length must be 3 in order for it to look good).

accented edges
http://img70.imageshack.us/img70/3204/lightningol5.gif
Crosshatch
http://img193.imageshack.us/img193/9476/accentededgesqf4.gif

step 6: time to add color. Use Ctrl+U to bring up the hue color box. Remeber to selct "colorize" in the bottom right and adjust the knobs to your liking.

Heres what I came up with
Accented edges
http://img107.imageshack.us/img107/4458/almosttheregq6.gif
crosshatch
http://img49.imageshack.us/img49/1135/colorgradientba4.gif

You can also run some lighting effects by using filter>render>lighting effects
I got something like this
AccEdges
http://img259.imageshack.us/img259/3736/alldonemq5.gif

Wanna take it one step further?
-well after you run some lighting effects on it (works best with crosshatch) Use filter>stylize>glowing edges and get this beauty
http://img102.imageshack.us/img102/9921/done2ba6.gif

Tetris999
November 10th, 2006, 06:23
ZOMFG you are da man this looks so god damn cool!

the catalyst
November 11th, 2006, 17:01
ZOMFG you are da man this looks so god damn cool!

Thanks. Its been kinda a while since i posted a tut, maybe i'll do another one today. :)

mr.spooky
November 11th, 2006, 23:09
'ey plz keep up the good work:)

lokks REALLY nice!

XpspX
November 12th, 2006, 10:21
Really great tuts, feel free to post many more soom to come :p

(my tut #1 outcome is an attatchment)

Destroyer699
November 13th, 2006, 01:45
Great tuts.
http://i23.photobucket.com/albums/b385/destroyer69/Nice.jpg

the catalyst
November 13th, 2006, 20:07
nice XpspX, looks like you got the hang of it.

Destroyer699, I'm not quite sure what that is, but I like it. :)


Really great tuts, feel free to post many more soom to come
Keep checking back ;)

S34MU5
November 13th, 2006, 20:47
I might post a tut, if i can be foooked.

ACID
November 13th, 2006, 21:14
OK i have PSP photo XI , i have macro media 8 paint, and another. Yet i cant get the F***kin lightning effect. Now to my ???? what is the best program for this sort of stuff. My workers like macro media but they don't do this kind of stuff and as the boss i will not ask one of my employee's.

the catalyst
November 16th, 2006, 02:13
do you mean the "lighting effects" used in my tutorial or is it for something different?

I use Adobe Photoshop CS2, It's my personal favorite.

ACID
November 16th, 2006, 06:57
do you mean the "lighting effects" used in my tutorial or is it for something different?

I use Adobe Photoshop CS2, It's my personal favorite.

I mean the lightning , i know how to do everything else in your tuts using my corel psp XI. But i cant get the bugger lightining effect.:(

the catalyst
November 16th, 2006, 22:29
o "lightning" sorry, poor reading skills. :D
k do you have a "clouds" filter (or something like that in corel psp XI? Thats what you'd use in PS CS2, (but I don't have psp XI, so I don't know if you'd have that filter.) If you do - use that, then you could invert the colors and change the contrast. (Again I don't own psp Xi, so I don't know what capabilities it has.) If that doesn't work tell me and I'll see if I can find out how to do it for you. :)

the catalyst
December 3rd, 2006, 03:42
Sorry I haven't made one of these in a while, I've been pretty busy lately, but I was able to sneak one in this weekend.

Here's one I came up with while messing around in photoshop coming up with my congratulations piece for Tetris999's sig
Pretty simple, and if you've read my other tuts, you should be familiar with most of the tools etc

-Step 1. Open a new document (duh?) with whatever dimensions works best for your project

-Step 2. Press "D" on your keyboard to reset your default colrs (black and white) or press the icon next to the colors in your tools panel

-Step 3 Select your gradient tool, select the foreground to background gradient (black fading to white). Make sure that you're in difference mode and that you're using the "reflected gradient style", (second from the right.
http://img96.imageshack.us/img96/3697/step1va5.gif

-Step 4 Click and drag the mouse about fourty times across your document, for a decent amount of length, lets say about 1/4 to 1/2 the size of the document each time. Yes I know 40 seems like a ton of times, but it really doesn't take that long. And if you do less than fourty, I won't tell anyone.
http://img178.imageshack.us/img178/1930/step2dz1.gif
^^You should get something like this^^

-Step 5 Now your going to continue with the gradient tool, on the same layer, but now you're going to make your strokes very short, and at different angles. You only want to do about 5 of these short ones. It should look like this.
http://img218.imageshack.us/img218/3660/step3qq5.gif

-Step 6 Time to add color, Press Ctrl+U to bring up the hue box. Now we don't want to go overboard on the saturation, because it will look like we are forcing our colors, and that's not our goal.
http://img147.imageshack.us/img147/1897/step4br4.gif

-Step 7 Now create a new layer (press Ctrl+Shift+N) and with the gradient tool again do exactly what we did in step 4, but only do it about 10 times.
http://img142.imageshack.us/img142/3838/step5om7.gif
Change this layers blending mode to "OVERLAY" from the dropdown menu in the layers window.

-Step 8 Press Ctrl+U to bring up the hue window for this layer. The key here is to bring the saturation all the way up, otherwise you won't be able to see this second color, which is kinda the purpose.
http://img171.imageshack.us/img171/9327/step6vl2.gif

And you're done!
Finished product
http://img136.imageshack.us/img136/3372/step7nr3.gif


If you want to go one step further, you could throw a wave filter on your base layer
http://img244.imageshack.us/img244/8428/step8sv0.gif


For continued pandamonium use three layers, ooo ooo and have one be the wavy one!
http://img147.imageshack.us/img147/5787/stepalternative2yb6.gif


Ahh, well until next time The Catalyst, signing off! (I've always wanted to say that) :D

h4s30
March 20th, 2007, 02:49
ohhh pretty damn good i gotta remember this for whenever i get photoshop lmao

Lauryn
January 19th, 2012, 13:15
I thought, in light of Malkster's awesome abstract grunge sig tutorial, I would post a tut for some of my favorite abstract backgrounds, great for signatures/avatars/whatever.

For this first installment, I have done a cool tech/lighning tut. Saw this somewhere else a while ago, can't remember where, but I modified it a bit and though i would post it.:)



That was great help!
Thanks a lot for sharing that with us!

-First open a new photoshop document, I'm using 250x250 pixels, but if you want to make a sig keep it under 520x120.
-make sure that your colors are the deault black and white by clicking the little icon to the left and below the colors on your toolbar.

1. lets begin, first do filter>render>clouds
http://img47.imageshack.us/img47/2362/cloudsjx1.gif
2. on the same layer do filter> render difference clouds (same as above, but darker)
3. go to image>adjustments>levels and a box should show up. Move the grayish knob at the bottom towards the black nob under the dark area. This shoud give you jagged lines that look like lightning. Actual thickness depends on personal preference
http://img285.imageshack.us/img285/7761/levelsns1.gif
4. Hit Ctrl+I to invert the colors. Here's what it should look like
http://img253.imageshack.us/img253/9919/lightningbq9.gif
5. duplicate the layer and on the duplacated layer go to filter>pixelate>mosaic and set cell size to something fairly large. I used 25.
6. on this same layer go to filter>brush strokes>accented edges and set the settings as follows
-edge width=2
-edge brightness=50
-smoothness=8
-should get something like this
http://img291.imageshack.us/img291/8357/accentededgeseq8.gif
7. set blending mode to "overlay", by using the drop down menu on your layer panel.
http://img525.imageshack.us/img525/2904/blendingmodebi2.gif
http://img511.imageshack.us/img511/7710/almosttherebr0.gif
8. Now all that's left is to change the colors. I like to change both layer colors individually for more controll, but you may also just flatten the image by right clicking and selecting flatten image from the menu.
9. To color press Ctrl+B (color balance) and adjust the knobs for shadows, midtones, and highlights. Or if you just want the easy way press Ctrl+U to change the hue, but makes sure to hit the "colorize box in the bottom right hand corner, or it won't get colored.

Ta-Da
http://img244.imageshack.us/img244/1448/alldoneec4.gif

Stayed tuned in the future for more background tuts:D








This was great help! Good advice!
Thanks for sharing this with us!!

KarenStevens
February 15th, 2012, 03:23
Sorry I haven't made one of these in a while, I've been pretty busy lately, but I was able to sneak one in this weekend.

Here's one I came up with while messing around in photoshop coming up with my congratulations piece for Tetris999's sig
Pretty simple, and if you've read my other tuts, you should be familiar with most of the tools etc

-Step 1. Open a new document (duh?) with whatever dimensions works best for your project

-Step 2. Press "D" on your keyboard to reset your default colrs (black and white) or press the icon next to the colors in your tools panel

-Step 3 Select your gradient tool, select the foreground to background gradient (black fading to white). Make sure that you're in difference mode and that you're using the "reflected gradient style", (second from the right.
http://img96.imageshack.us/img96/3697/step1va5.gif

-Step 4 Click and drag the mouse about fourty times across your document, for a decent amount of length, lets say about 1/4 to 1/2 the size of the document each time. Yes I know 40 seems like a ton of times, but it really doesn't take that long. And if you do less than fourty, I won't tell anyone.
http://img178.imageshack.us/img178/1930/step2dz1.gif
^^You should get something like this^^

-Step 5 Now your going to continue with the gradient tool, on the same layer, but now you're going to make your strokes very short, and at different angles. You only want to do about 5 of these short ones. It should look like this.
http://img218.imageshack.us/img218/3660/step3qq5.gif

-Step 6 Time to add color, Press Ctrl+U to bring up the hue box. Now we don't want to go overboard on the saturation, because it will look like we are forcing our colors, and that's not our goal.
http://img147.imageshack.us/img147/1897/step4br4.gif

-Step 7 Now create a new layer (press Ctrl+Shift+N) and with the gradient tool again do exactly what we did in step 4, but only do it about 10 times.
http://img142.imageshack.us/img142/3838/step5om7.gif
Change this layers blending mode to "OVERLAY" from the dropdown menu in the layers window.

-Step 8 Press Ctrl+U to bring up the hue window for this layer. The key here is to bring the saturation all the way up, otherwise you won't be able to see this second color, which is kinda the purpose.
http://img171.imageshack.us/img171/9327/step6vl2.gif

And you're done!
Finished product
http://img136.imageshack.us/img136/3372/step7nr3.gif


If you want to go one step further, you could throw a wave filter on your base layer
http://img244.imageshack.us/img244/8428/step8sv0.gif


For continued pandamonium use three layers, ooo ooo and have one be the wavy one!
http://img147.imageshack.us/img147/5787/stepalternative2yb6.gif


Ahh, well until next time The Catalyst, signing off! (I've always wanted to say that) :D

This is pretty cool images.. This is what you called art... Thanks for step by step tutorial.... :)