Silicon Beach Training Blog » New Free Resources

Why Inspiration Should Never Party With Plagiarism

Heather Buckley — Mon, 21 Nov 2011 09:04:28 +0000

Image by gnuckx on flickr

If you are regularly guest blogging and publishing content in order to get quality back-links and provide fresh content for your website, then we think you are doing a great service for your SEO and Social Media strategy.

After the lastest Google freshness update, content marketing has become the most powerful weapon in your artillery, the most respected authorities in the world of SEO are all agreed on this one. Looking for the best and most popular posts on the web is a must if you want to keep up with what’s hot and what’s popular (this is all important for those vital media shares) but what is acceptable and what amounts to simple plagiarism? It’s not just a moral dilema, Google will penalise duplicate content.

If you need more help with your SEO and social media then we offer some great deals on SEO Training, Google Analytics courses and social media training. Below Christopher Fielden, a published author, offers his opinions on the subject of plagiarism - all in his own words!

Plagiarism Definition

If you nick someone else’s idea and pretend it is your own, that’s plagiarism.

Inspiration Definition

If you see something which tickles your imagination enough to write an original story, that’s inspiration.

Examples of the Differences Between Plagiarism & Inspiration

If you went to see Lord of the Rings in the cinema and then decided it ‘inspired’ you to write a book about Rodeo Shaggins and his landscape designer, Jan-Flys Ganges, who discover a magical toe ring which has been imbued with the wrath of the dark lord Flower-on and will bring an end to all that is peaceful by covering the land with the unholy stench of ghastly garlic gases unless the ring is transported across Middle Birth and thrown into the fiery belly of Mount Bloom, that is stealing someone else’s ideas. That is plagiarism.

If you watch the films and think that Gollum looks a little like a hairless baboon, and then, from this initial innocent thought, your mental roller-coaster launches into an unexpected creative rampage and you start imagining an interstellar spaceport called Gut Thunder Five, a paradise (forced to be located on an extremely dangerous planet as it is the only viable refuelling location for the Galactic Warp Pathways in Quadrant Dangly Giblets) surrounded by a rainforest ruled by hairless baboons who threaten the existence of the universe itself because, once a millennium, they are able to unleash sonic mind melting music from their rather disturbingly coloured posteriors; so powerful a sound that every creature capable of cognitive thought in the known galaxy has its sanity threatened by the indescribable beauty of their cacophonous rumblings and may end up driven mad by the music’s hypnotic power and thus engage on a kill crazy rampage resulting in the end of all life, that, dear reader who has shown the will and grit of a martyr and thus made it to the end of this ridiculously long sentence, is inspiration.

As you can see, inspiration does not always result in good ideas, but any ideas you come up with should be entirely original.

Plagiarism Checkers

If in doubt, you can use plagiarism checkers like Copyscape to make sure your work is unique. While these can’t really recognise if ideas or plots have been stolen, they can see if content has been copied. So you can pop your work through these checkers to see if some evil internet bandit has stolen your stories and pretended they are their own brain children.

If you are a Victim of Plagiarism

If you have been a victim of plagiarism, I’d suggest visiting plagiarism.org where you can find out about the various courses of action available to you. They also offer free resources, facts, solutions and support for writers who have had their words stolen.

Written by Christopher Fielden, a published author who enjoys sharing writing advice with other writers and using his own short stories as case studies to illustrate how to get published.

How to Customise Your Google+ Profile Page

Andy Trainer — Sat, 09 Jul 2011 10:02:19 +0000

How to Customise Your Google+ Profile Page: Tiled Images

Check out our gallery of the most creative Google+ Profile designs – and vote for your favourite!

Download Template

Step 1:

Download and unzip our Photoshop Template

Step 2:

Open up the template in Photoshop. We’ve left the images of my face in the template so you can see how it all works – but if you don’t want to see my face (and I can sympathise with your position if you don’t) then either hide or delete the “Colin” Layers!

Next you’ll want to import the image (or images) that you want to use in your own profile.

