cartersgraphics16-blog

[cartersgraphics16-blog]

Here is the updated and improved navigation bar. I have created a new layer underneath the blue rectangle that contains a yellow rectangle and grouped it with text that reads ‘News’ in blue. So the colours basically flip if a user was to hover over or click on one of the buttons. It was only a small change but effective nonetheless and shows the contrast better.

[cartersgraphics16-blog]

This is my interactive banner and how I created it and I created it on adobe animate.

First, using the rectangle tool, I created a large rectangle and three rectangles that side by side were as long as the large rectangle. On the timeline I separated it into three 80 frame sections. I imported and put a different picture into the large rectangle in each section. I called this layer Articles. Next I created a new layer and named it buttons and put the first picture into the first small rectangle, the second picture into the second small rectangle and the third picture into the third small rectangle. After that I created another new layer and called this one frame indicator. On this layer I created three sections in the timeline that matched the first layer. In the first section I created a rectangle with a red outline that was the same size as the small rectangles I had made earlier. In the first section of the timeline the red outlined rectangle was over the first small picture, in the second section it was over the second small picture and in the third section it was over the third small picture. Next made a new layer and called it logo, then imported my logo and positioned it in the top corner of the large picture (for all frames). After this I converted all three of the small images into symbols and added the click and play code so that when the one of the three symbols it takes you to the respective place in the timeline and plays from there.

[cartersgraphics16-blog]

This is my navigation menu and how I created it. Although it is not interactive and is not required to be, it is possible that they can be animated if it was wanted.

First I created five rectangles that all had the same properties and I coloured them the same navy that I used for the navy in my logo (#293a92). I created four text boxes that all have the same typography which includes the font being monotype corsiva regular at point 36. I also made the text the same yellow that I used for my logo (#fcee21). On Photoshop I struggled to create a magnifying glass symbol so I created it on Adobe Illustrator and imported it onto the Photoshop file. I created the magnifying glass in both navy and yellow which I will explain later on. I saved the file and copied it. On the copy I swapped the colours around and imported the navy magnifying glass. The copy, which is primarily yellow, is what the buttons would look like if they were hovered over using the mouse pointer (if the navigation menu was animated of course).

[cartersgraphics16-blog]

Here is a second version of the logo’s that I created beforehand with minor tweaks that I feel improve them. I have made the football on it smaller after I created a circle slightly larger than ball that was the same colour as the parallel stripes either side of the middle stripe (the one with text on). Although I prefer the logos like this I will ask for my peers to tell me which they prefer and why. I am still unsure which of the colour patterns to go with and I will also ask my peers for their opinions on that too. Again, the current file is an AI file because this means that the logo is scale-able but I will export it as a .jpg if it is to be used on the web. 

[cartersgraphics16-blog]

After a while of drafting my logo I decided upon this design as it is a similar shape to the current logo, however I am still undecided on which of the two colour styles to go with. I originally drafted a sketch on paper then created the design in Adobe Illustrator for a more accurate digital version. I used a couple of layers to create the design. I created most of it on layer 1 but created a oval on the second layer to go over the top of the rectangles underneath. I added a text box and chose the font that I liked from task 8 (Monotype Corsiva) and positioned it high up for the football that I add in later. I then imported it into Photoshop to be able to use the quick selection tool to get rid of the top and bottom of the rectangles sticking out. I then imported it back into Adobe Illustrator to continue editing. I used the football from my first logo idea and copy and pasted it on top of the logo at the bottom.

To conclude, I like this logo more than any of the previous logos I have created as it keeps the shape of the current logo but it has blue and yellow in stripes like the club kit. The current file is an AI file because this means that the logo is scale-able but I will export it as a .jpg if it is to be used on the web.

[cartersgraphics16-blog]

GIF of footballer Cristian Tello and how I created it:

To create this image I used Adobe Photoshop. I created a blank document that is 400px x 400px which is the size of my image. I then copy and pasted my image into layer 1 and duplicated it 5 times (to get 6 layers). I kept layer 1 as the original image, changed the hue on layer 2 to +25 and the hue on layer 3 to +50. I changed the hue of layer layer 4 to +75, hue of layer 5 to +100 and changed the hue of layer 6 to +125. After that I clicked window, timeline then create timeline. After that I made each layer half a second. When I saved it I saved it once as a psd file so I can go back and edit it whenever and saved it again but as a gif that loops forever.