013: Week 15 Blog Exercise – Interactions Between the 3 Levels

Representational

This image is representational of a desk top setting with pen holders and writing utensils scattered about. Anyone who sees this can easily recognize this as such because as literate human beings, we've encountered a similar setting before. Or we may even have seen it in media where a person is at their desk with a piece of paper in front of them with pen holders and writing utensils and other kinds of items scattered about.

One would recognize the idea of using a mug as a form of storage, particularly for pens and would immediately draw the connection upon seeing this picture. Despite the entire image in blue and white, we can recognize that to the right of the pen holder is half a can for storing smaller writing utensils. There is then of course the rectangle shape at an angle we typically view paper as in addition with a fountain pen (with the trademark point).

It relates to the level of abstraction being a much simpler form of a desk top setting. Everything is reduced to the basics from the desk top itself and the items with little to no tone.

It is symbolic as the details are are uncommon with the world and symbolizes another form of instrument - the art program that is Photoshop.

Abstract

This illustration itself is an abstract of a desk top setting. Eveyrthing is in its basic form with very little detail such as the mug as in the upper left with little to no depth with its limited tone. It is only using was is essential for recognizing with the common shape and placements. The image, as stated earlier is also entirely in blues and white, departing further from an actual representation and this way, gives it some emotional impact.

It relates to the level of representation being a distilled form of what its meant to appear as.

The image is an abstraction toward symbolism with both arbitrary and experience assigned meanings as shown in the details.

Symbolic

There are many symbols prevalent in this image. For one, the contents of the pen holder are of tools a person can use in the art program, Photoshop. The zoom, hand, font, magic wand, and brush tool inside the mug are all symbols that denote writing/art utensils. Similarly, the contents of the can sans the eraser tool are all symbols of smaller utensils a writer/artist uses. The erase likely acts as a connection for the viewer to make as both the smaller tool and another part of Photoshop along with the arrows and dodge tool.

The other tools scattered about can be among many possibilities, there is the clone stamp tool and healing brush which in the context of this image seems to be more abstract representations of an actual stamp and band-aid. Here, we can interpret the other Photoshop tools to be just as random items on a desk or in relation to what we know, such as the crop tool possibly symbolizing a paper clip and the notes tool as a post-it.

Finally, there is the rectangle shape containing a checker pattern. This is atypical of a blank slate of a Photoshop image to work on with lines created by the (enlarged) pen tool. As mentioned earlier, it seems to represent a piece of paper and pen and it does so abstractly with the placement and shape. However, this image cleverly places a blank Photoshop slate and its lines created by the pen tool to act as symbols of a piece of paper and pen.

012: Week 14 Blog Exercise – Application

Representational:

Image taken from http://cakecentral.com/

This cake here is representational of a handbag; more specifically, a Coach Inc. one. Furthermore, it is placed on what appears to be a wrinkled sheet but in reality is decorative sugar. Many of us, especially from the developed world, would have no troubles immediately associating the particular design of the letter "C" (as shown on this "purse") with the brand. The sheet itself, however, is easily recognizable by anyone with the form of a 'wrinkled' substance is common from clothes to bedsheets. What makes this a good representation of a Coach bag is how it counters the conventional shape and look of a cake: circular and solid color(s). It is technically faithful to a common Coach Inc. handbag in visual details from the color, shape, and tone. It even carries on some texture with the lines in the handles to appear as stitches and the creases of this sheet it is placed on.

Abstract:

Image taken from http://forum.tureng.com/members/islim-albums-abstract-picture164-abstract-wallpaper.html

This desktop wallpaper is an abstract design of a storm. While it is representational in color and recognizable shape, it is still a reduced form with the use of simple shapes (especially the circles), directional arrows, and little depth. The only form of depth in this image are the overlapping shapes, tone, and color. It also makes use of symbols with the arrows to denote wind and for all its purposes, proves to be abstract this way with this arbitrarily assigned meaning. There are connections with familiar visuals such as the clouds and more notably, the rainbow. It has the identifiable curved arch and is multi-colored. However, is still a reduced form of this light spectrum being technically unfaithful with such deep, solid colors. Not to mention the red color is usually the first or second color on the top half of one.

Symbolic:

Image taken http://www.zazzle.com.au/fundamental_game_symbols_bumper_sticker-128029983741117189

These four circular shapes are the iconic symbols of the Sony Playstation controller: a square, triangle, x, and circle. In Japanese culture, the shape of a circle signifies "okay" or "approval" and in a game, this would be the confirmation button. The "x" is typically a symbol of disapproval and likewise, would be a button to cancel an action. Teiyu Goto, a Sony engineer has revealed that this was indeed, the reasoning behind the shapes of the Sony Playstation controller and also shared the meaning of the triangle button, which signifies viewpoint, and the square as a piece of paper.

However, in the US market, the "x" has been the confirmation button with the "circle" and the cancellation. This could be for ergonamic reasons, with the player resting their thumb easier on the "x", as it is on the bottom of the controller rather than on the side.

