Spring has finally come to the “Richest Floral Kingdom in the World” here at the Cape of Good Hope, at the tip of Africa.

Flowers in my Garden

The Flowers in my Garden are literally exploding in fireworks of colours and light…
For me it’s a divine invitation to vanish in Nature to merge, explore, admire and let my imagination fly while capturing all those magnificent expressions with my Digital Camera.

Web Graphics

Web Graphics breathe life into the Web Design of websites and blogs, and as we are currently running a specialized Web Design Workshop leading up to the monthly Ycademy Seminar on 26 and 27 September 2009, I am experimenting with a black, white and red design elements. . . a colour combination I’ve always been passionate about and I just could not resist these colours . . . isn’t Nature the highest expression of Art!

[singlepic id=17 w=320 h=240 float=center]

[singlepic id=16 w=320 h=240 float=center]

[singlepic id=15 w=320 h=240 float=center]

Leucospermum Reflexum

Leucospermum reflexum are part of the Proteacea genus and indigenous to the Western Cape. I have various species of this extremely beautiful shrub in my garden, up to about 3 meters high. Some of them I grew myself from cuttings and I will very probably come up with more pictures in the future – besides these extraordinary colours I adore their  delicate appearance in parts alternating with strength and solidity – like having their wiry heads in the air while being firmly grounded!

Finally!

My Digital Camera

I got my digital camera and took some quick pictures in my garden, enjoying the very first rays of sunshine after days of torrential rains… and of course I had to honour my special little buzzing friend… the one that gave me my nickname, the . . .  “B” ! And most definitely as passionate about fragrant flowers as I am – here a beautiful pink Podalyria calyptrata (also called sweet pea bush) that I initially grew from seeds I collected in the mountains.

"Pictures from my Garden" by Bianca Gubalke (1)

Click on the thumbnail and you will see it larger. The original is  3000 x 4000 pixels at 300 resolution… but when we insert our pictures into a website or blog, we have to bear in mind the size and weight of a picture – which translates into speed when loading and opening a page. We have to weigh this against the quality of the picture as when we change the resolution, we lose pixels and…  quality.

Further down, I show the same picture – but the whole picture this time – inserted with a width of 480 pixels. I did not change the picture in any way,  just added the reflection to present it in a more appealing way.

However, as I lowered the resolution it appears somewhat flat if compared with the cuddly bumble bee we can almost touch in the enlarged overlay of the thumbnail here – just click on it and you see what I mean.

Creating your own Pictures

If  the creation of Web Graphics and Images is part of your profession as a Web Designer, then you either have to outsource and buy the pictures and photos you need for your Web Design, website or blog – and while there are literally millions of pictures and relating picture sources out there, this may be very time consuming as you obviously want the picture to match your inner vision of what you want.

Alternatively, give yourself the means of creating your own Pictures. This may be just as time consuming, however, if you are passionate about Photography and Pictures, and you are willing to invest time and effort to learn and refine the necessary skills, then it’s definitely the way to go.

"Pictures from my Garden" by Bianca Gubalke (01)

Website Design Tools

You don’t need to become a top photographer – that’s another brilliant profession in itself – you are a Web Designer and working with Graphic Programs and Tools like Photoshop. You are equipped for manipulating pictures in any way you want.  We went through some basic tutorials on “How to Create Web Graphics” starting  HERE that may be helpful if you are starting out.

I see my Digital Camera as an important Website Design Tool that allows me to create a consistent flow of pictures I will need for my work. Besides, it inspires and motivates me… always giving me some new ideas to explore… and when I write some specific content where a picture is needed, I just go and take it myself. It’s fascinating!

Besides. . . I love spending time in Nature and I find the beauty and abundance that surrounds us … and that we so rarely take time to explore and admire … absolutely breath-taking and incredibly energizing and fulfilling!

Digital Cameras

The world of Digital Cameras today is truly overwhelming. . . and changing extremely fast.

If you do not yet have a digital camera, just shop around on the vast market of digital cameras to see what best fits your purpose and budget.

Once you have the information, go to the local shop and put your eyes and hands on it, feel the weight, how it fits into your hands, how practical it is, how you relate to it. It needs to become a prolongation of your eyes… so identify with it!

Personally, I enjoyed that process as I found so many interesting Digital Camera Reviews and Photo related articles, that it really transported me back into those good old days when I spent days and nights in the dark chamber preparing my black and white pictures. . . sometimes almost collapsing from the poisonous vapours of the chemicals!

These days are over. . . and the era of digital photography has made things incredibly easy and achievable for the normal user as well as those who use photos to create something else – like Artists and Web Designers.

So which Digital Camera did I choose?

Bianca Gubalke Advertising

NIKON Coolpix P90

As I explained a while ago HERE. . . I went for a NIKON Coolpix P90!

Although I worked many years with Olympus and they have excellent and stunningly designed new digital cameras on the market – although not yet down here in South Africa when I was ready to buy mine -, it’s another price category and… once I had the Coolpix in my hands down here at the local store in Noordhoek. . . it was a perfect fit and my decision was clear!

Besides. . . I got excellent personal and professional service in that Shop from a salesman who was passionate about being a photographer himself . . . plus an even better price than on any South African online site I had studied.

Good to know one’s choices and. . . make the right one!

I’m happy with my Nikon Coolpix P90. . .  my first own Digital Camera.

. . .

With the Internet being the big equalizer, the differences in Branding between large corporate companies and normal individuals like you and me vanish when it comes to achieving visibility and recognizability on Google. . . in other words, building one’s Brand on the Internet is something everybody can achieve provided the basic principles when planning a Web Design are being observed.

"Dali seen through my Eyes with Rose" by Bianca Gubalke

Brand Recognition

What is Brand Recognition?

Well, coming back to my favourite example – Salvador Dali – just look at him and his massively exaggerated yet devine moustache! It’s been written about, talked about, laughed about… it was in the news at the time and even today it is extremely distinguishable as you immediately recognize Dali even without Dali! That was perfect Brand Recognition Dali style. . . actually, it still is!

As a less mundane example: you immediately recognize Coca Cola by the unique shape of that bottle… or think of McDonald’s “M” logo in yellow and red that runs consistently throughout the entire product line, the outlets, the packaging, the advertisements to the uniforms and outfits of the restaurant crews… almost to the colour of the nailpolish one could say… which is taking it a bit far but that would be very daliesque…:)

So imagine being a Web Designer for a client as extravagant as Dali!

While I cannot guarantee for your continued sanity, I am sure he’d define and prescribe each step in a clearly defined way. Dali always knew what Dali wanted! I admire customers who know who they are and what they want… and who already have a well established, trusted Authority, Name, Image – in other words Brand Recognition.

In this case there is no searching, no guesswork; you get very clear guidelines and the challenge for you as a Web Designer is to translate what the customer defines and to excel in the execution. This is what is expected, this is where you build your reputation, your name. In Web Design. . . where you establish YOUR Brand. . . that is.

Corporate Identity

This is however rarely the case with people who haven’t thought too much about who they are and what they really want, never mind their Brand, Name or Corporate Identity. In fact, they may not even be aware of its importance. . .  so why bother?

Here’s where you should show your Professionalism! Here it’s about your Name!

Why?

You want to do a good ‘job’, don’t you? A good result will help build your name as a professional in Web Design; if you deliver a lousy ‘job’ your reputation goes down the drain with it… so here’s where you have to be realistic, strong and clear!

As the Web Design of the Website to be created should reflect the customer and his values and communicate with the right target audience, it is worth doing some serious brainstorming together before anything else, to dig out the essence of what the customer wants to communicate, or what his product should express or to which target market it should appeal, meaning who it should attract… bearing in mind what the competition does and what a market analysis reveals – in order to find the basic design platform from where the website can be developed as regards to colour, fonts, style, layout… possibly based on and integrating existing titles, slogans, logos etc.

If Advert Design, Banners or Web Graphics are to ge added these will be aligned to the same basic  ‘scheme’ following the clear goal to build a positive and reputable Brand Recognition that distinguishes itself from what else there is – fullstop.

Branding

To close off this article… it is well documented and proven that the Branding or Brand Name of a company represents up to a whopping 80% of its value. It is based amongst others on Communication Behaviour and how customers perceive it, trust it, buy from it and stick to it, year after year, generation after generation – also called Brand Loyalty.

Ergo, a customer’s existing Branding is the most important input source for a Web Designer in the Planning phase for a new Website… and if it doesn’t exist, it’s well worth encouraging the Customer to seriously invest into its creation.

. . .

Web Graphic Ideas are based on our Imagination, our Senses and our ability to open ourselves to impressions and sensations… and then visualize and express these mental images with the tools we use, in my case graphic design programs like Photoshop and others.

Web Graphic Ideas

The more I experiment, play and work on my skills while focusing on specific topics or themes, the more my imagination spins and interesting ideas and concepts develop.

"Dali through my Eyes" by Bianca Gubalke

Dali through my Eyes

“Dali through my Eyes” is a direct result of all the work that went into “How to Create Web Graphics” and experimenting with ‘fades’ and ‘reflections’.

There’s so much potential in our creative work and it’s well worth focusing on one theme and get a feeling of excitement and fulfillment from good results. . . before moving on to the next.

Attention! Dali is Watching!

Attention! Dali is Watching!

]]> http://webdesign.biancagubalke.com/web-graphics/web-graphic-ideas/feed/ 0 http://webdesign.biancagubalke.com/web-graphics/salvador-dali-portraits/ http://webdesign.biancagubalke.com/web-graphics/salvador-dali-portraits/#comments Tue, 08 Sep 2009 15:46:59 +0000 Bianca Gubalke http://webdesign.biancagubalke.com/?p=202 Dali Portrait

I have always been an admirer of Surrealistic Art…  and its probably most famous as well as eccentric representative, the Spanish Catalan painter Salvador Dali (May 11, 1904 – January 23, 1989).

Dali Quotes

Dali had in excess what many artists lack: an unequalled and highly original way to promote Dali. . . if not the “Dali Universe”.

Besides, and what just the real “Dalinados” probably know, he had an incredible talent to write and I personally believe that he lived in a fantastic era for that, meeting and cooperating with brilliant artists in other creative areas, eg. cinema (Luis Buñuel, Alfred Hitchcock), photography (Man Ray) and Fashion Design (Christian Dior, Elsa Schiaparelli) to name just a few.

What a buzzing world of hyper-creativity!

When I recently came across one of the many thought-evoking Dali quotes it tickled me to react … I knew my time would come… sooner or later :)

Dali Photos

Salvador Dali

Sooner happened rather soon… when due to the usual serendipity I experience in all areas of my life, a friend sent me a tiny Dali Photo with two striking features:

~ the exaggerated expression in “His Master’s Eyes”  as you see right here . . . and

~ the Dali-only moustache with an upward twirl that defies even the slightest note of humility!

The Creative Process

I don’t know who took that photo and it seems there are a whole number of versions on the net, however, that ‘look’ inspired me to firstly do some Advertising for YORGOO Booster HERE… and, as we are developing our web presence in Web Design – which includes Graphics and… Art – I started experimenting with the exact features in Photoshop that I described in my “How to Create Web Graphics” series . . . bearing in mind that I am an Artist and just constantly learning and refining my online skills – and sharing the results with anyone who enjoys the same journey.

From my first traditional exhibitions, I always work in series… as it’s the creative process itself that interests,  inspires and often surprises me like a child.

Dali Portrait by Bianca Gubalke

So all I started out with was the picture above and the quote.  Here are some examples of the series of transformations under the title “Dali Portrait by Bianca Gubalke” that I have come up with…

Dali Portrait by Bianca Gubalke - Transformations 1

So you wonder where Dali is in here?

Just wait. . . he’s all over, above and below and omnipresent . . . in typical Dali-style!

Dali Portrait by Bianca Gubalke - Transformations 2

. . . that quote still makes me smile. . . and smiles bring colour into our lives. . .

Dali Portrait by Bianca Gubalke - Transformations 3

These might make good ‘foulards’. . . imagine those fine colours on silk! Obviously, I would polish the blue-white bevels around the outer edges a bit for more harmony, but the basic layout and direction is here.

Actually. . . this reminds me of when I won the annual national Competition for Textile Design in France by accident. . . as what I did then was “Art Mural”and the closest I came to textile design were my large cartons for Gobelins :)

Dali Portrait by Bianca Gubalke - Transformations 4

And all I started off with was that one little picture at the top … from where I created this series of portraits (each portrait is much larger that you see it here or even through the zoom)…, which then became the material for my “Transformations”.

Dali Portrait by Bianca Gubalke

Remember:

“I do not paint a portrait to look like the subject, rather does the person grow to look like his portrait”.

And if this ‘daliesque’ experiment inspired YOU to get going with your own Artwork . . . just wait for the next post :)

How to Create Reflections 2

In “How to Create Reflections 1″ we discussed a very quick and easy method of using the Gradient Tool.

1. Select, Mask, Blur, Transform

However, when I have more complex images where I want to be able to intervene on more levels if needed – say editing the colours, applying various filters or scaling the selection, I start off exactly as we did in our “How to Fade Images” exercise, but once we have blurred our selection for the reflection, we go to Edit > Transform > Flip Horizontally (as we did with the word in the earlier example).

TIP: What is important here is that we clean up everything around the selection – which is not a problem in this example as we are using a white background, but it could well be something else.

2. Inverse Selection, Clean the area

The trick here is that you inverse the selection and then use a large brush eraser to eliminate all that you don’t want, while the selection itself is protected through the inverse selection command. You can see this on the screenshot below, with the ‘marching ants’ running along the outer frame as well as the selected part we want to transform into a reflection… these litte dashes. I passed the large eraser brush over everything that’s white here to ensure it’s clean.

Once all is clean, click on the Move Tool and select Apply.

3. Exit Quick Mask,  New Layer via Cut

Now we Exit Quick Mask Mode as before and go to Layers > New Layer > Via Cut.

4. Position and Edit

What you see now is the reflection layer neatly underneath your (untouched) image and now you can position it as close to or as far from the image above as you like.

Once you have the position right, experiment with all sorts of editing tools, colours, distorsions and filters to get exactly the result you want.

Personally, I wanted a very sublte reflection so I worked with various blurred layers. As the photo caused a bit of a dirty colour, I had to adjust the colour slightly to get something fresh and subtle as I wanted here.

Reflections of simple words and shapes as we did in “How to do Reflections 1″ are always sharp and easy to do, however, once the image is more complex as the one below, and especially if it includes photos, it needs much more finesse in adapting it to get the impression you want. That’s why I added this slightly more tricky version as well for you to try and experiment with according to your specific needs.

Example of a Reflection of an Image

I hope that all was well explained and the principles are clear.

As anything in Life that we want to excel in… it needs is Practice! Practice! Practice!… and a curious and creative mind to always try something new. . . and strive for more!

The possibilities are endless…

]]> http://webdesign.biancagubalke.com/web-graphics/how-to-create-reflections-2/feed/ 0 http://webdesign.biancagubalke.com/web-graphics/how-to-create-reflections-1/ http://webdesign.biancagubalke.com/web-graphics/how-to-create-reflections-1/#comments Sun, 06 Sep 2009 20:47:44 +0000 Bianca Gubalke http://webdesign.biancagubalke.com/?p=181 How to Create Reflections 1

How to Create Reflections

“Reflections” of words, text, shapes or any form of objects, images or photos are a very attractive element that is widely used in Web Design.

Creating Reflections with the Gradient Tool

1. Type the word on a new layer in your Photoshop

The quickest way of creating this visual element… say in case of a word… is to first type the letters on a new layer. I simply use the word “REFLECTIONS” in this example.

2. Duplicate the text layer

As a next step you duplicate the text layer by clicking on Layer > Duplicate Layer.

If you are a beginner, you may now be wondering where this duplicated layer (or word) went?
Well… all you do now is you either click on the Move Tool and drag the word “REFLECTIONS” … and you will find it separates from the original layer and you can position it as you like.

ALternatively, you work with the downward directions key – which has the advantage that the duplicate layer will move downward in line with the original, until you have both words exactly underneath each other.

Of course, you want the duplicate layer to be turned on its head, right?

3. Flip the duplicate text layer

For this you make sure you are on the duplicate layer (it is high-lighted)… and you now click Edit > Transform > Flip Vertical and Bingo!

4. Mask the duplicate layer

Now it’s Quick Mask time again… so we add a layer mask to the duplicate by clicking on the Quick Mask icon.

5. Use the Gradient Tool

This time however, we click on the Gradient Tool and – while holding down the Shift key – we draw a gradient (black to white) from bottom to top… where we want the gradient to end.

We’re almost done!

6. Adapt the Opacity of the duplicate layer

All it needs now is that we reduce the opacity of this duplicate layer, so that the fonts become more transparent. We do this directly on the Layers platform; just play and observe the results as you change the percentage until you are satisfied. In my example I went to 16% … and as you can see it’s a quick operation for a great effect.

How to Create Reflections 1

Creating Reflections for more complex Images

The above example was a quick solution for simple tasks – but there are more complex ones where we wish to have the flexibility to adapt and change more than the gradient tool we use here allows us.

I will show you how in How to Create Reflections 2.

. . .

How to Fade Images using Photoshop

Due to several requests as to “How to Fade Images using Photoshop” – meaning how to get that elegant transition from one colour into the next – let me explain what I do in most cases as it’s quick and leaves many doors open for adaptation, editing and changes. So there are different ways – like using the gradient tool – but they don’t give me the flexibility I like for last minute refinements.

Fade Images using Quick Mask Mode

Open your image in Photoshop; I use the picture below to demonstrate the path.

1. Select the Fade Image area

We are clear on our Goal: we want that the surrounding white background fades smoothly into the bottom of the picture.

How to Fade Images by Bianca Gubalke

So, as a first step, we select that area. Do so generously… but the top of the selection should delimit where the fade (… white into the existing colour and fonts…) basically stops – so that’s the maximum height for the fade.

TIP: You always have to select something first before entering the Quick Mask Mode.

2. Switch to Quick Mask Mode

Switch to the Quick Mask Mode by pressing the Quick Mask Mode Icon itself or by pressing the Q key.

How to Fade Images by Bianca Gubalke

Your image is immediately covered by the reddish coating of the mask, leaving the area we selected above white. Now we have our mask – so far so good!

3. Fade Images by using the Blur Filter

While staying on the same layer, click on Filters > Blur > Gaussian Blur and set the radius to fade the image. Play a little until you get it right; it’s all a matter of personal choice.

How to Fade Images by Bianca Gubalke

TIP: don’t be scared to get it wrong; you can always delete your mess in the “History” and start all over again.

I am eternally grateful to the person who discovered the ‘layer principle’ and made it available to us artists! I remember the old days where we worked with airbrush and all sorts of masking films… and without guarantees that at the end of the entire operation an ‘accident’ could happen and force us to start all over again … not just a layer but the entire illustration or Artwork… sometimes days and weeks of meticulous elaboration.

All this could disappear in thin air within a moment! No more! Since Photoshop, Graphic Designers truly live in a new and blessed world alltogether!

How to Fade Images by Bianca Gubalke

Tip: Once you have blurred your image, erase the reddish coating below the active (white) area with a large brush eraser to ensure it’s really all white and no little dirty gremlins slipped in there!

