Website evaluation

OUR WEBSITE 

 

Our website is successful as it consistent with its appearence sticking to the three colour rule, using the three colours of black,white and green. this have kept our website a simple but affective desighn   keeping the customers interested as they begin to search through the website. Screen Shot 2016-06-27 at 11.59.55.png

We also kept the fonts simple using three different fonts, for example : we used a big bold uppercase font for titles a lowercase bold font for normal text and used a small stylish font for the subtitles to make them noticeable. The layout is kept simple so its not to complicated to use, we have used a nice big picture behind the title to improve its appearance on the home page. if i could think of areas to improve on in the appearance would be try to add more content to get rid of the blank white areas. Screen Shot 2016-06-27 at 12.22.02.png

We managed to add some media links for the customers to select to improve on the advertisement on our website using the other links like face books page and twitter of the our glass products.

Screen Shot 2016-06-27 at 12.35.30.png

we created many pages for our websites for the customers to use that gives information to contact Cockington for there our glass products . we’ve also created a page called item request for customers to request what sort of product produced with there own description of what they want there product to look like. we’ve also produced a new products for the customers to search through for them to see if there interested in  buying any of these products so cocking ton can ,make a profit on there products to continue there business. we’ve made a ourglass gallery page for the customers to look through and see cocking tons successful past our glass products to Impress and encourage them to buy something from the website to improve ourglasses bussiness

Screen Shot 2016-06-27 at 13.04.50.png

so here is the contact page which has all the key information required to be useful but we could improve on this page by making the reviews more detailed so the customers have more to relate to. but we do have a link to a good video for the customers to watch so they do have something to relate to.

Screen Shot 2016-06-27 at 13.08.56.png

 

This is what the item request page looks like we made it so its easy and simple to use making it clear that all this information is required if you want to make a item request. We give them the ability to comment exactly how the want there own product to look so there satisfied with what they buy.

Screen Shot 2016-06-27 at 13.21.45.png

This is what the new product page looks like and we put it in a very simple layout thats easy to use with plenty of photos of the products keeping it media rich but if i had to think of a way to improve this page would be to add some key information like the price of each product so the customers have more of the information they need.

Screen Shot 2016-06-27 at 13.42.29.png

This is the Ourglass gallery which was made to show off some of the past successful products for the customers this page was very successfully made as its full of top quality pictures with all information needed for the page to be affective.

 

Screen Shot 2016-06-27 at 13.49.30.png

And last but not least the hourglass documentary page which just contains a nice detailed video for the customers to watch which fills are target of making the website media rich but we could of improved this page by adding some text towards the documentary for the customers to read.

Website pre production

Client feed back

https://drive.google.com/file/d/0B3B0asp4Q6efN2M5dmJ1Zm9MTFE/view?usp=sharing

Equipment needed

https://drive.google.com/file/d/0B3B0asp4Q6efN1dTYnFHeWhBb1E/view?usp=sharing

diary page 1

https://drive.google.com/file/d/0B3B0asp4Q6efdldQVDM1NUxNdEE/view?usp=sharing

diary page 2

https://drive.google.com/file/d/0B3B0asp4Q6efblY4d0pvZ05yeXM/view?usp=sharing

production schedule

https://drive.google.com/file/d/0B3B0asp4Q6efbGZ1NGd6QmpBWTA/view?usp=sharing

website proposal

https://drive.google.com/file/d/0B3B0asp4Q6efckFjQWxocUFfYlU/view?usp=sharing

 

 

Unit : 59 web Authoring

Task 1 

Website construction: website construction is basically the web pages and layout that builds the size of the website. The web pages that make up your site are the lowest common denominator in establishing your website structure. if the the individual pages of your website don’t have a definable organisation it won’t be possible for your website to be  a effective site structure. Every single page in your website should have a logical reason for being there. each page should also link up well together for your website to be effective plus there appearance needs to be consistent. For example : one page can’t have a bright colour scheme with a theme of rainbows and then a another page to totally have the opposite with a black and red colour scheme with a gothic theme, it just doesn’t work and puts people off visiting your website as its none consistent. You need to stick to the 3 colour scheme  rule to give your website consistent with its appearence and also stick to a low amount of fonts with one language. you also need to keep images a similar sizes to keep the layout and construction effective.

HTML: HTML is the coding language on how to create a website. HTML stands for :Hypertext Markup Language. It’s this language that tells the computer which colour to use, which font to use, which size to use and which graphics to use. other things like Javascript and CSS also used for producing websites and mobiles interfaces.

 

It’s web browsers that read the HTML language to render it into a visible or audible file for us to see  or hear and use. HTML describes the structure of a website semantically and, before the advent of Cascading Style Sheets (CSS), included cues for the presentation or appearance of the document (web page), making it a markup language, rather than a programming language.

XHTML: XHTML stands for Extensible Hypertext Markup Language.Extensible Hypertext Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used Hypertext Markup Language (HTML), the language in which Web pages are formulated.

CSS: CSS stands for cascading style sheets. CSS is a mechanism that controls adding things like the style of fonts, colors and the spacing. Along with HTML and Javascript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications and user interfaces for many mobile applications. CSS is designed primarily to enable the separation of document content from document presentation, including aspects such as the layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. This separation of content makes it possible present the same markup page in different colors, formats and styles

HTTP
HTTP stands for Hypertext Transfer Protocol. It is the standard protocol for transferring web pages (and their content) across the Internet. You may have noticed that when you browse a web page, the URL is preceded by “HTTP://”. This is telling the web browser to use HTTP to transfer the data. Most browsers will default to HTTP if you don’t specify it.

HTTPS
HTTPS stands for Hypertext Transfer Protocol over Secure Socket Layer. Think of it as a secure version of HTTP. HTTPS is used primarily on web pages that ask you to provide personal or sensitive information (such as a password or your credit card details). For example the search engine google uses HTTPS as you may have to add some personal information if you uses its Gmail linked to the search engine. When you browse a web page using HTTPS, you are using SSL (Secure Sockets Layer). For a website to use HTTPS it needs to have an SSL certificate installed on the server. Some browsers have padlock icons for you to click onto to check the websites SSL and you can check the website belongs to the organisation you think it belongs to.

FTP
FTP stands for File Transfer Protocol. It is used to transfer files across the Internet. FTP is commonly used by web developers to publish updates to a website (i.e. to upload a new version of the website).

Where HTTP is used for displaying the file in your browser, FTP is used simply to transfer the file from one computer to a specified location on another computer. You can use FTP to transfer the files from your computer to a remote computer (such as a web server), or to transfer from the remote computer to your local computer.

Unit 34: 2D Animation Production

Early forms of animations :

The first tool used to produce animations was by a object called the magic lantern. The magic lantern or Laterna Magica is an early type of image projector employing pictures on sheets of glass. It was developed in the 17th century (1650) and commonly used for educational and entertainment purposes. It was invented by Giovanni Fontana who was from all the way back into the 15th century.

U_MAGICLAN.jpg

The magic lantern 

The second tool that was used to produce animations was a Thaumatrope. A thaumatrope is a toy that was popular in the 19th century (1824). A disk with a picture on each side is attached to two pieces of string. When the strings are twirled quickly between the fingers the two pictures appear to blend into one due to the persistence of vision. The inventor of the thaumatrope is unknown, it’s between john Payton paris or peter mark Roget

Unknown-1.jpeg

A Thaumatrope

The third tool used to produce animations was the phenakistoscope. The phenakistoscope (also spelled phenakistiscope or phenakitiscope) was an early animation device that used the Persistence of vision principle to create an illusion of motion. The phenakistoscope was made on 1831 by the Belgian Joseph Plateau and the Austrian Simon von Stampfer.

Unknown-2.jpeg

The phenakistoscope.

 

.The fourth tool used to produce animations was a Zoetrope. A Zoetrope is very similar to a phenakistoscope as it also uses moving images to create film too. The zoetrope had several advantages over the basic phenakistoscope. It did not require the use of a mirror to view the illusion, and because of its cylindrical shape it could be viewed by several people at once.

Unknown-3.jpeg

A zoetrope

