How to Create Web Graphics 8
Painting or Importing Pictures for Web Graphics
Creating Web Graphics and creating original written content for your article or post on a Blog have something in common: you need ‘material’ to start with.
When writing, you either know exactly what your topic is and the text flows from your mind right into your Editor… or you need to do some research and develop your article from there. Just as in ‘real’ life :)
So how to Create Web Graphics?
Simple… you either draw or paint your own picture from scratch – as I did with the landscape exercise below -, or you take your own photos… or you look for what you need elsewhere – observing copyrights of course. The Internet is a miraculous source for this… we’ve never ever had access to so much information and knowledge – so we are living in brilliant times that invite to produce and create and evolve without limits!
"Seascape" - Web Graphics Exercise by Bianca Gubalke
Bottomline: as you write or import a text into your editor to then put it into shape by editing it, you import an image into your Adobe Photoshop to work on it… to equally edit it.
Satisfying today’s need to View
A beautiful picture rarely falls from the sky; there’s a lot of work and skill involved… and the picture above is just an evolution from a simple “Seascape” Exercise I created looking more or less like this :
"Seascape" Web Graphics Exercise by Bianca Gubalke
The good news is that with today’s wondrous Graphic Programs and Tools and many amazing Tutorials it’s possible for everybody to reach a certain level of professionalism.
Besides, it’s essential for our online success as we move towards a ‘viewership’ rather than a ‘readership’ – meaning that we have to adapt to satisfying today’s need to View rather than to Read.
Given the well-known fact that each picture tells a story and a good picture makes words completely obsolete… and taking into account that Time seems to be the most precious commodity in our world today, the rapid increase in Visual Media Online is logic, obvious and . . . if we want to compete and survive online, we have to adapt.
Editing Web Graphics
Today, I will show those of you who are starting off with Adobe Photoshop or similar – like the free Gimp – how to edit your pictures in a way that will awaken your creative spirit and trigger a playful mind!
Editing Pictures allows you to personalize them, to give them your personal touch, a look, a style that’s your’s.
The first step however is to … clean them!
Cleaning Pictures
Depending on how and where you got your picture, once it’s imported, you want to possibly correct, change or eliminate certain items – I call it the clean-up.
Clean up your image first
In my case and amongst others, I had to clean up the shadow as you see on the enlarged portion above.
I do this by zooming into that area and painting the area with the paint brush by selecting adjacent colours and pasting them where I need them. I will go into this process in detail in another post, however, it is important to develop a critical eye and decide what you like, what you want to improve, change or enhance, what you need to get rid of and how your image should look at the end.
It’s about the Visualization of the end product.
Of course, I go fast here and one could spend hours on this issue alone, however, that’s the basic concept and nothing beats Practice. Daily practice that is.
If you are a photographer and you make the most beautiful picture of say Table Mountain, but you have an aweful telephone cable running through it all and no way to avoid it when shooting the picture, then you just simply eliminate it later in Photoshop. It’s called photo retouche and demands some skill – but no more worries as in the past… I remember those days well when a situation like that would have caused a headache!
So once the picture has been corrected and you are happy – and only then – you can move on to play with light and colours… and I show you a few screenshots here so you can simply follow my example and be surprised by the fantastic tools at your disposal… waiting to be discovered and used! Just play and experiment!
Using Photoshop Image Adjustments
If you have Photoshop – and I am using a simple 7.0 version here and not my CS3 as few people have that one and at the end of the day these principles remain the same – so please open it and go where I indicate on the screenshot:
Image … Adjustments.
You need to open a file and you need to be in RGB mode – so in case Adjustments are not active, click Mode and change there.
Image Adjustments in Photoshop
In the following series of screenshots and pictures you see which adjustment mode I used (eg. “Brightness/Contrast) and how it affects and changes the picture.
The Art is really to know your tools and use them all until you get the result you want.
You can CLICK TO ENLARGE the Demo Pictures below. Ideally, you import a picture into your Photoshop and do the same… you’ll be amazed and you’ll learn a lot!
Brightness – Contrast
Web Graphics Demo - Brightness and Contrast
To start with just create a Duplicate Layer of your original image and then go wild!
In our example above, move the tab left or right and watch what happens! Once the result is as you like it, click OK and it saves. If you mess something up you can always go to History and go to an earlier stage before the mess :)
Hue – Saturation
Hue and Saturdation in Web Graphics
Colour Balance
Colour Balance in Web Graphics
Levels
Colour Levels in Web Graphics
I normally start the entire process with the Levels.
Please note that you go through Red, Blue and Green when adjusting the levels… and additionally you can finetune with the different tones (see the 3 colour pickers).
It’s all a process of adjusting and finetuning. . . that’s what makes all the difference.
Invert
Inverting Colours in Web Graphics
Graphic Design Services
What’s your favourite? The possibilities are absolutely endless… and everybody will have his or her favourite. I just showed you a tiny bit of the process of creating your own Web Graphics – may it inspire you to learn this Art yourself – or maybe it opens your eyes to the complexity and finesse involved and the hugh value professional Graphic Design Services rightly have when it comes to creating images… to create your Image!
Please comment – ask questions or say if this helped you!
. . .
Related posts:
