Setting up the blog
To begin I'd like to start with the creation of this blog. I first created the blog on the blogger.com site to showcase my animation production skills in my various classes. Each class or project has a separate page on the blog. This information is all contained on the blogger.com server.Any image I used I made sure were .Jpeg images as the only other options were .gif or png and I did not need transparency for this page.
Any video's that I upload are uploaded a www.youtube.com, simply because it has a better range of video features and compatibilities than the blogger website. This is because youtube is specifically a video based site. I take the HTML code form each video and embed it into the blog. My videos are all .mp4 format with H264 compression as I have found this to have the best quality/file size trade off.
Outcome 1 - Research
On this page of the blog, I will describe the various aspects of the technology behind an image. For this example I will create an image on photoshop and go through the setting I can use to make it online ready.
First off, I will create a new file in photoshop.
I will first select the web preset because I will be uploading this image for internet viewing.
I can also select the image size here, depending on the purpose of the image. Since I don't need an overly huge file, I won't be selecting a larger file size. This will just lead to unnecessary file sizes which will cause the image to upload very slowly whenever the page is accessed online.
Since I will be uploading the file online, I will make sure the resolution or dots per inch is set to 72. If I wanted to print out the image I would set it to at least 300dpi for the best quality.
Now as I am not printing the file, I want it to be an RGB image for web. If I wanted to print my image later, I could then set the image to CMYK which will optimise the colours for printing.
As seen below, I have created a simple image in Photoshop. I used a gradient inside the circle.
I should probably save the file here. To do this I access, File, Save as.
In the Save As pop up box shown below, I can select from a variety of file options. For example, I can save the file as a .Jpeg file, the standard file type for still images or even as a .Png file and others if I would like to add an alpha channel.
I can covert the image to grayscale here and drop all the colour from the image.
I can convert the image to a Gif image if I want to export for web. This image is 2bit colour, made up of only two colours. This drastically reduces the file size. But it's not very interesting. Unless this is particular the style I am looking for, I think I will bump up the amount of colours a bit.
Below is an image that uses 4 colours. This is an 4bit image.
In the image I created below. I have opted to save the image as a 256 colour Gif file. This will keep the image quality high enough to be displayed online. Gif files also have the added layer of transparency, unlike a standard jpeg image which does not. This is handy if I do not want a big white border around my coloured circle, I can add transparency and delete the white from the image.
Compression Report
I created a short animation of a cube moving past the camera
in 3DS Max 2012 and changed the export settings in adobe Premiere CS5.5 to see
what different results could be achieved in regards to quality and compression.
I first exported my file as a H264 encoded .mp4 file. This
video file was very good quality with little colour loss and pixilation whilst
having a small file size of about 20mb.
I exported the file as a .mov file, also encoded as H264
compression and had very similar results although when I exported it as a .mov
without this compression, the file size increased drastically.
As an .avi file, the file size became very large, over 100
megabytes, and there was no marked improvement on video quality. In fact, the
.avi format seemed to lose video quality when compared to the other formats I
have tried.
I tried exporting the animation finally as a flash video and
it was almost unwatchable. The file was heavily pixelated and very difficult to
watch, although the file size was quite low. I also noticed that the blue
colour of the box was very muted in comparison to the original uncompressed
animation file.
I can conclude that the more compressed a video file is, the
smaller the file size but in turn the video quality takes a heavy hit too.
Activity 2 - Evaluation
For this activity, I will explore the differences between printed and digital media and the methods used to create them.
I will cover colour theory, display systems, file management, network technologies.
Printed media has a different way of presenting colour than digital media. Whilst digital media consists of a combination of coloured light that is projected onto the screen, printed media is confined to inks, so the colour range is not as extensive. On any printed document, the document should be printed as CMYK colour, which utilises inks. It is not recommended to print an image as RGB as it is not possible to print out red green and blue light so must be converted to a CMYK image. This will cause quality degradation in most cases. So we are confined to inks, which has a lesser colour range than is possible to view in the digital medium. In the digital world, we can even change the brightness and contrast on our computer monitors which alters the colours shown on screen. It is important to regularly calibrate the colours on a computer to make sure it is the correct colours on display.
The display system for printed media is paper and ink. A printed image is composed of dots per inch. This can be any number of dots per inch but is generally 300 dpi or higher for the best quality to be maintained. Digital media is not composed of dots on paper though. For a digital image to appear on screen, it needs to be composed either of individual pixels in a grid structure (A bitmap) or as a vector image which is composed of lines between plotted points.
Once we have our completed image, we need to think about our storage options. Online files can be stored digitally in a server for easy download and display. Offline digital files can be stored via hard-drives, flash-drives, and even discs. On the other hand if we have printed media, storage is important to keep all those bits of paper together. I'd buy a paperclip...
But which files do we use? There are hundreds of different file types to choose from, so we must do our research to make sure we have the right filetype for the job. If I wanted to upload an image to use as a banner for a website for example, I know I need some sort of image file. Do I want a very small file size? I may want to think about using a .Gif image. Or if quality is what I am after, I could use a .Jpeg file. Maybe I want a high quality file that can also deal with transparency, if so .TIFF or .PNG may be the ideal file types.
There are many options to choose from both for digital and printed media in regards to file types and file management.
Now I can upload my file to the internet for display if am dealing in digital media. Image files can be shared to blogs such as this one, social media sites, websites. In fact, pretty much anywhere online images can be found. If I am uploading a video. I may upload to video sharing sites such as Vimeo or Youtube. This is where it is a good idea to make sure the dimensions of the video are correct for displaying it online as strange pixel combinations can result in faulty display. I usually opt for 16:9 widescreen with square pixels if I am making a widescreen video, although the widescreen rectangular pixel aspect ratio is better depending on the image size.
Now that my final product is online, it can be shared across the world for all to see.
Thumbnails and Storyboards
Before I create my final artifact, I needed to create some thumbnails and storyboards. I did this to give me a plan of action for when I get down to animating.
Thumbnails
Storyboards
No comments:
Post a Comment