Button Tutorial

Site - Email

Alright. This tutorial was requested and I figured hell, I love making them and people like them but a lot of people don't want one from me because they get no satisfaction with themselves so here's how. You'll need Cinema 4D (I'm using XL7) and Adobe Photoshop (I'm using 7.0 but its pretty much the same as 6.0 so you can still try.) If you hate trendy design, so do I, but this tutorial uses 88x31's of huge trendy shapes that are around 1024x768, so you wont be able to tell its a spikey ball or whatever you do.


Step 1 Step 1.- Open up Cinema 4D. We'll have to make a wallpaper like 3D thing to make out buttons with. We want it to be big so we can keep taking sections from it and make at least 5 different good buttons. In your new file, first make it at least 1000x500, mine will be 1024x768 incase I like it and want to make a wallpaper with it. Do this by going Render> Settings> Output> Manual in the dropdown then type in ____ and ___ (for me, 1024x768.) Click OK. Now you've got your size.

Step 2 Step 2.- Now we have to make something 3D... hmmm. I'm going to make a tredy spike ball because they do look good when you cut up portions of them, even if they are too trendy to look good when you see them large. If you have something else you want to do, do it. But this would be where we part until we get to Photoshop then... So if you're following me, go Objects> Primitive> Platonic. In the objects bar we'll turn this into a different shape by doing this: Right click Platonic> Edit Object> then in the dropdown box where it says Icosahedron, change that to C60-Buckyball.

Step 3 Step 3.- Now that we've got out Buckyball we're going to make it better. First, go Structure> Make Editable (or just hit C), then go Structure> Edit Surface> Crumple. Change X Radius to something higher than 10 m, I'm making mine 75. Everything else stays the same.

Step 4 Step 4.- Alright, now for the big step that makes our image what it is. We've got to make the sides extend out. If your new to Cinema 4D, trust me, it's simple. Go Structure> Edit Surface> Matrix Extrude. In the box that pops up, change Steps to 10 (or just see what a few different ones look like and do what you want, it doesn't matter is some of it goes off the page); and I'm going to leave everything else the same but I recommend you mess around with it so you can get what you like and so it wont look like everyone elses. We're almost done in Cinema 4D!

Step 5 Step 5.- Not to many graphics look good without smoothizzle, right? So lets make this sucker smooth. Go Objects> NURBS> Hyper NURBS. Hyper NURBS will show up on your Objects panel. Now you've got to drag "Platonic" over "Hyper NURBS" so the arrow is pointing down and let go. The spikey object will now become smooth. If you do it right the Hyper NURBS should have a plus sign (or [+]) thing next to them, and if you click that, and it changed to a minus sign (or [-]), then there should be your Platonic sitting under the Hyper NURBS. If you don't get how to check it, just click next to the Hyper NURBS and then it should look like the screen cap for this step. If you don't think it's smooth enough try repeating the process. It will increase the time it takes to raytrace and possible not even work. I'm only doing this once.

Step 6 Step 6.- You might want to change your background to white because it's nicer and remember you can always shade it in Photoshop and you'll probably use the graphic more than once so don't think "I want this color for my background on my button so I'll make it that". Change it by going Objects> Scene> Environment. "Environment" will now show in your Objects panel. Right click on it> Edit Object> Click the "Fog" tab> Check Active> change the color to whatever you want, or just leave it white like me> click OK. Now you may want to add a material to your Hyper NURBS/Platonic, but I'm not going over that for it is a totally different tutorial.

Step 7.- Now you've done it! You've got your 3D graphic. Just got to go Render> Render to Picture Viewer. It will probably take a while so go watch some TV and check back every 5-10 minutes to see if your image has filled up the black part yet, or something! If it takes over 30 minutes to render at least half way then screw it. Go back a few steps and only use 1 Hyper NURBS. When your image is fully viewable click File> Save Picture As and in the box that pops up change Format to Photoshop (PSD), and uncheck Save Multi-Passes> click OK. If you don't uncheck Save Multi-Passes your graphic will me all black when you open it in Photoshop. In the new box navigate to where you want to save, probably somewhere in your My Documents folder, for me I have a couple subfolders in my My Documents folder. Rename it if you like but Save as type stays at All files. Click Save.

Now close Cinema 4D and open Photoshop.
My graphic wouldn't render fast enough so I'm using one I've already had for a while, which is about the same as the one I just showed you how to make.


Step 8.- Open the graphic you just made in Cinema 4D with me, or whatever...

Step 9.- Select the Rectangular Marquee Tool and make a box around your entire image. Go Edit> Copy

Step 10 Step 10.- Close that image. Make a new one, 88x31.

Step 11 Step 11.- Paste your image in there. Now move it until you find a nice picture in it. Move it my hitting Control and moving your cursor around (make sure your image is 100% and maxamized. Click the image next to "Step 11." to see what I've got so far.

Step 12 Step 12.- Now we're going to add a sexy border and delete some corners. First, create a new layer. I'm going to add a 3x3 1px black dot pattern on this layer and fade it to 20%, but if you don't want that then you'll still need this layer later. If you are going to do the dot pattern, do it (I'm not telling you how, there are tutorials for it on probably every major tutorial site), fade it to %20 or whatever you like, then make your corners on both layers look like the image for this step. Erase 2 pixels going left/right, and 2 going up/down.

Step 13 Step 13.- On your new layer add 3 black pixels in each corner so it looks like mine (I colored mine, don't worry about it).

Step 14 Step 14.- On the same layer as the last step fill in a grey (#d0d0d0) line next to every black one so it looks like mine, then add a black boxx around that. Check the picture because it's hard to explain.

Now add your text, mess with the colors if you want by going Image> Adjustments> Hue/Saturation (make sure you've got your bottom layer selected). I also added black dots on a new layer over my 20% dot grid outlining the text. Now you've got the borders you were probably looking for on a hot 3D button. If you want to animate it go ahead. Heres one of mine animated, and the one I just made.

My Final An animated one