Daniel Crush

Graphics Diary

Aim – 3rd November 2017

The first thing that I must do today is check my IPL, put my ID badge on and turn my mobile
phone off. I then aim to complete at least half of my logo in Photoshop by the end of the
lesson.

Evidence

The first thing that I did was setting up the canvas size for my logo. I decided to go with
1024x1024 pixels for the height and width so that the logo is of good quality and doesn’t
become pixelated. I also went with a resolution of 72. Additionally, I also made sure that the
colour mode was RGB and that the background colour was set to white. I then clicked
‘Create’.

Next, I need to create the basic shapes

for the logo. I did this by going over to
the toolbar on the left-hand side, and
selecting the rectangle. I then dragged
this onto the canvas, creating the right
shape that I liked. I started off creating
the ‘I’ for the logo. I kept doing this until
I created the basic shape of the logo.
Daniel Crush

This is what the logo now looks like. As you

can see I have created the basic outline for
the ‘I’, ‘F’ and ‘G’. The hollow circle on around
the outside of the letters are part of the ‘G’
which still needs some work doing to it. I
created this hollow circle by first clicking and
holding on the rectangle previously used and
this brought up more shapes. From here I
selected the circle.

After selecting the circle, I then dragged my curser onto the page and created the circle to
the size that I wanted. To get the hollow section in the middle I went back over to the
toolbar and selected the ‘Elliptical Marquee Tool’. I
then dragged this over the circle that I have already
created and pressed the ‘Delete’ key. This removed
the inner section of the circle.

Here I selected the ‘Pen Tool’ and went

around the area that I wanted removing. I
included this gap as this is what I planned my
logo to look like. I then right clicked on my
mouse and clicked ‘Make Selection’. From
there I didn’t change any of the settings and
clicked ‘Ok’.
Daniel Crush

After clicking ‘Ok’ on the ‘Make Selection’ box,

this dotted line appeared and I pressed
‘Delete’, and it removed the hollow circle and
part of the ‘F’. I did this until I had the basic
shape of the logo that I had designed on my
storyboard.

This is what the basic shape of the logo now looks like after using the pen tool. I now need
to add the sides of the controller to the logo.

Next, I imported an image of an Xbox controller from the

internet, into Photoshop. I used this as a guide for the
controller that is going to be placed on my logo.
Daniel Crush

As you can see I am using the pen tool to go around half of

the Xbox controller, as I can duplicate and flip it to create the
other side. Once I had the basic outline, I then right clicked
with my mouse, using the pen tool and then selected ‘Fill
Path’. Once I clicked this, the ‘Fill Path’ box appeared and I
clicked ‘Ok’.

As you can see from the screenshot, I have

successfully duplicated the Xbox controller. I then
went over to ‘Edit’ and then ‘Transform’ and clicked
‘Flip Horizontal’.
Daniel Crush

After duplicating the left side of the Xbox

controller, I resized and positioned them so
that they matched my storyboards. I also
changed the opacity of the controller sides
whilst I am working on them so that I can
see them with the ‘IFG’ logo. If they were in
a solid black colour, I wouldn’t be able to
see them as they would blend in with the
‘IFG’.

Learnt

Today I learnt how to use a range of tools in Photoshop, including the pen tool, and
removing and adding solid colour. As well as that I learnt how to duplicate a layer and flip it
horizontal. I am happy with my progress as I have nearly got the basic layout of the logo
done.

Aim – 7th November 2017

The first thing that I must do today is check my IPL, put my ID badge on and turn my mobile
phone off. I then aim to complete the rest of the logo in Photoshop for ‘Ice-Fire Gaming’.

Evidence

The first thing that I did today

was creating a white outline
around the initials ‘IFG’. I did
this by selecting the ‘Elliptical
Marquee Tool’ and drew a circle
around the centre of the logo. I
then pressed ‘Delete’ on the left
side of the controller layer.
Daniel Crush

For the right side of the controller I

used the pen tool, to create the
‘half curve’. I then pressed ‘Delete’
on the right side of the controller
layer.

After the section was deleted I used the ‘Rectangular’ and ‘Elliptical Marquee Tool’ in
order to create the buttons and d-pad of the controller. I also used the ‘Rectangular
Marquee Tool’ to create a white outline around the initials ‘IFG’ in the top right section. I
also created the curves on the inside of the controller using the ‘Pen Tool’. Finally, I
changed he transparency back up to 100%, as you can see below.
Daniel Crush

After I was happy with the basic shape of the

