Thursday, 17 May 2012
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.
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.
Wednesday, 9 May 2012
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
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.
Wednesday, 7 March 2012
L01
Pixel Theory
RGB Colour - Used for digital art and any work that is designed to be shown on a screen. The colours used in RGB is Red, Green and Blue. Those colours are then used to create a broad spectrum of other colours.
CMYK Colour - Used for any work that is going to be printed as it contains the colours used in printing. It contains Cyan, Magenta, Yellow and Black
Grayscale Colour - Contains colours of Black, White and all the shades of grey inbetween. Used as an effect more than anything else.
Lab Colour - Contains more colours than the human eye can comprehend.
File Compression
When saving images on photoshop, you have different options that you can use. The above example is JPEG images which is one of the most used file types for saving images. The JPEG is a compressed picture format and photoshop gives you different qualities that can you save. On the top left we can see the original image with a file size of 1.37mb which is rather large for a single image. The top right is a JPEG preview with a high quality, the image size has been reduced to 26.6kb and the time it takes to create the image is 10 seconds. The bottom previews are of a medium and low quality and as the quality goes down, as does the size of the file as well as the time it takes to create the file.
Layers
One of the advanced features of Adobe Photoshop is the use of layers. Layers allow you to add multiple images on top of each other and manipulate them separately. This is useful for design work as it allows you to add text and images together but able to change them without disturbing the other. As en example, you have an image on one layer and text on another, you can add effects to the image such as blurring without making the text blurred. Layers at the top are put to the top of all the images and vice versa, and they can be arranged whenever you need, to change the position of the images. The layers also contain a list of all the effects that you have so you can keep an eye on what each layer contains.
Filters
Another major feature of Photoshop is the filters. They are used for adding certain effects to your images or text within photoshop. These effects can be used in conjuction with the layer feature in order to add different effects to different layers giving a very unique feel to your image. The filters in photoshop are among some of the best in any image editting software and is the main reason that photoshop has become so vastly popular over the years. Within each of the filters that are more effects to gain the exact kind of blur (as an example) that you want.
Layers
Very similar to photoshop, premiere pro contains layers that are used to add different video and audio on separate tracks allowing you a lot more flexibility over your video. You can layer the video and audio on top of each other and put effects on each of the video's individually without disturbing the other videos. This technique is very useful in video editting, especially for adding text for title and credit sequences. Aside from what was mentioned above, you can also add images into your videos. You can hide and lock any of your layers to ensure that you do not edit layers that you did not want to so that you can align everything perfectly.
File Formats
Just like images, video can be stored in many different file formats, all with different properties and quality. Some of the most common are MPEG, AVI and MP4. MPEG is most commonly used for DVD's and television signals as it can handle streams from both audio and video. MPEG generally has lossy audio and video so is not used for high definition but was used at a time before HD came about. AVI was developed my Microsoft and stands for Audio Video Interleave and again can handle both audio and video simultaneously, with multiple streams from either. MP4 is commonly used for streaming over the internet and can be used to store video and audio but also images and subtitles as well which makes it very useful.
Effects
Very similar to filters in Adobe Photoshop, different effects can be applied to videos to give the video a uniqueness or add something that was perhaps not available when the video was filmed. Premiere Pro also comes with an addon called After Effects which adds a huge variety of different effects that you can add really complex effects such as gunshot wounds and blood splatter. There are also come simpler effects that can be added such as chroma key which allows you to add images or other videos behind a video using greenscreen technology. This can be useful for adding exotic locations that you perhaps could not have filmed. So effects are very useful in adding things that you could not have done during the filming process.
A monitor is made up of individual pixels. A pixel is a small dot that changes colour and when put together with other pixels, creates the image that you can see on the screen. The more pixels that you have on a monitor, the clearer and sharper the image is. This is called Screen Resolution.
Adobe Photoshop
Computer Colour Theory
RGB Colour - Used for digital art and any work that is designed to be shown on a screen. The colours used in RGB is Red, Green and Blue. Those colours are then used to create a broad spectrum of other colours.
CMYK Colour - Used for any work that is going to be printed as it contains the colours used in printing. It contains Cyan, Magenta, Yellow and Black
Grayscale Colour - Contains colours of Black, White and all the shades of grey inbetween. Used as an effect more than anything else.
Lab Colour - Contains more colours than the human eye can comprehend.
File Compression
Layers
One of the advanced features of Adobe Photoshop is the use of layers. Layers allow you to add multiple images on top of each other and manipulate them separately. This is useful for design work as it allows you to add text and images together but able to change them without disturbing the other. As en example, you have an image on one layer and text on another, you can add effects to the image such as blurring without making the text blurred. Layers at the top are put to the top of all the images and vice versa, and they can be arranged whenever you need, to change the position of the images. The layers also contain a list of all the effects that you have so you can keep an eye on what each layer contains.
FiltersAnother major feature of Photoshop is the filters. They are used for adding certain effects to your images or text within photoshop. These effects can be used in conjuction with the layer feature in order to add different effects to different layers giving a very unique feel to your image. The filters in photoshop are among some of the best in any image editting software and is the main reason that photoshop has become so vastly popular over the years. Within each of the filters that are more effects to gain the exact kind of blur (as an example) that you want.
Premiere Pro
Layers
File Formats
Just like images, video can be stored in many different file formats, all with different properties and quality. Some of the most common are MPEG, AVI and MP4. MPEG is most commonly used for DVD's and television signals as it can handle streams from both audio and video. MPEG generally has lossy audio and video so is not used for high definition but was used at a time before HD came about. AVI was developed my Microsoft and stands for Audio Video Interleave and again can handle both audio and video simultaneously, with multiple streams from either. MP4 is commonly used for streaming over the internet and can be used to store video and audio but also images and subtitles as well which makes it very useful.
Effects
Very similar to filters in Adobe Photoshop, different effects can be applied to videos to give the video a uniqueness or add something that was perhaps not available when the video was filmed. Premiere Pro also comes with an addon called After Effects which adds a huge variety of different effects that you can add really complex effects such as gunshot wounds and blood splatter. There are also come simpler effects that can be added such as chroma key which allows you to add images or other videos behind a video using greenscreen technology. This can be useful for adding exotic locations that you perhaps could not have filmed. So effects are very useful in adding things that you could not have done during the filming process.
Adobe Flash
Keyframes
Adobe Flash is used for the creation of animations amongst other things and keyframes are extremely important when it comes to anything that it does. The timeline works on a series of frames that when put together and played will creation a moving animation. Keyframes are added when changes are made on the timeline such as adding an image or movie clip into your animation, or moving something across the screen using a tween. When keystrokes are added to the timeline, the add a small dot to indicate that that frame is a keystroke and usually has a change in the animation. Keyframes when added will also copy what was in the previous frame in order for you to make small changes to it which is useful for animations as you can make tiny changes to it.
Tweens
File Formats
Flash animations can be exported as common formats such as MPEG and AVI but also as a SWF file with is specific to flash files. SWF stands for ShockWave Flash, ShockWave being the name of the player that allows it to be used on websites and your computer. SWF allows the flash file to be displayed as an animated vector graphic with audio, video and actionscript, which will start automatically on a website and allow full interactivity making it the most commonly used for online browser games or "flash games" as it is known. The other formats are not used very often and will only allow you to see animations of audio and video with no interactivity of any kind at all.
ActionScript
Within Adobe Flash, it has it's own programming language which allows users to create complex and interactive games or movies. The programming language makes use of JavaScript for the majority of it's more complex features but ActionScript ties in with the timelines and tweens of flash itself meaning that the entire game does not need to be made using only ActionScript but all the animations can be handled using Flash's functions.
Tweens are very useful in animation building. You use then along with keyframes to create motion within your animation at the click on a button. For example, you could have an image in which you want to move across the screen, you can do this easily by placing where it starts, adding a keyframe and placing where you want the image to finish. You then just add a tween to the frames in between and flash will do the rest for you. The movement will be as long as how many frames that the image moves through, for example a 25fps animation with a tween over 25 frames would take a second to complete. There are different tweens from straight forward movement to rotation and scaling of an image.
Flash animations can be exported as common formats such as MPEG and AVI but also as a SWF file with is specific to flash files. SWF stands for ShockWave Flash, ShockWave being the name of the player that allows it to be used on websites and your computer. SWF allows the flash file to be displayed as an animated vector graphic with audio, video and actionscript, which will start automatically on a website and allow full interactivity making it the most commonly used for online browser games or "flash games" as it is known. The other formats are not used very often and will only allow you to see animations of audio and video with no interactivity of any kind at all.
ActionScript
Within Adobe Flash, it has it's own programming language which allows users to create complex and interactive games or movies. The programming language makes use of JavaScript for the majority of it's more complex features but ActionScript ties in with the timelines and tweens of flash itself meaning that the entire game does not need to be made using only ActionScript but all the animations can be handled using Flash's functions.
Subscribe to:
Posts (Atom)