Diary Unit 19 Assignment 3 - Updated

03/11/2017
AIM:
In today’s session, I plan to change the colour of the dragon’s hands that I found on the
internet. I am doing this so that they fit in with the ice and fire theme that is set for the
website.
EVIDENCE:
Here is the evidence that I created a duplicate layer and applied a colourize layer mask over
the top to change the colour of each hand. One hand I change to blue the other I changed to
red.

LEARNT:
Today I did not have the full session to work on the logo so I was only able to change the
colour of the hands and not get any more done.
07/11/2017
AIM:
Today I aim to further develop the logo. I will add a dragon’s head to the background of the
image and change the colours of it so that it fits with the rest of the graphic.
EVIDENCE:
This shows what the dragons head looked like before I started to edit it.

I made the bottom half of the dragon’s head into a blue colour to match the blue colour on
the hands. I did this by creating a new duplicate layer of the bottom half by selecting the
area and pressing control+J. layer mask and applying hue and saturation. The hue and
saturation layer changed the colour to blue when the “colourise” option was selected. To
make sure that all the parts were coloured correctly I then painted white from the paint
brush tool onto the layer mask which added blue. To take away some of the blue that was
spilling onto the other side I used the black paintbrush and painted onto the layer mask to
remove the hue and saturation from that area. I then grouped the duplicate layer and the
hue/saturation layer together to make sure that they stay together if I decide to re-order my
layers.
After I had done this I made the top half of the dragon’s head red. This involved using the
exact same steps as the first half just with the hue/saturation settings changed.

After this was done I started to change the colour of the inside of the mouth. For the
hue/saturation I used the same settings as I did for the blue side but I lowered the lightness
to make it look like it is shadowed inside the mouth.

I also then changed the colour of the tongue. The colour is the same as the red half of the
head but has a lower lightness.
LEARNT:
Today I found out that this logo is going to take longer to create than I initially thought.
10/11/2017
AIM:
Today I aim to add more to the Logo that I am creating. I will put the dragons head and the
hands together and do any editing of the logo that I feel is necessary. I will also make add
some text to the logo so that people viewing it know what it is for.
EVIDENCE:
Here is the evidence showing that I combined the two pieces of the product into one to
make up the foundation of the logo.
This shows all the layers of the two sections combined into one
document. When the layers are organised like this it is very hard to
organise them and to edit them because moving them requires all the
layers to be selected at the same time. To avoid this I will use the
“Ctrl+E” command to combine the layers of the hands together so
they can all be moved at the same time. I will then do the same thing
with the dragon’s head. This will leave two layers that will be much
more manageable.

This shows what the layers look like

after they have been combined and
on the right, is what the logo is
currently looking like.
Here is the evidence of me using the liquify feature that photoshop has to offer to change
the dragons face. I will make the eye that it has bigger because I think this will make it look
better and more appealing for people seeing it. I will also edit other parts of the face to
change the way it looks to make it the best that it can be.

This is what the dragon’s face looked like

before the liquify effects were added to it.
I used the bloat tool to enlarge the size of the
dragon’s eye and then I used the forward warp
tool to make the eye back into the correct
shape because the bloat made it into more of a
circle instead of an eye shape.

Here is what the dragon’s face looked like

after it had been edited with the liquify
tools. As well as enlarging the eye and
reshaping it I also made the horn on the end
of its nose slightly longer with the forward
warp tool. I also made the top teeth of the
dragon longer. I think these changes give
the dragon a more comical look as supposed
to the serious look it had before.

I tried to make the bottom teeth longer as

well as the top but after I did it I saw that it
didn’t look very good. In order to undo this without undoing everything that I had done I
used the reconstruct tool set at 100% and painted back over it until it had gone back to the
way it was.
Here is the evidence of me painting over the parts of the dragon’s head that were the wrong
colour. Some of the dragon’s head had little spots of colour that were not meant to be
there. In order to do this, I used the colour picker to change the brush to the correct colour
and I then painted over them. I used a 70% hardness on the brush to make sure that I could
blend the colours in properly.
 This shows one of the parts of the dragon’s
head that is the wrong colour. I used the colour
picker to choose the blue colour that it was
supposed to be and then painted over it. Below
shows what it looked like after it had been
changed.

Here is the evidence of me adding text to one version of the logo. Two versions have been
made. One will have text and one wont because it will depend on where it is being used as
to where the text is needed.
This shows the text that I used. I made the
colours of each word represent what they
are and then I made the “gaming” part
green because that matches some of the
colours on the controller.

Above is the font that I used for this text. I

used this font because it is stylised but it is
also quite easy to read.

LEARNT:
Today I learnt that the colour picker offered by photoshop is very useful to use when finding
the right colour to sit your needs because it allows you to choose a colour that has already
been used so it will definitely match.
14/11/2017
AIM:
Today I aim to make the navigation chart for use on the web page.
EVIDENCE:
The first square on the navigation chart is the search square. This has a picture of a
magnifying glass on it and will have a dark orange background. There will also be fire coming
from around the outside of the square.
To begin with I used the ellipsis tool to make a circle for the outside of the magnifying glass
and I then copied this circle and made it smaller. I also made this circle white so that it made
an outline.

I then grouped the layers to make them more editable.

I then changed the colour of the circles to make them look better and added a custom shape
to look like a lens flare.

I then made the handle for the magnifying glass uing the shape tools available. I used the rounded
rectangle tool to make the part in the middle of the glass and the handle and then I used the elipsis
tool to make the handle itselft. I then used the polygonal lasso tool to cut of the end of the handle
closest to the glass to give it a flattened effect.
 At this point it is very simple therefore it doesn’t look very
good. To get around this I then added a white mark to the handle to make it look as though
it had a shine on it.

This still looked quite basic because it was still simple. To

make this look better I grouped all the parts of the magnifying glass. I then added a drop
shadow to all the parts.

I then changed the colour of the background to an orangey-brown because this will look
good when the flames are applied.
I then got a clipart fire image that I though would look good from google images. I then changed the
size of this image using “Ctrl+T” to make sure that it fitted into the image the way that it should. I
then used “Ctrl+J” to copy the layer and the “Flip Horizontal” and “Flip Vertical” options in the
transform menu to make the layer fit where they were supposed to.

The navigation menu that I use will have a rollover feature on all of the buttons this means
that all of the buttons will need an alternative version with Ice rather than fire. In order to
make this I made the background dark blue colour.

I then got a clipart icicle from google images and made many duplicated of it. I then put
these layers all around the outside of the image.
LEARNT:
Today I learnt that having a lot of layers is hard to manage when editing things.
17/11/2017
AIM:
Today I aim to finish making the navigation menu and if I have time move onto the web
banner.
EVIDENCE:
I used the template from the fire search button. I then deleted the magnifying glass from
the centre and replaced it with the categories in the rectangles. These words are written in
the “Firestarter” font from dafont.com. Below is one of the rectangles after it was edited.
The other ones loo0k the same but with the different words in them.

I then did the same thing with all the rectangles but using the ice template that I created.

After I had done this I had finished with the navigation menu. I then started to make the
web banner.
I started making the web banner by getting a light blue background and adding a texture to
it using the texture options.

I then added the logo onto it in the place that it should be.

Next I added the text. This text is in the “Firestarter” font from the “dafont” website.
Next I started to make the logos. The logos have an ice overlay that will need to be put on
the for each one. I made this by getting a picture of ice and creating a clipping mask onto
the logos.

I then did this for the other icons.

