Monthly Archives: October 2012

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

Water Project – The Header Graphics

Standard

Header Graphics for Water: The Source of Life.

I have finally finished the header graphics for my project “Water: The Source of Life.”

Having worked on the images for the headers, I then added text.

I only need two, but I have come up with 5 alternatives:

New York under water, with text added along with National Geographic logo.

This is not one of my favourite images of the five. I don’t think the underwater effect is prominent enough. If I was more skilled in Photoshop, I would have liked to create some decay and texture to the buildings, but this is something I will hopefully learn in the future.

Paris under water with added text and National Geographic logo

This is the first image I created and conversely the one which I have tinkered with more than the others. Again, with better skill I would have liked to create more rusting and decay on the Eiffel Tower. I do like the underwater effect here and the way the city appears to have ‘fallen’ into the rocks.

Rome under water with added text and National Geographic logo.

Although I like the light and water effects here, I’m not sure I’m really happy with the way the buildings have come out. I fiddled (that’s the technical term!) with the  foliage in the foreground to try to create more depth and texture, but I don’t think I was very successful.

I do like the way the title text came out on this one though.

San Francisco under water with added text and National Geographic logo.

I was surprised at how well this one came out. I was lucky with a good image of San Francisco to start with and the water fitted very well with the overall look.

Sydney under water with added text and National Geographic logo.

Although I made this image as an afterthought, having created the others and deciding that I ought to represent Australia too, I actually like this one best of them all.

I like the way the water has affected the buildings and I think it is the most underwater-looking one of the set. I also like the text on this, as it stands out just right.

Image References

Underwater Image 1

Underwater Image 2

New York

Paris

Rome

San Francisco

Sydney

Photoshop CS6 – Adding Texture or Image to Text

Standard

Texturizing Text

It’s easy in CS6 to add a texture or image to text. It used to be a rather complicated process is former versions but those nice people at Adobe have simplified the process for those of us who like our interesting text.

Here’s what to do in easy steps.

1) Open a Photoshop document and use the text tool to write your text. Choose a chunky font so that the image/texture will show up well.

2) Choose your texture and place this on top of your text.

3) Go to the Layers panel and hover the mouse between the image and text layers. Hold down the Alt/Opt key.

4) An angled arrow will appear (not like the one in the picture – I’m just showing where it will be.) This is when you click… and presto! The image and text meld together!

You can move the image around to get it just right.

The layers pallette looks like this:

And there you have it – no complicated masking etc. Remember to hold the Alt/opt key down though, or it will not work!

Water – The Source Of Life

Standard

Project

I am working on a web project for college.

My brief is to design 6 digital images to be placed on the National Geographic website to help promote the programme “Water – The Source of Life”

The programme is to be based on our misuse of water.

I am only required to design the graphics for this project – not the web pages.

My original idea is centred around the melting of the polar ice caps and flooding of mainland areas.

In the developed world we largely manage any sea encroachment onto land, but in the developing world, especially in parts of Asia, flooding is a big problem, as the Japanese Tsunami showed us a couple of years back.

With this environmental thought in mind I considered what some of the major cities in Eruope and the US would look like underwater, as though the sea had indeed swallowed them up.

The Sea

I started with a couple of images of bolow the sea:

My first underwater image.

I liked the circular effect of the rocks and the coral at the bottom. I thought it would look good with a city nestled onto it.

My second image.

Although this is darker in colour, I knew that I could alter the light in Photoshop. I particularly liked the way the light beams down onto the image from above.

The Cities

Now I needed images of the cities. I started with Paris.

I liked this image because it shows a number of famous monuments and who could fail to recognise the Tour Eiffel?

Then I chose Rome, which is another iconic European city:

I loved the colours in this image and thought I could get some very interesting effects by playing with the light.

Then I turned my attention to America and chose images of New York and San Francisco:

And finally I found an image of Sydney, Australia, to complete my collection:

The light is amazing in all these images.

Layers

The next job was to put the city images together with underwater images and using layer blends, create an underwater-city image.

After some work, I have come up with the following images:

Paris Underwater

Rome Underwater

New York Underwater

San Francisco Underwater

Sydney Underwater

All I need to do now is decide which two images I’m going to submit for my project.

I have to add some text, so I will see which images look best with the text added.

Image References

Underwater 1

Underwater 2

Paris

New York

San Francisco

Sydney

Rome

Typography – Graphics and Web

Standard

Typography

There are 2 main classifications of typeface:

Serif and Sans Serif.

Traditionally, letters had a degree of ‘ornament’ at the edges of the letters. This is called a serif; hence serif fonts.

By contrast, fonts without serifs are called Sans Serif.

Here is an example:


A serif font tends to have a more traditional look, whilst sans-serif is usually considered more modern-looking, but it varies from font to font.

Readability is an important issue in web design and serif fonts have traditionally been considered easier to read. This is why serifs were created in the first place – to lead the eye from one letter to the next.

However, resent research has indicated that people with reading difficulties such as dyslexia often find sans-serif fonts easier to read.

X-Height

The x-height is, literally the height of the x in a given font. It determines the overall height of the bulk of all the letters and has a pivotal role in the readability of a font. X-heights vary considerably from font to font  and so it is important to ensure that a sufficient sized font is used when writing a website. (Usually point 16 is used, but sometimes this might need to be altered.)

Headings

A Heading will need a larger and bolder typeface in order to stand out on the page or screen.

This does not have to be the same font as the main body text, but instead can be a more interesting or creative font, as only a small amount is required.

 

Type Style

Web designers use Type Styles to create a synergy on the site. A family of fonts can be used to make the overall site look cohesive.

Another function of a type style is in writing the CSS sheet (the overall style of the pages) a ‘font family’ can be chosen. This way, if a computer does not have the desired font installed, the next on the list (a similar, related font) may be selected, so that the site still looks much as it has been designed. This is called a Web Stack.

There are some websites which enable developers to use fonts and they can be downloaded as the page opens.

Font Face      Google Web Fonts

 

Distortion

Typefaces can be easily distorted and this can be detrimental to their readability.

However, some distortion can be a good thing. In titles and headings, altering the Character Spacing (Tracking and Kerning) between individual letters can create a sophisticated look and tidy-up and uneven spacings generated by the plain text.

It is not advisable to do this with te body text as it will affect readability.

 

Designing for the Web

It is generally considered that a sans-serif font is easier to read on websites. Any font which is plain, has no ornament, but which has a large x-height, is probably a good choice for body text on websites.

 

Image References:

Serif/Sans Serif Font

X-Height