Water the source of life: Headers and incidental graphics

For the headers in this project there was always the option of cropping out the previously made images to make banners that focus on the main action as in the example below.

However I wanted to make images that took the general themes of too much and too little water from the large background images I made and make some images that were a bit more abstract and concentrated a bit more on the text elements.

Small water, large waves.

For one I decided to try and play with scale a bit and make something that represented water as something elemental that could then grow to something massive and threatening. For this I chose two images (bloody hard to find those close up water images in creative commons!)


Then it was a case of masking in the large wave in a position that seemed to match the surface of the close up.

I then duplicated the close up layer and made some refinements to the mask then added a hue and saturation adjustment layer and a black and white adjustment layer set to multiply with a low opacity to make the whole scene a bit more moody.

For the blend here I experimented quite a lot with using a small brush sampling colours from the large wave and also using a small brush with the clone stamp tool to brush in strokes that mimic the curve of the water and its movement. Next I wanted to add my logo text. I decided to try and place the text in the scene, being covered by the spray and water, a layer mask edited in quick mask mode provided the froth coming through I also used a hard brush to take away the sections covered by the wave itself.

I also brushed in some shadows to the wave where it met the text to make the whole thing tie together a bit more using a brush set to soft light. After this I added more incidental text using Agency FB which I thought had a clean sort of terminal look to it as though it was coming from a pc screen. I’m not sure if using two fonts is a crime or not, I think the main logo text is so obviously different that doesn’t look too odd.

The text on the left there I wanted to give the idea of a list of terrible (and great to watch) outcomes that was just continuing off into the fade I also gave the tag line at the bottom and the date a stroke using colours sourced from the darkest bit of the large wave to make them a bit more dramatic and pop a bit more. After that some more colour adjustments to make everything even more moody and thats it!

Crashing foam

For another image I wanted to make something quite dramatic and similar to the tsunami image I used for the 2000 x 1600 background. I decided to then make the wave seem to be crashing right into the text rather than down a street. Starting with a big wave image I tried to find one that had good lighting and seemed to be heading straight for the viewer. Eventually I found this.

Which seemed to have the impact I was after, I cropped right in on the billowing roller in the centre which worked well with the long thin header format and made a few colour and tone adjustments. Then added the main logo text.

As part of the logo text this time I also included the cyclone-ish vector swirl I came up with earlier which I think worked ok as long as the opacity was well down. Then came a layer mask to integrate the text with the scene. After this I wanted to make the water look as if it was impacting the text a little more. So I grabbed several more splash and foam elements and blended them in to the wave.

Those two elements on the left and right are the same wave duplicated and flipped horizontally. I then masked one out a bit to make it look like a bit different. On this one I tried keeping the screening date text the same as the logo text which maybe looks a little odd. There’s also some jaggedness to the font there which is really odd, I tried everything to get rid of it, resizing the text in different ways using the point slider in the character window, resizing using transform all sorts of things…odd. Maybe it was there before but didn’t show as much as the stroke is less bright. Anyhoo added some more adjustment layers on top with some masked areas to highlight the text and thar she blows.

As well as the headers I made some smaller incidental graphic elements to be used to highlight links etc. As these were a lot smaller I decided to focus even more on graphic backgrounds and text.

At first I tried stripping the whole thing down to a very simple masked and textured idea, I was very aware of not having a lot of space and not wanting to seem too cluttered. The colour scheme however doesn’t really gel with any of the previous images too well however and I suppose it’s a bit bland really.

I also tried something along these lines taking the swirling whirlpool graphic idea and making a background out of dark blue an white text. I actually quite liked this one, it’s quite dramatic, although the graphic look of it again doesn’t really fit too well with the more grungy background and header style. It also doesn’t really fit with the dust/water theme.

I did however like the whirlpool swirl so I tried this out (smaller this time) using a dusty textured background and reproducing the text with a different font (Disintegration) which is similar to Molot. I then reproduced some of the map elements in the background. I prefer the neutral colours here and I think they gel better with the other graphics I’ve made.

I reproduced the idea with an abstracted watery backdrop.

I also tried using the swirl as a clipping mask and fading it into a solid colour background which I think works perhaps even better as it doesn’t confuse the text so much. Here’s the same idea this time using a desert background and warmer colour scheme.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s