Saturday, June 22, 2024

Web Developer Tutorial: Making Banners Using Swift 3D

There are many programs out there that you can use to create awesome graphics. One such program is called Swift 3D. It is a program made by Electric Rain. Swift 3D v6 is a standalone 3D modeling and animation tool. It comes along with preset animation movements, lighting schemes, environments, materials and other things. Right now we’re start out by showing you how to do something simple–we will make a banner that has a beautiful reflection on the bottom.

Once you have either purchased the software (or downloaded the trial version) go ahead and start the program. At first it may look a little intimidating, but it isn’t as bad as it looks.

The first thing we want to do is set our layout width to 900, and height to 400.

Now we will want to create (textclick) the blue “T” button at the top to do this..then change the text and font to whatever you want.

I’m going to change my text to “Banner” and I set the font to be “BRADDON”.

Whatever you change your text to will probably not fit in the yellow box’s boundaries, like the text above. Now there are two ways to go about changing the size.

The first is with the text selected, go to the “Sizing” and adjust the Width and Height.

The second way is to select the “Scaling Model” button which is at the top right. You would have to have the object you are rescaling selected first. Then click on the object and drag it down to make it smaller and up to make it larger.

Your text should now be able to fit within the yellow boundaries.

Now you can create your own material to cover your text–I will show you how to do this in the next article. Under the “Materials” tab at the bottom right it has 6 sub-tabs: Bitmap, Flat, Glossy, Reflective, Texture and Transparent. For text I usually like using Glossy or Texture. Once you find one you like, click and drag it over the text, and also on the side of the text.

The regular interface does not give you a great look at what the final picture will look like. To get a good picture go to the “Preview and Export Editor” at the top of the page. Then change the Output Options to Raster. Then click on the “Generate Selected Frames”; it will then render a quality preview of what your banner will look like. To get back to your work area, click on the Scene Editor tab at the top left.

Now that we have our text almost finished let’s work on the reflection. It is very, very simple. We want to add a plane to our stage; you do this by clicking the plane button at the top left.

When you add the plane to the stage, you won’t be able to see it because of it is flat in the center of the page. To change its angle, go to the section at the bottom left and select the middle button–the arrows that are going up and down.

Then move the cursor over the sphere, and then click and pull down to change and rotate it.

Now you going to want to hold the Shift-key down and drag the plane down so it is out of our text. Then you are going to want to use the Scaling Mode and make the plane big enough to fit under all the text.

Now we that we have our plane, we are going to make the reflection. Go to the Materials tab and then the Reflective Materials area. You can then choose the color you want the surface to be, then preview it and see if you like how it looks. You may need to adjust the plane’s angle to get it to look right.

Also if you don’t like how your shadows and images looks, you can change the lighting. At the bottom right there are a bunch of presets under “Lighting Schemes” that I prefer to use, rather than changing the lights myself.

In the image above I’m using the Left Profile. I think it works pretty well for my picture. To change the lighting, click and drag the lighting scheme you want to the stage.

Since the background looks pretty boring, let’s change it up. Add another plane to your stage. Then rotate it so that it looks like this:

Then resize it so that it stretches all the way across.

If you adjust your view to the top, you will see that the plane is in the middle of the text. What you will want to do from the top view is drag the plane back till it is behind the text, like this.

For the surface of the background plane I was thinking of using a Bitmap Material but you can use whatever you want. I am going to use one of the pre-set brick bitmaps.

Now all that’s left is to do is export the image. You’re going to want to go back to the Preview and Export Editor at the top of the page. The select the drop down menu to change the Target file type to either PNG or JPG format. Then once you have rendered the frame, click the “Export Selected Frames” button at the top right to export the image to the file of your choosing.

My Finished Banner

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles