In today’s web/graphic world, tendencies change seemingly over night and everyone is trying his/her best to be ahead of the wave. Heck, at least be on the friggin’wave. And that has to be the worst introduction to a tutorial ever, but hey, at least I got there. I wanted to call this the “Elegant lines” but really it just looks like a jellyfish. Click the pic, check it out.

Making this design isn’t easy but after you do it a few times it won’t seem like such a drag. So arm yourselves with some much needed patience and let’s do this thing!

First let’s divide the page. You guys can use guides because they are easy to hide and don’t take long to make. I actually drew lines because some people use this software or the other and some have guides (or similar) and others don’t. I went and I divided into 16 segments (4×4) but you can use other grids as well. I would suggest the 3×3 classic grid as the best other choice.

Also I made TWO (2) rectangular shapes, each one half the length of the canvas. You can see that they’re separated by the guideline in the middle. They’re black but you can put whatever color you want. I decided to first focus on the shape of the objects instead of the colors.

Make shure your rectangles are vector shapes, or the equivalent in your preferred software. This will NOT work with raster data!

Ok, now let’s select the first shape and warp it. The little handles should appear, and you can see in the picture why it is I made those guidelines. You take that first middle handle and drag it up vertically to where it meets the guideline. This way you assure yourself that you’re not doing things blindly and you have a clear path where to put things and where to move them. It helps a lot, trust me.

Now we do the same thing for the bottom handle. Pay close attention to where I took that handle. It meets right on the spot with the other one. That’s useful for a little variety in the shape, because having a constant thinckness is just boring. But more on this later. You can now commit the changes you made to your first shape.

Now let’s work on the other shape. Notice I didn’t do the exact same thing. And that’s because we want this to be like a single shape that twists and bends. Why didn’t I just make on shape then, you ask? Easy: because there are only 4/4 handles on one of these puppies and in order to do something a bit less boring than a dreidel you need some more of them. Makes sense, right?

As you can see it’s pretty much the same technique but because I took the handles higher it doesn’t look boring and still retains that “one piece” thing I was looking for.

Play around with the handles to get something funky looking. This isn’t rocket science so whatever makes your toes giggle is just peachy.

Having dragged a little more on the handles of the first shape I overlapped it on itself and got that twist effect. It’s pretty easy actually, you just have to drag the shape over itself and you’re done.

Same thing over here, except I didn’t drag the handle to make the shape overlap itself, instead I raised it until it got very close to the top edge. It’s the same effect but it adds depth to the shape.

Like most people, I don’t get it right the first try and you shouldn’t get yourself down if it’s not perfect from the beginning. This is the good thing about working with shapes instead of raster data: it’s non-destructive.

Now that the general idea is in place it’s time to put some color on this baby. So, a sexy black gradient as the background and a cool cyan-ish solid color on the shapes. Sweet!

Using the same techniques as above I made another shape to kind of complement the first one. And I think the cyan-lime combination is pretty good too.

Here’s some eye-candy for you. Just change the blend mode of the shapes to Add and add a nice Outer Glow set to blend on Color Dodge. I used a dark-cyan color for the glow.

You don’t have to make shapes from scratch if you want to add some diversity to the composition. Duplication and modification are just as good. I duplicated the first shape and resized / repositioned it to a general idea of where it might look good.

But just resizing and moving the shape around is not enough. Remember, we made these thing as vectors so we can drag the anchor points as much as we want without losing quality.

And again with the duplication and resizing, moving and modifying the anchor points. Only this time I did it with the second shape we made, the lime one.

Hello. What’s this? A lens flare? Yeah,a lens flare. This design needs some bold and bright lights to bring everything together and what better way than with a lens flare? Just set in to blend on Lighten and you’re good to go.

Lovely. Notice how the Lens Flare is affecting everything, especially the glow of the shapes.

As I said, just like everyone else, I screw up too. But at least I resolved my issue: the lower right part of the picture had this weird, out of place horn like thing which kind of seemed to look good at the beggining of this tutorial but now was just standing out uselessly. So bye bye mr. weird horn thingy!

Add in a redundant message with some nice, modern typography and you might just get lucky tonight! No you won’t.

Everyone has been ranting for quite some time now how the Web 2.0 style is over, how we should move on. I agree, don’t get me wrong, there where times when Beta badges almost made me gag but I can’t help myself be just ~15 degrees off from the system. So I added a reflexion. Am I evil? Yes, I am.

But just to avoid all the bad mouthing about my reflexions I faded them properly and blurred them, you know, like in real life. Because on the web, most of the time, light does not disperse. Go figure.

Well here we are, the end of this silly, somewhat pointless tutorial. Theoretically, you should have learned something about shapes and non-destructive workflows. But mostly about how no matter what you do, you can turn a bad design into something cool as long as you don’t give up. And that’s the best lesson I or anyone else can ever teach you. Be sure to come back around and see what design nonsense I have dumped lately on the ever so unexpecting internet.