The fifth tool used to produce animations was a Flip book. A flip book is a booklet with springy pages with each page filled with one part of the animations series located in the unbound edge. The first flip book was created in 1868 by John Barnes Linnet as the kinograph. Here is an example of a  flip-book: 

 

The sixth tool used to produce animations was a Praxinoscope. The praxinoscope was created by a French science teacher called  Charles-Émile Reynaud, he created the praxinoscope in 1877. The praxinoscope was the first animated projection on a screen.

images.jpeg

A praxinoscope 

Different uses for animations:

Animations are used for many things but its used for entertainment the most, For example it gets used for movies, animations on TV and video games. The very first animated film was called the silent era which was created in 1908 by Emile cohl. through the years animated films have become very popular and produced more as films like Toy story, Shrek, Madagascar and many more have been produced for entertainment.

images-1.jpeg

The silent era

TV animations have also been produced a lot for our entertainment as the popularity off animations has got higher through the years, For example there’s a animated TV programme called the Simpsons which has been so successful that it has produced 27 seasons. Animations are becoming so popular that all ages are getting targeted with different programmes, For example: Simpsons are targeting teenagers are there main audiences where animations like south park and family guy target adults as there audience. They use adult humour to make there animations entertaining. There’s also animations like Scooby doo which targets children as there main audience.

Unknown-1.jpeg

Family Guy

Unknown-2.jpeg

The Simpsons

Unknown-3.jpeg

South Park

Unknown-4.jpeg

 

 

Animations also get used for advertisement over the internet and TV. For example: Butlins 2008 advert contains animations to try make there holiday location look better for family.

As entertainment animations was used in video games as well. the very first animated video game was a game called Dragons liar. This video game was produced in 1983 for the arcades.  even in the present day animations are still being used for video games, for example: There’s video games like Naruto and Dragon ball Z.

Animations are also used for education for example many websites with animated games/puzzles to help a student learn quicker. For example there is a website called learning games for kids which is full of animated video games for children to use for there education, helping them learn things they struggle with.

Screen Shot 2016-02-01 at 09.48.02.png

Current trends in animations.

There’s CGI animations. Computer animation, or CGI animation, is the process used for generating animated images by using computer graphics. The visual scenes may be dynamic or static, and may be two-dimensional (2D), though the term “CGI” is most commonly used to refer to 3D computer graphics used for creating scenes or special effects infilms and television

There’s Non-Photorealistic Rendering (NPR):Animation professionals are relying more and more on NPR rather than CG animator. They are using 3D software to create an impressionistic animation that’s similar to hand-drawn media. The best example of this trend is animated movies like Wall and Chains.

There’s the use of the 3D printer. The 3D printer was recently used for a film called the box trolls. a 3D printer is a machine that creates a solid object from a digital file.

There’s the Mixed Styles: This is another trend that has gained popularity in the world of animation recently. The animation here is influenced with western and eastern stylistics. One of the very recent examples is Big Hero 6 that is based on the Marvel Comic about Japanese Super Hero team. Also, lot of western animators are getting influenced by this mixed style.