logo, I then duplicated all of the layers, making
sure they were all selected. I then did the
command ‘Ctrl and E’ which merged all of the
selected layers together. This is so that I can
add colour to the logo and it also makes sure
that if I make any mistakes I will have the
original below that layer.

I duplicated the layer once

again and deleted the centre
of the logo on one of the
layers. This was so that I could
colour the Xbox controller
separately.

Next, I double clicked on the layer that I was working on and the ‘Layer Style’ box appeared
where I could edit the colours, add glows and much more. The only effect I was interested in
was the ‘Gradient Overlay’.
Daniel Crush

As you can see above, these are the ‘Gradient Overlay’ settings that I used. I had a darker and
lighter shade of grey to represent the Xbox controller. I also changed the scale percentage to
150. This allows the colours to blend better.

Next, I duplicated the original layer

again, as I was going to be splitting
the middle part of the logo into
two. After that, I used the ‘Pen
Tool’ to create a ‘fire’ shape within
the logo. I then right clicked with
the pen tool and selected ‘Make
Selection’, where a dotted line
appeared.

On one of the layers I pressed

‘Delete’, which ended up looking
like the image on the right.
However, I didn’t deselect the
selection as I wanted to inverse it
so that I could remove the top
section on the other layer that I
had duplicated.
Daniel Crush

Keeping the outline selected I went over to ‘Select’

and then ‘Inverse’ and this flipped the section. I
made sure that I was on the other layer and then I
pressed ‘Delete’.

For the top section of the logo I went over to the ‘Layer Style’ and went to ‘Gradient
Overlay’ where I selected the colours as a darker blue and a lighter blue shade. For the
scale, I set it to 91%.

Next I went over to the ‘Layer Style’ on the bottom section of the logo and then
proceeded to go to ‘Gradient Overlay’ where I selected the colours of red, orange and
yellow to match the ‘fire’ look that I’m going for. For the scale, I set it to 95% and set the
angle to 65 degrees.
Daniel Crush

As you can see from the image on

the left, this is what my logo now
looks like. I just need to add a few
more details and then it will be
complete.

Here I duplicated the ‘fire’ layer again so that I could use the pen tool to cut out another
section. This was to add more detail to the logo and to make the fire more realistic.
Daniel Crush

I also went over to the ‘Opacity’ on the selected layer

and changed the percentage from 100 to 40. This was
so that the edges didn’t look as harsh and so that the
colours blended nicely.

Like before, I did the exact same step. I duplicated the previous layer and used the pen
tool to be able to create a ‘flame’ like illustration. I then went over to the ‘Layer Style’
and went over to ‘Gradient Overlay’. This time I only want a red to orange gradient so I
removed the yellow. Furthermore, I also set the ‘Scale’ to 100 and the ‘Angle’ to 75
degrees.

This is what the completed logo looks like for ‘Ice-Fire Gaming’.
Daniel Crush

Learnt

Today I learnt how to use different effects within Photoshop, including the ‘Gradient
Overlay’ and the ‘Drop Shadow’. As well as that, I met my aim for the start of the lesson as I
managed to complete the logo.

Aim – 14th November 2017

The first thing that I must do today is check my IPL, put my ID badge on and turn my mobile
phone off. I then aim to start creating some of my Screen Icons.

Evidence

The first thing that I did was setting up the canvas size for my first screen icon. I decided to
go with 1024x1024 pixels for the height and width so that the screen icon is of good quality
and doesn’t become pixelated. I also went with a resolution of 72. Additionally, I also made
sure that the colour mode was RGB and that the background colour was set to white. I then
clicked ‘Create’.
Daniel Crush

To start off, I decided to get the

basic shape of the screen icon by
going over to the toolbar and
selecting the ‘Rounded
Rectangle Tool’. I then dragged
the shape into a position that I
liked.

I then duplicated that layer and positioned it below the layer. I also moved it down slightly
to create an edge on the bottom. So that I could see it, I changed the colour to a light grey.
Once I had the basic shape, I went over to the ‘Layer Style’ and selected ‘Colour Overlay’ and
changed the colour to white for the top layer. For the bottom layer, selected ‘Gradient
Overlay’ and set the colour to dark shade of blue.

I then got a PNG image of the official Twitter logo

from Google and centred it inside of the square that
I have created.
Daniel Crush

Next, I went over to ‘Layer Style’ on the Twitter logo and added a ‘Gradient Overlay’, like
that of the blue gradient I used on the other layer. I also wanted to add a darker shade
around the inside of the twitter logo to make it look more aesthetically pleasing. I made
sure that the ‘Source’ was set to ‘Edge’ and set the ‘Size’ to 18. Additionally, I also set the
‘Opacity’ to 6% so that it was only slightly noticeable.

The final thing that I did to the ‘Twitter Screen Icon’ was adding a ‘Drop Shadow’ to the
bottom rectangle. This was the outcome of the screen icon:

I then went onto create the rest of the screen icons by simply just replacing the Twitter logo
with a YouTube, Instagram, Facebook, shopping basket and cart logo.
Daniel Crush

Learnt

Today I managed to get all the screen icons for ‘Ice-Fire Gaming’ created, as well as updating
my diary as I went along. Additionally, I learnt how add gradients and drop shadows, and I
also learnt how to use the pen tool in order to create different shapes.

Aim – 17th November 2017

The first thing that I must do today is check my IPL, put my ID badge on and turn my mobile
phone off. I then aim to create two images that will be used as a rollover on the website for
‘Ice-Fire Gaming’. The rollover will be of a 12 months Xbox Live membership.

Evidence

The first thing that I did to create the images for my rollover was setting up a new document.
The canvas size I decided to go with was 1700x2000 pixels for the height and width so that the
rollover images will be of good quality and don’t become pixelated. I also went with a resolution
of 72. Additionally, I also made sure that the colour mode was RGB and that the background
colour was set to white. I then clicked ‘Create’.
Daniel Crush

Next, I went over to the toolbar and

selected the ‘Rectangle Tool’, where
I drew the basic shape of the
rollover image that I was going to
create.

After I had the basic shape of the

rollover image, I then went over to the
website ‘DaFont’ and downloaded the
font ‘X360 by Redge’ as I wanted a
font that looked like the Xbox font. I
was recreating the Xbox background,
with the logo and text as I could not
find a HD image on Google.

As you can see from the image on the left, I

found an image of the Xbox logo and placed it
to the left side of the text. Once I was happy
with the position, I applied a ‘Gradient Overlay’
to the background to make it green.
Daniel Crush

I then went over to ‘Layer Style’ for the background and selected the ‘Inner Glow’,
‘Gradient Overlay’ and ‘Drop Shadow’. As you can see from the screenshots below, they are
settings that I used.

After that, I created another rectangle using

the ‘Rectangle Tool’ from the toolbar. I
went over to the ‘Layer Style’ and selected
‘Gradient Overlay’. I made sure that the
gradient was a darker and lighter red to
contrast well with the green ‘Xbox’
background. As well as that I applied the
same ‘Inner Glow’ to the one that I used on
the green background.

Next, I went over to the website ‘DaFont’ where I selected a suitable font that would work
well with the image.
Daniel Crush

The font that I decided to go with

was ‘Bebas Kai’ and I set the
colour to white so that it stood
out from the background. As well
as that, I decided to add an effect,
a ‘Drop Shadow’ to the text in the
‘Layer Style panel.

As you can see below, these were the settings that I used for the ‘Drop Shadow’. I made sure
that the ‘Angle’ was set to 90 degrees and that the ‘Opacity’ was set to 32, so that the dark
shadow wasn’t too prominent.

Learnt

Today I managed to create the first image for the rollover for ‘Ice-Fire Gaming’. As well as
that I have been updating the diary as I go along.

Aim – 21st November 2017

The first thing that I must do today is check my IPL, put my ID badge on and turn my mobile
phone off. I then aim to finish creating the second image for my rollover that will be used on
the ‘Ice-Fire Gaming’ website. The rollover will be of a 12 months Xbox Live membership.
Daniel Crush

Evidence

The first thing that I did was use the first image as a template for my second image, as I wanted
them to be the same size so that they can ‘rollover’. I duplicated the bottom red rectangle and
moved one on top of each other, so that one of them can be used for a ‘Buy Now’ button.
I then moved up the ‘Xbox’ logo and ‘Xbox’ text so
that they were in a suitable position, so that they
match my storyboards.

Furthermore, I then changed the bottom text from ‘£32.99’ to ‘Buy Now’ and centred it in
the middle. After that, I went over to the ‘Layer Style’ and applied the same ‘Inner Glow’ as
previously and a new ‘Gradient Overlay’. I used a dark and light blue for the gradient.
Daniel Crush

The final thing I did today was adding a red glow around the outside of the image, as I have
done this on my storyboard for the rollover images. I set the ‘Size’ to 40 and the ‘Range’ to
70.

As you can see below, this is the outcome of the rollover images that I have created for my
client ‘Ice-Fire Gaming’.

Learnt

Today I managed to complete the second rollover image for ‘Ice-Fire Gaming’. I have now
completed all of the rollover images for my client and I will begin the ‘Web Banner’ in the
next lesson. So far, I learnt how to use a range of new tools on ‘Adobe Photoshop’, including
the layer style effects, pen tool and more.
Daniel Crush

Aim – 24th November 2017

The first thing that I must do today is check my IPL, put my ID badge on and turn my mobile
phone off. I then aim to start and finish creating the web banner that will be used on the
‘Ice-Fire Gaming’ website.

Evidence

I started off by creating the canvas size for the web banner. The size that I decided to go
with was 2000x500 for the height and width so that the web banner will be in a good
quality. I also went with a resolution of 72. Furthermore, I made sure that the colour mode
was RGB and that the background colour was set to white. I then clicked ‘Create’.

The first thing that I did was double

clicking on the lock icon in the layer
panel. This unlocked the layer for
me to be able to add a gradient that
matched my storyboard.
Daniel Crush

Next, I double clicked on the layer that I was working on and the ‘Layer Style’ box appeared
where I could edit the colours, add glows and much more. The only effect I was interested in
was the ‘Gradient Overlay’. Here I selected two shades of blue that I had been using for the
other graphics for the website.

I then used the ‘Rectangle Tool’

to create a line across the
bottom of the banner. From
here, I went over to the ‘Layer
Style’ and selected ‘Gradient
Overlay’. Here I selected two
red shades, a lighter one and a
darker one.
Daniel Crush

When I was happy with the background colour, I moved onto the main text, ‘Ice-Fire
Gaming’. I decided to use the font ‘Full Pack 2025’ as I mentioned I was going to use in the
client proposal. I then positioned it in the centre of the banner, and moved it down slightly.

I then needed to change the

font colour to black. I did this
by going to the ‘Layer Style’
and to ‘Colour Overlay’. After
that, I used the ‘Pen Tool’ and
when around the ‘hollow’
letters. I then right clicked on
my mouse and selected ‘Fill
Path’. Then I clicked ‘Ok’.

When I was happy with the text, I went over to ‘Google Images’ and searched for characters
from different games that I had drawn on my storyboard. When I was searching I made sure
that the images were HD and that they were in the file format, PNG so that the backgrounds
were transparent. Next, I placed them into Photoshop, corrected their size and positioned
them like I had done on my storyboard.
Daniel Crush

The next step was adding a ‘Stroke’ and ‘Outer Glow’ to each of the characters to make
them stand out from the background. I did this by going over to the ‘Layer Style’ panel and
adding the effects, as you can see above.

I also added an outer glow to the

text, ‘Ice-Fire Gaming’ so that it tied
in better with the character’s white
stroke.

To make the banner

look more
aesthetically pleasing I
went over to the
‘Adjustments’ tab and
clicked on
‘Brightness/Contrast’.
I set the ‘Brightness’ to -10 and then set the
‘Contrast’ to 60.

Furthermore, I then went over to the ‘Text’ icon on the toolbar and typed in, ‘Cheap games
and prices on offer!’. I also changed the font to ‘DIN Medium’. I positioned the text just
under the main text, ‘Ice-Fire Gaming’.
Daniel Crush

I also decided to add a black brush stroke behind the

text to make it stand out a bit more from the
background. I did this by creating a new layer and
selecting the ‘Brush Tool’ on the toolbar. From here I
could select the ‘Size’ and ‘Hardness’ of the brush. I
also had multiple brushes to choose from. I went with
a ‘Size’ of 72 px and a ‘Hardness’ of 0%. This made the
brush softer at the edges to make it blend in better
with the background. After that, I changed the opacity
to 50% so that the black brush didn’t look too out of
place.

Next, I went over to the toolbar and selected the

‘Eyedropper Tool’ and clicked on the darker blue
shade, nearer the bottom of the banner as I was
going to use the brush to go over the characters that
were showing through below the text. Once I had the
right colour I selected the ‘Brush Tool’ and made sure
that I was on a new layer. I then began to ‘paint’ over
the area underneath the main text, ‘Ice-Fire Gaming’.

On the same layer, I changed the option from ‘Normal’ to

‘Colour’ in the ‘Layer’ panel. This made the background
blue, whilst showing the characters at the same time. I
thought that the text would stand out more from the
background doing that.
Daniel Crush

I then went over to the toolbar and selected

the ‘Rounded Rectangle Tool’ and dragged the
shape to the left side of the page.

The next step was adding a ‘Gradient Overlay’ and a ‘Drop Shadow’ to the rounded
rectangle. I did this by going over to the ‘Layer Style’ section. As you can see below, these
are the settings that I used.

The final thing that I had to do was adding the text,

