Tag Archives: videogames

Website Development

Standard

For my latest project, I am creating a website called The Needle Exchange which is a knitting site for the 21st century featuring alternative, quirky and unusual knitting patterns, how-to videos and a forum for users to interact.

So far, all I have done with the design is plan a home page.

Needle Exchange home

My intention at the moment is to have videos on the home page instructing visitors on the basics of knitting, for those who have never done it before. The “How-To Videos” button will open a page which also has several other videos showing more complex techniques.

The “Home” “Forum and “Contact” buttons are self explanatory, whilst the “Patterns” button will link to a page showing sections of content, navigating the visitor to actual free knitting patterns. (Not knitted doilies, more like handcuffs or vampire plushies.)

I have used a simple, crisp layout and straightforward logo/header in order to make navigation easy. The site will feature a wide range of themes in terms of content, so i wanted to create an interface which does not clash with any of this content.

My decision to place the navigation buttons in the footer is unconventional but I feel it will work (I have seen it done successfully elsewhere) as it is clear and obvious. I am making an “alternative” themed site, so some breaking of “rules” is, I believe in order.

Advertisements

Water Project – Banner Ads

Standard

Banner Ads

As part of my project “Water: The Source of Life” I have created two banner ads for the website.

For the first, I was supplied with the text and the dimensions.

I made a gradient background, added the text and logo and added drop shadow around the text to give depth and texture. I think it gives the impression of clouds, although this was not my intention.

The second banner came straight from my imagination:

I was given the dimensions and used a photograph of a water droplet as the background. I created the text and centred it all on the page. The text, read downwards, is intended to mirror the drop of water.

In both banner ads, I made a “call to action” button. Although the whole ad would probably be ‘live’ (ie: you click anywhere on it and it takes you to the link,) it is psychologically inticing to press something that looks like a 3D button. We instinctively are drawn to such objects, so it is a good idea to add one, to let the viewer know that this (the ad)  is something clickable.

To make it, I simply drew a ’rounded rectangle’ with the draw tool, gave it a slight drop shadow and bevel, then added text on top, which I also gave a slight shadow, to make it all stand out a bit.

I am particularly pleased with my Saving Water ad, but I prefer the button on the Blue Planet ad.

 

Photo Reference:

Water Droplet

 

Water Project – The Background Graphics

Standard

Background Graphics

As part of my project “Water: The Source of Life” for the National Geographic website, I need to produce at least 2 background images.

These images will sit behind the main body of the site, so only the left and right edges will be visible most of the time.

I wanted to create something in keeping with the theme of my project – the melting of the polar ice caps and flooding of main continets and capital cities.

I developed header images of five of the biggest cities in the world underwater and added text, but the background images do not need text so they were easier to make.

First Background Image

I combined two images in the first image:

I found a picture of some Arctic Ice

Then added a photograph of some stones under water

By using a layer mask, I created a gradient between the two images.

Here it is with a Screen Grab of the National Geographic website, to see what it could look like.

Second Background Image

I did a similar thing with this background image.

Starting with an image of some an icey terraine.

I added an image of some storm clouds.

Again, by using a gradient mask I combined the two.

I then added a colour wash to bring out the colours.

And added a screen grab to see what it would look like.

I’m quite please with my images and the new techniques I have learned. I just have one more part of my submission to do and that’s Banner Ads, which I’ll cover in my next post.

Image References

Arctic Ice

Stones under Water

National Geographic

Icey Terraine

Storm Clouds