Merry Christmas 2013

Merry Christmas 2013

Merry Christmas 2013 from Noordhoek (Cape Town), South Africa!

Merry Christmas 2013

Merry Christmas 2013

The above photo for my “Merry Christmas 2013” Greeting to all of you features Chapman’s Peak in Noordhoek, South Africa, as seen through the strelitzias in my garden.

May you all Merry Christmas 2013 together with your family and loved ones!


Top Performance for Semiomantics

Top Performance for Semiomantics

With so many things happening in terms of website development and design, it’s time to monitor the top performance of Semiomantics.

Top Performance for Semiomantics 2012 by Bianca Gubalke

Top Performance for Semiomantics

A few hours earlier, I published a little article on “How to create an A5 folded Postcard” and just remembered to quickly check whether the Top Performance of Semiomantics Scripts are still spoton – and lo and behold and see it yourself on the screenshot below: Google Number 1 – what else! WOW! And due to so many committments and a lot of writing for print this year – and this continues – I could take less time to publish online.

But WordPress based Semiomantics Scripts keep their promise, are continuously checked and updated – soooo good to know!

WordPress based Semiomantics Scripts recommended by Bianca Gubalke

How to create a Landscape Format Folded Postcard

Just to complete the Postcard creation exercises at this year’s final Ycademy Seminar December 2012, I herewith also publish my horizontally oriented folded postcard! So from my previous article you can very easily deduct and copy how to create a Landscape Format folded Postcard and surprise your family and friends with a beautiful close and personal Christmas Postcard – how about that?

Landscape format folded A5 Postcard by Bianca Gubalke

I’m not yet in that kind of mood… so I took a picture from one of our guineafowl families with some of their youngsters here in my garden, in the golden evening light. The lady scratched me nicely today when she thought she’d move into my studio but couldn’t cope with glass. So I had to catch her and bring her back out, where her partner was running frantically up and down. Once released, she was so clever as to not follow him but shoot off into the drainage, where it wasn’t really easy to get her out. After that they were finally reunited and have an adventure to tell when they sit high up in the pine tree under the soft light of a hardly visible moon.

How to create an A5 folded Postcard

How to create an A5 folded Postcard

Following yesterday’s brief article on “How to create a Postcard“, let me add an excerpt from our next exercises: “How to create an A5 folded Postcard” using ADOBE InDesign – basically the next postcard version we looked into at our final Ycademy Seminar 2012!

How to create an A5 folded Postcard by Bianca Gubalke

How to create an A5 folded Postcard

Again, before trying to figure out how to create an A5 folded Postcard the idea of what you want to achieve – basically the picture inside your mind of what you want to see on this postcard, the Artwork – is what comes first. The rest is technique and can be learned.

In our example, we prepared a photo in portrait format and designated for A5. In my case a digital photo of a young emerald sunbird on a budding thorny acacia that I had taken just outside my studio in Noordhoek, South Africa, a few days ago. Yes – blue skies… what a lovely summer we a blessed with! The image size: 6 x 4.5 inches x 300 dpi.

Again, I opened ADOBE InDesign and created a new document, selecting an A5, portrait format and 4 pages. One click of the mouse and my layout opens, bleed en all.

A little bit of thought before we start doesn’t harm: we have 4 pages, meaning page 1 is the front and page 4 is the back – these two will be probably printed together to save cost. Note: as they are folded on the left side (seen from the front), we don’t want a bleed here – so when we draw our placing rectangle, bear this in mind (exclude that part). Then pull in your prepared photo or other Artwork and voila! Perhaps you want to add some text? So draw a textbox and write whatever you wish to put there. Choose fonts, size of fonts and perhaps some effects, like a shadow? Make sure the text can be read well and do leave some ‘space’ for the picture to breathe.

You may want to put a text legend on the inside, meaning page 2, bottom – leaving room for the message someone wants to write on pages 2 and 3 (meaning the two inside pages). Note: if you print anything on the inside of Page 2 it means an increase in cost – so you may prefer to place a legend on the back on page 4. However, if you have a nice picture taken in a museum for instance, it looks professional and elegant to see the legend on page 2 – some people just pull off pages 3 and 4 to keep the picture and not the rest – so the legend at the back makes a lot of sense. But if you have a limited budget, rather leave the inner pages 2 and 3 blanc and add your legend or other text on the back page 4.

How to create an A5 folded Postcard by Bianca Gubalke

Page 4 should have a discreet copyright and perhaps some additional text, some promotion or even another picture that corresponds to the photo on page 1 in one or another way. As I do a lot of bird photography, I had created an Apple Touch Icon long ago with the photo of one of the owls I had photographed in the area – so it’s in line with my ‘bird theme’. As I am in the beginning phase of preparing printed matter on the PC, I am still stunned how small objects appear in print as compared with online publishing! The above icon design is 506 x 506 px x 300 dpi – and this is as big as it gets when preparing for print! This will change with a high-quality camera – the more data are available, the higher the output. We are working on it, watch this space… :)

