I recently sent a newsletter to the subscribers who had downloaded my free How to Market Yourself Online ebook asking a simple question: “What would you like me to write about for you?”. The answers that came back were many and varied but one I address here.

We’re all hungry for knowledge and sometimes the best way to soak up information is to read a good book. One of my subscribers asked me to list a few books that I’d found helpful in running a graphic design business. Here they are.

Tao Te Ching by Lao-tzu

I have read a bit about eastern religions and mysticism. I find that the general tone of many of these books helped me change my outlook on the world. But it is very difficult to pinpoint any one sacred text that’s helped in particular. However, I found many passages in this classic Chinese book written around the 6th century BC by the sage Lao Tzu to be deeply perceptive.

Always without desire we must be found,
If its deep mystery we would sound;
But if desire always within us be,
Its outer fringe is all that we shall see.

(From J. Legge’s translation)

The Richest Man in Babylon by George Samuel Clason

This short book dispenses financial advice through a collection of parables set in ancient Babylon. In each story there is a simple lesson to apply in daily living. For example, save a tenth of what you’ve earned every year.

The Seven Habits of Highly Effective People by Stephen Covey

The title of this book intrigued me as I was interested in the possibility of changing habitual actions. Stephen Covey talks, amongst other things, of the necessity of being proactive – when something bad happens don’t cry over spilt milk, just clear it up, think of how you can stop it spilling again and move on.

The 4-hour Work Week: Escape the 9-5, Live Anywhere and Join the New Rich by Timothy Ferriss

Don’t judge this book by it’s cover – don’t even judge it by it’s title. Timothy Ferriss only christened this book so after tests that showed it would sell the most copies so named. And testing is something we should all do more of, says Timothy. He also advocates the elimination of tasks – and even clients – that do not contribute a noticeable benefit and, most interestingly, the automation your business so it can run without you.

The E-Myth Revisited: Why Most Small Businesses Don’t Work and What to Do About It by Michael E. Gerber

This book was recommended by Timothy Ferriss above. Michael E- Gerber encourages you to work on your business rather than in your business, concentrating on your business model rather than the technicalities.

How To Win Friends and Influence People by Dale Carnegie

The granddaddy of all people-skills books. I read this book recently and realized I’d already read a lot of books that had referenced it. It’s fantastic for reminding you of the basics of dealing with people – smile, remember names, become genuinely interested in other people.

Getting Real: The smarter, faster, easier way to build a successful web application by 37signals

Moving onto the world of web, 37signals advocate the stripping down of meetings, people and budgets to start work on projects early in order to scale later. This is not a technical book. Anyone working in the internet will find value here.

Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition by Ian Lloyd

Here’s a technical book I found it incredibly useful when starting to build websites. It assumes hardly any previous knowledge of HTML or CSS.

So, quite a mixed bag. But these are the books that have helped and inspired me over the years.

So, what about you? Would anyone like to add to this list?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There is a game in this industry: the trade off between graphic designer and client. I have heard this expression in large design agencies many times: “this would be a great job if it wasn’t for clients!” I disagree, I think it’s a great job period.

If you don’t like your clients, get out of the industry!

How can there be anything wrong with clients?

Imagine the experience of having lovingly labored over an exquisite piece of design, only to have the client’s mother suggest a different color because it matches her curtains. The way you deal with these challenges will dictate the success of your business.

A disagreement with a client is an opportunity.

Never, ever get angry

I’m not saying, don’t show your anger in front of anyone. I’m actually saying, don’t be angry! Anger saps your energy and is unproductive. If you feel like getting angry with a client, don’t. Move on to something else, ask a third party for advice, sleep on it and see how you feel the next day.

There are a few classic problems. Clients will typically want the product shot to be as large as possible whereas the graphic designer will usually want more negative space around the image to balance the page and draw the customer in. Clients may also want to include as much product information as possible to persuade the customer of it’s merits, whereas graphic designers will usually seek to de-clutter wherever possible and condense the information to only a few unique selling points.

How do you square the circle between a client’s instinct to hard sell and the designer’s need to simplify the narrative to the end user?

Do you re-design as the client says and hope that the result will prompt a swift change of mind? Or do you explain as best you can the reasons why you think the current design works? Or, probably your best course of action, do you do both? Reconsider the design, listen to the client, introduce some of the suggested amendments whilst keeping the clarity of the original vision. The answer comes with communication.

If the client doesn’t agree with you, don’t take it personally. The client has more experience in the particular market and probably knows best.

The difference of opinions will give you a fascinating insight into the client’s world.

There’s no such thing as bad clients

There are only good clients and ex-clients. If you have a client that is a real pain to work with then that client is going to cost you money. So, you politely and unequivocally tell them to work with someone else.

But I never have any trouble with my clients. I really, really like them! I actually find it amazing that people phone me or email me and offer me money for what I do. The buzz I feel doesn’t diminish as time passes.

If you have trouble in this area I would suggest you start liking your clients. Become interested in their industry. So they sell widgets. Find out about their widgets. Ask them how the widget industry is at this time of year. Ask about their life, their family, their kids. Don’t force it. But ask and talk about them because you want to.

Otherwise, here’s some more specific advice about how to handle clients from my perspective as a freelance graphic designer:

How to avoid pitfalls

1. I always have in writing exactly the nature of the job, the agreed price and, very importantly, the amount of design stages – so there’s a clear end in sight.
2. Many designers will say a contract is 100% necessary every time. Personally, when the client is a large enough organization based in London, UK, where I am I would never bother with contracts. If the client is an individual from overseas I will insist on a contract or half the money upfront. This is what experience has taught me.
3. If someone phones up and says “I wanna build this great site, yeah, like Facebook only better like, with all sorts of stuff”, politely to ask them to put all the available content and intended functionality in an email and that will get rid of 99% of all time-wasters. If someone is asking for a new website or an important piece of marketing to be put together it is essential that they are able to put something about the ideas, the market or the object of the project in writing. And, the wonderful nature of copying and pasting will mean less typos!
4. Generally clients who just want to natter for ages on the phone aren’t the ones you want.
5. Try to spend as little time with clients as possible. The more conversation about a brief, the more confusion. If, while working on a brief, you find an area of uncertainly, don’t immediately reach for the phone to bother the client. See if you can discover your own solution to the problem or mention it while you are showing the next design stage. This way the client sees progress before potential problems.
6. Read the brief, read the brief, read the brief. Take notes if the brief is over the phone. But, if the brief is written down, read it again and again.
7. Use your network. Email trusted colleagues, post in forums, even phone a friend when the going gets tough and see what they say about the client’s requests. You may find that they’re not as strange as you think.
8. Never say something is difficult.
9. If a client asks for extra work or less money because of a promise of more work or money in the future, politely decline. Tell them “my experience of this fast-moving and fickle industry has taught me to take care of the present as tomorrow never knows.”

Conclusion

Generally, I think it’s all about attitude. If you genuinely like your clients, are interested in what they are trying to do and don’t think you’re right all the time then, I think, you will have successful relationships with them. Otherwise, resign yourself to a professional lifetime of discontent!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This article comes with a warning: easily offended graphic designers please do not read on!

Graphic design is not rocket science, nor does it depend on artistic talent – it just takes a lot of practice.

Some designers love to say that graphic design is a God-given talent that only a select few special people can have. Others will say that you also need an art college education. I say you need time and application – something we all have.

They are very angry about people who, with some knowledge of graphics programs and web promotion, can advertise themselves and do business as web designers without any training. I’m not. I say more power to them.

So what if some developers with limited design experience make some dreadful websites? They are only learning from mistakes that other “designers” did invisibly in college.

Let’s start with a definition:

What is graphic design?

Graphic design is usually described as visual communication of graphic elements and text to represent an idea or concept. A graphic designer improves the conversation between the client and the customers. A person who can combine the left brain thinking of the corporate world with right brain creativity.

So maybe somebody that is tremendously talented in the creative arts will be best suited to becoming an artist rather than a graphic designer.

Compromise and communication

Some graphic designers continuously complain that their clients don’t appreciate their designs. A good graphic designer will listen to the client in order to understand the market.

There may be differences between the designer and the client about how to communicate the message. This is where experience comes to the fore: How do you square the circle between a client’s instinct to hard sell and the designer’s need to simplify the narrative to the end user? No amount of talent nor hours in the classroom is going to help you with this one.

So, how do you learn graphic design?

Just do it!

I have laid out what you need to be a graphic designer in terms of software, hardware and resources. But the most important thing is yourself and your network.

You have your family, friends, colleagues, and, of course nowadays, an online army of people who can help you in forums, groups and social media. Show your work to the world and invite feedback (a thick skin is needed). Ask people how to do things. See what others are doing. Watch. Learn. Adapt. Above all else, keep an open mind.

Conclusion

There is a tendency for some old school designers to sit back, congratulating themselves on their god-given talent which impedes their development in the newest areas of the industry and damages their relationships with clients.

Design doesn’t sit still. There are new areas of expression, new trends and new designers coming along everyday. People without a design background can learn design and find new ways of expression. I believe this has happened in the last few years with web design standards being set by people with all sorts of backgrounds – and all sorts of talents.

I would never discourage anyone from becoming a designer due to a perceived lack of “talent”. Who defines the word “talent” in design? Specifically the people who will benefit from the exclusivity of the profession. And what are you referring to when you say talent? The talent of dealing with clients? The talent to understand a brief? The artistic talent? This term is so subjective that an attempt to define it only hinders creativity.

So, don’t worry about your talent – worry about getting work!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I wasn’t always a freelance graphic designer. I used to teach English to Brazilian businessmen but that’s another story. I started by working for newspapers and magazines so my background is in print. By a mixture of application and good fortune I taught myself how to create usable, aesthetic, standards-compliant websites and discovered how to get visitors to them by running this blog. So I’m lucky to be able to offer a large range of services to my many amazing clients.

I’m also lucky that commuting into work for somebody else is a distant memory for me. But I distinctly remember an aura of elitism that existed around senior designers when I was starting out. Maybe it’s because I never went to design school but I passionately believe that anyone can do this (or anything) if they want. Here is what you need to have this fantastic career:

Proprietary Software

Adobe CS is the only proprietary software you’ll need. Of this suite of programs I find Photoshop, Illustrator and InDesign are the ones you really need to get to grips with. Illustrator for vectors, Photoshop for photos, effects and graphics and InDesign for long documents. If you’re only interested in web design, you can scrub InDesign from the list. There are open source graphics packages such as Gimp but I would find things very difficult without Creative Suite.

Free Software

You will need software for just about everything. The good news is that most of it is available for free. I have just been featured Char Polanosky‘s blog detailing my essential tools.

Hardware

I have an iMac at home and a Macbook for travel. You don’t need to go down the Mac route but it was what I started with so I’m hooked now. You will need a fairly powerful computer with a decent sized screen. You should also have external drives and a back up for when it all goes horribly wrong.

Fonts

All designers need a knowledge of typefaces. But take it nice and slow. Don’t rush out and buy Helvetica Neue or download a million free fonts. Continuously ask yourself when you see design work whether or not the font works with it and why. There are some fantastic new free fonts out there but you will need several weights of the classics.

Imagery and graphics

We all the know the usual stock and micro-stock photo libraries but there are a lot of great free photography sites and lots of great free vector content out there too.

Web presence and host

If you want to be a freelance graphic designer, a freelance web designer or anything at all you need your own website. Do not waste your time putting your portfolio on a 3rd party site or indeed putting your details on a bidding site. You may experiment with these sites and social media later. The first thing you need to do is to decide on your web address, register it and get a shared server or VPS server to host your own personal website.

Get clients to come to you so that you don’t have to go out and find clients. Start a self hosted WordPress blog and write about what you do.

A network

This is an added section due to a very useful comment I got below from Jonathan. You are going to need a network of people, other designers, photographers, artists, developers, etc., to help you. Sometimes it’s just great to be able to ask for help. So, join design forums, participate in relevant LinkedIn groups, leave comments on blogs and generally interact with people both on and offline to strengthen and expand your network. Help people and they will help you.

Jonathan’s comment below is a case in point. He has made an excellent addendum to this post and now we are connected. Thanks, Jonathan!

Clients

I knew I was forgetting something… clients are more-or-less essential to your business! The one thing that I can not stress enough is the value of keeping clients. More than half the work I do is for existing clients rather than new business. And a significant amount of new business comes from recommendations. So, remember, the best clients are the ones you already have.

