Ycademy Seminar July 2014

Great websites need good photos

While our previous workshop focused on websites that stand out, especially the XO6 by Semiomantics as a modern high-end WordPress Custom Theme that will also be available in YORGOO, and due to the fact that all great websites need good photos, the Ycademy Seminar July 2014 was an excursion into Photoshop CC 2014 and Perfect Photo Suite 8.

Ycademy Seminar July 2014 by Bianca Gubalke

While I’m a firm believer in an untouched picture of high quality and style – the kind we expect from a professional photographer with a good eye and a sense for class… and who has the appropriate equipment I should mention – the fact is that – as web designers – we have to satisfy our customers’ needs fast and efficiently with our own means. Often customers don’t have the pictures but expect us to come up with something that suits the purpose. So it is important to not only have a basic understanding of what it takes to create good photos – even with a comparatively lousy camera – and how to make them look great on the web!

Post-editing is the solution!

Ycademy Seminar July 2014

While Ycademy Seminars have always updated on latest cutting-edge technologies in as far as web development is concerned, they also kept pace with the rapid evolution of Adobe products – be it to respond to the cancellation of flash, the fast evolving mobile net (responsive websites), the increasing need for 3D or now even for 3D printing. We also see a much higher quality on the Internet – simply light years ahead from where we started out in 2002! As people prefer photos and videos to reading lengthy texts, and got used to fantastic retina displays and giant HD screens, our photos have to match the corresponding requirements in as much as quality is concerned. In the end, it’s all about the pixel… and the art is how to make a maximum out of it!

Like Adobe CC, Adobe CC 2014 now offers brilliant possibilities to improve photos in Camera Raw 8.5 – eg. setting brush controls when using the graduated and radial filter masks, just to name one. It’s worth going into all that’s new and experimenting to see what can be achieved and how – it’s all in the doing, so I stop telling!

What I am really excited about – and I wonder why Adobe took so long to integrate them into Photoshop –  are the smart guides! Whew! This will save so much time and allow a precision the pixel power era needs!

I guess the much improved spin blur and path blur effect will find many enthusiasts, too – and, of course, everyone tried it out on the famous Pirelli wheel of a luxurious Lamborghini…

Very exciting also the mask tool in OnOneTools and the improved resize tool!

It was a good topic for July 2014 with high summer temperatures in the North – and storms and torrential rains down here at the Cape! But spring at Web Design South Africa is just around the corner… and this time hopefully with YORGOO :) We’re always very optimistic… Hey, what we focus on, expands!



XOR on Google Top 10

How to improve a photo with a pattern overlay

Yesterday, I posted the article “How to improve a photo with a pattern overlay” on my website which runs on a WP based XOR theme. Today, I checked its position on Google Top 10 and find it on position 4 on page 1, ahead of 4,750,000 search results! Whew! That’s what I call SEO efficiency of a well-crafted script! Of course, it also needs knowledge as to editing and publishing – but wouldn’t you want this result, too?

XOR on Google Top 10 by Bianca Gubalke


XOR on Google Top 10

Of course, I could test it on stronger keywords, and one day I will do so again – but the reason why this great result on my XOR Theme on Google Top 10 does astound me is that – due to some other very intensive daily writing assignments, I haven’t been able to publish as frequently as I used to do in the past, which was a post daily, sometimes more.

Why is it important to be on page one on Google even today?

Open any Google page and you will see 10 posts and some Google Ads to the right, sometimes also at the top. This means that whenever someone looks for a keyword, he will automatically land on Google page one – and if he finds what he’s looking for, he won’t search any further. For people who have a product or a service to sell, this is crucial and worth big monthly budgets to any big company – it’s either being visible on page one with your website or blog – or you have to buy Google Ads. You choose where you want to invest your money – of course, you can do both.

At Web Design South Africa we have a passion for designing elegant websites that work – not only in being pleasing to the eye, responsive, quick to navigate and functional, but that are very efficient when it comes to SEO (Search Engine Optimization).

As such, we will soon be able to provide our customers with one-page websites that rock – watch this space!

How to improve a photo with a pattern overlay

Working with the XO6 Slider

Before learning how to improve a photo with a pattern overlay, we need to ask the question: why should one do this? Well, not every picture we take or have at our disposal is perfect, and we often have to reduce the quality to allow for fast opening times, especially if the picture is the first in a slider and we want it to open quickly, while all the other pictures and graphics or even videos are loading. Often, a picture can be too dominant for text overlays – so we want to take a bit away from that to give the text more room – especially also when working with transparencies. All this needs to be considered when working with the XO6 Slider on the new WordPress based XO6 script.

Bianca Gubalke Logo on XO6


While the XO6 Slider is not as complex and ‘controllable’ as the Layer Slider, one can get good results quickly if one knows what one wants. When working with pattern overlays, we can either prepare the photos with the corresponding pattern right away in Photoshop, and then load that picture. Alternatively, one can load the picture into the XO6 slider as a slide first, and then add the pattern overlay as a graphic.

How to improve a photo with a pattern overlay

If you have Photoshop, you certainly noticed the feature “pattern overlay” under “Layer Style”. If you have already worked with it, you know that you can play with the opacity and the scale until you get what you want for your Artwork. This will ‘fake away’ pixelation to a certain extent on photos… and even better on movies!

Apropos Movies:
If you want to have a small file: push the movie quality down, then  add a pattern overlay. This can help a lot on the screens that we’re using.

When we do a pattern in Photoshop CC, we usually choose a small format. Here are the simple steps that will bring you the results you want:

Open a new file, size 12 x 12, transparent, RGB, 8 bit – OK

Blow it up with your magnifier.

Decide on a pattern – black or white, large stripes, narrow ones. So let’s do something very simple: a black pattern.

Select black color, use the pencil (1px size) (100% opacity)

Draw a diagonal black line, starting at the bottom left and ending at the top right.

Now either do another line like that or do a diagonal line as you see below.

How to Create a Pattern Overlay by BiancaGubalke.com


You have a black (or white) pattern and you go to > Edit > Define Pattern. A popup comes up – give it a name: pattern-black (or pattern-white)
Click OK.

Now go > Select > Color Range > Click on one of the black pixels you have > OK.

Go > Edit > Fill and do a white one. We can also do this with layer style, as I did in the example above.

To save it, make sure that you deselect it first, otherwise it won’t work!

> Edit > Define Pattern. A popup comes up – give it a name: pattern-black (or pattern-white). Click OK.


Go back to your photo. On the image layer, open the effects and go to > pattern overlay. You have a drop-down and you can choose how you want to see your pattern – i.e. the

last 2 patterns are the ones we just created!

If you write on pictures, instead of doing a color overlay of say 15%, use a pattern – this makes your image lighter!

Use any of the patterns and go > Save for Web on 1920 x 1080 (that’s the image format we prepare for the full-width XO6 slider). Now you can push the quality even more down – test until it’s fine. You can also do it in grey (nice on skies, where there is lots of pixelation).

TIP: You can also let the image itself (without pattern) pixelate a bit first, and apply the pattern afterwards. Otherwise even the pattern might pixelate.

HOW? We’re saving the picture in the Media Library and inserting it as usual. Then, on the slider, we’re adding the pattern. That way the pattern is clean.

Or you save the picture on low .jpg quality in Photoshop, and then re-import the picture and add the pattern overlay on top, and then save it again. This time you save it high quality.

Testing and trying gets you the best results – all pictures are different! Have fun creating your own patterns or find them ready-made on the web!