Posts Tagged ‘Interactive’
Project – RKGO
I’ve just finished a project that I had been working on for about 4 weeks on and off, It’s a sample web page site for a made-up musical instrument company.
I wanted to create a site that was dynamic and interactive. My main focus was initially on the design of the website and a product brochure to follow, but I quickly realized I didn’t have any materials to work on and I didn’t want to use any existing product images due to copyright infringement, so I decided to use the 3D skills I have and quickly came up with a mock-up design in 3Ds Max, this took just over a day to model and render.
So after the RKHOS was born; I had something to build on and I used the rendered images to create a simple flash banner and the 3D model to create a short video ad. Premiere was used to edit the clips together and the audio was added in using a simulated piano software, since I don’t own a usb midi keyboard, I had to resort using the mouse to play the notes; hence the poorly played 1 note tunes.
For the brochure I used InDesign, I went for a vibrant dynamic look to add a bit more character and appeal to the pages. I used paragraph styles and columns to keep it clean and consistent looking. I exported it in pdf and swf format with the interactive page curl tool which is a cool feature in InDesign.
The design of the site had to be simple to navigate with all the information easily accessible but also include some sort of visual impact to give a nice user experience.
I had been learning a bit of JQuery in the early stages of the site design and found it to be a powerful yet fairly easy tool to use. I applied what I had learnt and used it on most of the dynamic parts of the site such as the faded transitions of the images and the tab menu buttons.
I used the fairly new HTML5 video and audio player functions to implement the media files into the site. First I had to convert my media files into the right compatible format for HTML5, for this I used Miro Video Converter which is a great simple to use open-source software.
I kept all the media files at an optimal file size to create a quick and smooth viewing experience with as little loading time as possible. The total file size for all the images is under 200KB which was well optimized but the problem I had was the video file is over 1MB which wasn’t ideal. So I did some research and found the preload=”none” function which tells it to start the video download only once it’s been activated.
The web page is quite media-rich in content and my aim had been to get it under 1mb in page size. I’ve tested the page loading site using some of the web tool sites and it calculated the web page size to be 532KB on one reading and 720KB on the other which was what I had hoped for and it’s all helped by the small preloading code.
I’ve tested the site on 5 of the main browsers and surprisingly I didn’t encounter any major compatibility issues, the JQuery script worked fine on all of the browsers which was great. I also checked on the older IE and it worked near perfect on all versions even on IE 6. HTML5 video and audio doesn’t work on IE 8 and lower but I have added an alternative hyperlink to the media files which shows up on the old versions. The drop down menu on the navigation also doesn’t work but the solution would be to create a separate page for each main category link.
I’m pleased with the final piece, it involved applying some of the things I had learnt in the past and also a few new things like HTML5 and JQuery which I think I’ll be using a lot more often now.
Panorama – City of Nottingham [180°]
Here’s an interactive panoramic image of the city of Nottingham viewed from the top of Nottingham castle on a nice sunny day. The panorama is made up of 9 photos spanning 180° of surrounding views in Nottingham.
The camera used in this image was a Canon EOS 20D dSLR. Since I did not have a tripod around on the day, I used the horizon as a reference point to keep all the photos roughly at an even level throughout.
In the photomerge tool of Photoshop, I’ve chosen the cylindrical option as it created the best stitching result. I was really surprised with the outcome of the panoramic image as the merging on the photos were faultless and no adjustments were needed.
What I like about this panorama is the different type of buildings it has on either sides, the left side having older factory buildings and on the right side there’s newer commercial buildings. I particularly like the contrast of the orange tone on the left and the grey tone on the right.
The large white bulding at the centre of the image and the forest on the horizon produces a central focal point and creates some nice interest to the piece.
Panorama – Computer Room 2 [360°]
Here is the second interactive panoramic image showing the other computer room situated in the Bonington building. The same method were used to create both panoramic pieces.
The trickiest part in the making of these panoramas was joining the ends together. The lighting on either ends were different and a seam can be seen, they also overlapped each other and so the duplicate area had to be cropped.
To create a seamless 360° panorama I’ve copied one of the ends and pasted it on the other side, I’ve then added a layer mask and applied a horizontal black and white gradient on the mask to gradually fade the top layer with the background.
Panorama – Computer Room 1 [360°]
Here is the first in a series of interactive panoramic images that I have recently done. This particular panorama shows one of the computer room situated in the Bonington building of Nottingham Trent university.
The original photos were taken a while back during my first year at university. I used an old Sony 3 megapixels cybershot camera and a tripod.
On the day of shooting, I placed the camera at the centre of the room and took a set of 26 photos with 10-15° degrees rotation intervals, making sure the photos were overlapping each other.
My first attempt at stitching the photos together using Photoshop did not produce a good result and the photos were left unused for a few years. It is only recent that I’ve made an another attempt using a newer version of Photoshop with its Automated photomerge and this achieved a much better result with only a few correction needed to be made.
In some parts of the panoramic image where 2 photos are merged together there were some alignment that were off, to correct the problem I’ve copied and pasted the certain areas and nudged them back to the right place and erased the surrounding edges.
After using Photoshop I’ve imported the final image to Pano2vr which outputs the image into an interactive flash format with its own control parameters.