Freelance Graphic Designer London» Freelance Graphic Designer London

What to do if you are on an email blacklist

Rob Cubbon — Mon, 22 Jun 2009 12:03:23 +0000

A hugely significant part of your web presence and company brand is email. It is just as important as your website. It needs to be professional looking and, most importantly, when sent to a particular place, it needs to get there.

What are email blacklists?

Email blacklists are databases used by organizations to decide if the IP connecting to a certain mail server is a spammer someone known to send invalid messages. If you don’t know the IP address that you send you mail from (not necessarily your own IP address) contact your host or internet service provider.

They aim to improve mail security and most of them are community managed. If you (your mail server’s IP) are listed in any of these databases and you try to send an e-mail to a server that uses that particular database to filter spam, you will find out that you cannot send e-mails to that host.

One such system is SORBS. Due to the fact that SORBS is ran by volunteers and requests money to remove blocks, I am unsure of why so many organizations use it in their spam prevention plans. Sometimes the issue that will create a blacklisting is very small, yet removing it becomes something very big.

Are you on an email blacklist?

There are several sites where you can enter the IP address that your mail is sent from to check if you are on a blacklist.

Most of the time, you can remove your IP from any blacklist by visiting their site and submitting a removal form. Such information may include proof that you have ceased any actions that got your IP blacklisted in the first place, or may not require anything but your mere interaction, to demonstrate that you are not a robot or a script. Or you can get your host to do this. However this can take about a week! What do you do in the meantime?

Use Gmail to send and receive mail from the blacklisted address

Whether or not you are on an email blacklist it’s good to have backup. I can’t think of anything better than Google Mail. Here you can store up to 7340 MB of emails!

Forward all your mail to your Gmail account

This is how I do this using cPanel. To forward email from cPanel to Gmail:

Log in to your cPanel administration page
Click on the top left icon “Email Accounts”
Click on the Access Webmail globe next to the email address you want to access
Enter password
Then when you get to the screen where you choose RoundCube, Squirrel Mail or Horde, click the “Forwarding” or “Forwarding options” and get a copy of all the mail you receive sent to your Gmail address.

How to add a custom “From:” address in Gmail:

Then in Gmail, click Settings > Accounts then click “Add another email address you own” and enter your other email address.
Google will then send you an email with a confirmation code to this other email address which you should enter in the window that has popped up from Gmail.

The benefit of doing this Gmail set up is that you can reply to emails sent to any other email address (as long as you click the “Reply from the same address the message was sent to” option) and make it look like the replies are being sent from the other address rather than Gmail. Also when composing a new mail in Gmail you have the option of which email address you want the email to be sent from in the dropdown menu next to the From:

Forwarding all mail to Gmail and adding custom “From:” addresses is by no means a fool-proof or fale-safe plan for email. However it’s incredibly useful to have copies of the mail that’s sent to your inbox and the ability to reply to that mail from the Gmail interface on a browser is a great way of nullifying the painful effects of a blacklisting!

Web design using JavaScript

Rob Cubbon — Fri, 12 Jun 2009 11:15:18 +0000

I’ve talked many times about the limitations of Flash. It’s issues with accessibility and SEO are two of the main ones. So if you want something to look a bit “flashy” on your website, always see if you can do it with JavaScript first.

Simple and interactive image slideshow fader with JavaScript

I got this image slideshow fader from DynamicDrive. I used it to show images from different websites I have designed and developed on my home page.

How to use it

You should save all the images you want in your fader and put them in your image directory as normal. The references to the images (plus links when the image is clicked) should be put in the beginning of a script found at DynamicDrive. If you follow the directions at DynamicDrive they’ll tell you to put this script in the section of your page. The JavaScript will always be contained by the tags . I prefer to delete these tags from the script and save it in a .js file and call it in the header between the meta tags and the style sheet link, like so:

As I saved all the JavaScript in a file called “rotation.js” in a folder called “js” in the route of my host’s server.

After this is done another, much shorter, section of code should be placed in the body of your page where you want the fader which invokes various parameters such as the the delay between the images and whether the slideshow should pause (not rotate) while the mouse is over it, etc.

Here is another example of the JavaScript image fader rotating a few different images on the home page of a website I designed and developed for Sarah Youren Planning Solicitors.

Other JavaScript resources on the web

As mentioned this image fader was created by DynamicDrive. Check out their website there are loads of simple, cross-browser image effects, scrollers, menus, form effects, etc. Another lightweight cut and paste collection of JavaScripts is at The JavaScript Source.

And more powerful JavaScript frameworks can be found at jQuery where you will find a JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for web development while at MooTools they have a super lightweight web2.0 JavaScript framework.

What about you? Have you got any JavaScript tricks or resources up your sleeve?

What rates should a graphic designer charge?

Rob Cubbon — Wed, 03 Jun 2009 19:26:22 +0000

One of the questions I get asked the most by clients and other designers alike is about (surprise, surprise) money.

So what is the hourly rate for a graphic designer?

Ahh, there’s the question. If you’re fresh out of college, I would say (and don’t blame me if you can’t pay off your loans) around about £9-12 ($14.50-$20) an hour.

If you’ve got a few (3 to 6) years agency experience under your belt and a nice looking portfolio I would say you should ask for £18-£25 ($30-$40) per hour.

If you’ve been hard at it for years and have a few regular clients under your belt it starts to get more complicated. You may decide to keep to an hourly rate that maybe starts at £30 ($50) an hour or more but it is more likely at this stage that you will be quoting a flat rate for jobs.

Dollar prices correct at time article was posted (see below).

Charging a flat rate for design jobs

This is where the fun really begins.

Usually, I get asked how much I would charge for a brochure, a website, a poster, a flyer, a business card, a presentation, an HTML email, an advertisement, etc. In which case an amount is quoted and will be received regardless of how long the job takes to do or how much cost is incurred.

This is harder to work out than an hourly rate and after doing it for a few years you get very good at asking questions around the brief to spot potential pitfalls before they occur. Here are a few of the questions I ask:

Is the text to be supplied? Do they have it now? Is it finalized? Do they need any help with it? Sometimes clients will provide very poorly worded or inaccurate text and will be grateful for any improvement offered but, if so, this should be factored into the price.
How much text is there? This is a very good pointer to how big a job actually is. For example HTML emails can be relatively quick to do if there is little text and imagery, but they can be incredibly complex beasties with loads of text, links, product images and sections. Nail down the scale of the project before quoting.
Are there any images to be supplied? Do they have excellent quality photography already or should a price for purchasing more be worked out?
Do they have a logo? If the answer is yes and you’re doing a print job make sure they have the logo in vector format (an Illustrator EPS or AI file). If no, then they will only have the logo as a small web image which will be no good for print reproduction and somebody will have to re-make it. This is a pitfall that is always happening! Also a job with no logo will 9 times out of 10 need one and that means the cost of a new logo should go into the final price.

Here are a few caveats or qualifications that is always good to mention when quoting for a job.

How many options? I always specify a certain number of options will be supplied for a brochure cover, website homepage or anything that I’m designing. This is the most important stage of the project and getting it right is crucial but it’s important not to let this process drag on indefinitely. If you don’t get it right after a few goes then the project can go stale anyway. So always have a caveat of a finite number of initial options.
How many revisions/amends? After the last design option has been finalized and you’re ready to create whatever it is you’re doing, it is only fair that the client will want to make little changes to the text and layout. However, it is always good to put a number on these.
The extent of the job. Specify exactly at what point the job will be finished. So, for example, if it is a print job, it finishes when print ready artwork has been provided to the printer or when the printed product is delivered to the client’s premises; if it is a web job, it finishes when the site is tested and live or when a certain file has been sent to the client. It is always necessary to agree this first with the client.

General points about graphic design prices

Above all, don’t get greedy. The forces of supply and demand are hard to work against. Charge the correct and honest amount. If you’ve been working for a while you should know what the going rate is. After a while you’ll get happy clients returning to you and others contacting you having received glowing recommendations!

How to design a color page magazine advertisement

Rob Cubbon — Sun, 17 May 2009 16:09:11 +0000

H’mm, well, I’m not going to explain everything about print advertising in one little blog post. However, having just supplied a page ad for a magazine I thought I’d explain a bit about the process I went through from the initial ideas to supplying the final artwork.

Supplying initial ideas

Some designers will tell you that they always design one option for themselves and one for the client. One very beautifully “designed”; the other more commercial. Personally, I like to supply two or three options, all of them for the client.

Try to show the client variety in your options and discuss the strengths and weaknesses of the different designs so that you can understand exactly what is needed.

Choosing great typefaces

Sometimes I like to use a combination of a serif and a sans serif typeface. Here the title is in the elegant Didot font and the body is in Futura, mostly Futura Light. Also instead of making body, or even title fonts, in black, I’ve experimented with different shades of gray.

Dealing with photography

If your advertisement has a product image in it – or any image for that matter – it is necessary to get it to reproduce as well as possible.

The photo that was decided upon for this ad was of a mature man modeling the product. There were a number of things about the photo that were improved upon (blotchy skin, dirty fingernails, wrinkles, etc.) The original photo is on the left; the re-touched photo on the right.

To make these improvements in Photoshop I used the Clone Stamp Tool (S) to get rid of blemishes and the Dodge Tool (O) to lighten areas.

Lastly, I changed the image’s mode to CMYK and made sure in Image Size that it was roughly the size it will be when reproduced with a resolution of 300 ppi.

Writing great copy

I could write a lot more about this subject, especially about the headline. This headline actually came from the client and, along with the picture, fulfills most headline criteria. It is attractive, attention-grabbing and clear.

Always be at pains to make the text as simple as possible, being informative about the benefits of the product or service.

And … don’t forget the spell check.

Supplying the artwork

Make sure all images and logos were high resolution and CMYK. Also make sure that the text was CMYK, especially that the black or gray text is made out of K (key black), without any C, M or Y. There should be no RGB colors in the artwork.

I laid this out in Adobe InDesign and exported it as a PDF/X-1a:2001. I finally checked it in Adobe Acrobat Professional where you can see all four plates separately to check that there aren’t any rogue elements in the ad that may cause problems later.

I have written further information about preparing artwork for print and supplying artwork to printers in this website.

How to market yourself #7: How to write and design a WordPress page or post

Rob Cubbon — Mon, 27 Apr 2009 20:37:48 +0000

Constantly updated quality content is the mainstay of any website or blog. I have already described how to set up a WordPress.org blog and what to write about when you have one. Here’s the “how to” for those new-ish to WordPress…

There are three things to remember when you are writing:

Make your text scannable! That means, by what ever means - using bold text, titles, italics, bullets, links, etc - break up otherwise dull looking text. Remember your visitors will typically spend a few seconds on your website so it is necessary to entrap them. These words and phrases that jump out may interest the reader. It also looks nicer.
SEO. Include your keywords in the title of your post or page, in the
tags or subtitles or in bold. Keywords are descriptors of the page or the site. But you may want to emphasize the ones with which you want to be found by search engine. So I may want to put graphic designer in my headings more often than not as I mainly want to be found on Google for people searching for graphic designers. However, only include words that are relevant to the article.
Save. As soon as you start writing click the “Save Draft” button. And click this intermittently through the writing process. Also, click the “Preview” button (you can do this straight after even if it hasn’t finished saving the draft) from time to time and see how your post looks. This opens it in a different window of your browser (or tab if you are using them) and if you keep this window open it will update every time you hit “Preview”. Don’t worry, the unfinished post or page is invisible to your website’s visitors until you click the “Publish” button! WordPress does have an autosave function but I find this the best method.

Getting started: What is the difference between a WordPress page and a WordPress post?

Both WordPress pages and posts create webpages! However a WordPress page is for static content (typically the “About Us” or “Contact” page) and a WordPress post is for adding content to your blog, something that is dated and belongs to a certain category.

The process of writing a new post or page in WordPress 2.7 and above starts in the dashboard (the dashboard is the welcome screen which displays when you add “wp-admin” after your blog’s URL in the browser’s address bar). Look for where it says Post or Page in the left hand column. Under these headings, click “Add New” (you may need to click the small arrow when you hover the mouse over to the right of where it says Post or Page).

Adding the title of your post or page

OK, this may be pretty obvious. The box at the top of the “Add New Post” or “Add New Page” screen (just below where it says “Add New Post” or “Add New Page”) is for the title. Remember this title is very important for SEO terms so cram it full of keywords.

If you have your permalinks set to %postname% (as is highly recommended) the permalink will be displayed beneath the post title. WordPress is quite good at generating these pretty permalinks. However, if you’ve taken a while to write the title you may find that not all of the words are in the permalink. In this case you can type in all the words you want, separated by hyphens.

Writing - what all those buttons mean above your WordPress text editor?

Writing a WordPress post can be like writing in a word processing package. Well, nearly, but not quite…

There are two tabs above the text editor - Visual and HTML. If you are a beginner with HTML I would advise you to start to flick between the two. If you know about HTML you’ll probably stay on the HTML tab all the time.

The following bulleted list is my explanation of the buttons along the top of the Visual editor and their results in HTML.

Bold: Fairly simple one to start with. It emboldens the text in Visual mode and wraps tags around it in HTML mode.

Italic: You guessed it. This italicizes the text in Visual mode and wraps tags around it in HTML mode.

Strikethrough: This ~~strikesthrough~~ the text in Visual mode and wraps tags around it in HTML mode, it usually means that the word was in the original version of the text but is to be discounted now. (No, I’ve never used it before.)

Unordered list or bullet points: Click to add a bullet and then hit return for subsequent bullets. Hit return twice to end bullets. In HTML mode, click
when each individual bullet point is highlighted, then select all bullets plus
tags and click
.
Ordered list or numbered points: Much like above. Click to add number 1 and then hit return for the following numbers. Hit return twice to finish the numbered list. In HTML mode, click
when each individual numbered phrase is highlighted, then select all phrases plus
tags and click
.
Blockquote: This defines the selected text as a block quotation. It is indented and most themes will put in a colored background. It is a very good way of breaking up text and I must confess I don’t always use it for a quotation but also as a method of differentiating a block of text from the main article.

Align left, center and right: Pretty obvious really. Adds style="text-align: left;", style="text-align: center;" or style="text-align: right;" into whatever element the cursor is blinking in.

Insert link: This is very useful in both modes. Once the text you want to anchor the hyperlink is selected and this button is clicked a window will pop up with a handy (or not so handy) http:// already there. Put the whole link into this box (for example http://www.google.com/) and in the HTML mode you will see at the beginning of the anchor text and at the end.

Unlink: Select the colored underlined text in Visual mode and click this and it’ll get rid of the link.

More: This breaks a post into “teaser” and content sections. Insert this tag after a few sentences of your post and on your blog’s home page you’ll see only those first few sentences followed by a hyperlink (more...), which when clicked displays the rest of the post’s content.

Spellcheck: I tend to rely on Firefox’s spellchecker so I don’t know how good this one is.

Fullscreen mode: Does what it says on the tin.

Kitchensink: When clicked this will bring a whole second line of formatting options. Click here for further explanation of the kitchensink.

This is only a brief description of using the text editor in Visual mode. Remember to constantly flick between Visual and HTML tabs and you will learn a bit about HTML. One thing you will see is that most HTML tags consist of two tags - a start tag and an end tag. The end tag is identified by a forward slash (/) before the tag name (look out for this in your HTML editor).

Indeed, instead of selecting the text and clicking the button to apply whatever text style you want, you can position your cursor before the text, click the style button once, then move it to the end of the text that you want styling and click the same button again and the end result will be the same. It’s a case of opening and closing a tag.

Insertion of the
tag

If you hit the return key on your keyboard in the Visual text editor you will get a new paragraph. So it will wrap the previous text in
tags.

In the HTML editor, one hit of the return key will give you a line break or tag. (A slightly different type of tag, it stands on it’s own, is “self-closing” and therefore requires no start or end tag). Two hits of the return key in the HTML text editor will give you the new paragraph
tags just like one hit does in the Visual editor.

Any more hits of the return key won’t give you any more line breaks so don’t try it!

Insertion of the
tag

Remember our important points to think of while writing a WordPress page or post? Breaking text up and SEO? The
tag encompasses both of these in a big way.

In most WordPress themes, the title of your post is wrapped within
tags which conveys to search engines that it is important text. Similarly, you can break up your text with subheadings or
tags which conveys to search engines that it isn’t as important as
text but is important nonetheless.

So I find these tags very important. But they don’t exist in the Visual editor so you’ll have to use the HTML editor to insert a subheading in your post or page!

Insertion of code into the HTML text editor

You can add any HTML code you like into the HTML text editor which is very useful. I’ve often added tables and divs. One word of warning when doing this: remember the
tags!

Say you want to put ordinary text inside a tag. You will have to hit your carriage return twice to get the
tags to appear. In this case it is probably easier to add the
tags in the editor.

How to insert images manually into a WordPress post or page

OK. WordPress has great new options for inserting images, audio and video into your post. But I’m old-school and I want to show you how to do it the HTML way.

There are two main ways to put an image into a post. One way (see above) is to make the image straddle the whole width of the text. To be able to get the image to fit snuggly into the box you are writing you need to know the width in pixels of the
that contains the post text. Go to Appearance > Editor in the WordPress dashboard and click on to find this out. In my theme the
that contains the text and headlines is called “entry”.

Once you have done this you need to re-size your image to that pixel width using photo editing software such as Photoshop and upload it using an FTP client to your website, preferably into a directory called “images”. Once that is done you can enter this code into the HTML text editor:

Remember to add two returns above and below it in the HTML text editor. Also, don’t forget to write good keyword rich and descriptive file names and alt text for the image.

The other method is to add a less wide image to the left or the right of the main body of text and have the text wrap around it. In this case you don’t want to add any returns after the code as you want the text to run adjacent to it. Simply insert this into the beginning of a paragraph to insert an image on the left hand side of the text:

And here is the code for inserting an image on the right hand side of the text:

Conclusion - OMG this post has been so long and you’ve got to the end of it!

I’m sorry that went on for a bit longer than I thought it would. Just goes to show you there’s more to writing a WordPress page or post than just … writing!

If anyone has anything to add to this, as always, please do so in the comments below. I’m bound to have left some important things out and probably made a mistake or two - intentional, of course!

Designing and publishing a hospital radio magazine

Rob Cubbon — Thu, 09 Apr 2009 21:37:21 +0000

I have been asked to help publish a 90 page magazine by a hospital radio station.

Anyone who has had any sort of stay in a hospital will tell you that hospital radio with it’s music, news and entertainment is a welcome diversion at a difficult time.

Chelsea and Westminster Hospital

One of the bigger hospitals in London with 665 beds and 2,200 staff is the Chelsea and Westminster Hospital. When you walk in the main entrance from Fulham Road it appears more like a mall than a hospital.

Designed, in fact, by architects Sheppard Robson who are better known for their shopping centers, it also has a large number of art installations (including large suspended fish, above) and live music can often be heard in it’s atrium. It neither looks, smells nor feels like a hospital.

This is the hospital radio that I shall be doing the magazine for. Radio Chelsea and Westminster does not get any money from the government. It thrives entirely on volunteers and donations … and money I can get from the magazine’s advertising.

The volunteers don’t only run the radio station, they can be found on the wards chatting to patients (especially those who don’t have visitors) and asking for requests to be played on the radio that evening. Former patient, Colin Bell, recalls:

I asked for “I can’t give you anything” by the Stylistics and listened to the show that evening with baited breath. They played it and got the dedication right. I could not stop crying, it meant so much to me.

Colin is now a volunteer.

Designing, selling advertising space and publishing a magazine

I am really looking forward to this project. Over the coming two months I shall be writing, designing, editing and, most importantly, selling the advertising space.

In these challenging economic times it may seem to be difficult to sell advertising space. But there are several factors that may work in our favor:

