se ui: shapes, extrude, bevel 04 - austin community ... ui: shapes, extrude, bevel 04 new skills:...

Austin Community College | Visual Communication

http://www.austincc.edu/viscom

UI - Shapes, Extrude & Bevel ARTV-1445 3D Modeling & Rendering 1 1 of 9

EX

ER

CIS

E

UI: Shapes, Extrude, Bevel 04

NEW SKILLS:

Create and modify 2D shapes

Refine 2D shapes

Add elements to shapes

Create 2D text shapes

Add & work with the “Extrude”

modifier

Add & work with the “Bevel”

modifier

OBJECTIVE:

Design a wireframe layout iPhone User Interface for the fictional game “Robotropolis”. Include a title logo, a

background, and interface buttons and icons. Create the UI elements using the 2D Shape, Extrude and Bevel

tools. Render the elements and combine them in Photoshop.

Design an appealing wireframe layout of your iPhone UI. Include:

o Title Logo

o Buttons: Play, Save/Load, High Score, Options

o Icons: Exit, Help/Info/Instructions/Training, Company/Credits

Create closed 2D shape objects in the front view

o Must include a Text element

o Must be centered on the origin

Give each object a unique name

Extrude and Bevel logo

Final Logo must be located on the origin

Render and Save a JPG file for student critique.

Save a copy of the final MAX and JPG files into the class “ReadyForReview” folder on the instructor’s

machine (Viscom04)




DEFINITIONS:

Ngon – regular polygons of up to 100 sides.

Line – a non-parametric object. Defined by the location of their vertices.

Arc – defined by their endpoints and the shape of the curve between those points.

Helix – the only spline that has three dimensional creation parameters.

Vertex – point location in space

Segment – straight or curved line

Spline – linear objects that can be curved. A shape must contain at least one sub-object level spline.

Shapes – simple splines often used to create logos, low polygon models, architectural elements, and motion

paths. A shape is a 2D object in max.

Extrude– create a three-dimensional shape by starting with a two-dimensional shape and extruding or

extending it along a straight path along one axis.

Bevel– simple beveling usually works by truncating the hard edge between adjacent surfaces and replacing it

with a slanted plane.

KEYBOARD SHORTCUTS (HOT KEYS):

Delete = Delete

Insert key = Cycle through sub-object selection levels

1 = vertex

2 = segment

3 = line

Z = zoom extents

Ctrl + b = access sub-object selection modes

VERTEX TYPES

1. Smooth 2. Corner 3. Bezier 4. Bezier Corner

READING ASSIGNMENT:

Visual Quickstart: 3DS Max for Windows - Chap. 2 (Creating Shape Splines, pp.58 – 69); Chap. 9 (Editing

Shapes, pp. 275 -298); Chap. 6 (Modifying Objects, p. 160, p.186, p. 188)

The Art of 3D Computer Animation & Imaging - Chap.4 (Basic Modeling Techniques, 4.1 - 4.2, 4.4;

Sweeping, 4.5; Free-Form Objects, 4.6; Basic Modeling Utilities); Chap. 5 (Advanced Modeling

Techniques, 5.4; Advanced Modeling Utilities)




Lecture Notes

What’s in a name?

Title logos can consist of TYPE (the font/text) and a MARK (the graphic icon), or just type, or just a mark. A

mark is a graphic representation of your product. In this case the product is a fictional game “Robotropolis”.

The trick to picking a serviceable title logo is to

make sure both the type and the mark read well in black and white,

can be reduced to fit on a postage stamp.

You can choose to push one of the 3 "basic shapes" to help sell the personality of the game you want the public

to identify in your product. Pick one that best sells YOUR GAME IDEA, and then stick with that through the

whole brainstorming process.

Circular, Rounded = friendly, cute, sexy, ditzy, non-threatening

Squares, Boxy = authoritative, reliable, rigid, boring

Triangular, Jagged = fast, aggressive, edgy, dangerous, unpredictable




Type

For the sake of design clarity, stick to using one of these types (fonts)…

1. Sans Serif -- without little tails on the letters

a. Helvetica New

b. News Gothic/ Trade Gothic

c. Gill Sans (up to 7 point)

2. Serif -- with little tails on the letters

a. Clarendon (good for headlines)

b. Mr. Eaves (may be too expressive)

c. Garamond (can be too corporate)

d. Baskerville

By default, fonts with straight SERIFS will look more BOXY, and those with sharp SERIFS will look more

POKEY. Fonts that are SANS SERIF lend themselves to being more rounded. Put any line font on a curved line,

and you make the whole silhouette CURVED

Mark

The mark is an icon that visually represents you and your services. In the case of your portfolio, your mark

should have something to do with your name (full or just initials), your specialization… or if you’re very clever,

both your name AND your specialization. You may want to search Trademarks & Symbols on GOOGLE

IMAGES for ideas. AVOID checks, swishes and swirls as they are overused.




Color

Color is powerful and often abused or mishandled. It won’t print (pigment) like it appears on the screen (light).

Therefore, just use black and white, with lots of white space. Your logo and brand should not need color.

However, a small amount of color can be used as an accent. You may use ONE (1) color to accent information.

Here are some general/universal meanings attributed to the different hues

- Yellow = youth; happiness …sunny yellow sun

- Orange = quirky; tropical; warning …citrus; stink bug - hard to reproduce in print

- Red = passion; danger …blood & poison dart frog - hard to reproduce in print

- Pink = femininity; frivolity …cake frosting