These symbols are culture-dependent, as many US consumers aren't aware of these meanings. In addition, these are be non-iconic symbols, being arbitrary functions, especially outside of a gamer's knowledge, much less a cultural one.

011: Week 12 Blog Exercise – Visual Techniques

image taken from anliah from deviantART.

• Asymmetry
• Regularity
• Economy
• Boldness
• Activeness
• Consistency
• Flatness
• Singularity

image taken from missesglasses from deviantART.

• Asymmetry
• Irregularity
• Complexity
• Unity
• Intricacy
• Spontaneity
• Flatness
• Variation
• Juxtaposition
• Randomness

Here are two resources provided by two different people that can be used (for non-profit) graphics be it for wallpaper, banners, layouts, etc. Its these unique kinds of designs that is what inspired me to want to be part of the visual communication world as for fun and practice I take some of these provided resources into use for recreation and even look up to these to make "resources" of my own.

The first design, is a curved rainbow placed on the left side so as to open space for text or other images on the right. The second is a collage of various scans/photos placed together to make a compiled design that can used on its own as a header or part of another graphic design. The first is more singular as it is of one component, the rainbow in comparison to the second with its visual technique of juxtaposition. There is the random placement of phrases which color and shape juxtaposes but blends in well due to the nature of the words and accompanying images (cute frogs and bugs).

Another way these two designs contrast is through regularity and irregularity. The rainbow-like curve is a uniform of the colors that go in the same direction and from bottom to the top, start rather small and get larger as it goes higher. The second design is comprised of various elemental units from the different cut outs and there isn't a pattern.

There is also Economy - Intricacy that differentiates the first (being economy) and second (being intricacy). The first design uses the elements of line, shape, and color. It is rather frugal with these elements and to be used in the same manner. There is also a bit of a contrast with the gray background, but otherwise, the rainbow curve is very easy to look at and digest. The second design is more intricate as it is much heavier than the rainbow curve, carrying various shapes, lines, color, and layers. Some of the shapes overlap another (the frog over the love letter). It is very detailed and offers an a visual of power and wealth.

010: Week 11 Blog Exercise – Contrast

Despite the stark contrast of the child-like cartoon depiction of a young man to the far right of this Yaris ad, this is an effective use of contrast. There is a contrast is tone, color, and shape yet harmony has also been successfully achieved. With the car, there is a clear amount of light source that gives it different tones and shades and thus, depth. A quite amount of tone was given to the young man as well so as to blend in a little better with the car but not quite contrast completely with his simple shape.

The left of the ad would have usually dominated the entire image but with the vastly contrasting shape and tone of the young man in a cartoon fashion, the weight is distributed evenly. There is more visual reinforcement with the "mp3 player balloons" that the young man is holding in addition to the color of his attire which isn't that all vibrant. The young man himself acts as a compositional counterforce to the regular shape of the car to his irregular, unpredictable, albeit simple shape.

Here is an example of a poor use of contrast. The intended use of this image, which was to use scale to contrast the green blocks (opened cases of X-Box games) to give off a feeling of massiveness or "tall" as with the King Kong and the green blocked shaped Empire State Building. No doubt this was an attempt to display how the producers/advertiser wants the audience to feel, with the XBox giving off a large scale, immersive feeling into their movies.

However, the gray bar on the bottom for me is seen as "the ground" thus I cannot imagine King Kong being any higher up than two feet. This is further supported with the XBOX 360 console itself "standing" on the gray bar as well. The design has succeeded in terms of contrast in the sense of color, where the bright green pops out and draws the viewer's eye to it but it doesn't achieve much harmony because of the stark differences in tone.

It has done a decent job in some design elements individually, such as scale with the texture of the green blocks more apparent from the bottom and color from dark to bright. But overall, contrast has not been successfully achieved as all I'm seeing is what feels more like King Kong in the background with green legos.

009: Week 10 Blog Exercise – Movement/Motion Blog

Image taken from http://www.impawards.com/2008/slumdog_millionaire.html

Here is the cover for the movie: "Slumdog Millionaire". It is an example of implied motion in the sense of induced motion. The female character in the center appears static as the city lights are blurred horizontally to the left. This is to give off the implication that she is running quickly with the lights oozing past her as she is departing that direction. This would be a low level system of motion perception because the blurred lights would be the first thing a view would catch as it is bright and complex. Their eyes will follow the direction it is going and then proceed to recognize the two still figures as a man and woman.

There is also apparent movement within this image. With knowledge of the world, it is easy to interpret the woman running because of the positions of her arms. In addition to the concerned facial expression on her face, the way she clenches her fist and has the right arm in an angle with her left in front, this is what is commonly recognized as someone who is in a rush that is running.

Image taken from http://www.musicalcolors.com/what.html

Here is another example of implied movement here in this musical score. Following the notes from left to right as we have a preference for the lower left, there is a diagonal/triangle-like dynamic. A diagonal is almost always used to communicate movement and change. This is what is known as diagonal stress in which uses the universal nature of implied movement. With a combination of the lines, color, and direction, there is a felt axis given the top-bottom preferences. The different colors of each note has the eye travel up and down as one consciously tries to recognize each individual color.