Software’s used for producing modern animations 

  • photoshop CS6: Adobe Photoshop CS6 brought a suite of tools for video editing. Color and exposure adjustments, as well as layers, are among a few things that are featured in this editor. Upon completion of editing, the user is presented with a handful of options of exporting into a few popular formats.3ds Max
  • mari 2.ov2: Mari, originally developed at Weta Digital for Avatar, is a 3D texture painting application that uses Quadro GPU-acceleration to handle complex, high resolution textures in 3D.unity pro 4
  • premiere pro cc:Adobe Premiere Pro is a timeline-based video editing software application. It is part of the Adobe Creative Cloud, which includes video editing, graphic design, and web development programs.
  • illustrator cc: Adobe Illustrator is a program used by both artists and graphic designers to create vector images. These images will then be used for company logos, promotional uses or even personal work, both in print and digital form
  • CINEMA 4D: CINEMA 4D is a 3D modeling, animation and rendering application developed by MAXON Computer GmbH in Germany. It is capable of procedural and polygonal/subd modeling, animating, lighting, texturing, rendering, and common features found in 3D modelling applications. 
  • Toon boom studio: Toon Boom Animation Inc. is a Canadian software company that specializes in animation production and storyboarding software. While major animation studios such as Disney, Cartoon Network, Warner Bros. and Nickelodeon use Toon Boom’s professional-grade animation software to create their shows and feature films.
  • Maya: Maya, is a 3D computer graphics software that runs on Windows, OS X and Linux, originally developed by Alias Systems Corporation (formerly Alias. | Wavefront) and currently owned and developed by Autodesk, Inc.
  • poser pro:Poser is a 3D computer graphics program optimized for 3D modeling of human figures. The program has gained popularity due to allowing beginners to produce basic animations and digital images, and the extensive availability of third-party digital models.
  • Sketchbook pro: SketchBook Pro, also referred to as SketchBook, is a pixel graphics software application that features a radial/pie-menu user interface, intended for expressive drawing and concept sketching. It was originally developed by Alias Systems Corporation, but is now owned by Autodesk.
  • Mudbox: Mudbox is a proprietary computer-based 3D sculpting and painting tool. Currently developed by Autodesk, Mudbox was created by Skymatter, founded by Tibor Madjar, David Cardwell and Andrew Camenisch, former artists of Weta Digital, where it was first used to produce the 2005 Peter Jackson remake of King Kong.
  • digi cell Flipbook: DigiCel FlipBook is 2D animation software that runs on Microsoft Windows or Mac OS X. It is intended to closely replicate the traditional animation process.
  • FL studio 11: FL Studio 11 is a complete software music production environment, representing more than 14 years of innovative developments and testament to our commitment to Lifetime Free Updates. Everything you need in one package to compose, arrange, record, edit, mix, master and perform professional quality music.
  • Flash professional: Adobe Flash Professional is a multimedia authoring and computer animation program developed by Adobe Systems. Flash Professional is primarily used to design vector graphics and animation, and publish the same for websites, web applications, rich internet applications, and video games.

Unit 78: Digital graphics For computer games

Graphics Essay Task 1

I’m planing to produce a video game with the RPG and hack and slash genre  with a supernatural theme. I’ve researched whats already in the market so I can find some inspiration and avoid any copy right mistakes.

This is a video game called “Devil May Cry” which is a action-adventure hack and slash. I like this video game as it has given me inspiration to create a supernatural story however I have involved demons, as theres not many games out there that have already done this. My target audience ( 18+ ) really enjoy the supernatural demons.

I also like Devil May Cry’s main character, Dante, as he has an attitude which brings comedy into the story and gameplay. Dante also has a appearance of an over-confident, mysterious character which brings additional emotions, something I want my character to bring to my project.

dante_evolution__in_dmc_reboot___part_2__by_rehman_1999-d6rulgf

Devil May Cry’s “Dante” Character Evolution.

Even though I like Devil May Cry’s main characters I don’t like the enemies. I feel it could do much better than the original designs, as they just look like dolls with knifes.

Stygian_CA_02_DmC

Devil May Cry’s “Stygian” Profile Photo.

So I’m planning to bring my myths into the video of zombies, demons, witches, dragons, vampires and werewolf to create a difference to other video games.

I also found another RPG called “Bloodbourne” that has a dark, mysterious feel and a map that is similar with the famous myth of Dracula. I like this video game because of how difficult it is; giving the player a challenge.

The player can also have their own special created weapons like the saw cleaver (see the below picture), which was created by the developer  himself. It gives the player something new and different to try out. I want to be able to do this myself as it will separate mine from other games out there.

bloodbourne- saw cleaver

BloodBourne In-Game Weapon

Bloodbourne is also what inspired me to make my video game an RPG, since this genre the player can upgrade their character by levelling up, and from  my own experience, it can be an addicting part of gaming.

Bloodborne- blood

Bloodbourne Screenshot

Bloodbourne is what influenced me to use blood as an in-game effect as it makes it feel more realistic and adds more of a thrill to the playing (See Picture above).

I didn’t like the guns in the game of Bloodbourne because their only used to stun, where in my game I want them to be a more offensive weapon as it gives the player more options in the game.

bloodbourne- gun

Bloodbourne In-Game Gun

Bloodbourne-RPG

Bloodbourne Screenshot Of Gameplay.

 

