Diary

Aim-31/10/17

Produce logo graphic for Ice fire gaming logo.

I found the main graphic for my logo

online through searching fire and ice
related imagery. I decided to use
this graphic because I thought that
the image was very relevant to the
title of the website and to the idea
of gaming itself. The red and blue
colour scheme links to the fire and
name. The yin and yang imagery
links to teamwork as well as
competition which are both relevant
to the idea of gaming and I also
found the image of the two dragons
to be bold and interesting.
I saved the image
titled “yin yang
dragons” as a jpeg
file.
 I removed the black background
from the image by selecting layer-
new-layer from background.

I then used the magic wand tool to

select the area that I wanted to be
transparent
 Then pressing delete on the
keyboard caused the selected area
to disappear, creating a transparent
background.

To shrink the image so I could add

text and icons I had to select Edit-
Transform-Scale.
 I then resized the image.

I would next have to add the text

IceFire gaming to the logo. To do
this I selected the horizontal type
tool. I decided on the font I
would like to use and typed the
title Ice fire gaming, I then
searched for some game related
icons and added them to either
side of the text. After some
moving about and resizing I was
able to complete the finished
logo shown. I added the two
icons to make it clear to the
viewer that the logo does
represent a gaming website. The
two icons were chosen because
they are very closely associated
with the idea of gaming. The font
for Ice fire gaming was chosen
because it has a medieval style
and fitted with the time period
most associated with dragons.

Learnt

In this lesson, I learned how to make the

background of an image transparent and how to
resize and move around images to make them
look as good as possible. I learned how to access
the transform tool and use it to resize, reshape
and reposition selections.
Aim 07/11/17

Produce web banner for site.

I had previously saved the

background for the web banner
whilst looking for backgrounds for
the home page. I chose this
background because of the main
colours being red and blue. In the
same vein as the logo the colours
link to the fire and ice of the website
title and again the colours being
blurred while also different to each
other suggest the idea of working
together and competition which as
noted are relevant to the idea of
gaming.
I took the arrows for the web banner from Freestockphotos.biz.

To select the part of the image I

needed I selected the magic wand
tool.
I selected the logo and then pressing
control allowed me to move my
selection onto the background
screen.

To resize the arrow, I had to go to

edit-transform -scale.
 I then resized the arrow to an
appropriate size.

I repeated the first process for the

left facing arrow, although before
reshaping the arrows I had to rotate
it.
 I selected the arrow I
needed.

I pressed control and then

dragged the arrow onto the
background

To rotate the arrow I had to select

edit-transform-rotate
After rotating the arrow I resized it ,
using the first arrow as a reference.

I then positioned the arrow in the

correct place.
After more consideration I decided that, as they were, the arrows were too big and wide, and
didn’t cooperate with the minimalistic aesthetic I am going for, I decided I would try and shrink
them down to make them fit more with the desired aesthetic. It was fortunate that the arrows
were already a bright colour because if I shrunk the arrows, down and they were not a bright
colour they would be difficult for the user to see. It was during this resizing that I realised that I
could help myself a lot by simply copying, and rotating the same arrow to get them to be the
same size and shape. Instead of doing them individually.

I copied what I thought was the best

arrow.

I rotated the arrow by pressing

control T.
 I deleted the unwanted arrow

I positioned the arrow so it was

symmetrical to the other arrow.

Before
Altering the arrows in this way made
them fit more with the desired
aesthetic and also made the web
banner look more professional.

After
Next I would have to create the little box at the bottom of the web banner to indicate which
slide the banner is on.

I started by selecting the “rounded

rectangle tool”

I then drew the shape

shown and decided on the
colour shown.

Then on a new layer, I created the

small blue dot shown using the
ellipse tool
I then duplicated this dot three
times, leaving four identical dots

Next I positioned the four dots

evenly over the rounded rectangle

Then to make all the layers move as

one I right clicked the layer box and
clicked on “Merge visible”. This
combined all the layers and allowed
them to move as one.
 I then dragged the layer onto the
web banner, and placed it at the
bottom of the banner in the middle.
I purposely chose colours close to
red and blue to fit with the ice and
fire idea behind the website. The
reason they were only close to red
and blue is that is also wanted the
dots and oval shape to fit with the
rest of the web banner.

For the user to be able to tell which page they are on, I have decided that if the user is on the
second slide, the second dot should have a black ring around it, and the same for all the other
pages. I would have to create a black ring in photoshop.

I started by selecting the ellipse tool

and drawing a large circle, holding
shift while sizing the circle allowed a
perfectly even circle to be drawn.
With the circle selected pressing
control alt and T the transform tool
appeared. Pressing alt and shift
allowed me to scale the size of the
ring.

Pressing alt and shift allowed me to

scale the size of the ring.

After choosing the size of my circle I

clicked the tick at the top of the
page to commit to the
transformation
 After this, on the ellipsis tool bar I
selected “subtract from shape”

Clicking subtract from shape caused

the centre of the circle to be
removed.

After this I had to select “merge

Shape Components” and click yes.
 Merging the shape components
meant that the shape could be
moved around freely as one image.

I then shrunk the circle down so it

would fit around the dots.

For unknown reasons the circle

became very difficult manoeuvre
around and I couldn’t get it to stay
on the web banner where I wanted
it. I realised I would have to find a
different way to indicate the page
number to the user so I carried out
the process below.
 I selected the rounded ellipse tool.

Holding shift to make the circle

even, I clicked and dragged across
the screen to make the circle
shown.

I then dragged the black dot onto

the web banner.
I selected the black dot using the
magic wand tool and then pressed
control t, pressing control t caused
the transformation tool to appear.

I shrunk the black circle down to the

size shown, my original intention
was to have the black dot be
positioned behind the blue dots
making It look like there was a ring
around the blue dot, however I
could not find a way to do this and I
have decided to settle for the dot
just becoming black entirely.
 I then saved four different versions
of the web banner, all with the black
dot on the next position.

Page 1

Page 2

Page 3
 Page 4

Learnt

In this lesson I learned how to create a web banner by resizing, repositioning and copying
arrows over a background. I learned how to produce a “carousel” and “carousel indicators”
using simple drawn shapes. I also partially discovered how to create a ring, however I did not
fully adopt this skill, and had to settle for simply creating a different colour carousel indicator.
Creating the web banner gave me more experience in using the ellipse tool, the rounded
rectangle tool, the transform tool, the subtract from shape function, and more experience in
handling multiple assets.
AIM 17/11/2017

Produce navigation bar for ice fire gaming.

To produce the navigation bar I first

set the bar dimensions as 900x50

This produced this blank frame

I used the gradient tool to make
these two colours fade into each
other, the colours were chosen to
be red and blue to link to the theme
of fire and ice and because of the
same reasons as the logo and the
web banner.

I selected the “horizontal text tool”

to add the titles to the web banner.

I then typed the word XBOX in the

Lucida console font in white
 I repeated this process for the other
titles in the navigation bar.

The big space at the left of the navigation bar was purposefully left there to house the search
bar.

To make the search bar for the navigation bar I would first have to create the magnifying glass
icon on a separate document in photoshop.
I selected file-new-clipboard1280x1024-
create. This produced the workspace
shown last
First I selected the ellipse tool.

Then, holding shit while dragging to

keep the circle even, I produced the
circle shown.
 To increase the thickness of the
circle I moved the slider up on
properties section of the circle.

This caused the circle to look like the

image shown

Next I selected the line tool to draw

the handle of the magnifying glass

I drew the rectangle shown, as close

to the thickness of the circle as I
could.
 I then selected the rectangle and
pressed control t.

This allowed me to rotate the

rectangle to exactly 45
degrees
 I then selected the rectangle again
and moved it under the circle,
making it look like a magnifying
glass/search icon. This completed
the magnifying glass icon.

I selected the layers and right

clicked them, then I selected
“merge visible, this connects both
the layers so they will move as one.
I selected the magnifying glass using
the quick selection tool and then
dragged it onto to navigation bar.

As the screenshot shows the

magnifying glass was far too big, I
had to reselect the magnifying glass,
press control t, resize and reposition
the magnifying glass.

The magnifying glass was resized

and repositioned as shown. I made
the magnifying glass black and the
titles white so they are easily visible
for the user. I made the magnifying
glass a different colour to the title
to just make it stand out more and
avoid there being too much of one
colour.
 Next I would select the horizontal
type tool to type out the word
“search”.

The search bar didn’t take up as

much space as I had planned I
decided to add ellipsis after the
search bar to fill the empty space
and I decided to shift all the titles
along slightly so there was an even
gap either side of the navigation
bar.

I exported two versions of the

navigation bar. One with the search
title and one without for when the
search option is selected.

Learnt

In this lesson I have learned how to use the gradient tool to make a two colours fade into each other, I have learned
how to produce a simple search or magnifying glass icon, and I have learned how to use the measuring tool to make
distances between items even. Creating the navigation bar gave me more experience in handling multiple assets, I have
learned the importance of creating assets separately and then combining them, this makes work on photoshop much
more manageable and results in a more thought out professional looking graphic
AIM 24/11/2017

Produce screen icons for ice fire

gaming.

To start creating my screen

icons I created a new project
by clicking file then new.

I then set the image size to be

sixteen centimetres by sixteen
centimetres.
I then selected the “Ellipse tool” and
drew the shape shown.

After that I changed the colour of

the circle to the colour shown.
 Now in a separate document of the
same size I drew the circle shown
and adjusted the thickness of the
outer circle by adjusting the slider
shown

Next, using the line tool I drew a

straight line through the centre of
the circle at exactly 90 degrees.
I then drew to more lines to the end
of the first line to make them equal
lengths. I then deleted the first line,
creating the general icon shape.

I then changed the

colours of the shapes
as shown to the left.
I then filled the bottom of the shape
as shown

I then selected “merge visible” to

combine all the layers into one
image.
I then dragged the location icon
onto the previously made
background.

I Then pressed control T to resize

and reposition the icon.
I decided to change the colour of
the inner circle to give the image
another layer of colour and with
that change the icon was complete

All I had to do next was remove

the white background by using
the magic wand to select the
white, then selecting “layer from
background”. After this pressed
delete on the keyboard with the
white selected, this removed the
white background.
 Next to create my shopping basket
icon I used the same 16x16
template as before.

I then selected the ellipse tool and

drew the circle shown whilst holding
shift to keep the circle even.

I also changed the colour of the

outer and inner circle to match the
colours of the location icon.
To make the Shopping basket icon I
opened an image of a shopping
basket I found on google images to
trace around for the general shape
of the basket.

I traced around the edge of the

shopping basket image using the
line tool.
 I then deleted the original image
and filled the shape in blue.

I then added another circle to

represent the hinge of the handle
on the shopping basket. And then
merged the layers.
 Then I dragged the image onto the
red background.

Next I removed the background of

the image in the exact same way as
shown earlier in the diary. The red
and blue colour scheme of the icons
was chosen because of the links to
the ice and fire name and to link to
the idea of competition-a common
theme in the world of gaming.
 I then exported the image as
“finished basket icon”.

Learnt

I learned how to use the shape size slider to resize parts of a circle. I learned that measuring out certain parts of a
graphic, and the angles of parts of the graphic is very important because if the shape is uneven it will look rushed
and untidy. Measuring the graphic and planning out the sizes of all the elements of the graphic will make the
graphic symmetrical and professional looking. I have learned how adding different shades of the same colour can
give a graphic a much more layered and interesting design. I have learned how to use the line tool to trace the
outline of a shape and use that outline to help me in the production of my own graphic.

Asset Management

Now I have finished all my graphics I will have to save them as JPEG files. The JPEG file format makes the graphics
very website friendly by decreasing the file size and consequently decreasing the load time

I first saved the all the pages of the

web banner in the folder “JPEG
assets”.
Next I saved the navigation bar with
the search text, then after that the
navigation bar without the search
text.
Next I saved the location icon.

Then the shopping basket icon

 Lastly, I saved the ice fire gaming
logo as a JPEG in the folder JPEG
assets.

All of the graphics are saved as JPEG

files in the folder JPEG assets.
To back up my graphics I emailed copies of them to myself and then had to individually
upload them to the one drive.
Additions for Resubmission

For my resubmission, I had to add some information to my web banner.

I started off by selecting the

horizontal type tool.

I then typed out the title “New

Releases” in the Lucida console font.

I then changed the colour to white

so it can be easily seen.
 I then added the images shown
from google images

For the second page, in the same

way as the first I added the text and
the images shown.

For the third page I added the text

and images shown.
For the fourth page I added the text
shown and then added the location
icon that I had previously made
myself.