Monday, 7 September 2009

Create a Cool 3D Smashed-Looking Text

In this tutorial you’ll learn how to create the image above..

The things you’ll need are Adobe Illustrator and Autodesk 3ds Max..

1 - So let’s start: open up Illustrator, create a new Web Document and choose any dimension you want.. i’m going with a 1000px square image.. Now, with the Type Tool (press T), write any text you want, but not too much.. I’ve chosen “I MAKE THIS T-SHIRT LOOK GOOD” so that it could be printed on a t-shirt.. I want the text to be in a rather square layout… So, i’ve wrote each line of text in a single layer that i can edit freely.. Choose any font you want, but i recomend a strong bold one.. I used the Century Gothic, bold…

2 - Well, we now have the text, but i’m still not happy with the font’s width.. So, let’s add some thickness to the letters.. With all the layers and the text selected press Ctrl-Shift-O (which will transform all the text in paths that can be editable).. Now, to increase the thickness of the letters go to the Object menu and in there, Path, and then Offset Path.. In the options, activate the Preview option and change the Offset value until you’re happy with the letters.. i’ve chosen 3 px.. but it depends on the font size you currently have.. Be careful not to lose some of the letters’s details when the font is too thick.. Now just press Ok.. Making this created duplicated paths of all the letters but thicker.. so, actually, you now have two of each path.. Just open the Direct Selection Tool (A) and drag one of the inner paths out and you’ll see there are two.. press Ctrl-Z to undo that and go on to the next step.. we’ll take care of the “clones” later..

3 - We now have to bring the letters more close together.. just drag all of them together.. and then select them all with the Selection Tool (V) and press the Horizontal Align Center button in the bar above the image.. So, if we look at the image, we’ll see that it looks poor and lacks style.. To correct that, we’re going to change the size of some of the lines of text to add some dynamic.. I’ve scaled down the “THIS T-SHIRT” and increased both the “I MAKE” and the “GOOD” parts.. Hold down the Shift and Alt keys while resizing so that the image stays in its place while resizing.. Also hold the Shift key after you started moving some of the text so that it only moves in a perfect line… Look at my image to see how i’ve arranged the text.. In the next step, we’re going to merge all the text into the same layer, so, if you think that your image needs any change, this is a good time to change it..

4 - To merge all the paths into one, we first have to merge all the layers.. To do that, select all the layers and press the button i show on the screenshot and select Merge Selected.. Now we have to join all the paths.. so, with the Selection Tool (V), select all the paths and press Ctrl-Shift-F9 to show the Pathfinder window and in there press the Add to Shape Area and then the Expand button.. ok..

5 - Now we’re going to create all the broken parts in the text.. To do this, lets first place the text shape in the center of the image so that it can be more easily manipulated later, to do this, just select it with the Selection Tool (V) and press Ctrl-C and then Ctrl-V to copy it and then paste it.. the new shape that was created is rigth in the center of the image so just select and delete the other one.. Now.. tricky bit.. open up the Pen Tool (P) and draw a triangle like the one on my screenshot above.. Then select both the triangle and the text and Copy them (Ctrl-C) and Paste them (Ctrl-V) to duplicate them.. Still with the new two shapes selected, go to the Pathfinder window and click on the Intersect Shape Areas and then in the Expand.. This will create a shape that is only the intersection of the text and the triangle.. now, select the text shape and the other triangle and in the Pathfinder window press the Subtract From Shape Area end the Expand.. ok.. This created the layer of text except the triangle part.. Now just select the intersection part and make it smaller and rotate it a bit and place it like its a glass shard exploding away from the rest of the glass.. like in my picture.. Select the two shapes and press the Add to Shape Area so that they become the same again.. Ok, now that you know how to do this, repeat it some more times around the text to make it look like it exploded or something like that.. To sum up: create the triangle, select both, duplicate, intersect and expand, select the other two, subtract and expand, resize and rotate and move, select both and add them together.. ok..

6 - Now starts the 3d part… Open up 3ds Max.. and while it loads all its stuff, go to Illustrator again and with the shape ready, all the parts added toguether, got to the File menu and Save As.. select where you want to save the file and its name and keep the file type as .AI, now a window opened and in there select Illustrator 8 as the version.. Press ok and accept all the following messages.. Thats it for this step…

