Friday, 9 April 2010

Final Practical Work (Music Video, Website & Digipack)

Below is a record of all the FINAL PRACTICAL PIECES I have produced throughout the A2 Course. Their required explanations and evaluations can be seen earlier on in the blog, along with all the other necessary theory.

MUSIC VIDEO



WEBSITE


Click here to see the 'live', interactive version of our website,
_________________

DIGIPACK

Front Cover

Interior Tray Insert

CD Tray Insert

Back Cover

Production Designs (Digipack Templates)


Tuesday, 6 April 2010

The Final Judgement

Now that our video is complete with a very successful audience judgment, we want to send the video to Sony (who gave us formal legal permission to use the music) to hopefully hear back their professional and unbiased opinion of our product. This way, we gain a wider outlook on our video, and understand the spectrum of audiences our video pleases. We have also asked Sony to pass the video on to Imogen Heap herself to view, as having the celebrity status...she is rather difficult to contact on a personal basis. We included the video on DVD in a Digipack of ours with a professional DVD menu constructed using Apple Software.

Screen Capture of DVD Menu using Apple Software (i-DVD):

The menu features the spinning ballerina in the background (moving video image), snippet of track on a loop playing in low-volume and mini preview screen showing muted excerpts of the video (when mini-screen is clicked on using the remote, the video automatically begins). Details such as our name, school and candidate numbers are featured on the side of the menu for ownership and copyright reasons. Using similar editorial features like in Adobe Premiere Pro 2.0, we were able to construct this menu with ease and technical knowledge of how to make it universally compatible for computers and DVD players. We feel this menu was a necessary feature to include before the video is shown as it creates a professional impression and will entice Sony to watch our DVD with more interest. We will also be submitting this DVD version to the OCR examining board for the same reasons.

Below is an image of the entire package we sent to Sony, including a hardback Digipack with our official covers:

OFFICIAL LETTER:

(Click image to enlarge)

Based on our knowledge from the last letter we sent to Sony, it will take 5-6 weeks for a reply. This means, if we do receive some form of feedback from them, the evidence will not be seen on our blogs as this part of the coursework would have already been submitted.

Constructing the Official 'A-ha!' Website

We began the production of our website using Macromedia Fireworks. Due to it's interface having very similar features to Adobe Photoshop CS2 (the software used to create our digipack), Josh and I felt confident to begin the process using this particular programme. We wanted our Music Promo, Digipack and Website to all be associated media products, and we have achieved this by using similar imagery (gothic and eerie), colour scheme (red, black and white) and angularity (dancing and forest) throughout each of their aesthetic appearances. By linking the media in this manner, we are creating continuity between all our products so consumers would be able to easily relate each product and gain familiarity with our style.

Stage 1

We first imported our main promotional image (that we used for the front Digipack cover), as our main background feature. We increased its size and cropped the outer edges using the selection tools, to suit the dimensions of our website so the webpage would be compatible for all internet browsers. We then decided to place the image slightly off-centre so the hair would ultimately take the centre of the home page so the embedded video could merge into this space after exporting into Dreamweaver. The final process in this stage was inserting the title of our homepage below the central image, which we edited using the font and colouring tools.


Stage 2

We then inserted our other digipack artwork and shrunk their size to create symbols using the vector tools (inspired from 'The White Stripes' website). By placing these symbols (later to become hyperlink buttons) underneath the area of the video, our consumers will be able to easily notice their presence on the web page, enabling easier navigation. We inserted each symbol using the import and transfer tool that allowed free alignment position on the web-page. By using the symbols in this manner, the consumers are able to notice their relevance to our video-narrative and create their own association between the two products. We created hyperlink sections around each symbol using the 'Web tools' (polygon cutout tool), which enabled us to transform them into buttons after exporting. So our consumers could easily identify where each symbol would take them on our website, we inserted text boxes above and below the images. This way, we are enabling an easier experience of navigation.

Stage 3

