How to create groovy vector art

This tutorial is brought to you my good friend at february-stars.com
I thought I'd share this crash course in creating amazingly hot vector artwork.

Step 1: Required

High level of confidence using Flash and Photoshop CS
Problems: jamieroy[at]hotmail.com

Alright, well, lets get down to business. A lot of people have been asking me to write a tutorial on how to make crazy vector artwork.

Comments

[Xthinker]

Raven is a free Vector program by Aviary. I haven't used it but I've used other image editing softwares by them. Heres the link:

http://advanced.aviary.com/tools

~Xthinker

[OhSnapZ0rz]

While this is a well done tutorial and cool craft this is not vector art.  You didn't touch a vector program.  The difference between this pixel art and vector is pretty big just so you know.  Great job regardless =D

[pyroboy212]

Vector art is a style. it doesn't need to actually be created using illustrator or ink-scape.

[gtoal]

I kind of agree but I see where OhSnapZ0rz is coming from. In the video gane world there have been wars over whether a raster emulated video game such as Battlezone is still a vector game :-)

However for me this was a disappointment because I was looking for vector art that I could send to a vinyl cutter as vectors! (Actually my vinyl cutter is really a scratchboard cutter at the moment, but thats by the bye...)

It might not be a bad idea to add some info to this about how to convert the final image to SVG with something like GNU Autotrace and Inkscape.

regards,

G

[Musicman41]

I think the biggest determinate of vector art is it's infinite scalability. If you substantially expand a raster, you will get a pixalated picture. If you expand a vector to any size, you have the same level of sharpness you had before.

[Michael Shoffner]

It could take a little more time but this tutorial can easily be done entirely in PS and be 100% vector.

Use the pen tool with the Shape layers option enabled to create each element. To create the guns and other difficult shapes, you can simply trace them and I would recommend turning your layer's Fill option to 0% so that you are able to see what you're tracing. Also, to make the tentacles appear to overlap, you can do this;
create two tentacles, duplicate the bottom layer tentacle, make the duplicate the top layer and from the top layer move the parts of the tentacle that are near the second tentacle such that one appears to go beneath the other.

[90mp11]

Doesn't flash create scalable vector files as standard...or am i being naive?

[Zaphod Beetlebrox]

Some flash stuff is vectored and some Photoshop stuff is (vector drawing tools) however all Illustrator stuff is. If you want true vector drawings (infinitely scalable) I would recommend Illustrator, plus it's still an Adobe program so it works vary similar to this tutorial.

[tomato99]

I made my one in tree hours:

[Zaphod Beetlebrox]

three?

[Chrono86]

There's gray pixels around the edges of the gun image, so when you try to wrap the tentacles behind the guns you see the gray pixels in between the tentacle and the gun. It's really messy looking. How did you make the transition look so smooth?

[Zaphod Beetlebrox]

You could either use the blur/smudge tool or a option from the top that trims a little off the sides of the whole image, I can't remember were it is located but you could search for how to remove green screen reflections and you should find it. Hope that helps.

[pyro-jim]

I'm really struggling with twisting the tentacles. You say to select a segment but how? I've tried every tool and it will not just select what I tell it to select, it always selects to some anchor points. I am using Illustrator by the way. Please will someone help.

[Zaphod Beetlebrox]

Illustrator's pen tool works differently (in my opinion better). The way I make tentacles is to make a triangular brush and then apply it to lines draw with the pen tool. Make a triangle then select it and press the new brush button, select art brush and then change the settings so that it works the way you want it. The first picture is creating the brush, the second is an example of the tentacles I made with this method (+ a glow effect) the third is a collection of images I drew with the pen tool.

[alexw2150]

This is brilliant, I did it on Kolourpaint on linux but it still worked

[wardyboyo]

heres my try...

[thing944]

I FREAKIN' LOVE THE ARCTIC MONKEYS!

[12Hippos]

The color scheme could have been better (no offence I can see you put a LOT of work into it). For example, green does not look good with blue, blue looks much better with red. If I were to make that, I would use black, white, lime green, and grey.

[foxtrot4697]

green is amazing with blue

[sharkstun97]

 however not bright green with that blue

[foxtrot4697]

ok yeah, good point

[StarshipMcGee]

woo hoo arctic monkeys

[KentonLee25]

i've had a couple attempts

[tomce544]

make ttriangle and when warp it

[qwertyman10]

Any idea if gimp has similar tools for doing the same thing? I tried to make one on my own. Bad idea.

[blagh]

Most of what's here you can also do in the GIMP - for the vector-based stuff (like the tentacles), you can try Inkscape (also free and open source). 

[Kidz_Creator]

Very cool. I wish i had photoshop so i could do this...Which version of photoshop did you use, or does it not matter?

[Rishnai]

Try Inkscape. It's an open-source vector image program with the same functionalities as Photoshop.

[computer_guy]

Eww. I dont like mac that much. Well, I guess I'll make an exception since you're doing a really good job =D

[bloke2022]

its not as nice as Kruton's, but this is what i came up with after only having photoshop 3 days.

[Kruton]

pretty cool I just installed Adobe Illustrator on my computer and used it with Photoshop Elements. Here's what I got so far:

[Zansion]

nice :D how long did it take you to make that? i love photoshop, and alas i too only have elements. but, just some positive feedback, i would try moving the skull, and the speakers below, or getting rid of them altogether. they seem a little crowding. and, they look like a noob made them, but the background is amazing.

[volquete]

thats freaking awesome! looks like a CD cover!

[Wants2belink]

WOW! Amazing man! Man, I wish I could at the very least think of something >_>

[Neo_999]

Pretty cool Instructable, I've tried it, it's not hard an the final result is awesome. I've done everything, the image editing and the vectorial drawing, with macromedia fireworks 8. It is very complete, intuitive and easy to work with. Here's the final result: Sorry for the bad English Portuguese greetings to all ;)

[ItsTheHobbs]

Here's mine in inkscape.

[imbz]

cool!!! ....im not familiar with adobe flash...can i make this purely in photoshop?

[Awesome Possum]

Try a free vector program. It makes things easier. Just google "Inkscape".

[Moosterz]

Yeah. You don't have to use a vector program. You just need to find the right brushes.

[wordlogic]

sweet. its easy with windows "paint" too