1.1a 2D Art

1.1a Every session screenshot the outcomes and briefly explain the skill you have learnt. Please include:

2D Art – Ideas generation, digital drawing and painting, Pixel art, Animation, tileable assets.

Session 1 - Ideas Generation

https://docs.google.com/presentation/d/1s6Qva4samoO-rfrw8dfveWmoh_YBiQuvP6of_sQhLBQ/edit#slide=id.p1

2D Art Processes:

PhotoBashing: is a technique where artists merge and blend photographs or 3D assets together while painting and compositing them into one finished piece.

for creating new ideas and sparking creativity. It's a process of idea creation which just uses existing art to generate something new by mashing them together. It can be useful with using images from the same theme to create something new but still have it based on and in the theme wanted.

Artists will collect image boards for reference and creative help essentially getting inspirational research to help with the creation of a design.

Brief: Artists will usually get a brief before even concepting what they might make or having any ideas; the brief is essentially a set of specifications / points that the ideas and art in turn must fall under: such as the art’s size (file size or page size) or more art correlated such as it must come under a specific theme (such as horror). Pinpointing more exact specifications to hone in what sort of art is going to be created.

Idea generation: Before artists dive straight in and create work they need to actually come up with ideas and something to draw that fits the specifications of their brief. This can be done in a number of ways from a mind map of characteristics or things that link to a theme to a mood board of images of art and assets that link to the brief and are of a similar nature to the art they are going to be creating (visual mind maps).

Reference Research: Gathering images for creativity and to use as reference while creating art. Such as similar characters to one you are making or even real life images: for example using images of dark forests for you to use in creating a horror environment/background. Or for a character's clothing you can look at the texture of real life belts and fabrics.

Templates: Sometimes for idea generation, rather than spending a large amount of time on a big artwork. To test ideas an artist might make thumbnail sketches and templates are an easy way to make quick drawings as their base is a pre made drawing. Meaning form and size dont really matter and help boost idea generation.

My Photobash/Ideas Generation:

In class, I made this photobash, learning to use the skills needed such as using lasso and magic wand to draw and cut out areas and splice them together.

My 2nd Photobash, using a lot more images and more advanced as rather than just adding the images by splicing them off the other images, I also adjusted image setting so they had a similar colour palette and shading to the original image.

2 horror character designs (zombie and skeleton) using a character template.

Session 2 - Photoshop

Photoshop:

-lasso: creating selection grids over a layer to splice or cut the layer

-layers: when cutting or slicing an image you can add it to a new layer to retain the original image, also for splitting parts of artwork to not alter the whole art as 1

-masks: can be used on a layer to specify which bits of the layer/image are visible

-Transform: to be able to alter an image’s scale or size, either free and uneven or locked to keep the same ratio

-Clone Stamp: “clones” parts of the image to extend it further and fill gaps.

-Cropping: removing parts of an image / using only parts of an image that you want to keep

First testing/drawing in photoshop using a graphics tablet:

Uses of pressure sensitivity on a drawing tablet:

The shapes I used and manipulated to create the silhouettes:

samurai frog/alien

Phalanx esc centurion

general centurion

Session 3 - Characters

Using this same method we can draw faces from different angles.

Character faces aren’t always round but we can still use the same cross method.

the three features that will determine the emotions of a character - The eyes, eyebrows, nose and mouth.

Drawing faces from different angles, moving sideways or tilting the head will significantly strengthen or weaken the expression.

My examples of trying and using this method to draw faces:

High quality sketch to clean example:

Taking my original frog/alien samurai silhouette from before, I created a quick sketch of the character on top of the silhouette for a design. Then I reduced the opacity and use an enemy samurai character from the game "mini ninjas" as reference, before creating a final clean line art of the character design.

Here I revised one of my silhouette characters by sketching a character design and then inking it for a cleaner line art. Then using the line art I created different colour variations, mainly taking inspiration from the Samurai enemies off of a game called "Mini Ninjas".

Grounding my choices in the original colour scheme of the character, I created my first basic colour idea for the character.

Then changed up the design by swapping the blue shades for red and the greener underwrap for grey/black tones to create a red variation.

Then using the colour replace tool in photoshop, I created a secondary variation. This version being much darker as the bright gold ornamental look was replaced with blacks, giving it a more sinister look/style.

Session 4 - Pixel Art

Resolution: Pixel game assets are usually created using the power of 2:

16x16 px
32x32 px
64 x 64 px
128 x 128 px
256 x 256 px
512 x 512 px
1024 x 1024 px (ideal for tileable backgrounds)

72dpi for screens, and 300 dpi for print.

(px = pixels, dpi = dots/pixels per inch)

Size and scale can affect readability. The smaller an object is, the harder it is to add details. You won’t always have room to outline everything - so look at using colour (highlights and shadows) to define an object.

A dithering technique is a way to create a pattern or noise with simulates a gradient/shading/3D effect. You can choose the length of the gradient and how many “shades” you use.

Set Up:

Preferences: General

Preferences: Grid

Setup - New document

Setup: Pencil & eraser

Tips

My Work Examples:

16x 16

64x 64

128x 128

Session 5 - Tilesets

5 Main components of a 2D platformer's level design:

Ideas for a HORROR Game Environment:

darker colour scheme
skulls/bones
gravestones
leafless trees
blood
abandoned buildings e.g churches, hospitals, castles
Moon / nighttime
broken mirrors, doors or windows
broken fences
ripped curtains
footprints
creepy paintings

A repeatable tileset / tilemap. I made in Asesprite

I used this tutorial for tips and help when designing a tile set, as I found it very useful in trying to create a basic grass/dirt tileset. Not only giving tips but also clear instructions on how to go about creating the tileset.

Session 6 - Animation

I used Photoshop’s timeline for these animations, using their frame by frame animation timeline. But there are a number of other software that can be used for animation:

Adobe animate (previously called flash)
Adobe After Effects (best for motion graphics.

(3D Animation:)

Blender
3D Studio Max
Maya

Heart Animation

Animation displaying a heart that could be used as a health indicator in a game and how it would lower and raise as you gain or lose health inside of a game.

Coin Animation

basic animation of a spinning coin that could be used as a pick up.

Torch Animation

A torch sprite animated, used as an almost placeholder for the lighting within the game engine so they look more natural and come to life.

These are more advanced animations that consist of the basic animation techniques that involve form and factor to make movement look more natural but also accentuate actions so they become more visually pleasing and readable to an audience.

Ball Animation

Using the 1st Principle of animation: Squash & Stretch I tried moving and warping a sphere to make it look like it properly bounces.

"Applying this principle gives the illusion of both weight and flexibility"

Note: An object’s volume does not usually change, unless it’s for comedic purposes.

Ball + Chain Animation

The Same sort of thing as the ball animation, In this animation i warped the chain instead of the ball to properly show the speed and direction of the ball and also how the weight of the ball would tug on the chain.

Session 7 - Character Animation

There are all sorts of actions you can animate for a character from staying still (idle) to moving, fast or slow.

We went over and learnt how to animate basic walking animations and how the amount of frames can affect how they turn out

Most animations are 12- 24fps (frames per second). Using Photoshop's video timeline animation and set the frame rate to 12-24 fps. (when animating in Photoshop rather than something like Adobe After Affects).

But These Animations I made are using Photoshop's Frame animation. I just set 0.1 / 0.2 seconds delay on each frame and also making a new layer for each new frame.

How to video on using the Timeline Window in Photoshop to create an animation (gif).

Walk Cycles:

A walk cycle is a series of frames or illustrations drawn in sequence that loop to create an animation of a walking character.

The size and style of your character will determine what sort of animation you can create, how many frames you need and how much detail you can include. More frames and faster speed means smoother animation and more detail.

2 Frame Feet

4 Frame Walk

5+ Frame Run

More frames and faster speed means smoother animation

Monster Animation:

Some animations I made using a sprite of a monster, implementing the use of animation techniques to create a clear animation.

Monster Idle Animation

Monster Walk Animation

Monster Death Animation

Session 8 - Colouring/Shading

Examples:

My Examples:

Here is where I tried and used these blending techniques to at first blend between the colour red and yellow but then create and show the tone of a 3d object (the sphere).

top left = smudge tool

top right = mixer brush

bottom left = manual blending

bottom right = colour blending

Whichever method used you must consider the direction of light. Where light hits an object and where it cast a shadow.

Photoshop has many layer options that affect blending and how the colour interacts with other elements and colours in the image, leading to different affects being created.

Using the blending methods i learnt from shading different spheres and then adding my own colour based of FrostMourne from World of warcraft

Report abuse