3D parallax using just CSS and HTML

The excellent Román Cortés has made brilliant and creative use of layered images to create an effective parallax visual using just HTML and CSS.

The image used, from the painting Las Meninas by Diego Velázquez, requires no javascript nor Flash, works across all current browsers, and it validates! Nice to see code & creativity as a single entity.

See it here.

Posted by: curt Date: January 14th, 2010
Categ: 2D Design, Miscellany, Tutorials Comments: No Comments »

 

Manchester companies are using 3D more and more!

We’re finding that Manchester companies are using 3D more and more to promote themselves online. And why not? 3D’s a great way to showcase products, visualise properties, and create engaging interactivity on what could otherwise be a bland company website. Manchester companies seem to be more open minded about the use of 3D on their websites and often come to us looking for creative ideas and ways to enhance their website and communicate their product more effectively. We’re seeing a big increase in enquiries about 3D product configurators, and interactive visualisations - it seems like Manchester companies are really leading the way in the use of 3D on their websites, and long may it continue!

Posted by: Nina Date: March 2nd, 2009
Categ: 3D Design, Advertising, Architectural Visualisation, Digital Marketing, Interactive 3D Comments: No Comments »

 

Content Aware Scaling

CAS - Content Aware Scaling
Seam Carving, or Liquid Rescale is a new procedure for 2D digital image scaling. I say new, but it’s over a year old now. I mention it because it’s being shipped - right now as I type - with Photoshop CS4. It uses some snazzy algorithms to determine whereabouts a ’seam’ (or path) can be defined which reaches from one side of the image to the other (like the students used to attempt to do with the question-hexagons on ITV’s Blockbusters) i.e. top to bottom or left to right.
It actually supports diagonal seams too. But that didn’t fit with my Blockbusters metaphor.

“I’ll have a ‘low importance’ seam please, Bob”
The algorithm chooses a path ‘of low importance’. In other words a path right across the image which you’d be unlikely to miss if it wasn’t there (in the case of reducing the scale), or unlikely to notice if it was duplicated and blended (in the case of increasing the scale).

Squash/stretch
Traditional image scaling uses a simple algorithm to uniformly remove or duplicate straight lines of pixels, vertically or horizontally, from an image resulting in squashing or stretching of the image which we’re all familiar with. Seam Carving handles the scaling in a totally different way.

Classic shot of Hong Kong IslandLose that sky
For example, if you look at this classic daytime shot of Hong Kong Island’s Central District taken from Kowloon (the night shot is more classic, I know), with its bar-graph of skyscrapers filling the harbour front and the blue sky above… well, if you were to scale that down vertically using CAS, the process would recognise (as would most humans) that the sky was pretty much all blue with low variation in detail, whereas the waterfront buildings and bay contains much more detail and variation, therefore the sky section of the image would be percieved as being of ‘low importance’ and scaling down would result in areas of the sky being dropped and the new seams subtly blended.

“Squeeze up, you on the edge..”
Whereas traditional scaling results in the old squash/stretch issue, which almost always looks wrong if not intentional, the application of this new process gives us a higher-brow issue: the adjustment of the composition of the image i.e. the distance between objects being varied. Imagine taking a considered photograph, with nicely balanced and well-thought content, only to find that someone had shuffled everything closer together like a junior school assembly photograph.
Considering that CAS is now shipping as a feature in Adobe Photoshop CS4, I’m sure we’ll see all sorts of results like this from daft to clever, and awful to entertaining. Either way, it’s a great tool, and a clever approach to a problem that was generally taken for granted.

Certain types of images aren’t really suitable for CAS, such as high-density-detail images (a satellite photograph of a city, or a crowd scene), some are ideal as you’ll see on this video (Flash 8 req)

Seam Carving was first presented at Siggraph 2007 by Shai Avidan and Ariel Shamir

Posted by: curt Date: October 21st, 2008
Categ: 2D Design, General News Comments: 2 Comments »

 

Digital dusters

At last, a chance to update the site!

We’ve been rather busy with some exciting projects for a while now (one of which is particularly cool - more on that soon) so you may have noticed that we’ve allowed some dust to settle on the site. Now we’ve got some time, we’ll be getting our digital dusters out and adding new artwork and articles over the next couple of weeks so look out.

We’ll be looking at the glossy, reflective world of Apple’s current graphic styling to see how it looks when 2.5D (pseudo-3D) meets its maker: 3D. We’ll also be looking at an eye-popping way to transform digital images which goes by the name of Content Aware Image Resizing (or Seam Carving as it’s known to its friends) and we’ll be adding a couple of walkthrough tutorials for beginners - probably a Maya NURBS basics to begin with, and a thorough start-to-finish project for newcomers to Adobe Photoshop Elements.

We’ll also be doing some general housework throughout the site, so if you hear any hammering or drilling sounds, you’ll know what it is…

Posted by: curt Date: September 30th, 2008
Categ: General News, Mitooshi News Comments: 2 Comments »

 

3D Manchester

I’m keen to know more about Manchester in Second Life. I have now visited three times since it was built last year and it has been fairly empty on each occasion. Apparently the aim of the project was to promote the Manchester brand and raise awareness of the city. I wonder if URBIS and the MDDA consider it to be a success.

Urbis in Second LifeThere’s been a lot of talk about 3D virtual worlds being the future of the internet and I think there’s some truth in that although I’m not sure it’s quite that clear cut. Also, just because 3D virtual worlds are the future, I’m not convinced the virtual world in question is Second Life in its current state.

When I log in to Second Life I am always disappointed by the chunkiness of the experience, it’s frustrating at best and computer crashing at worst. I have been told I need a better computer to experience Second Life properly but my computer meets all the SL recommended system requirements and I have a healthy 8mb broadband connection so there must be plenty of people who have a similar experience to me. Read more

Posted by: Nina Date: July 31st, 2008
Categ: Advertising, Digital Marketing, Interactive 3D, Virtual Worlds Comments: No Comments »