By Rick, Color Charge

This tutorial explains how to create a energetic, vibrant, colorful wallpaper, like the ones available at Color Charge. These lines, which we’ll call Chroma were highly inspired by the iPod Nano Ad from 2006 and some Quantum Chromodynamics nerdery stuff. You will learn how to bend blurry shapes with Warp tool to draw the lines, beams, and steams. Then you’ll know how to add some glowing and vibrating color effects, and finally polish your drawing. Aside reading this tutorial, you’ll need Photoshop CS2 or CS3, and preferably a computer with a lot of memory and a larger screen to achieve that effect.

Download Photoshop file

Initial setup

Start with a very, very large screen: 3000 px x 2000 px wide. Draw a rectangle as background for the whole area and fill it with a dark linear gradient layer style. Align that gradient with 45 degrees vertically (sometimes you may change that angle to 90 or 60 degrees). Since the beginning, pay special attention to colors: black and dark violet as base color. The waves colors will match a triad complementary balance with the base color, in our case, the violet-cyan-orange axis.

screen

Warp Tool

Draw lines! Many parallel lines (horizontal or vertical, or both!). Group them, duplicate, rasterize, group, duplicate, rasterize… and finally add some blur. In this example I used white as base-color for the line themselves (white is the easiest color to balance and add glowing and other layer styles):

screen

After you reach a wide and tall group of lines, is time for some magic: randomly distort the shape with Warp Transform Tool ( Photoshop > Edit > Transform > Warp ):

screen

One thing you’ll probably notice is the amount of confusing structural lines crossing over the shape; your first attempts are going to be almost trial-and-error, later you’ll get used to this really amazing tool and will master the shapes of Chroma. Don’t worry trying to find the perfect shape so early, things will fit better together when you have more than 5 separate shapes matching a pattern or a familiar shape.

When complete, remember to press the Enter key, or click on the Apply Warp button, on the top. If your computer survives the intense rendering and image post-processing… ;) your artwork should be something like this:

screen

Remember to use the Erase Tool to remove sharpen edges and give the wave a surreal looking. Explore other combinations of shapes, lines, and textures – they’ll enhance your drawings.

If you did a small shape I don’t recommend you size it up or even warping again. The Warp tool isn’t that smart because you’ll be playing with rasterized shapes – not smart objects or vector shapes. If you insist warping the same shape again, your shape is going to get some unwanted sharpen or sometimes blurry edges (depending on your case). To avoid that, I recommend you the opposite way: start with a very large area and a large shape, then size it down. Better results, easier to distort.

Glow, screen, multiply, and other layer styles

When you have the perfect shape, you will need to add its soul, I mean, the layer styles :). Again, open the layer styles panel, and mix Gradient Overlay with Outer Glow styles, and combine them with Screen, or Overlay as layer Blending Mode. A secret hint: when glowing, try using brightly and vivid colors, such as yellow, lime, pink, or cyan, picking the color that is in complementary contrast with the dark gradient we did on the beginning.

To achieve the Chroma effect, I used a gradient fill (yellow to gold), plus the following Outer Glow styles with the following configuration:

screen

Brush polishing

Bring your drawing to life with motion. Add some scattered round dots to simulate speed and movement. Within the Brushes panel ( Photoshop > Window > Brushes, or F5 ), explore the sizing, scattering (with fade), spacing, and pressure:

screen

The big cells are just the way the smaller ones, except the size and spacing. A bit of randomness is really welcome and exciting:

screen

The "range" option in this step is very important – it will give a cellular-looking to the glowing particles – like if they were intensely vibrating:

screen

Poor kid…got any blurry edge? Don’t worry. Use the blur tool and correct that.

screen

Finalizing the drawing

Be creative and fearless to do a complete mess with the shape – in my experience, the messier the better. Size down the area and crop. Draw as many layers as your computer’s memory can handle. Sometimes you won’t be able to merge layers because the effects and styles that were applied. Also use layer’s blending and opacity to give your shapes a translucent appearance.