We imported a raw web image of the 'Sony BMG Music' logo to place at the bottom of our webpage, as this is commonly seen on professional music websites to advertise the artist's music label/producer. We decreased it's opacity depth so it's appearance would tie in with rest of our colour scheme. We then placed the 'Facebook' and 'Myspace' pictorial links to Imogen Heap's profiles either side the logo, giving our consumers an area where they can browse through other interfaces that promote the product (as well as our website), which ultimately spreads awareness of our merchandise.

Stage 4

Having investigated further, and analysing our research in more depth, we realised we needed to insert simpler buttons above our embedded video so our consumers could easily access popular areas of the website like the 'login' database for members. By including this type of membership on our website, this automatically creates a sense of loyalty for the consumers, providing them with a more personal experience with advantages such as emails, promotional offers and exclusive track previews.

Stage 5

After further customisation of colour scheme and arranging the composition of buttons using the BITMAP tools, we were able to isolate the necessary sections of our website that would later become areas of hyperlinks. At this stage we were able to export the page into Macromedia Dreamweaver to create the HTML in our website and modify the nature of buttons (rollover behaviour). For the buttons above the video, we altered the HTML text colour coding so when the consumer rolls over this area with their cursor, they are able to easily notice the buttons change of colour (to white) for their required navigation:






We then modified the hyperlink for each isolated (polygon cut-out) section of the page, so when clicked on...the web-page will re-direct our consumers to the appropriate area of the website.




Stage 6

As the final stage, we embedded our final video into the cut-out section (over the hair) by copying the code from the YouTube interface, into the embedding option within Dreamweaver. We were able to move the video around this cut-out to our required area, so it's alignment was symmetrical with the composition of our buttons and symbols. Dealing with embedding is a tricky task which was made far easier using the viewing and preview tools within the Dreamweaver interface. After further HTML encoding our website was ready for exporting to become a final website compatible for all internet browsers. As a final tweak, we centred the entire web-page and coloured the background black so the red and white features brightly stood out. Below is the final outcome and a hyperlink to our official website:


________________________

Research & Planning for Website


After several lessons of experimentation with Macromedia Software, we began to research professional websites to inspire us and instigate us with ideas for our own. Primarily we wanted to keep with the strict colour scheme of red, white and black which has been the most dominant colour pallet used throughout the Music Promo and Digipack (ancillary text). Another consideration was the composition of the websites and how their layout could influence the arrangement of our website with our own images and text. We also focused on the technique they used to navigate their consumers around the website, as the ease of this element determines the pleasure of viewers and their experience on the website. Being educated in the 'flash' plugin software, we were also looking out for original use of HTML and how it informs the consumers. Below are websites we researched using the popular web-search facility 'Google' (pictured above):

THE PRODIGY

Features that inspired us:
1. The animation of 'The Prodigy' title and it's use of 'Flash'
2.Gothic appearance with angular background imagery

DAUGHTRY

Features that inspired us:
1. Central picture of band promoting their appearance
2. Member login areas

RED MUSIC ONLINE

Features that inspired us:
1. The composition of buttons relative to images
2. Asymmetrical layout

THE WHITE STRIPES WEBSITE

Features that inspired us:
1. Boldness of buttons and their positions
2. Embedded video from YouTube promoting the band and their video
3. The positioning of the title

PAGE 2

Features that inspired us:
1. Strong use of red
2. Use of symbols as buttons to navigate through the website


After analysing our research, we came up with a basic outline of the composition of our website using Microsoft Word:

Exploring Macromedia


Using our IT Media Studies lessons we explored and learnt how to use Macromedia Fireworks & Macromedia Dreamworks (the software used to create our website). After navigating through all the various tools and features of the programmes, we began to understand how to construct a website, and the necessary HTML involved in the process. We developed these skills by emulating and creating our own duplicated versions of current, established websites:



Original Website (www.lilyallenremixed.com) U+2192.svg Our adapted, duplicated version











Below is a diagram explaining the range of tools and modifications we have explored to create our website:


Tuesday, 30 March 2010

Our Digipack & Experimenting


To create our digipacks, our school has provided us with the software Adobe Photoshop CS2. Using this programme, we will be able to create near-proffesional CD covers with numerous options on how to create, edit, enhance and manipulate our raw images. Joshua is very experienced in using this programme, which gave us a head-start on creating our digipack. In the past he has created many sample album artworks which have been featured on popular celebrity websites like PerezHilton.com and Play.com:



Using Adobe CS2


We wanted to first experiment with layering images, and finding the right balance between their opacity. We first imported 3 images into the programme of 2 performers back to back, the forest and another performer in silhouette (Captured on set on the days of filming). By tweaking their opacity and their layer ordering as well as the airbrushing tool to soften their skin, we were left with this initial image:


As a first attempt, we were pleased with this image, but we realised it had no strong correlation to our video and didn't have enough relevance. As well as this, it doesn't follow our colour scheme and looks a little too amateur and tacky. Therefore we moved onto working with more sophisticated effects such as cutting and razoring images, isolating certain colours and duplicating their appearance.

From our second photoshoot, we were left with several images that we were very pleased with. We used the Sony Cybershot 10.1 megapixel DSC-T77 digital camera to capture the images with:





This camera has a highly sophisticated MACRO setting that enables extreme close ups with a 10 million mega-pixel lens quality. With this ability, Josh and I were able to take near-proffesional quality photos from a variety of unusual angles whilst maintaining the high quality. The SL flash setting also allowed a boost of colour which gave us further editing options during the photoshop process. We used red-head lighting, and above head floods that gave us a three-dimensional quality to the pictures, enhancing the performers facial features by creating shadows and different shades of colours.

The Editing Process
Having a vast selection of pictures to edit and manipulate in Adobe Photoshop CS2, we had a wide range of artwork we were able to produce as well as the front and back cover. We began with the photo below and over the course of about 30 minutes produced our first front cover for the Digipack:


Original Photo U+2192.svg Edited Digipack cover



We also merged an image of the Treetop forest location as a faded layer behind the hair to introduce some narrative to the cover. We airbrushed the face to an un-natural level so we could have the 'supernatural correlation' to the video. We isolated her lips using a razor and magic wand tool and enhanced the redness so her lips stand out in equal balance with the text. Having the rest of the image in different shades of black and white, it augments the lips and provides a focal point to the image exaggerating their importance to the video. We also manipulated her eye pupils to pure black, which gives the performer a lack of identity which is a strong motif used throughout the video. In this particular image we have concentrated on Laura Mulvey's theory of the 'Male Gaze' by exhibiting the performer in a near-sexual manner with a smirk on her face. The hair hiding half her face also adds to the mysterious quality of the image and provides a slightly sensual aspect.



Editing the Digipack on the Adobe Photoshop CS2 Software

After deliberation, Josh and I again had seconds thoughts about this front cover. We felt that there was a lack of movement portrayed in the image, and being that dance and fast paced action was a very strong element to our video, we felt that this cover was lacking that sense of rapid movement. Therefore we moved onto looking at another image from the photo shoot that illustrates a lot of movement and interesting dynamic:

Original Photo U+2192.svg Edited Digipack cover


This image took us another 30 minutes to produce and we were much happier with this outcome. We feel it portrays our promo as a more exciting, original and mysterious music video than the usual pop-video performance. It has a stronger dynamic with the hair being thrown back mid-motion, and with the performers eyes being shut. We also feel it has more of a supernatural edge than our previous cover and represents our colour scheme, dance-theme and paranormal quality in a much simpler and artistic form. We created 3 replicas of the image over one another and slightly layered them using the opacity tweak. This use of '3' represents our 3 performers and the 3 colour schemes throughout the video. With the red figure being the most dominant in the image, we feel this is eye catching, creates a strong impact, appears eerie and represents the theme of blood in our video. We altered the natural colouring using the RGB colour chart and a colour spectrum scale. We also removed the vest strap on her shoulder as we felt this appeared tacky and hindered the mystic quality of the image. By also increasing the sharpness of the image, it creates a more defined illustration and a clearer, more detailed image to look at. We faded her body from elbow downwards using the gradient tool as well as the text to again enhance the supernatural quality of the image and for simple composition and aesthetic reasons.To create the bold black background, we razored the outline of the figure and imported the cut-out onto a plain black background which helps the boldness of the red, white and black colours stand out. We added a shine to the hair using the 'magic wand' and 'transform tool' which adds to the sense of motion. We chose this style of 'haunted' text as we wanted to embellish our ghostly theme and immediately hint to an audience that the music is bizarre and mysterious.

