Mind Map

Moodboard

Digital Interface Mockups

 

Main menu screen for computer interface, simple button layout for easy navigation to the scenes that you need to go to.

 

Fingerprint selection scene for you to pick out the fingerprints that you want to scan and match.

Scanning screen for both the DNA and Fingerprints scanning animations. The images will appear in the bigger boxes whilst the text will appear in the smaller box with name scrolling.

 The DNA evidence selection screen, there will only be one set of DNA that can be scanned.

 

 The bio screen that will be shown if a match has been found. The information will be kept on the screen until the back to menu button has been clicked. 

Project Schedule

Week 1 - Researching interfaces, designs and fonts etc.

Week 2 - Researching interfaces, designs and fonts etc.

Week 3 - Storyboarding interface designs, interactivity between scenes and animations

Week 4 -Learn skills from previous projects, the coding needed to create each of these scenes and animations.

Week 5 - Creating interface designs and other images that are needed.

Week 6 - Coding and creating scenes and animations

Week 7 - Coding and creating scenes and animations

Week 8 - Coding and creating scenes and animations

Week 9 - Checking interactivity between scenes of other people on project, making sure everything links
correctly to others etc.

Week 10 - Checking interactivity between scenes of other people on project, making sure everything links correctly to others etc.

L02

Case Study 1

The above image is a piece of work that I completed as part of a project for Art and Design Advanced Project.

I made use of two pieces of software to create the image with various different features of those software. The characters (bear and bird) in the image was created using Adobe Illustrator, making use of the shapes to create perfect geometrical shapes for the characters. I also used the paint bucket tool in order to colours them. Once I had completed it, I saved it into the SVG format which is commonly used for vector images as it allows them to be resized outside of Illustrator without any loss to quality at all. I also created the text box using illustrator by using a simple box with a black stroke and white fill and then used layers to input a grey box behind it in order to create the effect of a drop shadow. Again, I saved the file as an SVG file to allow me to resize it.

I then used Adobe Photoshop to add all the images together as well as adding new images that I had. I put my background image on the bottom layer so that it would always stay at the bottom and added a small film grain effect to it in order to make it appear brighter than the original picture was. I then imported my bear and bird SVG files into the picture and resized them to make them the correct size. Some of the birds needed to be behind things so I added them to a lower layer in order for them to be behind things such as the bird being behind the bear next to the tree but the bird at the top right behind the tree needed to be behind the background as well as being in front of it. In order to get this effect, I had to use the lasso tool to select a small area of the tree that I wanted the bird to be behind, I then cut that part to another layer on the image. The bird was then resized and placed on a layer above the background but behind the small part that I had cut out leaving it to be slightly hidden behind the tree whilst still being in front of the background.

The final part was to add the text box in with the text over it. The text was simply typed in using the text box feature within Photoshop and then the font and size was changed using the options. The box was then placed on a layer below the text and resized around the text. The final image was then saved for web as a JPEG with full quality as file size was not an issue when being placed on my blog for presentation. The piece in general was simple to create but made use of a lot of different features that were available within the software.

I feel that the software I used was perect for what I needed to do. Illustrator's SVG files allowed me to resize the images within photoshop allowing full flexibility in my image. Photoshop allowed me to pull on the files together and position everything where I needed to.

Case Study 2

The above piece was created by David Weaver and incorporates the use of 3DS Max along with Photoshop, Illustrator and Keyshot to create it.

He started by creating the bottle as a 3D model in Autodesk 3DS Max by making use of the spline tool to create the basic outline for the bottle on a single spline and then applying a lathe modifier which turned the spline into a 360 degree model. The top on the bottle was again created by first making a simple box and the bending it to create a circle and then dragging the boxes out. The label for the bottle was made using a single plane, bending it and making modifications for the shape. All the parts where then welded together and a texture was applied to the bottle and label. The splash at the top was made by dragging out new vertices from the bottle in order to make a liquid shape and a shell modifier was added to it in order to give it thickness and make it look more like juice and again, a texture was added. 

The OBJ file from 3DS Max was imported into Keyshot 2 which is used to create a more high definition looking image as well as adding the plain background colour of purple that you can see. This essentially turned the 3D model into an actual image rather than an object that would not be able to be opened in Adobe Photoshop or Illustrator.

Illustrator was used to create the geometrical shapes and curved lines by making use of brush patterns. In the example of the circular pattern at the top, circles were placed on top of each other in a stack and then made into a brush pattern. The brush pattern was then used in a circular path to create the perfect circle that you can see. The curved lines were used by making basic brush strokes filled with a block colour (for editting later) with added cherrys and leaves using the brush strokes as well for more detail.

The final step in this process was bringing all the images that he had created together into Photoshop. From within Photoshop, he first opened his Keyshot 2 image that he had rendered. Then using the layers, he selected the background and got rid of the it leaving only the bottle that had been rendered. A new background was then created using the gradient tool between the colours of a deep purple and white. Finally, he imported his vector artwork into the image and placed them all behind the bottle. As they were all a block colour, he could simply add gradients to them which gives the picture more depth as well as changing the opacity of a couple of them.

His use of 3DS Max with Photoshop and Illustrator was brilliant, he created something new and unique and made it work very well even though the Autodesk and Adobe products are not compatible so using a software program such as Keyshot 2 helped him achieve what he wanted. The use of illustrator for the artwork was also well used as it gave a flowing and liquid-like feel to the picture which incorporated well with the bottle.

Case Study 3

 

The above image is a graphic created by Alexandra Fomicheva and is created using only Adobe Photoshop CS5. It makes a main use of the 3D feature that is included in photoshop.

She started off by creating the background for the image using the gradient tool (centre mode). The volcano was then created by first creating a texture for the volcano using a black/white gradient on a square and taking away areas using the soft blend tool to create a volcano looking effect with ragged edges. The texture was then created into a 3D mesh using the grayscale on the texture to extrude at the points where it was lighter, Photoshop does this automatically but the soft blending of the greys show it exactly where the extrusion needs to happen. The camera on the model was changed to show it from a side on view and positioned in the centre of the image ready for texturing.

The texturing was done by simply applying it to the the new 3D model. The texture was created by adding a variety of different settings such as illumination and bumps onto the basic chocolate colour as well as adding noise to give it that rough look. The ground was made similary by merging it with the volcano to give it that constant flowing look without making a break between the volcano and the ground.

The final thing that needed to be added to the textures was the lighting, which were strategically placed in order to create enough light to show the shine that something like chocolate would have but not too much that would take away the 

The text was then created by using a path to create an ellipse for the text and then typing the text along that path to ensure that it is curved. From there, the text is broken down and dragged at certain anchor points into drops to give it the look that the text is dripping down, as chocolate would. The text was then selected and made 3D by using the repousse tool which exttrudes the text, similar to the volcano. The holes within the letters needed to be taken out separately by using an option within the repousse tool called hole, which as the name suggests, creates a whole within the image where it needs to be. The final thing to do with the text was to add the texture which is the same as the volcanos.

To create the background volcanoes, the original was simply copied, pasted, rotated and resizedto make each one slightly different from different angles. The volcanoes where placed further in the background to make them look like they were far away.

The splash on the main volcano was created from an image of milk. The milk image was cut around using the magic wand tool and then placed within the main image. A layer mask was then applied to image and a small black brush was used to paint over the small contours of the volcano to make it looked as if the milk was exploding from the volcano.

The 3D tools within Photoshop worked very well with this image, this feature allowed everything in the image to be done within just one program which was different to the previous case study which made use of an actual 3D program. However, the 3D tools within Photoshop are very limited and may not be able to handle more complex objects. She made very good use of the textures within the program and using just a few filters and options, she changed an ordinary brown colour into something that looked rough and more realistic without having to take a real life image of the texture.