ARGOSI Graphic design
Background
Most of the assets produced for the ARGOSI project were made using Macromedia (now
owned by Adobe) Fireworks 8 and created as PNG (portable network graphic) files,
Fireworks’ native format. These files can be opened using a number of image editing
programmes (Photoshop, CorelDraw, etc.) however the PNG layers are only editable using
Fireworks.
These editable files contain layers each containing a different graphical element (editable
text area, textured background, photographs, vector art, scanned images, etc.) the number
of layers contained in the file is dependent on its complexity – the more complex, the greater
the number of layers. These layers are built up in stack to give the overall effect required for
the finished artwork.
Editable text (top of stack)
Other graphic elements
Background image (bottom
of stack)
Some of these layers have an amount of transparency applied to them, have been ‘filtered’
or have had other ‘effects’ applied to them. If you are unsure about any of these concepts
and would like to experiment before editing ARGOSI assets there are a number of tutorials
for Fireworks 8 available on the web.
Assets
Many of these graphics files contain several layers that have been grouped together and
given meaningful names. If you need to edit individual components (lines, paths, etc.) Use
the Fireworks Modify>Ungroup command to break these back into their constituent parts
(for particularly complicated images groups have subgroups inside them and may need to be
ungrouped more than once).
Name
General assets required for challenges
File completed
File editable
Description
Challenge 1 letter
ch1-letter.jpg
letter.png
Challenge 2 letter
letter-typed.png
Diary page 1
ch2-typedletter.jpg
diary-page01.jpg
Diary page 2
diary-page02.jpg
diary-page02.png
Blueprint
ch4-hornblueprint
ch4-hornblueprint.png
Diary page 3
diary-page03.jpg
diary-page03.png
Diary page 4
diary-page04.jpg
diary-page04.png
Newspaper clipping 1
newspaper.jpg
newspaper.png
Newspaper clipping 2
newspaper02.jpg
newspaper02.png
Diary page 5
diary-page05.jpg
diary-page05.png
Letter from descendent
PNG dated May 9th 1830
Typed instructions for
treasure hunt.
diary-page01.png
Detailed construction
drawings of the
Flaxobulator machine
The consortium goes
from strength to strength
Local industry booms
Location
challenges.zip
/challenge 1
challenges.zip
/challenge 2
challenges.zip
/challenge 2
challenges.zip
/challenge 2
challenges.zip
/challenge 4
challenges.zip
/challenge 4
challenges.zip
/challenge 4
challenges.zip
/challenge 4
challenges.zip
/challenge 4
challenges.zip
/challenge 5
Name
Map piece 1 (web
colour)
Map piece 1 (web b/w)
Map piece 2 (web
colour)
Map piece 2 (web b/w)
Map piece 3 (web
colour)
Map piece 3 (web b/w)
Map piece 4 (web
colour)
Map piece 4 (web b/w)
Map piece 5 (web
colour)
Map piece 5 (web b/w)
Map piece 6 (web
colour)
Map piece 6 (web b/w)
Map blank (web)
Name
Grid of map pieces used on challenge site
File completed
File editable
Description
map-1-1-col.jpg
map-1-1-bw.jpg
map-1-2-col.jpg
map-1-2-bw.jpg
map-2-1-col.jpg
map-2-1-bw.jpg
The map piece
fronts can all be
manufactured from
the original PNG file
map-complete.png
(can be downloaded
separately).
Mid row left. Challenge 6
The final challenge
Mid row right. Challenge
4 X marks the spot
map-3-1-col.jpg
map-3-1-bw.jpg
Bottom row left.
Challenge 5 A new A-Z
map-3-2-col.jpg
map-3-2-bw.jpg
Bottom row right.
Challenge 3 A history
Mystery
map-bwblank.jpg
none
This b/w blank is used
as a placeholder and is
replaced by a coloured
map piece once a
challenge is completed
correctly.
Grid of clock pieces used on challenge site
File completed
File editable
Description
clock1-2-col.jpg
clock1-3-col.jpg
The pieces of the
clock front can all
be manufactured
from the original
PNG file
clock.png
Clock1-4-col.jpg
Clock2-1-col.jpg
clock2-2-col.jpg
clock2-3-col.jpg
Clock2-4-col.jpg
clock3-1-col.jpg
clock3-2-col.jpg
clock3-3-col.jpg
clock3-4-col.jpg
clock4-1-col.jpg
Clock4-2-col.jpg
clock4-3-col.jpg
clock4-4-col.jpg
clockblankbw.jpg
none
Location
All these files can
be found in
mapgrid.zip
Top row right. Challenge
2 Who am I?
map-2-2-col.jpg
map-2-2-bw.jpg
clock1-1-col.jpg
Clock piece blank
Top row left. Challenge
1 Letter from the past
Row 1 Col 1.
Somewhere in
Manchester
Row 1 Col 2.
Classification Code
Row 1 Col 3. What
links?
Row 1 Col 4. Reading
list message?
Row 2 Col 1. A strange
letter
Row 2 Col 2. Support
mix up
Row 2 Col 3. Can you
solve this?
Row 2 Col 4. Find the
errors
Row 3 Col 1. Coded
message
Row 3 Col 2. Who am I?
Row 3 Col 3. Follow the
trail
Row 3 Col 4. A strange
equation
Row 4 Col1. What
animal is this?
Row 4 Col 2. What am
I?
Row 4 Col 3. True or
False
Row 4 Col4. Missing
Reference
This b/w blank is used
as a placeholder and is
replaced by a coloured
clock piece once a
challenge is completed
correctly.
Location
All these files can
be found in
clockgrid.zip
Name
Map piece 1 (print)
Map piece 2 (print)
Map piece 3 (print)
Map piece 4 (print)
Map piece 5 (print)
Map piece 6 (print)
Files used to make map piece postcards
File completed
File editable
Description
map-01-back.pdf
map-01-front.pdf
map-02-back.pdf
map-02-front.pdf
map-03-back.pdf
map-03-front.pdf
map-04-back.pdf
map-04-front.pdf
map-05-back.pdf
map-05-front.pdf
map-06-back.pdf
map-06-front.pdf
The map piece
fronts can all be
manufactured from
the original PNG file
arg-mapcomplete.png
Location
All these files can
be found in
postcards.zip
the b/w images
used on the reverse
are copyright Sam
Easterby-Smith
Map
The AGOSI printed map is the single most difficult graphical element to produce for a
number of reasons. First, in the pilot run of the course, physical map pieces were produced
as postcards, with the hope that these artefacts would become a collector’s items among the
game players. In order to create postcards of a reasonable quality for gloss printing, the
artwork was created at 300 dpi (as opposed to 72dpi for the web images) – this resulted in
large file sizes for the editable PNG files. Secondly, the individual postcards, when placed
together in one order created a completed map of Manchester (the setting for the original
game), when assembled in another order, the map revealed a watermarked clue to final
puzzle of the game.
Figure 1: Map shown completed
Figure 2: Map showing watermarked solution
Finally, the finished postcard pieces had to be cropped by a commercial printing company
with very little margin for error, so the artwork had to be set up precisely. The map was
created in Fireworks as a 300dpi layered PNG file, from which, non-editable full colour and
black and white JPG files were created for the web challenge site (mapgrid.zip) and high
quality PDF files (postcards.zip) were created for the printed map pieces.
All other artwork was created with the web in mind at 72dpi without the complicated nature of
the map pieces (alignment, multiple presentations and cropping) and was consequently
easier to produce (this is described in the Background section of this document). The table
below describes the different groups that are contained within the file map_complete.png.
Layer name
Filters
Opacity
Description
message
Hidden
coordinates
Coloured corners
(group)
Normal
100
The group contains a message from Viola
See note below
Normal
100
Post It Note
Normal
100
Locator rectangle
1/1 – 3/2
Normal
100
S.C.W.I.D
Multiply
100
Map of
Manchester
Multiply
100
Old Paper
Normal
100
The group contains the 12 coloured circles that give
the clue to the alternate order of map pieces for the
final clue
This is a group and can be broken into its constituent
parts (rectangle, paths etc) and these can be edited
independently if required.
A series of six grouped layers containing the locator
diagrams for the positioning of the individual map
pieces.
The name of the secret organisation! The Multiply
filter has been used a lot to help the layers sit into
the page more (rather than appearing to float on top)
A copy of a map of Manchester was printed from
Google Maps and crudely traced over using a pen
with a variable line width (to mimic a quill or dip pen).
The tracing was scanned and taken into Fireworks
where this layer was converted to sepia tone.
Commands > Creative > Convert to Sepia Tone
See notes on creating old paper from scratch
If these files are being edited to create a brand new ARG that does not follow the story of
pilot (run in Manchester in 2008), to create the watermarked text for the final clue “Hidden
coordinates”, editors will have to establish the GPS coordinates of their location and create a
layer perhaps titled “Hidden coordinates” as suggested above to contain the large text (about
500pt seemed to work well for most fonts). The coordinates need to be typed into two strips,
using a number of appropriate fonts (see Figures 1 and 2 for the completed effect), which
can then be placed as on of the uppermost layer when the Map pieces are reoriented
(Figure 2). Experiment with the opacity and filters (the Interpolation filter was used on the
pilot) to get the desired water mark effect. If the pilot Manchester ARG is being re-run the
files contained in postcards.zip can be reused.
The original postcards featured black and white photographs of student life in Manchester by
local photographer Sam Easterby-Smith on the reverse side please contact him at
http://samscam.co.uk for permission to reuse these.
Diary Pages
A number of old diary pages were produced, which contained the narrative structure of the
underlying story. It was important that these ‘documents’ had a flavour of the 1820s and
looked plausibly distressed and weather-worn (as if they had been stored in an attic for a
century). Each page was created from the same starting image of a blank old page which
was flipped right and left to give the impression of right and left handed journal pages. These
pages were then individually distressed using Fireworks effects and filters so that they did
not look too uniform. The process used for creating the initial old page layer from scratch is
described below.
Figure 3: Typical diary page
Layer name
Filters
Opacity
Description
old page
Normal
100
journal text
Multiply
86
underlines
Normal
100
ink spots
Normal
100
scribble
Multiply
100
“The” smudged
Normal
28
Worn parchment or velum effect diary page with ripped edges,
staining, light damage and foxing1. Instructions how to make a similar
page from scratch can be found in this guide
I used a script font downloaded from a free font site to get this effect
see - diary-page01.jpg. Download and install this or a similar font to
make the PNG file appear like my completed example. The lettering is
a very dark Prussian Blue to give a quill pen effect. The kerning and
distance from base line has been altered in random places to make
the text appear more hand written and irregular
http://www.free-fonts.com/font/adinekirnberg.html
Some scruffy lines, using the grain texture selected, under the text to
give the impression that the diarist had drawn these to help with the
line spacing
Made with the Fireworks brush tool set on hard rounded with a blurred
edge, and a Prussian blue dot was created. The edge of the dot was
distressed slightly using the smudge tool. I duplicated and adapted the
same dot lots of times on various diary pages
This is a real scribble scanned and overlaid on some text to give the
impression that the author has made an error and tried to obliterate
the word rather than crossing it out.
An attempt to make the first word (The) look a bit smudged by
duplicating it, offsetting it slightly and reducing the opacity.
1
http://en.wikipedia.org/wiki/Foxing
Old pages
To create an old page, such as the one used in the diary page above, from scratch:
1. Open a book with a large number of pages in the middle, Scan the book and select
half of the scan so that you have selected a single page and not a double page
spread. If you pick a book with no writing in it you will have less work to do!
2. Bring this scanned image into Fireworks and give it a name.
3. Create a new layer and use the marquee tool to select an area around the text.
4. Fill this selection in using the paint bucket set on gradient fill tool having selected a
mid tone/colour from part of your scanned page without text for the left hand side of
the fill and a selection from the shadow close to the spine for the right hand side of
the fill you may need to play with the settings a bit.
5. Use the smudge tool to take away the harsh edge don’t worry at the moment about
getting it perfectly neat.
6. Rip a piece of plain paper along the edge scan this (against a dark background is
best).
7. Take this scan into Fireworks, create a new layer in your original file and bring the
torn edge in.
8. Position the edge along the right hand side of your page.
9. Use the Multiply blend mode to roughly fade the two layers into each other
10. Create a new layer with a black rectangle in it the same size as the canvas and put
this to the bottom of the stack of layers.
11. Once you have done this you can start nibbling away at the edge of the main page in
a random way, by now you should have something that resembles
12. Select the main page layer and select the burn tool from the tool bar. Use the burn
tool carefully around the edge of the paper to give the impression of browning caused
by exposure to light, put a few random dots on the paper to represent the ‘foxing’ that
often occurs on old pieces of paper. Other effects such as creases and folded down
corner can be added for further realism and customisation.
Any shortcomings in the realism of the paper will probably be hidden once the text,
lines, ink blotches and other blemishes are in place.
Other artefacts
This document does not attempt to describe how each individual artefact was produced, as
much of the work was on a trial-and-error basis and relied on a certain amount of aesthetic
judgement about what looked ‘good enough’. The process for producing the other key
challenge artefacts (e.g. typed letter, blueprint) was essentially the same as the diary pages
but with a bit of thought about the era that the artefact was supposed to have originated from
and the media that it was printed/typed on. Some internet research was carried out on what
an old blueprint and an old typed letter may look like and this was used as reference to help
with authenticity. In the case of the typed letter a specific font (‘Mom’s typewriter’) was
downloaded and used to give the required look and feel.
Figure 4: Typed letter and Flaxobulator blueprint
A certain amount of drawing from scratch was done to create the illustration of the
Flaxobulator and great source of inspiration for weird and wonderful machines came from
Google Patents (www.google.com/patents). The original PNG files with editable layers are
available as zip files. Layers can easily be separated out using Fireworks and, with a little
imagination, the assets can be reworked to suit alternative narratives.
Resources
Royalty free backgrounds/textures etc
http://dezignus.com/category/textures/
http://www.backgroundlabs.com/ (free for educational and personal use only)
Royalty free fonts
http://www.1001freefonts.com/
Old handwriting
http://www.1001freefonts.com/calligraphy-fonts.php
Old typewriters
http://www.1001freefonts.com/typewriter-fonts.php
Handwriting
http://www.1001freefonts.com/handwriting-fonts.php
Fireworks 8 tutorial
http://www.adobe.com/designcenter/fireworks/articles/frw8at_oldpaper_print.html