Friday, 24 April 2015

Pixel Art and Vector art



What is pixel art?


Many may think that pixel art is any form of art which involves pixels, however this is not the case. Such an example is photography, a digital photograph consists of pixels (zoomed) but this is not considered pixel art.

Original Image to the left and the Pixels it is built from to the right

People may also think that any form of digital art is pixel art, again this is not the case. Such an example would be digital painting. The image itself is actually built using pixels but each individual pixel does not define the image.

Digital Painting to the left and the Pixels used to create it to the right

Why not all digital art is considered pixel art


Pixel art differs from other art forms due to its precision and control on each individual pixel. The artist has to be fully aware where he/she is placing each pixel, placing a pixel in slight offset can and will result in a noticeable change in the picture.

removing just a line of pixels from the hat has noticeable changes when zoomed out

Progress through history



In 1982 Adele Goldberg and Robert Flegal Coined it Pixel art. In the beginning there wasn't much of an option in the art style of which video games where being produced. Hardware at the time did not allow large amounts of data to be displayed at the same time. In early generations of gaming the limited color palette created a distinct art genre which persisted through the ages and is still being used today. As console hardware gradually became stronger so did its art (graphics) more and more colors where being displayed at the same time as well as the amount of sprites on screen. Characters and Environments began to develop more detail and create a more immersive experience.


Donkey Kong(Second Generation)



Black Onyx (Third Generation)

Pokemon Fire Red(Fourth Generation)


Rayman (Fifth Generation)
 The Progress started to slow down when 3D graphics started to enter the gaming industry and pixel art for a short time was forgotten. due to its nostalgic and distinct visual style pixel art never truly died and is still being used today to great effect, along its way it developed into other types of entertainment such as music and television and it does not appear to be slowing down . Some say it is not the past but the future of game art.


Games


Music


Animation



Television 























Similarities between the old and the new


The same principles are still used when creating this form of art. As it is such a simple art form it was perfected long ago. Today's artists use the same techniques in creating there work. Software changes may have aided today's artist in creating the artwork in shorter time though the visuals themselves haven't changed much post 5th generation.


See caption
4th generation sonic the hedghog
16 Bit Arena 2013

How its made

There are countless ways how one ca produce pixel art here i will cover certain aspects that one needs to take in account to produce his work

Creating s palette


Gradually adding colors
Depending on how complex you want your piece to be you will add colours to your colour palette. As you go alon with your piece you can add colours preferably on at a time to built it up slowly and stop before it get's too much.

Colour Count

Low Colour Count
Having less colours in you piece helps the cohesion and the relationship of all the colours in the whole piece. With a smaller colour count any pixel colour change will have a bigger effect to the surrounding pixels.

Saturation

Satration is the intensity of a colur. The less amount of saturation a colour has the closer it is to grey

Saturation/Hue Table
A common mistake when starting pixel art is the brightness of a colour. If left fully saturated it can be a burden on the eyes.

The One on the left is fully saturated
Luminescence

The higher the luminescence of a colour the more closer it is to white. Another mistake ameture make is not having enough contrast in a piece thus making it somewhat dull and boring. 
Little Contrast

High Contrast

Anti-aliasing (AA)

Anti-aliasing makes jagged edges look smooth, alot of this is done automatically in games but in pixel art it has to be done by hand. 


Left is without AA Right with AA
























Dithering

Dithering is the transition between two colours using a pattern of pixels. This is done without adding new colours to the piece and still ease one colour into another.


Using these techniques and much more one can create pixel art which is both pleasing to the eye and easy to work with.

References


Pixel joint. 2010. The Pixel Art Tutorial. [ONLINE] Available at: http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299. [Accessed 30 April 15].

Wikipedia. 2015. Pixel Art. [ONLINE] Available at: http://en.wikipedia.org/wiki/Pixel_art. [Accessed 30 April 15].

the Verge. 2015. Pixel art games aren't retro, they're the future. [ONLINE] Available at:http://www.theverge.com/2014/7/3/5865849/pixel-art-is-here-to-stay. [Accessed 30 April 15].

Vector Graphics

What are Vector Graphics ?

Vector Graphics consist of geometric primitives- polygons, lines,points and curves that together build up an image that is displayed on screen. In Vector Graphics everything is based on the use of paths which are all connected using nodes or points. Each node has a specific position on the work space which is defined using the X and y axis. These paths can also be modified to an extent, the artist can change the shape or thickness of the the vector or  apply a certain fill or stroke. Vector Graphics can be increased in size without the potential loss of quality contrary to pixel graphics which lose details the greater the size  increased.

Progress through History

The first computer graphics where all based on vector graphics, one of the earliest examples was the US SAGE air defense system. In 1963 Ivan Sutherland Created the sketch pad software that allowed the use of vector graphics. This program is considered to be the grandfather of the CAD and was also considered to be the breakthrough of computer graphics as well.

Vectrex
Early displays where basically modified oscilloscopes, vector graphics where used in these displays as the tech needed to display raster graphics was quite expensive, In time the tech for raster graphics became cheaper and started to be implemented more and more until it had replaced vector graphics.
The first console to use vector graphics was the Vectrex, Whilst arcade games had also started to integrate vector graphics into their games. Other electronics such as the Tktronmix 4014 could also display vector graphics but to change them you would have to erase the display first. 

Fast forward a few years vector graphics made a comeback as artists started to use it to create graphics that needed to be scaled. How vector graphics is set up,where each shape, curve, colour and line allows one to scale an image down to the size of a post card and also allowing it to be scaled up to the size of a billboard. 

Due to the increasing popularity of vector graphics the World wide web consortium created a new graphics language called "Scalable Vector Graphics" (SVG) Which is a royalty free language that contains vector text and shapes.

Similarities between the old and the new

Vector art has improved drastically over the years though its basic principles are still the same. Old vector graphics used mathematics to define a point in space and that concept is still used today. The only thing that has changed is the amount of things that can be placed on a work space and the effects to them.

Armor Attack (1980)
This game was released on an arcade cabinet and was later licensed to be converted to the Vectrex console
Cosmic Chasm (1983)
This game was originally created for the VEctrex Console though it was first implimented in arcade games by Cinematronics


Kingdom rush (2011)
Vector graphics are implemented in various areas in today's industry and as both software and hardware are getting better vector graphics are improving throughout the year.

Games 


Advertising 


TV 


Music


How its made

There are many software's available to create vector art and countless techniques on how to use and manipulate them. This example is one of those techniques created using illustrator to create a vector pencil

Creating Base Shape of Pencil

You start off by creating a rectangle using the rectangle tool.

Creating the Rest of the Pencil Shapes

The wooden part can be created using the pen tool, using the grid as a guide you can align the point at the center of your pencil. The tip can be a cpy of the wooden part and scaled down. The metal band you can create by again using the rectangle tool an align its edges to the other rectangle and as for the rubber you can use the rounded rectangle tool and place it at the end underneath the metal layer .

Separate Pencil Colors

You can now add the colours using the fill tool. The codes displayed on top are the codes for the colours that the software can understand.

Gradients Applied to Separate Shapes

Using those colours as a base you can now create a gradient to give it a nice 3d finish

Metal Gradient Settings

This is an example of the gradient used for the meta ring.


Simple Pen Tool Path

Next you can create a hilight using the pen tool and applying a stroke to it.

Layer Mode and Opacity for Stroke Layer

You can adjust the thickness, opacity and the tips of the stroke to get your desired effect. 

Finalized Pencil Design
In the end you caould have something similar to this

Original tutorial : http://designblurb.com/design-a-pencil-icon-illustrator/

References :



designblurb. 2015. Illustrator Tutorial: Designing a Sleek Pencil Icon. [ONLINE] Available at: http://designblurb.com/design-a-pencil-icon-illustrator/. [Accessed 20 May 15].

Wikipedia. 2015. Category:Vector arcade games. [ONLINE] Available at: http://en.wikipedia.org/wiki/Category:Vector_arcade_games. [Accessed 20 May 15].

Encyclopedia Brittanica. 2015. Vector graphics . [ONLINE] Available at: http://www.britannica.com/EBchecked/topic/624354/vector-graphics. [Accessed 20 May 15].

TechTerms. 2015. Vector Graphic. [ONLINE] Available at: http://techterms.com/definition/vectorgraphic. [Accessed 20 May 15].

Wikipedia. 2015. Vector Graphics . [ONLINE] Available at: http://en.wikipedia.org/wiki/Vector_graphics. [Accessed 20 May 15].

No comments:

Post a Comment