Archive for the ‘3D’ Category

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.

Tags: , , , , , , , , .

Flash – Moving Still Photos

I’ve decided to try and create an effect that I had seen before in documentaries programmes where still photos contain a moving image of a subject.

I used 2 old photos that I had taken from gigs many years ago, the first photo is of the band Travis and the second photo is of the band Ash.

I think moving still images works best with performance type of photos as it’s more dynamic and the movement makes the image come more alive. I carefully chosen photos that had a subject in front and a background that had some interest.

I began the piece by creating a layer mask in Photoshop to mask out the band members and putting them into a new layer that’s separate from the background.

Content Aware was used to roughly fill in the background layer hidden behind the band members as some of these area will be seen when the photos starts moving, I also used the healing brush and stamp tool to further clean up the background.

Click here to see the final separate images.

After getting the images all separated, I imported them into flash to create the moving animation. The animation could be done in any other software such as Premiere, Indesign or even Powerpoint.

The concept is to increase each image size of the separate parts and have them moving at an opposite direction to each other, making it look like the camera is moving.

I’m pleased with the final result, It does seem to bring static photos to life.

Tags: , , .

    Comments Off on Flash – Moving Still Photos

Game – Modular Pipes

Game Modular Pipes Example
Modular Pipes

Above is an example of some modular pipes placed together to create a small pipework scene.

Game Modular Pipes Pieces
Large Pipes Set – 1742 tris, Medium Pipes Set – 1038 tris, Small Pipes Set – 1084 tris

The modular pipes are made out of 3 sets of pipes in different sizes; with some small variation to them. The textures are split for each set which gives me the option of using the set separately.

I initially modeled the main pieces first and then decided to include the other extra parts to give me more choice when putting them together.

Tags: .

Game – Prop Set #6

Game Light Props
Light Bulb – 186 tris, Fluorescent Tube Light – 154 tris

To create the glow in the lights I made a light map and applied it in the Xiolul shader and tweaked with the multiplier setting, I also applied self illumination with the same map.

Game Electric Props
Grey Electrical Box – 40 tris, White Electrical Box – 26 tris, Meter Box – 10 tris, Wires – 6+ tris

Here’s a few models of electrical boxes that can be placed to add details on walls.

Game Vent
Vent – 10 tris

The vent is made from a simple box model and is completely flat.

Tags: .

    Comments Off on Game – Prop Set #6

Game – Prop Set #5

Game Beer Crate
Beer Crate – 52 tris each, Beer Bottle – 104 tris each

To create the texture of the crate I used a reference image of some wooden fences and took out each plank, scaled it down and align them next to each other.

The beer bottle still requires a translucent material to give a nice realistic glass appearance.

Game Pallet
Pallet – 228 tris

This pallet is a simple model made out of several box geometries. The wood texture is made from 4 variation of wooden planks.

Game Wooden Crate
Wooden Crate – 92 tris

The wooden texture was made using a reference image of another wooden fence.

I added the metal plates on the corners to give some different material properties and interests, this helps prevent the model from being all made out of wood which would of looked a bit dull.

Tags: .