44
Home Submit Your Wallpaper/Tutorial Tutorials FAQ About Us Submit Send us your Wallpaper and or Tutorial Wait We will give a quality test to all Wallpapers Approved Now your Wallpaper is Online and available to Millions GoodWalls All Exclusive Landscapes Minimal Photography PhotoManip Urban Abstract Digital Art Vector 09/05/2009 3D logo Tutorial | Good-Walls.com good-walls.com/…/3d-logo-tutorial/ 1/44

3D Logo Tutorial _ Good-Walls

Embed Size (px)

Citation preview

Page 1: 3D Logo Tutorial _ Good-Walls

HomeSubmit Your Wallpaper/TutorialTutorialsFAQAbout Us

Submit

Send us your Wallpaper and or Tutorial

Wait

We will give a quality test to all Wallpapers

Approved

Now your Wallpaper is Online and available to Millions

GoodWallsAllExclusiveLandscapesMinimalPhotographyPhotoManipUrbanAbstractDigital ArtVector

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 1/44

Page 2: 3D Logo Tutorial _ Good-Walls

Many people asked me how to do this, heres your awnser, with only illustrator and photoshop youcan do almost anything. In this Tutorial you will start with the making of a logo shape, going torough 3D, and finishing it in Photoshop. This is so easy that even the starting beginner can do it.

Illustrator Lets GoCreate a new web document doesn't matter the resolution since we are working in Vectorshere, just remember to use RGB.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 2/44

Page 3: 3D Logo Tutorial _ Good-Walls

Now with your document created lets go to the tool bar and pickup the Elipse tool or hit (L) onyour keyboard, remember to hold down shift while doing this circle so it stays perfect.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 3/44

Page 4: 3D Logo Tutorial _ Good-Walls

Go to the top of your screen, take off the Fill color choose None, and put a stroke of 25pt.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 4/44

Page 5: 3D Logo Tutorial _ Good-Walls

Now that we got our Circle done lets make a Fill instead of a stroke. Go to Object -> Expand, awindow will come up make sure you got Fill and Stroke ticked, click ok.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 5/44

Page 6: 3D Logo Tutorial _ Good-Walls

See.. Now your shape as a fill and no stroke, that's the way to go.

Joining UpGet the line segment tool, and make vertical line, set the background to none, put the stroketo 25pt as our circle, finally go to Object -> Expand.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 6/44

Page 7: 3D Logo Tutorial _ Good-Walls

To make sure we got this perfectly aligned press command+Y or for windows user ctrl+y thisway we get to the Outline Mode and zooming as much as you want to make sure both objectsare aligned.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 7/44

Page 8: 3D Logo Tutorial _ Good-Walls

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 8/44

Page 9: 3D Logo Tutorial _ Good-Walls

After the Vertical alignment is good press again command+y or ctrl+y to get back to normal view.Now get a ruler here. command+R or Ctrl+R and push one from the top so it aligns with thetop of the circle, after that simply push your rectangle until it hits this ruler. ok? Perfect!

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 9/44

Page 10: 3D Logo Tutorial _ Good-Walls

The Evil PathfinderThe pathfinder is a must know tool in Illustrator, here we don't cut like photoshop, we extractobjects using objects. Ok lets move on, go to Window -> Pathfinder.

Now we will join this objects together, it's very simple, just select both objects and click "addto shape area" in the Pathfinder window (see image).

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 10/44

Page 11: 3D Logo Tutorial _ Good-Walls

But we aren't done. It looks like it did nothing, but in fact you just need to go to Object ->Expand Appearance and voila your 2 objects are now just one.

Cutting ObjectsMake a simple square and rotate it like this. Hold down Shift for a perfect 90º rotation.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 11/44

Page 12: 3D Logo Tutorial _ Good-Walls

Now put the shape like I did here, and with both objects selected hit the Vertical alignmentbutton on top (see image).

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 12/44

