Archives for category: Project 2
While wondering what to base my work on I kept being drawn to ocean pollution. I thought putting unlikely things together would give most impact. One of the ideas I looked at was putting someone that was used to boating somewhere like Oxford, into one of the boats in an area affected hugely by pollution.
In the end I decided to relate my header graphics to the problem of oil pollution in our oceans. The terrible effects on marine life, us and the rest of the planet, are huge.
Would more be done if we were affected more directly, like the millions of animals rescued from the beaches coated in thick layers of oil?
While searching for images I came across a sculptor, George Segal, whose piece of work ‘Rush Hour’ inspired me to make my first header. It looked to me as a group of people walking out of an oil slick would look.
In this image I selected a path around the figures using the pen tool and put it into the layer above a picture of an oil slick. I adjusted the levels to make the figures look darker and adjusted the saturation. I used the blur tool to take some of the highlights off the figures.
To make them look as if they are walking out of the slick I used the blur tool to darken the area around their feet to look like shadow.
I downloaded a type face called ‘Travel typewriter’ as it tied in with the idea that these were ordinary city workers directly affected by the oil.
For the second two headers I downloaded a face called ’28 days later’. This has an eroded grungy look to fit in with the dirty feel of the oil covered workers.
George Segal also did a piece called ‘Holocaust’ which I used in another two graphics. I downloaded a type face call ‘Abite’ that looked like splattering oil.
I used the quick mask to darken the figures to look as if they had oil on them, using colours from the oil with the dropper tool and then the paintbrush.
I also decided to base my three smaller banners on pollution. I used pictures of oil and polluted water contrasted with a bright child orientated image cut out and overlayed. I wanted the images to be bold and stand out linking the childlike activities with the dirty water, something most of us would be very uncomfortable with. I cut out the picture of a shell and put a slight drop shadow under it, reducing the distance and making it light so as not to be too dominant.
I used a pool of polluted water for this banner with a child’s beach ball cut out and overlayed in the same way.
We started looking at banner ads on the web. I picked out a few that I thought worked well. Those using a strong colour background, a strong image and simple type I think stand out more.
We then designed three of our own using ‘The Blue Planet’ as a title.
For this one I used a blocky sans serif face with a slight texture and used minus tracking to get the letters closer together for a stronger graphic. I used a muted blue to give a serious, calm feel to the ad. I faded in the picture that I found of crystal clear water, using the layer mask at the bottom of the menu. I then used the gradient tool set to black and white, I held the shift key down while putting the curser inside the edge of the picture and dragged in to where I wanted the merge to stop.
I used a bold sans serif face for the header with reduced tracking so that I could get the letters bigger and bolder in the narrow width.
I used Rockwell for the strapline, as it is still a bold face but has a serif to contrast with the heading. I added tracking to make each line the width of the ad for maximum impact in a limited space.
I did the same with the tracking in the rest of the text but also increased the leading to balance the ad. I made the words Ocean and water larger to give them more emphasis as this is what the ad is promoting.
Here I kept ‘The blue planet ‘ in one line again using a bold sans serif face for impact. I also merged the picture into the background, using white so that the top of the letters made an interesting shape at the top of the ad.
creating and experimenting with type on Photoshop.
In this workshop we were asked to design different options for type-based header images for a clean, sophisticated business site called, Brighton Business Solutions.
Using font, leading and tracking/kerning techniques I designed the following three graphics.
I used shades of blue as this conveys seriousness, it has also become associated with steadfastness, dependability, wisdom and loyalty. People tend to be more productive in a blue room because they are calm and focused on the task at hand.
I made ‘solutions’ the dominant word in this instance as this for most people would be a positive word for their problems. I have faded the word Brighton behind the other words as this although important for some, if looking for a local company, is not the most important factor.
I have used a very simple sans serif face to go with the larger serif face, tracking it a fairly large amount to give a nice clean block effect and also to create a sophisticated image.
In this case I used the ‘Brighton’ as the dominant word, as for many people using a local company is of prime importance for convenience, it also feels friendly. I have used capitals for ‘Business solutions’ to create a serious, business like look. All the type is clean and simple to give a classic hard working impression for the company.
I used a bold simple face in this example removing all the leading to create a neat block. I chose a tint of the main blue so that the letters could overlap and still be read easily. I have taken the word Brighton out of this example so that the header can be used in different offices across the country.
I then made three different header graphics for a t-shirt company called: South Coast Tees.
For the first one I chose and downloaded a handwritten typeface from Dafont, called ‘Sean’s hand’. I felt this gave an informal feel to the header, suitable for younger people who would be buying T-shirts. The colours I chose are bright, blue for the sea and sky of the south coast.
For the second one I chose warm colours, orange being the colour tied most to fun times, happy and energetic days and warmth. Perfect for the south coast. I downloaded a typeface called Bebas Neue, a new blocky face. I reduced the tracking right down, this with the use of all caps and the lower case ‘tees’ for contrast gives a current look. The use of a handwriting font for the strapline also helps to give a relaxed feel.
I chose a background colour for this header, a bluey green which is calming, also very pleasing to the senses. I downloaded a typeface called Polar shift, reduced the tracking and used caps to give a bold feel. I contrasted the sans serif face with a serif but also bold blocky face for the rest of the text.
Type experiments
I chose a short extract from a novel called ‘Room’ about a boy born in and living in one room for the first five years of his life, only knowing the room and his mother.
I have experimented with different type faces leading and tracking.
The excerpt is written in the voice of a five year old, so I used a headline font that looks like it could be cut out of paper by a child. I used a sans serif face for the text with a large amount of leading.
In this example I chose a serif face for the text with increased leading and a very simple serif face for the heading reflecting the simple nature of the room and life of the boy in the room.
I used a very bold blocky typeface for the header reflecting the simpleness and squareness of the single room. I decreased the tracking to give a closer, more claustrophobic feeling. I chose a simple childlike typeface for the text because the piece is written in the voice of a child, with a small amount of leading which again gives quite a closed in feeling.
I used a header that has a worn out feel to it, as everything in the room must have been. I have used a serif face with a large amount of leading for the text.
The first class workshop was to make two colour mood boards which were monochromatic. I used Google images, one for green, one for purple.
For the second two I found pictures using Krazydad, Flickr, with colours suggested by the words “Hot summer’ and ‘Rain’.
While trying to decide which title I would work on for the second project I was drawn to pollution and the food chain as this a subject constantly in the news and affecting all of us without exception.
Oil pollution is particularly distressing as it infiltrates in so many ways and disperses quickly and vastly.
Oil wastes enter the ocean from many sources, some being accidental spills or leaks, and some being the results of chronic and careless habits in the use of oil and oil products. Most waste oil in the ocean consists of oily stormwater drainage from cities and farms, untreated waste disposal from factories and industrial facilities, and unregulated recreational boating.
It is estimated that approximately 706 million gallons of waste oil enter the ocean every year, with over half coming from land drainage and waste disposal; for example, from the improper disposal of used motor oil. Offshore drilling and production operations and spills or leaks from ships or tankers typically contribute less than 8 percent of the total. The remainder comes from routine maintenance of ships (nearly 20 percent), hydrocarbon particles from onshore air pollution (about 13 percent), and natural seepage from the seafloor (over 8 percent).
Effects on the water
Oil spills affect water in a variety of ways. When oil is released into water, it does not blend with the water. Oil floats on the surface of salt and fresh water. Over a very short period of time, the oil spreads out into a very thin layer across the surface of the water. This layer, called a slick, expands until the oil layer is extremely thin. It then thins even more. This layer is called a sheen and is usually less than 0.01 mm thick.
Oil spills on the surface of the water are subjected to the whims of weather, waves and currents. All these natural forces move slicks across the surface of the water. In addition, these forces stir up the oil slick and also control the direction the slick moves in. An oil spill far out at sea can be carried ashore by wave and current action. Rough seas can split an oil slick apart, carrying some oil in one direction and more in another. In contrast, a near shore oil spill can be totally controlled by currents and wave action that causes the oil to come ashore, damaging marine shoreline habitat.
Different types of oil react differently when spilled. Some evaporate in small amounts while others break down quicker. After the sheen breaks down, a moderate amount of oil will break down and be deposited on the bottom of the ocean. This usually happens in shallow water. Certain types of microbes will break apart and consume the oil, but this in no way makes up for the damage done during the spill. In addition, when oil breaks apart and sinks to the ocean floor, it contaminates the underwater habitat too.
Here are some posters I found which were done after the BP oil spill.
I looked at the list of image subjects and started trying to decide which title evoked the strongest imagery. I merged images during this process and started to sketch down any ideas that came to mind.
When thinking about drought and water distribution, strong images associated with the subject were, firstly, an obvious one, women carrying pots for miles collecting water for their families -or rows of people waiting at stand pipes with bowls and pots of all sizes. I kept wondering how I could use an image of a tap in an interesting way because of its strong graphic shape and the fact that we turn it on without thinking, having an endless supply.
During the workshop I found images of a pyramid and some flat water that could be used to look like flood water. I removed the sky from the picture of the water by selecting it with the magic wand tool and merged the two pictures in two separate layers. I used the colour balance setting to give the water warmer colour tones to fit with the pyramid. I used the clone tool to add a section of the water surface.
For the second experiment I found pictures of a desert and water spouts. I chose two that I thought would work well together. I cut out the water spout by making a selection around it using the pen tool. By holding ‘alt’ and clicking you are able to move the handles in at each point making a smoother line following the image. I removed the motor bikes on the desert picture using the ‘clone’ tool. When I had merged the two layers together I put a ‘blur’ filter on the water spout and then ‘more blur’ to make the picture look more realistic. I used the colour balance to make the water more yellow, to fit with the desert and removed some of the holes left in the water with the ‘eraser’, set on very low opacity.
I then merged a water and street scene. I was looking for a suburban garden but couldn’t find anything appropriate. I erased the sky in the sea picture to make it transparent. I used the transform, perspective setting to change the angle of the water to fit in with the street. I used the burn tool to make the edges darker and used the levels to darken the sea. I used the colour balance mode to add more yellow and green to the sea. 
I started his project looking at examples of web pages. I looked on coolhomepages.com…..
I then looked at inspiring web sites using colour as a strong theme.
Colour in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in someone else. Sometimes this is due to personal preference, and other times due to cultural background. Colour theory is a science in itself. Studying how colours affect different people, either individually or as a group, is something some people build their careers on. Something as simple as changing the exact hue or saturation of a colour can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.
Web design which achieves successful marketing results is sensitive to the cultural, instinctual and iconic meanings of colour in relation to the product being promoted and considers the cultural backgrounds and gender of the targeted clientele. Adding textures too can alter colours – a roughly textured surface makes a colour seem darker, while a smooth surface lightens the same colour.
Warm colours advance and so are often used on buttons or anything that needs to be clicked on on a web page. Cooler colours do the opposite and recede.
Warm colours
Red (Primary)
Warm colors include red, orange, and yellow, and variations of those three colours. These are the colours of fire, of autumn leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.
Red and yellow are both primary colours, with orange falling in the middle, which means warm colours are all truly warm and aren’t created by combining a warm colour with a cool colour. Warm colours in design reflect passion, happiness, enthusiasm, and energy.
Red is a very hot colour. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. It has been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.
Red can be associated with anger, but is also associated with importance (the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).
Outside the western world, red has different associations. For example, in China, red is the colour of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the colour of mourning. Red is also associated with communism. Red has become the colour associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.
In design, red can be a powerful accent colour. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great colour to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.
The darker shades of red used in these three sites give them all a powerful strong and punchy look.
The very bright red on these sites give a sense of energy and movement.
The red accents stand out against the backgrounds, and give strong, clear feelings to the sites.
Orange (Secondary)
Orange is a very vibrant and energetic colour. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.
Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.
The dark orange used on these sites acts as an almost neutral and grounding colour .
The orange accents and blocks here add a lot of visual interest and make other things on the page stand out. It give s a feeling of vitality.
Yellow (Primary)
Yellow is often considered the brightest and most energizing of the warm colours. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, (calling someone yellow is calling them a coward).
Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.
In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a colour for merchants.
In design bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.
The accents of yellow here used with black look strong and give energy while really standing out.
The use of large blocks of yellow on these sites make the other parts of the sites stand out. It gives energy, vibrancy and warmth.
Cool colours
Cool colours include green, blue, and purple, are often more subdued than warm colours. They are the colours of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.
Blue is the only primary colour within the cool spectrum, which means the other colours are created by combining blue with a warm colour (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Cool colours in design give a sense of calm or professionalism.
Green (Secondary)
Green is a very down-to-earth colour. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.
Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.
The muted greens used on these sites give a natural, down to earth feeling.
These sites use bright green for vibrancy and freshness.
These sites use more muted greens which give a restful calm feeling.
Blue (Primary)
Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).
The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.
The subtle blues used here make these sites refreshing, cool and sophisticated.
The blues used here are vibrant and lively.
The blues used here are subtle and quite muted giving a calm feeling.
Purple (secondary)
Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination.
In Thailand, purple is the colour of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.
In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.
Almost 75 percent of pre-adolescent children prefer purple to all other colours, making bright purple effective for promotion of children’s products. Light purple is useful for feminine designs. Excessive exposure to purple may cause people to become sullen, withdrawn and ill-at-ease with their surroundings.
The light and medium purples here work well to convey a sense of creativity. The more muted tones give a rich feel.
The lighter shades of purple used here give a young fresh feel.
Neutrals
Neutral colours often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.
Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.
Black
Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.
White
White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other colour. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.
In design, white is generally considered a neutral backdrop that lets other colours in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colours that surround it.
When choosing colour schemes for your web design, depending on the effect and mood you are tring to create, you can choose complimentary colours (opposite each other on the colour wheel) for excitement and tension, analogous (next to each other on the colour wheel) for harmony. A monochromatic site would use tints of a single colour and achromatic would use no colour.
Multicolours used on your site is known as triadic.
Hexadecimal
Also referred to a “hex” numbers, they are a base-16 numbering system used to define colours online. Hex numbers include the numerals 0-9 and letters A-F. Hexadecimal numbers are written in three sets of hex pairs. Because screen colours are RGB (Red, Green, Blue), the first pair defines the red hue, the second pair defines the green hue, and the third pair defines the blue.
Colours are made up of 3 sets of RGB numbers representing the amount of Red, Green and Blue contained within a color. These colors are represented as hexadecimal values.
For example, the hexadecimal numbers for black is #000000. The first two numbers (00) represent the amount of red the colour contains. The second two numbers (00) represent the amount of green and the last two numbers (00) represent the amount of blue the colour contains. When a colour, such as black, contains 00 amount of red, green or blue, this means it contains no amount of that colour or 0%.
However, colours containing RGB values of FF contain the most amount of a colour or 100%. For example, the hexadecimal value for white is #FFFFFF, which means it contains the most amount of red, green and blue.
The hexadecimal numbers for red are FF0000. If we break down the hexadecimal numbers, we will find that the colour red contains FF amount of red, which is the highest amount. It contains 00 amount of green and 00 amount of blue, both of which are the lowest.
Web safe colours
Web safe colours are sets of colours that will not be altered (dithered) when shown on browsers running on a 256-color browser. These sets of colours are initially selected by Netscape for use on their browsers.
Web safe colours seem to be irrelevant for today’s computers, but back when the web was invented, many people still use graphics card which supports only 256 colours (or less).
255 is the maximum values for an 8 bit number (i.e.: 255 is 28).
Of the 256 possible colors, there are 216 that is designated to be web safe colors; The remaining 32 colors are used by the operating system (such as Windows 95, or MacOS) and are reserved for the color of title bar, desktop, menu bar, etc.
Plainyjane's Blog 