Our final result, after cropping:

screen

Conclusion

Now is really easy to get waves, brightly flowing across the infinity of color…okay, I went a bit far ;). I hope this tutorial helped you. If so, please let us know more about your artworks and drawings based on this tutorial on the comments. Thank you!

Download the Photoshop Tutorial file.

Download some Chroma wallpapers at Color Charge.

260 Comments

1 11 12 13
  1. complex 41
    Aug 4, 2011 @ 10:15 am

    Complex 41 saç bakım seti, tamamen bitkisel ve doğal içeriği nedeniyle güvenle kullanabileceğiniz bir üründür. complex 41İçeriğindeki bitki özlerine
    (55 çeşit bitkinin özü vb.) aşırı hassasiyeti olan kişilerde saç derisinde bir miktarkızarıklık yapması doğaldır. Bu durumda kullanım sıklığını azaltmanız tavsiye edilmektedir.

    Reply

  2. gainmax
    Aug 23, 2011 @ 5:44 am

    Complex 41 saç bakım seti, tamamen bitkisel ve doğal içeriği nedeniyle güvenle kullanabileceğiniz bir üründür. complex 41İçeriğindeki bitki özlerine
    (55 çeşit bitkinin özü vb.) aşırı hassasiyeti olan kişilerde saç derisinde bir miktarkızarıklık yapması doğaldır. Bu durumda kullanım sıklığını azaltmanız tavsiye edilmektedir.

    Reply

  3. complex 41
    Aug 23, 2011 @ 10:02 am

    And then he handed you the thirty-five 55

    Reply

  4. complex41
    Aug 23, 2011 @ 10:36 am

    And then he handed you the thirty-five 45

    Reply

  5. Ken
    Oct 11, 2011 @ 1:04 am

    Nice wallpaper

    Reply

  6. venomboy
    Nov 29, 2011 @ 1:00 pm

    A really big thanks for the tips

    Reply

  7. ercan
    Dec 21, 2011 @ 11:24 am

    Your blog is wonderful, I like it very much, thank you!! boyaci Thank you to expect this site

    Reply

  8. repair missing dll
    Jan 13, 2012 @ 7:42 am

    This is the greatest driver site on the web. Not only did I find the drivers I needed to update my product, but also get other helpful information to optimize my computer. My computer never ran so well like now. Thank…

    Reply

  9. adobe photoshop technique
    Jan 31, 2012 @ 11:31 pm

    nice works dude…

    Reply

  10. KHOKON
    Mar 11, 2012 @ 11:57 pm

    Great Post. thanks for share.

    Reply

  11. Seam
    Apr 25, 2012 @ 5:08 am

    thanks Brother

    Reply

  12. yemek tarifleri
    May 2, 2012 @ 12:28 pm

    nice works dude…

    Reply

  13. fzvc
    Jun 13, 2012 @ 6:27 am

    dsadaddasd

    Reply

  14. fzvc
    Jun 13, 2012 @ 6:28 am

    nah i is really good

    Reply

  15. fzvc
    Jun 13, 2012 @ 6:28 am

    it*

    Reply

  16. Daljit Singh
    Jul 1, 2012 @ 12:58 pm

    hmmmm ……………………………

    Reply

  17. çizgi film
    Jul 10, 2012 @ 3:04 am

    nice sharing.. thanks..

    Reply

  18. Frank Vega
    Jul 28, 2012 @ 11:05 am

    Thank you for the tutorial, very nice. Would you be so kind as to teach a newbie how to get through the step where you say “Group them, duplicate, rasterize, group, duplicate, rasterize”? Thanks a lot.

    Reply

  19. john lester garcia
    Aug 7, 2012 @ 6:49 pm

    is there any video?? Because i cant follow the instructions..

    Reply

  20. DymoLabels
    Jun 1, 2013 @ 9:29 am

    hi
    i really like your collection
    i really like it
    thanks for sharing

    Reply

1 11 12 13

Leave a Reply