UCSB art 22 | winter2012 | 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 web-based archive or image bank: '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.

For our next meeting: start an 'image-bank' [or -archive, or -database] by gathering 10 high-resolution images of your choice. Think of a tag or keyword for each image that isn't just a label [the word 'tree' is redundant given a recognizable image of a tree; whereas the word 'breath' would point out a not so obvious function of a tree]. Manipulate and enhance your images and words displaying your new-found Photoshop skills; enhance and add to your image-bank through the next 10 weeks gradually building a complex web of interconnected images and concepts.

ten images
[shot, scanned, or appropriated and altered using Photoshop];

ten word-graphics
[using the Photoshop type-tool for 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 layered work],

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

Photoshop CS* video tutorials [lynda.com]

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 and tags. Incorporate all of collected material into a web archive with a well designed interface for intuitive navigation, or 'browsing' - a complex of trajectories of paths 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

HTML tags to know:

<html>, <head>, <body>, <title>,
<a> hyperlink [external & internal],
<p>, <br / >, <img>, <div>, <span>,
<iframe>, <form>, <input>

NOTE: we will emphasize CSS styling of fonts - not the deprecated <font> tag; the <center> tag is also deprecated - use CSS positioning

CSS tutorial

CSS styling to know:

font: -size, -family, -weight, color [note: not 'font-color']
<a> link styling: 'link', 'visited', 'hover', 'active'
CSS 'class' & 'id'
< div> & <span> elements with CSS styling
CSS positioning of HTML elements, height & width,
opacity, z-index; visibility etc.
background: -color, -image, -repeat, -position etc.
border: -style, -weight, -width, -color etc.