I have also found the post-apocalyptic RPG called “Fallout.” This game is what inspired me to feature an apocalyptic world in my own as it adds buildup and excitement.

The world actually feels abandoned and struggling for survival which draws the player into the game. I’ve also consider making my game into a series if it is successful, as Fallout improved and became more popular for every game they created for there series.

fallout world

Fallout Screenshot Of Environment.

 

There was another an open world RPG called “Skyrim.” This video game is what inspired me to use myth like creatures for enemies: like dragons, werewolfs, vampires, zombies etc because it makes Sky more entertaining for the player as they would have to use different techniques, to fight different enemies.

skyrim dragon

Skyrim In-Game Monster.

I’m going to make my game in modern times instead of Skyrim’s medieval time era to create a difference between the two. I also believe my target audience will enjoy the game more if its in a modern time.

“Dark Souls” is an RPG game called which inspired me to use knight armour and swords as one of many of the available weapons, because swords are very popular when sword and armour are involved so I want my game to be successful.

dark souls

Dark Souls Varying Armour Designs.

 

Below I have created a digital sketch of a basic building that I have based off of an apartment building, for my apocalyptic city. Its made from a simple rectangle to keep it a basic building shape.

digital sketch of a building

Basic Apartment Building Sketch.

I’ve  added windows as well to make it look more like a city building. I’m also planning to add detail to some of the roof to make them look like they’re damaged and collapsing. I’ve also added some rubble to add some realism to my buildings.

 

Damaged buildings digital sketch

Damaged Apartment Building Design.

I’ve also created digital sketches of lamps, benches and a bridge as simple shapes just to give my city a little bit more detail, which should draw the player into the game more as its more realistic.

To improve my games realism I’m planning on adding normal vehicles like cars and buses and also damaged vehicles, to improve the atmosphere in my video game and add an appearance of chaos in my video game.

So Below are the simple digital sketches I’ve created.

I want to be able to do this myself as it will separate mine from other games out there.

digital bus sketch

Sketch Of A Public Bus

Digital car sketch

Sketch Of A Car

 

Digital lamp sketch

Sketch Of A Lightpost

Digital sketch of a bench

Sketch Of A Bench.


Task 2

In my video, here I have display how I created the shape of a building with the Extrude Tool, to give it the look of a flat building with balconies and windows.

In the screenshots below I have added brick textures, with a Physical Sky and the correct Render settings to make my building look photorealistic.

To make my damaged building seem damaged I’ve used the Live selection tool to select what parts of my building I want to destroy before pressing Delete which gets rid of the selected polygons.

building graphics screenshot 1

Apartment Building – Fully Textured.

building graphics screen shot 2

Apartment Building- Fully Textured (side View).

building graphics damaged 1

Apartment Building – Fully Textured and Rendered.

Here ,in this video I have created a bridge by using the Extrude Tool to give it a straight, long shape.

In the picture below the picture I’ve shown what the bridge would look like without the stone and road textures and  Physical Sky and certain Render settings, seeing it in only its basic form.

bridge photorealism graphics

The Bridge – Without Texture (Rendered).

In this video I’ve shown how I created a simple car without its wheels. I used Subdivision Surface on a object to give it a smooth round look.

In the pictures below I’ve added metallic car paint textures and I’ve added wheels to make it more clear that its a car/bus.

graphics car

A Car – Textured and Rendered.

 

Bus graphics

A Public Bus – Textured and Rendered.

I also created smaller objects for my environment like: street lamps and benches, just to give my city more detail so it looks more realistic.

To create the lamp I used a Spline and the Sweep Tool to create the correct shape.

screen shot lamp

Street Light – Un-rendered.

For the bench I just used the Extrude Tool.

Bench graphics

A Ben – Textured and Rendered

Tools used :

live selection tool
Live Selection

This tool lets the user select every/ any faces of the object the user needs to select to edit in that particular area.

move , scale , rotation


Move, Scale, Rotate

These three tools (from left to right) allow the user to move, scale or rotate your selected area/ or object.

freehand spline

Freehand Spline

This tool lets the user draw a 2D shape freehand, which can then be used in things like Sweep to to create a 2D shape into a 3D shape.

