Photoshop To After Effects

Used together, Photoshop and After Effects are practically the ultimate team to show moving ideas easily and quickly.

Here's an image I created in Photoshop:
By importing the PSD of this image into After Effects, I could manipulate each layer individually and creating a 3D environment like this:




and this:

More 3D Development

Here is a rough idea on creating a website in a semi 3D environment. This was created in Flash and so you can experience more of the interactivity of it and how it'll work. I'll be adding more development on this soon.

http://www.zshare.net/flash/673451085be1f337/

Cube Idea Development

A couple of posts ago I was looking at the idea of how you could navigate through space and get to information by using a cube shape. I had some visuals made on Photoshop, but made a better demonstration using After Effects:



You can see that information can be obtained from inside and outside the cube. By moving the mouse you can navigate round the cube, clicking on parts to zoom in on the information.

Using After Effects For Visualisation

Today we were shown some tips on how using Adobe After Effects can help show our ideas for interfaces, especially ones that are 3D and move.

Here are some clips of me getting to grips with some basic functions in After Effects:






Rough 3D environment:




I found After Effects to be a very useful tool and will be showing more ideas with it in following posts.

Navigating Through Space

This week we discussed how we navigate through space to get to information on the web and with applications for the iPhone etc. We discovered that most sites use metaphors of things we're familiar with. For example, Tabs are used as menus, which we are used to seeing in folders. Using metaphors connects the design with the audience much easier because they're something we're comfortable with.

Here's a list of the most common metaphors used:
Tabs
Corridor
Room
Elevator
Filing Cabinet
Desk Top
Page Curl
Cork Board
A Landscape
Windows
Paper

Good designs have come from mixing two types of metaphors together.

Here are some of my own ideas using these metaphors, set for a more 3D environment:


To be more noticed these days as a designer, you'd have to be more creative and come up with something new, like a new metaphor, but is there really a metaphor out there that hasn't been used and can be relevant for displaying information? Also, if these current metaphors have worked well for so long, why change them? By coming up with something new, it's not really a new metaphor because it's new and no-one's seen it before, so how will people take to using something so new? It seems that a lot of experimenting and testing will need to be done to find a new user-friendly design.

The Future Of 3D In Media Design

It seems that after almost exhausting the uses of the X and Y axis, we are trying to be more creative with the Z axis, especially with websites, applications and other software. We've used simple drop shadows for some time, but nothing that shows a lot of depth. Here are some links to sites that I think show where the future of design is heading on the 3D front:

http://www.whitevoid.com/portfolio.html
http://www.playsmart.jp/
http://www.ecsw.pl/
http://directmotorola.com/hellomoto/razr2/razr2makingof
http://microsites.audi.co.uk/microsites/RS6/index.html#/home/
http://www.nike.com/jumpman23/xx3/
http://www.the-neighbourhood.com/
http://www.cleoag.ru/labs/flex/parkseasons/
http://www.ecodazoo.com/

Looking at these gives me ideas on what i should experiment with in the future, or how i could make these designs even better.

The key attributes that make things appear 3D are:
Shadows
Reflections
Sound
Focus
Object sizes
Distances
Shape
Angles
Colour

Lecture notes: