Creating Web Graphics for Nutrinsider 4
Web Site Design
In our previous article we spoke about the Briefing Phase when Client (say an Agency or anyone who contracted you for the job at hand) and the Artist (say the Illustrator, Graphic Designer, Digital Artist etc) get together and the Client conveys what he expects from the Artist – and when. The Artist still has the choice to say ‘no’ if the Client doesn’t know what he wants, is unrealistic in expecting too much for too little money – brief, if no consensus can be reached.
Don’t mess up a good reputation with a bad job, rather say ‘no’ first… and find the next Web site Design Job!
Having said that, in our “Nutrinsider” example the case was clear and the next phase was the…
Web Graphics for “Nutrinsider”
After having gone through Phase 2 – Execution of the ‘Job’ (Web Graphics Design) – in the earlier article, here are the graphic design elements I had to create based on the colour scheme we had established together, namely :
BLUE 0000B3 and GREEN 28AE78.
1. The Background 2000 x 1000 pix (to personalize both Nutrinsider and Twitter Account)
2. 1 Ad 515 x 300 pix (Default Featured Category)
3. 1 Ad 300 x 250 pix
4. 2 Banners 468 x 60 pix
5. 3 Ads 125 x 125 pix
That’s to start with… so here we go!
How to Personalize your Website (Nutrinsider and Twitter)
First Impressions Count
I started with creating a Background for Nutrinsider and Twitter using Adobe Photoshop.
As said earlier, I had designed an attractive background I really liked much earlier and it immediately jumped into my mind when the background question came up. I was looking forward to using it!
However, there were 2 problems :
1. It was obviously not the right size – in fact it was 600 x 450 pix – and I needed 2000 x 1000. So I had to find a solution to that.
2. It was not the right colour – it had to blend in with our colour scheme. I had to solve that too…
No problem!
Resolutions and Screens
The only problem actually is that people don’t see the same thing when looking at a screen – depending on their resolution and many other factors. It’s very irritating for the designer bearing in mind that we want to create harmony and flow on the entire page for any visitor and viewer. I guess that many people are not even aware of that.
Additionally, my background had to fit in well not only on “Nutrinsider” (the Semiomantics NewsCast Script) but also on Twitter… and I just had a comparatively small picture.
Colours
Playing with colour and values (light and shadow) until the desired result is achieved is one of the most important and basic skills any artist needs to control – whether he mixes his own paints (as I did at the time…) or uses Graphic Computer Programs like Adobe Photoshop where there are unlimited possibilities to get the nuance or light you want where you want it – provided you know your tools.
It’s an Art one keeps refining through constant exercise and ‘doing’… like a pianist practices daily…. And yes, it needs a good eye, taste and the more experience the better. Practice… practice… paractice… but this is where the difference lies.
Personalize your Twitter
Sure, on Twitter you can “tile” – which was a possibility as the picture would just repeat itself like a pattern… but I did not design the picture for this purpose (there are even special programs to do this for say Textile Design). Also, I love to work with ‘free space’; I’ve done so since my childhood and it was often compared with Japanese Art. My Artwork needs to ‘breathe’… and PC screens need to be filled up ad infinitum as each sq inch of this “most expensive real estate in the world” has its price.
Reminder Madame: this was a’ job’, not about me, it was about fulfilling the demand within the timeframe… :)
I did not want to distort the original either as I just liked the variations of forms and shapes that I had carefully crafted a while ago. So my solution to the matter was a simple, yet a little time-consuming one: I arranged multiple copies of the same picture in a way that pleased me, merged them all into the requested format (2000 x 1000) and then I painted and smoothed and erased and layered like hell LOL… until it looked good.
Sure, one can spend days on refining things – however, it is also important to see what is essential – and here I had to deliver a good result within a very short period of time to satisfy the Client.
"Nutrinsider" - Twitter Design Demo by Bianca Gubalke
Optimize your Twitter
As you can see on the picture above (click it to see full size), I had measured the exact spaces where the background would be visible and where the Twitter Text would cover it.
The fat, blue NUTRINSIDER TITLE also had to be inserted in a way that not only I could see it but also people on Vista using wider screens – so I had to get feedback before resolving on the best solution “inbetween”.
Believe me, I do not like compromising when it comes to Art and Design… but here I have to bow to the Client’s demands… and this means the best possible solution for ALL viewers – meaning on big screens, medium screens, small screens… not to speak of iPods…
As you can see on the enlarged vision there is a vast difference between what I see on XP and a normal screen and someone on Vista… and as I discovered, my friend Zo Nicholas in the UK sees even less than I do.
Now that’s what I call a ‘squeeze’… but we solved it, didn’t we?
And I had Fun doing so… always being a step ahead in my imagination of what was to come next. . .
Twitter Personalized by Bianca Gubalke
See the current result below…
As you can devine from the above I am experimenting with some sexy additions that I will be showing on my TWITTER in due time… currently featuring my Twitter Design for Laetitia Paris (ZOOM TERRE).
If you click on the picture it brings you directly to the site with its increasing followership – join in if you wish!
"Nutrinsider" - Twitter Personalized by Bianca Gubalke
I will show you shortly how the Background fits perfectly into “Nutrinsider” as well.
Creating Web Graphics for Nutrinsider 5
So this part of the Job was resolved… which brought me to the next… and you will see why I started playing with the beautiful ‘Shape” that sneaked in on Twitter… as it all has to fit the Purpose… which is about the Joy of Living a Healthy Life, Activity, Vitality and … you know what I mean?
Any questions up to this point please simply comment.
I will soon be back showing you exactly how I did the next Web Graphics for “Nutrinsider”.
. . .
Related posts:
[...] Creating Web Graphics for Nutrinsider 4 [...]
[...] Creating Web Graphics for Nutrinsider 4 [...]
[...] Creating Web Graphics for Nutrinsider 4 [...]
[...] Creating Web Graphics for Nutrinsider 4 [...]