LEARNT:
Today I learnt that by applying effects such as shadows and texture it makes things look
much better.
21/11/2017
AIM:
Today I aim to finish making the web banner for the product. I will also start to make the
rollover buttons that will be used on the main page of the website.
EVIDENCE:
To start with I added drop shadows to many of the things on the web banner to make it look
more professional. I did this because I though this made it look better than it did without
the shadows.
The next stage to making the web banner was adding the fire as an underline for the text. In
the actual website, this fire would be a gif, however you can’t use a gif in photoshop
therefore for now it will remain a still image of the fire.
This is what it looks like with
the fire. It may look slightly
different when this fire is
replaced by the gif on the
actual website.

After this the web banner was complete. I then started working on the rollovers for the
project. I made the two screens needed for the different games which is a screen with a
picture of the game and the tile and then another with information about that game. The
information will appear when the square is hovered over.
The first square that I made was for grand theft auto 5. This had a picture of the games
cover and then a box at the bottom containing the title. The title is written in the Firestarter
font. I then made the square that will appear when the user hovers the mouse over it.
I then did the same thing for some other games.

LEARNT:
Today I learnt that you can’t put GIFs into photoshop.

23/11/2017
AIM:
Today I aim to make the background for the website
EVIDENCE:
The background that I made was two fists touching each other. One of the fists has a fire
overlay and the other has an ice overlay. I then put a black background to make it look
better.
First of all I drew an outline of two fists touching each other. I then filled them and added
some minor details.

The drawing looks very basic but this isn’t an issue because the two fists will have a clipping
mask applied to them and therefore you won’t be able to see the quality of the drawing.
I then selected one of the fists using the magic wand and created a duplicate layer using the
“Ctrl+J” command. I then did the same thing to the other fist. This is what it looked like after
I did that.

The reason that I made duplicate layers is that it makes it much easier to make a clipping
mask to get a better effect with the fire and ice.
The next thing that I did is create the fire background for one of the fists. I got a fire
background and then I made a copy of it and cut off the top of it. I then turned to copy over
so the fire was coming from both the top and the bottom. I then used the smudge tool and
the blur tool to hide where the two layers joined. I the used the “Ctrl+E” command to merge
the two layers and I was left with the one layer which was the fire background.
This is what the fire background looked like when I first got it from
google images.

I then made a copy of the layer and turned it upside down.

Then I used the lasso tool o select the part of the image
that I didn’t want and deleted it.

I then put the new layer on top of the old one and made it
bigger so that it fit the top part. After I had done this the
line between the two was still visible.
 I then used the smudge and blur tool to make it so that the line is
less visable.

This is what it looked like when I had done that.

I then used “Ctrl+E” to merge the layers and the

fire background was complete.
After I had done this I created a clipping mask and put the fire background onto the left
hand. This is what it looked like when I did that.

I then merged the left hand layer and the fire background together so I don’t accidentally
move it out of position.

After I had done this I then made the right hand look like ice. For this I got an ice background
from google images. I didn’t think that it needed changing in any way so I just used it
without any editing.
 This is what the
background looked
like.

I then made a clipping mask and put this ice background onto the right hand.

This is what the right hand looked like after

the clipping mask was applied.

After this was done I merged the ice background with the right hand.

After the layer were merged the background was complete. This is what the graphic looked
like after I had finished editing it.
LEARNT:
I learnt that the clipping mask function is very useful for applying graphics to an outline.
12/12/2017
AIM:
I aim to manage my assets. I will convert the images to a different file type and save them in
a specific place.
EVIDENCE:
First, I saved all of the graphics that I made in the “.PNG” format. I am using this format
because this file type allows for transparent backgrounds to be used and some of my
graphics have transparent parts to them. If these images were saved in another format such
as “.JPG” then the transparent parts would become white.
After all the files had been converted I then put them all into the folders that they apply to.
They are stored in folders named after what they are. In these folders, there is a section for
the photoshop document and a section for the converted files.
Below is an example of this.

I did this organisation style for every category.

After I had done this I then created a backup of the files onto one drive to make sure that
they dint get lost. I saved the images in their own folders in the same layout as on the
system.

LEARNT:
I learnt that having an organised file system is very important because it helps you to find
the thing that you are looking for.