Virtual Environments Project - Haunted House Castle Ride

Yesterday I had my first seminar for our final project in the carousel for DP2 - the virtual environments project (finally!). I have been waiting for this one as it is the pathway I am choosing to progress in at level 2.

Our project involves designing and making a haunted house ride visualisation/animation using 3DS MAX. :) I really like the sound of this project as I am very much into Tim Burton and his work, and think this could influence my work greatly. (I have just paid 200 quid for a book of his work - I must like him a bit, haha.)

Here is a quick moodboard I have produced today to help me come up with ideas in the coming weeks for my piece of animation:

 

As you can tell, Tim Burton and Henry Selick are a large part of the inspiration for this moodboard, as well as other more typical things such as haunted houses themselves, spiders and ghosts. I very much like the dark style of Burton's "The Nightmare Before Christmas" and how it seems to have a blueish fog/hue throughout. I also really like the use of black silhouettes of trees within an animation, I think this adds a spooky vibe to the whole thing. :)

In our seminar, our main objective was to produce a model of the Waverley theatre in 3DS MAX using a template given to us in an assets file. We then had to give this model a doorway and practice adding a track using splines and the sweep modifier.

Here are a couple of screenshots showing what I did in our seminar:

Digital ME project self-evaluation.

Here is the link to my website:

http://www.samanthafreeman.site90.net

                In this project named “Digital ME”, our task was to produce a portfolio website containing at least 5 pages using both HTML and CSS. This portfolio had to show off our work and skills to the best of our ability, as well as to give us the chance of an online presence – a very important factor in finding a career in multimedia.

                Firstly, I made a mood board to explore my general interests, colour and typography I could use within my site later on. I also looked at other people’s websites as inspiration before starting my designs. Another important step towards the beginning of the project was coming up with wireframes for my 5 pages within my website. This is where I came up with my final pages: “Home”, “About Me”, “Gallery”, “Video”, and “Contact” pages. These wireframes also made me realise I wanted to produce a 2 box layout in HTML and CSS – this is where floating was needed to get a right-aligned navigation bar, which I learned independently to get my desired layout.

                After all the layout was pretty much sorted as I had planned it, I started to produce some drawings and illustrations to possibly use within my website layout. For instance, I produced my header and navigation by doing drawings with black pen, then scanning and manipulating them on Photoshop to the correct dimensions and optimised appropriately. I also did this with a scan of squared paper to be used as my main background. I feel the process of optimisation was very important when uploading images onto my pages as it helped greatly with image loading times, which I noticed are pretty reasonable now my website is online.

Optimisation is also something I did when using video within my website. For instance, to experiment with loading times, I converted my latest moving image H.264 file into an MPEG which I uploaded onto Vimeo and embedded within my “Video” page. I feel this piece of video is not as good quality, but still does its intended job of loading quicker than the original very large file.

I came across a small amount of problems whilst working in Dreamweaver, such as previews changing between the software and in a browser window. This meant I had to try to discover what the problem was by myself until I got it right. I found this quite frustrating at times but I think I worked most of my main issues out before my website needed finishing.

Overall, I think the final outcome of my website is quite effective and I think my use of floating in my layout is more successful than it would have been with just a 1 box layout with navigation above the content. I also liked my colour scheme throughout my website, which is mainly why I decided against using different colours on each page like I had originally planned. I also think my mix of images, typography and embedded objects is balanced well throughout the pages and have kept it simple enough for the audience to cope with.

If I did this project again, I think I would spend more time on producing high quality imagery and illustration for the design of my website to enhance the aesthetic experience for the audience. If I did this in the future now my site is online, I feel my portfolio could be more effective at its purpose of attracting possible employers to my work.

Oooh free web hosting, haha.

Have a gander. I think it is finished. I don't care if the domain/URL thing is a bit long winded, at least it works! haha. :D


http://www.samanthafreeman.site90.net


Woo.

Social Networking.

This week in our final interactive media seminar with Shaun we focused on the importance of social networking. We have also looked at how to feature them on the contact page of our website. For instance, we can include simple icons or links to each, or rss feeds or widgets to show updates automatically on my website.


I have also made a Facebook artist page for myself and made a link for this on my Twitter.


Here it is: http://www.facebook.com/pages/Samantha-Freeman/136070829794395

I should also now have a Twitter box somewhere down the right hand side here on my blog!

Here is how my contact page looks.

Started the visual essay now (I think anyway!:D)

Yeah, I after my messing about session on 3ds MAX the other day trying out techniques and shapes to put in my essay, I have now started to produce the environment I think I will use in my final visual essay.

Once again, no lighting or cameras as of yet as I am focussing on producing the environment to a decent standard first! Going well so far to say I have over 2 months yet :D want to get it sorted as soon as poss so I can then start adding practitioners into my finished environment (planes on the walls with bitmap textures of slides I have created on photoshop).

Here is a quick preview of what I have done so far (well this is all of it to be honest! :) )

This should hopefully match the first part of my storyboard! Entrance.

Visual Essay.

I have started to plan my visual essay due inat the end of May as I have realised it could take a long time to produce a 10 minute long piece made mainly of 3D stuff :o In our tutorial this week with Simon, we were asked what ideas we had and what we could do in the next week to move on with theese ideas. I decided to plan some more and do a storyboard or 2 to help me start designing my environment for my essay.

Below are some notes and my final storyboarded idea!

Initial planning and ideas.

Storyboard for my visual essay idea.

Notes on other ideas I came up with.

I have also had a go at producing some quick mock up ideas on 3Ds MAX to see what I can do... So far I have taught myself how to apply textures (bitmap) to planes and objects. For instance, I made a door with a wooden texture I found online, and added image planes into picture frames on the walls. I found this reasonably easy to make so far, just haven't tried adding lighting or camera animations yet to see how it would work. (To be honest, lighting doesn't agree with me at all, I don't understand how to use it yet. I shall ask in my animation seminars coming up towards the end of term!)

Here is what I have done so far. Nothing amazing just tests. :)

Latest on my website... :)

This is my about page. This is nearly complet,e minus the title, which I need to use my laptop for to get the "Impact Label" typeface.

I have added a background of a simple scan of squared paper. I edited it slightly on photoshop then added it as a fixed and centered background. It seems to fill the whole screen on the uni monitors so it should be okay I think!

I am pretty happy with the colour schemes and think the background and content goes together really well. I originally had the idea of changing colour schemes between pages, but I am now thinking this might be too much for the audience and simple might be better.

I am now just adding content and tweaking little things to make it better before my deadline in about 2 weeks times. Will kee[pyou posted ;D

Update on DP2 stuff...

This is the latest screenshot of how my site is looking so far. I spent quite a bit of time on Thursday due to a silly 4 hour gap between sessions just doodling stuff like trees, birds and leaves for the imagery on my site. I took influence from sites I previously posted such as Kate Nash's site using simple scribbly drawings of birds and other natural things. I have also done some illustration/animation similar to this in the past so thought it could fit in well with my style of work.

I have also used the "Impact Label" font I found within my header and nav bar using photoshop and this is a more reliable way of using downloaded fonts within my design. I have been messing about on photoshop with this font making it white when hovered over. This is taking time but it will hopefully be worth it!

More updates when needed...

Optimisation... (:

Image Compression

I can understand this part of the website design quite well as I come from a graphic design background. For instance, I am familiar with references to 150dpi and 300dpi being used in printed graphics. However, in web design, lower resolutions are required. This is mainly due to increased loading times with larger, less compressed image files. The typical resolution required for web is anywhere between 72dpi and 200dpi (although these are the extremes!)

I have experimented with an image I found on Google by searching "300 dpi image". I originally saved it as a jpeg, then resized it to 500 pixels in width and 150dpi, then resaved as jpeg, gif, png, bmp and tiff files. I did this to observe which file types and sizes are most effective for the web. These are my examples.

Original 300dpi image (jpeg)

150dpi compressed jpeg

150dpi compressed gif

150dpi compressed png

From observing these, it is hard to tell the difference at first, however, jpeg images tend to have more colours and detail in them, and are therefore most commonly used in web. gif files are less used now due to their limited colours and detail. png are often used for logos and detailed images, but have the disadvantage of larger file sizes. (TIFF files are not compatible on Blogger, therefore this has helped my decide against using this straight away!)


Video Compression

We have also looked into compression of film and video files for web. This is very important as large film files such as h.264 take a long time to upload onto a host such as Vimeo or Youtube. For example, my last film project's outcome was a file of over 600mb and I had to join Vimeo plus to upload it for my deadline! It also took a very long time to upload to the my account. However, I feel, once it is uploaded, this from of video embedding is the most simple and successful in terms of my portfolio. If I used flash videos it may not run as fast or be lower quality. To increase the loading speed of my film when embedded on my site, I could compress the original film file using Adobe Media Encoder to something such as an avi or mpg file and then reupload to my Vimeo before embedding this file onto my site.

H.264 file (600+mb)

"Ticket" Group Edit from Samantha Freeman on Vimeo.

MPG file (93mb)


"Ticket" compressed film from Samantha Freeman on Vimeo.

At the moment...

I am in my third dreamweaver seminar with Giselle, mainly experimenting with HTML and CSS to make my layout right before I start producing material to upload into my code to make my final design. For example, I have just had a go at using the "float" element of CSS to make my navigation bar float on the the right side of my content div area, rather than being a separate section between my header and content divs. This hopefully fits in well with my previously posted wireframe examples. I think this will be effective when I produce my navigation bar (drawn?) and other content. I hope it will look a lot less "boxy" in this form!

This is not my final design, this is a simple layout + font experiment

I have also created folders and html pages for my other 4+ pages in my portfolio website. I have chosen "About", "Contact", "Gallery", and "Video" pages, in addition to my homepage. I just opened the index.html file and saved as these different file names in their appropriate folders. I will change the content as appropriate for each page. I may also have to create differentr style sheets for each page if I wish to go ahead with my idea to use a different colour scheme/background on each page/section of the site.

My next task is to start producing this material for my site. For example, I will start to sketch designs for my header - using ideas from my initial moodboard. I will also start to do the same for navigation buttons/bar and background images. Once I have done this, I feel the construction of my site using HTML and CSS will not be too time consuming, as I feel I have gained quite a good knowledge in the area so far.