Evaluation

Before this project I already had an extensive knowledge of Adobe Photoshop, this knowledge enabled me to quickly pick up Adobe Image-Ready and create attention grabbing animations for both this course and real design work such as web banners and advertisements. For my final project I did not use Adobe Indesign at all, i stuck with Photoshop, which was a smart idea in terms of that I was sticking with what i already knew and therefore was confident that i could produce work to a high standard, however I would like to get to know Indesign and be at the same level with that program as I am with Photoshop.

The project I learnt the most from was the PostSecret web banner animation, as even though i had used keyframe animation techniques before in other programmes, Image-Ready was completely new to me and I managed to pick it up fairly quickly which was very satisfying.

In terms of file formats my previous knowledge helped alot when it came to choosing which format would be appropriate to work in or save/export as during the different projects within Digital Graphics, things that i have learnt are how how save using the 'optimise for...' feature within Photoshop which is very helpful so that i can see a direct comparison between the native file which may be a .JPEG for example if you're dealing with a photograph and thats what the camera was shooting in (although obviously shooting in .RAW is preferable!).

My most succsesful project within this digital graphics course has to be the 'My Fake Band' project. I am fairly pleased with the end results of my animated web banner and CD cover designs. However, although I have tried to use the given time to complete the projects as efficiently as possible, I feel that if I had more time to put into pre-production so that i could plan out and make more drafts first, the final result would have been of much higher quality and had more impact on the viewer.

The project that I feel I could improve the most if given a second chance is the PostSecret web banner, it is very basic, isn't attention grabbing and certainly doesn't look proffessional however, creating it allowed me to get used to Image-Ready for the first time and pick up the skills that i utilised in the later projects.

The Skills that i have learnt, practised and refined have already proven helpfull for the freelancing design work that I have done for various bands, an event hosted by a pub, Advertisement leaflets, brochures and gift vouchers as well as photoshoots for all of which Photoshop was used and in some cases Adobe Image-Ready. I am determined to further my knowledge with skills and techniques found within digital graphics so that i produce products of a higher quality and value everytime.

File Format

Initially when you create a new Photoshop project, you are working in .PSD format which stands for Photoshop Data File. This Data file format allows you to work with multiple layers unlike more basic file formats such as Bitmap images which are literally just maps of the individual pixels, all on one layer, which form the image. After finishing all the design work within Photoshop, when it comes to saving it is then that you must choose the file format. There are so many different file formats available, the most widely used ones being .JPEGS (Joint Photographics Experts Group) and .BMP (Bitmap Picture). For use on the web, it is good to set the resolution of your file to 72dpi (dots per inch) because this resolution allows for quick loading upon webpages. However if you're formatted file is intended to be printed, a higher resolution of 300dpi or above is preferred as this is the minimal dpi most printers can print at without the actual dots being visible to the human eye. For my own products one of them was an animated web banner so the file format was .GIF at a resolution of around 72dpi. My other product was a CD front cover so it was saved as a high resolution .JPEG image at a resolution of 350dpi to ensure its quality was high when it came to printing it.

 

 This is an example of a real animated .GIF web banner that I produced for a musicians web site. I remastered the logo by using the pen tool to seperate different parts of it onto different layers and then used the paint bucket tool to the fill coulours. The background was a simple, fairly plain gradient fill as not to distract from the other graphic content as well as to aid with composition.

 

This is another example of digitally created advertisement that was produced for another musician that he used to publicise himself, and it was a success! the resoloution was 350dpi as to garuntee very high print quality. They were produced as business cards. there are multiple layer effects, filter effects and the use of custom brushes too.

Here is an example of how it would look in practice on a commercial website on the net. you can see in this example that the colours in the design fit in perfectly with the house stlye of the website which seems involve lots of red borders.

I started off with a black fill for the background using the paint bucket tool. Then I changed the layer effects so that it had an inner glow of the colour red.

Then I used the horizontal type mask tool and chose the font I wanted and wrote the band name. After then altering the tracking of the text (the amount of spacing between individual characters) using the character window, I used a custom gradient fill for which I chose the colours myself.

Then after duplicating the layer and applying a motion blur to one of them at a horizontal angle, I hid the original text layer by pressing the eye icon on the layer.

I then duplicated this layer by right clicking and pressing duplicate or by dragging the layer down over the 'new layer' icon located at the bottom of the layers palette and releasing the click. Then I could begin keyframing and make it look like they are whizzing off to the from the centre side.

Then I made them whizz back together using the keyframe animation.

Once the two blurred versions of the layer 'ASPERSION' finished whizzing back together I hid the layers so only the un-blurred layer 'ASPERSION' was visible.

Then i created a layer of text with various layer effects after rasterizing the type such as gradient overlay, stroke, and outer glow and keyframed it as though it was coming towards the viewer, and then sliding up off of the screen after pausing for a while. then because by this time the screen is blank, the animation can loop over again.

Design Process for CD Singl Cover

I first started off by creating multiple layers consisting of 2 different custom gradient fills, a layer effect which was inner shadow by double clicking on the layer i wanted to apply the effexct to, and also I applied the 'craqueleure' effect which can be found amongst other texturizer filters.



















Next I duplicated this layer, and completely desaturated it by pressing Shift + CTRL + U before then increasing the contrast by going into Image > Adjustments > Brightness/Contrast.

By this stage i had imorted an image of a guy doing a flip, i used the selection tool to extract him and place him on my cd cover .PSD project file. Then, i made yet another selection around him, however i was working on the layer which is the saturated, coloured, gradient fill... Then i pressed Ctrl Shift + 'i' to invert selection and i then hit delete so i was left with the coloured gradient accurately over the image of the guy doing a flip which is on a seperate layer. Next i simply changed the layer type of the coloured gradient from Normal to Linear Dodge. I then duplicated this layer, and gave it a gaussian blur with a radius of 4.8 pixels, then dropped the opacity on this layer to 33 % to achieve a glowing look. I did all of this because the band that the CD cover is for is one that stands out and i think this element of the CD cover also stands out which represents them well with the eye poppingly bright colours.

Finally, to achieve this i added a text layer mask and created a gradient fill within it, i then duplicated the layer, used gaussian blur and knocked the opacity down a little bit to make it look glowing, then i merged the two layers and added layer styled such as drop shadow, outer glow and inner shadow. after this i added a craquelur via the texturizer filter to give it texture. For the red glowing line that links the Single na,e and the picture together, i used the pen tool, selected the paint brush tool and adjusted it to the settings that i wanted, then i went back onto the pen tool, right clicked, and selected stroke path which resulted in red line with simulated pen pressure to make in thin out towards each end. finaly i added an outer glow of the colour red to the layer on which the line created by the pen tool was kept to make it seem as though it were glowing which helps it to stand out. Finally i used the polygonal lasso tool to erase parts of this line that went infront of objects where i wanted it to look as if it was going behind.

This animation is made up of 65 frames. However, its resolution is 300 dots per inch meaning that it is not ideal for web use as this increases the file size dramatically, which increases the time it takes for a web browser to load up the animation. For use on the web, the ideal resolution would be 72dpi allowing the web page to load it up far quicker because it would decrease the file size. 72dpi has been the standard resolution for some years as at that resolution the quality of the graphic does not apear to differ on screens set at different resolutions.