Issuu on Google+

CULTURE PRESERVATION PANGLIMA BUKIT SADOK IN A FORM OF CGI

Goh Kiang Kuan


Diterbit oleh Goh Kiang Kuan No. 29, 32/97, Jalan Sg. Merbau, Kemuning Greenville, 40460 Shah Alam., Selangor, Malaysia. +60172758203 kiangkuan@yahoo.com Š 2013 Goh Kiang Kuan, 2013 Hak Cipta terpelihara. Tidak dibenarkan mengeluar ulang mana-mana bahagian daripada terbitan ini sama ada illustrasi dan isi kandungannya dalam apa jua bentuk dan cara sama ada secara elektronik, fotokopi, mekanikal, rakaman dan sebagainya sebelum mendapat izin bertulis daripada pemilik hak cipta terlebih dahulu. Perpustakaan Negara Malaysia Dicetak oleh: Songden Enterprise Published by Goh Kiang Kuan No. 29, 32/97, Jalan Sg. Merbau, Kemuning Greenville, 40460 Shah Alam., Selangor, Malaysia. +60172758203 kiangkuan@yahoo.com Š 2013 Goh Kiang Kuan, 2013 All rights reserved Without limiting the rights under copyright reserved above, no part of this publication may be reproduced, stored in or introduced into a retrieval system, or transmitted, in any form, or by any means ( electronic, mechanical, photocopying, recording, or otherwise) , without the prior written permission of both the copyright owner and publisher of this book. Perpustakaan Negara Malaysia Printed by: Songden Enterprise


Contents Chapter I: Panglima Bukit Sadok in CGI Perspective \ Guideline For PBS Character Animation \ Pre-Production \ Production

Chapter II: Illustrations of Panglima Bukit Sadok \ Hand Sketches Illustrations of Panglima Bukit Sadok \ Computer Illustrations of Panglima Bukit Sadok \ Images Study of Panglima Bukit Sadok

Chapter III: Web Media Development Process

2 11 17

\ Planning \ Design \ Development \ Panglima Bukit Sadok Website Screenshots


Author of Culture Preservation: Panglima Bukit Sadok In A Form Of CGI GOH KIANG KUAN is a lecturer/trainer specialising in 2D and 3D animation with over 8 years experience in the industry. Goh is currently the Specialist /lecturer at one of the local private university. He is proficient in the use of Autodesk 3ds Max and Maya, specializes in basic fundamentals to advance level. Previously, Goh has worked primarily as senior 3D animator and art director, contributing in many 2D and 3D animation for local TV commercials since early years of 2000.

Acknowledgements Special thanks to my colleagues Aloysius Yapp and Mohd Fairuz Bin Ali for the contribution made to the writing of this book and its success.

Editor: Mohd Fairuz Bin Alis


This page intentionally left blank

1


CHAPTER I CGI FOR PANGLIMA BUKIT SADOK OBJECTIVE

This chapter will showcase some artworks of Panglima Bukit Sadok in a form of CGI

2


Chapter 1 \ CGI of Panglima Bukit Sadok

CGI For Panglima Bukit Sadok

3


Chapter 1 \ CGI of Panglima Bukit Sadok

Guideline For PBS Character Animation

4


Chapter 1 \ CGI For Panglima Bukit Sadok

THE TASK PROCESS 1. PRE-PRODUCTION

Idea and development of design

5


Chapter 1 \ CGI For Panglima Bukit Sadok

THE TASK PROCESS 2. PRODUCTION

Building the 3D character body with basic polygon meshes from scratch .

6


Chapter 1 \ CGI For Panglima Bukit Sadok

THE TASK PROCESS 2. PRODUCTION

Building the head of PBS with polygon modelling method.

7


Chapter 1 \ CGI For Panglima Bukit Sadok

THE TASK PROCESS 2. PRODUCTION

Detailing the PBS model with Iban warrior costume

8


Chapter 1 \ CGI For Panglima Bukit Sadok

THE TASK PROCESS 2. PRODUCTION

The warrior costume of PBS

9


Chapter 1 \ CGI For Panglima Bukit Sadok

THE TASK PROCESS 2. PRODUCTION

The complete 3D model of PBS

10


CHAPTER II ILLUSTRATIONS OF PANGLIMA BUKIT SADOK OBJECTIVE

This chapter will showcase some artworks of Panglima Bukit Sadok in a form of Illustrations.

11


Chapter 2 \ Illustrations of Panglima Bukit Sadok

PBS Concept Board

12


Chapter 2 \ Illustrations of Panglima Bukit Sadok

PBS Concept Board

13


Chapter 2 \ Illustrations of Panglima Bukit Sadok

PBS Sketches

14


Chapter 2 \ Illustrations of Panglima Bukit Sadok

PBS Sketches

15


Chapter 2 \ Illustrations of Panglima Bukit Sadok

PBS Images Study

16


CHAPTER III WEB DESIGN & DEVELOPMENT TECHNIQUES OBJECTIVE

This chapter will introduce main process and techniques in developing a Website.

17


Introduction

Website can act as a powerful medium to convey and deliver information.

18


Chapter 3 \ Web Design & Development Techniques

PLANNING This is where we define our work as for example the title of the project, the concept and theme, the contents that we want to have for each Webpage, and the structure of the Website (how we want to bring user from one page to other pages). > Information Architecture Panglima Bukit Sadok (index page)

Home

Background

Sketches

Gallery

Computer Illustration

CGI

The Team

Video

Photos

IA (Information Architecture of Panglima Bukit Sadok Website)

19


Chapter 3 \ Web Design & Development Techniques

> Wireframes