In addition, through knowledge of the world, reading it this way is a given because thats how musical scores are read. Thus, the eyes are being lead through composition as with all 2D graphics. It is seen as going "higher" as well with the notes climbing on top of each other with the last one being in a higher position than the first.

008: Week 9 Blog Exercise – Dimension/Depth/Space

Figure 1. Screenshot from the Nintendo wii 2010 game: Xenoblade. A closer view of the playable characters' backsides are seen dependent on how stationary they are left (i.e the player not playing) and/or the camera angling dictated by the player through certain buttons.

Here are screen shots from the 2010 Nintendo wii role-playing game: Xenoblade that places a large emphasis on exploration. In figure 1, we get a closer view of the playable characters' backsides than usual when actively playing. It makes use of the depth cue of overlapping as we see the character with the red weapon in front of a tree which is in turn, in front of many buildings so we see the character as being in front of these things from the player's perspective.

Figure 2. The game being actively played with the characters running around town.

Here is a screen shot of the game in action. The player is actively moving around and we get a better sense of depth and size from the surroundings. By relative size, the buildings and the road are taking up the most space in the player's field of view. This is to give off a sense of immersion through relativity that the things around us in the game would be in the same scale as if we were to enter the world ourselves.

Figure 3. The town that the characters where previously in (figure 1,2) being seen from a distance.

The town the two playable characters were in earlier (figure 1 and 2) is now seen from a distance after a bit of traveling. This makes use of the depth cue of relative size, where objects that take up a small part of the field of view are perceived as being farther away from the objects that take a larger part of the field (Veeder). The burg that was once so large and had buildings that extended beyond the civilians height is now seen as the same height as the characters.

It is also making use of relative height with the town being above the horizontal line, thus also being perceived as being further away. In this image here, the characters here are in the center of this shot and are relatively small, so they also are perceived to be seen from a distance from the player's point of view.

In addition, linear perspective is coming into play here with showing two verges on each end of the image converge, being where the town is. There are what looks like man-made extensions on the left side which appear larger (relative size) giving off the perception that it is closer while being connected to the burg.

007: Week 8 Application (Blog) Exercise: Tone and Color

Figure 1. Screencap from The Legend of Zelda: The Wind Waker featuring Link (character in green clothing) holding a boomerang.

image taken from: http://www.lazygamer.net/what-is-the-problem-with-cell-shading/

Figure 2. Link experiencing a massive explosion.

image taken from: http://www.wikipedia.org/

Here is a screencap from the Nintendo GameCube game: The Legend of Zelda: The Wind Waker released in 2002 in Japan and 2003 in America. I am very interested in the field of game design and hope to pursue it sometime in the future. This game implements the use of cel-shading, which heavily relies on tone and color for its visuals.

Cel-shading, as defined by wikipedia: "is a type of non-photorealistic rendering designed to make computer graphics appear to be hand-drawn." Tone, provides the foundation for this game, as seen with the simplistic lighting on Link (figure 1) and in the smoke in different shades as a result of an explosion (figure 2). If we were to see these images in complete monochrome, we can easily distinguish the intensity of darkness or lightness, such as the light source coming from the upper right (figure 1) and the impact of the explosion in the center due to its brightness with the darker shade indicating the smoke dissipating. Every bit of shading is straight-forward and with a purpose.

Tone here, interacts completely with dimension. It is what gives each of these shapes depth such as the boomerang (figure 1) with only the indication of being three dimensional is how it has an edge that faces light. The same goes for Link himself and the slime creature "ChuChu" that have shadows that follow them in whichever environment they're in. In figure 2, the light lines of the water show that its not a solid ground, but something that provides waves and has depth. There is the shadowing of the ledge as well, showing it rises up and there's a face that you can run into as seen here with Link rolling against it instead of over it.

Color, is an incredibly important aspect of this game's graphics. For one, the bright hues and saturations provide the tone of the game. It takes advantage of how the human brain has "learned" colors and sets a mood of simplicity and cheeriness to an extent, creating an entirely new world to explore. It emits a more positive emotion. The same level of brightness provides harmony, so that each part of the game is being interacted the same way. As shown in figure 2, color and tone is highly dependent on context, the setting was within a cavern-like area where there is little light and upon exploding a series of bombs, the impact is defined by the bright colors and tones.

Color in this game is involved with defining shapes. Aside from the informational aspect (life, buttons, etc.) here are no black outlines to define shape but rather, color along with tone. Different hues are used (figure 1) to represent each thing from Link himself, the approaching ChuChu, the tall blades of grass and other vegetation, which all are green. Also, in figure 2, the color makes distinctions among similar shapes. Each of the explosive smokes are of different bright levels of orange, to give each part of the smoke an emotional punch.

I would highly recommend anyone with access to a GameCube or wii to get a wonderful taste of this tonal and colorful experience.