UCSB art 22 | winter2008 | beginners

digital imaging, the digital archive, navigation & interface design:
- Photoshop; file-type; resolution; web-prep; web maintenance;HTML; CSS; FTP; etc.

projects ONE & TWO intro [beginners]

a small web-based archive: '5 words, 5 images' - 'database logic' & interaction design

Interface and Interaction Design is all-important for media - like a web archive - that users can navigate. The user interface for such media is more of a terrain map than the familiar guided-tour through space & time of conventional narrative media - mapping the territory to be explored without prescribing an individual experience or linear 'path'. Conventional narrative media are intended as a linear experience. Digital Media empower a user with some control of their experience.

Read: Database as Symbolic Form - Lev Manovich
[Manovich posits Database as the logical successor to Narrative as the 'symbolic order' of the Computer Age. He cites web and disk space as manifestations of the database, while computer game 'narratives' are ordered by algorithms. "The projection of these two fundamental parts of computer software — and of the computer's unique ontology — onto the cultural sphere" is Manovich's point. "The computerization of Society" is carried through not just materially, but cognitively - in human perceptions and responses.]

also [remember]: The Death of the Author - Roland Barthes
["...the birth of the reader must be at the cost of the death of the Author".]

Joachim Schmidt | art+com | tripwired | info-mapping | visual thesaurus

Context Breeder | IdeaLine | Metadata | algorithmic art

 

project ONE [see above for intro etc.]

The first assignment involves image-prep for web display with Adobe Photoshop. It's also about developing your Photoshop skills, so be playful and adventurous with your image manipulation.

This will involve you producing ten images:

five images of objects
[shot, scanned, or appropriated and altered using Photoshop];

five images of words
[using Photoshop-styled text].

These images and words can be anything, but should not be repetitive
[no words that are just 'labels' for the images - each graphic should have it's own discreet identity].

Think 'graphical and conceptual impact'. Think 'montage' not 'narrative'.
[Later these images will be accessed randomly by a user through your website interface.
Digital interface-design is usually 'non-linear'.]

Start with good high resolution images
['file/save' or 'file/save as' a '____.psd' file to retain your high-res work],

resize and compress them appropriately for web
['file/save for web' as a '____.jpg', '____.gif', or '____.png' file. More later.]

Photoshop CS2 video tutorials I [lynda.com]

Photoshop CS2 video tutorials II [VTC]

 

project TWO [see above for intro etc.]

Using HTML/CSS and bbEdit [or a similar text-editor of your choice - see below] prepare web-pages that include your images. Incorporate all of collected material into a web archive with a well designed interface for intuitive navigation, or 'browsing' - a complex of trajectories or 'narratives' for a visitor to experience the archive.

[option] produce lists of characteristics for each element of your archive, make links between them
- don't be afraid to be incongruent or daring in your associations [look again at Visual Thesaurus]
[option] produce a diagrammatic map of associations between elements of your archive
[option] provide metadata - data about YOUR data

At home on PCs use the free jEdit, on Macs use jEdit or textwrangler [also free], to write and upload your pages with sFTP [secure File Transfer Protocol].

On campus in the Mac lab use BBEdit and the uWeb method to upload.

Use these resources to learn [at least] the content listed below:

 

HTML tutorial
<head>, <body>, <title>,
<a> hyperlink [external & internal],
<p>, <h1>, <h2> etc.
<img>, <iframe>, <div>, <span>
we will emphasize CSS styling of fonts - not the depracated <font> tag

 

 

 

 

 

 

CSS tutorial
font sizes, family, colors, weight
<a> link styling ['visited', 'hover', 'active']
'class' & 'id'
< div> & <span> elements with CSS styling
positioning of elements, height & width
background, -color, -image, border, etc.