For a variety of reasons it pays to spend more on advertising and marketing in a recession.

This magazine’s 5,000 copies are distributed throughout the hospital and are left there for a considerable time – the readership maybe as high as 150,000 – whereas other magazines have a shelf-life of a month or less.

The Chelsea and Westminster Hospital sits right in the middle of one of the most affluent areas of London.

Chelsea and Westminster Hospital facts:
Every year there are 60,000 people admitted for treatment, 5,000 babies are born and more than 80,000 attend the Accident & Emergency department.

Chelsea and Westminster Hospital serves the local population living in Kensington, Chelsea and Westminster (that includes people like the Royal Family, the Prime Minister and Roman Abramovich!) Joking aside, if your business ever takes you to the West End of London, you may one day (God forbid) be grateful for the Chelsea and Westminster Hospital.

If you, or anyone you know, wishes to contribute to the magazine or to buy advertising space please contact me.

How to pitch, promote and market your ideas

Rob Cubbon — Wed, 01 Apr 2009 23:09:32 +0000

I did this lectern idea for a company that did events where entrepreneurs pitch to investors. People from the UK will be familiar with this notion from the Dragons’ Den TV show. I’ve been a big fan of the show and I’ve always wondered how I would fair pitching a business idea.

I would do catastrophically badly.

I am particularly bad at public speaking. But, even if I weren’t what would it matter if I said: “I am an excellent graphic designer and I have great marketing ideas when it comes to promoting businesses.”

Why would anyone believe me? This is why I am a great believer in the website being your permanent shop window.

It is much better (for me at least) to get your potential clients knocking at your door rather that the other way around. That is why I always eulogize about the benefits of writing constantly about what you do in order to advertise your services to the world.

How to create this in Photoshop

Re-sizing and putting perspective into type is easy in Photoshop. Here’s how I put the text onto the lectern picture.

First of all, create the text you want with the Type tool (T). When you are doing this it is important to make it as large as possible. The reason for this is that it need to be rasterized in order to apply perspective.

The next step (you guessed it) is to rasterize the type layer. Go Layer > Rasterize > Type or right-click (PC) or Cntl-click (Mac) on the type layer and select Rasterize Type.

Now go Edit > Free Transform, or Cntl/Cmd-T and you will see a box around the text with eight anchor points on it. In order to apply perspective Cntl/Cmd-alt-shift-click on one of the four corner anchors and drag. But what you will find easier is just a Cntl/Cmd-click on one of the four corners of the Free Transform box to move that corner to wherever you want. Finally hit return to render the transform.

Photoshop a flag inside a country

Rob Cubbon — Thu, 26 Mar 2009 16:12:27 +0000

This is was a Photoshop image I did to illustrate how Chinese national oil companies were active in Africa.

I’d tried recently many vector flags and country outlines solutions to similar illustrative quandaries and I thought this time it was nice to do it all in Photoshop.

I created the mask of the outline of Africa by copying the Blue Channel and adapting it to be a selection of only the part of the map that was Africa. Here is explained using Channels to make masks and selections on a similar image.

Once you are happy with the extra Channel, it’s a Cmd/Ctrl click on it to make it a selection then over to the layer you want masked and a click on the Add layer mask icon in the Layers palette. The beauty of this way of masking is that the mask can added to or subtracted from with the Brush tool(B) or even blurred to create the effect you want.

After this was done it was the usual playing round with layer blend modes to get the best effect. The top flag layer I had on Normal with an Opacity of 60% and under that I had another duplicate layer with a Hard Light blend mode. Underneath was just the original map image as a Background layer.

Exciting business card design

Rob Cubbon — Tue, 03 Mar 2009 18:07:03 +0000

This is an illustration I did for a business card which I designed and created in Illustrator and Photoshop for a motorsports development fund.

Rather than the standard old 86.6 mm by 53.98 mm rectangular thing they asked for a graphic representation of a Formula One steering wheel. It’s great when clients come up with brilliant ideas!

I was really inspired by this job and, after searching Google images for examples of these steering wheels, I set to work first in Illustrator. Here is the basic outline I did together with two of the dials.

As you can see I did only the very basic outlines in Illustrator although I did take care to get the dials and lights looking fairly realistic. Once I had done one dial I grouped the objects, copied them and then re-colored them with the Recolor Artwork button that sits in the Control palette at the top of the screen (see above). This is a really great way to change the hue of a group of objects.

Once I was happy with it in Illustrator and had every major object on different layers I exported the document as a .PSD in Illustrator (File > Export…). Then I opened the same document in Photoshop and began the finishing touches.

The most important thing to do in Photoshop was to add the highlights, which really add realism to the illustration. I also added a bit of blurring to the main body of the steering wheel as well as noise to the dials.

Finally, the outline path from the original Illustrator file was used as the die cut for the printers to cut around the edge of the illustration.

Flash gallery templates reviewed

Rob Cubbon — Tue, 24 Feb 2009 14:41:29 +0000

I have a love/hate relationship with Flash. It gives you great freedom when designing, allowing you to use fonts, graphics and animation with carefree abandon. On the other hand, Flash sites are currently less likely to rank well with search engines than comparable HTML sites and the file sizes are generally larger increasing the wait for your site’s visitors.

So, sometimes an HTML/CSS site is best (blogs, forums and a whole host of other things) and sometimes Flash is the obvious answer (animation, games and, see below, galleries).

When doing a Flash gallery you may like to consider purchasing a template and customizing it. I’ve recently done this twice with two different templates and the two experiences couldn’t have been more different.

The Flashnifties positive experience

Click here to view the Flashnifties Media Gallery

For $40 I got Flash Media Gallery from Flashnifties. This Flash template is a multi-category gallery which displays images, videos, text and SWF files along with music.

The first and most important thing to say about the Flashnifties template is that the support documentation is excellent. And if your questions about customization are not answered in the FAQs there is a forum with helpful moderators for each of their products.

The end product is viewable in Flash Player 6 so good for those that haven’t updated for a few years. It can be sized to fit any pixel dimensions. One disadvantage I would give is that the image thumbnails take a while to load as they are actually smaller versions of the main image rather than separate smaller thumbnail files.

All in all, I would say that any product from Flashnifties is probably worth the money. Don’t worry too much about a lack of Flash or ActionScript knowledge – most of the changes you’ll want to make will be to text files not the FLA.

See the Flashnifties example on this page. The project was managed by Alenea Consulting.

The Flashmint negative experience

Click here to view the Flashmint photo gallery

Unfortunately just about everything that was good about the Flashnifties experience was bad about the Flashmint experience. A massive $134.00 (how much?) will buy you a photo gallery template from one of the big boys, Flashmint.

Flashmint boast on their website “both professional web masters and beginners won’t find it difficult to modify the templates according to any requirements.” Actually reading that rings alarm bells!

Most of the changes needed to be made to the ActionScript 3.0 and it required Flash Player 9 to play it. ActionScripts can be structured in many different ways and without adequate instructions the scripts need to be deciphered first which takes time. The Flashmint template came with zero supporting documentation.

Flashmint did have a support department, here is a quote from them: “we unfortunately don’t provide assistance in editing Flash and ActionScript”. I have asked them what support they actually provide. I’m still waiting for an answer.

The one subject the support department were keen to explain was how to employ their customization services.

This particular Flashmint template allows for images to be displayed nice and big. But I would bet there’s a better one out there for the money.

What to look for in a Flash gallery template?

What version of Flash Player is it? Adobe’s claim that 98% of computers have Flash Player 9 is, in my opinion, grossly exaggerated. You’re safe-ish with Flash Player 6.

Does the site have a good FAQs section? Flashmint does have FAQs but you can tell at a glance that it’s basic and not useful.

Does the site have a good forum? If you check out Flashnifties forums you can see that every question gets answered pretty well.

How much is it? Prefer $40 to $134.

GreyBox

These Flash galleries are loading with the help of GreyBox - a pop-up window that doesn’t suck. GreyBox can be used to display webpages and other content in a window while the page you are on grays out (similar to Lightbox). GreyBox does not conflict with pop-up blockers, is very small and is easy to setup and use. It’s also open source – that reminds me of something else I don’t like about Flash!

How to market yourself #6: How to get links to your website

Rob Cubbon — Mon, 09 Feb 2009 18:38:05 +0000

There are two sides of a coin when considering how to market your site on the internet. Firstly, concentrate on the site itself: write regularly updated quality content and optimize the site for search engines. Secondly, by concentrating off the site: getting quality sites to link to yours.

Introduction

As I’ve said before in this series, there is no way to cheat the system. Employ these link building methods in an honest and respectful way. There is no quick and easy solution to link building and SEO. It takes time to do and time to see the results.

Why get links? Simply, more links = more traffic.

But also, Google (and other search engines) counts a link as a “vote” for your site. The more votes for your site, the higher your site will feature in their search results. But it is important what sort of page is linking to your site.

Here is what Google says about links:

Links help our crawlers find your site and can give your site greater visibility in our search results. When returning results for a search, Google combines PageRank (our view of a page’s importance) with sophisticated text-matching techniques to display pages that are both important and relevant to each search. Google counts the number of votes a page receives as part of its PageRank assessment, interpreting a link from page A to page B as a vote by page A for page B. Votes cast by pages that are themselves “important” weigh more heavily and help to make other pages “important.”

Download the Google toolbar for Firefox and it will show you the PageRank of every page in the internet. If you get links to your site from pages that have a PR of 7 or more you’re laughing!

But the relevance of the inbound link is also important. Get links from sites that are in a similar area of business to yours.

Here’s a great little trick of doing this. Find a site of a company or individual who does what you do but is more established, has a higher PageRank - basically find a website that you want to emulate. Check out the links to their site. Google “links:www.their-site.com” and you will see who links to them. Try to get these sites to link to you!

Here are some tried and tested ways of getting good relevant inbound links to your site. (Apart from having quality content!!!)

Write articles for other sites

I would advise writing original material for other websites, blogs, articles site and industry news sites that are relevant to your field. Duplicated content that already exists on your site might be counted against you by Google. Of course, sometimes you will write an article for someone else and then think to yourself “oh that’s quite good, I should use that on my own site!”

Here are some general articles sites but you should also look for articles sites and blogs that deal with your area of expertise.

EzineArticles

GoArticles

iSnare

Write a press release about developments in your business or site. Take the time to make it a compelling and newsworthy release. Submit it to PRWeb or PRLeap.

Your article or press release will sit on these sites for months and years to come with a link back to your site.

Comment on other blogs

If you read a good article on a blog, why not spend a few minutes writing to say what you liked about the post and see if you can add anything to the discussion? People may follow the link from the comment to your site.

These comment links back to your site may not provide you with any link juice.

The thorny nofollow/dofollow issue and an explanation of “Link Juice”

Link Juice is the name given to the PageRank (and other things) passed from one page to another via a link. Because a lot of blogs, forums, social bookmarking sites and even some directories are “nofollow” you will not get any link juice from links from these sites.

What is a “nofollow” link? rel="nofollow" is a piece of HTML that is used to instruct search engines that the link should not influence the target’s ranking. In other words, a nofollow link sends traffic but not PageRank.

Some webmasters and blog owners actually want to reward commenters with a bit of link juice and remove the rel=”nofollow” tag. So if you comment on these blogs your PageRank and, ultimately, your place in the search engine rankings will improve. Lists of “dofollow” or “nonofollow” blogs do exist but I would exercise caution here.

Commenting on these blogs with a few words such as “nice post, dude” and entering your keywords instead of your name will not help you. Comments such as these will be deleted immediately (they may not even make it on to the page) and will serve only to make you unpopular with the very people you need to get on with. As always with SEO, act honestly.

I used to be a “dofollow” blog but I stopped because of too much comment spam.

Social bookmarking sites

People submit links of content they like on the web to social bookmarking sites such as Digg, del.icio.us, StumbleUpon, Technorati (more of a blog search engine) and, new-ish kid on the block, Twitter.

You can create a page of your own favorite links and include a few back to your site. If your links are considered a good resource by others they will follow them, including the ones to your site, and you may get more links from them.

Social bookmarking is a great way to promote your site, network with other people in your area of expertise and find new ideas and information to help you develop your site. But don’t over-submit your own content or you will be penalized. As always with SEO adopt the “white hat” approach. If you’re offering something valuable you will reap rewards. If you don’t, you won’t!

Link to other sites

Link to sites as you would like sites to link to you.

If you find some valuable information or resource related to your field then link to it from your site. But do this in the correct way. Write good anchor text for the link. The anchor text or link label is the visible, clickable text in a hyperlink. The words contained in the anchor text is weighted highly by search engines. So when you are linking to some other page say what it is (and maybe something nice!).

So do this:

Wikipedia

or this:

Wikipedia, is amazing multilingual, web-based, free-content encyclopedia

but not this:

Click here for Wikipedia

The webmaster or blog owner will see this lovely inbound link with good anchor text and may return the favor one day.

Also certain blogs will automatically publish a trackback to your site when you link to it. These trackbacks can produce traffic and, in a minority of cases, link juice – but, again, don’t abuse!

Submit to directories

It’s tedious and depressing and should only be done for 10-15 minutes at a time with some musical accompaniment but here’s a list of 50 free directories with good Google PageRank with no reciprocal link needed.

Reciprocal links and three way link exchanges

Reciprocal links are the “I’ll scratch your back” method of SEO. You link to them if they link to you. The benefit of doing this is considered to be extremely limited.

What may be slightly better is a three way link exchange where site A links to site B and site C links to site A. This creates the illusion of a one way link in the eyes of the search engines. When partaking in this form of linking I would be cautious of link building companies. Regularly check to see if their link to you stays there as many will delete these links a few weeks after they are set up. And try keep them relevant to your site’s subject matter.

Conclusion

Question: So, what’s the best method of ensuring good in-bound links from sites of high Google PageRank?

Answer: content. If you haven’t got anything anybody wants, not many people will link to you. But you knew that, didn’t you.

Another interesting point is that the two reasons for linking – traffic and link juice – usually go hand in hand: my best links in terms of PageRank are actually the best links in terms of traffic.

Go about the above techniques with respect for other sites and for the subject matter – keep it real and honest. And, in my opinion, limit these link building activities to less than an hour a week. You’ll go mad otherwise and it’ll make sure you’re not diverted from the main goal – quality content!

Barack Obama pop art design

Rob Cubbon — Tue, 20 Jan 2009 01:04:03 +0000

London time: This is now the day of the inauguration of Barack Obama as the President of the United States of America.

Here is a couple of interesting quotes, first from Martin Luther King Jr. in 1964 talking to the BBC:

Frankly, I have seen certain changes in the United States over the last two years that surprise me. I’ve seen levels of compliance with the Civil Rights Bill and changes that have been most surprising. So, on the basis of this, I think we may be able to get a Negro president in less than 40 years. I would think that this could come in 25 years or less.

Amazingly, Obama was elected 44 years after he said that.

And secondly from Tupac Shakur in his song “Changes” over 30 years later:

Take the evil out the people they’ll be acting right
’cause both black and white is smokin’ crack tonight
and only time we chill is when we kill each other
it takes skill to be real, time to heal each other
And although it seems heaven sent
We ain’t ready, to see a black President

2-Pac wrote that in the mid-90s after the Rodney King beatings and the crack epidemic. He could not foresee this day. I don’t think many people could. Maybe only people with the foresight of Martin Luther King.

Anyway I did the above pop art illustration of President Barack Obama in Illustrator using it’s Live Trace feature. It caused the effect of posterizing the photo of Obama into about 4 or 5 colors and the globe into 2 colors. I like the way that you can see both the United States and Africa behind Obama.

How to market yourself #5: How to optimize your WordPress site for search engines

Rob Cubbon — Fri, 16 Jan 2009 11:31:32 +0000

This is the fifth in the series where I explain how an individual or small or medium sized organization can get themselves noticed in the big bad world.

Other installments explained how to set up a web site from scratch, how to install WordPress and what to write on your site.

Before we commence a couple of definitions – SEO or Search Engine Optimization: is the process of improving the volume and quality of traffic to a web site from search engines via organic search results. Keywords: (1) descriptors that capture the essence of a topic or (2) the words you type into a search engine in order to find stuff.

WordPress is pretty well structured for SEO anyway but there are a number of things you can do to improve it’s performance thus winning you more visitors, collaborators and clients.

Get the right URLs

By default WordPress uses web URLs which have question marks and lots of numbers in them (for example: http://www.your-site.com/?p=N). It’s not good and it’s not pretty. In the WordPress admin panel go Settings > Permalinks. What format is the best to choose? I would go for /%postname%/. This is best because the URLs to articles should never change and it gets keyword rich page titles in there separated by hyphens (for example: http://www.your-site.com/keyword-rich-post/). But, remember, don’t stuff any area with your keywords. Just use them naturally.

Title tags

The most important part of a web page in terms of SEO is the title. Optimize what goes in between and on the top of your browser window. So the name of your WordPress blog to include the keywords that you want people to find you with when they enter them into a search engine. Do this in Settings > General > Blog Title in WordPress’s administration panel. My title is Freelance Graphic Designer London. That’s sort of what I am and I want to attract people who type those words into a search engine to me.

Search engines put more weight on the early words so it is better to have your page title (and then category) to come before your site title. There are many ways of doing this. I would recommend that you use the HeadSpace plugin to do this. Mac users beware that HeadSpace does not work correctly with Firefox, so try Safari.

Categories

WordPress offers excellent categorization of your content. Make sure the category titles are keyword-rich. Write enticing descriptions of your categories in Posts > Categories. Use HeadSpace to add that description to the meta description, by adding %%category_description%% in the Description field.

Heading tags

Generally keywords are better off appearing within
,
and
tags than within
tags. The
tags are the title of your post or page so put keywords in there. Within your posts and pages you can add subheadings (
tags) which can also contain keywords.

Images

When including an image in the content of your website be sure to name it correctly. So make it “computer-screen.jpg” rather than “image01.jpg”. Also always put an tag description of about four words explaining what the image looks like. By all means put keywords in there if they are relevant but (as always with keywords) don’t force it. I get about as much traffic from Google image search as I do from ordinary organic Google search just from doing this.

Sitemap and robots.txt

Creating an XML sitemap is often considered a boost to your SEO. It is a widely adopted search engine standard that helps search engine robots crawl your site. It was created by Google and adopted by Yahoo!, Microsoft and others in the search engine industry. You can do this very easily with the Google sitemap generator plugin for WordPress.

So you’ve created an XML sitemap so now what do you do? If you haven’t already, log on to Google Webmaster Tools add your site and submit your sitemap.

You need to add a reference to it in your robots.txt so robots other than Googlebot will know of its presence.

Search engines will look in your root domain for a special file named “robots.txt” (http://www.mydomain.com/robots.txt). The file tells the robot (spider) which files it may spider and where your sitemap is. Here is mine:

User-agent: * Sitemap: http://robcubbon.com/sitemap.xml Disallow: /wp-content/ Disallow: /wp-admin/ Disallow: /wp-includes/ Disallow: /wp- Disallow: /feed/ Disallow: /trackback/ Disallow: /cgi-bin/ Disallow: /category/ Disallow: /archives/

I have disallowed the robots from directories that have either no relevant content or duplicate content.

Embolden words

Words within tags carry more weight in SEO terms (as well as visually) than words within
tags.

Meta tags

The meta tags provide structured metadata about a web page and exist in the section. They are generally considered to be obsolete but the description tag does appear on the SERPS and therefore should be generated separately for each page. Keyword tags maybe totally ignored but HeadSpace makes creating them very easy so you may as well.

Write your .htaccess

You can choose whether your site should be a www or non-www site. Your site with and without a www could appear to be two sites with the exact same content. Search engines don’t like seeing content copied. You can divert your www url to your non-www url or vice versa by entering a small bit of code into the .htaccess document on the root of your server.

Follow standards

Make sure HTML and CSS code is standards compliant.

Further reading

Here are a couple of pages I have found to be very useful for SEO and WordPress:

SEO for WordPress - The Complete Guide by Jim Westergren

WordPress SEO by Joost de Valk

These are only a few things I can think of in order to make a WordPress site optimized for search engines. If anyone knows anymore white hat techniques for SEO – let me know.

Apologies to my English brethren, forefathers and Shakespeare, I’m using American spellings from now on. Most of my visitors are American and with the pound down so low I’d be especially pleased to attract American clients! (As I am pleased to attract a client from anywhere!)

How to market yourself #4: What to write in your blog or website

Rob Cubbon — Thu, 01 Jan 2009 14:53:34 +0000

So you’ve got your WordPress blog set up and you are just starting to write – what you do?

Words are, in my opinion, the most important thing on a website. This is because the search engine robots that crawl the web every day can pretty much “read” what you’ve written, but they can’t look at your website and think “mmm, nice graphics!”

For me, there’s two things to think about when writing. One is keywords; the other is making sure you’re writing stuff that people are going to want to read.

Keywords in your content

Keywords are what people type into a search engine (Google, for example) in order to find websites. Now there are good and bad ways to introduce keywords into your website text for SEO purposes, but I’ll come to that in my next post. For the time being, if you are a designer for example, you should write about – guess what? – design.

But it’s not as simple as that. It’s virtually impossible to be found on the internet with just one keyword so you should think of your second most important keyword; for me it’s probably “graphic”. Your third most important keyword; for me, “freelance”. The fourth; “London”. And so on. Don’t sweat about choosing these you can always change them.

Use these keywords in the title and body of your articles with the most important being the most frequent. But, there is only one way to do this – naturally.

Write about the subject as you would normally, don’t struggle to add the keywords as many times as possible or even once more than is necessary. For one thing, search engines will penalise you for keyword repetition; for another, it will make your site very unpleasant reading for your visitors.

How would you rather read about a subject you’re interested in – in an ad or an article? It’s so much better to read the considered thoughts of an expert in a field rather than the hurried ramblings of someone who just wants to make money.

Here’s how you make money:

Write content that people will want to read

Write intelligently and lucidly about what you know most about.

Remember, you are an expert, we all are. You’ve spent your life doing something – it doesn’t matter what it is – that something is useful to somebody. This to me is the crux of what internet marketing is all about.

When you write about your specialities you will naturally attract to your website those who are your best customers. Let me explain, I do graphic design and marketing, now graphic design and marketing are huge fields, it would be nuts for me to market myself in this area and leave it at that. So I specialise – every organisation does. Web information about a niche area will draw in like-minded people and perfect clients through Long Tail keywords.

So I’ve written tutorials for Photoshop and Illustrator, blog posts about delivering advertising messages with graphics, articles about web and print production. Other articles have been solely responsible for melanding certain jobs. The subjects of these have been: interactive and rich media PDFs; pop art; creating countries’ map outlines and flags; WordPress for website creation. Quite a mixed bag. But if someone wants to ask me to do something I’m always grateful for the work!

When you are writing about what you know best, keep checking your facts. Constantly ask yourself when you write something if you really are sure about it. Very often in our professional careers it’s easy to believe certain things by hearsay or rumour. Use the internet and any other resource to back up your assertions thoroughly before you publish your post.

So when writing about your specialities, do you spill the beans and reveal all your trade secrets or do you hold back on certain information hoping to retain the power of knowledge from your competitors? I would always favour the former rather than the latter.

I would encourage anyone to put as much detail into their descriptive articles as possible. I’m sure it won’t harm your business to reveal the correct and best practices that you use. Transparency in governments is considered to be ethical so I would encourage anyone to be open as possible in their own organisation.

Your potential clients won’t have the time or the inclination to use this information to do the job themselves and this priceless insight will win you kudos for your generosity. (And, of course, valuable information on the internet will be linked to raising the profile of your site and have it appear higher in search engines’ results, more to come on SEO in the next post.)

I have benefited immeasurably for the community of designers and marketers who have explained techniques and solved problems in websites, blogs and forums. It’s only fair that I give back to the community.

For me this is kind of business karma. Take Matt Mullenweg, for example, the founding developer of WordPress – the most popular and best blogging software that has empowered millions of ordinary people to publish in a beautiful way for free. Matt is listed in Business Week’s 25 Most Influential People on the Web, is in Inc.com’s 30 under 30 – America’s Coolest Young Entrepreneurs and his company Automattic Inc is 123rd in TechCrunch.com’s list of Startups Best Positioned To Weather A Downturn. My point is that Matt’s initial and ongoing commitment to open source software – giving out good stuff for free – has helped him in his brilliant career.

So I would advise virtually anyone to get a WordPress site and start writing on the cutting edge of what they know best. The advantages you will see in your community, your networking and your client list will far outweigh the effort.

And in the area of the style of writing, here are ten tips for writing a blog post.

Some say write for a month when starting and then publish for the first time. Some say write every week once you’ve got going. Some say make every post no longer than 350 words.

I say … write!

How to market yourself #3: How to install a WordPress blog on your site

Rob Cubbon — Wed, 03 Dec 2008 16:37:44 +0000

In the previous post in my How to market yourself series, I described how to set up a website on a host’s server. Here I will tell you how to set up a WordPress blog on that server. Read my introduction to this self-marketing series here.

OK, so this information exists elsewhere on the internet, so why am I writing this post? Because WordPress is the best way I know to market yourself on the internet so this post is hugely important for this reason.

What is WordPress?

WordPress is a robust and feature-full web publishing platform with a focus on aesthetics, web standards and usability. WordPress, as it says on it’s homepage, is both free and priceless at the same time.

This is about a WordPress.org blog. What’s the difference between WordPress.org and WordPress.com? Wordpress.org is where you can download Wordpress to use on your own hosting service and have your own specific website address (this is what I’m recommending). Wordpress.com hosts WordPress blogs and therefore puts WordPress.com in your website address and gives you generally less control over your website, for example, the number and kind of adverts and affiliate links are restricted.

WordPress is the best Content Management System for simple “shop window on the world” websites for small and medium sized companies, in my opinion.

What’s good about WordPress?

It’s free. It’s easy to use. There is excellent support documentation and forums because, literally, millions use it. It’s database driven so you can transport it to another CMS if you really want to. Anyone can edit the site (with a username and password) from anywhere in the world. There are many different themes designed that you can dress it up in.

You can add loads of functionality to your website very easily, for example, search, sitemap, RSS feeds, comment forms, contact forms, galleries, etc. Believe me, I could go on.

Still not convinced? Have a look at these websites that use it: StyleWatch at People.com, Martha Stewart, PlayStation’s US blog, Stephen Fry and NY Times blogs.

So here’s the nitty-gritty.

How to install WordPress on your host server

Of course, there is great information on how to install WordPress on the WordPress site. But here’s what you do.

First download and un-zip the current version of WordPress.

Then, create a database and a MySQL user who has all privileges for accessing and modifying it. For those with cPanel go to MySQL Databases and do this. Write down the database name and the MySQL username and password. Finally add the user to the database.

Go to your version of WordPress you had just downloaded and in the folder named “wordpress” look for a file named “wp-config-sample.php”. Open it in your favourite text editor (eg. TextEdit for Mac; NotePad for PC), making sure you are editing in plain text, and look for these three lines at the top.

define(’DB_NAME’, ‘wordpress’); // The name of the database define(’DB_USER’, ‘username’); // Your MySQL username define(’DB_PASSWORD’, ‘password’); // …and password

Fill in the words you chose for your database name, username and password where it says 'wordpress', 'username' and 'password' in lowercase, keeping the inverted commas. Look back at your MySQL Databases page and make sure you have the database name and username exactly as it is there (there maybe prefixes added). Once you are happy with this Save As… “wp-config.php” back in the WordPress directory on your computer.

Now you have to decide whether you want WordPress to power your entire site or just a blog within the site. If you want your whole site to be a WordPress site then upload the contents of the “wordpress” folder but not the folder on the root directory of your host server. The root directory is sometimes called “public_html” or “html_docs”. If, however, you already have a site but just want to add WordPress as a blog then upload the whole “wordpress” folder to the root directory. You may want to re-name the directory “blog” so that the URL of the blog is forward slash blog after your website address.

Lastly, once the uploading is complete, simply go to http://www.mydomain.com/wp-admin/install.php if your whole website is WordPress, or http://www.mydomain.com/subdirectory/wp-admin/install.php if you put WordPress inside a sub-directory. (Replace “mydomain.com” with your own domain name and “subdirectory” with the name of the sub-directory you created, “blog” in our example).

Once at this page follow the prompts. You will be ask for your email address and website title, you can change these later. You will also be asked if you want to appear in search engines. I would check that option unless you want to view your website in isolation!

You will soon be emailed a password to access administration panels - keep a copy of this safe.

And now the fun really begins!

That was the famous 5 minute installation which took me at least half an hour the first time I did it and even now takes at least 10 minutes! Setting up WordPress on your host server is a task that prepares you for the process of owning and maintaining and constantly updated professional-looking website!

Picture credit: Francis Chouquet WordPress Designer

How to market yourself #2: How to set up a website

Rob Cubbon — Sat, 01 Nov 2008 20:41:35 +0000

This is the second post in my How to market yourself series, a personal account of the best marketing techniques you can employ for yourself or your business. Read my introduction to this self-marketing series here.

There are three things you need to do when setting up your website.

Decide on your website address (URL)

Register it

Find a web host

How to decide on your web address

Many people spend hours thinking up a catchy URL (Uniform Resource Locator) or website address. The most important SEO (Search Engine Optimisation) point is to include some keywords (separated by hyphens). Your URL doesn’t have to be your name or your company name so why not increase your chances of being found in searches before you’ve even written a web page? So, if you are a web designer, why not try web-designer dot com? (OK, it’s already gone, but you know what I mean).

You can test out domain names at any domain name registrar. Which brings me on to the next thing you have to do.

Register your website’s address

Once you have decided on the name of your website it is necessary to register it. I use GoDaddy. There doesn’t seem to be a much cheaper option and GoDaddy are the market leaders. Dotster.com and Register.com are other players that you can use.

One thing I would suggest is not to use your domain name registrar as your host. I like to keep the two operations separate because if you have a problem with one it is easier to move.

Cost: You’re looking at around $10 a year. When you register a domain name, your contact details are included in a publicly available database known as the Whois database which can lead to spamming. You can spend slightly more to hide these details.

An important SEO point: Search engines prefer if the domain is registered for a longer time into the future so that you don’t look like a fly-by-night website. For this reason, it’s better to register for five years rather than the minimum one year.

How to choose a web host?

The web hosting industry is highly competitive with seemingly hundreds of companies offering similar packages. Here are some of the things you need to take into account.

A great way to market yourself and get search engines to include you in their search results is to blog. The blogging software I’ll be recommending in this series of articles is WordPress.

The minimum specifications for the hosting of a WordPress blog are PHP 4.3 or greater, MySQL 4.0 or greater and the mod_rewrite Apache module. PHP is scripting language; MySQL is a database server. These are fairly standard specifications and will be offered by most quality web hosts but make sure you check! WordPress recommends a few hosts here.

Other than that here are some more important points to look out for:

Disk space. Once you have a host you will find it useful for a number of things not just your website. It is another bit of computer space to use. You can use it as your own personal FTP site for storing information. If you think you need this facility go for a web host that’s offering tons of disk space.

Monthly transfer / Bandwidth. This refers to how much your website is accessed. For example, if your website consists of one page of 1MB (very unlikely) and is visited by ten people a month, you would need more than 10MB of monthly transfer to facilitate this. Of course most website pages are less than 100K so, unless you are expecting huge amounts of visitors, 10GB/month will be enough at first and your web host will be able to offer you more as your website increases in popularity. Keep your eye on it though. How?

cPanel. cPanel is the most advanced web hosting control panel in the industry, designed to simplify administration of a website and I would recommend choosing a host that offers it. Through the cPanel you can set up and read email, manage and edit your website’s files, monitor your website’s traffic (making sure you don’t exceed any bandwidth or space restrictions), and loads of other things including backing up a MySQL database which is essential for good WordPress maintenance. cPanel sometimes comes bundled with Fantastico which is a set of scripts which automate the installation of, but not always the update of, CMSs such as SMF, phpBB, Drupal, Joomla!, WordPress and over 50 others, although I would not install WordPress this way.

The validity of your web host. I would only choose a web host that had a professional looking website. Also, I would definitely insist on 24/7 email support, personally I wouldn’t mind if it didn’t have phone support.

My host is Surpass Hosting and I couldn’t complain about them. I have regularly contacted the support team and I have always got a prompt and useful response. Their website has it’s own forum and blog which are frequented by users and cover all aspects of websites. I think these are both hugely useful resources that add to their worth as a host. (Note: Surpass Hosting has not bribed, cajoled or paid me for the above paragraph – it’s a personal endorsement!)

Cost: You’re looking at around 8$/month for a decent shared hosting package. Shared hosting is fine if you are only going to have one website.

An important SEO point: The most important point for search engine marketing is the location of your website. If, for example, you are interested in the UK market you should use a UK based web host. However, if for example, you are a UK company wanting to market your services internationally, then I would choose a US host.

Here is a website that compares web hosting companies.

So, I’ve got a web address and a host, now what do I do?

Your new host should give you 4 useful pieces of information so that you can set up a website.

IP address. An IP address is a unique number that every computer connected to the internet is assigned. It consists of 4 numbers separated by dots. This is the IP address of your server’s computer, not your personal computer.

Your username.

A password. These first 3 are necessary for uploading files to the server.

Domain Name Servers/System/Service (DNS). A very important link between your domain name and IP address.

If, as I suggest, you register your domain name with a company other than your host you will need to return to your domain name registrar’s website and and fill in the name servers (usually one primary and one secondary) you got from your host.

That done, wait 24 hours (usually much less) and you can create your new website.

Next, use your favourite FTP client (eg. Cyberduck for Mac; Filezilla for PC) and, with the IP address, username and password, you can log on to your host. You may find quite a few directories. Look for one called “public_html” or similar. This is where your website should go.

Use your favourite text editor (eg. TextEdit for Mac; Notepad for PC) and make a new plain text document, write a message in it and save it as “index.html”. Upload the “index.html” file. Now if you type in your domain name in a browser it will display your message.

Congratulations, you have just created a website!

As always, I welcome comments, especially to notify me of anything I’ve missed!

How to market yourself #1: Introduction

Rob Cubbon — Thu, 23 Oct 2008 19:42:41 +0000

I have successfully been in the top five Google results for freelance graphic designer for a few months now and I’m quite pleased with this.

Marketing yourself is one of the most important things any professional or company will do. For this reason I’m going to write a number of articles about self-marketing, what I mean by it and how I do it.

I’m not going to go on about crafting a mission statement, identifying expertise and clients and creating a robust consistent identity. I’m sure everyone spends a lot of time on that and it’s specific to each organisation. What I wish to tell you about the details of how I think you can run a successful website and company in these challenging times.

Search Engine Optimisation

The first thing to remember with SEO is that you can’t cheat the system. What I mean is that there is no easy course of action that will make your website first on Google after having entered certain keywords.

However, if you have content specific to those keywords and it is proven to be, so other websites link to you in a certain way, then quality targetted traffic will come your way from the search engines.

A WordPress blog is well designed and structured already for search engine optimisation and this is my preferred method of creating and updating content for visitors, clients and search engines alike.

But SEO doesn’t start and finish with a blog. There are many things you can do before, during and after creating your blog that will mean success or failure with the search engines.

General Marketing

Once that is all explained I will go on to other things you can do to promote yourself and your organisation. By general marketing I mean promotion. I’ll leave the price, place, product, process and physical evidence to you!

I will explain how to design and produce HTML emails, flyers, business stationery, etc.

How do I get on the first page of Google’s search results?

I’d guess that there’s probably a million pages on the internet dedicated to answering this question. Come to think of it, there’s probably more than a million people in the world working in this area (SEO). I’m prepared to admit I’m prone to exaggeration but if someone would like to put me right on this then I’ll stand corrected!

It’s the 64 million dollar question but it has a simple answer although it’s a solution that involves hard work and eats up time.

Here is my answer: create a website with lots of constantly updated, quality, relevant content with lots of inbound links from other quality, relevant websites.

Now, this needs further explanation (for example, you my well ask: how many is “lots”?) and people may disagree with the “constantly updated” bit, but that is essentially it – as far as I’m concerned.

What now?

So, I will try to post the next installment in this series of How to market yourself soon where I will explain what to do in order to set up your website or WordPress blog.

Designing title pages

Rob Cubbon — Thu, 18 Sep 2008 08:02:33 +0000

Designing the title slide, front cover or homepage is almost always the most important part of any job. And this particular area will rightly be where you and your client spend the most head-scratching time.

There was a good reason your mother always told you to tuck your shirt in, first impressions count.

It’s impossible to lay down rules of how to do this or even how to go about it but here, along with a title slide I designed recently for a big client’s important presentation (above), are a few pointers.

Keep the design simple

For example, I thought it would be a great idea to put a trendy Mac OS X desktop type background, a few nice opaque curves filled with gradients in the image. No it wasn’t. It was a stupid idea. It detracted from the message.

Try to add movement/dynamism

This isn’t always possible. But this particular example gives you one classic design trick. Notice how the running figure is on the left of the frame; she has somewhere to run to. This gives you the feeling of motion. There are many other ways you can do this, tight cropping being one of them.

Typography, colours and headings

Try to choose a typeface, colour scheme and heading that fits with your client, their message and the imagery. It may be that the heading has already been given to you by the client but that’s not the end of the story. Should it be title case, all upper case or all lower case? What looks best? Is the colour right? What mood does it convey? I usually try as many possibilities as possible. In this case the client wanted a modern, strident, “one step ahead” feel.

Execution

And now the most important part. Make sure, once the design’s been approved you don’t mess up at the final stage. Always get the size right. This was for a title slide of a Powerpoint presentation. The default presentation size is 25.4 cm by 19.05 cm so make your Photoshop document this size. Get the resolution right (I saved this at 150ppi as a JPEG with the maximum file size getting the most from the image whilst keeping it to a manageable size).

The running figure was set to Lighten as the Layer Blend Mode in Photoshop and it had Bevel and Emboss as well as Outer Glow Layer Styles. The background, as you can see, is just a radial blend between two blues.

Now it’s open to you. How do you think we did with this title slide?

Using vector illustrations in designs to deliver your message

Rob Cubbon — Fri, 15 Aug 2008 13:36:58 +0000

Do you ever wish you didn’t use stock photography so much? Recently I’ve found myself trawling through pages of stock images from sites such as Shutterstock, iStock and Fotolia, usually looking for a well-presented young professional smiling to camera. These sites contain some good photography but I’m always worried that the stock approach lacks creativity and uniqueness.

The use of simple vector illustrations can come to your rescue in this situation. Like the ones above they are eye-catching, can be doctored to incorporate your client’s colours and non-specific in terms of race or age. As they are not real people they’re less likely to receive criticisms from your client such as “too smug”, “too smiley” or too whatever. If you client doesn’t like the colour of hair it can easily be changed.

Increasingly, you see the use of a cartoon character, either human or animal, being used to freshen up a website. I would also consider them for HTML emails and direct marketing. Colourful, simple and friendly is the way to go.

These characters can be made easily in Adobe Illustrator or Photoshop. You may find it easier to do an image search and trace over. Or you can use Illustrator’s Live Trace tool.

Doing eye-catching designs in Illustrator

Rob Cubbon — Wed, 06 Aug 2008 09:41:08 +0000

I’m always on the look out for simple eye-catching ways to communicate a message. I think this is a great example of a visually appealing background that could be used when there are no images, graphics or other ways to improve the typography. This is especially useful in direct marketing (email or mail shot).

How to create it in Illustrator

The first thing you need to do, and it may not be apparent why, is to draw a triangle. How do you draw an equilateral triangle in Illustrator? Easy, simply fetch your Polygon tool from the Toolbar (it may be hiding under the Rectangle or Ellipse tool) and click once on the artboard. Then choose 3 Sides, don’t worry about the Radius. You then need to turn the triangle on it’s side and elongate it so it an isosceles with two long sides and a short base pointing to the left or the right. Don’t worry, it’ll become clear why later!

Now, with the triangle selected, find your Brushes palette and select New Brush… in the drop down menu and choose Art Brush. Notice the direction the brush is pointing in (left), this will be important.

Now draw a curve from the centre of your artboard to the outside, make sure it has a stroke but no fill. Then apply the triangular brush that is now in your brush palette. Now go Object > Expand Appearance. This changes the stroke to a fill which we will need in order to apply a gradient to the curve.

Now the exciting bit (you thought this wasn’t so exciting so far?), option/alt click on the apex of your curve with the Rotate (R) tool selected (see inset left). In the resulting dialog box (left) enter a number that goes into 360 evenly and hit copy. Now, the really exciting bit. Go Cntl/Cmd-D and keep your finger on it. Cool, huh?

Now all you have to do is to apply radial gradients to taste. And serve with some attention grabbing copy lines helped along with some well-crafted typography!

New logo and identity designed

Rob Cubbon — Fri, 25 Jul 2008 09:51:52 +0000

I have created an identity for IMG Associates who are a China based contract manufacturer and distributer of fine kitchen and bathroom furniture. This is for business stationery, online catalogues, print material and eventually a website.

The company is committed to manufacturing high quality products and strives for design excellence in every facet of its business. To ensure a consistent brand image, it was important for the client that the design aesthetic be maintained throughout the company’s output.

To achieve the dynamic logo, I offset the contrasting subtle greys in the furniture visuals with a stark red three-dimensional square logo, tying in the geometric form of the client’s product line while also using a colour that is both memorable and reminiscent of where the client company is based. The overall aesthetic of the product catalogue was further enhanced by employing clean, well proportioned layouts with generous areas of white space. Typographically, I opted for Gill Sans medium for the body, Gill Sans light for headings with Didot bold in lowercase for subheadings.

For a long time I have wanted to use a shiny “web 2.0″ technique in print as I haven’t seen this done very much and I am very happy with the results.

Furthermore I have very much enjoyed working with the company’s exacting and thorough CEO, Geoffrey Lew. As is usually the case with each design assignment, I felt stretched by the job, and so I hope it has improved me as a designer.

Ways to beat a design and marketing slump

Rob Cubbon — Sat, 19 Jul 2008 17:39:45 +0000

Personally, I have noticed other recessions far sooner than this one. It seems like months and months of dreary economic forecasts had passed before I got an inkling that it was going on. Anyway, here’s some ways to defeat the dreaded downturn.

Diversify

Do something you’re not doing at the moment. Web designers should diversify into web development. Print people should explore the internet. Design firms should move into marketing.

One of the crazy things about the last few years is not how the internet has taken over but how all media has evolved. Take the humble PDF for example; it’s a way of supplying print ready artwork as well as a revolutionary form of digital communication. So printers, don’t worry if you think the internet is daunting you already have tremendous experience in creating one of the great formats of the future!

Advertise

As reported in a previous article about managing recession, two of the world’s biggest advertisers, Unilever and Procter & Gamble, announced recently that they would not cut their marketing budgets.

A recession is a time to increase your advertising budget not reduce it. Advertising space and marketing services may reduce in price as other companies cancel orders so you can steal market share at a good price.

Outsourcing and saving money

Why would you want to give work away? Because you’re too busy to do it. So you accept the work, give it to someone else to do and charge the client more than what you pay them.

Work from home. Email PDFs of invoices, quotes, work samples, etc. Don’t buy printers and use snail mail. Use Gimp instead of Photoshop. Xara Xtreme instead of Illustrator. There’s tons of free fonts, vectors, backgrounds and photos out there. Cut costs not quality.

Consolidate

Keep your existing clients as they are your best source of new business. Drop a line or make a call to a client if you haven’t heard from in a while. A Christmas card to everyone you’ve known in a professional capacity is one of the best exercises in consolidation there is.

Turn your client’s photos into beautiful images

Rob Cubbon — Tue, 08 Jul 2008 13:41:52 +0000

The problem

Err, sorry, the challenge. How many times does this happen? You have an otherwise beautiful design and your client insists on including pictures of people who’s images weren’t taken by one of the world’s best photographers.

This is a reoccurring hitch; we have to include pictures of the CEO, the MD, the whoever, but there’s not the budget or the time to get a professional portrait done only a happy snap of 20k.

The solution

Or is it the workaround? As you can see above, it’s not difficult. Turn your original photo into greyscale and cut it out. Feather or blur the edges in certain parts of the photo by extreme amounts. This is particularly necessary if the subject is leaning up against a wall or has someone else standing in front of them. Go either Filter > Blur > Gaussian Blur… or Filter > Noise > Median…, or, preferably, do both.

Prepare your Photoshop document with a white background while experimenting with swathes of colours and blends on different layers. Play around with the blend modes, “Multiply” will be useful. These different colour layers can be used for other portraits, simply change their hue and positioning. Add some more layers on top of white lines with some assorted brushes.

Now comes the clever bit. I found this much easier in Illustrator. Save your Photoshop document noting the pixel dimensions and color mode. Create a new Illustrator document mirroring the dimensions and color mode. Place the PSD on artboard, lock layer, create new layer, and with the brush tool (B) selected, trace certain areas of your image to make it look like an old-fashioned re-toucher has had a go at it. Set artistic brushes (found in the Brushes palette) to some of these lines (”Artistic_ChalkCharcoalPencil” was my favourite). This is easier to do in Illustrator rather than Photoshop because the lines can be evened out (double click or the Brush tool in Illustrator and make sure the smoothness is around 0).

You may like to copy and paste these elements bit by bit over to the Photoshop document or, having put them on different layers in Illustrator, export it as a PSD and then copy over the layers. Either way, you will want to further experiment with layer blend modes and opacities for these artistic touches.

This was not my idea. I was contacted by The Talent Business to do this for their new staff members. See their “Who to talk to” section.

Here are the originals:

Design and marketing in a recession

Rob Cubbon — Wed, 02 Jul 2008 10:19:45 +0000

Recession, credit crunch, slowdown – these are bywords of the moment and you would be forgiven for thinking that we’ve got to tighten out belts and prepare for hard times ahead.

The natural inclination for some businesses might be to scale back on marketing activities in an effort to save money. But, last week it was reported that two of the world’s biggest advertisers, Unilever and Procter & Gamble, would not cut their marketing budgets.

It’s been proved time after time that a recession (and let’s not forget we’re not actually technically in one yet!) is a time to increase your marketing budget.

Why? Because, in a downturn, the shortsighted companies will reduce their advertising spend allowing businesses that maintain or increase their spend to steal market share from them. Also, advertising space and marketing services may reduce in price so that the same advertising spend buys you more media.

One possible way to cut cost whilst increasing ’share of voice’ would be to employ freelance graphic designers and marketeers rather than using an agency. Freelancers often outperform agencies in quality, price and timeliness. To put it bluntly, a freelancer could charge you £35/hour for what an agency would charge £150/hour. One client of mine recently commented that agencies seem to charge you for sneezing!

So, far from being a negative experience, the recent “bad” news on the economy may present us with an unparalleled opportunity!

What is your experience on the changes in marketing spend in your business?

Six questions to a graphic designer

Rob Cubbon — Sat, 14 Jun 2008 15:42:36 +0000

When and how did you get your start in the industry?

I was working as a picture researcher for magazines and a night picture editor for newspapers in London when in 1992 I saw Photoshop for the first time and it was love at first sight. I then lied a lot to get my first jobs freelancing in London.

How do you define graphic design?

Like a lot of things it’s indefinable. It evaluates the left brain logic and transforms it to right brain creativity by using imagery, typography, iconography and/or … “ideas” to communicate a message. There is no dividing line between art and design in my opinion. Graphic design has the capacity to involve larger areas of interactivity such as marketing, branding, entertainment and communication.

What is the hardest thing about the industry?

Being told by a client that they don’t like what you’ve done. And then even if the client likes the ideas the best idea often doesn’t make it. (I changed this question from “what was the hardest thing to learn…” I got out of that one!)

What is the best part about your job?

Obviously the feeling of having done a good job. Whether you’ve been told so or shown by sales figures.

I love the variety; packaging, websites, newsletters, marketing, print ads, banners, presentations, branding a new product, corporate literature, viral videos. You name it.

I also enjoy the interactivity with the client. I love getting a call from a new client. I love being able to help people fulfill their aspirations by successfully communicating their company, project, product or message.

A graphic designer or graphic design business can be broadened to encompass the wider spheres of advertising and marketing. A communicator can do what he wants to do.

What is the number one thing you would like to tell new designers?

If you haven’t got one, get a website. If you do print, do web. If you do web, do print. If you do print and web, do animation and movies. Do things you aren’t already doing.

Don’t ever think you’ve made anything perfect and it can’t be improved upon. But at the same time you’ve got to know when to stop doing something when what seemed like a good idea proves not to be.

Look around to see what your competitors are doing; identify people or companies that are a little bit better or bigger than you are and try to get where they are. Don’t be envious, be even.

What is something you wish other designers would understand?

Don’t see the client as the enemy. Somebody once said that design would be a great job if it wasn’t for clients. I disagree; it wouldn’t be much of a job if it wasn’t for clients.

There’s no such thing as good design. In the words of Bob Gill:

There’s no such thing as “good design” or “bad design”. The design is good if it does what you want it to do. It’s bad if it doesn’t.

Or as Shakespeare said: “there is nothing either good or bad, but thinking makes it so”.

These questions were asked by Lauren the Creative Curio, a fantastic design website who asked six different questions for a graphic designer. She encouraged others to give their answers to the six questions.

Here are some other answers.

Six Questions on Being (or becoming?) a Graphic Designer by Jacob Carter

Working as a Graphic Designer by Tracey Grady

Six Questions on Being a Graphic Designer by Andi “Toon” Creffield

What I Do for a Living or… Six Questions about Graphic Design by RaShell

If you want to join in and answer these questions, give me your details and I’ll include your link!

Designing for the digital grapevine

Rob Cubbon — Wed, 11 Jun 2008 13:47:42 +0000

Web 2.0 in design and marketing

This is an image I made to try to explain the digital grapevine: A network of users that interact to answer questions, solve problems and have fun or the trend in the use of the internet and web design that enhances creativity, information sharing and collaboration among users that has been referred to as “Web 2.0″. The best description of this that I have read is from Stephen Fry:

… an idea in people’s heads rather than a reality … an idea that the reciprocity between user and provider is what’s emphasised. In other words, genuine interactivity, if you like, simply because people can upload as well as download.

The internet is now a teenager – it’s been 14 years since Marc Andreessen’s release of the Netscape Navigator browser in 1994. Now the technology has evolved to web-based communities such as social-networking sites, wikis and blogs.

I intend to harness the benefit of this trend both for myself and my clients as I see it as an important approach to both design and marketing at the moment.

How I made the image

I was very suprised I couldn’t find a sample series of binary numbers on the net quickly, so here are mine.

001001010111010101101001010011010100110010001100100001 011010011000010001100100010101001100110000100101011101 101011011001100001100100010110010010011001101101001100 010100100000110110101101101101110111001000110100101001 011011101011101110101000100101100000011000110111011101 110100000100010000011101011011110100101010100101011110 110110101010010001100100011001000110001111011011101001 0001000100000110101101010111010111100

These numbers were put in the OCR-A font. This font is used for a variety of purposes including the ISBN labels on books. After scrolling through Blend Modes in the Layers palette in Photoshop, I hit upon Soft Light and Overlay as ones that seemed to work.

American flag inside country map outline

Rob Cubbon — Fri, 23 May 2008 14:55:02 +0000

A while ago I did an article explaining how to create a country’s flag inside its map outline and I used as an example the Australian map and flag. I’ve since had a lot of interest from Australians who wanted to use the image so I thought I’d do one for Americans as I get a lot of visitors from the United States.

I employed a very similar technique for this one as I did the other one. First, I got from a Google image search the country outline of the USA and a picture of the stars and stripes. I turned the country outline into vector form by using Adobe Illustrator’s Live Trace. The flag I re-created manually in Illustrator.

Once the flag was finished, I grouped all the objects and position the country map outline over the flag and, with both selected, I went Object > Clipping Mask > Make (Cmd/Ctrl-7) to give the flag the outline of the country.

I then copied this and pasted it into a Photoshop document and added a Bevel and Emboss and a slight Drop Shadow layer style.

How to put one image inside another image

Rob Cubbon — Sun, 18 May 2008 12:12:57 +0000

There is an ad campaign in London at the moment for Portuguese tourism. You can see 48-,24- and 16-sheet adverts in the tube with giant portraits of famous Portuguese celebrities (Cristiano Ronaldo, José Mourinho) with a landscape showing through the image. Something similar to this effect that can be achieved with only a few clicks in Photoshop.

It helps to find a picture, like the one below of José Mourinho, that is lit from the side so half the face is white and the other half black. However, failing that, find a portrait that has a white background. Once the image is chosen, cmd/ctrl-click on either the red, blue or green channel in the Channels palette. This will give you a selection.

Now find your “background” image and paste it over your portrait image. Now click on the New Layer icon in the Layers palette to give you a blank new layer. With the selection still live, fill this layer with white. To do this either go Edit > Fill… and in the resulting pop-up box chose White for your fill (the quick key for this pop-up box is shift-F5) or simply go cmd/ctrl-delete to fill the selection with the background colour (the default background colour is white; to get the default foreground and background colours, simply press D). You knew that!

You may want to copy this white layer (cmd/ctrl-J) or alter it’s opacity.

This is a simple and effective way of putting one image inside another with interesting and eye-catching results.

You can download the PSD of the top picture here. 3.4MB

Simple design idea for corporate marketing

Rob Cubbon — Sun, 04 May 2008 12:58:22 +0000

I was asked to come up with a visual to portray a corporate bank’s image. This was one of the largest banks in the world, one that prided itself on coming up with intelligent solutions and, whilst it wanted to evoke reliability and gravity, it also wanted to be known as innovative.

The tag line for the campaign had already been decided upon: “Expert in ideas”. Great, I thought, my mind clouded with Photoshop filters and Illustrator effects. I got to work…

Half way through I got bored of the extravagant imagery and vibrant colours and I suddenly realised that I had got something really good! I also realised that what I had served as a metaphor for my experiencein design and marketing which could be distilled down to two rules.

Keep it simple! Easy to say, not so easy to convince people to do.

Give them something they need to take a second look at. For example, a neat typographical trick like the one above; “expert in” is in “ideas”. Get it?

I wish I could use this as a tag line for my business. This is what I should be – an expert in ideas – if I want to be successful in this field.

Changing an image to match your design’s colours

Rob Cubbon — Sat, 19 Apr 2008 10:50:29 +0000

You have a great photo. You have a great design. One problem: the photo doesn’t “go” with the design.

The solution is to change the image in Photoshop to more accurately match the colour scheme of the design or, more commonly, to match the client’s or brand’s colours.

In the above example the final image (on the left) was changed from the original image (on the right) to reflect my client’s corporate colours.

There are many different ways of doing this in Photoshop. For the different segments of the umbrella I cut around them using the Pen Tool (P) and, after feathering the resulting selection slightly to get rid of hard edges, I filled a layer with the red or the orange and set the layer’s blend mode to Color Burn. Linear Burn also works, as does Color. Play around with the layer blend modes.

However for the dress I used a different technique. After isolating the dress in the same way, by making a path with the Pen Tool and featuring the path’s selection (Select > Modify > Feather… (CS3); Select > Feather (before CS3!)) by 2 or 3 pixels, I changed the colour slightly using Hue/Saturation. Go Image > Modify > Hue/Saturation… (cmd/ctrl-U) and move the Hue slider.

To get the client’s or brand’s corporate colour, read the RGB or CMYK values by hovering over them in Photoshop whilst looking at the Info palette and see if you can emulate those values on the part of the image that you are trying to colour. Do this in order to get an accurate colour match.

How to design psychedelic pop art

Rob Cubbon — Mon, 07 Apr 2008 09:04:11 +0000

I made this image of one of my favourite guitarists, Jimi Hendrix. He is associated with flamboyant clothing and psychedelic colourful artwork on his album covers and guitars so I tried to make this image as vibrant as possible.

To do this I followed the basic techniques of pop art that I’ve used before. Only this time instead of underlaying the image with flat Warhol-esque colours, I put in various colour gradients on different layers.

This was achieved by getting a new blank layer (clicking on “Create a new layer” icon in the Layers palette, or cmd/ctrl-opt-shift-N) filling it with a gradient of the colour spectrum (select the Gradient Tool (G) and in the Info palette select one of the two spectrums available, to apply the gradient simply drag the Gradient Tool across the image). This can be done repeatedly on different layers. I set the layers’ blending modes so that the colours on all of the layers can be seen and merge together in a complimentary way so that the result is kaleidoscopic. The blending mode I found most useful for this was Difference, but I also used Linear Burn and Soft Light.

I also used three different greyscale layers of the man himself of differing opacities. Multiply, Screen and Pin Light were the layers’ blending modes used here but Multiply is usually the most effective for the black in pop art. One or two of these layers were blurred.

Importantly, this effect can be used to resample a tiny web pic up to a large high resolution print ready image with no loss of quality!

You can download the low resolution PSD here. jimi-hendrix-psychedelic-pop-art.psd 4.6MB

Forum design for music website

Rob Cubbon — Sun, 06 Apr 2008 18:16:43 +0000

I have just created a phpBB bulletin board or forum for my music website. Click here to visit the mu-sik forum.

I installed it using Fantastico which I have on my host’s cPanel. I chose the prosilver phpBB theme which was close to the look I was trying to achieve. This meant tweaking a few of the HTML template pages and uploading a new header image.

Similar to WordPress, phpBB is an open source CMS written in PHP programming language and backed by a MySQL database. In English, this means that it’s free and it runs websites.

Environmentally-friendly designing and marketing during a recession

Rob Cubbon — Thu, 03 Apr 2008 17:03:00 +0000

I’ve noticed a trend emerge recently. A client of mine got me to design an invitation to a marketing event – cocktails at a new store – I sent him a beautifully designed invite in the form or a PDF and asked him how many he needed printed and he said: “Oh, there’s no need, I’m sending the PDF by email”.

More and more of this will be happening in the future. If this widely-predicted recession actually takes hold, marketing managers can tighten there budgets by sacrificing digital print for digital communication.

It’s another benefit of the interactive PDF. Why go to the expense of printing something when you can email a PDF? They look good, the file size is low enough not to bother the receiver and, let’s face it, it’s more likely to be seen than if it was sent in the post.

There are various other ways of side-stepping a printer. There’s html emails, although care should be taken that they’re not seen as spam. And there’s one-off web pages – if you’re very worried about spam filters simply put a link in your email. A new domain can be set up in seconds for next to nothing. Simply create a site at www dot something-interesting-that-hasn’t-been-thought-of-yet dot com and design an eye-catching splash page. Use web stats and forms to see if visitors have landed.

How to distress or shatter type in Illustrator

Rob Cubbon — Wed, 02 Apr 2008 13:34:13 +0000

This is a good tip if you ever want to change type to invoke a mood. I wanted to give a bit of text a feeling of electricity and this is what I did.

First of all, in Illustrator, you must convert your type to outlines. Remember, after you have done this you can’t edit what’s written, so you better make sure you have spelled it correctly! To do this go Type > Create Outlines with it selected, or Cmd/ctrl-shift-O. Easy!

Next you need to draw diagonal lines across the text. Draw your first one at the top either with the Line Segment Tool(\) or the Pen Tool (P) and then, with the Selection Tool (V) and option held down, drag the whole line down to create your second line. Further lines can be draw with equal space in between by going Object > Transform > Transform Again, or Cmd/ctrl-D. (You may want to make you diagonal lines uneven for a more distressed effect, I just showed you this way because Illustrator’s Transform Again feature is incredibly cool!)

Now the clever part. With everything selected, type outlines and diagonal lines, click Divide in the Pathfinder palette.

Now, with the Direct Selection Tool (A), move the sections around until you’ve created something you’re happy with.

Using Photoshop channels to create cool montages

Rob Cubbon — Wed, 12 Mar 2008 13:43:08 +0000

A client of mine was illustrating an article about the World Economic Forum whose annual meeting is usually held in scenic Davos in Switzerland. My client was keen to stress the importance of interconnectivity within both the forum and the wider business community and gave me an image of connected wires of light to marry with the snowy village shot.

To cut out the sky of this pic I adjusted one of the RGB channels. This is a specially useful technique if the area you want to cut out is clearly differentiated by the tones in the picture already – like a figure shot against a white background for example. In these situations you already have a bit of information there that can do the job for you.

Have a look at the channels and select the one which is closest to the black and white mask you want to create – it’s usually the blue channel in RGB. Copy this channel by dragging it to the ‘Create a new channel’ icon at the bottom of the Channels palette. Firstly, create a stark channel of just white and black with no greys. One way to do this is to go Image > Adjust > Threshold… but you may want to use Curves…

This will never be enough to create the cut-out mask in itself but it should be possible to create a channel that closely fits the outline you want. It’ll then be necessary to select the Brush Tool (B) to fill in the areas of white or black as desired. Black hides; white reveals.

When you are happy with the channel, simply cmd/ctrl-click on the channel in the Channels palette go to the appropriate layer in the Layers palette and click the “Add layer mask” icon at the bottom of the palette (it looks like a washing machine). The channel copy will be applied to the layer as a mask.

How to design a 3d box or cube in Photoshop

Rob Cubbon — Wed, 12 Mar 2008 10:04:49 +0000

I created this image to represent the idea of “Energy in a Box”.

The secret of making a box in Photoshop is to use guides and enabling the Snap to Guides feature to make sure everything looks as it should do.

I started with selecting a 2d side (or sides) for the box. I chose a sun image to represent energy. I added some Inner Glow around the edges and saved the document. I then created a slightly larger Photoshop file and proceeded to set my guides (see below).

Paste the 2d shape into the file and use the Free Transform tool (Cmd/Ctrl-T) and, holding down Cmd or Ctrl, drag the corners of the 2d shape to the correct point where the guides intersect.

You may decide to darken some areas of the cube to increase the 3d effect.

Adding graphics and images to your designs

Rob Cubbon — Mon, 03 Mar 2008 12:12:49 +0000

I am always looking for new ways to add eye-catching imagery to my designs – in the web, on print or wherever.

This happened to me recently: I had a brief that meant I had to look for a smiling face image. It was difficult to think of something original.

I did an internet image search for “smile”. Obviously, I got masses of the usual snaps of people smiling and “smilies”. Exactly what I didn’t want.

But then, bingo! An image of three birds in flight that looked like a smiling mouth with two droopy eyes that someone had posted. And it would cost my client nothing. It was something I could easily do in Illustrator and/or Photoshop.

A bit of lateral thinking and an image search can get you out of a tight spot!

Box packaging designed for music software

Rob Cubbon — Sat, 23 Feb 2008 12:43:09 +0000

This is a sierra box for a music software company that I did some work on. I did the photo montage of the DJ. This design will also be rolled out onto the amaray cases (DVD case), DVD or CD disc labels, a manual cover and advertising.

I loved doing this work. One, it was a music product; two, I like doing montages.

It was necessary to get a feel that anyone could use this software and immediately feel like there DJing in a club with hundreds of people dancing.

Here are some other sierra boxes I did for the same music software company.

Below you can see some of the options I came up with during the design process.

Design stylized images with Photoshop and Illustrator

Rob Cubbon — Mon, 18 Feb 2008 10:20:22 +0000

The image above has been stylised in Photoshop and Illustrator (I went for the American spelling of “stylized” in the heading for Google purposes).

To trace a photo in Adobe Illustrator, go File > Place and select the photo you want to trace. I find it useful to then lock this picture layer in the Layers palette and click on the New Layer icon to make sure your trace and your image remain separate in your Illustrator document. Then, as you can see below, I selected the Pen Tool (P) and traced the eyes, the nostrils and the lips. Tracing the picture gives you the added bonus of a good vector illustration to use elsewhere!

Now open up the original image in Photoshop. This is when you should perform the usual cloning and trickery to get rid of any blemishes, scratches or general untidiness in the photo. I used this technique to smooth the model’s skin. And I also brightened up the teeth, the whites of the eyes and the eyebrows.

Next you should bring in the elements of the Illustrator trace bit by bit. So, I selected the mouth first, copied it and pasted it onto the Photoshop image. The trace was done in black, so setting this layer of the pasted Illustrator lips to Overlay in the Photoshop Layers palette really makes the lips stand out and deepens the red.

Then the eyes were done in a similar way, first the irises, only this time I coloured them pale blue in Photoshop and set the Layer’s Blend Mode to Saturation. Then the highlight in the eyes was made white in Photoshop and their Layer’s Blend Mode was set to Overlay. Finally I pasted in the eyelashes.

The underlying image of the woman’s face is quite pale that is why employing this technique causes a really striking, almost “pop art” effect.

See below the original image on the left, the trace in the middle and, on the right, the finished piece.

Get your message across with graphics and photography

Rob Cubbon — Wed, 13 Feb 2008 20:41:23 +0000

Everybody knows that your marketing message will be enhanced by the creative use of graphic imagery. A competent graphic designer will be able to communicate your message to your market.

But have you ever wondered what is the best way to make the graphic communicate the message?

The above picture provides an answer. And it is … make the graphic the message or put the message in the graphic.

I was working with a well-known international credit agency who were pitching to a large bank. They were trying to convey to the bank the message that they would save money if they took them on. So I put the message on a till display or cash register. Some people were skeptical at first, saying that the cash till gave a negative message of spending money and would imply the opposite. But I was adamant about it. The message was powerful enough and the graphic provided context – much better than an image of dollar bills, for example.

The point is that the message fits into the image in an everyday way.

It’s an obvious one but it nearly always works. There is one thing I have loved doing over years and years of Photoshop usage. It’s getting a picture and incorporating an idea, a message, some copy, some type, an icon, a headline or a symbol into it. There’s something about it that instantly captures the attention.

My business cards designed and printed

Rob Cubbon — Sat, 09 Feb 2008 14:19:57 +0000

I recently got my business cards printed and I was amazed at how much of a baffling array of online print companies there are trying to bag your business.

Here and some of my golden rules for business card designing and printing.

Don’t do a business card! Everyone does one! Have you got a bit of extra money so you can put your details on a USB stick or something that people will always be grateful for. Or do it in a different format like a die-cut shape that’ll stand out from the crowd. No? You want a traditional-sized business card? OK, go to number 2.

Size. I go for 85mm x 55mm - it’s the size of a credit card and will therefore fit into someone’s wallet. There are people who use bigger sizes and they don’t fit into a wallet so they may get left behind.

Paper stock. Choose a good quality paper of at least 250gsm. GSM stands for grammes per square metre and is a measure of paper thickness. They are ideally 300-350gsm, or even 400gsm, the thicker the better in my opinion. However thicker papers will cost more.

Laminated. I would always argue for some sort of lamination. I’d go for matt lam, it’s classy!

Printing. For print runs under 500 choose a good quality digital printer (the thicker papers may not fit through digital presses).

Design. That’s where I come in. Choose a fantastic graphic designer who can craft you a quality, eye-catching business card that fits in with your other stationery and online presence. I would charge as little as £25 for business card design.

And, talking of money, printing-wise you should be paying about £10-15 for a few hundred. Most of my clients get me to sort out the printing.

Corporate stationery is something every graphic designer has tried at one point in his/her career. It has its pitfalls as company politics comes into play but if created correctly it can add so much to a company’s presence and profile.

See how my card compares to other bloggers’ cards.

A gritty, grainy, reportage look and feel to photos

Rob Cubbon — Sun, 03 Feb 2008 14:08:12 +0000

The above picture of a couple has been treated in Photoshop to give it a gritty, grainy, reportage look. This has also been described as the “Dave Hill effect” after a Californian commercial photographer (not the guitarist from Slade) although, of course, this won’t be his exact method.

It immediately looks like a serious photo that could be used with a medical/lifestyle/reportage feature rather than the slick/studio/airbrushed shot that it is.

There’s two main parts to this. First, adding the particularly high contrast, and second, adding the grain.

The contrast can be changed to something more akin to contours on an aerial photo by the High Pass filter. After copying your layer go, Filters > Other > High Pass… and choose a radius you feel comfortable with. Set the Layer Blend Mode of this layer to Hard Light. You will start to notice a hardening of the edges. Copy the layer again to increase the effect. Experiment with this Filter and the Blend Modes of the layers to achieve the effect you want.

The grain can be added to a separate layer of 50% grey, applying Noise and setting the Layer Blend Mode to Overlay.

Cmd/Ctrl-Opt/Alt-Shift-N or click the new layer icon in the Layers palette to create a new layer. Go Edit > Fill (shift-F5) and choose 50% gray from the top drop down menu and Overlay from the second. Now go Filters > Noise > Add Noise… and choose your degree of grain.

Photoshop trick for smoothing a model’s skin

Rob Cubbon — Sun, 27 Jan 2008 14:33:49 +0000

This is a quick technique to even out blemishes in a model’s skin. I came across this by accident but I think it’s a really good way to instantly make people pictures look more eye-catching and professional. It also has the effect of brightening and adding contrast.

Very simple. Get the layer you want to work on with the less-than-perfect skin (if it is your locked background layer double-click on it to unlock it). Make a copy of this layer (Cmd/Cntl-J). Set the top layer to Screen blending mode in the layers palette.

You will notice immediately the picture has become brighter and the contrast has increased – maybe too much. If you want to decrease this effect then decrease the opacity of the top layer a little.

Next, with the top (Screen) layer selected, go Filter > Blur > Gaussian Blur… I blurred this image by about 9 pixels, I’d go for 25 if it were a high resolution. The more you blur this layer the more the skin smooths out and the more of a “glow” is created. The effects of the glow can be masked off around the face if desired.

I stumbled upon this trick whilst designing some packaging for a music software company.

Sierra boxes and amaray cases for CD and DVD packaging

Rob Cubbon — Sat, 19 Jan 2008 18:48:59 +0000

Here (above) are three sierra boxes I did for a music creation software company.

Also in this product range I did a DVD disc label, manual, jewel case and amaray case which are housed, obviously, in the sierra box. The sierra box was also printed with a spot UV or varnish which give the pictorial elements extra punch.

A sierra box is a piece of packaging is regularly used for computer games where the CD or DVD is packed in a jewel case or sleeve inside the box. It is an established bit of packaging that offers a large range of design possibilities and promotes itself with its attractive appearance and size.

An amaray case is a keep case or plastic box for a DVD. One well known manufacturer is Amaray hence it’s name. It’s height is similar to the height of an old VHS cassette and was originally designed to fit shelving intended for videos.

A jewel case is the common plastic case that houses a music CD.

It was a great bit of work to be involved with. Check out the original montages I did for the packaging.

Here (below) is how the flat artwork looks.

How to make CDs and DVDs in Illustrator

Rob Cubbon — Sat, 12 Jan 2008 18:13:15 +0000

This took me a while to figure out! The object is to get the gradient mesh to radiate out of the centre of a circle and that’s not as straightforward as you might expect. Anyway, this is a good one.

To start with something easy – draw a circle. Select the circle tool and drag diagonally, don’t forget to hold down the shift key. Fill the circle white, with no stroke.

Then get the Gradient Mesh tool (U) and click 5 times in the centre of the circle as shown in the diagram below. This will leave you with a cross made out of six lines inside a circle. Now you have to space out the gradient mesh points on the edge of the circle so that they are equidistant. Do this with the Gradient Mesh tool (U) as well. Keep shift held down so that the circumference of the circle does not move. You should only have to move eight different points.

Next you have to make the lines from the edge of the circle to the middle to be straight instead of curvy as they are at the moment. To do this use the Direct Selection tool to drag the curves’ handles at each end so that the line becomes straight. (I have to confess this is a bit fiddly; please let me know if you know a better way of doing this).

Now that you are left with a circle with 12 straight lines radiating out from the centre the fun can start.

Go back to your Gradient Mesh tool (U) and use it to select the points individually and then choose the colour in either the Color palette or the Swatches palette. You could select the colour from the image above, once dragged from your browser to your Illustrator document, with the Eyedropper Tool (I).

This will take a bit of experimentation. Notice that I have left to opposing streaks of white and colour. The main body of the CD or DVD should be grey or gold.

The rest of the CD or DVD was a relatively straightforward affair. Make a series of concentric circles and vary their colours and transparencies for the inside bits of plastic. A final rainbow effect was applied in Photoshop. Maybe I’ll explain that later, but that’s enough for now!

How to web 2.0 your logo

Rob Cubbon — Mon, 07 Jan 2008 11:45:27 +0000

After I had designed a vector logo for a client, I was asked to web 2.0-ify it.

This is what I did. The “Toby Beresford” and the cogs are on separate layers in Photoshop. Individually I set the Layer Styles of Gradient Overlay and Bevel and Emboss.

The Gradient Overlays are the same on both layers. I picked a light blue colour for my background colour and a dark blue colour for my foreground colour and selected them in the Gradient pull down menu in the Layer Styles pop-up box.

In the same pop-up box, but with the Bevel and Emboss style selected, I played around with Depth, Size and Soften, as well as the opacities of the highlights and shadows until I got the desired effect on both the elements of the logo.

Lastly I created a shiny table top reflection effect using the Free Transform tool.

Two tips for design inspiration

Rob Cubbon — Sat, 05 Jan 2008 17:59:06 +0000

Keep it simple

Steal

Keep your designs simple

OK! This is easier said than done but this is paramount. If you want to live a happy life, keep it as simple as possible. If you want to do a good design… you get the picture!

Take this photograph of 60s fashion model Twiggy by Barry Lategan, for example. He didn’t really do much but take a very simple picture, simple make-up, simple lighting… and yet we all remember it.

If you something isn’t working and you want to improve it then take things away don’t add any more mess.

I created the Twiggy outline by importing the photo into Illustrator and using the Live Trace feature.

Steal your designs

Doesn’t sound very ethical does it? But it is what everybody else does.

Take this beautiful website from Japanese artist Marumiyan, for example. I don’t know anything about him but look at his stuff! Excellent, and it really inspired me.

The background for the above picture came from Veerle Pieters who wrote a tutorial on how to create a Mac OS X type desktop background. I’ve got a lot of good stuff from her in the past. One of the best sites I know about how to do things in Illustrator and Photoshop (HTML and CSS, too). (A PageRank of 8! OMG, I’ve got a long way to go!)

How to design perspective in Photoshop

Rob Cubbon — Mon, 31 Dec 2007 14:39:39 +0000

I used this image as a title slide in a PowerPoint presentation for MasterCard, one of my clients. It was a great excuse to do a reflection and transform its perspective to make it look like the headline is actually there on the pavement.

The method I use to do perspective is much simpler that going Edit > Transform > Perspective. I prefer to do most of my transforming with the Free Transform (Cmd/Ctrl-T) function. First, however, don’t forget to rasterize that type! Right-click on the text layer in the Layers palette and choose Rasterize Type.

With this done, go Cmd/Ctrl-T for Free Transform, grab the top-middle point and pull down. Now your type is a vertically flipped. Then, with Cmd/Ctrl-Shift-Option held down, drag one of the bottom corners for the perspective (see below). And then hit Return.

How to design water reflections in Photoshop

Rob Cubbon — Mon, 31 Dec 2007 14:04:18 +0000

“Reflections are the new drop shadows!” If that’s the case, here’s how!

Copy the text layer – or layer – that you want to reflect (Cmd/Ctrl-J). If the layer that you want to reflect is a text layer then you should Rasterize it. To do this, right-click on the text layer in the Layers palette and choose Rasterize Type.

This is my method of quickly flipping something vertically in Photoshop. Go Cmd/Ctrl-T for Free Transform, grab the top-middle point, pull down (see below) and then hit Return. Simple, no need for cumbersome menus.

Next you need to create a gradient mask to fade the reflection from top to bottom. To do this, select the layer that is the reflection, click on the “Add layer mask” icon at the bottom of the Layers palette (looks like a washing machine), select the Gradient Tool (G) and drag from above the top to below the bottom of the reflection. Easy! (Didn’t work? Make sure your Foreground and Background colors and your Gradient picker are defaulted.)

Lastly a bit of rippling and blurring. Go Filters > Distort > Ripple… and choose the desired level of wobble. Only blur it a touch.

How to design a 3D crystal ball in Illustrator

Rob Cubbon — Sun, 30 Dec 2007 15:30:32 +0000

This starts, as most tutorials start, with something very easy: draw a circle. So, select your circle tool and drag diagonally to preferred size, not forgetting to hold down the shift key. Fill the circle white, with no stroke.

Next, select the Gradient Mesh Tool (U) and click four points diagonally across the circle. Make sure the first and fourth click are close to the edge of the circle and the middle two equally separated – this is the basis of a 3D effect.

With gradient-meshing (if I could invent that verb) it definitely is a case of less is more; those four clicks have given you 32 different mesh points for you to colour in. Don’t worry, it’s not going to take you as long as you think!

Start selecting the gradient mesh points around the edge and give these a dark green colour. Select the point first with your Gradient Mesh Tool (U) and then choose the colour in either the Color palette or the Swatches palette (or you could select the colour from the image above, once dragged from your browser to your Illustrator document, with the Eyedropper Tool (I)). Notice I have made three of the points a darker mauve colour.

Inside the circle make the gradient mesh points a lighter colour. Leave two of them near the edge white for the highlights.

Freelance graphic designer’s picture quiz #5: Spot the logo symbol

Rob Cubbon — Sun, 30 Dec 2007 14:03:06 +0000

The best kind of logo, in my opinion, is one which relies on an image or shape to convey the company or brand. I would call it archetypal communication.

Above is an amalgam of five of the most famous of such symbols (actually four, the fifth is from a text logo!), can you spot where they’re from? Answers in comments, please.

One of a graphic designer’s most sacred unwritten rules is to not misrepresent or distort a company’s logo in anyway. Whoopse! Well, kids, don’t try this at home!

Freelance graphic designer and SEO

Rob Cubbon — Sun, 30 Dec 2007 12:36:25 +0000

The primary objective of this website is to attract clients to my design business. The two ways I try to achieve this are:

Get other good websites to link to me with my desired keywords as the anchor text. For example, freelance graphic designer, designer in London, UK design services, are good phrases to explain what I do and I try to get these words a published as a hyperlink to my site on as many sites as possible.

Write regularly updated content with my keywords scattered around the site, particularly within title tags and headline tags. So I try to write an article a week about artworking, designing, Photoshop, Illustrator, InDesign, Quark, logos, packaging, marketing, advertising … the list goes on and on!

This strategy has reaped rewards as I have been employed by some great clients this year (Accenture and MasterCard, for example) who have asked me to help them on a variety of interesting projects. All because they found me on Google, or some similar search engine.

The nature of SEO (Search Engine Optimisation) is unpredictable. It’s not an exact science as it takes a bit of luck to second guess Google’s secret algorithm – the mathematical equation that uses certain information from a website in order to define its rankings – and get on the first page of search results.

Improving photos with Photoshop by a Graphic Designer

Rob Cubbon — Sun, 02 Dec 2007 13:52:14 +0000

The above picture is one of my snaps taken very quickly at the end of clearish autumn day. I have improved this picture with Photoshop by selecting certain areas and altering the colour, brightness and contrast.

I first thing I did was to copy the photo to a new layer (Cmd/Cntl-J) I then use my method for creating a layer mask with the Gradient tool which was explained in the previous post to mask out the sky. I then used Image > Adjustments > Curves… (Cmd/Cntl-M) and clicked the Auto button (this finds the lightest part of the selection/layer and makes it white and finds the darkest part of the selection/layer and makes it black). Further contrast can be added by creating an ‘S’ shape out of the curve (see below). Contrast essentially means making dark areas darker and light areas lighter.

Then to make the picture more interesting I isolated the people at the bottom right with the Lasso tool (L) with a Feather of 15 to blur the edges and applied contrast using the same technique.

The original layer is now the lower half of the picture. I used Image > Adjustments > Curves… (Cmd/Cntl-M) to brighten the sky and, more importantly, to take out some green and add some blue to give the sky a more interesting look.

How to design a montage in Photoshop

Rob Cubbon — Tue, 27 Nov 2007 13:40:08 +0000

Here, as promised, is a short tutorial about creating montages. Here is a montage of three different images which gel together without having to laboriously cut anything out.

Layer masking with a brush

I sized the cityscape image over the picture of the girl and played around with layer blend modes until I chanced upon one that seemed to do the trick. It’s Color Dodge at 88% opacity.

Then I needed to get rid of some of the building’s lights from her face. The way to do this is to create a layer mask. In the Layers palette, simply click on the Add Layer Mask icon. It’s at the bottom of the palette and looks a bit like a washing machine (see below).

When you’ve done this a white rectangle will appear adjacent to that layer and, when you’ve selected the Brush Tool (B) your foreground colour will be black and you’re ready to start editing the layer mask.

When the layer mask is white it is unmasked and black is masked. So “painting” on the layer mask with a black brush will “erase” areas of that layer. Use a soft brush and play around with opacities.

Notice when you’re editing the layer mask and when you editing the layer itself. The rectangles will have thicker borders in the Layers palette to show you which. Click on a layer’s mask and your are editing the layer mask (foreground and background colours are the default black and white). Click on the layer rectangle itself and your are editing the layer (foreground and background colours revert to the colours you had there).

Layer masking with a gradient

Then I overlaid an image of a band. I wanted the left-hand side of the image to show the drummer and the right-hand side to show more of the girl.

Same technique as above. Click on the Layer Mask icon in the Layer palette to give yourself a blank layer mask. Click on the Gradient Tool (G) and drag (in this case horizontally from right to left more-or-less in the centre of the image) where you want your gradient mask. You can do this as many times as you want to get the right effect (no need to Cmd/Ctrl-Z).

This band layer is set to Lighted blend mode at 50% opacity.

Adding a border around the image

Add a new layer (Cmd/Ctrl-alt-shift-N). Select all (Cmd/Ctrl-A). Go Select > Modify > Border… add a value of, say, 5 pixels. You may want to feather it a bit. And fill it with a dark colour from the image.

Here is the layers palette for the finished image.

Designing different vector logo options

Rob Cubbon — Sat, 24 Nov 2007 19:06:37 +0000

I was asked to come up with a logo for Toby Beresford an application developer that specialises in third party apps for Facebook. The client wanted something neat, simple and modern that could have a shiny web 2.0 effect put on at a later date.

I find it better to start off with Adobe Illustrator using only one colour as this is the most simple form the logo will take and if it looks good like this – large and small – it’ll look good after any treatment or in any context.

This first one is with Helvetica Neue. I told myself ages ago I would never use this typeface because everyone else does all the time. Overlapping the characters and having the colour multiply in the intersecting areas is an effect I like – didn’t quite work here though.

I went for VAG Rounded for this one. I doctored the y because I liked the idea of the descender come from the middle of the letter. I quite liked having the ascenders and descenders extended to differing lengths.

This was based on a free Larabie typeface called Eden Mills. The moment I saw the typeface I said; “This is it!” The client said; “I’m not a vulcan.” More Larabie free fonts.

This one was based on a retro typeface, Bauhaus heavy, which can look modern given the correct treatment. A very distinctive y which I like.

Another Larabie typeface was used here called Forgotten Futurist. I messed around with this one alot and I think it’s my favourite.

I thought I’d have to do one logo with an icon or symbol. What icon could I use for applications? I went for a cog thing.

Here’s a question for everyone – graphic designer and layperson – which one did the client go for?

Montage design for music DVDs

Rob Cubbon — Thu, 15 Nov 2007 13:30:28 +0000

I have been working on some CD and DVD packaging for a music creation software company. I love doing stuff to do with music and here I was asked to create some montages to express different musical genres.

The montages will eventually go on large sierra boxes (a sierra box is a large cardboard box for software containing a DVD case and other printed material), DVD cases and the DVDs themselves as well as other promotional material.

Dance music montage

The dance montage was to capture a dance, house, deep house, tech house vibe.

World music montage

This montage was for world, dub, latin, reggae and ethnic.

Rock music montage

And this was for alternative, grunge, rock and pop. What do you think?

How to design sound waves in Illustrator

Rob Cubbon — Fri, 02 Nov 2007 17:35:43 +0000

This is a nice little trick using Illustrator’s Blend option.

To create perfect sine-waves – or something very close – first of all, draw a line. Then go Filter > Distort > Zig Zag… and choose the number and height of waves you want (remembering to click the smooth radio button, otherwise you’ll get a zig zag).

You then need to copy this beautiful wavy line and create a distorted version on top of it. To do this simply copy (Cmd/Ctrl-C) the wavy line and paste in front (Cmd/Ctrl-F). Put one line on a locked layer and, with your Direct Selection Tool (A), drag the peaks and troughs of the curves either up or down randomly. See below where the blue triangle is.

Then unlock the original wave and go Object > Blend > Blend Options… and select the number of Specified Steps you want. Then, with both selected, go Object > Blend > Make (Cmd/Ctrl-Option-B).

It’s a dog’s life! A third idea for HTML email

Rob Cubbon — Sun, 28 Oct 2007 18:42:59 +0000

If you don’t know what this is about please look here for the first two HTML emails.

This is for a client that do graduate IT recruitment. They send these HTML emails out to 20,000 addresses with a click-through to their site where visitors can search for job, sign up, apply, etc. Well, the first one was with a mouse, the second was with a cat and a mouse, there was only one way to go, really.

Have a look at one they didn’t go for…

How to make PowerPoint presentations and Word documents look beautiful

Rob Cubbon — Sun, 28 Oct 2007 17:47:25 +0000

If your client hands you a .PPT from MS PowerPoint or and .DOC Word and says: “The presentation/print deadline is tomorrow, make this look nice”, what are you going to do?

The answer is to use other programs such as Photoshop, Illustrator, InDesign, Quark, Premiere or Keynote and get creative!

Here are a few tips I’ve picked up over the years of doing this.

Make sure you import your client’s text into InDesign and Quark rather than copy and paste it

Why? Because it keeps the formatting (bolds, italics, heads, subheads, notes, etc). If your client has gone through the document and done this there’s no need for you to do it again. OK, you may not like your client’s choice of formatting or font, you can change that globally over the whole document in seconds. Use the Style Sheets or Utilities > Font Usage in Quark and Paragraph Styles or Type > Find Font in InDesign to turn the sow’s ear into a silk purse.

If you want a presentation to look good don’t do it in PowerPoint

I know this isn’t always an option as all the world and his wife seem to want to use PowerPoint for any purpose but, if you can’t persuade the client to go for Premiere or Keynote, there’s always the PDF. The good old PDF will give you an excellent presentation with vectors supported, movies played and excellent interactivity.

You’ve got to do it PowerPoint, now what do you do?

In PowerPoint go File > Page Setup and that’ll give you the size of the slide. Then go to Photoshop go File > New and type in the same height and width values from PowerPoint, create your attention-grabbing masterpiece, save it as a PNG (transparency is supported) and then back in PowerPoint go Insert > Picture > From File… and select your PNG.

OK, so you can do that for every page of a 40 slide deck if your client wants to edit the text, but it’ll add a bit of extra fizz to the proceedings.

Get your client to provide you with the source files

If there’s a blurry bitmap graph or chart that you need to beautify, ask if it exists as a PDF or ask for the source files. Even if it was the ugly result of a PowerPoint-Excel partnership the chances are it can be copied and pasted into Illustrator and the type can be changed and the excess crud can be deleted.

Similarly a PDF can be opened from within Illustrator with the type and the vectors editable, if the wind is blowing in the right direction, if you’re lucky!

For both of these routes you may find all the elements refusing to be ungrouped. If this is the case go Object > Clipping Mask > Release and Object > Compound Path > Release and then ungroup and see where that gets you.

Creating a country’s flag inside its map outline

Rob Cubbon — Mon, 15 Oct 2007 16:28:14 +0000

Quite often I’m looking for a simple iconic device to represent a country without having to just reproduce the flag alone. So, as you can see above, why not put the flag inside the country’s shape. Also, it’s free!

It’s relatively easy to find a country’s flag and shape on the internet and tracing the flag is very easy in Illustrator. For example above, the Union Jack part of Australia’s flag was created by overlaying red, white and blue rectangles. An important thing to remember with the diagonals is to copy and reflect them so that they appear at the same angle.

So how do you get a nice flat line around the edges? Simple. Group all the rectangles together (Cmd/Ctrl-G – you knew that!) and add another rectangle on top of them to where you want the edge of the flag and, with both of them selected, go Object > Clipping Mask > Make (Cmd/Ctrl-7) to crop.

Use exactly the same process to fit the flag into the country. The outline of the country can be traced using Adobe Illustrator’s Live Trace from an image downloaded from the internet. Put the outline over the grouped flag objects and, with both of them selected, go Object > Clipping Mask > Make (Cmd/Ctrl-7) to crop the flag.

The highlight or shiny surface is created by a black to white gradient circle set to Lighten in the Transparency palette with an Opacity of 60%.

I quite like the Australian flag!

Pop art effect turns photos into icons

Rob Cubbon — Sat, 06 Oct 2007 16:24:47 +0000

I used a slightly different technique for the above picture of David Beckham than my earlier pop art example.

This time I put the Threshold layer (Image > Adjustments > Threshold) on the top and set it’s Layer Style to Multiply. Some of the underlying image was coloured in, some was Posterized (Image > Adjustments > Posterize). No matter what you do to the photo you can always tell who it is.

A similar method was used for the above picture of Osama Bin Laden. There was incredible detail in the turban and the clothes that I kept from the photograph. I hand traced the colours on the face.

A important thing to remember about this sort of effect is that the flat colours and posterization mean that the image can be scaled up much larger than a similarly size photo can.

I knew this picture of Lewis Hamilton with all his sponsorship logos would come up well with the posterize effect.

How to create paper, receipts or newspaper with torn edges

Rob Cubbon — Wed, 03 Oct 2007 11:34:20 +0000

I was asked by a client to present their final figures in a pitch they were doing in the form of a receipt. I thought it was quite a nice little Photoshop trick and a nice idea. Here’s how.

Draw the outline of the receipt, or piece of paper, with the Pen Tool (P), and turn it into a selection by Cmd/Ctrl clicking the Path in the Paths palette. Switch to Quick Mask Mode (Q) and your selection will turn 50% red (you can change that in Preferences). Go Filter > Pixelate > Crystallize. A cell size of 3 will give you the torn edge effect. Switch back to Standard Mode (Q) to return the quick mask to a “marching ants” selection.

Fill the selection with a suitable linear gradient and there’s your paper.

Two typefaces I found that looked similar to the printing you get on these receipts were called FacsimileLL and Dot Matrix. FacsimileLL is above. I used the Free Transform Tool (Cmd/Ctrl-T) to size the type onto the paper. Remember, holding down Cmd/Ctrl whilst dragging the corner points creates the irregular shapes you need.

Lastly, for the drop shadow I, for once, didn’t use Photoshop’s own marvellous Layer Style. I opted to copy the paper layer, darken a blur it and Free Transform it irregularly (holding down Cmd/Ctrl whilst dragging the corner points) so it looks as though one corner is curling up slightly.

My client won the pitch, by the way, these little details really help!

Freelance graphic designer’s picture quiz #4 – spot the logo

Rob Cubbon — Sun, 16 Sep 2007 12:31:53 +0000

The above picture is made from 17 logos of the most famous brands in the world.

The question is very simple: which letter comes from which logo? Please leave your answers in the comments section of this post.

Playing cat and mouse with html email

Rob Cubbon — Thu, 13 Sep 2007 15:18:40 +0000

I created the visual below for an html email for an IT recruitment website.

It was sent out to 20,000 email addresses and was very successful.

They came back to me and asked me to come up with a follow up html email. I racked my brains. I thought of all the mouse clichés I could. Finally I came up with this one that they quite liked.

The problem is I’ve got to come up with a third!

How to do distressed, grunge or rubber stamp designs in Photoshop

Rob Cubbon — Thu, 06 Sep 2007 16:14:43 +0000

Put type or whatever you want distressed, grunged or “rubber stamped” on one layer in Photoshop with a white background layer beneath it. The create a blank layer above it (Cmd/Ctl-Opt-Shift-N).

Then you need to create some clouds. Very easy. First of all make sure your background and foreground colours in the Tools palette are the default black and white. To do this click on the tiny black and white squares in the Tools palette to the bottom left hand corner of the foreground and background colours. Or, simply press D!

Now (see below) and go Filter > Render > Clouds.

Once you have your clouds you need to get rid of all the greys and turn the layer into just black and white. There are a number of ways to do this: Go Image > Adjustments > Curves (Cmd/Ctl-M) and alter the line as seen above or you could go Image > Adjustments > Threshold. (You can get the same effect through Contrast or Levels, in fact!)

Set this layer’s Blending Mode to Screen, Color Dodge or Linear Dodge and play around with the opacity. To get the “holes” smaller on this “dalmation dog” layer, make the layer smaller with Free Transform (Cmd/Ctl-T) and copy it (Option-click and drag the layer with the Move Tool (V) so it covers the desired area.

You can see in areas of the top, pink grunge picture I have copied some “dalmation dog” layers over other “dalmation dog” layers to create a specially distressed effect!

How to design shiny interface buttons in Illustrator

Rob Cubbon — Mon, 27 Aug 2007 18:25:46 +0000

These little buttons take a few seconds to make in Illustrator and give a nice polished, “web 2.0″ feel to a website or interactive environment.

Let’s explain how to make the triangle one. How do you make a triangle in Illustrator? Easy! Click on the Polygon Tool and click once on the artboard and enter 3 in the Sides: field of the resulting dialog box. (Didn’t know a triangle was a polygon? Neither did I until the other day!)

Make another small triangle and place it on top and fill it with a lighter colour. Go Object > Blend > Blend Options and enter 100 in the Specified Steps field. (Half that would probably do). Then, with both large and small triangles selected, go Object > Blend > Make (Cmd/Ctrl-Opt-B) and a beautiful rounded blur will fill your triangle. This method gives you more control that a simple radial gradient fill. See below my tutorial without words; I hope it makes some sense.

To make the shiny highlight at the top of the triangle you have to create a shape by intersecting a circle and a triangle together (see 2nd row above). With both triangle and circle selected option-click on the third Shape Mode icon in the Pathfinder palette where the tool tip says “Intersect shape areas (Option-click to expand)”. You will now be left with just the top of the triangle with a curved base.

Fill this with a linear gradient black-to-white, size and position it inset a bit from the top of the main triangle and set it to Screen in the Transparency palette.

Blog designed for stop smoking website

Rob Cubbon — Sun, 26 Aug 2007 10:53:11 +0000

I have just set up a quit smoking blog for my stop smoking website.

The blog is powered by WordPress – who else? – and I chose the ShadedGrey theme which is made by Web Hosting Bluebook.

How to design a cool web 2.0 button in Illustrator and Photoshop

Rob Cubbon — Fri, 17 Aug 2007 11:35:08 +0000

An earlier tutorial on how to make a shiny button in Illustrator using the Opacity Mask feature can be improved upon greatly by adding a sexy brushed steel surrounding ring to your amber jelly button!

As previously explained, the shiny “web 2.0″ button look can be made by placing a circle with a linear black-to-white gradient over a circle with a radial gradient and selecting Make Opacity Mask in the Transparency palette with both selected. See the first row in key below.

Other crescent shapes can be added by putting a smaller circle on top of another and Option-clicking on the second icon from the left of the Shape Modes row in the Pathfinder palette, the tool tip says “Subtract from shape area (Option-click to expand)”. This is a one click way to subtract one shape from another and something I use all the time in Illustrator. See rows 2, 3 and 4 below.

In row 5 below, the steel rim. Double-click the Scale Tool (S) enter 125% and hit Copy with the orange button selected (go Release Opacity Mask in the Transparency palette and get rid of the black and white circle. Put a linear gradient going white-to-black-to-white onto this larger circle. Duplicate the orange button again by pasting in front (Cmd/Ctl-F) get rid of the black and white circle and go Object > Compound Paths > Make (Cmd/Ctl-8).

Finally put all the elements on separate layers in Illustrator and go File > Export and choose Photoshop (psd) from the Format drop down menu. Choose RGB, 72 ppi and make sure you have the Write Layer radio button clicked on. Now we move into Photoshop for some final tweaking and blurring. Open the PSD you exported from Illustrator and you will see all your layers from Illustrator on different layers in Photoshop (top tip!).

Play around with it by blurring the crescent shapes a bit and copying and colouring layers a bit.

Most of the work I did was to the steel rim layer. Add a Drop Shadow and an Inner Glow in Layer Styles in Photoshop. Add Grain or Noise and a horizontal Motion Blur for the steel effect.

I put the orange button layer on top of the House layer and set it to Linear Burn Blend Mode.

They look quite nice as navigation icons.

How to turn a photo into an illustration

Rob Cubbon — Tue, 14 Aug 2007 10:37:19 +0000

Remember Adobe Streamline? Adobe stopped upgrading its vector conversion application some time ago. But with the advent of CS2, Illustrator’s old Trace Tool became the new super Live Trace and opened up a new world of possibilities!

As soon as you place or paste a photo into Illustrator a button on the Control Palette offers a Live Trace option. However, I like to see all the options first off by going, Object > Live Trace > Tracing Options…

Here you can choose Color, Greyscale or Black and White from the Mode drop down menu of the Live Trace pop-up box. Marilyn Monroe below was done by colouring up Live Trace with the default, Black and White option.

This is the Illustrator/vector equivalent of Photoshop’s Image > Adjustments > Threshold…

The drop down menu next to Presets: in the Tracing Options dialog box gives you thirteen different tracing presets. However, if you ignore the presets and choose Color from the Mode drop down menu and enter a value in the Max Colors box you will see an identical effect to Posterizing in Photoshop – a finite number of tones within a colour picture. There are only 5 colours in the illustration of a dog below.

Photos are made up of pixels and making them larger makes the pixels larger too and the result can be blurry and jagged or “pixellated”. They are bitmap images and their file formats are .BMPs, .JPGs, and .PSDs. Vector images are composed of mathematical formulas that consist of curves and points. They can be resized without losing quality. Vector’s file formats are usually .EPS (although EPSs can be bitmaps) and .AIs (Adobe Illustrator’s native file format).

You may find the colours chosen by Illustrator are a little dull. Hit the Trace button and go Object > Expand… to turn your pic into Vectors. At this point you cannot go back and edit your trace (only with a Cmd/Ctl-Z). Another advantage of these resulting vectors is the ability to re-colour them as above with Kuala Lumpur’s Petronas Towers.

To re-colour: simply select one of the colours you want to change with the Direct Selection tool (A) and go Select > Same > Fill Color and move those sliders!

Lastly, play around with the blurring option in the Tracing Options panel in order to create more figurative, impressionistic illustrations as with Big Ben below.

Overview: Go Object > Live Trace > Tracing Options once you have Placed or pasted your image into your Illustrator document. Make sure you have the Preview check box checked so you can see your chosen options before you hit Trace. Remember you have to go Object > Expand to turn the trace to outlines/vectors.

Graphic design an eye

Rob Cubbon — Wed, 08 Aug 2007 15:17:08 +0000

This is one way of reproducing a striking image without having to pay for it!

The logical way of doing an image made of dots would be like this: Make sure that your image’s width and height are divisible by 10 pixels (the above is 450 by 300 pixels). Nice round numbers make the following mathematics a lot easier. In Photoshop go Filter > Pixellate > Mosaic… and make you cell size 10 pixels. This gives the “pixellated” effect with each 10×10 pixel square having a flat colour. Save it.

Then in Adobe Illustrator, create a new document the same size as your saved Photoshop image, go File > Place, or just copy and paste the image and move it until it snaps on to the Illustrator artboard (if you have View > Snap to Point checked).

The object of the exercise is two cover the image with circles. Click once with your circle tool and make a circle with a width and height of 10 pixels. Put your first circle in the bottom left corner of your artboard. Two ways of doing this is either by “feeling” it snap there (if you have View > Snap to Point checked) or by making sure you have zero in the x and y co-ordinates in your Transform palette once the bottom left corner of the box is highlighted.

Now there are two ways you could fill the bottom of the pic with adjacent circles. You could either hit Return and get the Move dialog box and put 10 pixels in the Horizontal field, clicking Copy and then going Cmd/Ctl-D again and again and again until the line fills up. Alternatively, you could copy the circle in the bottom left corner to make another one in the bottom right corner and with both selected go Object > Blend > Blend Options… and put 10 pixels in Specified Distance. Hit Cmd/Ctl-Option-B to Make your Blend and the computer will do it for you! You will need to go Object > Expand… to turn to paths.

Use one of these methods to copy the line of circles over the whole of the artboard. To make the circles as “holes” inside another object, simply draw a white rectangle behind the circles (but in front of the placed image) and, with them all (the rectangle and the circles) selected go Object > Compound Paths > Make (Cmd/Ctl-8).

Now what you should have is a flat colour in each circle. However, I was finding this very difficult so what you have here, above, is an image with 10 pixels wide mosaic squares overlaid with 20 pixels wide circles.

Designing photo montages in Photoshop

Rob Cubbon — Sat, 04 Aug 2007 17:04:38 +0000

Although it’s important to cut out images well when composing a montage in Photoshop, it’s definitely not the most important thing.

Images should be chosen for their ability to fit in with the other graphic elements in the composition. Usually one piece or element should stick out more than others – the “hero”.

It is sometimes even more important to give the separate images in the composition a similar treatment so that they marry well when put together. In the picture above I bumped up the contrast in the usual way (Image > Adjustments > Curves (Cmd/Ctl-M) and hit Auto - this brightens the lightest point to white and reduces the darkest point to black). Contrast can be increase further by creating an S-shape with the diagonal line.

Contrast was then further added by copying each layer (Cmd/Ctl-J) and setting the top layer’s blending mode to Hard Light.

I had to come up with a graphic to illustrate how Russia’s President Putin was using his country’s energy resources as an economic and political weapon.

In the first instance I was really lucky with the main picture of Putin who, like most politicians, is not the most photogenic. In this main picture his eyes really strike you, it almost looks as though he’s taking aim.

Putin’s face was also given one of my favourite effects. Go Adjust > Adjustments > Posterize and choose the amount of different colour tones you want (6 or 7, I can’t remember).

Doing the montage in this way means that you don’t have to spend ages cutting out. You can do it really quickly by selecting bit of unwanted area with the Magic Wand (W) with Tolerance set to 20 or so and Contiguous checked (so it only selects adjacent pixels). Remember to Feather by 1 or 2 pixels before you hit delete!

Designing HTML emails on a Mac

Rob Cubbon — Thu, 26 Jul 2007 14:56:13 +0000

I was recently approached by an IT recruitment company to come up with an idea for an HTML email that could also be used in other forms of online advertising, such as banners, MPUs and skyscrapers.

The result was the above which will be used as an HTML email and to be sent out to 20,000 potential customers.

Here’s how you do an HTML email on a Mac: Compose your email as a separate “index.html” document in a directory on your server. Don’t use much CSS (only for text formatting, don’t use divs) and put the CSS in the body not the head. Contain everything within a table where width="100%". And within that table put other ones with widths no larger than 600 pixels. Make sure all your image sources have full routes. Once you’re happy with the result, view the page in Safari and go File > Mail Contents of This Page (Command-I) and a beautiful HTML email will open up in Mac Mail for you to email the client.

The email should be welcoming and friendly with an eye-catching theme, enticing the recipient to click through to your client’s website.

Have a look at the other ideas I came up with for this HTML email brief.

What is an artworker?

Rob Cubbon — Sun, 22 Jul 2007 08:58:16 +0000

Many people have asked me this question and, in the absence of a Wikipedia entry, here’s my definition.

The term pre-dates desktop publishing when “artwork” or “mechanical art” meant the material (photography, bromide, film, tranparency) or completed, camera-ready pages that could be photographed with a stat camera to make a same-size film that would be used to create a printed product.

Now, an artworker is someone who produces a print-ready product.

Artworkers get a concept from a designer (either in drawing or digital form) and use the appropriate software to create it.

An artworker would understand the basics of printing (cmyk, line screens, spot colours, etc.) as well as design, typesetting, formatting and colour correction. It would be rare to find an artworker with no eye for design.

They should be highly proficient in a number of basic graphics applications, such as Photoshop, Illustrator, Freehand, QuarkXpress and InDesign as well as having a basic grasp of how to sort large amounts of information in Excel and Word. Knowledge of JavaScript and XML is also handy in creating automated work flows and negating the need for repetitive tasks.

A “traditional artworker” means someone who – maybe a compositor in the past – has the necessary craft skills to cut, fold and glue paper in order to mock up packaging or other design visuals.

A “creative artworker” is someone who is perhaps half way between a designer and an artworker. They would be required to design print-ready artwork on the fly or be called upon to apply a certain design style across a range of printed material.

Graphic designer’s picture quiz #3 with hidden famous faces

Rob Cubbon — Sat, 21 Jul 2007 15:01:10 +0000

How many famous faces can you spot, who are they, what’s the background they’re superimposed on?

I did this to illustrate an article I wrote commenting on the music industry. I used paths, marquees with a feather of two pixels and a brush eraser with a hardness of 0% to cut out the heads. It’s usually best to go for a layer blend mode of Hard Light or Linear Light with an opacity of 80 to 90%, or Normal with an opacity of 60 to 70%. The idea is to be able to see the layer on top and what underneath it equally to merge two images.

Make your own pop art poster

Rob Cubbon — Fri, 13 Jul 2007 12:48:32 +0000

Most pop art pictures in the public’s imagination contain a photograph that has been reduced to only two tones, black and white, for example Andy Warhol’s Marilyn. The best way to do this is to go Image > Adjustments > Threshold in Photoshop. Move the slider until you get the best result.

Flat colours should then be added on layers above your black and white background. Set these layers to Multiply so that the black shows through. Pick no more than about four or five quite vibrant colours. It was quite good to get the background cyan in the above picture of Rihanna. More on Rihanna plus another pop art image here.

However, other effects can be achieved by reducing a greyscale picture to four or five tones instead of just two. Go Filter > Artistic > Cutout and choose the number of tones you want. Then they can be coloured up by going Image > Adjustments > Hue/Satuation, checking the Colorize box, putting the Saturation back up to the middle point and playing around with the Hue. See George W Bush below.

I also added those little dots favoured by another famous pop artist – Roy Lichtenstein. To achieve this I had to add a “clouds layer”. Click the small black and white squares by the foreground and background color on your Tools palette to default the colours (or press D) and go Filter > Render > Clouds on an empty layer. This is a handy way to get something to play around with when you’re setting textures generally.

Then go Filter > Pixelate > Color Halftone. I chose the smallest dot, 4 pixels wide. The layer is set to Multiply at 10% Opacity – just enough to see it.

The image below of Kanye West was created by using the above techniques.

If you want me to do a pop art poster design or anything else – for a fee, of course – then please contact me.

Using illustrators to help with designs

Rob Cubbon — Thu, 05 Jul 2007 15:25:16 +0000

Finding a graphic element to illustrate an abstract or dry subject is a creative challenge. You find yourself being pulled in one direction to beautify your work and in the other to explain the subject in hand.

I am continually searching around for images, illustrations or graphics that will compliment articles with heavy corporate or technical subject matter.

Although I can purchase microstock photography produce my own Photoshop comps and Adobe Illustrator traces sometimes I need to commission an illustration.

To find a illustrator I use Sylvie Poggio Artists and Illustrators Agency. They put me through to the brilliant UK illustrator Rory Walker who I’ve been working with a lot recently. Rory takes briefs usually by email and emails back with his stunning illustrations.

Rory uses dip pens, pencils, india ink and anything else he can get his hands on and mixes them up with a wacom tablet, pen and Photoshop. See his creations here entitled Tug of War (above) and Ravers (below).

I know I have been particularly lucky with Rory and Sylvie as I know they will always understand the brief. The only advice I would give in commissioning illustration is to be absolutely clear about what you want whilst leaving the maximum amount of creativity in the hands of the illustrator. Other common sense things to specify are: size (in inches, centimetres, pixels and resolution), format (landscape, portrait or square), time and method of delivery (email or physical artwork).

Rory can be found at http://www.roryroryrory.com (what a great idea for a URL: if you can get the word you want, repeat it three times!). Sylvie Poggio Artists and Illustrators Agency can be found at http://www.sylviepoggio.com.

Designing tables with a hanging bracket

Rob Cubbon — Sat, 30 Jun 2007 11:40:57 +0000

It’s the joyous season of the dreaded companies’ annual report and accounts where artworkers and printers try to make money by producing horribly boring documents full of endless tables with horrendously dull titles like “Intangible Assets”.

But, do you know the trick of how to get columns of figures to line up, as the accountants like, with the bracketed figures (negative numbers) aligning with the figures not in brackets (positive numbers)? If producing the tables in normal tabbed text in both Quark and InDesign the solution is to select the tab icon that looks like an arrow with the decimal point after it in both applications. This not only lines your numbers up on the decimal point if you have them and also “hangs” the brackets outside the numbers.

Designing a crystal ball in Photoshop

Rob Cubbon — Mon, 25 Jun 2007 09:33:34 +0000

This is cool technique I’ve discovered which uses the Polar Coordinates filter in Photoshop to make a globe or a planet.

Start with picture (I chose one of some nice clouds). You may or may not at this point convert it into a square, but at some stage you will need to. As the edge of the picture will end up in the middle it’s a good idea to get it all the same colour. To do this draw a feathered rectangular Marquee (M) a little bit inside your picture frame, inverse the selection (Cmd/Cntl-Shift-I) and fill with a harmonious colour (see below top right).

Now, go Filter > Distort > Polar Coordinates… check Polar to Rectangular, go Image > Rotate Canvas > 180º, and then Filter > Distort > Polar Coordinates… check Rectangular to Polar and you should have something that looks like above bottom left.

To further increase the spherical illusion go Filter > Distort > Spherize, choosing Normal +100%. You will notice that this leaves a funny crossed shape in the middle of the sphere. I knocked this out with a feathered circular marquee filled with a blue that merges in.

After a bit of brightening, re-cutting out and adding a drop shadow, you will have created another world! This’ll work with any picture.

Choosing colours while designing

Rob Cubbon — Wed, 20 Jun 2007 17:27:33 +0000

Choosing a group of colours can be a daunting exercise. OK, so there’s some golden rules to follow, like “always choose from the same third of the colour wheel”. Golden rules are made to be broken.

Adobe has a colourful website to make this a bit easier. If you sign in you can download the colourways as a .ase which can be imported to CS2 and CS3 applications via the Swatches palette (InDesign CS2/CS3: Load Swatches; Illustrator CS2/CS3: Open Swatch Library: Other Library; Photoshop CS2/CS3: Load Swatches). A pleasure to use!

Designing waves and wavey lines in Illustrator

Rob Cubbon — Wed, 20 Jun 2007 10:38:02 +0000

You can use this tutorial to make weeds or grasses swaying in the wind as above. Or colour them orange, yellow and red and you’ve got flames. They are also a useful decorative feature that seems to be quite common these days.

Start with a line…

Go Filter > Distort > Zig Zag, or Effect > Distort & Transform > Zig Zag, and check the preview box so you can see what you are doing. The one above has 10px size, Absolute, 4 Ridges per segment and Smooth Points, but it’s up to you.

So you have your wavey line. Copy it (Cmd/Ctrl -C), Paste in Front (Cmd/Ctrl -V), and select the Rotate Tool (R). Now click on one of the ends of the wavey line and drag the other end up or down a bit (see above).

Now you have to connect the two lines so you can apply a fill. With your Direct Selection Tool (A) select the two end points in the apex by dragging a select over them so they look like the last example above. Then a simple Object > Path > Join (Cmd/Ctrl -J) (select Corner, of course) and you have your shape. Finally, add gradients and transparencies.

Graphic designer’s picture quiz #2 with hidden object

Rob Cubbon — Sat, 09 Jun 2007 11:03:33 +0000

Feel free to put your answers in the comments section.

What is it? (OK – that’s easy)

Where is it?

Who designed it?

What and where is the hidden object (only one)?

What is the relevance of the hidden object?

What is the relevance of the image to this site?

Easy?

How to design shiny web 2.0 buttons in Illustrator

Rob Cubbon — Fri, 08 Jun 2007 13:04:13 +0000

You could do this in almost the same way in Photoshop but I have recently been following the mantra “If you can do it in Illustrator, do it in Illustrator” – to save on disc space if for no other reason.

First draw the circle of your button (I’m following the bottom line of blue buttons in the above picture).

Then copy (Cntl/Cmd -C), paste in front (Cntl/Cmd -F), apply a gradient (the default white-to-black gradient is the one you want, with an angel of 90º) and, lastly, squash it vertically upwards to about half the size (you may need the bounding box for this (Cntl/Cmd-Shift -B).

Now the gradient orb needs to fit inside the button so you need to apply a little perspective. To do this in Illustrator, get your Free Transform Tool (E) click on the top left hand corner, once clicked hold down and press Cntl/Cmd-Option-Shift and then drag towards the right.

You can hardly see the difference after doing the next stage but it’s essential- move the gradient orb down a touch.

Here’s the clever bit. With the both the blue button and the gradient orb selected go to your Transparency palette and select Make Opacity Mask (make sure both Clip and Invert Mask and all other options in the palette are unchecked.

Finally, go Effect > Stylize > Inner Glow, leave the default options of Screen Mode, the yellow colour and a 75% opacity, but play with the blur (these are 35 pixels) and click the Center radio button.

The advantage of this method is that you can then change the fill of the button and keep all the effects. Obviously, it works on all other possible shapes.

And then you can have fun experimenting with adding type to your buttons!

Quark contacts this website!

Rob Cubbon — Mon, 04 Jun 2007 22:32:02 +0000

A couple of weeks ago I wrote a short article entitled Things I love about designing in InDesign that I couldn’t do in Quark which, I’m afraid to say included a couple of mistakes.

Then I got an email from Quark Inc.!

Matthias Guenther, a Senior Product Manager at Quark’s offices in Hamburg, Germany contacted me. I couldn’t believe it! I was initially reluctant to talk to Quark, a large multi-national company who maybe seeking to compromise the integrity of my website. But I did and I had a great chat with him.

We agreed that maybe in this industry too many people have been too ready to jump on the “InDesign’s cool; Quark sucks” bandwagon. In a similar way people add human characteristics to huge companies like Apple, Microsoft and Google, branding them heroes or villains when their primary concern is to make money for their shareholders and sometimes they annoy us and sometimes they don’t.

Matthias conceded that at least some of Quark’s bad publicity is Quark’s fault. Bad customer service and complacency during their long period of market dominance are criticisms that have often been levelled against them. But since 2005, he tells me, Quark has been fighting back against the competition.

Is he right? Well, I’ve not used Quark 7 much in the studios where I work as take up has been slow and the industry reviews have been luke warm to say the least. But the introduction of drop shadows and transparency goes some way to catch up with InDesign and, in some areas, passes it.

Some of Quark 7’s main new features have limited appeal to me. Job Jackets enable the user to set job specifications providing control and consistency from job initiation to final production and Composition Zones let you specify an area of layout that can be used in multiple documents, or that another user can work on simultaneously. Both of these will help users from large work groups, newspapers for example.

Maybe Quark is concentrating on the traditional heavyweight areas of the industry as InDesign’s take up has been quicker amongst the smaller design studios.

Matthias was also keen to point out the PSD import of Quark 7 which is also available as a free Xtension for 6.5. It offers features InDesign CS2 does not offer, like changing the blend mode of layers and colouring spot channels.

We also talked about the well-received Quark Interactive Designer which allows you to export projects in SWF (Flash) file format intuitively without writing a single line of code. Particularly interesting for someone like me who’s been struggling for years with Flash.

Anyhow, it was very good to talk to Matthias. I’ve been using Quark for well over a decade and I though it was great that he would like to talk with this website. And if every employee shows this level of concern Quark will come back and the design world will be a better place.

In the future, I can see myself using InDesign for one-off creative jobs and Quark for other stuff but, one thing’s for sure, I’ll be using both Quark and InDesign for many years to come.

Do all graphic designers think alike?

Rob Cubbon — Thu, 31 May 2007 19:14:12 +0000

You may wonder … Great idea from Graphic Design Blog for a design experiment. Designers were asked to quickly sketch or produce logo ideas for a couple of made-up companies “Caffeine Rush” being one of them. Here’s my interpretation. I can’t wait to see if someone has come up with exactly the same thing!

Designing with keyboard shortcuts in Quark and Creative Suite

Rob Cubbon — Mon, 28 May 2007 13:37:32 +0000

Remember you can choose the keystrokes of InDesign to those of Quark by going Edit > Keyboard Shortcuts…

The table below is for the default shortcuts.

Action Quark InDesign Illustrator Photoshop

Show/Hide guides F7 Cmd(Mac)/ Ctrl(PC)-; (Cmd(Mac)/ Ctrl(PC)-H for boxes) Cmd(Mac)/ Ctrl(PC)-; Cmd(Mac)/ Ctrl(PC)-;

Bullet point Option-8 Option-8 Option-8 Option-8

Show/Hide Invisibles Cmd(Mac)/ Ctrl(PC)-I Cmd(Mac)/ Ctrl(PC)-option-I Cmd(Mac)/ Ctrl(PC)-option-I n/a

Hanging indent Cmd(Mac)/ Ctrl(PC)-\ Cmd(Mac)/ Ctrl(PC)-\ n/a n/a

Auto page number Cmd(Mac)/ Ctrl(PC)-3 Cmd(Mac)/ Ctrl(PC)-N n/a n/a

Designing eyes in Illustrator

Rob Cubbon — Sat, 19 May 2007 12:26:52 +0000

OK, so you’ve probably seen better line drawings but look at the eyes! One of the best ways to do eyes in illustrations is a simple black circle for the pupil and a smaller white one for the light reflection. Keep the smaller white circle in the “northwest” or “northeast” corner of the black circle and make sure it’s in the same place for all the other eyes in the same illustration. Most importantly, get it so that the white and black circles just touch each other which creates a lovely crescent shape of black that gives a beautiful “window to the soul”.

Charging companies interest on late payments

Rob Cubbon — Sat, 19 May 2007 11:17:43 +0000

This post only relates to the UK, I’m afraid.

It’s a fact of life in this country (and probably all over the world) that many companies try to save themselves a little money by paying small businesses late. This has happened to me recently and it’s not nice. Always at the back of your mind is the thought that the debtor could go out of business and you could lose alot of money.

But, fear not! Help is at hand. The Late Payment of Commercial Debts (Interest) Act 1998 gives small businesses the statutory right to claim interest on late payments from other businesses. This means you can charge them 8% above the Bank of England base rate (currently 5.5%) on everyday after 30 days from the date of your invoice.

Here’s the bit where you feel like you’re back at school. To calculate how much you can charge the debtor you have to multiply the amount by the interest rate (so at the moment that would be 13.5%) multiplied by the number of days late divided by 365. Fear not! Help is at hand! Enter the figures here and let the computer do the maths!

Basically debts of £1000 over 2 or 3 months late or more would be worth invoicing. Obviously, it depends on the client, there are some I really want to keep and don’t want to annoy! I have just put in an invoice to a debtor for £60 (120$US) which is better than a slap round the face with a wet kipper (as my Mum would say). I’ll let you know how I get on.

Thank you ContractorUK for this post which led me here.

Time management for graphic designers

Rob Cubbon — Sat, 12 May 2007 13:44:20 +0000

Before I start of this post I would like to ask you to think of an answer to this question: What one thing could you do that you aren’t doing now that if you did on a regular basis would make a tremendous positive difference to your personal or professional life?

One book I enjoyed reading very much was Stephen Covey’s 7 Habits of Highly Effective People. One of the concepts in this book is about time management and the four quadrants of time.

Quadrant I: Urgent and important matters. Crises, pressing problems, deadline-driven projects. We all have these things; we’ve all got to do them.

Quadrant II: Non-urgent but important matters. Relationship building, planning, recognising new opportunities, improvements to your workplace, exercise, recreation. Things we know we should do but don’t because they’re not urgent.

Quadrant III: Urgent but not important things like phone calls, email, interruptions, popular matters, some meetings. This is visible stuff on-hand at the moment that isn’t really important. It’s easy to get caught up in this quadrant!

Quadrant IV: The worst of the lot – non-urgent and non-important matters. This includes trivia, spam, time wasters, distractions, non-productive activities.

OK. I bet your answer to the above question was a Quadrant II activity!

For Covey, time management, is all about minimising the Quadrant III and IV activities so that you can concentrate on Quadrant II (Quadrant I just has to be done!). It’s so easy to get caught up with your head down gardening that you don’t look up to realise you’re in the wrong garden!

Think about what it is you really want to achieve. A successful design business? How are you going to achieve that? How can you expand your business without neglecting what you’ve already worked hard to achieve?

I’m also a big believer in meditation to clear your head and realise your goals. I’ve talked about the method on my quitting smoking website. It’ll work for non-smokers as well.

This was written in response to a productivity meme. I was invited by webee’s productivity post. Who was invited by Paul Enderson. Who was invited by Instigator Blog. Other excellent posts in this meme are Aaron’s 5 tips, Chris’s flow state and Tara’s productivity secrets

Things I love about designing in InDesign that I couldn’t do in Quark

Rob Cubbon — Thu, 10 May 2007 18:48:39 +0000

I was thinking this was going to be a short post but the ideas just keep on coming. Maybe a little unfair, I’m comparing InDesign CS2 with Quark 6.5, but anyway!

X and Y You can choose where your x and y measurements for page objects are taken in the Control bar – top left, top centre, top right, middle left, middle centre, middle right, bottom left, bottom centre or bottom right. With Quark it’s top left – and that’s it!

Duplicate spread You can add a new spread or page exactly the same as another one, in Quark you must add a page and then copy the elements.

Fill frame proportionately (Command (Ctrl for PCs) Option Shift -C) Get a picture to fit into a box without the edges showing. After this go center content (Command (Ctrl for PCs) Shift -E) and you’re just about there with most photos!

Interactive PDFs Put buttons on a master page to go to next page, previous page and contents/home page. InDesign has the ability to add numerous other interactive options to PDFs that Quark doesn’t. More about this here.

Print ready high resolution PDFs Export direct from InDesign, don’t even think about exporting them from Quark for final artwork – you have to print a PostScript file and distill it. More about this here.

Constrain proportions You have the choice to constrain proportions of boxes in the control palette by clicking on the chain/broken chain icon, you can’t constrain proportions in Quark’s measurements palette. This is so handy!

Change case Everything in caps and you want it in lower case? Can’t be bothered to capitalise words? It’s a time-saver.

Overprint preview Ever set white-out text to overprint? I have. Wish I didn’t!

Data merge Order fields from a spreadsheet direct to your document.

I haven’t even talked about drop shadows, object styles or transparencies – let alone importing AIs and PSDs.

On the other hand I still prefer the way Quark handles type and I haven’t found reliable quick keys for editing point size, leading, tracking and baseline shift in InDesign. I’m also still getting to grips with the way InDesign handles hyphenation and justification.

Graphic designer’s picture quiz

Rob Cubbon — Wed, 02 May 2007 15:14:02 +0000

Something a bit different. Here’s a quiz for you. Can you tell me …

Where was this picture taken?

Of what?

What country’s flag is shown flying towards the centre of the picture?

What is the connection between the flag and the picture?

Answers as comments, please. The winner gets absolutely nothing just a whole load of kudos.

DoFollow plugin not installed on my blog

Rob Cubbon — Tue, 01 May 2007 11:42:42 +0000

Attention from October 2008: This is no longer a DoFollow blog.

All comments from this website will have the nofollow command and therefore if you’re after a bit of link juice you best go elsewhere. If you’re a genuine commenter then I’m sorry I can’t reward you with a proper link. I’ve just got tired of deleting all the rubbish comments from people with keywords for names.

From May 1st 2007, if you commented on this site and added your url, search engine spiders would have followed to your site. Google would have counted it as a link to your site from a page with a PageRank from 1 to 4 – an all important “vote” of importance for your website, hopefully resulting in greater appearance and frequency in search engine results.

By default, WordPress, the blogging software which powers this site, adds the rel=nofollow command to all links in comments. And this DoFollow plugin removes rel=nofollow command allowing those search engine robots to follow.

Designing your own logo

Rob Cubbon — Sat, 28 Apr 2007 17:26:29 +0000

As I have now incorporated (become a Limited Company) and got totally sick and tired of Helvetica Neue I’ve finally got round to doing a new logo for myself. Here it is. Done very quickly with one curve and two line lengths in Illustrator. What do you think?

What is good design?

Rob Cubbon — Sat, 28 Apr 2007 17:09:21 +0000

This is an article I wrote for this competition. Looks like I didn’t win.

What is good design? I’ll tell you. Good design is whatever your client wants. Good design is whatever rich people like. Good design conforms to the zeitgeist.

I’ll never forget my first paid assignment in the world of design. I gingerly handed a print out to a relaxed Creative Director who’s face immediately screwed up as if suddenly suffering from internal physical discomfort. “Oooh! The bullet points look a little too big!” And handed it back to me. I skulked off back to the sanctuary of my Mac to tidy up those pesky bullets.

The very next week – I think you can guess what’s coming – I handed in a similar job with bullets to a similarly smug senior designer who, after seeing it, seemed to be struck down with a similar ailment. “Ooooh!” He exclaimed. The bullet points are too small!”

The very fact that you thought that was going to happen illustrates my point.

So many design decisions are governed not by proportion, composition, legibility, etc. But by taste.

Who says that the Nike swoosh is a masterpiece of iconic imagery? Who says that the iPod is a paragon of beauty and usability? Who says Grafik magazine is cool design? I’ll tell you. Rich people. The moral majority. You.

Don’t believe me? Then, humour me. For the rest of the day whenever you see something you don’t like, whenever you tut at a bit of “thoughtless” design, and, most interestingly, whenever you are absolutely sure that everyone in the world, no matter their background, would agree with you on some design decision, then stop. And think. What really is behind your taste?

Years of experience doing what you’re doing? Your education? Your upbringing? Other pieces of work in the same style? Yes, yes, yes. All these things, of course, we are all creatures nurtured by our environment. So where does your taste, your feeling, your instinct come in? Nowhere.

Still not convinced? OK. Consider the expression “what a terrible colour!” So one frequency of the visible electro-magnetic spectrum is better than another? So some bits of the rainbow you like and some bits you don’t?

What about those lurid designs of the sixties and seventies? Would you use them now? Garish elabourate decoration of the east? The greys, pinks, yellows of the eighties?

If you look through history at what has been considered “good taste” you’ll invariably find it has been used as an arbitrary device to make sure rich people get paid to design and poor people don’t.

A designer merely absorbs and re-interprets – just like everyone else – the only difference is that the designer believes he is actually creating. What makes him believe he’s creating something good? Because he has been told this by his tutors, piers and parents. If you tell someone something enough times, they will invariably believe it. This is the origin of “good taste”.

What designers are good at therefore is to identify stylistic elements that are “in” at the time. Not only what’s “in”, but what’s “in” with a certain crowd. What’s “in” with the movers and shakers, the great and the good, the people that matter.

And it is a certain type of person that becomes a designer. This is why most design consultants and advertising agencies in the UK are populated with white, provincial, ordinary people. Not big or small, not clever or thick, not ugly or good-looking. Invariably they share the same interests, dispositions and sensibilities: Retro clothing, guitar-based music, a premiership or championship football team, alcohol, Helvetica Neue.

All these designers are marvellous individuals, of course, but collectively and in their work they conform.

Creating cool twirls and spirals with Illustrator

Rob Cubbon — Wed, 25 Apr 2007 15:00:00 +0000

Here is an amazingly cool Illustrator tutorial about creating twirls from Veerle Pieters a graphic/web designer living in Belgium. Twirls from Veerle, you might say. (Sorry!)

The Spiral Tool can be selected by holding your mouse down on the Line Segment Tool. Once you have created a spiral you like, copy (command/control -C) and paste in front (command/control -F).

Now select the Rotate Tool (R) and click once on the centre of the spiral exactly where the line ends. Now click anywhere else on the spiral and drag to turn the copy slightly. You will now have two spirals coming from the same point but, unfortunately, they will be crossing each other at some point.

To make sure they don’t cross, select the Scale Tool (S), and with one of the spirals selected, just like before click once on the centre of the spiral exactly where the two line ends meet. Now click somewhere on the outer side of the spiral and drag to size the spiral so it doesn’t cross the other anywhere. (This takes a bit of doing, you’ll find it much easier if the decay percentage of your spiral when the Spiral Tool is double clicked.

All that remains is for your two end points to be joined (command/control -J) and now your twirl can be filled in with a colour and used.

There is another way. Create a 10 pixel triangle and copy it. Go to you Brushes palette and select New Brush… and choose Art Brush, make sure the arrow points the same way as the triangle. Then, after you’ve drawn you’re spiral, give it a stroke value and apply your new brush. The triangle will be applied throughout the length of the twirl and this way you get a more perfect looking spiral.

In fact, this spiral can then be set as a new Art Brush and then you can experiment applying this spiral to lines to create differently distorted spirals! Happy twirling!

Freelance graphic designers’ blogs

Rob Cubbon — Tue, 24 Apr 2007 16:49:24 +0000

Here are my favourite three blogs of people who, like me, are graphic designers and write about it on the internet. Firstly, from Romania, I really like webee design blog. Webee has really helped me out with his tips and encouragement.

Also a beautiful creative design blog by David Airey who has blogging help as well as design discussion. Lastly there is Creative Guy who has numerous mac and design tricks.

Mac Games: Fairies, Jewel Quest and Ouba

Rob Cubbon — Sun, 22 Apr 2007 10:01:04 +0000

These games involve a multi-object grid and moving rows and columns or swopping objects until you match up three in a row. (I don’t know if there is a special name for this type of casual game!) By far the best and most beautiful of this genre is Fairies. It has extremely high production values, polish, and attention to detail, not to mention a soundtrack sung by Julianne Regan from All About Eve.

Other games of this type are Jewel Quest and Ouba. Jewel Quest has a sort of Indiana Jones theme and involves matching artifacts and proceeding along an archaeological quest and is quite good. Ouba, on the other hand, has dreadful game play and although looks quite good is slow and clunky and should be avoided. Turning down graphics quality and switching sound effects off improves game play a little bit.

All these games available from Big Fish.

Hidden object mac games

Rob Cubbon — Sun, 22 Apr 2007 09:09:43 +0000

Using Flash and Photoshop to create beautiful scenes, hidden object games are an ideal distraction for relaxed gamers.

Here are four I got from Big Fish Games at $20 a go.

Three of them are in the Mystery Case Files series: Huntsville, Prime Suspects and Ravenhearst. Ravenhearst is definitely the best. Set in a Victorian English country house, it has some great point and click puzzles at the end of the hidden object rounds as well as an engrossing ghost story running through it. See below.

Paris 360º, however, is a different kettle of fish. Set in modern Paris, gamers can drag through panoramas of the French capital and surrounding châteaux. Sounds and looks good, unfortunately there is too much repetition of scenes and objects and soon gets boring.

Working with large files in Photoshop

Rob Cubbon — Fri, 20 Apr 2007 13:37:05 +0000

Preparing artwork for huge exhibition spaces or large point-of-sale displays in Photoshop can be a nightmare and can use up precious processing time on your computer. And this is even if you have a Dual 2 GHz G5 Mac with 3 GB of RAM!

But there’s no need to keep the high resolution you would for ordinary print files. Some Photoshop files I’ve made have been 3 metres by 8 metres at 120 ppi and have printed out fine. A lot of these spaces are printed on white backed acetate or plastic translite which is back lit.

The results can be beautiful and won’t crash your computer!

And another thing. Don’t worry too much if you get the spinning wheel of death, the multicoloured pizza or umbrella or whatever you call it. Even when working on a souped up G5 Photoshop can still freeze – even saying (not responding) when one choses the force quit option (Command-option esc). But when this happens don’t force quit! Chill, make a cup of tea or coffee, it will spring back to life and you won’t have lost anything!

Why RGB colours look bad when converted to CMYK

Rob Cubbon — Fri, 20 Apr 2007 13:29:05 +0000

RGB can be seen in the dark. CMYK can’t. RGB shines out at you. CMYK inks absorb some colours and reflect others.

Somebody wrote to me the other day whose website had lovely blue type on a black background. Fine. Unfortunately, the results when changed into CMYK and printed were dull, muddy and terrible.

How can this be prevented? Once converted to CMYK Photoshop will display its interpretation of how it will be printed. Further investigation should be made by using the Info palette and observing the CMYK values whilst hovering the mouse over certain areas of the image. Remember Photoshop can only give you an approximation both on screen and with its conversion values. Printed materials will never look the same as they do on screen.

The other thing you can do is change the CMYK values to make it look good. Look above. Picture number 1: How the website was, a black background with blue type. The blue was R80 G80 B252 (Hex: #5050fc).

Picture number 2: Look at the difference! That RGB colour when converted to CMYK is re-interpreted to a muddy, dull blue, C76 M70 Y0 K0. Almost illegible against the background black.

Picture number 3: The only possible solution. Lighten up the blue to a cyan dominated one, C64 M11 Y0 K0. Maybe not in the style of the website but at least punchy and legible.

Designing a website header for a spoilt angel!

Rob Cubbon — Fri, 06 Apr 2007 10:04:17 +0000

I have just designed a website header for my friend’s fragrance, cosmetics, skincare and beauty blog.

It was quite difficult. I got the vector angel from www.shutterstock.com and coloured it up. I found the blonde hair difficult against the white background. The type is in Morpheus. The “S” was created using Adobe Illustrator’s outline stroke effect.

Action	Quark	InDesign	Illustrator	Photoshop
Show/Hide guides	F7	Cmd(Mac)/ Ctrl(PC)-; (Cmd(Mac)/ Ctrl(PC)-H for boxes)	Cmd(Mac)/ Ctrl(PC)-;	Cmd(Mac)/ Ctrl(PC)-;
Bullet point	Option-8	Option-8	Option-8	Option-8
Show/Hide Invisibles	Cmd(Mac)/ Ctrl(PC)-I	Cmd(Mac)/ Ctrl(PC)-option-I	Cmd(Mac)/ Ctrl(PC)-option-I	n/a
Hanging indent	Cmd(Mac)/ Ctrl(PC)-\	Cmd(Mac)/ Ctrl(PC)-\	n/a	n/a
Auto page number	Cmd(Mac)/ Ctrl(PC)-3	Cmd(Mac)/ Ctrl(PC)-N	n/a	n/a

Freelance Graphic Designer London» Freelance Graphic Designer London

What to do if you are on an email blacklist

What are email blacklists?

Are you on an email blacklist?

Use Gmail to send and receive mail from the blacklisted address

Web design using JavaScript

Simple and interactive image slideshow fader with JavaScript

How to use it

Other JavaScript resources on the web

What rates should a graphic designer charge?

So what is the hourly rate for a graphic designer?

Charging a flat rate for design jobs

General points about graphic design prices

How to design a color page magazine advertisement

Supplying initial ideas

Choosing great typefaces

Dealing with photography

Writing great copy

Supplying the artwork

How to market yourself #7: How to write and design a WordPress page or post

Getting started: What is the difference between a WordPress page and a WordPress post?

Adding the title of your post or page

Writing - what all those buttons mean above your WordPress text editor?

Insertion of the tag

Insertion of the

tag

tag encompasses both of these in a big way. In most WordPress themes, the title of your post is wrapped within

text but is important nonetheless. So I find these tags very important. But they don’t exist in the Visual editor so you’ll have to use the HTML editor to insert a subheading in your post or page!

Insertion of code into the HTML text editor

How to insert images manually into a WordPress post or page

Conclusion - OMG this post has been so long and you’ve got to the end of it!

Designing and publishing a hospital radio magazine

Chelsea and Westminster Hospital

Designing, selling advertising space and publishing a magazine

How to pitch, promote and market your ideas

How to create this in Photoshop

Photoshop a flag inside a country

Exciting business card design

Flash gallery templates reviewed

The Flashnifties positive experience

The Flashmint negative experience

What to look for in a Flash gallery template?

GreyBox

How to market yourself #6: How to get links to your website

Introduction

Write articles for other sites

Comment on other blogs

Social bookmarking sites

Link to other sites

Submit to directories

Reciprocal links and three way link exchanges

Conclusion

Barack Obama pop art design

How to market yourself #5: How to optimize your WordPress site for search engines

Get the right URLs

Title tags

Categories

Heading tags

tags than within tags. The

tags) which can also contain keywords.

Images

Sitemap and robots.txt

Embolden words

Meta tags

Write your .htaccess

Follow standards

Further reading

How to market yourself #4: What to write in your blog or website

Keywords in your content

Write content that people will want to read

How to market yourself #3: How to install a WordPress blog on your site

What is WordPress?

What’s good about WordPress?

How to install WordPress on your host server

How to market yourself #2: How to set up a website

How to decide on your web address

Register your website’s address

How to choose a web host?

So, I’ve got a web address and a host, now what do I do?

How to market yourself #1: Introduction

Insertion of the
tag

tag encompasses both of these in a big way.

In most WordPress themes, the title of your post is wrapped within

text but is important nonetheless.

So I find these tags very important. But they don’t exist in the Visual editor so you’ll have to use the HTML editor to insert a subheading in your post or page!

tags than within
tags. The