CULTURE PRESERVATION PANGLIMA BUKIT SADOK IN A FORM OF CGI
description
Transcript of CULTURE PRESERVATION PANGLIMA BUKIT SADOK IN A FORM OF CGI
CULTURE PRESERVATIONPANGLIMA 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, [email protected]© 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, [email protected]© 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\ Planning \ Design\ Development\ Panglima Bukit Sadok Website Screenshots
2
17
11
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 Special-ist /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 commer-cials 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
1
This page intentionally left blank
2
CHAPTER ICGI FOR PANGLIMA BUKIT SADOK
OBJECTIVE
This chapter will showcase some artworks of Panglima Bukit
Sadok in a form of CGI
3
CGI For Panglima Bukit Sadok
Chapter 1 \ CGI of Panglima Bukit Sadok
4Guideline For PBS Character Animation
Chapter 1 \ CGI of Panglima Bukit Sadok
5
Chapter 1 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
1. PRE-PRODUCTION
Idea and development of design
6
Chapter 1 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
Building the 3D character body with basic polygon meshes from scratch .
7
Chapter 1 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
Building the head of PBS with polygon modelling method.
8
Chapter 1 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
Detailing the PBS model with Iban warrior costume
9
Chapter 1 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
The warrior costume of PBS
10
Chapter 1 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
The complete 3D model of PBS
11
CHAPTER IIILLUSTRATIONS OF PANGLIMA BUKIT SADOK
OBJECTIVE
This chapter will showcase some artworks of Panglima Bukit
Sadok in a form of Illustrations.
12PBS Concept Board
Chapter 2 \ Illustrations of Panglima Bukit Sadok
13PBS Concept Board
Chapter 2 \ Illustrations of Panglima Bukit Sadok
14PBS Sketches
Chapter 2 \ Illustrations of Panglima Bukit Sadok
15PBS Sketches
Chapter 2 \ Illustrations of Panglima Bukit Sadok
16PBS Images Study
Chapter 2 \ Illustrations of Panglima Bukit Sadok
17
CHAPTER IIIWEB DESIGN & DEVELOPMENT TECHNIQUES
OBJECTIVE
This chapter will introduce main process and techniques in
developing a Website.
18
Introduction
Website can act as a powerful medium to convey and deliver information.
19
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 havefor 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
Sketches Computer Illustration
CGI Video Photos
Background Gallery The Team
IA (Information Architecture of Panglima Bukit Sadok Website)
20
Wireframe for index page
Chapter 3 \ Web Design & Development Techniques
> Wireframes
Website Title
Image of Panglima Bukit Sadok Enter Button
Footer
21
Chapter 3 \ Web Design & Development Techniques
> Wireframes
Banner
Navigation buttons
Footer
Image
Wireframe for homepage
22
Chapter 3 \ Web Design & Development Techniques
> Wireframes
Banner
Navigation buttons
Footer
Wireframe for Sketches, Computer Illustrations & Photos Page
Photo Thumbnail
Step Navigation
Enlargement Photo
23
Chapter 3 \ Web Design & Development Techniques
> Wireframes
Banner
Navigation buttons
Footer
Flash Video
Wireframe for CGI & Video Page
24
Chapter 3 \ Web Design & Development Techniques
> Wireframes
Banner
Navigation buttons Image
Footer
Wireframe for The Team Page
Photo
Photo
Photo
Text
Text
Text
25
Chapter 3 \ Web Design & Development Techniques
DESIGN
> Working With GraphicsThe 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:
The Steps:1- While the graphic is still active in Adobe Photoshop, go to FILE > SAVE FOR WEB2- 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.
Banner of Panglima Bukit Sadok Website that has been designed in Adobe Photoshop.
26
Chapter 3 \ Web Design & Development Techniques
DESIGN
> Working With TextThere 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 1Heading 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 L E T T E R S 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.
Bad contrast Better contrast
Text Text
27
Chapter 3 \ Web Design & Development Techniques
4. The Typeface - Serif or 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.
Serif Sans-Serif
28
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
29
Chapter 3 \ Web Design & Development Techniques
3- Publish
Preview of photos slideshow after published in flash (.swf) format.
30
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 > TABLE2- Using DIV > INSERT > AP DIV
The Web structure used for Panglima Bukit Sadok Website
31
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
32
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.
ii- Video File1- INSERT > MEDIA > FLV for Flash video or SHOCKWAVE > Choose the video file by navigating to the video folder > Click ok.
The used of flash file in Panglima Bukit Sadok Webpage
The used of video file in Panglima Bukit Sadok Webpage
33
Chapter 3 \ Web Design & Development Techniques
4. Designing Navigation System
Navigation Design by using DHTML
34
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.
35
Chapter 3 \ Web Design & Development Techniques
PANGLIMA BUKIT SADOK WEBSITE SCREENSHOTS
Index Page Background Page
Homepage
36
Chapter 3 \ Web Design & Development Techniques
PANGLIMA BUKIT SADOK WEBSITE SCREENSHOTS
CGI Page Digital Illustrations Page
Photos page
37
Chapter 3 \ Web Design & Development Techniques
PANGLIMA BUKIT SADOK WEBSITE SCREENSHOTS
Sketches Page Video Page
Team Team page