- Purple = royalty …very rare in nature

- Blue = calm; stability …sky/ocean

- Green = nature …lots of green foliage everywhere

- Brown = earth; ancient …dirt

- Black = mysterious …darkness

- White = purity …clean cotton

Visual Variety

As you are looking for a VARIETY of ideas for your product TITLE LOGO, remember that you can play with

both the TYPE (“Robotropolis”), or the MARK (the ICON that gives a visual clue as to the idea behind the

game).




Ways to find a VARIETY of ideas within the TYPE include: capitalization, bold, italics, size, spacing (leading

& kerning), etc.

Ways to find visual VARIETY within the MARK include brainstorming a variety of visual clues around the

game’s…

Objective – Evolve the city, liberate the natives, destroy the oppressor, escape the police, find the

treasure, etc.

Game genre – puzzle, fps (first person shooter), rts (real-time strategy), turn-based, etc.

Story genre (sub-genre) – comedy, drama, horror, revenge, sci-fi, fantasy, teen drama, rom-com

Emotional-evoking word – the word that encapsulates the “Nugget of fun” in your game (ie. “Luxury,”

“Hipster,” “Adventure,” “Rebel,” “Sex,” “Cute” etc.)

Pick one from each category, and then generate thumbnails off that 1 idea.




PRACTICE

1 Read Chapter 2 - Creating Shape Splines in the Visual Quickstart book.

2 As you are reading, follow along and try each tool.

3 Change the parameters to see how they alter the shapes.

4 Notice that the shapes are just that. They have no solidity, no depth.

5 To see what you have, select the Rendering Rollout. Click on Renderable and add a little thickness.

6 To get a better idea of the look of your shape, hit [F9] to QuickRender (Production) the active view

EXERCISE

1 Brainstorm around the idea for your LOGO.

► Using the “stream of consciousness” method, brainstorm around the core ideas of your logo.

► List out the Who-What-When-Where-Why of your logo to give it a back-story with specific details.

You are addressing the target market audience here.

Who (what, when, where, why) does your audience want to buy your product?

Easiest way to build an appealing logo is to attach an emotional-evoking word and try to sell THAT

IE. Mercedes = “Luxury”

IE. Apple Mac = “Hipster”

IE. Coca Cola = “Fun”

IE. Diet Coke = “Sex”

► Using both the TYPE and the MARK ideas, create 30 thumbnail sketches for possible logos.

► You may want to search Trademarks & Symbols on GOOGLE IMAGES for ideas.

2 Pick one that has the most emotion and clearly communicates what you are SELLING.

3 On a sheet of paper, clearly design the logo.

► For simplicity’s sake, make your design simple. It should NOT have elements crossing into one another

or “holes”. (We will practice this in another exercise) If you want “open spaces” then open the shape up

completely. Refer to the example at the beginning of the exercise.

4 Working in either the top view or the front view, create the shape of your icon working with the line shape

in the Create>Splines panel.

► Using the line creation tool will give you the greatest freedom and control and the most practice. If this

is appropriate for your design, then you will have to manipulate it at the vertex sub-object level.

5 Give the shape a descriptive name.

6 In the Modify panel, click the + on shape name and select vertex. Then you can move the vertices to

improve the shape. If you are working with any of the other shapes, you will have to convert them to an

editable spline first. You do this by right clicking on the shape in any view and choosing transform from

the quad menu. Select Convert to: and choose Editable spline.

7 Perhaps your icon design consists of several shapes. If that is the case then you can add to the original

shape by deselecting Start New Shape in the Spline creation menu, Object Type rollout before beginning the

2nd or 3rd shape.

8 Perhaps you need to add vertices to the original shape. If so, select the shape. Then in the Modify menu,

select the vertex sub-set. In the Geometry rollout, check Refine and click on the spline in the viewport at

the place you need another vertex. You may continue to do this until you click off Refine.

9 If you need to delete a vertex, just select it and hit the Delete key.

10 Continue to work with the shape until you get your desired result.

11 If you want to see how it looks, In the Rendering Rollout of the Modify menu, click Renderable and add

some thickness. Then activate the appropriate viewport and make a Production Quick Render.

12 Continue to modify the shape until you are completely satisfied with it. Make QuickRender often to check

your work.




13 When you are satisfied with the icon, move to the text portion of your logo.

14 In the Create Splines menu, select the Text Object type. Type out the letters or word that will complete

your logo. You may adjust the font and size, etc.

15 Name this shape.

16 Move the shape of the icon and the text into the arrangement you created on paper.

17 Select the text shape object.

18 In the Modify panel, open the Modifier List drop-down menu. From the list of Object-Space modifiers,

choose Bevel.

19 Under Bevel Values, input the amount of the extrusion as height on level 1.

20 Check Level 2 and make the height value the amount your bevel will come up. The outline value will be a

negative amount which will bring the bevel in.

21 To better see what you are doing, right click the Perspective viewport label and check edged faces [F4].

22 Perform the same operation on the icon shape you created.




23 Select the Perspective view and pan, rotate, zoom the view so that the logo is well placed in the frame.

24 Maximize the view [alt + w].

25 QuickRender.

26 When you are satisfied with the modeling portion of your work, arrange your Perspective view of the object

to create an exciting and pleasing composition. Render it again.

27 Save the image. Save the file.

28 Save both in your folder on your computer and, through the Network Places, in my folder on Viscom 04

se ui: shapes, extrude, bevel 04 - austin community ... ui: shapes, extrude, bevel 04 new skills:...

Documents