culture preservation: the arts of panglima bukit sadok
DESCRIPTION
This publication is research about culture preservation (Saribas Iban in Malaysia) using new media (2D animation).TRANSCRIPT
Diterbit oleh Aloysius Yapp
V2C-08-05, Seri Palma Villa, 71700 Mantin, Negeri Sembilan, [email protected]© 2013 Aloysius Yapp 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 Aloysius Yapp
V2C-08-05, Seri Palma Villa, 71700 Mantin, Negeri Sembilan, [email protected]© 2013 Aloysius Yapp 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: 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 II: Panglima Bukit Sadok in CGI Perspective\ Guideline For PBS Character Animation\ Pre-Production\ Production
Chapter III: Web Media Development Process\ Planning \ Design\ Development\ Panglima Bukit Sadok Website Screenshots
2
21
12
Author of Culture Preservation Through Web Media Development: Panglima Bukit Sadok
Aloysisus Yapp is a lecturer at UTAR, PJ as Animation and Games Design lecturer. He is currently pursuing a PhD by practice-led research approach in USM, Penang.
Acknowledgements
Special thanks to my colleagues Mohd Fairuz Bin Ali and Goh Kian Kuang for the contribution made to the writing of this book and its success.
Editor:
Mohd Fairuz Bin Alis
2
CHAPTER IILLUSTRATIONS OF PANGLIMA BUKIT SADOK
OBJECTIVE
This chapter will showcase some artworks of Panglima Bukit
Sadok in a form of Illustrations.
8
CHAPTER IICGI FOR PANGLIMA BUKIT SADOK
OBJECTIVE
This chapter will showcase some artworks of Panglima Bukit
Sadok in a form of CGI
11
Chapter 2 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
1. PRE-PRODUCTION
Idea and development of design
12
Chapter 2 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
Building the 3D character body with basic polygon meshes from scratch .
13
Chapter 2 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
Building the head of PBS with polygon modelling method.
14
Chapter 2 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
Detailing the PBS model with Iban warrior costume
15
Chapter 2 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
The warrior costume of PBS
16
Chapter 2 \ CGI For Panglima Bukit Sadok
THE TASK PROCESS
2. PRODUCTION
The complete 3D model of PBS
17
CHAPTER IIIWEB DESIGN & DEVELOPMENT TECHNIQUES
OBJECTIVE
This chapter will introduce main process and techniques in
developing a Website.
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 path 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