To do this, select File > Place and select your image file.

Drag and resize it so its in the correct position, and hit enter to place it:

Click on the image for full size version

The image you’ve placed should be in its own layer beneath the “Layer 1″ layer – if it’s not, just drag it there in the layers panel so that it looks like this:

Now you can move your image around under the template to see how it will look on your live profile. If you need to move or re-size your image again – select the layer and use Edit > Transform > Scale to get it in the right place.

Repeat the process for any other images you want to place to get the desired effect – if you want a design that spills over on to your main profile image in the top left – add another image that lines up here too.

Step 3:

Once you’ve got your Google+ profile design looking like you want it, you’ll need to export the images so you can upload them to your profile.

To do that, hit File > Save for Web and Devices and a new dialog box will open – select the file type (jpeg is usually best) and the image quality you want and hit save:

Click on the image for full size version

Now a new dialog box will open – navigate to the location that you want to save the images in (best to make a new folder somewhere for them so they don’t get lost). Importantly – make sure you select All User Slices in the Slices drop-down at the bottom.

Now hit save, and Photoshop will save all of the images ready to be uploaded to your Google+ Profile

Step 4:

OK – Now you’re ready to upload your images to your profile – so:

1. Log in to your Google+ account

2. Navigate to your Profile

3. Hit Edit Profile

4. Now click on the “Add Some Photos Here” box at the top (if you already have photos there, click on them to edit and delete them) – this should look like this:

5. Navigate to the folder where you saved your images, and select the image that appears furthest LEFT in the row first:

Repeat the process, selecting the images one by one from right to left until you have them all in a row and hit OK when you’re done.

Hey presto! your tiles images looking super-cool on your profile page.

If your design also included a main profile image (top left), click on Change Photo under your profile image and upload this too.

When all is well – hit Finished Editing and your new profile is good to go:

Now you can go ahead and tell everyone about your amazing new Google+ Profile design!

Don’t forget – these images appear in the About page of your profile, so if you’re sending people the link, make sure it’s like this: https://plus.google.com/101501043395657937355/about

Happy Pimping! We look forward to seeing your designs!

If you need to know how to use Photoshop to create web graphics all of this is covered in our Photoshop for the Web training course.

Google+ tips and tricks

Heather Buckley — Tue, 05 Jul 2011 10:30:49 +0000

Google+ hints and tips

If you are a complete Google+ beginner you should check out our post Why Google+ is so Hot!. It will take you through the basics. Whilst it is fairly intuitive (we love it!) there are some tips and tricks you might not know about, we hope they will take you a little beyond the basics. If you areinterested in getting more updates like these don’t forget to follow us on Google+!

NEW - You should also check out our post on How to Customise your Google Plus Profile – Colin has created a step by step guide and Photoshop Template to help you pimp your about page!

Here are the most useful shortcuts and tricks for Google+ that we have come across. Please share your best tips if you can’t find them in the list in our comments section.

1/ Remember to make some of your posts “public” not just “limited” (limited means shared with your selected circles). Otherwise the public view of your profile will show no posts!

remember add "public" (green) button to share with everyone

2/ To see how the public (and people who are not following you) will see your profile click “view profile as” and select “anyone on the web”. You can also see what your profile looks like to particular people or circles of people.

view your public profile

3/ If you want to send a message for the attention of one person in particular type +name or @name and they should appear in a list for you to select.

send to an individual person only

4/ There is an option to disable sharing. But remember if you want to keep a secret don’t put it online! Everything – even if you disable sharing – is sharable by screen grab! To disable share click on the little arrow top right of your post and select “disable reshare.”

you can disable reshare but remember you secrets are only a screen grab away from being public!

5/ Your contacts cannot see the names of the circles you put them in – Have fun!

This is a joke don't judge me!

6/ However people can see with whom a limited post is shared! Click on the word limited on someone’s post and you can see who they shared the post with.

7/ Your time-line is affected by how many comments a post has and how many +1’s it has.