For our back cover, we created 3 choices as we were not sure whether to use a performer, or a prop image. Below are the three outcomes.


Original Photo U+2192.svg Edited Digipack cover


To create this image, we used the same method as above but did not duplicate the the figure. We imported the Sony BMG logo from Wikipedia and altered it's opacity depth to make it appear more part of the image. Combining this logo with a barcode, we were able to make this image appear near-proffesional as these elements are always included on real retail products. By saturating the image into a black and white state, the title of the digipack 'A-ha!' stands out and is easily remembered by a consumer.

Original Photo U+2192.svg Edited Digipack cover


Again, we used the same editing method to isolate the image against a black background but this time cropped the original image to a further zoomed state. We kept the colour relatively natural as its normal colouring is in-fact quite eerie to begin with. We photographed the ballerina from this angle as it exhibits the face at an authoritative level which is a strong motif used throughout our video. Having learnt this technique during the A/S course in the analysis of TV drama, I feel my skills have developed to judge the angles at which the photographs should be captured at. As a final judgement we felt this image was too 'busy' and didn't match the continuity of our other artwork's simplicity.

However, we felt the image still had a lot of unusual potential, so we layered the rusty black and white ballerina over the face using the layer and opacity tool, and we were left with the image on the left. By keeping the ballerina face obscured by the top layer image, it interests the audience to observe the image to a further extent to try and interpret what they're seeing. This is important to catch consumer attention in this way as it will further their interest of the product and make them want to purchase it more. I decided based on my own opinion that I preferred this cover most as it is more artistically arranged, appears striking and unusual, and provides the consumers with a strong sense of narrative. To further the professionalism of the image, I added the Sony BMG legal statement below the 'A-ha!' text as all real retail products have this lawful requirement as part of the copyright protection act.



Below is a Digipack template of our FRONT AND BACK (EXTERNAL) cover of how it would look during production:


After our front and back covers were completed, we then moved on to the designing of the interior inner folds and CD tray insert. Below are the images in their pre and post-editing states:

Original Photo U+2192.svg Edited Digipack CD tray


This is our final CD tray insert. We used the same method of editing as the front cover and additionally whitened the teeth using the exposure and invert tool. We have chosen this to be placed behind the CD as it signifies the lips used throughout our video and is a striking, effective image. It also emulates the title of the song 'A-ha!' as if the mouth is mid-motion singing this lyric.

Original Photo U+2192.svg Edited Digipack insert


Original Photo U+2192.svg Edited Digipack insert


For the above two inserts, we used the exact same editing technique of isolating the nails and saturating them with a red paint bucket tool and inverting the rest of the image as black and white. The hand and torso are very dominant features used throughout our video and symbolise strong climax's. Their appearance is also relatively gothic and relates to the eeriness of German Expressionism imagery.

Original Photo U+2192.svg Edited Digipack insert


For our final piece of artwork, we have again concentrated on the importance of the music box ballerina in our video. This time, we have made it appear as if a torch is shining over the ballerina like in the video, and slightly isolated the lips as red and the rest of the image is inverted as black and white. With this image we have created a feeling of isolation and it has a relatively disturbing appearance enhancing our intention to make our consumers feel on edge.

Below are the final templates for the INTERIOR of our Digipack:


Interior edition 1


Interior edition 2


Interior edition 3


Below is a picture of our actual digipack in a hardback plastic jewel case: