I finally took the time to do a tutorial on how to make a 3D icon in Cinema 4D and then how to get that art into a usable working .ico resource. I tried not to make this too overly complicated but there is a lot to explain. The main thing I wanted to convey with this tutorial is that you can in fact use 3D to create your iconography and then with some tweaking and size specific adjustments it can work at smaller sizes.
Because this is on my blog and I want this tutorial to be easy to follow I'll try and be as clear as I can about some of the techniques used in Cinema 4D. If you have any questions or comments you can always hit me up with a comment and let me know. I'd be happy to help you or fix anything that might be unclear to you. Well, with all that said up front let's go ahead and get started with "How to Make an Icon in 3D Using Cinema 4D".
Tools you need for this tutorial:
- Cinema 4D 9 or Higher
- Photoshop (or a similar graphic editing application)
- Axialis Icon Workshop (or a similar icon editing application)
- An open mind and willingness to learn 3D and new design techniques
Source / Example Files
You can download the source files for this 3D Icon tutorial by clicking the download link below:
Preface
Remember that the use of iconography is very important and if you are going to make an icon you should do everything you can to make it well. There are many ways of making icons. 3D, Vector, Bitmap etc... but for this example we are starting in a 3D package and then ultimately going to .ico in Axialis Icon Workshop. Remember, at the end of the day you are the person responsible for communicating with the user and if not done right it can be very frustrating for the user and in turn the client. Spend some quality time thinking about what icons you like and what you don't like and why. Think about it and then jump right in.
The Concept
Getting Started - Work From Primitive Objects
Taking the original sketch we came up with earlier we will need to figure out what primitive objects we can start with. If we take the initial sketch and break it down into it's simpler Primitive Objects we will have a much easier time modeling. What is a primitive object you might ask? Well, a simple definition of a Primitive 3D Object would be the following:
Quote -
"Primitives are basic shapes like cubes, grids and
spheres. You can add them to a scene and then
modify them as you wish. For example, you can start
with a sphere and move points to create a head. You
can then attach eyeballs and ears to the head and put
the whole head on a model of a character.
There are several different primitive shapes for each geometry type.
Each primitive shape has parameters that are particular to it—for
example, a sphere has a radius that you can specify, a cube has a length,
a cylinder has both height and radius, and so on.
There are also several parameters that are common to all or to several
primitive shapes: Subdivisions, Start and End Angles, and Close End." - XSI Basics
The picture to the left shows the two primitive objects that we will be using outlined with a yellow box. These are the two base objects we will use and we will begin with the box model first. Since it is our base and the CD object is inside of the box we need to get our box modeled so that we can then model the CD to the dimensions of the box ensuring that it will fit in the box nicely.
You will start modeling with what looks like the picture below.
To begin modeling the software box in our icon we start with the cube that only has one X, Y and Z segments and then immediately resize it and set the perspective view to show the object at an angle close to what we drew in our sketch. We don't need this model to be super high in polygon count at all. So keeping each side to one polygon is perfectly sufficient for this tutorial. We also could have easily added a background image in our view port but I thought it was pretty easy to eyeball the angle of the box perspective for this tutorial. Still if you are interested in using a background reference image in your view port to model to you can check this tutorial out to get a better idea of how this concept works: Tips & Techniques - Camera >>
After you have set your perspective view to the right angle, resized your box to the appropriate dimensions and converted your object to polygons you are ready to take your box and build the flaps that make this box look like an opened software box. So let's move to the next step of our box model.
Building the Opened Box Flaps
In this we really start to model our box idea. I think I should say a few things about good practices and techniques for 3D modeling before I actually get into the details of our box flaps. It is always good practice to only move, rotate or transform your objects using very specific axis'. I just want to let you know in advance that by working on your object in Perspective View is ok as long as you are careful and aware of what axis you are modifying. We will also see that working in the Top, Right and Front view ports are also very helpful with making sure you only edit and model parts of your mesh on certain a certain axis. After you have the box flaps extruded and separated from the rest of the box mesh you will need to add each flap to a Null Object.
Once each box flap is inside of a Null Object you can change the center axis point on each flap individually and rotate it to make it look like the flaps are opened. It is important to have each box flap polygon in a Null Object at this point of the flap modeling process. It will allow you to rotate each flap and control exactly where the rotation point is acting as a simple hinge on the box. You can see a screen shot of what this will look like below. Once we are done with the rotation we will later re-parent the Box Flap polygons so that we can merge the flaps into the Software_Box polygon mesh.Look at the picture below to see how the Null Object center point if right on the edge of the box and the flap giving us the proper rotation point for each flap as mentioned.
Scene Camera Setup and Usage
You can setup your camera at any point during your project but I find that if you do this fairly early on during the modeling phase you will save yourself some time in the long run by being able to switch to very specific camera angles quickly. In Cinema 4D you can create a new Target Camera and then pick the target to be your mesh or group of objects. So basically what you are doing here by setting up your camera is picking your view through the camera lens that is targeted to your objects, then when you continue your modeling you simply use the editor camera. This way you can keep flipping back and forth between your editing view and the actual icon view you have setup. Now when you want to see how it will look in production or what the exact angle is you only have to switch to is easily rather than continually adjusting your editor camera which is a real pain in the ass. This process only helps you in the long run and I strongly advice you do this early once you have a feel for the appropriate angle you will be rendering at.
As you can see by the image to the left we have one custom camera in our scene. Again this important because we can quickly switch between the Editor Camera and any number of custom camera objects you might have setup in your scene. To switch between the "Editor Camera" and our Icon Specific Angle we have chosen just go to the "Cameras" menu in the perspective view port and then choose [Scene Camera > "Your Camera Object Name"].
This will enable you to see through the eyes of that specific camera. It is very useful to have specific camera angles setup and then switch between them. You can have any number of cameras in your scene and the beauty of a target camera is we can simply choose our software box or any group of objects as your camera target. This means that we can move our target camera anywhere and the focus will always be on the software box. This rocks!
In conclusion to this camera setup and usage section, I just want to make sure you understand that using a custom camera setup can really make your life a lot easier. It might feel weird at first doing this, especially for an icon, but trust me you are going to love it in the long run. There is nothing like being able to easily just say let me see my icon or artwork at any of the specific angle I've made. This is a great alternative to hitting [Control + Shift + Z] which will undo your last Editor Camera view. Sure that works but why keep undoing camera angles when you can simply work freely in the Editor Camera and then switch to another very specific angle that only moves when you want it to. I know I have talked about the camera concept in maybe too much detail but I just wanted to let you know gain. It's a useful habit to get into and even if you are making an icon in 3D. Setting up your camera angles can help you greatly become more efficient and more precise in your workflow!
Building the CD Mesh Object
As I mentioned at the beginning of this tutorial, we only need two model from two basic primitive objects. The first was a box and the second is a Tube Primitive. The CD Object will be based off the original Tube object we discussed earlier and then it will be broken down into a few smaller Selection Sets. We will quickly get into the concept of selection sets in Cinema 4D once we have modeled our basic CD mesh. Well, let's jump right in and model the CD and put it in the software box you just modeled. Then once we get the CD completed we will move into the texturing process. You'll see how all of this work comes together to make an icon. Ok let's make our CD mesh.
Once you adjust your CD Tube primitive to sit nicely in the box with flaps and you feel comfortable with how it looks and all the segment lines look nice and clean you can make it Editable in turn converting it into a polygon object. By now hopefully you are getting familiar with making objects editable in Cinema 4D. It's one of the most important concepts in this program. Well, if you notice on the CD object we have the Cap Segments set to 10. The reason for this is very important. This number gives us enough segments to cleanly choose sets of polygons in such a way that allows us to texture each set differently. The few steps will try and briefly explain Selection Sets in Cinema 4D and how we will set them up so when we are ready to texture our CD it will have different textures based on our different polygons selections. I'll try and show some pictures to help explain the process. Before we continue your Icon Model so far should look something relatively close to the picture below. Don't worry it doesn't have to be perfect. In fact I encourage you to explore and do your own thing. This is supposed to help you make icons in 3D and stimulate your creative process. Anyway's Let's keep going with the icon creation. Just make sure that your model looks something like the picture below.
Creating Selection Sets on the CD
This step will be making Selection Sets from specific polygon sets and saving them in Selection Tags which look like an orange triangle. In these selection sets you can basically easily select these sets of polygons when needed as well as apply textures to those specific selections. This is important for our CD model since we want three different textures applied to 3 different parts of the CD. We will have the inner plastic ring of the CD, the CD itself with the shine and gloss effect and the outer ring of the CD. We are able to achieve this effect by creating individual Selection Sets for each part of the CD then applying those textures to each set we have made.
First we will make a Selection Set from the inner 3 most rings on both side of the mesh. When selecting the back side polygons we switch to the editor camera. This allows us to move around and rotate our object without moving our perfectly setup target camera. Once we have our selection made the way we want we go to the Selection menu and then choose Set Selection. This will put an orange triangle after the texture tag on our Tube_CD object. This orange triangle tag represents the set of polygons we have made. For this object we will do this three time each with a different set of polygons on the front and back of our mesh.
Next we will do the same but select the inner most polygons and not choosing the outer most polygons on the CD object and again choose Set Selection.
Finally do the same for the outer most polygons. Again choose Set Selection for the outer most polygons on both sides.
Once you have done this three time for each set of polygons you can switch back to your Target Camera. We only used the Editor camera to move around freely without changing our Target Camera setup.
Once we have all of our polygon selection sets made for our Tube_CD object we can now move to the next section of this tutorial which will coverer texturing our object. We will be applying textures to each group of polygons on the CD as well as for the Software_Box mesh we created at the beginning of this tutorial.
One thing you will want to do before continuing further is you want to take your Software_Box object and remove the null objects, but keeping the polygons from each Null Object we had before. What we are doing here is merging all of our separate objects and polygons into one unified mesh. All we really needed the Null Objects for was to rotate our Box Flaps on a very specific axis or hinge. Now that we already have this we don't need them anymore. Once you have each polygons flap outside of each null object you will want to select all of the box polygons objects and then choose Current State To Object. The Choose Functions > Optimize to merge any unused or duplicate polygons. This will merge all of our polygons into one new object. Once this process has ben done you can delete the original polygon groupings and just use the one new merged object. This will prove to be very helpful for texturing the Software_Box part of this icon. At this point your newly merged polygon Software_box object should look like the image below.
In the next section we will be looking at the Paint Setup Wizard and how it will create our UV information for us easily. The Paint Setup Wizard is a great tool for helping you texture your objects in Cinema 4D. In order to use the Paint Setup Wizard you will need to switch from the Standard View to the BP UV Edit View. In the next section I'll go over how to do this. Let's continue.
Creating UV Information and Texturing The Software Box Object
First you will need to to switch from Standard Mode to BP UV Edit. The icon for switching Application modes is on the top left of the toolbar. You can see this in the picture on the left. Once you have performed the Application mode switch from Standard to BP UV Edit you will notice the entire workspace for Cinema 4D has changed. This will put you into a new workspace that will help you in your texturing process.
After you have switched your Application Mode to BP UV edit you will need to click the Paint Setup Wizard Icon. This will open up a window that will help you setup your UV information for the objects you are going to texture and create your blank texture canvas's for each channel you have selected. For the purposes of this tutorial we only use the color channels but you are free to use any or all of them if you are willing to experiment. This wizard will generate the UV Coordinates and texture automatically for you. For this tutorial we are only concerned with the Software_box UV Information and you don't need to check the Tube_CD for the Paint Setup Wizard. We are going to take the the UV information generated and the texture generated and apply our own cardboard texture and Arrow Art to the texture.
Once you see that you have your UV coordinates made by the Paint Setup Wizard we will want to outline the UV polygon information. this will act as a guide for us while we are working in Photoshop. To do this make sure you select all your polygons in BP UV Edit mode and then go to Layer > Outline Polygons. This will outline your entire UV polygon information resulting in an outline of the polygons that make up your object. This is a very important step as it will prove to be very helpful while working in Photoshop. You will find that you need these outlines while texturing your object in Photoshop so that you know exactly where the texture will be displayed when Loaded onto your object.
Below you will what the result of Outline Polygons looks like. One thing to remember here is that the outline thickness will be based on whatever your current brush size is. Just like in Photoshop you can set the brush size with the keyboard short cuts "Control + [" to make the brush smaller and "Control + ]" to make the brush size bigger. If you are confused at all by all of this I suggest you check out one of my previous blog post about how to do this at:
Next we will save the texture that was generated for your Software_box object by going to the File > Save Texture as in the BP UV Edit Mode. This will let you save your texture in the .PSD layered Photoshop format for your color channel. This is great and will prove to be a very useful step when texturing your models in Cinema 4D. By having the ability to texture your object using Photoshop makes things easy and since we are all familiar with how Photoshop works we can easily make our Software_Box have a cardboard look and feel to it. Since we have outlined the UV coordinates already we can easily know where to put our textures and colors. What I suggest is experimenting a little by trying things within the .PSD. I already knew what I wanted my box to look like so I just used a sweeping texture across the entire texture canvas. Then once I knew which UV polygon outline was the front of the Software_box I was able to easily place an arrow in that area. Then When I was finished I simple saved the .PSD file, then went to the material that was generated by the Paint Setup Wizard and went to the color channel. For the color channel I went to the texture drop down box and chose Reload Image. This function updates the color channel with any of the latest changes you might have made in your .PSD. This is the process you will need to go through to see your changes in Cinema 4D. Just make your changes in Photoshop, then go back to Cinema 4D and Reload Image after each time you save your .PSD texture. It's really not that bad of a process once you get used to it.
You can se how to reload a saved .PSD file into Cinema 4D by the picture below. Also note that the default name of this Color Channel texture is the following [ Mat_Color.psd ]
Below you will see what my texture looked like after saving the outlined texture to .PSD and then applying my own textures and art to it. Of course you can do whatever you like. I just wanted to show you what my outlined texture looked like.
Next we will get to the CD texturing process. The process for the CD will be very different than what we did for the Software_Box object. For the CD we will use built in Procedural Shaders that will give the effect that the CD is shiny and glossy. Let's see how this can be done.
Texturing the CD Mesh Using Procedural Shaders
The first thing we will do is create three new Materials, one for each part of the Tube_CD polygon mesh. We will modify each material to suit each part of the CD. As you can see below the Material we used for the inner portion of the CD uses the Spectral Shader with the Use CD Effect checked. This will allows us to make some color and gradient tweaks to eventually get us a CD effect that looks the way we want. I chose to make my CD effect have a lot of shine and gloss and be all gray in color. You can do it however you choose. The picture below shows our CD with three different materials applied to each selection set and the default Spectral Shader applied to the inner portion of the CD object.
In order to apply a separate material to each selection set you will need to add each of the three materials to the CD object. Then you will need to individually select each material and then drag each selection set to the corresponding material you have chosen. It looks something like the picture below.
I will now show you a screen shot of what my CD / DVD glossy Shine effect parameters were. I also mixed the settings with transparency and color modes to give me the gray effect.
Finally with all the Materials and Selection Sets being set and used the end result of the CD / DVD portion of this icon turns out pretty nice. It looks like the picture below.
Ok let's go over one last thing with out icon and our 3D scene before we render it and start making an icon resource. The last topic we will cover briefly is lighting.
Using Lights to Illuminate our Icon
I really don't want to spend too much time on the lighting section. However I did think it was important to mention I used three point lighting for this tutorial. I used two Omni lights and one Infinite Light for most of the illumination. I would recommend you just get in there and see what works best for you. Try and experiment with different types of lighting arrangements and see what works for you. I just wanted you to know that in order for you to get the proper look and feel you will need to spend some time setting up lights and getting them to light up your scene. If you don't you will end up with a very dark and unusable icon. Below is a screen shot of my lighting setup from the Top View port.
Rendering The Icon Artwork
Finally we are at the Rendering part of this tutorial. Basically I will just show you the setting I used to get this artwork into Photoshop. Just remember to set your output path, quality settings and the like but most importantly make sure you have the Alpha Channel selected. This will give you a very nice perfect Alpha Channel that you can then use in Photoshop to cut out against a transparent background.
Again this is very important and please make sure you have the Alpha Channel checked!
Making the .ICO Resource
Once you have saved or rendered your 3D icon or image you will need to open it in Photoshop. Once it has been opened you will want to make a new Document that has the size of 256 x 256. This will be our largest Icon size for the .ICO resource and will be the image that gets used for the lower resolution parts of the icon resource. You will basically select the Alpha Channel in the original render and then copy it to the new Document you just made. Make sure the background it transparent and then export it to Axialis Icon Workshop.
The beautiful thing about Axialis Icon Workshop is that it is a plug-in for Photoshop. It takes the highest 256x256 image you just created of your Icon and turns it into a full fledged Icon resource with every and any image format you'll need for Windows or Mac. It will ask you what your size and resolution preferences are and you then generate your full Icon resource.
One thing to note about the smaller scaled down resolution icons is that you may find yourself needing to use a Sharpen Filter / Smart Sharpen or even tweak very specific parts of each resource slot in the Icon package. Do what works best and sometimes you might even find yourself making different art for different resolutions. It's really up to you and what works best. I just wanted to give you a basic understanding of how this works.
Resize the artwork you have copied or separated using the Alpha Channel you rendered into your final render. You can now see why rendering your image with an Alpha Channel is so useful. It cuts a perfect anti-aliased cutout of your artwork or icon. Since we have put our icon artwork on transparent background we can finally use the Axialis Icon Workshop Plug-in to create our resource.
Now that we have exported our 256 x 256 Icon art with a transparent background into Axialis Icon Workshop we can now work within Axialis to finish up our Icon Resource. Choose the Image Formats you desire in Axialis and then say OK.
Conclusion
Finally I would like to mention again the need to Sharpen parts of certain image formats and resolutions. In this example I needed to sharpen the edges a little the smaller the icon gets as well as sharpening of the arrow art displayed within the Software_Box texture. It all depends on your art and what detail has been lost in the conversion. You will just have to find out for yourself what works best.
Also I would like to briefly mention a couple of things you can do further to enhance or make this process even more dynamic. One cool thing we can do with this example icon done in 3D is take the exact same model and scene information and simply change the arrow to an X. This means we can reuse all our hard work and turn this Install Icon into an Un-Install icon. All this requires is a new texture for the color channel and a reloading of the texture. Although if you want to reuse an model like this I'd recommend copying the files and making a new folder with all the source material inside of it. This technique allows you to make a new icon without literally overwriting the current icon assets. You can see an example of the un-install icon below.
Also you can use Multi-pass Rendering to export each layer separately for each Shader Channel. If you are working with a client who wants to change colors often etc... then this could be a really cool technique to explore as well as it allows you to make easy color corrections without the need to re-render at all. Very cool!
I think that concludes this Tutorial. I could have gone into far greater detail in almost every section of this tutorial but for the sake of getting it done I had to leave it here. I might end up doing a video tutorial that goes over every little detail of this specific tutorial. If you have any questions or concerns please let me know as I'd be happy to help.
Also stay tuned for an extension of this tutorial on how to use this same 3D model and export it as a vector wireframe as a .SWF from Cinema 4D and then make this vector icon usable in Flash and Flex application interfaces. This will be a cool tutorial so stay tuned!
I would like to add reference to a site that I use frequently called Cineversity. The resource I use often is called Cineversity.com >>. I highly recommend using it and it has drastically improved my 3D and specifically Cinema 4D work for clients. If you have the time and money I'd suggest you use them.
You can download the source files for this 3D Icon tutorial by clicking the download link below:
Well, that's it for now and hope this tutorial was of some help to you!
0 commentaires:
Enregistrer un commentaire