Colour and Design in 2 and 3 Dimensions

From the trip to Mantin, we are required to selected few photos that contains colours which presenting the 7 colours of spectrum.

Select photos that contains 7 spectrum colour,Then arrange them into a simplest form according to the spectrum order.

 I have selected a group of photos for the spectrum. Then a box were created in adobe Illustrator to make clipping mask of the spectrum. All these methods were repeated for the other spectrum colours.

 work in Ai:

Red:

Orange:

yellow:

Green:

Blue:

Violet:

Purple:

This is the jpeg file of my Spectrum color:

This task of spectrum is to develop skills in analysing the exact colour of a spectrum. Spectrum is a ray reflection when it hits the water. Other than that, this task helped me to understand the importance of colour spectrum.

Colour and Design in 2 and 3 Dimensions

Task 1

Light and Color

Light is a type of electromagnetic radiation. Electromagnetic radiation is made up of waves that transport energy. This energy travels in tiny packets known as photons. There are many different types of electromagnetic radiation, and together they make up the electromagnetic spectrum, which includes: radio waves, microwaves, infrared waves, visible light waves, ultraviolet waves, X-rays, and gamma rays. Waves can be measured by their wavelength (the size of the wave) and frequency (how many waves pass a point during a time interval). All of the energy inside a photon has its own wavelength and frequency.  

….photons of visible light (light that humans can see) have wavelengths of 400-700 nanometers (10-9 meter or billionths of a meter), and a frequency of 430-750 trillion (1012) cycles per second….

….The light from the sun contains millions of photons of variable wavelength, not all of which are visible to humans. Within the range of wavelengths that make up visible light, different wavelengths correspond to different colors. The light seen from the sun appears white, as it contains all wavelengths and thus all colors. (Imagine a prism breaking white light into the colors of the rainbow.) When photons hit an object, they may be absorbed, transmitted or reflected. An object appears a certain color when all other wavelengths are absorbed except the color being seen, which is reflected. For instance, plants appear green, as they contain chlorophyll, which absorbs red and blue light and reflects green light. Objects that appear white reflect all wavelengths, while objects that appear black absorb all wavelengths…

(Professor/Scientist of How Stuff Works.co, Australia)

All type of light is not same, they have different value of contrast and brightness

There is a variety in the color makeup of light that appears white. Sunlight is almost perfectly balanced light source—it contains all colors in nearly equal quantities. But daylight does experience color shifts. The color appearance of objects changes dramatically in early morning or in the shade. Electric light sources can also exhibit variations in color makeup. Incandescent lamps tend to produce more red and yellow light than green and blue, and appear to be “warm” in color. Because of the way incandescent light is produced, little can be done to manipulate its color characteristics. With fluorescent and high intensity discharge lighting, this latest technology makes it possible to manipulate the color makeup of a given light source.

Picture 1: image of a cartoon figure under a spot light

Picture 2: image of the cartoon figure under fluorescent light

Picture 3: image of the same cartoon figure under sunlight

 The difference between this two images is the quality of the sharpness of the color. As in the picture 1, the photo seems to bring up a thick contrast point on the subject matter. This is because the direct light (spot light [LED]). Moving to the other picture (picture 2), this photo is good in color for the subject matter. The problem is, it does not have any saturation quality on the subject matter. Besides, the yellow color of the object looks dull. This two results are totally different when the photograph is taken under a sunlight. As we see in the picture 3, direct sunlight shows and highlights the originality of the color on subject matter.

White Light and Bright Colors

Generally speaking, whiter light (comprised of equal amounts of all colors) makes colors appear more natural and vibrant. However, some portions of the spectrum are more important to a light’s color makeup than others. Red, blue and green—the primary colors of light—can be combined to create almost any other color. This suggests that a light source containing balanced quantities of red, blue and green light can provide excellent color appearance even if this light source is deficient in other colors in the spectrum.

Conclusion

In a process of documentation or photographing an object, the image quality in point of contrast, brightness, saturation level of color and the levels of each color angle is depend on the type of light where the photo session is taken place. This is because, not all the object is suitable for all type of lighting especially fruits in high rated color. Besides, the wavelength of all light is not balanced as wanted to imaging an object.

Reference:

Osram sylvania : Relationship between color and light. [Online] Available at: https://www.sylvania.com/en-us/innovation/education/light-and-color/Pages/relationships-between-color-and-light.aspx [Accessed on 1 August 2015].

(2011) Photo composition articles: photographic lightning. [Online] Available at: http://photoinf.com/General/NAVY/Basic_lighting_techniques-_Outdoor_and_Existing_ligt_photography.htm [Accessed on 1 August 2015].

Picture 1, 2 & 3 :

Images from mobile phone

3D Character and Environment Design for Animation

Production

A character imaging process’s most important part is to illustrate the character details consistently. Thus, ruler lines dragged into the work space to align all the additional parts according to the line and proposition.

This is a tip learnt in the previous semester in making a 2D character. Moving on to next, image plan is essential to be placed in MAYA Autodesk before steeping into 3D modelling. Front, side, and back are the basic need of 2D imaging. Top view is the least, but not on certain project. In this case, these three (front, side, back) view is very important. So, I’ve imaged three plan view of my character Ah Soon.

Finally, each of the view were split individually. This will make the grid image on MAYA to be attached easier and side by side. These are the JPEG files of my Ah Soon character.

Ah Soon Character front view

Ah Soon Character side view

Other than all this skills, a reflection of this task is the practice of the tools and learning more about Ai. This benefits more and more on the imaging methods and self-skills in using all this applications. 

Interactive Design for Web Technology

Introduction

            Mantin is a small town in the midway of Nilai and Seremban. It is also called Setul by certain people. This town initially got the name Mine Tin by the English people due the economic routine which was the tin mining. Then some used to say Many Tin, this word then changed into Tin Man due to pronunciation problem of the Chinese. This had just going around by the people which use to say the name as they wished till one day it were called Mantin. The belongings are Muslims, Buddhist, Hindu, Cristian, Sikh and orang asli (few). This town is a developing town with many routes. Jalan Besar Mantin is the main street of this town.

           

            This town is allocated in between the route from Nilai to Seremban and from Seremban to Kajang. It is almost 12-14km to Seremban and about 10-12km to Nilai, to Kajang up to 30 km. Mantin are visited and passed by many layer of people from different part of Malaysia and from other nations as tourist. Adding on it, Mantin’s heritage is a village called the Hakka Village where during the British rule, the tin miners are mostly the Hakka people and they stayed near to the mining are. So, it is called the Hakka Village.

            A higher education institute called Linton University College (f.k.a. Lagenda College) built in Mantin on the year 2005 under Legenda Education Group. This university college students are from around Malaysia and from oversea (international students).

3D Character and Environment Design for Animation

In 3D, camera angles are another essential point of consideration. This is due to the angles that would make a scene perfect. Most of the movie Industries, involves various camera angles even in a single scene. It is a reason of successful scene is captured. It is said so because : (in a movie, an audience would like to watch a scene from various angle by imagining that they are In the scene as an invisible eye, this would be the best to be way given for the audience well).

Task :

In a group of two, take shots in five different angles.

In this task, my partner was Samira Jamali. We are required to take pictures of partner from different angles at least 5.

Medium shot

-A shot where the subject(s) is shown from the knees up.

Full shot

-A long shot that shows the subject’s full body from head to toe

 

Close shot

-A shot which shows the subject from head to mid waist

Close up

-A shot of an isolated part of the subject or an object such as head or hand

 

Extreme close-up

-A magnified shot of a small detail as the subjects eye

At the end of this task, I have understand how to consider a shot according to the subject’s reaction, movement, situation and environment. Interactivity is another point of consideration here for this task. Besides, the angles and environment shots determine the best viewing point for the audiences. This camera angles brings special quality on the shots and the subject or the object. 

3D Character and Environment Design for Animation

According to the pre-production process, the character should be imaged as in 3D form. To ensure the character to be in perfect 3D form, first, the illustrating process were done in Adobe Illustrator. As what I’ve learnt in the previous 2D Animation and 3D Environment modules from the previous semester, the illustration of the character is very important part of designing a character. This is an imaging process in 2D to place the image on the grid in MAYA (Autodesk 3D).

Below are the process flow of the imaging process:

This is the initial method of attaching the scanned Ah Soon sketch into Adobe Illustrator (Ai). Then, it was traced into lines and shapes to lock the lines on the document and start the illustration process.

Pen tool were used to make lines and shapes by referring the sketched image of Ah Soon. Ah Soon character were built half initially, then copy reflected as a full form of my character. The reason of this method is to make the character stable on left and right side from the front view. During the imaging process, lines were adjusted by the use of direct tool in Ai by dragging the points of the lines to the shape as wanted.

­­

Interactive Design for Web Technology

The difference between “user interaction” and “user experience”

User interaction is how someone actually uses your product. So for an example, in the context of mobile apps, it includes details like:

 ·         Icons with images that are recognizable,

 ·         Using already accepted elements of design

 ·         Making sure the “touch points” are the appropriate size and location (i.e. the on-screen button isn’t too small for someone to miss).

User experience, however, is more subjective. It includes:

 ·         A person’s perceptions and responses — not just their interactions, but what they perceive;

 ·         The results from the use, or anticipated use (i.e. they may not have used it yet), of the product;

 ·         The actual product, system or service.

Dissecting the mobile user experience into its key components gives us a conceptual framework for building and evaluating good mobile experiences, within the context of a user-centered approach to designing for mobile. These components shape the mobile user experience including:

 ·         functionality

 ·         Information Architecture

 ·         context

 ·         user input

 ·         content and marketing

 ·         usability

 ·         feedback

 ·         social

Perceptions are a big part of user experience, and they don’t just come from what a person sees or feels. They can also be shaped by:

 ·         the specific view of the world that user brings based on past events, knowledge and culture;

 ·         that user’s current mood; and

 ·         recent events experienced by that user.

image 1: a graphical chart for user experience

image 2 : an example image of what is user interaction

Reference:

(2015). Nestrix: user experience and mobile apps. [Online] Available on: http://www.nestrixcorp.com/blog/index.php/user-experience-and-mobile-apps/ [Accessed on: 11 September 2015]

(2015). Web usability talk: designing sites for better interaction. [Online] Available on: http://webusabilitytalk.com/2014/02/17/designing-sites-better-user-interaction/ [Accessed on: 9 October 2015]

image 1:

(2015). Nestrix: user experience and mobile apps. [Online] Available on: http://www.nestrixcorp.com/blog/index.php/user-experience-and-mobile-apps/

image 2 :
(2015). Web usability talk: designing sites for better interaction. [Online] Available on: http://webusabilitytalk.com/2014/02/17/designing-sites-better-user-interaction/ 

3D Character and Environment Design for Animation

Character

After developing and working all the sketches on character,  a suitable character as planned were made by the help of the pop-up book references. ‘Ah Soon’, the character are sketched first and consulted to the module leader. The final look of character development:

photo 1 : Character Ah Soon front

photo 2 : character Ah Soon front and side

The outfit of my character is a farming hat, long sleave shirt, long pants and a rubber boot. These outfit ideation is to show the character is basically a farmer. Additional props are included in the 2d version of my character and attached in the logo too.