From a Designers perspective it is imperative to know what the website brief is. A website which is showcasing a portfolio should have a visual edge to it, where as something which is designed for say online shopping should be as sleek and simple as it comes. Undeniably simplicity is a key which is why we reinforce it all the time, but you can also use complexities to draw an eye to anything straight away. Let’s not stray though...
Colour, is one of the awesome keys to unlocking the professional looking door. Let’s take the concept of Scottish Highlands. So your client asks you to create a website for them. He or she gives you this image, which is to be the top main image.
Just a quick note...these images have been badly compressed by the uploader, so quality has dropped quite a bit, even when you click to see it in full size.
Expect something like this to be the norm’. Where you are given something poor, and you are expected to make it look product worthy. This is where Fireworks and Photoshop come into it. Get to know these programs as much as you can, because they will make your life much easier.
If its the banner image, then it's going to be best to crop this into a landscape image, the last thing you would want is a banner image the same size as your entire page. Taking this into Photoshop, I use the crop tool. And pick a central area of focus.
I adjust both the Levels and Vibrance of the image. Make it bolder and display a better contrast.
Now we are getting somewhere. Although the image isa little too bold and overbearing we can choose to pull it back to suit our needs. I still feel at this point in time the greens are too green. Sounds ridiculous, but its true. What I mean is that they would benefit from incorporating a leaning over towards its neighbouring colours, like blue and yellow. I think yellow would give it a too earthy look, so for warmth and attractiveness I want to take the greens and make them have an element of green in them. You can do this by Going to Image > Adbjustments > Hue and saturation.
When in this box, under Master you can see that you can change things like only the blues, and Only the greens etc. Thats fine But the yellow/green colour I was to change isnt in that list. The good thing is that in Photoshop, while I have my hue/saturation tool open I can individually click a colour I want to change by clicking on the area I want to change. You will notice that when doing so, you will have a droper tool.
I should point out that the screen shot has MASTER as its selection, when I select greens and used the droper tool, it changes to Yellow2.This means when I adjust the HUE Im changing THAT type of green/yellow Ive selected without adjust anything else.
I also did the same for the Sky. Not only that for the sky, its was so cloudy, I took a wacom tablet, and pushed in some whites to make it less cloudy.
The one problem is that this image is slightly blurred. And its not sharp. So I decided to duplicate the layer, put a sharpen filter on it, then reduce the opacity on the shapened layer. This means that the sharpen filter wont go over kill, and I can manually adjust to my pleasing. Constantly clicking the eye tool on and off to check the difference. I usually go about pulling out the lights to the darks with the Dodge and Burn Tool. But ever so slightly as it can produce nice contrasts.
Say..then your client was to ask you to create the website though with a purple blue theme. To give it all a cool look. Well you can change your Hue/Saturation to Colourize. So I created a duplicate layer, and gave it a colour of purple.
Then dropped the opacity of that image, to 40% and let the original colours come through. After that I just change my Levels a bit to bring back some light. And added an overlay image with Tartan and added some text.
So there we go. A quick example of how an average image can be manipulated to be used as a banner for a website without going over the top in colour.
IMPORTANT TIP!
Oh and a quick tip! When using images, get as big as resolution as you can. Sizing an image down makes a nice blend of sharp pixels, but sizing a small image up gives you a horrible blurred image. So never take a small image, and size up. If the image you have isnt big enough. Then dont use it!
No comments:
Post a Comment