Subdivision surface
Subdivision surface

This tool effects the selected object and makes it smooth, with rounded corners to make it more realistic but also it produces a lot more polygons which takes longer to Render.

Summary

 

 

graphics close

City – Textured and Rendered (Ground Level).

I’m really pleased with the final version of my 3D environment as it is suitable for my aim of a apocalyptic city theme, and there are photorealistic buildings some of which are damaged.

In comparison to my concept art, they have become exactly what I was aiming for in the shape and size of my buildings.

I’m also pleased with how the textures have made my environment more realistic which should help with player immersion.

Aesthetically, I’d say my buildings were a 7/10 in a professional rating as they are missing some crucial details, like doors and smashed windows to go with the apocalyptic theme.

I’ve created this environment by using basic textures, Spotlights to create the right lighting for my apocalyptic city, and to Physical Sky but changed the settings further darken the surroundings.

I had challenges with using the lights and sky as I struggled to create the light and shadows I was aiming for.  I overcame this by using the Cloner of the lamps in my city, creating a Spotlight that looked like a streetlight, and duplicating it so that it seemed like nighttime.

I also had the problem of creating many buildings without making the polygon count too high for the computer to Render. So I used the Cloner  again but this time on both a damaged building and on a normal building so I didn’t have to do unnecessary work.

The only other thing I had to do then was to create the rubble for the damaged buildings to give it the detail and feel of being a apocalyptic city. I did this by using the Shatter and Explosion Tool to make the object look like rubble, so I could move it around the bottom of my damaged buildings.

Comparison Of My Concept Art And Graphics: Buildings

 

digital sketch of a building

Basic Apartment Building Sketch.

 

 

building graphics damaged 1

Apartment Building Rendered.

In comparison with my final product and concept art of my buildings, I would say that I’ve given them a very similar size and shape, as well as the pattern of the windows.

The damaged areas are the same, so I think I’ve achieved what I’m aiming for.

Digital sketch of a bench

Sketch Of A Bench.

 

Bench graphics

Render Of A Bench.

Digital lamp sketch

Sketch Of A Lightpost.

screen shot lamp

3D Model Of A Lightpost.

With my lamps and bench with my final product and concept art, I’m happy with the basic shapes and how they’re exactly the same and how you can see the effect the textures give to the objects of the city.

(Proofread by Yasmin Bradford)

Review on presentation

Presentation concept art 2

At first i felt nervous about doing my presentation as i wonderd weather everyone would understand my storyline and will they like the idea of my video game. It was also very difficult to gain the confidence to stand in front a group of people and speak clear, having all the attention on me gives me pressure.  My presentation went very well people understood what sort of video game i was aiming for and i gained positive reactions to my idea which got rid of all the things that made me nervous it also proved to me that my idea of a video game is a possible project for the future. everyone gave me good questions for me to answer which gave me things to think about like would the religious side to my video game be offensive to some of the players?.

Digital graphics report

For photorealism graphics i have found the horror survival game resident evil as a example. Resident evil was produced in 1996 and has been remastered recently This image shows how photorealism has developed through the 18 years.resident evil comparison between 1996- 2015

From the example of resident evil i can describe this graphic style as the most realistic graphic style available. In this graphic style the developers focus on the details and textures of the characters and enviroment to make the video game as realistic as possible. For example this image shows how the developers have used different textures to create different characters and opponents for the player. Photorealism graphics effect the gameplay by giving it a more personal perspective which pulls the player in by making the player feel the video game is real regardless of the fantasy involved in the video game.

resident evil licker

resident evil charactersAs you can see from the photos above they show the developers used different textures and even added a bit of cel-shaded graphics to show the difference between the characters and enemies. Developers use photorealism for the background/environment to make the player feel immersed into the game, For example in this video you can see that the Environment has key details in the walls of the buildings and objects. It also has key contrast to make it realistic with reflections and shadows as well. ( 

). The developer chose photorealism because it makes a player feel more immersed into the game which will make it easier to scare the player as resident evil is a horror game. Cel-shaded could be used for this video game as it is already used to create a difference between the main characters and the main enemies, For example if you look at the photos above you can see in the photo of the enemies called the licker has dark black lines to make them stand out where the photo of the main characters don’t they just use photorealism.