Website Title

Image of Panglima Bukit Sadok

Enter Button

Footer Wireframe for index page

20


Chapter 3 \ Web Design & Development Techniques

> Wireframes

Banner

Navigation buttons

Image

Footer Wireframe for homepage

21


Chapter 3 \ Web Design & Development Techniques

> Wireframes

Banner

Navigation buttons

Enlargement Photo

Photo Thumbnail

Step Navigation

Footer Wireframe for Sketches, Computer Illustrations & Photos Page

22


Chapter 3 \ Web Design & Development Techniques

> Wireframes

Banner

Flash Video

Navigation buttons

Footer Wireframe for CGI & Video Page

23


Chapter 3 \ Web Design & Development Techniques

> Wireframes

Banner

Navigation buttons

Photo

Text

Photo

Text

Photo

Text

Image

Footer Wireframe for The Team Page

24


Chapter 3 \ Web Design & Development Techniques

DESIGN > Working With Graphics

The most important aspect when dealing with graphics is to make sure that they have been optimized. The benefit of having them optimized is that it can minimize the overall file size of Website and so the user can retrieve or load the Webapage faster. This technique can be applied by using Adobe Photoshop software. See example below:

Banner of Panglima Bukit Sadok Website that has been designed in Adobe Photoshop. The Steps: 1- While the graphic is still active in Adobe Photoshop, go to FILE > SAVE FOR WEB 2- In the Save For Web setting panel, choose JPEG or GIF from preset setting. 3- Click on SAVE button > type in relevant file name for the file (e.g: banner.jpg) > choose IMAGES ONLY under format setting and click SAVE.

25


Chapter 3 \ Web Design & Development Techniques

DESIGN > Working With Text

There are few things that required consideration when choosing the type for the text that will be placed on the Webpage. It is as listed below: 1. The Size - Will guide user to identify the heading, subheading and body text easily.

Heading 1 Heading 2 Body text 2. The Space - Will give a better legibilaty to the text and provide a better readibility to the user when they read through the text on a Web. a) Kerning: Changing the space in between individual letters LE || TTERS b)Tracking: Changing the space in between every letter LETTERS c) Leading: Changing the space in between lines SPACE SPACE 3. The Contrast - It is always a good idea to have a darker text on light background as it will give a better contrast when user read them.

Text

Text

Bad contrast

Better contrast

26


Chapter 3 \ Web Design & Development Techniques 4. The Typeface - Serif or Sans-Serif?

Serif

Sans-Serif

This might be most suitable for a heading or title text but it is still might not be readable for some people.

It is the most readable type for typeface.

27


Chapter 3 \ Web Design & Development Techniques

> Working With Multimedia Elements Multimedia elements can be incorporated in making the Website more interesting and more alive. As for the Panglima Bukit Sadok Website, the Multimedia elements of flash photo slideshow and a flash video are applied. Below are the process involved in creating both multimedia elements: a) Flash Photo Slideshow There are many ways on creating a photo slideshow. We can achieve that by using jQuery which is a type of Javascript library, or Adobe Flash but both required user’s ability in handling basic programming language. There are also applications that does not require any programming background such as Aneesoft Flash Gallery. It is a software that allows user to create a creative photo slideshow presentation in a flash format. It offers a simple 3 STEPS as below: The Steps: 1- ADD PHOTO 2- CHOOSE TEMPLATE

28


Chapter 3 \ Web Design & Development Techniques

3- Publish

Preview of photos slideshow after published in flash (.swf) format.

29


Chapter 3 \ Web Design & Development Techniques

DEVELOPMENT > Working with web Authoring Software - Adobe Dreamweaver Adobe Dreamweaver has been used for the development of Panglima Bukit Sadok Website. The main process involved during this stage are: A. Creating The Web Structure The easiest way to create the Web structure is by using table or DIV. The Steps: 1- Using Table: INSERT > TABLE 2- Using DIV > INSERT > AP DIV

The Web structure used for Panglima Bukit Sadok Website

30


Chapter 3 \ Web Design & Development Techniques 2. Inserting Images The Steps: 1- INSERT > IMAGE > Choose the image by navigating to the image folder > Click ok.

Images used in Homepage of Panglima Bukit Sadok Website

31


Chapter 3 \ Web Design & Development Techniques 3. Inserting Multiemedia Elements i- Flash File The Steps: 1- INSERT > MEDIA > SWF > Choose the flash file by navigating to the flash folder > Click ok.

The used of flash file in Panglima Bukit Sadok Webpage ii- Video File 1- INSERT > MEDIA > FLV for Flash video or SHOCKWAVE > Choose the video file by navigating to the video folder > Click ok.

The used of video file in Panglima Bukit Sadok Webpage

32


Chapter 3 \ Web Design & Development Techniques 4. Designing Navigation System

Navigation Design by using DHTML

33


Chapter 3 \ Web Design & Development Techniques 5. Save and Publish the Web

Each HTML page shall be saved as HTML (.html) document in the root folder.

34


Chapter 3 \ Web Design & Development Techniques

PANGLIMA BUKIT SADOK WEBSITE SCREENSHOTS

Index Page

Background Page

Homepage

35


Chapter 3 \ Web Design & Development Techniques

PANGLIMA BUKIT SADOK WEBSITE SCREENSHOTS

CGI Page

Digital Illustrations Page

Photos page

36


Chapter 3 \ Web Design & Development Techniques

PANGLIMA BUKIT SADOK WEBSITE SCREENSHOTS

Video Page

Sketches Page

Team Team page

37


CULTURE PRESERVATION PANGLIMA BUKIT SADOK IN A FORM OF CGI