‘Discounted Prices’ to the rounded rectangle. I did
this by selecting the ‘Horizontal Type Tool’ from the
toolbar and selecting the font as ‘DIN Medium’.
Daniel Crush

This is what the completed web banner looks like for ‘Ice-Fire Gaming’.

Aim – 28th November 2017

The first thing that I must do today is check my IPL, put my ID badge on and turn my mobile
phone off. I then aim to start and finish creating the navigation bar that will be used on the
‘Ice-Fire Gaming’ website.

Evidence

Today, I started off by setting up a canvas size for my navigation bar. I decided to go with
2560x1440 pixels for the height and width so that the navigation bar is of good quality and
doesn’t become pixelated. I also went with a resolution of 72. Additionally, I also made sure
that the colour mode was RGB and that the background colour was set to white. I then clicked
‘Create’.
Daniel Crush

Next, I need to create the basic shapes for the navigation bar. I did this by going over to the
toolbar on the left-hand side, and selecting the rectangle. I then dragged this onto the
canvas, creating the right shapes that I liked, that also matched the storyboards.

As you can see from the screenshot on the left, I have

created all the rectangles on a separate layer so that it
will be easier to add colour to them. As well as that, I
have also renamed the layers so that I am able to tell
straight away what layer I am on.

After that, I went over to

the ‘Layer Style’ panel on
the ‘Top Bar’ layer and
selected a darker shade of
blue for the ‘Colour
Overlay’. For the rest of
the layers I selected
‘Gradient Overlay’ and
used a light blue to a dark
blue shade. I kept the
colour similar to the
screen icons so that the
graphics stayed consistent
throughout. As well as
that, I also made sure that
the ‘Scale’ was set to 150
to enable the colours to
blend well.
Daniel Crush

I then went on to separate the rectangles on the top section so that you could see each one.
I did this by creating a thin line, using the same colour from the ‘Top Bar’. As you can see
below, this is what it currently looks like.

I then went on to create the horizontal red line that goes across the navigation bar to tie in
with the ‘Ice’ and ‘Fire’ theme. I did this by going over to the toolbar and selecting the
‘Rectangle Tool’.

I then went on to create

the horizontal red line that
goes across the navigation
bar to tie in with the ‘Ice’
and ‘Fire’ theme. I did this
by going over to the
toolbar and selecting the
‘Rectangle Tool’.
Daniel Crush

Next, I went over to the toolbar and selected

the ‘Horizontal Type Tool’. I typed in ‘About
Us’ and went over to the font section and
chose the font ‘Bebas Kai’ as that is the font
that I used for the rollover images. I am using
this again as I want to keep it consistent with
the other designs. I also changed the colour of
the text from black to white. I did this with
the rest of the sections, duplicating the layer
each time.

After I was happy with the positioning of all the text, I went over to the ‘Layer Style’ and
selected the option ‘Drop Shadow’. From here I changed the ‘Opacity’ to 12%, changed the
‘Distance’ to 2 and changed the ‘Size’ to 8.

The final step to completing the navigation bar was to use the ‘Pen
Tool’ on the toolbar to create a triangle shape. Based off my
storyboards this will used to activate a dropdown menu.

I then right clicked with the pen

tool and selected ‘Fill Path’. I
didn’t change any of the
settings and clicked ‘Ok’.
Daniel Crush

As you can see from the screenshot below, this is the outcome of the navigation bar:

Learnt

Today I managed to complete the navigation bar for my client ‘Ice-Fire Gaming’. I have now
completed all of the graphics for ‘Ice-Fire Gaming’ to a high standard. When creating the
navigation bar, I learnt how to use more effects such as ‘Gradient Overlay’ and ‘Drop
Shadow’ and I continued to develop my skills.

After creating all the graphics for the company, ‘Ice-Fire

Gaming’, I had to export the work in a suitable file format.
For the web banner, I went over to ‘File’, ‘Save As’ and I
then chose the file format, ‘JPEG’. After saving it with a
suitable name, I had to choose a suitable quality for the
image. I went with 7, which is a medium quality because if
I picked the highest quality, then it will take a long time to
load on a website. However, if I chose the lowest quality
then it won’t look very professional on a website, which
may put people off from purchasing something. Therefore,
I went with a quality of 7 as this will best suit requirement
of the graphic. However, for the rest of the graphics I
saved them as a ‘PNG’, to ensure that the background on
them was transparent. If I had saved, for example, the
logo or screen icons as a ‘JPEG’, the white background
would be showing.

Furthermore, once I had saved all the graphics, I put them

onto a back-up in case the files go missing. The back-up
that I used was a USB Drive.