All the clients I have (apart from recommendations from old clients) have contacted me from this website. Which is why I think it’s so important to have an active website that appears high in Google searches for a variety of keywords. Regular readers of this blog will know I’ve written about how to market yourself in this way.

Anything else?

I’m not going to insult anyone by saying the usual: “you need a thick skin, hard work, dedication and passion” – I assume you have all these in spades as you are reading this. And, to be honest, you’re also probably going to need a little bit of luck. But, don’t we all? People will say you need talent. But I won’t. For me, hard work, dedication and passion will beat talent any day.

So, is that it? Is there anything else you need to be a freelance graphic designer?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

10 years ago I had a big problem. I was a print designer but I loved the internet and desperately wanted to work with it.

I wanted a software package that would let me mess around with drag-and-drop functionality and when I was ready I could click “GO” and miraculously produce perfect code. I was probably using Internet Explorer as my web browser and used Dreamweaver as a design tool to churn out horrendous tabled mark up.

I gradually came around to seeing that web design was about standards, SEO, speed, aesthetics – and … horror of horrors … that I was going to have to learn code.

I certainly learnt the hard way – going up countless blind alleys that turned out to be cul-de-sacs – in my path to creating websites. Here are some of the most useful things I have learnt in the last few years:

1. Web developer tools and Firebug

One of the most useful previewing techniques that will help you learn CSS is viewing the Developer Tools in Chrome or Internet Explorer and in Firefox the Firebug extension. While using these tools’ cursor (it can be an arrow or a magnifying glass) click on an element and the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel.

You can actually make HTML and CSS changes on the fly so if you want to see what a web page would look like with different colored links you can. These tools will also show you which CSS selectors effect an element and which are overrided.

2. WordPress.org as blogging software

WordPress was first released in May 2003 by Matt Mullenweg as a fork of b2/cafelog so I couldn’t have known about it 10 years ago but I would say discovering WordPress was one of the best things that happened to me as a web designer. It’s essential, once you’ve learnt HTML and CSS, to get to grips with a CMS (Content Management System) to organize your website.

3. Hosts

Not all hosts are created equal. It is incredibly important to spend a bit of time on forums and social networking sites asking people with similar sites their experiences with hosts. Here are the results of surveys I did to find the best shared hosts and VPS hosts for WordPress.

4. Ensure cross browser consistency

Different browsers will apply different default paddings and margins, even to common elements like paragraphs, body and forms. Put this handy bit of code in your CSS as a starter for ensuring your web page will look the same in all browsers:

*{margin:0;padding:0}

Make sure you have a local version of all the major browsers Chrome, Opera, Safari, Internet Explorer and Firefox – as well as the ability to view the browsers on the Mac and Windows operating systems. The best online browser rendering service is Adobe’s BrowserLab.

5. Test

Whenever you change a bit of code in a CSS, HTML, JavaScript or PHP file always be sure to test the effected page straight after you’ve done it. It’s a no brainer really but I can’t tell you how many times I’ve made two or more changes to code only to find the web page broken with no idea which change had caused the break.

Obviously, you don’t want to test on every different browser after every particular change as that would drive you potty. But try to check each time in Firefox and check Internet Explorer or Chrome every other change as well.

6. Validate

And as you go along testing, so should you go along validating the HTML and CSS. It’s easier to sort out validation errors when you’ve just started the first page than when the site is further down the line and has several pages. Sorting out validation errors can solve a lot of IE problems as well.

7. Use JavaScript not Flash

I’ve got nothing against Flash, in fact the first time I saw it I remember thinking it was the answer to all my prayers – you could use any font you wanted and it would compress files pretty well as it used vectors I was used to in print design. However, it was never well crawled by the search engine bots, it made designers “over-design” and now it’s not even supported by certain devices.

For the sort of user-friendly sites I do I’m much better off using JavaScript, and more specifically jQuery, solutions as they degrade better: if you don’t have JavaScript enabled on your browser (and it usually is) the page still works, whereas if you don’t have the correct version of Flash running, Flash doesn’t.

8. SEO

The practice of getting your site indexed and high up the search engines’ results pages is something that starts the first second you work on it. The HTML should be as clean and as sparse as possible, marked up to leave the search engines in no doubt as to the contents and hierarchy of the pages.

The most important factors for good search engine rankings are firstly good content and secondly good incoming links and, usually, the first will ensure the second. However, there are other important things to learn and implement on the site such as XML sitemap, robots.txt, .htaccess and Google Webmaster Tools to check broken links, etc.

9. Speed and compression

And, as with SEO, the practice to get you site load as quickly as possible starts right at the beginning. So, combine external CSS and JavaScript files, enable gzip compression and caching server side, optimise your images as much as possible (even sacrifice quality a little bit), minimize code and PHP calls.

It’s good for your visitors and now Google uses speed in it’s algorithm for calculating a site’s ranking.

10. Picking colors and adding space

With designing generally it is usually a good idea to choose two colors, a primary and a secondary, to build your color scheme around. The tendency, particularly with webpages, is to have just one color for links and then use different tints of that color for backgrounds etc. But this leads to a very monochromatic look. So it helps to choose at least one other color other than the main color. Of course, the choice of colors depends on the client and the type of site, but it’s something you need to get right and to get right early.

The amount of web page real estate with nothing in it is almost as important as the pixels that contain information. Spacing out the design will make it easier for the visitors to digest the information. You will not only have to learn how to do this; you will also have to learn how to persuade the client that this is necessary – as with many of the above.

Extras

Other things that would have made my learning less painful are listed here:

• Sidebar – all website’s need a sidebar – OK that’s a bit of a generalization and not always true but a designer will always want things to look clean and so many times I have tried to get the page contents to stretch right across the full width of the browser. Ouch, no, big mistake!
• Put the client’s logo on the top left hand corner and link it to the home page – as you go along there are more and more standards that visitors are coming to expect. It’s usually important not to disappoint or confuse your visitors!
• Contact page – just as ubiquitous as the Home link is the Contact link somewhere on every page.
• Vectors – when designing your site in Photoshop or Fireworks, use vectors as much as possible so that the continuous re-sizing doesn’t affect the quality of the finished image.

And what about you?

What would you have loved to have known about web design when you were starting out?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

So you’re using WordPress and you are getting a nice amount of traffic, say a few hundred visitors a day. Maybe you love running many of the great plugins that add extra functionality for your visitors. There’s just one problem: your server is struggling with the load and your site isn’t just slow, it’s ssslllooowww!

Shared hosting maybe inexpensive but resources are limited and security can be compromised. Dedicated servers are very powerful, can require high levels of technical knowledge for customization and are extremely expensive.

VPS hosting can be the happy halfway house

Virtual private server (VPS) hosting could be a solution if you have outgrown your shared hosting and don’t need to move to a dedicated server. It is the best option for small to medium sized businesses. A site hosted on a VPS gets its own RAM and disk space, however, it shares the processing capacity (CPU) with other sites.

Remember, Google includes a site’s speed into it’s algorithm – so a faster running site is not only advantageous to your visitors but also may push you higher in the search engine results pages.

I contacted hundreds of WordPress experts to ask them about their experiences and recommendations. Speed, reliability, ease of use and quality of support are important factors when looking for a host and came up again and again when talking to the experts.

Here are the most recommended VPS hosts

Here I’m listing the VPS hosts that were recommended by the pool of WordPress experts. I include a short synopsis of the specs, usability and pricing for the entry level packages.

• A2 hosting Inexpensive and their support comes highly recommended. 128 MB RAM, 1 GB storage, 100GB bandwidth for $10.46/month. You can get cPanel with higher specs for $17.46/month.
• Dreamhost Reasonably priced, good support, fantastic recommendations. This is my choice! 300MB RAM, unlimited space and bandwidth. Dreamhost have their own award-winning user’s control panel. For $15/month.
• Wiredtree Expensive but good. Intel Dual Xeon (8 CPUs), 512MB RAM, 40GB RAID-10 storage, 1000GB bandwidth, 4 dedicated IPs and cPanel for the base price of $49/month.
• Linode Knowledge of the command line is helpful as they do not offer a GUI out of the box. 360MB RAM, 16GB storage, 200GB bandwidth for $19.95/month.
• Liquidweb Their VPS plans start at $60/month and include cPanel as well as root access, 384MB RAM, 20GB storage, 400GB bandwidth, 4 IP addresses.
• MediaTemple The (dv) starts at $50/month and uses Plesk as a control panel. The (ve) at $30/month is for more advanced web developers that may find a control panel a hinderance.
• Rackspace Their users had nothing but good things to say about Rackspace. Cloud Sites™ runs on a series of clusters so it has redundancy and protection built in. When you upload your site or web based application, multiple instances of it run so that even if an entire server goes down your site stays up and running. They have their own cloud control panel proprietary GUI to navigate you through the clouds. Cloud Sites™ start at $149/month.
• VPS.net By default everything is command line; cPanel is an extra $10 a month. 376MB RAM
, 10GB storage
,
 250GB bandwidth for 
£15/month per node. (I don’t know why they have the monthly price in pounds but the cPanel extra in dollars!) But again, their users were extremely complimentary.

To command line or to control panel?

A web host control panel (such a cPanel) provides a graphical interface designed to simplify the process of hosting a web site. It makes it easier to, for example, move files around, or set up or import MySQL databases necessary for WordPress. Alternatively you can type command lines through a Secure Shell (SSH). SSH is a network protocol that allows data to be exchanged securely between two networked devices. Anything you can do via cPanel is also doable via SSH without the overhead of the HTML, imagery and web server processing so it is therefore quicker.

Personally, I find the WYSIWYG nature of the control panel more familiar and intuitive, however, I’ve been using SSH as well and it can sometimes be a better way of doing things.

Conclusion

Deciding on a VPS host for WordPress is no easy business. There are many things to consider. Above all make sure you pick a host that other WordPressers recommend. If you have any other recommendations or questions be sure to make them known in the comments section!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

As the internet becomes the preferred method of communication for businesses worldwide, the tool of creating and publishing the content is of increasing importance.

WordPress is used by millions to deliver news, messages and articles to the world. It has become not only the blogger’s weapon of choice but also a hugely popular Content Management System.

Learning how to use WordPress is easy. All you have to do is to login, add a new article and either write in WordPress, or copy and paste from your favorite word processor. But WordPress hosting is not for every web service. WordPress requires high standards from the web hosting provider which is why I took a lot of time to discover the best hosts. But first here’s a description of shared hosting and why it might be for you.

Shared Hosting

Shared web hosting is a service where many websites reside on one web server connected to the internet. It is generally the most economical option for hosting, as many people share the overall cost of server maintenance. However, being the cheapest package, it has its disadvantages. Firstly, it usually has a reduced level of security as you are sharing the server with several other websites. Shared hosting also has limited resources causing speed issues at both the back and front ends of your site.

Maybe you are just starting out as a blogger, or maybe you are using WordPress as a Content Management System for your new website. Maybe you are probably not expecting thousands or even hundreds of visitors a day. Does this sound like you? Then you need a shared host.

Recommended shared hosting for WordPress websites

During the course of my research I contacted hundreds of individuals through the WordPress LinkedIn group. Members of this group are high end webmasters with hundreds of sites on their books who have been around the block as far as web hosts are concerned – many of them were using 3 or 4 shared hosts for multiple sites. If you’re into LinkedIn and WordPress I would strongly recommend this group as I have found the advice and discussions there to be top notch!

The three most important factors we discussed in the survey were: speed, reliability and quality of support. We’ve all had the terrible experience of a website not behaving as it should and sometimes a timely and considered approach by the support team is worth a thousand dollars!

Here are the three hosts who came out as the best shared hosts for WordPress by WordPress professionals:

• JustHost. JustHost started providing high quality hosting services in 2008, so, compared to other hosting companies, JustHost is a new kid on the block. But nonetheless it scored high on our three hosting factors: speed, reliability and quality of support.
• Bluehost. The general consensus seems to be that Bluehost is inexpensive and has many powerful tools but support is maybe where it lacks the most. BlueHost is one of the 20 largest web hosts, collectively hosting well over 450000 domains with its sister company, HostMonster.
• Hostgator. The company was founded in 2002 by Chairman Brent Oxley, who started the company from his dorm room at university. With over two million domains, HostGator hosts approximately 1% of the world’s internet traffic. They came up many times in our survey as being a reliable host.

What not to do!

One hosting company’s name came up for all the wrong reasons so many times. The server sluggishness and all round poor performance at GoDaddy was mentioned again and again! So, by all means, register your domain name with GoDaddy, but don’t use them for hosting!

