Tiled website background

For my portfolio website I decided to create a tiled background to go on my master page, this way it would follow across to all the other pages to add continuity. I went for a simplistic, professional look as it is not supposed to attract too much attention.

Screen Shot 2018-02-21 at 15.31.35
I started off by making a simple, symmetrical (sort of) shape. This would then be replicated to create a wave like pattern.
Screen Shot 2018-02-21 at 15.31.55
I lined up a few of the shapes on top of a square with a colour similar to the colour of the shape, this is important because I don’t want to distract the viewer from the content on the page.
Screen Shot 2018-02-21 at 15.40.41
This is what the website background looks like once I use the tiled background feature in adobe muse, it fits seamlessly because I took the time to line up the pattern earlier.
Advertisements

Enemies and game Assets

Screen Shot 2017-12-14 at 12.35.39
These are some of the props/background assets that iv’e designed for the game, they will appear in the background and foreground
Screen Shot 2017-12-14 at 12.35.03
This is an example of the characters on screen in a level.

I looked at vikings as an idea for enemies in the game, I made a shield design to go with the original enemy layout.

Level Example 1
This is an example of what my game would look like with the background and props added, iv’e also added a text box with an image of the character for cutscenes/interactions.

Character Development

DSC_0097
My first character Sketch
Character_Trace_2.0
Digital version of my character made in illustrator
Simple Sprite designs
This is the first draft of a working game character I made in illustrator, there is a version with and without holding the sword.
Knight Colours
I played around with different colours and a new helmet design for the green character.
Perspectives (Now with shoes!)
This is my final version of the game character, I have done multiple perspectives. He also now has shoes. I will most likely use the side on view for my game but i might use the frontal view for cutscenes or dialogue etc.

2D Game Backgrounds

This is the full background for my demo level of the game, it consists of three stages, the idea is that the further into the forest the character goes, the deeper and darker it gets. Enemies will become harder and the environment will change etc.Forest background 3

This is a larger image of the finished background for my first stage, i have added details in the background and gradients for effect as well as keeping in simple and easy to replicate throughout the game. Forest background 2

Adobe Muse

This is a test file that I made in Adobe Muse, there is a home screen and two pages that are linked with buttons. The buttons allow you to interact with the application by changing pages, I did this by using the hyperlink option to switch between pages. Overall I found ‘Adobe experience’ easier to use because it shows you the whole wireframe when you are connecting the buttons and pages.

2D Game sprite animations

Run-cycle_V2This is my character walk cycle, I have plans to add a Jump Cycle, a swinging animation, at attack cycle, and an idle animation. It is important to have these reference for later on in production and it is also a clear method of showing off my animation cycles.

Attack-CycleV2
I don’t really like how this one turned out, the effect looks cool bit it is a bit misplaced, I also would like to add leg movement before I put it in the game.
Attack-CycleV1
This is my first attack cycle animation, i have plans to add effects and leg movement.
Idle-animation-1
This is my first attempt at an idle cycle, the character is simply bobbing up and down.
Idle-animation-2
This is the animation i will use in the game, it has a more exaggerated look to it and it involves the arms swinging as well as the legs and torso movement.

Maya Column Tutorial

For our second Maya task, we were asked to create a column. I began by making the base of the column, I made a cube polygon and set the ‘y’ scale to 0.15. I then moved the pivot to the bottom of the vertex in the middle of the shape, this allowed me to move the shape up to the surface with accuracy by using the ‘snap to grid’ feature.02-mayalt-interface-overview-12Once the base was created and in the right position I made the pillar itself, for this I needed to use the cylinder shape, I then applied the following settings to the shape in the channel box:

Radius = 0.4
Height = 8
Subdivision axis = 32
Subdivision height = 1
Subdivision caps = 1

I once the pillar was created I had to put it in place, for this I used the same method as the base, starting by moving the pivot point to the bottom of the shape and then moving the shape upwards.

 

Screen Shot 2016-09-18 at 20_25_30I then finished the column shape by adding a ‘Torus’ shape to the top of the pillar. This gives the authentic greek column look to the shape.screen-shot-2016-09-18-at-20-28-55.png

Logo Design

Logos are an essential part of a companies branding, a logo is something that a company uses to represent themselves, logo’s have to be catchy and memorable in order to attract an audience and create a recognisable brand image. In more recent times logos have become more simplified with minimalistic features, this gives a more memorable and professional look.

In current times there are logos everywhere, a good logo has to draw the viewers eye to compete with other brands and companies. Most logos you see today will include bright colours and abstract curves, these features often stand out especially when viewed digitally. The five principals of effective logo design are; Simplicity, Memorable, Timeless, Versatile, Appropriate. The first of these principals is very important as it can effect how memorable or versatile the logo is, if the logo is too cluttered or complex then it can be easily forgotten and may not fit into different environments (such as banners or products).

Memorability is something you need to think about when designing a logo because if people cant remember what the logo looks like then they will not be able to identify your business. A logo design being ‘Timeless’ means that it must not look too dated and still be effective in 10 years time, many companies have updated their logos recently to fit into the digital world. However if a logo is updated multiple times then it may no longer become recognisable, if a company is going to do this then they must make sure they keep some of the core elements from the original logo. A logo must also be ‘Versatile’ this means it needs to fit into multiple environments such as; A poster, a banner, a website, a thumbnail etc. The final Design principle is ‘Appropriate’, a logo must be appropriate to the company otherwise it is pointless. Smart logo designs will involve a product or service in their logo, this gets the viewer thinking about the product/service straight away.

Here are some examples of good logo design:

6222eab73426b4e3816641662fee5911--good-logo-design-brand-identity-design.jpg
This logo is appropriate to the service they provide, the viewer can identify immediately that this is a moving company that helps people move houses.
1200px-Logo_NIKE.svg
This logo is easily identified as the ‘Nike’ tick. It links with their motto ‘Just do It’. Their whole brand is based around motivation and progression in the sports industry, making them one of the biggest brands to date.

 

google-chrome-for-android.png
This logo is one that I find most memorable, I use the internet every day of my life and google chrome is one of the primary tools for browsing the web. This logo is distinctive for its colour scheme and unique style, circular logos are the most versatile and can be used in many different places.

 

1200px-Mountain_Dew_logo.svg
This logo is extremely vibrant (especially when paired with the drink itself). This helps it stand out from other drinks in the store. The sharp edges and contrasting colours make this logo abstract. Many other soft drink logos have bubbly, curvy designs, mountain dew have decided to embrace the vibrant colour of their drink and make a logo that reflects their decision.

Maya Lighting: Arnold Robot

In Maya this week we learned the basics of lighting in a 3d space, our activity involved lighting up a model robot that was provided for us on this website:

https://support.solidangle.com/display/AFMUG/Introduction+to+Arnold+for+Maya

1200px-3_point_lighting.svg

 

To light the robot we used the ‘Three-Point Lighting Technique’: The three-point lighting technique is a standard method used in visual media such as video, film, still photography and computer-generated imagery.

Screen Shot 2017-11-08 at 09.20.35

Screen Shot 2017-11-08 at 09.17.57

To start lighting you open the ‘Arnold’ tab on the toolbar, once you have this open you can add light to the scene. The robot model and backdrop are already in place so for this activity we needed to move the lights and make sure they are pointing in the right direction.

Screen Shot 2017-11-08 at 09.17.31
I Positioned the lights to create the ‘Three-point lighting’ effect

 

 

 

 

 

 

image2015-7-8 16-11-53
This is the finished render of the Arnold robot