8/ Click on Notifications in the left sidebar and you’ll see a chronological listing of all your Google+ notifications. Clicking the “More” link at the upper right of that stream gives you some useful filtering options:

more button in notifications view

Added to Circles – See everyone who has added you,
Posts by You – Not all the posts you’ve written (those are in your Profile), but those you’ve written that have been shared by others.
Posts by Others – Posts written by others that you’ve commented on.
Mentions – Posts in which you’ve been tagged. When someone in your circles types a “+” and your name, you are tagged
Photo tags – Posts with photos in which you’ve been tagged.

9/ If you click on Incoming (found in the left hand menu from the home screen) You can see all the posts from people who are following you even if you are not following them! If they seem interesting enough you can add them to your circles

10/ If you click on one of your photographs you can access some Picasa-lite image editing tools. When the Google+ iPhone app launches you’ll also be able to upload photos straight from your phone (Android users can already get the native app). In the meantime the Google+ iPhone web app is a sleek way to use Google+ on the move – but this doesn’t allow photo uploads.

11/ If you have commented on a post you will get updates every time someone else comments. If you are getting too many updates you can mute the post to stop this. Click on the word “post” in your notifications.

click on the word post

click mute this post

12/ Keyboard shortcuts

J – Lets you skip to the next post in your stream without scrolling
K – lets you jump upwards post by post
If you click on a post and hit return your comment box will open ready for your comment.
If you hit tab and return you will send your comment

13/ Type Tips

_ italic text _ will look like italic text
* bold text * will look like bold text
- strikethrough text - will look like strikethrough text

Google+ It’s so hot

Heather Buckley — Fri, 01 Jul 2011 10:00:42 +0000

Many Social media junkies from the UK are screaming for an invite to try out Google+ but they may have to wait a little bit longer.

Despite the skeptics who referred to Google Wave and Google Buzz as an indicators that it wouldn’t take off, I believe it’s easily the best social offering from Google to date and has become the hottest invitation you are likely to get for a while.

New – Check out our guide on how to Customise your Google+ Profile and our post that will take you beyond the Google+ Basics

Google had to stop inviting users to join its new social networking service less than two days after its launch in the US due to “Insane demand”. An early indicator that Google+ is going to be a big contender in the social media arena.

The message many in the US users were getting yesterday was

“We’ve shut down invite mechanism for the night. Insane demand. We need to do this carefully, and in a controlled way. Thank you all for your interest!

For any who wish to leave, please remember you can always exit and take your data with you by using Google Takeout.

It’s your data, your relationships, your identity.”

If you have been lucky enough to get a head start don’t forget to follow us on Google+!

Most of the people who are on Google+ so far in the UK are people with existing strong social networks. Google have admitted they have been accepting people who have strong social graphs.

UPDATE – If you know your way around but want some more advanced Google+ tips click here or check out our guide to the Google+ iPhone web app!

Why Google+ is different?

Google+ Circles

The brilliant thing about circles that is missing from Facebook is that you can choose to message everyone at the same time or you can send messages to groups (circles) that you have set up to include a special set of people.

This goes for following too you can see all the messages from your sets or circles separately. Circles in Google+ offer a unique a way of sharing content with an exact group of people.

For many who are frustrated with Facebook this is a chance to start anew as Facebook friend lists can be unmanageable. The word “friend” in existing social networks has really lost it’s meaning, now according to Google+ “Your real friends, the ones you feel comfortable sharing private details with.”

Your profile is public unless to edit your settings

Social networks can be private and/or public, defined by the default privacy setting. Facebook is meant to connect you with actual friends; they have to accept your invitation for you to see most parts of their personal profile.

With Twitter anyone can follow and see anyone else (if they haven’t blocked you). With Google+ you can follow anyone, including Matt Cutts! You can see his stream, “like” his pictures, and comment on his posts. Beware though, it does attract a lot of comments and once you comment on a post expect an update a millisecond! Brilliant Google have a solution to this problem, another gem, you can mute a post to stop receiving comment updates – PHEW!

So far the only way to keep your profile private is to go to the privacy settings of your profile and un-check the button, I think they are all public by default.

Hangouts

Hangouts allow ten simultaneous users to connect with each other for video messaging. This is an original feature and Facebook has nothing in comparison. The closest comparison is Skype.

Instant Upload

A great time saving feature. Any photos or videos taken on a smart phone connected to your Google+ account can be instantly uploaded the moment they are taken and put into a private folder where they wait to be published. This is an improvement over Facebook’s very slow Photo Uploader which requires you to load the photos manually. We’ve written a guide to the Google+ iphone app

Sparks

Sparks allow users to type in what they are interested in and provides news and website suggestions. This is a unique part of Google+ that no other social networking site currently provides. It will be interesting to see how it decides what to recommend, and whether its suggestions are actually relevant to a user with less mainstream interests.

Huddle

Huddle allows a grouping of messages into one conversation. For example, if you were arranging to meet up with six friends for dinner, rather than having to juggle each friend individually you can group all the messages into one place so everyone can become a part of the organising of the event. This is being marketed more for the Google+ smart phone app. It is certainly a useful feature but not entirely original. It is very similar to the idea of Facebook Event Pages.

You Can Get Your Data Back

With Facebook you are forced to make certain parts of your personal data “public”, and It is very hard to permanently delete your Facebook profile. Google, has made it possible for you to pick up all the data you’ve ever banked with Google!. This is done through a Google+ tool called “Data Liberation.” You can download data from your Picasa Web Albums, Google profile, Google+ stream, Buzz and contacts, save it all and delete your account.

You can edit your messages

Hooray. I’ve lost count of the number of times I’ve cursed because Facebook doesn’t have that option.

Developer access is coming soon

Developer access is coming soon for Google+ users. Read this on Rafe Needlemans blog this morning:

“It’s simply a matter of time. As Vic Gundotra, senior vice president of social for Google, told me at a Web 2.0 Summit cocktail party tonight, “I’m a developer guy at the core. It is inconceivable I would build something without a platform.””

Sounds like Google are already celebrating their resounding success!

Google is collecting names from developers who want to know when the company launches developer tools. There’s an e-mail and Google Group sign-up online now.

We have just published a new post that will take you beyond the Google+ Basics

We are not the only ones who think its great:

You may be interested to know we provide some great SEO and Google Analytics Training Courses, Social Media, Project Management , HTML5, Ajax and JQuery courses.

VIDEO: Train the Trainer – Planning a Training Session

Andy Trainer — Fri, 24 Jun 2011 09:22:36 +0000

Train the Trainer Training

Here at Silicon Beach Training we’re immensely proud of the quality of training that we provide – and we love teaching other people how to deliver great training sessions too, via our Train the Trainer course.

Knowing your subject matter is only part of being able to deliver great training. Understanding how adults learn, engaging with them effectively, and planning your training session properly are all essential to ensuring that attendees understand and retain what you teach them.

In this video, filmed on one of our Train the Trainer courses – our trainer Mary guides delegates through the stages of planning and designing an effective training session.

We’ve summarised the video below with some great tips on how to plan your own session.

These are edited highlights of this section of our workshop. We cover a lot more besides on out 2-day train the trainer course here in Brighton, Sussex – so why not come along and hone your training technique?

By Silicon Beach Training on Vimeo.

Train the Trainer: Planning a 10 Minute Training Session – Top Tips

When you plan a training session, its not just about what subjects you’re going to cover when. A well planned training session will provide the following elements for each stage:

Content
Questioning Techniques
Activities

During our Train the Trainer course each delegate is asked to deliver and refine their own short training session. This is broadly broken down as follows:

Introduction

The introduction of the training session is about acquisition. You introduce the topic, introduce yourself, and most importantly introduce the delegates.

Ask delegates to introduce themselves before you introduce yourself - give them your name, but don’t start boring them with your own background and experience until they’ve had a chance to speak. Asking the delegates to introduce themselves first puts the focus on the learners, gets their vocal cords going and breaks the ice. It’ll also help you to understand their experience so that you can adapt your training session as needed to the learners’ needs.

During the introduction, find out as a minimum:

Delegates’ Names
Their Jobs
Their Existing Experience

Use round robin and overall questioning to do this (we cover a range of questioning techniques in detail on the course!)

Timetable

Now introduce the timetable - its very important that delegates understand from the start of the course what’s on offer, as they can then make clear in their minds from the beginning how the training will relate to them and how they will use it. At this stage learners will engage with the contract of the learning. If you don’t bother to establish the agenda and dive straight in to the content – the focus is all on you as the trainer.

Ask delegates if they are happy with the timetable. Is it what they were expecting, and is there anything missing that they would like to cover in addition?

Find out the delegates’ aims and write them up on a flip chart or wall for reference throughout the course.

If there are practical exercises within the course that delegates will need to prepare for (and if it’s going to be an effective course there should be!) they need to know when these will occur so that they don’y get taken by surprise later on.

Learning Section

You can now move on to covering the actual content of the training…

Objectives

Set out the objectives for each session. It’s equally important to find out delegates’ existing experience of that topic before you cover it – as some of the attendees may have knowledge that is beneficial to the group in addition to what you were going to deliver (or may have approached things in a slightly different way). Not all of the learning that takes place on a course comes from the trainer – the delegates can learn a lot from each others experience too!

Again – you can use the overall and round robin questioning techniques to get this information from the delegates.

Starting with an overall question to the whole group will help you to identify and activists in the group – those people who can’t wait to share their experiences. However then going round the group with round robin questions will ensure that everyone’s voice get’s heard.

Learning

Having set the objectives, you can now move on to the actual learning.

Include group work and exercises which will engage the activists and pragmatists in the group. At the same time, the theorists and reflectors in your group will still have their needs met, as you have established a good structure, timetable and objectives in your introduction.

Overall and return questioning techniques work well in the learning section

Summary / Review / Application

It’s very important to review content at the end of each session. More importantly, it should be the delegates who summarise this – not you – so that you can be sure that they the group has understood what they have learned.

This also allows an opportunity for delegates to reflect on what they have learned and the application of that in the real world, rather than just assimilating knowledge.

This is the only point where you should use the pick one questioning technique, as it depends on them having obtained knowledge during the learning section.

Personal Objectives

At the very end of your training session, you need to refer back to the original learners’ aims that you established during the introduction section. If you have planned and delivered your training session effectively, you should never find that there are any delegates who’s objectives have not been met.

By using well planned activities and questioning techniques throughout your course, you will ensure that delegates of all learning styles, reflectors, theorists, activists and pragmatists, have their learning objectives met and are able to apply what they have learned to their own requirements.

Learn More

To learn more about how to plan and deliver effective training – including activities, questioning techniques and giving feedback – attend our 2-day Train the Trainer course here in Brighton.

Call us on 01273 622272 or e-mail info@siliconbeachtraining.co.uk for more information and bookings.

What is Responsive Web Design?

Andy Trainer — Mon, 20 Jun 2011 11:23:23 +0000

Responsive Web Design

5 years ago, the only considerations web designers really had to deal with when designing for different users were cross browser testing and different screen resolutions.

Today (and forevermore!), to ensure that your website is truly accessible to all of your users, you have to make sure that your design works for a huge range of mobile devices – iPhones, iPads, Blackberries etc etc… all with different browsers and screen resolutions (many of which are now in ‘portrait’ orientation, as opposed to the traditional ‘landscape’ web browser)

One way of doing this is to design a different version of your site for every device – however that’s a lot of work.

Enter Responsive Web Design..

What is Responsive Web Design?

Responsive Web design is an approach to web design that ensures that your site responds to your user’s environment, and to their behaviour, based on a range of variables including screen size, platform and orientation.

Rather than create multiple versions of a site for each device – ONE website design will be suitable for all users, by using flexible layouts, images and CSS techniques including media queries. The website adjusts itself to the user – rather than the other way round.

HTML5 and CSS3 are an important part of responsive web design, and as more and more browsers begin to support these technologies responsive websites will become more popular.

Some Considerations for Responsive Web Design

Screen Resolution

Browsers now come in an almost infinite number of sizes and shapes – from the smallest mobile screen to the largest widescreen desktop monitor. Many devices (iPhones and iPads in particular) allow users to switch between landscape and portrait just by tilting their device. The image below illustrates the point

So just having your site re-size for each browser won’t be enough, as a landscape design will look tiny in a portrait browser. The solutions to this include…

Flexible Layouts

Whatever device or browser you’re using – go and take a look at http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#

Now try resizing your browser and see what happens – with the flexible layout this site uses, the page looks good in any format – the grid adjusts and the images re-size to fit your behaviour – you don’t have to scroll horizontally to see content that’s gone off the page.

This is achieved by a combination of flexible grids, and fluid images.

Custom Layout Structures

Resizing images and grids can be an effective solution – but really large changes in size may require a completely different layout structure for the page to display correctly.

Using some clever CSS - responsive web design techniques can get sites to display a different layout for each browser size.

In simple terms:

A CSS stylesheet will contain a number of page elements, including content, sidebars, footers, navigation bars etc…

In addition to a default stylesheet, responsive web designers can set up alternative sub-stylesheets (e.g. mobile.css) which use the same elements as the main one, but will be laid out differently for mobile devices. By detecting browser width, the site can switch to the mobile stylesheet. The site will use the same page elements – but it will be laid out in a structure that suits the smaller (or differently oriented) browser.

But how does this work…

CSS3 Media Queries

CSS3 Training

To determine the size of the browser that a user is viewing a site on – responsive web design uses Media Queries.

The simplest form of this is a CSS media query that detects the width of the browser, and then loads the right stylesheet to display a layout that will work well.

CSS3 offers even more flexibility, and has a range of new tags including min-width, max-width, device-width, orientation and color to detect even more about the user’s browser capabilities and load in different stylsheets to deal with this.

The orientation tag especially is invaluable for detecting which way round someone is using their device.

You can read more about CSS3 Media Queries here.

JavaScript and jQuery

Unfortunately – not all browsers and devices support CSS3 yet. Luckily – there are some backup options with JavaScript and jQuery that will work without CSS3s.

There’s a CSS3 Media Queries Library for Javascript that you can download here, and you can also check out this great tutorial on combining media queries with JavaScript

Responsive Web Design Training Options…

We hope this post has provided you with a useful overview of what Responsive Web Design is and how it can be used – however we’ve only really scratched the surface.

If you want to get really in-depth and learn these techniques hands-on, we offer a range of training courses here in Brighton, Sussex on the technologies we’ve mentioned here:

HTML5 Training – 1-day: £325 + vat

CSS3 Training- 1-day: £325 + vat

You can book HTML5 and CSS3 together for just £495 + vat

JavaScript Training – 2-days: £495 + vat

jQuery Training – 3-days: £750 + vat

Please call us on 01273 622272 or e-mail info@siliconbeachtraining.co.uk for more details and bookings.

Top 10 Health and Safety Tips

Andy Trainer — Wed, 15 Jun 2011 09:56:12 +0000

How to Comply with UK Health and Safety Legislation

Regardless of complying with Health and Safety laws, providing Health and Safety Training for your staff is something that all businesses should seriously consider.

Sending staff on accredited Health and Safety courses provide a wide range of benefits including reductions in insurance costs, increased productivity and profitability and an enhanced reputation for your organisation.

In addition – all businesses should take some simple steps to ensure you are compliant with HSE (health and safety executive) regulations.

To be fully compliant in terms of training – we’d recommend sending managers on an accredited course – the IOSH Managing Safely Course is available with us here in Brighton.

However here are our 10 Health and Safety tips to ensure that your organisation is compliant in the eyes of the HSE

Top 10 Health & Safety Tips

How to Comply with HSE Health and Safety Regulations

Conduct a Risk Assessment for your workplace and document it – you need to think about what could cause harm, and what precautions you will take to prevent it.
Any business with employees (so everyone except one-man-bands!) needs to take out Employers Liability Compulsory Insurance – you should display a copy of the certificate somewhere in your office.
Write down how Health and Safety is managed in your business in the form of a Health and Safety Policy (this is compulsory if you employ more than 5 people)
You need to have a person or people available in your organisation to provide Health and Safety advice to employees so that they can meet their responsibilities. This could be someone within your business who has received training, or an external consultant.
You should frequently consult employees on health and safety to ensure that they understand any responsibilities that they have and are happy with the measures you have in place.
Provide Health and Safety training for employees so that they are aware of the hazards and risks in the workplace and are equipped to manage them. The IOSH Managing Safely training course is a useful programme for all line managers to attend as it leads to a recognised health and safety qualification.
Provide basic health, safety and welfare needs for all employees. This includes access to toilets, washing facilities and drinking water. These facilities must be suitable for any employees with disabilities.
Provide Health and Safety Law information for employees to reference. This should take the form of a poster or leaflet displayed publicly in your workplace.
By law, there are some work related accidents and diseases that you must report if they occur. More details on these can be found on the HSE website
All businesses that deal with hazardous substances (e.g. explosives, asbestos etc…) or operate in an inherently hazardous industry (like construction) must register with the HSE

Hopefully your business already does all of the above.

If not, and you need some Health and Safety training or advice – please feel free to call us on 01273 622272 or e-mail info@siliconbeachtraining.co.uk

Illustrator Training Tutorial – Drawing a Scalable Map

Aaron Charlie — Thu, 05 May 2011 08:43:20 +0000

There are many different ways to draw maps - including photographic techniques and of course old fashioned hand drawing. However if have some Adobe Illustrator skills, using its vector drawing tools is a great option, as it means your maps will be fully scalable – you could blow it up to A0 size without losing any quality. Within Illustrator there are many different methods to gain a similar result. This tutorial introduces beginners to many useful techniques in a goal-focused way.

FANTASTIC Illustrator Time saving tips found – HERE

If you would like to learn more about Illustrator, then come along to our Illustrator Training course in Brighton, Sussex. If you already know Illustrator quite well, you may want to have your own private Advanced Illustrator Training. We also run regular Photoshop Training and InDesign Training courses.

An Illustrator map will provide artwork which is razor sharp, scalable, supporting industry standard colours such as Pantone for print and HTML for web.

Illustrator Tutorial: Drawing a Scalable Map in Illustrator CS5

Output Formats

The final format you should export your document in is .EPS for print or GIF for the web. To insert the map into PowerPoint, you might export the map as a JPG at high to maximum quality.

Here is an example of our finished map

As you can see it does not pretend to have any cartographic or scale accuracy but it is very clear to read and can be simplified to clearly show the way to an office or point of interest, etc.

Tracing over a scan

If one wanted to preserve the accuracy of a previously drawn map, one would need to open a photographic version of another map (a screen grab or a scan), define the layer as a template layer, create a new layer for the new artwork and draw over the scan, keeping the curvature of the roads perfectly accurate. This will be the subject of a further lesson.

N.B. Scanning a map requires permission from the copyright holder.

Start a new document

File menu / new or (CTRL+N/ CMD+N)

A5, landscape, no bleed, print or web profile as required by you.

The Roads and Roundabout

Illustrator draws lines in a number of ways: the line tool, the pencil tool and the pen tool.

Use the line tool for separate straight lines

Use the pencil tool for freehand and often wobbly lines

Use the pen tool to give continuous lines of accurate corners (a click), or lines of a precise curvature using industry standard vectors (click drag).

