Using vector designs in Photoshop

[OuTpaTienT]

Sorry I don't visit here more often guys. I just seem to have so many places that I already consider a home, it's hard making way for new one. Anyways, I just posted this basic vector tutorial over at TechIMO, so I thought I'd stop by and post it here too.

========================

Using vector designs in Photoshop

Ok, let's see if I can explain this without confusing myself. :D

Unfortunately, Photoshop doesn't import any vector formats. Photoshop does open many vector based formats (PDF, AI, EPS) but when it opens them it automatically flattens and rasterizes the image. This destroys the vector objects and turns the data into a pixel based image. But PS does give you a set of tools for creating your own vector objects that can be quite handy for certain types of images.

A vector in Photoshop is simply a group of points and lines used to define objects within your image. Same as any vector you might find in any "normal" vector based graphics program (Adobe Illustrator, Macromedia Flash, Corel Draw, CAD programs, etc.).

As a very simple illustration of one of the possible uses of vectors in PS, take note of the following example. I'm going to show you a very basic, 2 layer image.. Each layer contains a simple layer mask that will define what parts of the layer are visible. However, instead of the mask layers being the typical grayscale image, we're going to use vector masks to define what's hidden and what's visible on each layer.

First, let's make a vector shape. I'm going to use the Polygon Tool.

http://outtie.home.comcast.net/lessons/vectors/vectorlesson01.gif

I'll set it to way too many sides ;)…

http://outtie.home.comcast.net/lessons/vectors/vectorlesson02.gif

Then create my vector shape. Actually before I make the shape, let's look over the different vector modes. We have 3; Shape Layers, Paths, and Fill Pixels. Ignore Fill Pixels, it's pretty much useless AFAIC. Shape Layers will automatically place your vector object on a solid color filled layer as a vector mask. And Paths will allow you to simply create vector shapes all by themselves. You can then use those shapes for whatever you want (to make a vector mask, to define the shape of a selection, etc.) We're going to use Shape Layers in this example.

http://outtie.home.comcast.net/lessons/vectors/vectorlesson03.gif

So, I have my Polygon Tool, and my mode sed to Shape Layer, now I'll create my shape.

http://outtie.home.comcast.net/lessons/vectors/vectorlesson04.gif

And there you have it. A multi-sided polygon, or multi-pointed star if you will. As is standard in PS, when creating the object you can use the SHIFT, ALT, CTRL keys to control aspects of the object (like holding SHIFT will keep the aspect ratio perfectly square). Making this object has created a solid color fill layer using my current foreground color (black) and it's using the vector shape as a layer mask for this layer.

Ok….so…you may be wondering, what's so cool about vectors? What's the big deal?

Well for one thing, working with vector shapes you can do some pretty cool stuff. Watch…

I do like my many pointed star here, but it's a little mundane. Let's tinker with the shape and try to give it a little more pizzazz. First thing I'm going to do is switch to my Direct/Path Selection Tools. (The Direct Selection Tool allows you to select individual nodes or points of the object, while the Path Selection Tool will select an entire object.)

http://outtie.home.comcast.net/lessons/vectors/vectorlesson05.png

Then, to make the vector much easier to work with, I'm gong to turn off this layer's visibility so the color won't obscure our view of the shape. In this next image you see two arrows. They show you where to click to 1.) turn off the layer's visibility, and 2.) show only the path (aka, the vector shape).

http://outtie.home.comcast.net/lessons/vectors/vectorlesson05a.png

After that the only thing I see is the vector shape I'm working with:

http://outtie.home.comcast.net/lessons/vectors/vectorlesson05b.jpg

Now using the Direct Selection Tool I'm going to highlight/select just the inner points of my star. This tool selects all the points that you drag a box around. And similar to the marquee selection tool, you just hold down SHIFT to add more points to your existing selection. Here's my star with the inner points selected:

http://outtie.home.comcast.net/lessons/vectors/vectorlesson09.png

Then I'll right-click and do "free transform points".

http://outtie.home.comcast.net/lessons/vectors/vectorlesson10.png

And as you can see here, I can now manipulate the inner points while the outer points remain anchored. Cool huh?

http://outtie.home.comcast.net/lessons/vectors/vectorlesson11.png

[OuTpaTienT]

Now, that gives our basic pattern a little more pizzazz, doesn't it?

http://outtie.home.comcast.net/lessons/vectors/vectorlesson12.jpg

Ok, on to making our second layer. Those of you involved in making logos or anything with text, pay close attention here. If this is not something you don't already know how to do, then you're going to forever be grateful for learning this valuable little technique. Our second layer is going to be comprised of a custom text shape that no font can reproduce.

First thing we need to do is make a text layer and choose a font you want to start with (the simpler the font the better).

http://outtie.home.comcast.net/lessons/vectors/vectorlesson13.png

Then convert that text layer to a shape layer. This option is in the Layers drop-down menu. Follow along…:

http://outtie.home.comcast.net/lessons/vectors/vectorlesson14.png

Now, what was previously a font with an unchangeable shape has become vector shapes that you can manipulate any way you see fit. Again, cool huh?

http://outtie.home.comcast.net/lessons/vectors/vectorlesson15.png

With this technique you can take common fonts (that any John Doe can use) and transform them into your own custom, stylized text that nobody will be able to duplicate (except other Photoshop gurus of course.. :))

Now I'm going to use my Direct Selection Tool and see if we can't change these letters into something that is a unique shape yet remains readable as text. I'll keep it simple for this demonstration. After moving a few anchor points around and combining a few shapes, I've ended up with this:

http://outtie.home.comcast.net/lessons/vectors/vectorlesson16.png

If I turn on this layer's visibility then we once again have solid text.

http://outtie.home.comcast.net/lessons/vectors/vectorlesson17.png

And then I'll turn on my first layer's visibility, and … behold…

http://outtie.home.comcast.net/lessons/vectors/vectorlesson18.jpg

Hmmm. Well that really ain't so great is it? :lol: Not to worry. Layer styles will save us. Just start tinkering with adding various layer styles to each layer. Also try using differing blend modes to achieve nice looking effects. Maybe add a white or black background layer underneath it all, and in just a few mouse clicks…

That black silhouette shape above, can just as easily look like this:

http://outtie.home.comcast.net/lessons/vectors/vectorsamples.jpg

And all of those pretty images are being produced by these two simple vector shapes:

http://outtie.home.comcast.net/lessons/vectors/vectorsample04.gif


NOTE: In order to retain your vector shapes don't merge the layers, and when saving, save your original document in the native Photoshop format (.PSD) To make copies of the image suitable for the web or for emailing to friends, whatever, then use Photoshop's "Save for web…" feature to save a copy of the image as a .JPG, .GIF, or .PNG. But always keep your original document in .PSD format otherwise you'll lose all your vector data and your layers will get flattened to a single image.


http://outtie.home.comcast.net/lessons/vectors/out.jpg

[Crouse]

NICE WORK !!

Out..... I'm so jealous of your talent...... well ..... I could.... never mind ....

I gotta go do some more reading................... :)

[NDC]

Great job as always, Out! :)

[Mntsnow]

Thanks OuT :)

[NDC]

Here is a simpe little one I just made... :D

[OuTpaTienT]

hehe. Cool!

Show-off. :D

[NDC]

Show off to Out? nah! :)

[OuTpaTienT]

Originally posted by NDC
Show off to Out? nah! :)

Heh. Yeah, I'm one to talk huh? ;)

[GohanSSJ]

Really cool, nice job.

[Socal]

Repeat: Very nice tute, OuT~