In this web design unit we had to make our own website that would be about a game we are making in our games design unit. In this website would be pages of the story, the character design, the environment and a little about ourselves. I found that this unit was easy due to doing web design last year i knew how to do most things. I would have gave myself more time to do my website as I found it hard to think of what to write on each page. Overall the unit was enjoyable and easy.
Category Archives: Web Design
Website images plan
Homepage
squish nerd logo
squish nerd banner
home picture
story picture
design picture
environment picture
about me picture
Story
squish nerd logo
squish nerd banner
home picture
story picture
design picture
environment picture
about me picture
Design
squish nerd logo
squish nerd banner
home picture
story picture
design picture
environment picture
about me picture
Enviroment
squish nerd logo
squish nerd banner
home picture
story picture
design picture
environment picture
about me picture
example of environment
About Me
squish nerd logo
squish nerd banner
home picture
story picture
design picture
environment picture
about me picture
video example
Backing up images for a website
When making anything you should always backup your work in a different place, like on a memory stick. So if you lose the original you have a backup of it. The same goes for making a website. you should always save the images you use and back them up. I have had to do this for my website. The first place I have saved them is in an images folder in my website folder. 
I am also backing up my images onto my student drive, so if i ever lose my memory stick or the files corrupt i can easily get back all of my work.
How to save and store a video for a website.
I have found the easiest way to put a video onto your website is to store it on youtube by uploading it to your account. Once that is done you can go onto your video and click share and make you you click EMBED, this allows the video to show up on your website rather than just a link. using the embedded code it has given you, put that where you want your video to be on your website and when you load it up it should show your video.
Website Text plan
Homepage
Welcome to Squish Nerd( In bold and centred)
Hey! Welcome to Squish Nerd! and this is our website for my new game “The Bow Of Destiny”! On this website i will be telling you how we created this game and came up with the lore for it and also a little bit about myself! so come in and have some fun!
Story
Squish Nerd Story(in bold and centured)
‘The Bow Of Destiny’ is a game about a world where your accessories are the most important thing to you. You are little girl who hears about the mystical BOW OF DESTINY(put in bold and in a lilic), the cutest accessory around. And you want it. To get this accessory and win the game you must go up destiny mountain, fighting all the horrible creatures on the way till you get up the the top and collect THE BOW OF DESTINY(put in bold and in a lilic),, but it won’t be easy.
You guide this girl as she climbs the mountain and defeat monsters. You complete a level by getting to the platform, which will be a different colour, at the top of the level. Through the level there are also collectible accessories which will add to your score, giving you a higher score in the end, but you only have one chance, once your health is gone and you die, you restart from the beginning.
Design
Squish Nerd Characters(in bold and centured)
The main character of this game is called Pippa, a 14 year old girl with a sense of adventure. With pastel blue eyes and soft lilac hair she has always had the attention of boys throughout her years but she has always been picked on for her height, being 4 foot isn’t easy. She is easily recognised from her hairstyle, making a loop with each side of her hair.
Growing up Pippa has had a fairly normal life. Her mother being a stay at home and her Father being a guard for the kings watch, this means she rarely sees her father but when she does he will always tell her stories of his adventures. Pippa has a lot of friends, but only a few who are close. The person who is closest to her though is Hazel, her best friend who she had known since she was a toddler.
Pippa tries to be as brave as she can, wanting to be brave like her father, but she is usually scared of most things. Her biggest fear is water, When she was young she went swimming with her parents and hazel and nearly drowned by thinking she go further out to sea.
Pippa gets excited most when she listens to her father’s stories, she wishes that one day she can go on an adventure of her own just like her dad so she can show him and prove to everyone that she is brave like her dad.
Enviroment
Squish Nerd Enviroment(in bold and centured)
The enviroment for games is very important, it allows you to set the mood for the game. The enviroment for my game is going to look very bright, mostly using pastel colours to give it a cute theme. the art style for the game is going to be pixelated so it looks a bit like this game.
My game will take place on a mountain so i’ll have to use a lot a browns, greens and greys with a lot of nature in it like flowers, tree’s and grass. The mountains will have burrows for the rabbits and caves for the bears. Each platform will have to look like a ledge off the cliff to make it a little more realistic.
About Me
Wecome To Squish Nerd(in bold and centured)
So you wanna know stuff about me huh? Well where to start. My name is Sophie, I’m 17, i weigh 6 and a half stone and my height is about 4’10. I have dark brown eyes and i have brown hair. Growing up I had a normal life really. I live with my gran in a little village in the middle of no where, i got picked on in high school because i used to dye my hair different colours but it never really bothered me much. I don’t have many friends, i just have a few close friends.
I’m currently doing a creative industries course, that means i’m doing things like logo design, game design, web design and 3D. That’s the reason i’m doing this website, this website is for my web design unit. The last course i done was creative Industrises level 5, where we did videos, sounds, stop motions, phtography and web design, here is an example of what i done.
I love to play games and i would like to work with games one day. I mostly like to play MMORPG’s, at the moment i’m playing Archeage online which is a lot of fun. I also like to watch a lot of anime, my favourtie gurne is funny/romances. My favourtie anime at the moment is ASO.
Layout of text and graphics on websites
Layout of text and graphics on Youtube
The first website that i will be talking about is Youtube. This is a website where you can store, watch and share videos. I think this is a good website because first off the website is very easy to understand, you have the search bar right at the top and it has a drop down menu where you can see your playlists, subscription videos and History. The layout of this website is simple, with just using boxes like a diagram to separate different areas, like the recommended videos for you and videos from people you are subscribed to. The text on this website has been laid out so it is mostly to the left hand side and it has been formatted so that it isn’t too big. They have made it so that you mostly use graphics to get around the page, making the thumbnails on the videos bigger, most likely so it draws in more interest. They have also put little graphics next too all of their text, for example next to the ‘What To Watch’ text there is a little house icon, so people know this is the main page that comes up when you first get on youtube, since they have said it is ‘What To Watch’ people might not know where the home page is so this little icon would indicate where it is.
Layout of text and graphics on wordpress
The second website I will be talking about is WordPress. This is a website where you can store text by making a post and posting it onto your ‘blog’. A blog is a website dedicated to one person and they could post anything they wanted on it like recipes, there life events, ect. and it allows everyone to look at it and read it. I don’t think this is a very good website as someone who uses wordpress for college work it is hard to get to the dashboard, which is what you use to edit your blog. You have to go to your actual website then click on dashboard. The text on this website is clear to read, since there is a lot of text on this page its hard to know where to look, and you end up just skipping over most of it and hardly using some of the features. They mostly use text on this website rather than graphics, which makes it a little more complex to use. The layout of this text is mostly to left just like Youtube but there are more text with no graphics at all to help you out, so if you got lost you couldn’t really find your way back. The only graphics they use is a little person in the top right hand corner which is supposed to be for your profile, but it doesn’t take you to them. There is also a little plus sign next to it, it doesn’t tell you what it does, i have no idea what it is for and next to the plus is a little pencil for adding a new post quickly. these graphics are all small and hidden away so you don’t really notice them.
How to save and store images for a website.
first off create an images folder in the folder you will be saving your website in, this is where you are going to save your image for you website to. With the image you want to use go to file, save for web, select Jpeg, and you should see a drop down menu that says low, medium, high, very high and maximum. Save the image as a medium so it isn’t too big of a file, then click save, navagate to the images file you just made, name it something that will make sense to you and click save.
Outcome one – Web design.
- Explain the purpose of Copyright in relation to photographs.
The purpose of copyright is to protect photos and images you have created. The way that copyright works is that as soon as you create an image or take a photo it automatically has copyright laws on it. This means that no one can steal your work and claim it as their own, the only way you can use someone else’s image is if you ask them and they agree to it or it says otherwise in the description of the picture. One way to stop people from using you images is to put a watermark over it, to do this you just put text over your image and put the opacity down. You can also buy some kinds of copyright. This is important to me and others as a professional because it means i don’t have to worry about people stealing my work, and taking credit for what i have done. Not all websites let you have full copyright of your images, sites such as Facebook and twitter take ownership of the images so they are allowed to use them anyway they want to.
- What section of copyright law protects images and photographs?
The section of copyright law that covers the protection of images and photographs is the intellectual property office.
Link to the website that shows this: https://www.gov.uk/government/uploads/system/uploads/attachment_data/file/305165/c-notice-201401.pdf
The copyright protection lasts as long as you die +70 year after you die.
- Name two websites where you can store your own still images.
The first site that lets you store your own still images with full copyright rights is flicker, this site lets you upload images and still have full rights to them, so they can only use your images with your permission.
The second website is Deviant Art, this website also allows you to upload still images with full copyright rights, but you can also upload GIF’s and stories.
- Name two websites where you can obtain copyright free images.
Two websites where you can obtain copyright free images is MorgueFile, you can also upload images onto this site if you don’t mind other people using them
the second website is FreeImages, this site allows you to use images that people have uploaded without having to worry about copyright.
- Name two websites where you can store your own moving or sequential images.
one website where you can store videos or sequential images is on you tube. Youtube lets you upload moving images for free, also if your videos are popular you could end up with a sponsorship and make money off youtube.
another website is vimeo, this website also allows you to put up videos and share them.
- How do you copyright a piece of work, an image or an idea?
You don’t have to do anything to copyright a piece of work, an image or an idea, it automatically has copyright put onto it as it is your own original work.
- Identify and describe the use of text formatting in art and design web based content.
HTML and CSS are both two different types of code which have their own unique way of arrangement in which the code is written. HTML is basically the structure of your web page and CSS is styling, the design. Every web design uses the same HTML the only thing that changes the design is the CSS, by using rule sets in your CSS file you change the appearance of elements in your html file.
- Explain “Image Optimization”
Image optimization means that when you are saving an image for a website it makes the image web friendly. Since your image will be a lot of bytes, optimizing your image will remove all the unnecessary data in the image save file so it is a lot smaller and quicker to load on your website.
- What does Lossy Format mean?
A lossy format is where the image file is smaller, but it has lost all of its original data that you can’t get back, everytime you save an image as a Jpeg for example, the file will just keep getting compressed and compressed until all the original data is gone.
Website on my game.
for my game i am creating in another subject i will be making a website explaining how the game was made and a page where you can play the game.
The pages i will have on my website will be
- Home – advertising and explaining what the game is about
- about me – a little bit about me
- Play – a page where you play the game
- how i made the game – a page or two dedicated to how i made the game.
- Contact – a page on how people can contact me
- Character profile – this is where i’ll show my character animation and design
- Back story – this is where i will tell the background of my story
The title of the game i will be creating is ‘The Bow of Destiny’. It is a platform game and the theme of the game will be adventure. The target audience for my game will be 12+ since there will be minor violence. the game platform you will need to play this game is your personal computer running Windows XP or higher, 1GB RAM, Pentium 34 3.00GHz processor, 100 MB free disk space for installation, OpenGL compatible graphics card with display at least 1024 x 768, Sound card with stereo output and Keyboard & Mouse.The objective of the game is that you are a little girl who wants to find the ultimate accessory, she hears rumors of a bow that is at the top of the mountain called the Bow of Destiny, so you venture forward to find this bow. To win the game you must go through a series of levels where you defeat monsters and climb higher up the hill. Along the way you can get collectibles which will add to your final score. Once you reach the top you revive the Bow of Destiny and win the game, your score will then be added up, giving your final score for the game. The main character in this game is a little girl who wears a black dress and shoes and has lilac hair. The title screen will contain a start button so you can start the game and an exit button so you can exit the game. The instructions for the game will start when you press the start button. The title screen will show the little girl fighting off monsters.
Reserch:
How to make: Roll Over Buttons
To make a roll over button you first have to open up Adobe Photoshop and set up your page with a width of 125 pixels and a height on 25 pixels. Then you go to image and select image size, resizing it so it is bigger and easier to work with, you would then unlock the layer by double clicking the padlock, pick a colour and use the fill tool to colour it in and name the layer ‘Page load’. Next you duplicate the layer and rename it ‘roll over’, you then pick a slightly lighter or slightly darker colour and colour it in that on your ‘roll over’ layer. Then you add the text you want to the image and press Ctrl+R to bring up the rulers, since we are working in pixels you have to right click on the ruler and select the measurement pixels. Using the text you had put, duplicate it and change the text to whatever you want and you can do this as many times as you need. Then to get it back to its original size you would go back to image size and put in 125.
College Blog 