Above is an indication of how the pages in my test example look, excluding page 3 which is blanc. Try to have clean, sober lines that lead the eye, even with that perspective.

ADOBE InDesign

ADOBE InDesign is really THE professional program for preparing print work – and again: talk to your printer well in advance to see which colour settings he prefers on his specific printing machine.

How to create a Postcard

How to create a Postcard

As 2012 is drawing to an end, we held our final Ycademy Seminar 2012 this past weekend where, amongst others, all seminar participants learned how to create a postcard in Adobe InDesign.

How to create a Postcard by Bianca Gubalke

How to create a Postcard

When thinking about how to create a postcard the most important first step is to know what we want to put on the front – be it a photo, a graphic, a quote or some form of advertising. In fact, postcards are an excellent tool to promote our products and services and always have an impact, especially as we are all used to the Internet these days – so something sent by normal maid and possibly even handwritten always stands out and has its little effect!

For the exercise, I prepared my photo – a golden sunset I had just photographed from my terrace here in Noordhoek, South Africa – in Adobe Photoshop. As I only have a very simple digital camera, I always need a few tweaks – otherwise the photo was fine and just needed to be resized from 13.333 inches x 10 inches (4000 x 3000) to 6 x 4.5 inches. My resolution comes at 300 dpi right away, so nothing needed to be changed. Remember: while we publish our photos online in 72 pix/inch resolution, printed matter always needs 300 dpi ideally.

Next, we downloaded a little postcard template into Adobe InDesign, which featured a frontside and a backside. After some decisions as to how to present the picture, the prepared photo was simply placed and has a little shadow. And the name was added underneath. The backside had the usual space for some personal notes, the address field, a space for the stamp and, at the bottom, a little discreet Copyright. That’s it!

Here would also be some space for say a hotel or restaurant to insert a website link – a perfect and very cost-efficient way of advertising.

Find a good Printer

As the printing of postcards has become very affordable, the idea is now to find a good printer in your area and coordinate the printing with him or her! The choice of the paper is important and discuss colour settings in advance so you prepare the correct artwork and he can deliver a postcard as close as possible to your image in terms of colours.

This was the first and simplest exercise; time-permitting I will give you more :)

How to turn a word into a shape

How to turn a word into a shape

When designing a logo for a customer, we often receive psd files as a basis, but what we need has to be developed in Adobe Illustrator so that – in this case the logo – can be produced in different sizes, say for business cards as well as posters – and this always in perfect quality, sharp and crisp. It was my case as described earlier HERE.
In this exercise the question is: How to turn a word into a shape?

Bianca Image by Bianca Gubalke

For this exercise, I will simply use my name ‘Bianca’ … :)

How to turn a word into a shape

1. Open Photoshop > FILE NEW
2. Image size 800 x 600 px, 72 res, RGB colour, transparent, name it.
3. Type the text – Bianca – (250px big) , center it and fit to screen. Select SMOOTH Font at the top.
4. Add a layer underneath for a white background.
5. Now you have a white layer background plus a T-layer with the word Bianca.
6. To get these fonts the way we want them to look in Photoshop, we can select between sharp, crisp, smooth etc. Often we choose SMOOTH. In order to have a bigger contrast, we may rather choose CRISP. The problem is that if we have received this text as a logo, we need to TRACE it, to make a SHAPE out of it or to extrude it in 3D.

So how do we do that?

7. The first thing to do is to make this image bigger. How? Here’s the way:

Go > Image size > and at the top where we have the pixels I select %. Punch in 400 %. Resample and Constrain Proportions at the bottom should be ticked, and click OK.

8. Blow up the image with your ZOOM TOOL to make it really big so you will see the edges and some of the weaknesses of the font you are using – it may be scales, steps and even holes.

The question now is – esp. if I go for ACTUAL PIXELS : How can I make the font sharper? In fact, it’s pretty similar to photography.

9. First, I will merge these two layers..

Smoothing a Font with a Blur Filter

10. Then I will use a BLUR FILTER in order to get smooth edges choosing > GAUSSIAN BLUR. It will ask you to RASTERIZE the type and you click OK.
Now move the radius so that things look equally smooth, meaning the lines are black and then a uniform gray zone around. Note that the harder we are the less uniformity we have.

11. Imagine that when you trace all this the tracer will follow all these corners and steps and that’s possibly not what you want, so you try to get something smooth and then bring it back and resharpen it with the levels.
Try a radius of between 3.0 and 3.5. It must really look smooth. Meaning smooth edges. When we blur we have full black colour and then we have zones with the blur where we are drifting down into grayscale. That means that we could work on this with the select tool. Make sure you merge all layers you have!

Levels in Photoshop

12. Here now is the secret that only works if you have a white background that enables you to see the levels at the bottom; also, you won’t see the histogram if you just work on transparent.
From the Adjustment Layers Button ADD A LEVELS LAYER and narrow in the white stop (say to about 170) and narrow in the black stop (say to about 100) and then finetune. See what happens when you move the mid tones. It changes the behaviour of the edges. Now go to ACTUAL PIXELS and narrow the white and black stops further. Make them look sharp… do the finetuning from the center. Play with it and put your glasses on as your eyes might object at some point. The result will be a CRISP FONT. Similar to what we do in photography esp. if we have monochromatic pictures, which looks very nice.

13. You can exaggerate, blow it up a bit. The more space we have between the black stop and the white stop the more it is blurred. Push them closer until we have what we want, and the center tab we can move for hardness or softness. Try it out to get something smooth and sexy.

What is interesting here is the technique: we blur first to get a smooth edge. Then we try to sharpen this by burning black and white. We are moving the white stops and the black stops narrower together – this is like when we are doing a colour selection when you limit the tolerance. We just need to watch that we don’t limit too much and get corners back into our fonts.

14. MERGE the 2 layers and go FIT SCREEN.

15. Now we need to SELECT this – for which we use our MAGIC WAND TOOL. On top, in the Control Panel, untick “contiguous” (this means that everything that is hooked together will be selected).
Click somewhere on the black colour and this should select everything. Check if a letter is not linked to the rest; i.e. that if I select CONTIGUOUS on the MAGIC WAND and I select an unattached “R” for example, it selects only the “R” and I would have to use the SHIFT TOOL to select the other elements. In bigger texts it’s very easy to miss out on an element.

If you untick “CONTIGUOUS” then it will find, on the picture, whatever elements correspond to that selection. In our case black.

Note: We could refine the edges more using the REFINE EDGES tool in the Control Panel; esp. if we have some fuzzy design to trace, but in this exercise it’s not necessary now.

16. So with the blacks all selected we are going to make our PATH. On the layer stack on top we click on PATH and there is a dropdown menu where we select MAKE WORK PATH.

17. A popup comes up that lets us choose the TOLERANCE LEVEL. 2px comes up as default and we use it and give it a name, eg. Tolerance 2px. Click OK.

NOTE: On top on the Control panel we have a Tolerance level that we might want to play with (set to default now). If we get a logo from a customer then we might have to go into much more detail.

18. SAVE it.

19. We will repeat the process to do another tolerance level (MAGIC WAND > CLICK ON BLACK > PATH > MAKE WORK PATH > TOLERANCE LEVEL 1 PX > NAME Tolerance 1px > OK ). So we have two tolerance levels that we can test.

NOTE: The assumption of 1 or 2 px is usually not bad.

20. To see the layer stack we add a WHITE LAYER and compare the word Bianca in ACTUAL PIXEL SIZE to see where the critical issues are and which one is better. Just switch inbetween the two layers. Here tolerance 1 px looks better so I deleted the other version.

21. Now I FIT TO SCREEN and now I will select the PATH (keeping the Path Layer open).

22. In the toolbox underneath the TYPE-TOOL we select the PATH SELECTION TOOL to select the path. We could have stroke colors (on top in the control panel) but you now simply select the elements by clicking into the various fields that are of concern. If you have an O you need to click on the shape, but also in the ‘hole’ where it’s supposed to be white. Make sure everything is selected – to the minidot!

23. So now we have a path designed that we can SAVE AS A CUSTOM SHAPE. So I go EDIT and click DEFINE CUSTOM SHAPE – give it a name, eg. ‘Bianca’ and click OK.

Bianca Gubalke Showcase 2012

24. So if I do a new design I just start from scratch again: FILE > NEW > 800×600 etc > make all FIT TO SCREEN – then I go to my CUSTOM SHAPES > dropdown… and my last custom shape is my ‘Bianca’ that I just designed. I just pull it in. I can give it a gradient or another colour and I can do as many as I want I any shapes and sizes. I just placed a Noordhoek sunset behind it, duplicated the shape and played with it to get somethig interesting. And voila!

25. Now you can SAVE as a PSD or anything else. The PSD can be opened in ADOBE Illustrator to be worked on. Or even here in Photoshop if you need to do a 3D extrusion.

Important: once we have the path, we can manipulate the letters by intervening on those points and changing details on the fonts to adjust them. Even in this well designed font I used I found curves that could be improved – perhaps hardly noticeable without being blown up, but a good font is like architecture: you feel if something is out of synch!

Now it’s your turn – enjoy!