website progress

after several attempts to make my lady bugs 'bob', i decided to make them shiver a few times while moving across the page. i wanted to introduce some interactive feature to communicate with the user. hence i converted the lady bug into a button and applied two different layers - over and down. when the mouse moves over the bug, its pattern will turn green, while when the mouse hits down, the bug will will squished. i made these in photoshop.

over

hit:

text bobbing

http://exit261.com/dreadgrove

this is part of the design direction i am aiming at. Making the text 'bob' will (hopefully) make the space seem more alive.

i think it is also a good idea to place flash movie of my studio design for this semester in the background. it would  fully reflect the personal side of the site and make the site seem more interesting.

******folder structure: assets, pages*******

further ideas

i would also like to make the words seem floating on the page, and i can do this by using flash.

http://www.henrikknudsen.com/

this site is quite inspirational, its a personal of henrikk nudsen, showing his collection of work. the mouse roll over is interesting but kind of hard to follow, since the roll over fades slowly.

Concept 2

Concept 2:

HIERARCHY + TRANSPARENCY => PERSONAL space reflecting my inspirations from various architects through out time since starting the architecture course. it would be a personal space, with hidden links directing the buildings the architects have designed.



I uses colours to represent hiearchy, that is the time of the architect in chronological order:

the acient world
Renaissance
19th Century
20th century
21st century

i overlap the words to represent transparency.

some possible javascripts to use (I use to use this site for javascripting my own web page YEARRRSS ago when i enjoyed designing websites i still do and its all coming back to me now :D) :


Title: Expanding Text Images
Contributor: Indraswara (indraswara@yahoo.com)
Contributor URL: http://askindra.cjb.net
Details: 3.83 KB * Uploaded January 29 2003
Description: This script creates a message using expanding text images. It's as simple as creating your own text images to say whatever you need.

Title: Fading Dynamic Content
Contributor: Premshree Pillai (premshree@hotmail.com)
Contributor URL: http://www.qiksearch.com
Details: 3.04 KB * Uploaded May 2 2002
Description: This JavaScript creates a slide-show effect displaying different content dynamically. The content fades in while being displayed. Works in MSIE.

Title: JSWaveText
Contributor: Advanced Effect Maker
Contributor URL: http://www.effectmaker.com
Details: 0.60 KB * Uploaded April 22 2004
Description: This script will make your text string form a wave and then scroll within the defined area.

http://javascript.internet.com/text-effects/in-marquee-links.html

some notes from class..

some notes from class..

Jpeg : lossy compession for non vector / rasterised files/ will compress files/ problem: lossy compression – everytime soyu save file, it loses pixels = change to psd then convert back to jpeg

Gif : flat non complex colour files / vectors / logos / simple vector cartooning / can support a transparent b’ground/ flat colors (2 -3 colors)/ can’t do much with them hence conver to RGB file

Png : newer format that can deal with photos or graphics/ fireworks/ graphic + web

Psd : native photoshop layered file format – for working images – not the web

Tiff : a print image format/ print work only

Eps : format generally that best supports and keeps vector graphics. Save Cad file to eps to make it interesting.

www.banksy.com

documen size relat dto print work only,

work with pixel!

Photoshop tutorial:

Click ‘F’ key to change file with grey background, click f again for black background.

Shift+Tab

Save as HTML and images

Webiste + image

Dreamweaver:

Open html file with dreamweaver, page will loead and the sliced selecion can be changed into a wbepage hence allows you to ad links.

Modify convert tables to layers, page will faint lines that was sliced in photoshop. Images can be laced very easily and accurately/ iwht more control.

Layer similar to div tags

Delete the slices/ white spaces to allow easy movement of the other slices

something i found on lynda.com about the structure of a flash site.

week 8 notes

stop frame animation: single movement of animated object

tweeny speeds up process of animation

scrabbing =  dragging the black dot in timebar above the STAGE

subselection tool = selects parts of the object

free transform tool =  reshape, rotate etc

gradient =  crate gradient lines

pen tool =  drawing any shape you  like (linear lines onley, flash= vector program)

 button symbol =  down mouse

frame  =  twelth/fourteen frame 

fla = photoshop file 

swf =  exported movie

action scripting