As our background is white in this example, this is not necessary here.

4. Create a new Layer via Cut

Now you Exit Quick Mask Mode and go to Layers > New > Via Cut.

Do I see you waiting and wondering?

Hmmm… nothing seems to happen at all?

Where is the Fade Image effect?

Ha! I wondered too in the beginning… and the answer is…:
all you need to do is Delete that new layer after you created it… so it no longer covers what’s underneath … which you see below!

I also included the “History” of this very quick operation – sort of in one go once you’ve got the hang of it.

TIP: Watch your foreground colour and your background colour.

If you paint with black you add red coating, meaning you subtract from the selection.
If you paint with white you remove the red coating, meaning you add to the selection.

In fact, one can become pretty creative with that alone. . . but not today!

How to Fade Images by Bianca Gubalke

I hope you enjoyed this little lesson on “How to Fade Images”.

I will go into “Reflections” next… very similar to this.

This brand-new Blog on Web Design (title) and Graphics (tagline)  -  “Web Design Graphics” -  is dedicated to everything from what’s happening behind the scenes when creating a new Blog or website (the so-called ‘back-end’) . . . to the visible part of direct interaction with visitors, readers or potential customers through content – meaning the text and images they see when they come to the Home page or any other webpage they might pick up from the relevant keywords or keyword phrases they are looking for on. . .  Google.

Web Design Structure

As on Google Top 10 you want to be…  and for this it is crucial to first go through an in-depth mental process and establish a logical, concise and user-friendly Web Design Structure – similar to the Index of a book – that organizes the future Content and facilitates the website navigation from chapter to chapter as well as inbetween sub-chapters not only for the reader but also and most importantly in a search engine optimized way, namely for Google.

In that sense, this new Blog consists of three main Categories:

1. Web Design
2. Website Design
3. Graphics

These three main categories are divided into sub-categories as follows:

1. Web Design

Under Web Design we will focus on the basic chronological process when creating Web Design – from establishing the Purpose to the Planning phase, from Content and Corporate Identity needs expressed by our customers… to Web Design translation in terms of Architecture, Appearance and Visibility on Google (Search Engine Optimization).

We add some useful FAQs that might answer urgent questions and are always an invitation to fellow Web Designers and Graphic Artists to comment and add their professional and spiffy input…:

Web Design Planning
Web Design Content
Web Design Corporate Identity
Web Design Architecture
Web Design Appearance
Web Design Visibility
Web Design FAQs

2. Website Design

Under Website Design we will discuss more general, informative and educative matters including Reviews, Tips and our own Ycademy Seminars and Workshops…:

Website Design Development
Website Design News
Website Design Tools
Website Design Reviews
Website Design Tips
Website Design Workshop

3. Graphics

Web Design Graphics will take us from spontaneous Sketches and preparatory Images to the final Artwork we integrate into our Web Design to accompany the written content, to communicate and stimulate emotions well beyond words, or to advertise and sell.

It's all about Architecture - Leonardo da Vinci

As usual, we will document and explain useful steps within the creative idea-to-execution process, look into various sources, tools and techniques, study and learn from the masters and give practical tips for practical applications in form of ideas and thoughts…:

Sketches
Images
Art
Ideas

Showcase

Here we will feature some of our original Artwork.

Contact Me

You are welcome to comment on any topic of interest to you. Alternatively, please use the Contact Form for any questions that need an answer – thank you.

Web Design Graphics

Announcing a brand-new Postal Stamp on “Art” based on an original painting by Bianca Gubalke, South Africa:

Web Design Graphics by Bianca Gubalke

More items in this private Postal Stamp Art collection can be seen HERE. Please scroll down!

Read more…

• Web Graphics That Talk
• Creating Web Graphics for Nutrinsider 4
• Happy Birthday, Yorgo!
• Communication Art
• Interactive Video Blog

This page is wiki editable click here to edit this page.