Page 13: 3D Logo Tutorial _ Good-Walls

Everything is aligned, lets select only the square now, click the right button of your mouse andgo to Arrange -> Send to Back.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 13/44

Page 14: 3D Logo Tutorial _ Good-Walls

Again bring up the pathfinder, and with the two objects selected hit "minus back" in thepathfinder window.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 14/44

Page 15: 3D Logo Tutorial _ Good-Walls

Our logo shape is finally done. Easy huh?

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 15/44

Page 16: 3D Logo Tutorial _ Good-Walls

The 3D partAfter we got our shape done give it a light color so we can see the object in 3D perfectly.Ok now go to Effect -> 3D -> Extrude Bevel, use the following settings, or what you like most.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 16/44

Page 17: 3D Logo Tutorial _ Good-Walls

Click ok and now we got our 3D object, but to edit it we need to expand appearance, so Object-> Expand Appearance.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 17/44

Page 18: 3D Logo Tutorial _ Good-Walls

Giving it lightCreate a new gradient, window -> gradient, you don't have to use my colors so just make sureyou got a light a medium and a dark version of your color. Make a Radial version and a Linearone.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 18/44

Page 19: 3D Logo Tutorial _ Good-Walls

With the Direction Selection Tool (A) select the inside of the object like we did, remember tozoom so we get all shapes, if you have to go one by one.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 19/44

Page 20: 3D Logo Tutorial _ Good-Walls

Now with the radial gradient we created selected simply drag from the bottom middle to thetop, try different times until you are happy with it.

Now the front of the shape, using the gradient tool again start from the middle and go out of theobject so that the light comes from the middle, remember use radial gradient here.

For the other parts just use the same but this time Linear Gradient, try to match mine, it's easysimply select each shape with the directional selection tool, get your gradient and try it out.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 20/44

Page 21: 3D Logo Tutorial _ Good-Walls

PhotoshopPlace your Illustrator shape in a new Photoshop Document, give your new document a 800x600 Ithink that will do, after you place it Rasterize the layer. Create a new layer and put it belowyour logo layer, name this big shadow. Get the elipse selection tool and make a selection like Idid.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 21/44

Page 22: 3D Logo Tutorial _ Good-Walls

Great now get the gradient tool (G) and make it black to transparent and click the radial option.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 22/44

Page 23: 3D Logo Tutorial _ Good-Walls

Start from the middle and straight out until you get something like this.

Go to Filters -> Gaussian Blur -> and give it a nice blur in our case we did 6.0 but if you areusing a diferent size it may not suit you, just try different settings until you got it.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 23/44

Page 24: 3D Logo Tutorial _ Good-Walls

Get the opacity down to 30%. Create another new layer and name it small circle do the samething as you did for the big circle, but put the opacity to 70% and dont forget the gaussianblur 4.8.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 24/44

Page 25: 3D Logo Tutorial _ Good-Walls

Hold down ALT+SHIFT and drag your circle to the other part of the logo so it copies it.Perfect!

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 25/44

Page 26: 3D Logo Tutorial _ Good-Walls

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 26/44

Page 27: 3D Logo Tutorial _ Good-Walls

Just one more little tweak, select the top of the logo (that little square) create a new layer andname it shine, do a gradient of white to transparent with the linear option selected.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 27/44

Page 28: 3D Logo Tutorial _ Good-Walls

Shiny LinesPerfect, give it a opacity of 80%. For those little shiny lines, create one more layer, name it"little lines" get the pen tool (P) and make a selection like I did.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 28/44

Page 29: 3D Logo Tutorial _ Good-Walls

Now select your brush tool (b) and put the master diameter to 1 and hardness to 100%.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 29/44

Page 30: 3D Logo Tutorial _ Good-Walls

Go back to the pen tool (p) and hit the right mouse button and click stroke path. SelectBrush and click OK.

Give the "little lines" layer a Overlay and put down the opacity to around 58%.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 30/44

Page 31: 3D Logo Tutorial _ Good-Walls

We could play with this a little more, give it some texture or noise to make it feel more realistic,but for this we think it works.

Keep in touch with us, Subscribe to our RSS feeds, Tutorials or Wallpapers. Almost every day anew article, a new wallpaper or a new tutorial.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 31/44

Page 32: 3D Logo Tutorial _ Good-Walls

This Tutorial is Exclusive to Good-Walls.com it may not be copied or linkedwithout permission.

Did you enjoy the Tutorial?

digg it

32diggs

Thank you

Comments1Ali Salem

June 20th, 2008 at 6:46 am

Man thanks a lot!

2Eli

June 20th, 2008 at 7:07 am

Beautiful outcome, and nice looking site you have here. The colors used in the logo really make it lookgreat.

3greven

June 20th, 2008 at 6:07 pm

Great tutorial. Simple and effective!

Bom post outra vez.

4ROBERT

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 32/44

Page 33: 3D Logo Tutorial _ Good-Walls

June 21st, 2008 at 6:35 am

thanks

5thazer

June 21st, 2008 at 4:16 pm

sweeeeet tut!! thanks!

6ice

June 22nd, 2008 at 9:11 am

woow ! nice

7Marc

June 23rd, 2008 at 11:55 pm

Hi, I did this tutorial, and well when it talks about hitting (A) to get the direct select tool and select thesmall shapes, I am unable to do that, it just selects the shape over and over again. I am using AdobeIllustrator CS3, I don’t know if you used a different version. Any help would be appreciated, thankyou.

8Duarte Pires

June 24th, 2008 at 5:22 am

Hi there Marc, you have to expand the shape first, select the object and go to Object ExpandAppearance, after that you can select individual shapes.

9ZaFaR

June 26th, 2008 at 10:59 pm

congrats! keep up the good work!

10huszone

July 1st, 2008 at 8:14 am

mate great skills and talent. keep it up

11Daniel Skinner

July 1st, 2008 at 9:07 am

Is there anyway to achieve a similar effect but still keeping the entire logo as a vector?

Dan

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 33/44

Page 34: 3D Logo Tutorial _ Good-Walls

12Duarte Pires

July 1st, 2008 at 11:38 am

Yes Daniel, in this tut I haven’t showed all the things to do in photoshop, I also burned the logo andthere are tons of thing you can do in photoshop that you can’t in illustrator, But I will do in the future ahow to do a 3d looking logo again, but this time illustrator only and no Typo, only shapes.

13Daniel Skinner

July 1st, 2008 at 11:40 am

Duarte, Thanks - that’s a good way to get people to subscribe. I’ll wait for that tutorial to show up inmy RSS reader!

Thanks

Dan

14Duarte Pires

July 1st, 2008 at 11:43 am

Thank you for subscribing.

15Daniel Geraldi

July 1st, 2008 at 6:08 pm

Very cool!Thanks!

16gen

July 2nd, 2008 at 8:12 am

wow! amazing tut. I remember seeing this logo on Faveup.com and I was blown away about howgood it was and was wondering how it was made.

17yuriy danilov

July 3rd, 2008 at 4:22 am

Nice!

18Ashraf

July 3rd, 2008 at 5:54 am

You don’t need Photoshop to do anything in this tutorial. All these steps can be done in Illustrator!(CS2 and up)

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 34/44

Page 35: 3D Logo Tutorial _ Good-Walls

19Jeff Justice

July 6th, 2008 at 8:23 pm

Hey! Great tutorial… Thanks.. But it could have been easier to do with the simplest 3D apps…

20Pox_Staff

July 7th, 2008 at 2:23 pm

Wow. You made it so simple. I saw another tutorial at tutorial9 using photoshop and was wondered ifit was not easier in Ill. Good job.

21Matt

July 8th, 2008 at 2:08 am

Hey, I am following along with this tutorial (because it looks awesome) and have encountered aproblem. Not sure if i’m doing it wrong, its assumed knowledge I don’t know or you forgot to writesomething in lol.

I am trying to do a similar thing on another shape however when I try to the gradient this happens…any reason why?

http://img.skitch.com/20080708-tmthdxpptmyyxhr8f3835td6y8.jpg[ZOOMED IN 600%]

Cheers,Matt.

22Duarte Pires

July 8th, 2008 at 6:03 am

Hi Matt, what you doing is giving it the Gradient but you need to get your Gradient tool and selectwitch side you want it to start and finish, otherwise it will give a individual gradient to all. Example:Click on the right side of your screen, and drag it to the left side, this will have a nice gradient from theright to the left.

23Matt

July 8th, 2008 at 6:10 am

Thanks!

I will try that now

Cheers,Matt.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 35/44

Page 36: 3D Logo Tutorial _ Good-Walls

24Dan

July 8th, 2008 at 8:30 am

super

25Boombuz

July 12th, 2008 at 8:47 am

Thats an excellent tutorial, trying out now!

26Kiten

July 13th, 2008 at 12:19 pm

Good work, its look great

27James Kurtz III

July 14th, 2008 at 5:03 pm

Very nice. Thank you.

28Ryan Flynn

July 15th, 2008 at 3:03 pm

Excellent tutorial - this is the first tutorial I have ever done in Illustrator, the first anything I have done inillustrator - the fact I was able to get it done speaks to how well this is written.-Mucho Thanks!

29jasmine celion

July 16th, 2008 at 7:38 am

This is really nice tutorial thanks for sharing itNice [post thanks for sharing it

jasmine celioncool-hotstuff.blogspot.com

30Danh ba web 2.0

July 16th, 2008 at 11:26 am

Thanks for share! Good blog !

31Jwm.

July 17th, 2008 at 4:23 pm

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 36/44

Page 37: 3D Logo Tutorial _ Good-Walls

Very useful, thanks a alot!

32Matan AKA BendaMan

July 17th, 2008 at 8:22 pm

Hi, this is my first tut’ in illustrator and I have a problem with the Direct selection tool, I cant it don’tgive me select the dots anly the all shape and i can see the dots (becaus i did the expand) but still Ican’t select them :\pls HELP !

Matan.

33-Rizz_DogoDesign-

July 18th, 2008 at 12:58 am

Thanks! very useful tutorial!

34Chekill

July 19th, 2008 at 9:24 pm

DAMN! WHAT A EASY WORK! JAJAJAJA IS TOO FAST! SO SIMPLE! ANDSOMETIMES WE ARE BLOCKED ABOUT HOW TO SOLVESOME WORKS! WE HAVETO READ; TO INC¿VENT! THANKS! THIS IS NOT A “HOW TO…” THIS IS AN:OOOPEEENN YOURRR MIINNDD!!!! The answers are in our own hands! Damn! jajaja!THAAAANNNXXX!!!!

35Caerolus

July 24th, 2008 at 4:15 pm

Hey man. Nice work. I’m trying it but I’ve got this problem:http://pub.caerolus.com/illustrator.jpgSeems that the 3D is not done properly, like there were missing parts.Any ideas? Thanks!

36dogorgod

July 27th, 2008 at 4:27 am

Very nice!

Signed reprint it,thanks u~

37Fhad Saud

July 30th, 2008 at 2:54 am

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 37/44

Page 38: 3D Logo Tutorial _ Good-Walls

Thanks!I try that nowit is great

38FullDevr

July 30th, 2008 at 5:13 am

Excelente tutorial

Keep on going

39Ines

July 31st, 2008 at 3:30 am

Nice…well done =)

40Alex Samsonas

July 31st, 2008 at 9:55 am

really cool

41vasir

July 31st, 2008 at 10:33 pm