7 - 3ds Max must already be open by now, so, open it and in the File menu, select Import, and in the new window, select the file type .AI and go to the place where you saved the Illustrator file and open it.. Press Ok in the two dialogs that follow and now you have our shape in 3ds Max.. With the Rotate Tool, rotate the shape according to the X coordinate 90ยบ so that it stands up perpendicular to the floor.. Now right-click on the shape and press Convert To and then Editable Poly.. Now, in the Modify Panel, select Polygon (the red square) and press Ctrl-A to select all the polygons in the shape.. Still in the Modify panel, find the Edit Polygons section and in there press the black square beside the Extrude button, and in the dialog box insert 10 or more and press Ok..

8 - We’re now going to make the object smoother by adding to it a modifier.. Press Ctrl-A to select all the polygons and in the Modifier List select Smooth, and in its options, activate the Auto Smooth and the Prevent Indirect Smoothing.. Now, let’s change the material to a grey one.. Open up the Materials window by pressing M and in there select any of the spheres and press the button that says Assign Material to Selection and close the materials window..

9 - Let’s set up the render.. Press F10 to open up the Render Setup window and in the Common panel, go to the Output Size section and change the render size to a bigger one, like 1600 for 1200 (see my image).. You can now close the Render Setup window..

10 - Well, the image doesn’t look that interesting, so, we’re going so spice up the camera view a little… To do that, change the view into a 3/4 side view like in my image.. and continue in the next step..

11 - Now, lets increase the Field of View.. Select the Field of View tool and click in the window and drag the mouse down so that our object looks like it is a bit far from us.. You can exagerate a little.. Now the object is far away, so, with the Zoom tool zoom it in closer and you’ll see the effect of the Field of View.. The perspective is a little distorted.. Try to place the camera like in my image..

12 - We have to save the current view, so that we can get back to it later, so, in the Views menu, select Save Active Perspective View.. and now press F9 to start the rendering process.. when it finishes, save the image as a PNG file.. In the Window that shows up, use this settings: RGB 24bit and Alpha Channel.. close the rendering window and lets get back to our 3d object..

13 - We want to select all of the front polygons of the object, without the extrusion.. Only the original faces.. So, rotate the object until you can see its side and select all the back of the object until approximately half the length of the object and press Delete.. Now you just have your front faces… Go to the Views menu again and press the Restore Active Perspective View and press F9 again and save the new image with the same settings but different name (obviously).. You can now close 3ds Max (save if you want) and lets get back to Illustrator.

14 - In Illustrator, create a new 2000×2000px image and drag the two renderings into this image.. Select the one with the all the object with the Selection Tool (V) and go to the menu Object, select Live Trace and select Make and then Expand.. Now, with the Direct Selection Tool (A) click on the black path inside the traced image, copy it (Ctrl-C) and paste it (Ctrl-V) and again with the Selection Tool (V) select the traced image and delete it.. Now for the other image.. Do all you did for the previous one, except the part when you select it and copy, because in this image you have lots of paths and not just one, so, with the Direct Selection Tool (A), select the points in the corners of the image and delete them.. Now select the whole shape and press Shift-F6 to open the Appearance window.. and in there, double click on the Fill and set it to white.. You have now 2 paths.. Place the white approximately in the right place relatively to the black one.. But the black is too small, so, in the Appearance window double click on the stroke and set it to black, Press Ctrl-F10 to show the stroke window and increase it until you like..

Now just save the image and use it wherever you want.. This was my result:

If you’re a perfectionist, you can change the rendering size in the 3ds Max to something like 6000×6000px, which will give out a muck bigger image for the Live Trace to interpret.. So the results will be much better, even though everything will be much slower.. Here’s an image i made earlier with large resolutions, notice all the perfect details…

So, i hope this was somehow helpful =D

Continue Reading...

HOW TO… Create a halftone dot effect in Illustrator CS4

Step 1:
01_open_design.jpg
Open the design you want to give a halftone dot effect.

Step 2:
02_create_layer_black.jpg
Create a layer under the original design.
Create a shape that you want to convert into dots.
I copied the outside shape of my design and filled it with black.

Step 3:
03_enlarge_design.jpg

You have to enlarge the shape so far that the later created halftone dots are visible below your original design.
My design is round so i can use the scaling option in Illustrator.
If your design has a special shape you have to manually adjust it.

Step 4:
04_effect_blur_filter.jpg
Select Effect > Blur > Gaussian Blur

05_gaussian_blur.jpg
Use a Radius
you want.

