Friday, 10 December 2021

Scanning images

How to scan an image

Rembrandt [Public domain], via Wikimedia Commons
convert image to greyscale

open levels

adjust levels

turn background into a layer

use tools to remove background and colour image

Rembrandt as a digital image

By Paul Perreijn from Heerlen, The Netherlands (P1050473) [CC BY 2.0 (], via Wikimedia Commons

Monday, 29 November 2021

Create Spritesheets in Photoshop

How to create spritesheets for a Street Fighter type game.
You can view the game live at
and you can download the code from

You will need to create 8 spritesheets to represent 8 different fighting moves

Each movement will have 
  • at least two frames, 
  • it can be no more than 30 frames (7680 pixels wide)
  • a starting point and an endpoint.
The starting point for movement is the same for every movement. 
You can view these sprites in the DLE







Designing images for screen based media such as websites and games require all measurements to be done in pixels and the resolution set to 72dpi (dots per inch, which is the same as pixels per inch)

Open up photoshop and change the units of measurement to pixels

Create a new photoshop file for each movement

Place each frame on a new layer

Open time line palette Window > Timeline

Click Create Frame Animation button

Click hamburger, top right in palette and choose Make Frames From Layers

Shift select the frames and 0.1seconds
You can now test your animation to see if it works.

Download the Sprite sheet generator
This script generates a single row spritesheet for Conflict of Character used for the ILLGA400 Illustration module.
Unzip the the zipped folder
Load the script into photoshop

Specify the height and number of frames

Save the file as a png

Monday, 15 November 2021

Walk cycle


Snow White and the Seven Dwarfs (Disney, 1937)

Private Snafu in Censored (1944)

Private Snafu in Rumors(1944)

Jonathan Hodgson - Dogs

THE LUYAS 'Says You' [Official Video]

Betty Boop - Bimbo's Initiation - 1931

Monday, 8 November 2021

So, what is an interactive poster?

A human interacting with a computer
Watkins 2017. Human computer interaction. [animated gif]
Interactivity enables people to interact with media to create a specific response. Games such as pinball and fairground attractions can be considered to be interactive media. The specific response in games is to gain a higher score, for example in pinball certain targets score more highly than others. The player creates a response from the machine. More recently interactivity has come to focus on how people interact with computers. An interactive poster require an input from a person in order to create a response, it might be considered to be active media.

A human using gesture to control their interaction with a computer
Watkins 2017. Human computer gesture interaction. [animated gif]
Traditional media such as film, TV and print can be thought of as passive, where the viewer sits back and lets the media wash over them, nothing the viewer says or does will have any impact on the content.  Wherever in the world, to whomever and in whatever conditions the road runner will always run off into the sunset and Wile E. Coyote will always face a calamity of his own making. Traditional media is consumed passively by viewers sat in their own anonymity.

Watkins, D., 2017. Noosphere. [animated gif]
Gene Youngblood uses de Chardin’s idea of a Noosphere “a film of organised intelligence that encircles the earth” to describe the media network of film and print that conditions humanity.
Interactive media is active because it requires an external force to force it into acto otherwise the media remains still. The external force can be a viewer prodding the interface or it could be a data stream such as a weather feed forcing the media into action. If there is no external force the screen remains static and unable to move. As media has changed from passive to active the viewer has evolved into a user, someone who uses media rather than someone who watches it go by. There are multiple ways that people can interact with computers with the most obvious being the keyboard

Watkins, D., 2017. Computer input device. [animated gif]

In interactive posters a keyboard might be too cumbersome and with the development of large touchscreens, touch is the most immediate form of interaction. But how does the user know what to touch? A new discipline of usability has evolved to measure the usability of an interface and how easy it is for the user to navigate around the interface. Theorists such as Jacob Nielsen have developed theories of usability but they tend to emphasise efficiency over creativity. Can an interface be playful and creative and still usable?
A computer creating a specific response in a human
Watkins 2017. Human computer interaction 2. [animated gif]

Advertising has developed a new acronym DOOH, digital out of home advertising to describe interactive digital signage which covers all interactive signage from digital notice boards to interactive kiosks. You can see these signs around the university, do they need to be as dull as ditchwater to work? Would a more creative sign lose it usability?

Watkins, D., 2017. Digital signage. [animated gif]

Whereas this is how adverts were thought to be
CNNMoney 2017. Minority Report tech: 15 years later. [video]

Examples of interactive media

Controlling computers through touch

This interactive kiosk was designed for the public gallery Arnolfini in Bristol, UK. The kiosk hosts an audience evaluation survey
Touchscreen survey for Arnolfini, Bristol
Watkins 2017. Survey installed at Arnolfini.

Distinctive - question 4 Arnolfini survey
Watkins, D., 2017. Distinctive question, Arnolfini survey. [animated gif]
With all the standing around and waiting at bus stops, shelters offer a great way to interact with the public. BigBoard combined interactivity and augmented reality to promote the male grooming product Axe, known in the UK as Lynx. Because the bus stops are specific to a particular site the advertisers can play with the 'reality' of that location.

BigBoard JCDecaux Russia, 2012.  AR bus shelter [video]
BigBoard created an interactive augmented reality sign for Axe, grooming products for men (known as Lynx in the UK).
PepsiMax 2011. AR bus shelter [video]

PepsiMax used augmented reality in their Unbelievablebus shelter advert

Controlling computers through gestures

Leap Motion is a small controller the size of a chocolate bar that allows you to control the computer through hand gestures. It can be used in an installation to allow the audience to control the interface.

MeriStation 2017. Leap Motion [video]

The Leap Motion controller can control processing scripts which can be installed on Raspberry Pis.

Controlling computers through barcodes

8BitRetroGamer 2007. Barcode Battler by Epoch. [video]
Barcode Battler was a handheld games console produced in the early 1990s. The player would scan a bar code to generate a fighter and play against other barcodes. Despite the futuristic back story barcode battler was just a a dice game with each side weighted by generating numbers from barcodes. See for a fan website of the console and shows the different barcode cards with illustrations of the fighters.

Watkins 2017. Games Academy Registration System [animated gif]

I created an interface for a registration system that used a bar code reader to scan ID cards.

Controlling computers through texts

Hello Lamp Post was a playable City project based in Bristol that enabled the public to interact with street furniture such as lamp posts and post boxes

Continental created a campaign that responded to football fans' tweets.

Controlling computers through motion sensors

Reebok – Are You Fast Enough? from Markus Schramm on Vimeo.

"We (Reebok) set up an outdoor billboard in central Stockholm, measuring pedestrians’ pace with a built-in speed cam. Anyone who ran past it faster than 17 km/h, unlocked a pair of ZPump 2.0 shoes."

TAJ Media 2016.  Cafe Pele The Contagious Billboard tv Commercial ad. [video]

The contagious billboard started yawning when it detected someone nearby.

Controlling computers through external data feeds

ClearChannelUK 2015.  ActionAid #WashedAway on One Piccadilly.  [video]

"International development charity ActionAid launches rain-triggered advert on Storm's One Piccadilly screen to send a powerful message on the loss of childhoods due to climate change in Bangladesh."

Controlling computers through heart rate sensors

Bartel 2013. JUDE-artwork.  [video]

Interactive sculpture that changes according to the heart of the user.

Nolde 2006. Greenwich Emotion Map.  [video]

The artist Christian Nolde created an emotional map of Greenwich by recording the heartrate of particpants as they walked around the borough

Controlling computers through traffic data

British Airways 2013.  #lookup in Piccadilly Circus. [video]

--> BA created an advert that tracked the flight path of its planes.

Controlling computers through face recognition

Lemon&Orange 2018.  Coca Cola - Digital Signage system [video]

Lemon&Orange developed a facial recognition system for Coca Cola. The system recognises the faces of bystanders and plays a video based on their demographic.

Animated Posters

Netflix used animated gifs on digital billboards to promote their streaming service.

Visualising ideas

Tuesday, 9 October 2018


Project DEADLINE – Monday 29th October 09:00

Create an animated gif, a doodle about Plymouth that commemorates the birth of a person or a special day such as the cardboard boat race, Halloween, Xmas etc, or something relevant to Plymouth. The animation must be in the style of a Google Doodle, which are temporary adaptations of the google logo sited on the google search home page. You can view an archive of all the google doodles on

The animation could also react to a data feed such as the weather, public transport, lighting times etc.
The doodle must be an animated gif with at least three frames and form an indiscernible loop where the viewer cannot detect a break in the repetition.

The doodle must be 1000PX X 400PX

You can animate the doodle in any number of ways