Production Diary
Today I have viewed tutorials on the programme Dreamweaver
to gain a better understanding as to how to use this programme to achieve the
creation of my website. I have learnt
how to cut pages from Photoshop and insert them into Dreamweaver, and also how
to create tables in Dreamweaver. I will use the knowledge gained from these
tutorials to help create the website I intend to design.
Splash page
Today I started working on the splash page of my website
using Photoshop. I created a page
showing my logo, which features the letters ‘G’ and ‘L’ which stand for ‘Gaming
Live’. I used the colours black green
and white to create the initial house style of my website. I added the words
“Enter Here” at the bottom of my page, which when transferred over to
Dreamweaver will become the button to my home page.
Home page
My home page features an image of the upcoming game ‘Watch
Dogs’ to give off the impression that this website is up to date as this is up
to date news. I found this image using google images and will reference this
image. I added text to the web page using a typeface called “Prototype” and
transferred the page over to Dreamweaver, where I then created the relevant
buttons using the button link tool on Dreamweaver.
News Page
I created my News Page using the house style used throughout
my website, I wrote the articles after designing my page so I could make sure
that they fit within the sections. The text used on this page is written in the
‘Prototype’ typeface. I wrote the
articles myself and then had to experiment with font size and placement to get
the articles to fit within the sections. I found the EA logo used on my news
page on another website, but edited the image in Photoshop to remove whitespace
seen behind the image, and added a drop shadow to make the image fit more
naturally on the page. I could have found already written news articles on
another website to save myself more time, but I decided to write them myself.
Games list page
I created this page by using and editing images found on
google images, it was quite difficult to find working images due to game
websites being blocked. I added strokes to the images used to make them stand
out more on the page rather than looking simple and stuck on. I wanted to find
images that were the same size, but due to the limitations of available websites
at the time this was too hard to achieve and decided to go for different sized
images. I don’t think this ruins the page though, and I believe the page still
looks okay.
Consoles Page
My consoles page was quite simple
to create, I found the images used on the page on google images and have
referenced them, and I used the typeface used throughout my house style to keep
consistent. I added the words “Last Gen” to the corner of the page, this would
in theory lead to a page of last generation consoles, but I won’t be actually
creating that page.
Xbox
One page
To create my Xbox One page, I used the house style design of black white and green colour, and the Prototype typeface. I added a white stroke and a white drop shadow to my Xbox One image to make the black image stand out more on the black background. I could have left the Xbox One image with a white square background, but this would look like not a lot of effort was put into the design of the page and the image would look simply stuck on.
PlayStation
4 page
I created this page using my
previous Xbox One page as a guideline, as they are both intended to be similar.
I used the same design as the Xbox One page but simply featured a different
image and different information. I decided not to edit the background out of
the ps4 image due to the magic wand tool having trouble deciding between what
was the background and what was the actual ps4 within the image.
Wii
U Page
I created my Wii U page using the
page template all my other pages are based on, I used the prototype typeface to
fit in with the house style. I edited the Wii U image to cut out the white box
around the image, to make the image fit more naturally on the page. I then inserted the Wii U image onto the page
and set it in the same area as the PS4 and Xbox One images on their page.
Sign Up page
To start creating my sign up page where I would include a
form, I had to cut my banner from the rest of my page in preparation for
copying over to Dreamweaver. I then
transferred the banner over to a Dreamweaver page. I then inserted a table that
my form would fit in, which was 8 rows and 2 columns. I then inserted the text
I wanted to show within my form and inserted tick able boxes into the form. 
Contact Us Page
For my contact us page, I used the initial page template
used with the majority of my pages and then added more text to the middle of
the page. This page is quite simple as it is simply a page full of information
the audience could use to contact the site owners. I added a hotspot to the
‘Click Here’ button which leads to my ‘sorry’ page. I could have created a
complaint form page, but I decided against this for the sake of time
management.
Sorry Page
To create my sorry page, I didn’t use my template and just
used a black background to show that this page was different to the rest of the
site and isn’t really supposed to be there. I used the ‘Prototype’ font for the
majority of the text, and used ‘Cybertooth’ for the ‘Go Home’ text which is
also a button that leads to the websites homepage.
Bound By Flame
page
To create this page, I started with my page template and
decided to use information found on other websites to include on my page, such
as the review score and the developer name. I created the text using the
‘Prototype’ typeface and found the images seen on the page on other websites. I
edited the pictures slightly using Photoshop to change the brightness and also
add effects such as a stroke and drop shadows. I also included a button on the page using the
words “Read the full review here”
Community Page
To create my community page, I added images and text to my
template much like the majority of my webpages. I had to find a relevant image
to a gaming community which fit with the theme and house style of my website,
and I believe I eventually found an image relevant enough. For the text used on
my page, I used the ‘prototype’ typeface and used some of this text to create
buttons on Dreamweaver to link to a sign up page, which I created using Dreamweaver
creating forms.
Terms &
Conditions
For my terms & conditions page, I didn’t use my page
template and I didn’t write that much text myself. I wrote the title of the
page and simply copy and pasted the terms & conditions text from another
site. I could have wrote it out myself, but I don’t really know what to put and
for the sake of time management this wasn’t a good idea.
I then transferred the page over to Dreamweaver; I didn’t
create any buttons on the page as none were required.
Videos Page
My videos page was created using my page template, I originally wanted to embed a video into the page by adding the embed code into the coding, but this wouldn't work so I decided to add an image to my page and create a button so that clicking the image would lead you to the video I originally intended to embed.
Site Map
This shows that my site map is organized and everything is saved in the relevant folders. This is just so that finding the relevant items of the relevant page is easy and quick.
To my knowledge my website is now complete, and I will be partaking in alpha and beta testing of the site in the coming week.
After alpha and beta testing my site, I confirmed that the site was working fine and also had peer feedback to back this up. "All inks are working on this website, there are no spelling errors and everything is working fine! Well done Chris!!
Chloe Frid."
This comment backs up my claim that the site works fine, and I am now confident that my website is finished and is working fine.
Overall I have enjoyed this project, and I have learned many new skills that I can use in the future and I believe I had done well.