great tutorial!

42Hedva

August 14th, 2008 at 4:32 am

hi, i tried your tutorial but i’ve some problems;

http://i36.tinypic.com/2n00qap.jpg

43Caerolus

August 16th, 2008 at 6:45 am

Same happens to me. Any ideas?

44Vahid

August 18th, 2008 at 5:28 am

wow thx, very helpful

45adhonys

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 38/44

Page 39: 3D Logo Tutorial _ Good-Walls

August 26th, 2008 at 6:02 pm

Excellent tutorial, congratulations.i want to post it on my blog.

with your permission.

46joonbug

August 27th, 2008 at 11:30 am

thanks a lot bro! very helpful

47JONxBLAZE

September 1st, 2008 at 9:38 pm

Very nice tutorial…Illustrator is awesome!

48LifesizeStudios

September 1st, 2008 at 10:32 pm

Good tut

a few things could have been quicker, but a few things were definitely quite quick.

Everything could have stayed right in Illy tho.

49carolyn

September 12th, 2008 at 3:18 am

Thanks for the tutorial. One question, how do I put a linear and radial gradient on the one object?thanks.

50ELNAGGAR

September 12th, 2008 at 8:46 am

ITS VERY GoodTHANK YOU

51zazy

September 12th, 2008 at 9:13 am

thanks a loooooooooooooooooooooooooooooooooooot!! a very good and professionel tutorial.thanks!

52Math

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 39/44

Page 40: 3D Logo Tutorial _ Good-Walls

September 24th, 2008 at 9:43 am

Very helpfull, and nice details for the finish

53Luis castro

October 11th, 2008 at 5:27 pm

I did this job but, it was a little difficult to do, I mean, first I couldn´t do it. then I decided to doit.Guees what????

I did it !!!!!!!!!!!!!!!!!!!!

At the beginninn it´s a little difficult, isn´t it?

Well, there´s some things that I don´t understand about Illustrator…But thanks

54Tomtom

October 12th, 2008 at 9:14 am

awesome tutorial!

55siyam

October 27th, 2008 at 6:04 am

Great for beginners.

Your Comment is Important

Name(required) Email (required) WebSite

Submit Comment

Snow Turquoise Wallpaper

Subscribe to our FeedsWant to get the latest Wallpapers in your RSS reader?

Just click below and Subscribe to our wallpapers feeds and or tutorials.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 40/44

Page 41: 3D Logo Tutorial _ Good-Walls

Wallpaper feed Tutorials feed

Advertise Here

Send us your Wallpaper and Tutorial!GET PAID, send us your Wallpaper and get $30, send us the tutorial for it and get $40 more.

Find out more here.

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 41/44

Page 42: 3D Logo Tutorial _ Good-Walls

Recent Posts

Mario World Wallpaper

2008-11-05

Fibre Wallpaper

2008-10-28

The Twist Wallpaper

2008-10-24

www.shutterstock.comAds by Goooooogle

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 42/44

Page 43: 3D Logo Tutorial _ Good-Walls

Musica Viva Wallpaper

2008-10-20

Rigid Wallpaper

2008-10-13

Fastest Night Wallpaper

2008-10-07

Voll Wallpaper 3

2008-10-03

Recent Comments

siyam “

Great for beginners.”

Tomtom “

awesome tutorial!”

Luis castro “

I did this job”

Cor “

Tnks nice wallpaper.”

Math “

Very helpfull, and nice”

All Wallpapers and or Tutorials on Good-Walls.com are copyright their respective authors. You may use theWallpapers in your personal computer. You may not use them for commercial works. You may use theeffects in the Tutorials to create other works.

Copyright © 2008

Good-Walls.com

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 43/44

Page 44: 3D Logo Tutorial _ Good-Walls

09/05/2009 3D logo Tutorial | Good-Walls.com

good-walls.com/…/3d-logo-tutorial/ 44/44