06_result_gaussion_blur.jpg
The result looks like this.

Step 5:
07_object_rasterize.jpg
Select Object > Rasterize…

08_rasterize_options.jpg
The resolution should be 600 dpi or more.

Step 6:
09_pixelate_color_halftone.jpg
Select the object and select Effect > Pixelate > Color Halftone…

10_color_halftone_options.jpg
The color halftone dialog box will open where you can enter some numbers to adjust the appearance of the effect.
Set a number for the
Max. Radius.
This will determine the size of the largest dot in the effect.
The
screen angles
should be equal.

11_color_halftone_result.jpg


Step 7:
12_live_trace_make_and_expand.jpg
We need to convert the raster image to vector.
Select the shape and select Object > Live Trace > Make and Expand from the menu.

The shape is now a full vector object.


Step 8:
13_magic_wand_tool.jpg
Select with the Magic wand tool the white area and press delete.


Step 9:
14_layers_together.jpg

Step 10:
15_final_result.jpg

Now we are able to assign the color and set the appearance of the design to overlay with the transparency menu.

Copyright by : http://tutsplus.com

Continue Reading...

How to Create a Stinking Zombie Flesh-Eater in Illustrator

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

The first step in the process is to dig up a fresh corpse, and in this case I sketch out the zombie I intend to create. My personal preference is a black biro on paper. As I want to scan the image, a biro ensures that the lines are all dark enough to show. Also by sketching in ink, I don't get too hung up on the image at this stage and have some fun. The great thing about Illustrator is that I can always tweak and amend as I work.

Once I'm happy with the sketch I scan him into Photoshop. Obviously any software is suitable at this stage as no manipulation is required, so the software which came with your scanner should do the job just as well. 72 dpi and grayscale are fine and will help keep the processing power of your computer from having to work unnecessarily hard. You could even use a digital camera to capture the image if you don't have a scanner.

Step 2

Open up Illustrator and start with an A4 portrait document. I tend to work in CMYK, as alot of my work is for print, but I also find CMYK to be more intuitive when mixing colors.

Once your document is open, import the sketch into the document by going to File > Place and locate your sketch. Once your file is located, check the Template box, which will ensure your sketch is placed upon its own layer. It also gives the layer a faded opacity, which will help in the next step when you are drawing over the top of it.

Step 3

Before we begin creating our little flesh-eater, arrange the document into different layers, each one representing an element of the figure. This figure breaks down into five main groups: "Head," "Body Front Arm," "Back Arm," and "Guts." I create a new layer for each of these items, and this will help keep things organized as the illustration progresses.

Step 4

For this step, I am going to draw around the sketch of the zombie using the Pen Tool (P). At this point, I have a black stroke with no fill. This way I have the ability to see every element even if they overlap.

I begin with the head, working on the "Head" layer, and draw around each element. As I draw, I keep in mind which elements lay on top of each other, starting with the furthest away and building up until I have a line drawing of the whole head. I then repeat the process for each element until I have the whole zombie.

Step 5

Once I have the complete zombie, I select it all and change the stroke to white and give it a black fill. This will show me which elements are in the wrong order.

I see that the sockets of the eyes are sitting in front of the eyeballs. To move them back, I simply select the sockets and send back a step (Object > Arrange > Send Backward), repeating the process until everything is in the correct order.

Once I'm happy, I begin to block out the basic colors. At this point. I only need four colors: blue (skin), purple (clothes), red (gore), and dark blue (outline). I mix these colors up in the color mixer and add them to my palette, then apply them to the relevant areas.

Step 6

Now that I can see the linework, I'm going to go around the piece and tweak the line weight where I think it's required. I like the line weight to be nice and chunky, so using the Direct Selection Tool (A), I grab the points on the outline which are then tweaked to my liking.

Also at this point, I notice that the teeth have no outline. I select the teeth using the Select Tool (V) and make a direct copy (Edit > ;Copy), which I then paste directly below the originals (Edit > Paste in Back). Then I recolor the new teeth, set the color to black and once again, and resize the outline using the Direct Selection Tool (A).

The left eye currently sits outside the socket, so we just need to poke that bad boy back into his hole. Using the Selection Tool (V), select both the eyeball and the socket, then with both selected navigate over to the Pathfinder window and apply Intersect Shape Areas.

This will remove all the areas outside of what eyeball is peering through the socket. For future reference, if we were to now click on the Expand button located on the Pathfinder window, this would remove all the invisible areas, leaving just the white shape of the eye behind. However, since your eyeball may not be peering in the desired direction at this point, we'll leave it as it is.

