Kang's Blog Web Art and Design

Inspiration

2008-05-30T20:24:00.000-07:00

Ideas of creating gif images and background :
http://www.thecooker.com/

The structure of my website is quite similar to this site:
http://dollyoko.thing.net/

Project Progress

2008-05-28T01:20:00.000-07:00

I have developed about ten web pages including the entry page in last few days. Most of them are base on the images that I created and collected in previous researches such as the guy I mentioned in last week’s posts. All the web pages that I created are presenting the concept of identity. When viewers are browsing my website they may need to explore the whole web page because some of the links are hidden in the images.

Sound effects and JavaScript online resource

www.partnersinrhyme.com

http://javascript.internet.com/image-effects/bg-scroller.html

Entry page & Project Progress

2008-05-27T23:12:00.000-07:00

http://web.arch.usyd.edu.au/~kzha7721/AWSS2028/Blog/Pages/

http://web.arch.usyd.edu.au/~kzha7721/AWSS2028/Blog/Pages/circle.html

Content of the website

2008-05-21T19:13:00.000-07:00

By taking the suggestions from this week’s class, I will use my character to mix with the entry page that I created before. Also I am going create images which are based on the character and different perspectives. Each image or perspective will be presented in a separate web page and all the web pages will be linked up.

Sample image:

Week 11

2008-05-20T21:56:00.001-07:00

Finally I decided to use the guy in this photo as my main character. I found this image in last week’s research. He is a Japanese guy but as we can see from the photo this guy have some identity problems. In my personal view he may have a very strong online or virtual identity but normally they do not want face the real world. So I am going to create images regarding to this guy’s identity.

http://eskeptic.worldpress.com/2007/09/29/

Entry Page

2008-05-20T04:10:00.000-07:00

http://web.arch.usyd.edu.au/~kzha7721/AWSS2028/Project/

Otaku research

2008-05-18T21:21:00.000-07:00

http://www.otaku.com/cgi-bin/productlist.asp?newsearch=1

http://www.theotaku.com/

Week 10 class

2008-05-13T22:22:00.000-07:00

Javascript
http://www.geocities.com/ResearchTriangle/8870/images/index.html

Otaku
http://eskeptic.wordpress.com/2007/09/29/

Idea for Website Background

2008-05-13T04:26:00.000-07:00

New ideas & structure

2008-05-11T04:19:00.000-07:00

recreate the website ideas & structure

My new idea is to present the theme “Identity” regarding to a group of people. This group of people have different “personalities” when they are online and in real life. Just like the people in the video that I showed in last week’s post, normally these people have a not very successful life but in their virtual or cartoon world they have different behaviours. They also imagine when they are in their own world they are more strong and powerful as the characters in animation.

Week9

2008-05-06T21:34:00.000-07:00

CSS study

Graphics
http://www.banksy.co.uk/outdoors/horizontal_1.htm

otaku

2008-05-02T20:36:00.000-07:00

Flash Action Script

2008-05-02T19:03:00.001-07:00

In this week the main topic is to use action scripts to control the actions of a flash’s components.

Two aspects of the action scripts we have learnt:
Allow users to move the various components in a flash
Start & stop playing the animations that are involved in a flash

In order to apply the action scripts to the flash we firstly need to assign particular names to different components. When we are applying the action script we use the names, so it can control a particular component.

For the start and stop button, it also need assigned name. The different thing here is the buttons; we can use the button from the library and then apply the action scripts.

Week 8 class

2008-04-29T21:26:00.000-07:00

For the motion in flash :
double click the movie clip to edit
add motion to the clip
drag the edited clip to the frame

We create a new layer for applying action script.

Drag Car & Stars
carMC.onPress = function(){
this.startDrag();
}

starsMC.onRelease = function(){
this.stopDrag();
}

starsMC.onPress = function(){
this.startDrag();
}

carMC.onRelease = function(){
this.stopDrag();
}

Identity
takethisdance.com

New entry - flash

2008-04-25T18:02:00.000-07:00

Click
I used the flash techniques that we learnt in this week's class into the flash entry page.

Week 7 Flash

2008-04-24T20:59:00.000-07:00

This week's class we learnt a very important skill which is flash designing. In my own opinion flash is a very important component of a well designed website. Like the website Scaramouch I introduced in previous post, it has very nice graphic design but the essential part of the website is the flash.

Before taking this class I did not know about flash design very much and I was quite impressed by the design tool. Although we all knew the flash is animation, during the class the Flash design also showed very strong graphic design abilities, such as the lines drawing and pan tool.

Week 7 Flash Action scripts

2008-04-22T22:20:00.000-07:00

stop();
stopAllSounds();

Week 6 Exercise

2008-04-17T17:57:00.001-07:00

Week6 re-thinking the final project

2008-04-16T05:49:00.000-07:00

Week6

Due to the feedbacks that are given in the class and the comments, I started to re-think my content of my website design. My original design idea was to demonstrate the identity by introducing myself and showing the previous works. But now instead of doing this I may change the theme or content more focus on introducing persona.

By reading the provided sources I gained a better understanding of the project.
I will apply web design components such as text and images to visually express the theme identity rather than just introducing my self.

I will keep the entry page design but the structure and the layout of the components that I designed before will be varied.

Week6 class

2008-04-15T21:29:00.000-07:00

Command +Shift+4 Screen Shot

Ideas for final project

2008-04-15T04:28:00.000-07:00

Sketching the Entry page

Click

Week 5

2008-04-10T06:14:00.000-07:00

The techniques that we learnt in this week:

- Layer Masks
- Colour blending

As we learnt in previous classes, we can drag a layer of picture to another directly. By doing this two pictures can be easily combined together. Masking is an advanced way of combining numbers of pictures. Similar as the erasing or transparent options, the mask techniques are used to block or fade certain parts of a picture, therefore generate a proper feeling of different pictures’ combination.

Blending colour is another effective way of creating new design with various pictures. The pictures which are applied the colour blending option could have completely different styles. Not like the layer mask method, the colour blending masks are mainly affect the colour and largely change the tone of the base image.

Week 5

2008-04-08T21:24:00.000-07:00

Webpage size/ tables in web: 950X700

well designed www.ilkilkilk.com

font website ilovetypography.com

image format for web deisgn:
jpg

png 24

image format for logo: gif

About the project “Identity”

2008-04-02T22:21:00.003-07:00

Final Project

I think Identity can be interpreted as personal or group of people’s identity. This group of people could be designers like us who compose and work digitally. In the final design we could introduce people by texts and also present the previous works.

The website Tomato design UK that we talked about is a very good example.

The structure and layout are well organised. The whole website is very clear to viewers and gives a neat feel. It has menu on the left and content on the right which good for viewers to navigate. The menu itself also can fade away after viewers move cursor away.

A sub – menu is integrated for more content.

Use one section to introduce the interpretation of “identity”.

May use flash to presents content such as our works and designs.

webmonkey css

tomato design UK

www.tomato.co.uk

Few basic flash tutorials
http://www.entheosweb.com/Flash/default.asp

About the project “Identity”

2008-04-02T22:21:00.001-07:00

http://artdesignweb.blogspot.com/2008/03/final-project-theme.html

I think Identity can be interpreted as personal or group of people’s identity. This group of people could be designers like us who compose and work digitally. In the final design we could introduce people by texts and also present the previous works.

The website Tomato design UK is a very good example.

The structure and layout are well organised. The whole website is very clear to viewers and gives a neat feel. It has menu on the left and content on the right which good for viewers to navigate. The menu itself also can fade away after viewers move cursor away.

A sub – menu is integrated for more content.

Use one section to introduce the interpretation of “identity”.

May use flash to presents content such as our works and designs.

webmonkey css

tomato design UK

www.tomato.co.uk

Few basic tutorials
http://www.entheosweb.com/Flash/default.asp

Week 4-Exercise 1

2008-04-01T22:41:00.000-07:00

This week’s main object is making a basic web site using provided images. There were five images provided. The main sample image is designed as an entry of a website and has basic all components.

Since we were going to construct 2 web pages and also add links between these two pages, my first move was importing the main image into Photoshop. As we learnt in previous class, using Photoshop we can slice the image into several pieces. I cut the image’s central part out, and then as I planned apply a link later on. To catch viewer’s attention to click the link, I put words “click here” and arrows pointing at the central part.

The second page is based on these small images. In Dreamweaver to arrange these images in a web page, firstly I inserted a table. The table helps to place the images at a proper position. In order to place a link to connect the entry page, I used text “home”. By applying CSS effects, the text styles such as the font colour and background are changed. Finally I added a background colour to whole page.

Through the exercise, I found I still need more practice and experience of using CSS. Besides that I also need more practice to effectively organise a web site in a short time.

Week 3 Photoshop

2008-03-21T17:49:00.001-07:00

Week 3 Photoshop

In this week’s class we learnt several animation technics in Photoshop. Although I knew Photoshop before, I only use it as a graphic design program. I did not notice that the Photoshop has the animation function. It is very handy and we can use it for making simple gif files. The basic way is create numbers of layers and use a layer as a frame to create animation or we can use the Tween function to automatically generate the frames.

The second part of skills were more related to web which are saving images with a proper size and slicing a large images to several pieces. As I mentioned in last post most web sites are based on images or using large images as their background. The images’ size is the factor I did not beware very much before. A simple example is if we use a high quality image in a Blog post, obviously it will slow down the speed of loading the Blog. Slicing an image in Photoshop is also a very good technic for web design. The sliced image can be saved to HTML and then loaded into Dreamweaver and then the further works like adding linking to each piece of the image can be easily done.

Week3

2008-03-18T20:21:00.000-07:00

Week 3

The website that I introduced in this week is called Scaramouch. Basically it is showing a short drama on a flash based web page. I found this website when I was surfing on internet. I accidentally went to this site and the art works or the drawing with nice appeal attracted me.

I think the art works on this site is firstly hand drawn and then using graphic software like Photoshop to present onto internet. On main page of the drama it used a clock to navigate the whole page. It has several chapters on the single page, but the window for showing the drama is still fit on small screen computers. Viewer can move the page from left to right and top to bottom; this is an important feature, because nowadays computers have wide screen is increasing, and the website that can move from left to right is fitted to those wide screens.

Link: scaramouch.org

CSS

2008-03-15T00:02:00.000-07:00

CSS

In this week class the main topic we learnt is CSS (Cascading Style Sheets). Before I take this class I do not really understand the concept of CSS or the code behind it.

In Dreamweaver when we design a web page we can add a CSS sheet to give more styles to the components of the web pages. For example: the text in the web page can be modified to a certain size font or colour. Not only changing the styles of a web page, the advantage of the CSS is we can save the CSS sheet and use for other web page for same styles.

For the web design we also learnt two other good features in Dreamweaver which are the Links and Tables. The Link is very basic and also significant component of a website it links up each web pages. I think using table in web page is also a very important skill. Table helps designer to organise the content of a web page.

Week 2 website

2008-03-11T20:25:00.001-07:00

In this week I had a discussion about information visualization. I found the diagram on “Honda.com.au” is an every effective way of presenting information and it is also a well designed webpage.

http://www.honda.com.au/wps/wcm/connect/internet/honda.com.au/home/buying+tools/help+me+choose/help+me+choose+homepage

The webpage is flash based and has all the car products from Honda. When customers come to this website, the diagram helps them to choose a particular product according to their requirements. On the left hand side there are options which can be selected by customers and the pictures on the right will present certain products.

Week 1 in Web Art and Design

2008-03-04T20:45:00.000-08:00

In this week we browsed a lot well designed website.

Webmonkey.com

Html Cheatsheet

Webmonkey is a very good reference website for html and also other web design skills.