Conclusion

I learnt a huge amount from doing this survey. However, I decided to turn my back on shared hosting for this site and went for a Virtual Private Server (VPS). My next post will be about the best VPS hosts as recommended by WordPress professionals.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There can be a seemingly endless marketing job to do by submitting a 
blog article to various social bookmarking sites like Digg, 
StumbleUpon and Delicious. We can also choose to submit to social 
networking sites like LinkedIn and Facebook. Also, for designers and 
web developers there are several niche bookmarking sites springing up 
like DesignBump, DesignFloat, Dzone, etc. The good thing about the lesser known niche bookmarking sites is that only a few votes will put you to the top of the page and can get you great traffic.

But after we’ve done this there is no way of knowing that our efforts 
have paid off! The article will sometimes sit on the bookmarking site with just 
one vote and therefore unseen by the majority of the 
site’s visitors.

Here’s where the Designers’ Social Media Partnership Google Group comes in…

Promote your fantastic posts!

After you have written your blog post you can post the link and ask people to vote, bump, 
thumbs up, or generally big up your post. Maybe you can provide the 
links to the various voting sites so people can just click away very quickly to promote your 
article. I’ll write an example post to the group to show you what I mean by this.

Using the universal “I’ll scratch your back…” rule, people will be 
compelled to vote for your articles if you’ve voted for theirs. You 
may like to send them a private mail through the group to let them know.

Joining the group is easy with your Google ID and posting on the group is as easy as writing an email. You are, of course, completely at liberty to vote for the articles you 
consider good enough.

Remember, this isn’t confined to designers or developers, any blogger who wishes to promote their latest masterpieces can join the group.

Happy blogging, happy voting and I hope you enjoy being a member of 
this group! Thanks to Brandon Cox for this idea.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I got a call from a potential client the other day and he asked me a very simple question.

“Once you’ve created the website for me will you charge me every time I want to edit one of the pages?”

And, although this is not the first time I have heard this question, it still amazes me every time I hear it. Some web agencies create websites which their client has absolutely no ability to change once completed. This isn’t standard practice in the industry but it does happen.

If you have a website, it is never a question of if you want to change it; it’s always a question of when you want to change it.

Get your website set up with a Content Management System that is easy to use

A Content Management System (CMS) is software, implemented as a web application, that manages web sites. It should have an intuitive user interface that makes navigating to the page and changing it as easy as updating a text document on your computer.

There’s many great CMSs that enable you to create, edit and delete pages at will and, there’s even better news, a lot of them are free!

WordPress

WordPress is a fantastic web publishing platform which focuses on aesthetics, web standards, and usability. And, as it is open source, it’s free. “Free and priceless at the same time”. As you can see from the screenshot below there is a WYSIWYG interface which can be mastered easily.

I have written extensively about the setting up WordPress and creating and editing web pages using the WordPress UI.

WordPress is actually blogging software that is fast being used as the most simple and robust CMS. If you just want pages, with sub-pages, and maybe even sub-sub-pages that will be created and deleted along the way then WordPress can be set up to do that for you. Your web designer will not have to be involved at all. And, if you’re interested in improving your site’s position in search engines and you’d like to publish more than just web pages, then add a blog to your site. WordPress will do that easily!

I appreciate that many of my visitors will know this already but I felt I had to state the basics of WordPress as it’s potential as a CMS is so awesome people should know about it. As does that potential client I mentioned earlier, who’s now a client!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Blogs are, in my opinion, the easiest and best way to get stuff on the web.

With a blog you can publish constantly updated information about yourself, your company or your interests to the world. And what makes it even better is that this information is chronologically ordered and categorized for search engines almost automatically.

Your blog posts should be delivered in the most beautiful and readable way to get the most out of this fantastic medium.

Here are some design essentials you can use to improve the look of your blog and your blog posts.

Body text size and line spacing

The body text is the text you are reading at the moment – a normal paragraph within an article. It’s the meat and drink of the blog so it has to be readable. Having said that it’s amazing how many websites have their body text too small. Some people will not read text below a certain size.

I’m going to stick my neck out now and say that the font size of body text on a website should never be smaller than 15 pixels or 1 em in size. Furthermore the line height (the line spacing or leading) should always be 25% larger than the font size or more. So if the font size of your body text is 15 pixels; your line height should be 19 pixels or more. If the font size of your body text is 1 em; your line height should be 1.25 em or more.

If you are not familiar with the terms pixels, ems, font size, line height, etc., or don’t know how to change them read on.

The file that controls the size of the body text on your blog is the CSS (Cascading Style Sheets) file. If you are are a WordPress user it will most likely be in your theme folder and called “style.css”.

You can identify the font size and the location of this CSS file as well as previewing the changes using your browser. If you’re using Chrome or Internet Explorer you can view Developer Tools. And if you’re using Firefox you can use the Firebug extension.

While using these tools’ cursor (it can be an arrow or a magnifying glass), click on the element that concerns you and then the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel. So, if you click on a body text paragraph you may see that it is controlled by the body element in your main CSS file.

Above you can see in a screen shot from the Firebug panel in Firefox that the font size of the body text is 12 pixels and the line height is 20 pixels. You can actually change the values in this panel and the browser will render the changes live. This is a great way to learn CSS and mess around with different design elements. You can also see that the file controlling these styles is called “style.css”, hover over the file name in this panel and the web address of the CSS file will show as a tool tip.

Paragraph spacing

Paragraphs on the web should have a space between them. It should be around half the line height. So, if your line height is 20 pixels, you should add a 10 pixel gap between paragraphs. This is usually done with either padding or margin on the <p> tag. Here is a sample CSS code that adds a 10 pixel gap to the end of each paragraph:

p { margin-bottom: 10px }

Include sub-headings in your blog posts

If you are writing a post with more than a few hundred words then you should use subheadings. They improve the post for your readers as they break up and order the text and they are also good for SEO. Here is the HTML code for the above subheading:

<h3>Include sub-headings in your blog posts</h3>

As my normal blog title is wrapped inside <h2> tags my subhead text is therefore wrapped inside <h3> tags. This shows the hierarchy of headings – the subheading isn’t as important as the heading. Some blog post titles are <h1> in which case the subheadings should be <h2>.

As above, use Firebug for Firefox and the Developer Tools in Internet Explorer and Chrome to identify the title tag and then set up an <h2> tag or <h3> tag in your stylesheet accordingly. Here is the CSS for my titles and subheadings:

h2 { font-size: 23px; line-height:27px; color: #4c5464; }
h3 { font-size: 18px; line-height:22px; color: #243f76; }

Make your text scannable

Remember your visitors will typically spend a few seconds on your website so it is necessary to make them feel at ease and entrap them. So far we have talked about good body text typography, paragraph spacing and subheadings to do this. But you can also add bold text, italics, bullets, numbered lists, links, etc. to break up otherwise dull lines of text. These highlighted words jump out and may interest your readers. It also looks nicer.

Insert images

Blog posts are incredibly boring without images or video. Use them. Here is an article I wrote on how to add images to WordPress posts.

Conclusion

I wrote more about the technicalities of writing and designing a WordPress post here.

Font size, line height, paragraph spacing, subheads, images and other typographical elements can all be used to improve legibility and aesthetics in your blog posts. Have I forgotten something? Can you suggest other ways to improve the design of blog posts?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Back in the olden days just after Al Gore invented the internet, designers designed and programmers programmed. The web was full of slow good-looking sites that didn’t do much and useful busy sites that, frankly, looked like a dog’s dinner.

But every year since then more and more fantastically usable sites that also look great have cropped up. Why? The two previously separate disciplines of design and code have combined and at the intersection point is usability.

Usability

Everyone wants user-friendly websites that are easy to navigate and interact with the user without mess or confusion. A designer is more likely to achieve this when coding it himself. A knowledge of code is a knowledge of how the website works. If you know how the web works you can make it work well.

A designer who codes understands the pay off between clean code and great user experience. They know that if they want the website to load fast they may have to cut out some of the more gimmicky processor-hungry bells and whistles. The user is the winner as the website will do the job and won’t show off.

Less confusion, time and money

The more people involved in a project the more time and money is spent. The interaction between a designer and a developer is so often a compromise between what was wanted and what is now possible. A flexible designer will reinterpret the original design to the practicalities of the project. This is more likely to happen with a designer who codes as (s)he will understand the limitations much better.

With a designer designing and a coder coding the two processes have to run sequentially with one party waiting for the other to finish before they can start. With a designer coding the processes will be sequential the design will grow along with the website with tweaking and improvements being easily implemented along the way.

Better SEO

And while I’m talking about clean code I should mention SEO. The code-savvy designer will know to write good file names and alt text for images, for example, and write standards-compliant code. All good for getting the website higher in search engine results.

In my experience when the designer passes the Photoshop file to the coder it gets chopped up and called “image01.jpg” and “image02.jpg”, etc. Not very descriptive.

Ignore the nay-sayers

The wonderful thing about the internet is that many people are dropping the constraints of old-fashioned thinking that said “this person can’t do that; that person can’t do this”.

Open source CMSs, plugins and JavaScript libraries make it easier for the designer to learn new skills.

People are saying “why can’t I start up a website on my own” or “why can’t I set up an e-commerce facility”. The tools are freely available; you just have to learn how to use them.

Indeed, people who would never have been considered musicians 20 years ago are now successfully creating music online. Others who would never have had the financial ability to buy film cameras are shooting, editing and marketing their own movies successfully.

Don’t let negative thinking from yourself or from others get to you. I used to think HTML and CSS were beyond me. And then I thought I’d have nothing to do with PHP or JavaScript. But I was wrong. I was guilty of listening to nay-sayers.

Now I hope I can carry on exploring new avenues and encourage others to do so.

It’s never too late to learn!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

What sort of website to you want to create?

Web developers love jargon as they like to give your site a label. So is the site commercial (an e-commerce or affiliate site), personal, organisational (maybe a .org), educational (maybe a .edu), entertainment, news or blog?

Your site will not be adequately explained with one word. Maybe you want an commercial website with a blog, or an entertainment website with an e-commerce angle, but this can be explained after you’ve decided upon the most adequate one or two word description of your website.

What sort of functionality do you want?

Do you want a forum, multimedia (movies, sounds, image galleries), blog, site registration, shopping cart or electronic fund transfer, forms, databases, chat?

Now search again for your web designer / developer

So now you can enter different keywords into a search engine, such as “freelance blog designer” or “e-commerce designer and developer” and you will get more relevant search results.

Should I choose a web agency or an individual designer / developer?

This depends on the size of your site. If you are thinking of creating a huge e-commerce site on a par with Walmart then you should consider contacting a web agency. Otherwise, contact an individual who does websites. I may be biassed, as I am an individual web designer and developer, but we have many advantages over the agencies:

• One person is responsible for the whole site. Cuts down bureaucracy and keeps things simple.
• It’s … errr … cheaper. Now there’s a no brainer if ever there was one.
• A freelancer or independent web designer is more likely to choose an open source CMS (Content Management System) for your website rather than creating one especially for the job. Again, this depends on the size of the website and sometimes a bespoke CMS for a large site is the only answer but I always advise against them. Open source CMSs – such as WordPress, Joomla or Drupal – are well-known website systems that are free and already available for use. They are cheaper to run, have huge support networks behind them and can be used by countless web professionals for many years to come. A bespoke or proprietary CMS will be more expensive and, if you want it changed (which you will), you will have to go back to the original agency and give them more money to do it.

Don’t worry if you think the site is too much work for one person, it is normal for developers and designers to employ others if the work load gets too much for them. They will be better at this than you and, as long as you have one person in charge and responsible for the whole project, you don’t need to worry about how many people are working on it.

The last thing you want to do is to hire designers and developers separately and hope that they will communicate together or through you – this will never work.

What do I look for?

When you arrive and a web designer / developer’s website, look for examples of their work first and see if they have done sites that are similar to what you’re looking to create. Try to find out what this individual is like to work with. You can contact the people he or she has worked with or see if there is a testimonial page on the site.

Once you have explained what you want, see if the developer responds in plain English or uses jargon that you don’t understand. Be wary of jargon as misunderstandings can be very expensive and it is essential you hire a good communicator.

Conclusion

Communication is key here. Research types of websites, CMSs and jargon before you start out and have a clear idea of the functionality, audience and purpose of your website. If you have this crystal clear in your mind you will be able to find the right individual by talking to them and reading their quotes and proposals.

Responsible web designers and developers will present you with the exact functionality and extent of the website they will build for you with their initial quote so you will be in no doubt about what you are getting for your money.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Download a free copy of an interactive PDF eBook

I have just made a free PDF eBook called How to Market Yourself Online.

Click the button above to download a copy of this PDF as I will be referring to it in this article.

Most eBooks are PDFs. PDFs are easily exportable from Microsoft Word. But if you want complete creative control and interactivity (with not only external links to websites but also an internal navigation system) it is better to use Adobe InDesign to create it. However, if you don’t have InDesign (and it is rather expensive), please read on as most of the points I make here can be applied to all eBooks regardless of the application used to create them.

Why use a PDF?

The PDF format was originally created for storing and editing printed documents and because of this text does not flow to fit the screen. And, because the PDF embeds the fonts you are using, the page elements are pretty much set in stone and look identical on any computer with Acrobat Reader installed. With PDFs, What You See in the application you use to create it Is What You Get when your readers view it and print it.

So, if your readership would like to print your document on a desktop printer or view it on a laptop or desktop computer, PDF is the file type for your eBook!

(For eBooks that are created for handheld devices such as phones and eReaders, ePub is the file type to go for. I will be writing another article about creating ePub documents soon!)

Page format

Page size: Create your eBook with a page size that will fill up a computer screen and print off on a desktop printer without any wasted paper. So, I would choose something like the north american letter size of 8.5″ × 11″ or 216mm × 279mm landscape (that’s 11″ or 279mm wide by 8.5″ or 216mm deep – on it side, otherwise it won’t fill up the screen). Alternatively, you could try the european A4 size landscape if that’s where your audience is. But, it’s the landscape / horizontal format which is key here.

Obviously, you don’t have facing pages in an eBook – there are no left or right pages. And it is important to have 2 or 3 columns per page. Text stretching across the wide page would be difficult to read so divide the text up into narrower legs.

Also obviously, leave a few millimeters of margin all around the text so that nothing gets cut off by any of your readers’ printers.

Make every page the same size within your PDF even though it’s possible to have multiple sizes.

Fonts: Pick easy to read fonts. You might be partial to a bit of Comic Sans or Brush Script but would you really want to read more than a couple of paragraphs in them? Trust me, you wouldn’t. Choose a dependable serif for your body text (I went for Bell MT) and a solid unobtrusive sans serif for headings and subheaders (for me, DIN).

Paragraph styles: In order to add some air or white space into the proceedings, I preferred to add space in between the paragraphs rather than indent the first line. Other than the body text Paragraph Styles, here are some others I created to make my eBook.

• Headings
• Subheads
• Bullets
• Blockquotes
• Small text style (for copyright line and credits)

Colors: In order to inject a bit of variety into the gray or black text, I would choose a couple of colors for the headings and links in the document.

Images: Again, to add a little color, choose some images to insert into the eBook’s text. Maybe one for each section head like I did. But keep them small – you don’t want the PDF’s file size to be too big. Images should be RGB JPEGs.

Navigation, branding and header & footer area

The header and footer areas of an eBook are a great way to provide branding and navigational aids to your readers. There are four elements I put on the InDesign Master Page in the header and footer area (although their usage depends on the type of eBook):

• Page number: This is crucial for navigation. In InDesign go, Type > Insert Special Charecter > Markers > Running Page Number, or Cmd/Ctrl-Shift-Option-N. It is depicted as an “A” on the Master Page but gives the page number on every page of your eBook.
• Contents page button: I set the magnification in the button to Inherit Zoom
• Next and previous page buttons: Again, I set the magnification in the button to Inherit Zoom
• Your logo: Great excuse for a bit of publicity for yourself or your company. Make it a button with a hyperlink back to your website.

Cover page and contents page

Make a cover page with an internal link to the contents page. Make the second page a contents page with each section or chapter in the list linking to that section or chapter in the eBook. Add page numbers for reference as well. With this contents page plus the contents page button on every page, your reader is never lost in your document. The reader knows he or she can flick through the eBook, easily finding the bits that they want.

Exporting the document

When exporting the eBook there are several important things to consider:

• File size: Compress the images so they’re not too big and not too small.
• Make sure it has RGB brightness: In InDesign, go Edit > Transparency Blend Space > Document RGB and make sure it is outputted to a RGB destination.
• Make sure all hyperlinks and internal links are working: In the InDesign Export Adobe PDF dialog box under Option: check Optimize for Fast Web View, and under Include: check Non-Printing Objects, Hyperlinks and Interactive Elements.
• File name: Call it by it’s first name. Not something like “EBOOK495-8343Xv22.pdf”.

Security

Once exported and you’re happy with the way it looks (that took me months, by the way, but that’s another story!) there are some super-important things you can do to protect your material from plagiarism. Get Adobe Acrobat Professional, you can download a 30-day free trial, which is OK because you’ll only need it for 5 minutes!

Open your lovely new PDF eBook in Acrobat Pro and go File > Document Properties… or Cmd/Ctrl-D. Click on the Security tab. In the Security Method dropdown menu choose Password Security. Click on the first radio button – “Encrypt all document contents”. Do not check the “Require a password to open the document” check box. But check the “Restrict editing and printing of the document”. Then enter a password and let your readers be able to print the document but not edit it by choosing the relevant options in the two dropdown menus:

Printing allowed: choose high resolution or low resolution, it’s up to you. Changes allowed: none. Do not check “Enable copying of text, images and other content” but check “Enable text access for screen reader devices for the visually impaired”. Click OK, save and you’re done.

Now your readers will be able to read it and print it. But people will find it difficult to copy your work. Try selecting text in Acrobat Reader and copying it once you’ve done this. You can’t. Haha!

Conclusion

As ever, I’m really keen to hear any of your feedback both on my eBook and my method and advice on creating one.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

If you ever need to create a simple but effective illustration or icon and are bored of the effect you are getting with just an outline, it may be an idea to use custom brushes in Illustrator to give your lines a bit of character.

Here is a simple trace of a motorbike that was transformed with the aid of a couple of new brushes I’d created in Illustrator. The whole process takes a few seconds.

How to make a custom Illustrator brush

Let’s start with an easy one. Make a long, thin ellipse by dragging the Ellipse Tool (L) on the artboard, making sure it’s filled black and has no stroke for simplicity’s sake.

Now copy it (cmd-ctrl-C) and choose New Brush… from the Brushes palette dropdown menu. Make it an Art Brush.

Make sure the arrow points along the ellipse and not at a right angle to it.

Click OK. Your new brush will appear in your Brushes palette.

Now we’re going to make another brush with a slightly different shape. Go back to the original ellipse, select the two middle anchor points using the Direct Selection Tool (A) and drag them horizontally holding down the shift key. This will give you an ellipse with a blunt end.

Now copy and follow the same process as above to create a new custom brush. Now your Brushes palette should have two brushes in it looking more or less like this:

Tracing an image in Illustrator

The process of getting a basic outline shape of your image starts off with a Google image search. Here is a basic bit of royalty free clip art I have found but it could have been any old image of a motorbike.

Once you have an image you want to trace or base your illustration on, go File > Place in Illustrator to put it on your artboard. A little trick I like to do is, in the Layers palette, lock the layer that the image is on and then create a new layer to do your tracing on – this helps to keep your tracing paths free from the image box.

I traced over this quickly using the Pen Tool (P) and the Ellipse Tool again for the wheels.

Applying the custom brushes to paths

Now get rid of the image you were tracing which will leave you with just the paths – give them a stroke so you can see them.

Now the fun begins! Select with the Selection Tool (V) one of the paths and click which ever custom brush you would like. So here, for example, I have applied the flat elliptical brush onto the top path. As you can see, you may need to play around with the stroke widths, etc., to get it to look right.

I applied this flat elliptical brush on the wheels as well but on the other path I applied the other brush with the blunt end to create an exhaust!

The shape can be imported into Photoshop to give it some extra effects to make a simple and attractive shape that can be used as an illustration or an icon.

So, I hope you found this tutorial helpful. Do you use Illustrator? Do you use custom brushes? Do you have any other tips to create illustrations like this one?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I haven’t written as many posts as I would have liked on this blog in the last couple of months. The reason? I have been creating an e-book which will be used as an incentive for join my mailing list. It’s ready now!

Why did I do this?

Many reasons … I wanted to do something a bit different; to showcase my own design of an interactive PDF; to get some extra exposure. But mostly, I want to take my site to the next level.

The subject matter of the e-book is something I’m passionate about – setting up and getting noticed with a self-hosted WordPress site; SEO, social media and blogging.

Five years ago I was waking up every morning wearily to do uncreative artwork in other people’s companies. After five years of blogging, I run my own company where I am habitually involved in incredibly creative and interesting work for the most amazing and wide-ranging group of clients.

The change I have seen in my own life is testimony to the power of blogging with a self hosted WordPress site. But creating a blog is one thing; developing a website which attracts regular traffic and returning visitors is quite another, and I have outlined every step I took to achieve this in the 35-page PDF.

I will write more about creating an interactive PDF and using it as an incentive for a mailing list in the blog. I created the PDF in InDesign and I used Vertical Response to sort out the list and the sign up form.

OK, so how do you get a copy?

Please follow this link below to my main sign up page where you will only have to fill in your email address (and, if you like, your first and last name).Then you will receive an email with a subscription link. After that you will receive another email which welcomes you to the list and has the link to the PDF.

I would be grateful for comments and I hope its helpful to some of you.

So, here’s the link:

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

When writing a WordPress post it is extremely important to make it as visually appealing as possible. Visitors are much more likely to spend a bit of time on the page if it has a nice image and the text is laid out in a pleasing way.

Images are important in terms of SEO. If they are uploaded with correct and keyword-rich names and alt texts they can pull in a valuable amount of targetted traffic from image searches.

Adding an image with text above and below

Click the first icon top left after the words “Upload/Insert”, if you hover over the tooltip will be “Add an Image”. In the resulting dialog box you can click “Select Files” to get the image from your computer. (I would choose the Browser uploader rather than the Flash uploader). Once the image is uploaded you will see another dialog box with the image’s thumbnail displayed.

It will usually be a large image (of, say, 400 pixels or more wide) that you will want to put on it’s own after a paragraph of text. Make sure you have hit Return (once in Visual mode; twice in HTML mode) before clicking the Add an Image icon. And, after uploading, in the Adding Image dialog box, under Alignment, click “Center” (alternatively you can select the image and click the centered text button after inserting).

Adding an image with text flowing around

If you have a smaller image of, maybe, 200 pixels width, you may want to insert it into a paragraph with the text flowing around it. If so, make sure your cursor is blinking next to the word at the beginning of the paragraph you want the image to go in when you click the add image icon. And whilst in the Add an Image dialog box click, under Alignment click “Left” or “Right”.

Your image should always have a descriptive file name with no spaces and a .jpg, .gif or .png at the end. For the image here, left, I would use the file name “brown-bear-in-woods.jpg”. Upper and lower case letters are irrelevant here so it is best stick to lowercase and use hyphens to separate the words. Spaces will be converted to hyphens after uploading via WordPress. And, hyphens are better than underscores.

Alt text

Always try to write an Alternate text for the image. This is how you would describe the image to a blind person. So, in our example the Alternate text would be “European Brown Bear walking through the forests of Finland”. Remember, this is crawled by the search engines so put keywords in where appropriate! The Alternate text is in the Adding Image dialog box which appears after an image is uploaded.

Image size

One last thing to consider when uploading images is their size. If you want the image to be the same size as it is on your computer click Full Size under Size. If you want the image to be a different size you can choose Thumbnail, Medium or Large. You can change these sizes in Settings > Media.

Finally…

If you want to write a caption you may.

Lastly, click “Insert into Post”. If you’ve made a mistake you can always click the image in the Visual editor and click on the “mountain” icon, then click “Advanced Settings” and here you can change some of the above variables. Otherwise, delete the image and start again.

Image is not displaying to the left or right correctly or the caption does not appear close enough to image

Put this code in your theme’s CSS:

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

It says in the WordPress Codex that “Each theme should have these or similar styles in its style.css file to be able to display images and captions properly”. But I can tell you many themes don’t has this code in there. Probably because theme designers like to style images and captions themselves and don’t realise that WordPress can do it for you.

This concludes my post on inserting images to a WordPress post. If anybody has anything to add or thinks I have missed anything please comment away!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Go cmd/cntl-N or File > New… to create a new Photoshop document of the size of your button. This one has a width of 175 pixels and a height of 35 but it can be any size. (You knew that, didn’t you?). The Resolution should be 72 pixels per inch and Color Mode RGB for websites, of course, and I have the Background Contents to be White as the button is going on an area of a website that has a white background.

Draw a rounded rectangle with, you guessed it, the Rounded Rectangle Tool (U) make the radius 3 pixels in the Options bar at the top.

Make sure the rounded rectangle snaps to the edges and fits exactly the size of the image. It doesn’t matter what color. Here’s a gray one zoomed in to 200%.

Now there are two Layer Styles you want to give the rounded rectangle – Gradient Overlay and Stroke. So with the rounded rectangle selected in the Layers palette go to the “fx” icon at the bottom and choose Gradient Overlay.

On the first panel you should make sure that the angle of the gradient is either 90º or -90º so the gradient either goes straight up or straight down. (Otherwise keep the default values of Normal Blend Mode, 100% Opacity, Linear Style and 100% Scale). To choose the actual colors of the gradient you need to click on the gradient to get the Gradient Editor to pop-up.

Here the trick is to choose two colors that are of the same tone but very close together so that you can only just tell them apart. To choose the colors click of one of the colored squares (stops) with triangles on top of them underneath the gradient (the default is black and white). Once the stop is clicked on, click on the color where it says “Color:” and that will give you a Select stop color box. Here I have also copied the darker of the two colors in the Gradient Editor by option dragging the stop. This ensures that more of the gradient is a solid color and the color change occurs more quickly at one end (in this case at the top).
And the second Layer Style is Stroke. Here you want to choose a color that is darker than the darker of your two colors but only just (with the same degree of separation as the difference between the two colors in the gradient. The size should be 1 pixel and the Position should be Inside. The other values should be the default ones.

Now your button should look like this:

… a little too flat! Now we’ve got to get a bit creative with our penultimate pixels!

The web designer’s secret penultimate pixels!

In order to give the illusion of a flat but 3D button there needs to be a slight highlight near the top and a slight shadow near the bottom – so slight, in fact, it’ll be the height of one pixel; so near the top and bottom, in fact, it will be offset by one pixel. In order to do this, it is necessary to create a new layer and select the Single Row Marquee Tool.

You will need to zoom in to your button by going Cmd/Ctrl-+ a few times. And then position your single row of pixels with the marquee on the second row of pixels just below the top. You can do this easily by just dragging the Single Row Marquee Tool to the top of the image and then moving it down one pixel by hitting the down cursor key once. Now fill this white – (get the Default Background and Foreground Colors by hitting “D” and filling with the Foreground Color (white) by going alt/opt-delete). This will leave you with this:

The do the same again but for the black line. First create a new layer (very important that the white and black lines are on different layers for reasons you will see in a moment), then put a row of black pixels on the second to bottom row of pixels using the same method. And you will be left with something like this:

There’s one more important thing to be done with these pixels. As the corners of this button are slightly rounded we need to shave a couple of pixels off the ends of the black and white lines. You can do this with the Rectangular Marquee Tool (M) and using the cursor keys for positioning. Remember the marquee will move one pixel to the left, right or up or down every time you hit one of the cursor keys. If nothing happens when you hit delete be sure you are on the correct layer!

When you’re finished you will be left with something like this, with two pixels deleted off both ends off the black and white lines:

The last thing that remains to be done (as you can see above) is just to make the white penultimate pixels line less prominent. Do this by changing the white line’s layer opacity to 30% (hit “3″ with the layer selected).
And now you should by left with this:

Other web button tutorials

This is a very flat button. I have written lots of tutorials about more bulging, shiny, jelly buttons. Here is one for a cool, shiny, web2.0 button. (If anyone get excited by my use of the expression “web2.0″ to describe the look of a button, please be advised that it wasn’t me who coined that first as a design term!!!)

And, here’s another tutorial about how to create cool shiny buttons in Illustrator alone.

That’s all for now and please accept a big apology, especially to my regular readers, for the month’s gap in between my last two posts. I will shortly be writing and backlogging a number of great posts about design and marketing so this won’t happen again. Goodbye, everybody!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

If you have any sort of professional website I would advise you to include a testimonial page to promote your business. I think it’s always good to see if someone has been recommended and interesting to see by whom. It’s something that could separate you from the competition. Have a look at my client testimonials and let me know what you think! Here are a few things I picked up whilst doing it.

Choose the clients or customers

Gather a list of clients you have repeat business with. A successful business needs repeat customers so their opinions are the most useful – and they’re more likely to write a shining testimonial! Remember that some companies have a non-endorsement corporate policy. Of course we have to respect that.

Send the email

Word your email very carefully. It’s more usual for your clients to ask you for favors not the other way round. Here is a copy of the email I sent:

I am compiling a client testimonials page on my website so I’m sending this email to a few of my clients.

Client testimonials are only worth doing if they are believable and done well. I would therefore like to ask you for the following information and your permission to publish it on my site. If there is anything or all of the following that you would not like me to put on my site I will, of course, completely understand.

What I would like from you:
Your name
Your company’s name (or companies’ names!)
Your job title
Your photo – Again, as with everything else, I will completely understand if you would not be happy with this. The reason I ask is that I think a photo will add to the believability element. I will make them really, really small.
Your company’s website (or websites)
Your testimonial about me – if you’re too busy or don’t want to write one I can get something from an email you’ve sent me and get back to you so you can approve the use of the quote

What you will get in return:
A warm fuzzy feeling of having done someone a good turn
A link to your website

I can’t stress enough that I don’t want you to be compelled to do anything. I would completely understand if you didn’t want to take part.

If you decide to reply I will seek your final approval either immediately before or immediately after I publish the testimonial page.

What to ask for

Notice I asked for some extra information besides just the testimonial. There were many reasons for this. I asked my clients for their company name, link and job description as these will be of primary importance to the client. Some clients may not want the link back to their website due to their endorsement policy. Some clients, on the other hand, may be glad of the link and may want to specify keywords to be put in the name of their company.

Another reason to ask for all this extra information is realism. The more details you add to the testimonial the more “real” it looks. We’ve all seen cheap looking testimonials on e-commerce sites where AJ from New York says “fab product”! I think the testimonial is more believable with the client’s full name, job description, company, link and photo.

What you write

Some people may advise to keep the testimonials short and snappy. I elected to publish them almost verbatim. The reason for this again was the realism it evoked. Some clients had written about me in the 2nd person, some in the 3rd person. I resisted the temptation to make them consistent. And, afterall, these guys had taken time to do me a favor. The least I could do was to quote them properly!

But I also added another section that wasn’t received from the client. The description of the work I’d done was written by me as it is a great excuse to promote my skills. Although I was honest about the work I had done for these clients, I made sure it included as much variety as possible to show the world what I can do: website design, website development, hosting and maintenance; interactive PDFs; print advertising design; HTML emails; brochures, newsletters, flyers… here I go again!

What I learned

There’s another reason for doing this apart from crude self-publicity. It’s always important to listen to your clients. And even more important to listen to what your biggest clients think. I learnt a lot from this experience. Have a look at my testimonial from one of my clients Benoît Quémar, Vice President of Alenea:

Many graphic or web designers, unfortunately, only have a talent for pure design in a “visual” way but fail to understand the purpose of their work or are not really interested in the business behind the project. As a result, they require a lot of management before being able to deliver something that’s usable – at best. Whereas Rob has shown a true interest in everything we’ve done and his suggestions have always proven that he understood the “why” of everything, coming up with effective and creative designs and ideas on his own, saving us a lot of valuable time.

This, apart from being a great testimonial, also taught me a great deal about what this client, and maybe others, value. So doing a testimonial page can bring you pure gold in terms of useful information!

What do you think?

Have you got a testimonial page on your website? Or do you have testimonials spread out through your website? Can you add any tips to mine? What do you think of my testimonials?

And finally

Again, a big “Thank You” to all my clients for taking part.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The site that seems to embody this transformation – at the moment! – is Twitter. Although Twitter’s growth seems to have leveled off in 2009 after recording a massive 752% growth in 2008, there no signs of it’s influence waning as this century nears its troublesome teenage years. Savvy businesses see money in Twitter: I recently tweeted that I’d had a bad experience with BT and, within a few hours, I got a tweet from them asking me what the problem was.

So if we have to engage with this social media how do we do it productively and without turning into some sort of anti-social geekia dullard? Here are a few pointers on how to organize your web-life amongst the blogs, wikis and social sites, create a consistent online image and sync up all the various parts of your online world.

Create your Avatar

And, no, I don’t mean head over to Pandora and consort with the Na’vi, I mean use a consistent image when you comment on blogs or on your profile page of various other sites. Head over to Gravatar (created by those awfully nice Automattic people that gave us WordPress) and upload a square (150 by 150 pixels should do it) image which will appear by your name when you comment on a blog. Keep this square JPG, GIF or PNG handy on your hard drive and use it every time you register for a forum or social networking or bookmarking site. That way you have a consistent visual sign that people will come to recognize and trust!

Connect your social bookmarking sites to tweet your faves

If you don’t use social bookmarking sites then you should. Sites like Digg, Reddit, StumbleUpon, Delicious, etc., are excellent ways of rank and store useful articles and to promote yourself. As with your tweets, don’t use these services to shamelessly promote only your blog posts. Use them to store articles that you find interesting and then you will earn a reputation for distributing interesting material in your niche and your blog posts will benefit.

The best thing about these sites is that you can link them up to your Twitter ID and therefore promote your post on both the social bookmarking site and Twitter at the same time. Digg and Delicious are especially good for this.

Tweet your latest blog posts and blog your latest tweets

(Bit of a no-brainer, obviously) Some people claim that blogging’s light has been faded by the more advanced social tools. However, I think macro-blogging (sorry!) can only grow from the surge of interest in Twitter’s micro-blogging service. So, to automatically tweet your latest posts use WP to Twitter. And use Twitter for WordPress to display your latest tweets on your blog.

Publish videos and photos and tweet them

With their value going from zero to over a billion dollars in under 2 years, YouTube were the understated social media success story of the last decade. Together with the more stylish Vimeo and Metacafe (which is easily synced with Facebook), video sites are a great way of promoting your brand. For photos, apart from TwitPic there’s the more popular Flickr. Once you have joined these sites remember to favorite other videos, channels, photos and photostreams so that yours are more likely to get seen. Embed your logo and/or website into the videos or images. Remember to always put your website address in your profile settings of all of these sites!

Sync up your LinkedIn and Facebook status with your Twitter feed

LinkedIn users can automatically feed their Twitter status updates to their LinkedIn status updates. Use the Twitter exporter to automatically post your Facebook status updates to Twitter.

URL shorteners

The most successful URL shortener is bit.ly, followed by ow.ly, most likely because they are newer and contain fewer characters. The least retweeted URL shorteners are the older and longer Tiny URL and TwitPic. I think Bitly is great because not only does it shorten URL and posts to Twitter it also provides great stats on the links.

Conclusion

With so many social media sites out there, all wanting your info and time, it’s easy to become overwhelmed and disheartened. As a general rule of thumb, lurk on these sites to see what they’ve got on the subjects that interest you. And then, once signed up (and linked to your main website), make sure you add articles, photos and videos of genuine interest from third parties as well as your own material.

What about you? Do you have any social media top tips that you’d like to share?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

In a previous post about Tim Ferriss‘s best-seller the 4 Hour WorkWeek, I ranted on about Tim’s fantastic opinions on the 80/20 rule, Parkinson’s law and elimination of unnecessary actions.

I have now finished the book and continued with my entrepreneur self help guide binge with The E-Myth Revisited by Michael E. Gerber. The book has a tag line of: Why most small businesses don’t work and what to do about it.

So what have I learnt from these micro-celebrities from the small business self help genre? Is there anything here that can improve my design and marketing business in these trying times?

Both books concentrate quite heavily on removing yourself from your business. The logic behind this is that if you can get others to do your work you are free to do something else or take on more work and therefore expand the business. I have tried to get other people to do what I do with mixed results.

Automation and the 4-Hour Workweek

Tim Ferriss promotes the use of virtual assistants from the third world to do administrative or clerical tasks. And even marketing, website development, technical services or buying your wife an anniversary gift. To be honest the prospect of this strikes fear into my heart. And I don’t think my wife would be too happy either!

I have heard horror stories of the language barrier causing tasks to take 2, 3, 4, 5 times longer than they would normally with Indian web development companies. I’ve made connections with many of these companies but I’ve yet to take the plunge.

And is it really as easy for a designer or a marketer to instruct a virtual assistant on how to deal with their clients as a lot of the work is based on relationships and built on inspiration?

Practice makes perfect. So I shall try to outsource more and more this year.

The E-Myth and small business development

Michael E Gerber, on the other hand, paints a great picture of why this automation is so necessary. He describes the personality of a small business owner as being split three ways – into the Entrepreneur, the Technician and the Manager. This was so familiar to me it was kind of scary.

• The Entrepreneur is the visionary in us. The dreamer. He thinks up the idea that got us here in the first place and his imagination needs to be nurtured in order to come up with more fantastic opportunities to move us along.
• The Manager is, of course, the pragmatist who is there to plan, to order and to predict.
• And last but not least there’s the Technician. The Technician is how we all started out. The Doer. The “if-you-want-something-doing-properly-you-have-to-do-it-yourself” guy. He’s the one with his head down doing the work. At least that’s what he thinks.

All businesses need a mixture of these three personalities. But in reality we are more like Technicians trying to get on with it whilst being bugged by another “great new idea” from the Entrepreneur and compartmentalized by the Manager who’s trying to establish order.

With these three inside my head all the time it’s a wonder I get any sleep!

But this is the reason, according to Michael E. Gerber, most business fail – because the Technician’s in charge. So automation and outsourcing is vitally important to your business as it frees up the dreamer in you to work on your business rather than in it.

So where do we go from here?

Well, my business has changed beyond all recognition from a few years ago when I started out. Back then I promoted myself as a freelance print designer whereas demand from this site pushed me to offer complete design and web marketing packages.

If I cut down on the time spent on the individual jobs by outsourcing and automation I can view my business more as a product and start tweaking it to make it better and better.

Maybe these books are teaching me to spend less time reading tweets and blog posts about the minutiae of the design business (as rewarding as they are) and more time on the larger picture and the future.

I shall be returning to these points later.

So what about you?

Have you read either of these small business Bibles? Have they or any of the issues discussed here caused you to act differently in your business? Let me know in the comments section of this post. And don’t forget to tweet or link to this post if you enjoyed it.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

It is not the case that a logo will cost an extra 50$ and is just a matter of spelling out the company name in an attractive typeface. I did the logo above for a client who wanted a simple, modern and dependable characteristics displayed through the logo for his communications company.

So, instead of writing about what makes a good logo I’m going to give a few tips on how to use Adobe Illustrator to put together a logo.

Why should you create a logo with vector graphics?

Vectors consist of points, lines, and curves which, when combined, can form complex objects. Whereas bitmap or raster graphics (eg. JPGs) are composed of pixels that contain specific color information. When enlarged, bitmaps pixelate. Whereas vectors will scale up or down without loss of quality or sharpness. So the same vector logo file looks as great on a business card as on a billboard­.

So, with logos, it’s vector, vector, vector all the way.

Using Adobe Illustrator to Snap to Point

You can use many different packages to handle and create vectors. My choice of software for doing this is Adobe Illustrator. Whether you have sketched the logo by hand on paper first or whether you are creating the logo from scratch in Illustrator, it’s important to make sure you have Illustrator’s Snap to Point feature running. Snap to Point allows you, when dragging objects, to align an anchor point exactly with another anchor points (anchor points are the beginnings and ends of paths or lines).

So the first thing you must do in Illustrator is to go into Preferences… and choose Selection & Anchor Display and make sure that Snap to Point is checked with a value like 2 px set.

The screenshot on the left above shows the plus sign being dragged by one of the anchor points. The cursor (as we are using the Selection Tool (V) to move the object), is a black arrowhead with a white outline. When the arrowhead is precisely on top of another anchor point while dragging it will turn white with a black outline. At this moment, you know if you let go of the object it will land exactly where you want it to be.

So grabbing objects by anchor points and using Snap to Point to place them in precisely defined positioned is crucial to creating logos in Illustrator.

Viewing and Hiding the Bounding Box in Adobe Illustrator

One of the problems you can face whilst moving objects by a corner anchor point is inadvertently re-sizing the object!

In the image above you can see an object without (left) and with (right) a Bounding Box. The Bounding Box is an extra line around an object with eight white handles which can be using for scaling. It’s very handy sometimes but other times it just gets in the way. To get rid of the Bounding Box, simply go View > Hide Bounding Box or Cmd/Ctrl-Shift-B.

Converting text to outlines in Adobe Illustrator

While doing logos it’s fairly usual that you type out the company’s name in a typeface close to how you want it to look (in this case Dax) and then edit the letters separately. To do this, with the type selected by the Selection Tool (V), go Type > Create Outlines or Cmd/Ctrl-Shift-O. Follow this up with a Cmd/Ctrl-Shift-G or Object > Ungroup to ungroup the letters.

Lining up objects in Adobe Illustrator

Fairly often, when designing logos, you will want to get certain letters to line up. I do this by using the Control Palette which is usually beneath the main menu. When two or more objects or groups of objects are selected by the Selection Tool (V) the Space and Align icons appear.

The use and look of these icons are exactly the same in Photoshop and very intuitive. I use them all the time.

What do you think?

Do you use Illustrator to design or to create logos? What methods do you find yourself using again and again?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I’m a bit late this year but I’ll be artworking it up this weekend and then writing them over the week to make sure they get there at least a week before Christmas.

Calendars are quite tricky things to do – not all months have the same number of days, not all months start on the same day and, while most months require 5 rows of weeks (Monday to Sunday) to complete, some months refuse to play the game and require 6 rows of weeks. Even worse, February 2010, requires only 4 rows of weeks as it starts on a Monday!

(OK, I can see this may not be the most fascinating subject for a blog post but graphic designers find this sort of thing really interesting!)

A calendar you can use for any year!

I have found that putting the relevant date into the appropriate place in the calendar a tad annoying. There’s 365 of them to do so, who wouldn’t? So I have hit on a great solution to help my fellow graphic designers to successfully set up a calendar for all the years to come … linked textboxes!

So, as you can see above, the dates are all linked. So if you want January to start on a Saturday (which it will in 2011) instead of Friday, you type 27 and hit enter in the box before where 28 is now. Enter moves the text to the next linked text box so that all the dates will shift over one day. It’s an awful lot better that moving them over one by one!

Download the PDF and Adobe Illustrator (AI) file for the 2010 Calendar

Please click on one of the icons below to download the calendar.

The AI was produced in CS3 and the document color mode is RGB. You will need the Trebuchet MS font loaded. I tried to save it in a legacy format but the linked text boxes would not work.

Please let me know if this has been useful for you. And if anyone wants a Christmas card contact me with your address and I’ll send you one through the post! Happy Christmas!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I worked for quite a while on the design stages with the client. We went through 14 visuals for the home page before I started to work on coding the WordPress theme. Here is one of the last of them:

jQuery and the power of blogging

One of the most exciting parts of the website for me was creating an image slider with jQuery. The client was particularly keen on having clickable sliding panels like the ones that can be seen at BarackObama.com. So how was I going to find out how to do that?

The answer was already on my own website in the shape of a comment by Jaitra Gillespie on a post about JavaScript I’d written a while ago. In it he posted a link to a jQuery coda slider that had a particularly good accompanying tutorial and screencast. This is what I used for the panels beneath the top navigation.

If you click the above image to go to the website you’ll see that not only do the buttons beneath the panels operate them but also the links in the text below.

I’m grateful to both Remy Sharp for the excellent tutorial and Jaitra Gillespie for putting me on to it.

Designing and developing the website with WordPress

After I did the theme and the image slider there were still other things to do.

I used NextGEN gallery for the image gallery. There was a slight conflict between the JavaScript calls in the head for the jQuery coda slider and the NextGEN plugin which caused the Shutter and Thickbox image presentation effect not to work. I moved the (and therefore the NextGEN JavaScript calls) to after the jQuery JavaScript calls in the head and this seemed to get it to work.

I created different categories in the blog section, one being “Latest News”, and had the 10 most recent posts of that category listed in the sidebar. I also added a contact form with Contact Form 7 plugin, a chat room, various static pages and a site-wide social bookmarking and networking link.

What do you think?

Have you ever used WordPress as a CMS to create a site? Have you ever used jQuery to create a coda slider? What do you think of the way I did it?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The book I am reading at the moment is The 4 Hour Workweek by Timothy Ferriss. I had heard about it from Matt Mullenweg, the founding developer of WordPress the popular blogging software that powers this site.

I’m only halfway through the book but already I’ve been introduced to some interesting principles and have acted upon them.

Pakinson’s Law

C. Northcote Parkinson was a writer who arrived with this perceptive dictum from his experience in the British Civil Service.

Work expands so as to fill the time available for its completion.

This is something that I used to observe while working for design consultancies and advertising agencies in London. People, when given a day to do something, will spend the day doing it even though the task could be completed adequately in a few minutes.

I have often wondered why billions of people trudge into an office every day arriving at 9am and leaving at 5.30pm. Is 7.5 hours the time they need to do their jobs? Not an hour more or less any particular day?

So, yes, people spend countless hours and days indulged in essentially useless activity. I knew that. So tell me something I don’t know, Tim!

The Pareto principle – also known as the 80-20 rule

This principle is something I’d heard of before but maybe hadn’t realised it’s significance, here it is:

For many events, roughly 80% of the effects come from 20% of the causes

Here are a few examples:

• In 1992 United Nations Development Program Report showed that the richest 20% of the world’s population controlled 82.7% of the world’s income.
• Microsoft noted that by fixing the top 20% of the most reported bugs, 80% percent of the errors and crashes would be eliminated.
• In business, 80% of your sales come from 20% of your clients.

Is this true for me, I wonder? Certainly, 20% of my clients account for over 50% of my income, but I’m not sure it’s as much as 80%. However, thinking about it, I would say that about 20% of my working day is spent generating 80% of my income as I spend a lot of time doing other things, some of them I would consider important (writing blog posts), some of them not so important (reading the news, Wikipedia, Twittering). This brings me on to another of Timothy Ferriss’s bugbears.

Interrupt interruptions

So, it follows that one should cut down as much of this 80% unproductive time as much as possible to free yourself up to do other things you may find more enjoyable. There are a number of ways to do this.

Ferriss suggests turning off the audible alert for when you receive email (or “brain farts” as he likes to call them, I love that!). I have done this and this has definitely worked for me. I’ve hardly ever received an email that was so urgent that I had to stop everything and concentrate on it. The author actually recommends cutting down emailing to two times daily: the first mid-morning (not first thing, after you’ve completed your important first task of the day); and the second at 4pm before your close of business. I haven’t quite done this but I have grouped my emailing together more.

The author suggests further methods to cut down interruption: don’t answer your mobile if you don’t recognise the number; don’t watch or listen to the news; don’t surf the web; don’t do meetings. I agree with him that meetings are usually a useless activity but then I hardly ever have them myself and as for the other things – I’m trying to cut down my non-productive web surfing but I still always answer my mobile as it could be a great new client!

Looking to the future

Now that you have stopped interruptions and are working more productively you can find time for what Tim Ferriss calls a “muse project” which could be reselling a product on the internet or creating one yourself and selling that.

I have created many e-commerce sites for clients and have been involved in the marketing of products for many years so this is something I have wanted to do for a long time. I haven’t thought of a product yet but I’ve got a few ideas!

What is your experience?

Have you ever read this book and what is your opinion of it? What do you think of interrupting interruptions and working more productively? Will this book make a lot of people rich and happy as a result of it’s advice and procedures? Or will the only person making money as a result of this book be the author?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

They are not meant to be golden rules but after years and years of doing them I find they come in handy!

Click the image below to download the PDF.

Six “rules” for making an on-screen PDF

Here they are:

• Do it in RGB not CMYK This may not be an issue when exporting the PDF from Word or Powerpoint but very much is if exporting the PDF from Illustrator, Photoshop or InDesign. In InDesign go Edit > Transparency Blend Space > RGB.
• Use A4 (297mm by 210mm) or Letter (279.4 mm by 215.9 mm) size so it will print out on desktop printers This just makes it easier for people using your PDF to print it out.
• Do not put anything within 10mm of the edge of the page as it may not be printed out by a desktop printer Most printers will not print right to the edge of the paper. This is a shame if you have a background image or graphic covering the whole page and is worth noting when considering a background.
• Make the format landscape not portrait so that the PDF fills the screen Seems obvious, but …
• Use vectors (AIs, EPSs) for graphics and logos not JPGs or other bitmaps This is a big, big issue for me. I am often very surprised to see PDFs from large corporations who have graphics (in some cases their own logos) in a jagged, pixellated bitmap form when the vector will appear beautiful and sharp in a PDF. It is possible to export PDFs with vectors from the Adobe products (Illustrator, Photoshop or InDesign) but, sadly, impossible when exporting from Word or Powerpoint. Mac users, good news! Apple’s Pages application, which is free with all Mac’s, will create PDFs with vectors! If you don’t know the difference between vectors and bitmaps download the PDF and you will see what I mean.
• Enable interactive elements and hyperlinks so that users can click on websites and email addresses One of the great benefits of PDFs are their interactivity. It is important to check when exporting, especially from InDesign, that Interactive Elements and Hyperlink are checked so that buttons, web addresses and email addresses are clickable.

Interactive PDFs and rich media PDFs

I have written more about interactive PDFs and how to make them on this site. Also there are many more exciting things that can be done with the humble PDF. Buttons, rollovers and showing and hiding layers on a page are all possible in PDFs. Video and audio can also be added (either embedded or streamed from the internet). It is an area of great potential.

What are your experiences?

Do you make on-screen PDFs for widespread circulation? What are they for? How do you make them and what sort of extra functionality do they have? Do you have any more “rules” to add to mine?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The plugin was created by Alex Rabe who studied all photo and picture plugins for WordPress, he thought that some of them were really good and well designed, but missed a simple and easy administration back end to handle multiple photos, galleries and albums.

Here is a sample gallery I’ve done quickly using the NextGEN Gallery plugin.

Here’s how you do it:

Download the plugin and, after un-zipping and uploading to my wp-content/plugins folder on my server, I activated the plugin in the WordPress CMS. For more explanation about WordPress and loading plugins consult the excellent WordPress documentation.

php.ini

I found that I had to edit my php.ini in order to get the plugin to work properly. php.ini is a text file that sits on your server (in this case on the root) that sets global variables such as memory usage. I have found that allocating more memory to PHP on the server useful to get WordPress working at reasonable speeds. That is why I have memory_limit = 64M in my php.ini. Here are the other commands I put in my php.ini to get this plugin to work.

file_uploads = On
upload_max_filesize = 20M
post_max_size = 25M
max_execution_time = 600
max_input_time = 600
safe_mode = 0

Setting up a gallery

On the left hand side of your WordPress navigation right at the bottom you will now see a section called “Gallery”, click on the triangle next to that and from the options that slide down click “Add Gallery / Images” and give a name to your gallery. Now, to upload images, click the last tab on this page entitled “Upload Images”, click “Browse” and locate the image on your computer. Very important: make sure flash based upload is not enabled! I found the plugin would not work properly otherwise. Choose the gallery you have just created and click the “Upload Images” button. I also used the “Upload Zip” method and I was really impressed with how it worked. You can upload potentially hundreds of images in one go and the plug-in will do the rest! Awesome!

Managing the gallery

At the bottom of the left hand WordPress navigation again, click “Manage Gallery” underneath “Gallery”, choose the gallery you have just created and here you can alter the title and alt tags for the images. This is not only very important for SEO purposes but also sets the text when the thumbnails are hovered over and captions when the bigger images are displayed. Once done, click “Save Changes”.

Adding gallery to a WordPress post or page

Easy! Simply add [nggallery id=1] while editing the post or page. The gallery id number can be seen on the Gallery Overview page. The first one you do will be number 1.

Options

I left the plugin options roughly as default but there are a few important things to consider. On the first page of the options I would leave “wp-content/gallery/” as the default path for all galleries. I would uncheck “Activate PicLens/CoolIris support” as not many people have PicLens or CoolIris installed and it creates an unsightly link above your gallery.

You can set the size of the images and the thumbnails here as well as setting a watermark onto the images.

The “Effects” option is very important. It sets the effect that displays the image when the thumbnail is clicked. Shutter and Thickbox will work if selected as these are installed with the plugin however you can use your own. I used “ShadowBox” which is similar to Lightbox and is nicer than the two that are bundled with it.

My photos

Check out the gallery I made with this amazing plugin.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

All graphic designers and people trying to create eye-catching imagery for print or web with have at some point used stock photography.

Stock photography negates the need for hiring expensive photographers can license individual photos for specific uses. The two largest traditional stock photography agencies are Getty Images and Corbis. They offer mostly photographs that have been shot by professional photographers. But these are still quite expensive for a freelance graphic designer as individual images can cost hundreds of dollars.

Meanwhile there are many alternative agencies like Shutterstock, Fotolia and, the one all my clients seem to know iStockphoto (acquired by Getty Images in 2006 although both businesses are kept visually separate). Since these agencies charge less ($1 to $20 per image) this is called sometimes called microstock photography.

However, hardworking graphic designers may need photographs as place holders or for different options to show a client before they have decided on a finished version. Who would want to spend money on something that may never see the light of day? This is where free stock photography comes in!

Here is my personal list of free stock photography sites.

• stock.xchng The best and most reliable for me. Some of the free images are large enough to use for print. Some are of excellent quality. Log in necessary.
• morgueFile I haven’t use them for long but I have found some impressive and large images here. No login necessary.
• FreeFoto Not fantastic. Email address required.
• FreeDigitalPhotos OK. Small web images only. No login necessary.
• ImageAfter I’ve just started using them but they seem good. You can choose the number of thumbnails viewable on page. Some nice large images. No login necessary
• indisain.com Annoying website in terms of usability but good quality large images.
• PhotoBucket Good, large selection. Small web images only. No login necessary.

Other sources of free imagery on the internet

Of course you can find images in the internet using Google image search, deviantArt, Flickr or Picasa but these images may be subject to copyright so please check with the owner first.

Also you can turn a photo into an illustration using Illustrator’s Live Trace function, Photoshop filters or by whatever other means. But, again, it will be always necessary to check the images’ copyright first!

I hope you found my list of free photo sources helpful. What do you do when searching for free quality stock photography?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I’ve done many articles about Photoshop in this blog. And many of them concern photo montage where a composite photograph is created by joining two or more other photographs.

However, this article has come from something I’ve seen in studying my Google Analytics. An awful lot of people arrive at my site having typed the keywords “how to put one image on another image” or something like that. So I thought I would try to explain the basics of photo montaging in Photoshop.

The basics

In Photoshop, make a selection (see how later on) of one part of one image. Copy it (Cmd/Ctrl-C). Open another image. And paste it (Cmd/Ctrl-V). And now you will find the pasted element as an extra layer in the Layers palette (Window > Layers F7). Use Free Transform (Cmd/Ctrl-T) to size, rotate and move it to where you would like it to go.

Making selections and cutting out

There are many different ways of selecting certain areas of an image in Photoshop. Different techniques will suit different images. For example, with Obama on the left, his head was shot against a very uniformly brown background. Because of this I was able to very easily select that color (with the Magic Wand Tool (W)), inverse the selection (Cmd/Ctrl-Shift-I) and copy.

However, in the case of these selections, I’d feathered them first. Feathering applies a blur to the edges of the selection which helps to create the illusion of the pasted element “belonging” to the background image rather than looking definitely cut out with hard edges. In order to feather a selection: with the selection “live” (ie. you can see the “marching ants” as in the Obama head) go Select > Modify > Feather… (Cmd/Ctrl-Opt/Alt-D) and enter the width of the blur in pixels. Mac users: this keystroke hides/reveals the dock, anyone know how to stop this happening?

One of the other more usual methods of cutting out parts of images in Photoshop is with the Path Tool (P).

Putting a part of one image seamlessly onto another

Here is the original image of the babies. Don’t they look nice!

As always with images of people, skin tones and lighting are very important. It’s very rare that you can cut out a head from one image and paste it on to another without any further work. With this image I used Curves (Image > Adjust > Curves… (Cmd/Ctrl-M)) to match the skin tones of the heads to the skin tones of the babies’ bodies.

I have already mentioned feathering as a method of blurring the edges of the cut out. This process can be continued with Layer Masks. Click on the Add Layer Mask icon in the Layers palette (it looks a bit like a washing machine) and use the Brush Tool (B) with a black brush will “erase” areas of that layer. Use a soft brush and play around with opacities.

Who are these guys?

If you’re wondering, from left to right the babies are: Vladimir Putin (Russia), Hu Jintao (China), Gordon Brown (UK) and Barack Obama (USA).

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

You’ve got a beautiful website and blog and you want people to contact you, either by phone or email. What do you do? Everyone has a contact page on their website. OK, maybe not everyone, but you should have one, really. Here are some really important points to think about when you’re doing your contact page.

How to publish your email address online without getting spam

Spammers use software to crawl the internet to look for email addresses to spam to. This is why people have their email addresses as something like me [at] server.com or something like that to try to cloak the email address from the spammer.

But there’s better ways out there. For example there’s HTML clocking which uses HTML number codes for the ASCII characters.

<a href=”m&#97;ilto:&#97;&#98;c&#64;myhost&#46;&#99;om”> contact us</a>

Here is how the above HTML will look like in the browser: contact us

But even better is JavaScript cloaking of the email address and the mailto: tag.

<script type="text/javascript">
<!--
var username = "rob";
var hostname = "robcubbon.com";
var linktext = username + "@" + hostname;
document.write("<a href=" + "mail" + "to:" + username + "@" + hostname + "?subject=Enquiry" + ">" + linktext + "</a>")
//--></script>

When put into the webpage it creates the clickable email address that will give you “Enquiry” in the subject field of the email. Go on, try it, you can send me an email if you want to:

If you are using WordPress you can happily paste this into the body of a page or post as long as you are using the HTML editor.

Warning: I can not guarantee that any of the above methods will not produce spam at all, just substantially less than if you published your email address uncloaked.

Contact form

But it always makes sense to give your visitors a choice and every website should also have a contact form. There are many different ways of doing these. One thing you need if you want one is PHP on your server.

If you are using WordPress I would recommend the Contact Form 7 plugin. If you are using a Linux server you can basically plug in this plugin and play with it.

However, things are slightly more complicated if you are working on a Windows IIS server. In this case I have found you need to use WP Mail SMTP plugin to get it to work.

Should I include my telephone number and address online?

Whether you include your telephone number and address is entirely up to you. I wouldn’t give out my address on my website for security reasons. I include a mobile number on my contact page and it hasn’t resulted in many problems. In the UK, if your phone rings once and hangs up and you’re wondering whether to call back, simply check the number in the WhoCallsMe website or even just Google the number. If it’s a premium rate scam someone will have posted up a warning about it. This has happened to me maybe 5 times in about 4 years.

How to design your contact page

Generally, I would say that you should put the link to your contact page as prominently as possible on all pages – preferably at the end of the top navigation. The contact page itself should be simple and well laid out. Here is my contact page, what do you think about it?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Cloud computing is a term usually used to describe the proliferation of resources and services accessed through the internet. These resources (for example, Google maps; Google docs; Google Analytics; WordPress.com; online Adobe applications; your website host) in fact, any online service that happens “out there” – you don’t care where, as long as it works – is said to happen “in the cloud”.

Cloud commuting is not a term that has the same widespread understanding. For me the term cloud commuting means working from home.

Cloud computing has made cloud commuting possible with the availability of ever cheaper, faster and larger servers. Just think, whether you are reading at home or at work, how much of your digital life exists outside the computer you are using?

• Do you have a Gmail, Yahoo or Hotmail email address?
• Do you have your words and pictures stored in a social networking site?
• Do you use a website (your own or somebody else’s) for work?

My guess is that the answers to these questions are yes. And, if so, this means you are already outsourcing some of your digital life. This also means that you, if you aren’t already, can work at least some of the time at home.

Outsourcing has suffered from a slight misrepresentation as a practice of companies laying off workers in the west replacing them with cheaper services from the east.

Cloud commuting for me means people from all over the world breaking free from the corporate machine and setting up shop in their homes, providing high quality professional services for clients whilst, importantly, employing others to provide services for them. As Amanda O’Donovan says:

The Cloud Commuter is highly skilled, eco-friendly, doesn’t take up valuable office space and won’t be asking for health benefits… Why take the risk of committing to a permanent headcount when you can drink from the talent pool whenever you want to?

Personally, I feel liberated by becoming a cloud commuter. For one thing I don’t miss the mornings struggling onto crowded trains with thousands of other real world commuters. And then at work, I felt that my input was hampered by the structure of the company – you couldn’t do something until it was agreed by someone else. I liked to get things done. I wasn’t big on water cooler discussions, team building exercises and endless meetings.

The benefit of cloud commuting

The environment – it’s a no-brainer: less meaningless car, bus, train journeys. It’s a good thing.

Productivity – the cloud commuter immediately wins up to 2 hours a day by cutting out this pointless journey. And, the cloud commuter can concentrate better on work. Ever tried PHP coding in a busy office? Don’t.

The family – the cloud commuter spends more time with loved ones; less time with “the boss”. The family will usually benefit. OK, I know that there’s a potential pitfall here where the cloud commuter could be 24/7 locked away in the home office, continually stressed as not able to separate work from home life but this hasn’t been my experience.

The community – instead of living the false “double life” of the real world commuter who suffers the daily routine of traveling to the phony community, cloud commuters spends their time in the most important community – the one they live in. This will provide nicer neighborhoods for people to live in rather than neighborhoods for people to sleep in.

The disadvantage of cloud commuting

There’s one, but it’s a big one: security. Moving all your work to the clouds does compromise the information. The extent of this problem depends on the sensitivity of the files that you store in the cloud. Security should be set on a case by case basis but I would urge all cloud commuters to employ all the usual procedures: run regular back ups of everything and keep them away from where you work, have secure email if necessary; run the latest upgrades of all the software you are using, and install and regularly update virus scanning software.

Cloud commuting and graphic design

To me, the business of graphic design and marketing lends itself perfectly to cloud commuting. We are often in the business of selling an idea not a physical product so we don’t actually have to be anywhere when we work. We just need to be near a computer with an internet connection.

Graphic designers work best when they are free to express themselves and unfettered by the corporate restraints of time, money and hierarchy.

Employ a cloud commuter to deliver a message, sell a product or re-design a website and you’ll have a enthusiastic, hard-working and experienced professional working for you – for a price that would compare very well to an agency’s for the same work!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

What is RSS?

RSS stands for Real Simple Syndication and is a format used to publish frequently updated content from the web on the web. The RSS feed is your posts’ content without any of your website’s style so it will contain just the titles, body text and image paths of your posts. So you better make your image paths absolute not relative!

The benefit of RSS is the aggregation of your favorite websites from multiple sources in one place. RSS content can be read using software called an “RSS reader”, “feed reader” or an “aggregator”, which can be on your browser or on your desktop.

How to set up a Feedburner feed

Google has bought FeedBurner, so you need to sign in to Google and then go to Feedburner and look for where it says something like “Burn a feed right this instant”. WordPress blogs already come with a feed so you can enter either your blog’s URL (eg: http://www.my-blog.com) or your blog’s feed (eg: http://www.my-blog.com/feed, http://www.my-blog.com/?feed=rss2), check a box if you are a podcaster and hit “Next”.

You will next be greeted with a page where you can change your feed title and feed address. Once you are satisfied with those hit “Next” again. After this there are further Feedburner options to choose from – most of which I ignore, it’s FeedBurner’s email subscription that rocks but I’ll come to that later!

Install the FeedBurner plugin

For the best results using FeedBurner with your self-hosted WordPress site, the FeedBurner FeedSmith plugin is recommended. It will detect all ways to access your feed (e.g. http://www.my-blog.com/feed/ or http://www.my-blog.com/wp-rss2.php, etc.), and redirect them to your FeedBurner feed so you can track every possible subscriber.

WordPress settings

Feedburner can only handle feeds under 512K. In WordPress, make sure your feed doesn’t exceed this in the administration area, by going Settings > Reading, “For each article in a feed, show” – you can choose “Summary” although I like to have “Full text” and don’t put more than 50 in “Syndication feeds show the most recent” if you write long posts.

What is email subscription and how can you set it up?

Email subscription to your blog allows those who have signed up for it to receive your blog posts in their inbox. You can use Aweber to do this but I’ll show you how to do it for free with FeedBurner.

With your feed selected click the “Publicize” tab, then click “Email Subscriptions” on the left, making sure “Feedburner” is selected, and click “Activate”. This will then present you with some HTML code in the box which you will need to copy and paste somewhere in your website.

Once signed up a subscriber will receive your posts as emails shortly after they are published. Google/FeedBurner handles all the backend work – subscribers verify themselves by email and have the option of unsubscribing at the bottom of every email they receive.

Design your posts so they look great as an email

Underneath the “Email Subscriptions” link in FeedBurner whilst in the “Publicize” tab there is another link entitled “Email Branding”. Do spend some time on this page formatting text, headings and links – you can specify the font, size and color. You can also add your logo and specify the title of the email.

Advertise the RSS feed and email subscription on your website

On my website I advertise the RSS feed with the familiar RSS icon which is linked to my FeedBurner feed. And I use the familiar email icon which takes you to the page where you can subscribe to my posts by email. I’ve also got some general information about feeds on this page so that my readers can decide which is the best way for them to subscribe to my blog.

What’s the benefit of RSS and email subscription?

They are both fantastic marketing tools. RSS brings in traffic as it is, for some people, an easy way of reading a site’s content. Email subscription can work like a weekly newsletter to your subscribers with a link back to your site. A subscriber is always worth more than a visitor because, more often than not they will return to your site again and again. The added advantage of the email subscribers is that you have the list of their email address’s although I wouldn’t advocate sending them much in the way of extra mail.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I did this montage to illustrate marketing material that was highlighting Africa as a young and emerging economy.

I had a photo of an ordinary seedling growing out of earth in someone’s hands. I created another layer of this picture (Cmd/Ctrl-J) and cloned out the seedling using the Rubber Stamp Tool (S). I then went back to the original picture and cut around one of the leaves with the Lasso Tool (L) – there was absolutely no need to be precise with this cut out. This roughly cut out leaf was then pasted over the top layer of just the hands and earth. I then had to find an Africa shape.

Finding vector maps and images

Luckily there are some great free vector resources out there. I could give you a list here but just Google “free vector” and you’ll find some great ones. To find a map of the world in vector simply type “free vector map” or something like that and then have a look at the image search – I find this speeds things up a bit. Here you can compare at least 20 (hopefully) free vectors without having to go to the individual websites. The one at Vector Vault looked nice and simple.

Layer masks in Photoshop

Next, I simply isolated the Africa shape I wanted in Illustrator and copied and pasted it into my Photoshop document (choosing Smart Object) and sized and rotated it over the leaf I had cut out earlier. Then a Cmd/Ctrl click on the icon of the Smart Object in the Layers palette makes a selection of the shape and then a click on the Add Layer Mask icon with the leaf layer selected turns the leaf into the Africa shape. It’s at the bottom of the Layers palette and some say it looks a bit like a washing machine!

Finishing touches

Some areas of the map of Africa weren’t filled up with the leaf so I cloned areas of the leaf out to reach the edge of the Africa shape.

As the Smart Object of the Africa shape is vector I found it gave the leaf an unrealistic sharp edge. To counteract this I blurred the layer mask of the leaf not the leaf itself otherwise the sharp edge would have remained. For blurring I usually go Filters > Blur > Gaussian Blur and choose the Radius (usually somewhere between 0.5 and 2). I had to make sure I had the layer mask selected not the layer itself when applying the filter by clicking on the layer mask. When you’re editing the layer mask the rectangle of it will have a thicker border in the Layers palette. (If you click on the layer icon itself the thicker border will move from the layer mask on the right to the layer icon on the left so you know which one you are working on).

Lastly I added some Inner Glow to the leaves to give them a realistic yellowy edge.

Below is another one I did of a single leaf. Above you can see the layers palette from the image below – the leaf with the Africa shape layer mask is above the layer with the cloned out seedling.

So, I hope that made sense to everybody. Sometimes it’s difficult to explain Photoshop practices without doing loads of screen shots. Would anyone do this in a different way? How does this compare to your Photoshop methods?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

How long has it been since you first used the internet? How much have your habits of information gathering changed since then? If you’re anything like me a myriad of different interests discovered on the internet crowd your mind as well as the exciting new ways you find out about them.

The future is on the internet not in print?

So is the internet the future of communication and print as relevant to the the 21st century as the horse is to modern transport?

Well, print is tangible, of course, and that gives it a sense of permanence in a fast-changing world.

If the printed book was launched today it would be described as completely platform-independent, requiring no special software, hardware or electric power to use, more portable than any laptop, does not have to be upgraded, might last a careful user their entire lifetime, and costs less than $15!

If I’m excited about a new subject and really want to learn or to get my teeth into something – I’ll always go to Amazon to try to pick up a cheap book to read.

Technology was supposed to replace paper. But that hasn’t happened. Every country in the western world uses more paper today, on a per-capita basis, than it did ten years ago.

So, there is a place for print design. But where?

Paul Simpson makes the point that print has changed enormously since Gutenberg fiddled with movable type nearly 570 years ago. And will change again. He says that key decision makers – those who don’t surf the web, never open links in emails and are unlikely to stumble across your website – are more successfully targeted by a printed piece of marketing rather than an online one.

If you’re trying to reach out to people who don’t know your business – or do know it and have already decided you stink – the printed product still has a cache, prestige and charisma that the internet can, as yet, only aspire to.

So where does this leave the freelance graphic designer?

The old mantra “If you build a website they will come” on the web is finished. And not even the new mantra of “content is king” explains it as you can have excellent content but no one will visit to sample its excellence.

Content is extremely important but it has to share its throne with marketing.

Whether designing for print or web knowing your market and how to reach it is more important now than ever.

The internet is the new kid on the block but ignore print at your peril. Investing in quality print design could give you the edge on your competitors in these challenging times.

So what do you think? Do you find yourself like me besieged by clients who are obsessed with Google, internet marketing and never consider the power of the printed word? Or do you work in print happily unaware of the parallel internet universe?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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 which blacklisted my IP once. Due to the fact that SORBS is run by volunteers and requests money to remove blocks, I am not sure that 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?

Get your host to route your mail through a different IP address

This will stop the problem in the short term while you negotiate the de-listing with the blacklisting company.

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:

1. Log in to your cPanel administration page
2. Click on the top left icon “Email Accounts”
3. Click on the Access Webmail globe next to the email address you want to access
4. Enter password
5. 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:

1. Then in Gmail, click Settings > Accounts then click “Add another email address you own” and enter your other email address.
2. 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!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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 <head> section of your page. The JavaScript will always be contained by the tags <script type="text/javascript"> and </script>. 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:

<script src="http://robcubbon.com/js/rotation.js" type="text/javascript"> </script>

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?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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:

1. 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.
2. SEO. Include your keywords in the title of your post or page, in the <h3> 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.
3. 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 <strong> tags around it in HTML mode.
• Italic: You guessed it. This italicizes the text in Visual mode and wraps <em> tags around it in HTML mode.
• Strikethrough: This strikesthrough the text in Visual mode and wraps <del> 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 <li> when each individual bullet point is highlighted, then select all bullets plus <li> tags and click <ul>.
• 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 <li> when each individual numbered phrase is highlighted, then select all phrases plus <li> tags and click <ol>.
• 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 <a href="http://www.google.com/"> at the beginning of the anchor text and </a> 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 <p> 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 <p> tags.

In the HTML editor, one hit of the return key will give you a line break or <br/> 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 <p> 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 <h3> tag

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

In most WordPress themes, the title of your post is wrapped within <h2> tags which conveys to search engines that it is important text. Similarly, you can break up your text with subheadings or <h3> tags which conveys to search engines that it isn’t as important as <h2> 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 <p> tags!

Say you want to put ordinary text inside a <td> tag. You will have to hit your carriage return twice to get the <p> tags to appear. In this case it is probably easier to add the <p> 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 <div> that contains the post text. Go to Appearance > Editor in the WordPress dashboard and click on <style.css> to find this out. In my theme the <div> 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:

<img src="http://your-site.com/images/image.jpg" alt=""/>

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:

<img src="http://your-site.com/images/image.jpg" style="float: left; margin: 0px 10px 0px 0px;" alt=""/>

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

<img src="http://your-site.com/images/image.jpg" style="float: right; margin: 0px 0px 0px 10px;" alt=""/>

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!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I have been asked to help publish a 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 we can get from the magazine.

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 months I shall be writing, designing, and editing the magazine.

There are several factors why this magazine is attractive to advertisers and sponsors:

• 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 in any way please contact me.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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:

<a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>

or this:

<a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia, is amazing multilingual, web-based, free-content encyclopedia </a>

but not this:

<a href="http://en.wikipedia.org/wiki/Main_Page">Click here</a> 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!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

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.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.