Colours in Illustrator are applied to the Fill (the inside colour of the object) or the stroke (the line going around the edge of the object).

The roads in this map will have a stroke of either black or white, but a fill value of none – the “no entry” colour in the toolbar, the swatches or colour palettes.

It is best to draw the roads with a stroke of one point black.

Draw four or five roads, which intersect at the centre of the map.

Make them extend further than the finished frame of the map.

Notice that when you use the pen tool, a click creates a corner point whereas a drag creates a curvature: drag down for an upward curve and vice versa.

Make a roundabout using the ellipse tool – no 3 in the shape tools. Using the alt key will originate the road from its centre, not from its first clicking point.

Your artwork should look something like this…

Increase the stroke weight to 13 points and make sure your artwork has a fill value of transparent so that the curves in the roads do not fill in with an opaque solid colour.

Group all the roads (select all CTRL+A / CMD+A then group CTRL+G / CMD+G)

Copy (CTRL+C / CMD+C)

Do not paste (CTRL+V / CMD+V) as this will put a duplicate in the middle of the page; paste in front (CTRL+F / CMD+F) which will make a duplicate exactly in front of the previously copied artwork.

Set the stroke of the new roads down to 9 points and colour them white. This will give you 2 point pavements which neatly interconnect with each other!

Text on a Path

Paste in front (CTRL+F / CMD+F) one more time to provide a grid of black roads. When you click on a line with the third Text Tool (text on a path) the fill and stroke values of the roads will disappear and the type will take on the same direction as the roads, however curved or cornered.

Open the Type Character palette (CTRL+T / CMD+T) from the Type menu or the Window/ Type and tables menu.

Set the type size small enough to sit within the road and use baseline shift (bottom left in the character palette to a negative value so that the text sits in the middle of the road and not on top of it. I used a 9 point line with a minus three point baseline shift in the following example.

The first accurate setting of type characteristics will set a precedent for all of the other roads.

If you want text to go in two different directions on the same path at the same time you will have great difficulty. It is correct to duplicate the line itself; use one line for upward text (e.g. my M4/M11) and a separate line for downward text (my M1)

You will find three text I-beams: the start, the centre and the end point. By dragging the centre point around the end of a line, you can invert its direction.

Masking and the Frame of the Map

Masking

Group all the roads and the text: Select all CTRL+A / CMD+A then group CTRL+G / CMD+G.

Make a rectangle with the rectangular shape tool which is exactly the same size as the finished map. Please ensure that road ends protrude off each edge.

Give the box a fill value of 20% black and a stroke value of 4 points black.

Copy the box to the clipboard: CTRL+C / CMD+C

Select both the roads and the box.

Go to object menu/ clipping mask/ make to include the map and exclude the overlap. This is what is meant by a “clipping” mask – like scissors.

You will notice that the box no longer has any stroke or fill value rather similar to text on a path.

Now paste a copy of the box behind the map with edit menu/ paste behind CTRL+B / CMD+B.

Set the stroke value to 0 points but keep the fill at 20% black.

Next paste a further copy of the box in front CTRL+F / CMD+F and set the fill value to transparent but keep the stroke value at 4 points black to make a neat frame as in the following example.

File Formats for Export

The .EPS Encapsulated Postscript is the most used file format for the printing industry.

It is best practice to keep the version as the latest version with an 8 bit preview for on-screen visibility.

File Formats

Most printing programs accept Illustrator’s .EPS file format, encapsulated Postscript. This format supports background transparency and is infinitely scalable to any size up or down.

I tis never pixelated as the file format is composed of mathematical vectors, lines and curves, and not pixels as found in photographs.

To output files for PowerPoint the bitmap .JPEG format is often preferred. You cannot save as to a photographic file format, but instead should go file menu/ export to JPEG, choosing high to maximum quality.

To output files for Web use, go to: file menu/ export for web and devices.

Here you could chose .PNG for web transparency, .GIF for logos or .JPEG.

You can choose optimisation values by choosing a 4-up preview.