Step 7

OK, so right now we have a straightforward little blue guy, and what we want to do is mess him up a little. You can hack into your artwork any way you please, but in this instance I'm looking at that top lip, which in my original sketch is tattered and torn.

First, I draw the shape of the ripped flesh using the Pen Tool. Once I have a shape I'm happy with, I then select the blue face shape and make a copy, which I then paste directly above (Edit > Copy, Edit > Paste in Front). I also perform the same action for the tattered flesh shape.

With both the copies selected, I once again use the Pathfinder palette and this time I apply the Subtract From Shape Area option. This punches the top shape through the bottom shape, and you are left with the tattered bottom lip. Now click on the Expand button we talked about earlier and you will be left with one shape

Now repeat the same steps with the right eye socket, so we can knock the eyeball back (Object > Arrange > Send Backward) behind the socket. We now have both eyes peeping from within the skull!

Step 8

Now that the face is the shape we want we can create the outline for it. Make a copy (Edit > Copy) and then paste the copy directly behind the original (Edit > Paste in Back). With the object still selected, use the Eyedropper Tool (I) to change the color to black. Now use the Direct Selection Tool (A) to resize and tweak the linework to create a nice chunky outline.

Step 9

I'm now approaching the point where I have the zombie in one piece, so before I start working on the little details I'm going to color the rest of his clothing. The colors I mix for my zombies should have that touch of grubbiness about them, so whatever colors I choose I throw in some black on top. This is where creating the document in CMYK helps, as it's easier to mix your palette together.

Step 10

Now that I have my colors, I want to give my zombie a bit of depth and to do this I'm going to add some shading. First of all I decide which direction the light is coming from, in this case from the left. Now using the Pen Tool, I begin creating the areas where the zombie's skin is lighter and the areas which will be darker.

Once I have created the shapes, I mix up a lighter version of the zombie flesh tone and a darker version. Next, I apply these colors to the shapes just created. With the shapes still selected, I drag their layers so the shapes sit below the face shape.

Select the layer with the face shape on top and with all three layers selected I create a new layer mask (Object > Clipping Mask > Make). The top object, in this case the face, becomes a mask with the two other shapes within it. The mask at this point will become invisible, so ensuring only the face is selected, navigate to your swatches where you can reapply the zombie skin color.

Repeat this process for each element until you have shaded the full figure.

Step 11

Now is the time to add the smaller details to the figure, like creases in the clothing and cracks in the skin. Using the Paintbrush Tool (B) and a brush I have previously created, I move around the relevant layers and start painting in the details. You can create your own brush, or use one of the brushes which come with Illustrator. I use the Pen Tool (V) with a black fill and no stroke for larger areas.

Step 12

Now that we have our zombie, we need some blood! I apply the blood the same way that I applied the shading, using the masks I have previously created. However unlike the shading, the blood applied to the figure has the opacity altered.

For this figure, I'm just adding blood stains to where he has wounds, so that means his face, arm, and chest. A lower opacity allows for the details behind these stains to show through, giving a little more depth.

Step 13

This little fellah still needs some added gruel I feel, and with a stomach wound like that, I think a pool of blood is the way to go. I create a new layer that I call "POOL" and place it below all the other layers.

Within this layer, I draw a puddle shape that I then color red. I then make a copy of the lower half of the zombie, and group (Objects > Group) the copied elements together. These grouped items are then placed into the "POOL" layer. Using the Free Transform Tool (E), I flip the group horizontally and then transform it so that it is a shorter reflection of the original zombie figure.

Once I'm happy with its size and position, I select it along with the pool shape and create a mask of the pool shape with the reflected figure within it. Now to give the reflection that crimson tint I simply draw a red shape above the reflection within the pool mask. Once again I alter the opacity to ensure you can se the zombie reflection through it.

Step 14

I want to soften the skin of the zombie, so I select all of the shaded and lit areas which I have masked off earlier in the tutorial. I than apply a gaussian blur to these areas. This gives the skin a spongier feel, as every zombie should have.

Conclusion

You now have the first member of an ever-swelling army of the undead!


Copyright by : http://tutsplus.com
Continue Reading...
 

Blogroll

Site Info

Text

Tut - Designer Copyright © 2009 WoodMag is Designed by Ipietoon for Free Blogger Template