For Cel-shaded graphics i have found the action open world  video game ultimate Spiderman based on the comic book with the same name. it was released 19th September  2005 for the sixth generation of consoles ( playstation 2, DS , Xbox , gamecube ). As you can see in the picture below Cel-shaded graphics give video games a theme of comic/cartoon art.

Ultimate_Spiderman_2.jpg

Cel-shaded graphics effect the gameplay grabbing the players attention straight away with the colours used in the graphics and its more compatible to fantasy based games. This game could be remastered as a photorealism video game  as there already is other spiderman games out there that use photorealism, like the spiderman games based on the films.

i also  have found the high-fantasy action-adventure game Zelda. Zelda was produced on 1986 and was originally produced in pixel art graphics but has recently been reproduced in cel-shaded graphics. For example in the photo below shows how the zelda character Link has changed from pixel art to cel-shaded through the years.

zelda character

Another graphic would work for this video game proven from my example of how it changed from pixel art to cel-shaded graphics. Cel-shaded give it a fantasy theme towards the action-adventure game, which is what the developer was looking for. It also gives video games a cartoon/magna look to make the game a unrealistic look. Cel-shaded is mainly used for video games that involve superheroes or fantasy. For example in this video you can see how cel-shaded was used for the video game ultimate spiderman.

For Abstract graphics i have found space invaders as a example. space invaders was produced in 1978. The developer used Abstract as he was looking for a 2-D retro look with simple shapes that represent objects but without much details, Also the developer chose abstract as it was the only type of graphics available in 1978 as the graphics technology was limited. The photo below is a example of what a 2-D retro look for abstract games is.space invadersspace_invaders 2

Another graphic can be used for this game for example space invaders was reproduced in 2003 for its celebration of its 25th anniversary and in the second photo above you can see how cel-shaded was used to give the players enemies and the background a cartoony look. Abstract effects the game by keeping the details very simple by the use of simple shapes is all that used to represent objects and simple limited block colours is all thats used in abstract games. Heres a example of gameplay of a modern abstract game.

For Pixel art graphics i have found mega man as a example. Mega man was produced on 1987 and is a action-platform video game. This photo shows how pixel art games can be both 2D and 3D games, it also shows how pixel art uses simple cube boxes to create shapes and objects in a game.

mega man actionmega man 2

The developer used pixel art graphics as only abstract and pixel art graphics were available back in 1987 and pixel art is more realistic then Abstract. Pixel art graphics give a cartoony effect with the Environment created with box shaped objects to keep it simple but more detailed then abstract. Pixel art graphics also effect the gameplay by keeping the game simple and cartoony as it was the only sort of graphics available at the time. This photo shows that another graphic could be used for this video game as it shows mega man the character in a magna art style

.mega man character

Here is a example of actual gameplay of megaman with pixel art graphics.

Concept art is where a Developer of a video game needs to design what a video game character will look like, For example in these photos below artist have designed what characters will looked like before a battle and after a battle. Theres also concept art of alternate costumes for the player to unlock and of different maps and backgrounds.

mkmk arenamk2

GUI is a interface that lets the user interact with any electronic device, For example touch screens, phones, computers and laptops. The photo below is a example of a GUI.

GUI

In digital imaging, a pixel, pel, or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen. The photo below represents pixels.

pixels

Image Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image. It is also identified by the amount of detail an image holds.

A bitmap graphic is composed of many tiny parts, called pixels, which are often many different colours. It is possible to edit each individual pixel. Since the computer has to store information about every single pixel in the image, the file size of a bitmap graphic is often quite large. When you resize a bitmap graphic, it tends to lose quality. For example when a user uses JPEG to save a image it resizes the image and takes away pixels that are not needed which make it loose quality on details.

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics. The photo below shows the difference between bitmap and vector images.

vector vs bitmap

Compression is when a file gets squashed into a smaller sized file which causes the file to loose its quality, a lot of game developers use compression to get rid of polygons and details not needed to improve the performance of the game. For example JPEG compresses a image.

All methods on capturing images : Using cameras ,