Free tips on layout and design

Do-it-yourself graphic design

Sometimes you just cannot afford to outsource certain graphic design projects or you just need to get creative yourself and give your idea a try, whether it’s a new website, banner ad, email blast or print newsletter. Below are some of my tips for amateur or would-be graphic designers, including what software you can use and what resources and copyright awareness you may need.

Please let me emphasise that I do not mean to offer black and white rules on this page, rather most design decisions should be seen as a weighing of pros and cons, with a strong focus on the needs and preferences of the audience and client. Achieving optimal creative can be a difficult balancing act, but with my more than 5 years of experience, I know a few tricks that help with design decision-making and workflow. Like many other professions, graphic designers are continually learning, and I am happy to admit my own limitations. Therefore, if you want a complete picture, I encourage you to take this advice as one designer’s suggestions only and go out and find tips from others as well.

Text size and embellishments

Readability is generally the most important thing on a graphic designer’s mind as he or she lays out a project, whether it is for print, web or video. Bold should be used sparingly to draw attention to important things like headings. Italics can have literary meaning (titles, emphasis, scientific names, etc.) or be used purely for aesthetics. I do not recommend using italics for aesthetics on websites because in some browsers, it appears jagged, which is ugly. Underlining is most commonly seen for web addresses online, and I would cautiously suggest that you never use it for anything else (unless you’re going for the cheap and nasty look). In print, underlining is very rarely seen in professional publications because it is ugly and unnecessary.

When it comes to text size, you will need to use different sized text for different types of project.

Text size in letters and documents

When you are working with Word documents, you are offered sizes 8 through 72 (although you can type in other sizes). You get familiar with sizes like 10 pt and 12 pt, which are probably the most common text sizes for letters and other documents.

Tip: For a rapid way to upsize selected text on a PC (in Word or InDesign), press and hold Shift + CTRL then tap >. To downsize it, use Shift + CTRL then tap <.

Text size in PowerPoint shows

In Powerpoint shows, a good text size to use is 24, avoiding anything less than 18 due to readability issues for your audience when viewing the show on a screen from a distance. If your show is purely for web usage, you could probably get away with 14 or 16 for small segments of text like captions and table text.

Text size in brochures and newsletters

A brochure may have text ranging anywhere from 8 pt to 30 pt, depending on its design. Generally speaking, 8 pt text should be limited to only a few places where it looks best or fits best at that size, such as captions or footnotes. I do not recommend going any smaller than 8 pt, even if that’s the only way for you to fit the text supplied by your client or manager. Instead, try some other space-saving tricks, or go back to the writer to see if the text can be reduced.

Text size on book covers

Unless the book is written by a famous person or best-selling author, the title should usually be the most outstanding thing on the cover, and size is often the best way to achieve this. If there is a sub-heading, it should be smaller than the main heading and it doesn’t necessarily need to be right beneath it. Consider the cover pictured right. Because of the difference in size, it is still clear which title you read first, and this layout gives the cover a more unique and interesting look than if the title and sub-title were simply stacked one on top of the other.

Text size on Websites

Once you start working with websites, you may notice that sizes aren’t always specified in numbers like 10, 12 and 14. Instead, you have options like 1, 2, 3, 4, +1, +2, +3 etc. Also, you may need to learn how to edit text size using CSS (a Cascading Style Sheet). When it comes to deciding the best size for text online, trial and error works for me, but you also need a good understanding of screen resolution. If you have yours set very high (eg. if you have a large, widescreen monitor and you set your screen res to 1680 x 1050) then you might be tempted to set your text sizes too high. Test your website on a screen resolution of 1024 x 768 to see what people with smaller monitors and screen resolution will see.

Depending on the style of your piece (whether it is youthy, modern, natural, metro, masculine, industrial, business-like, etc.), your text will either be on a plain, textured or busy background. Plain backgrounds are more readable, but also can be boring, so when going for a more complex design (with a background texture or image), you may need to make your text bigger or use shapes behind, strokes (outlines), shadows or my personal favourite in Photoshop, the subtle outer glow.

What is a stroke in graphic design?

In the world of text, a stroke is not when your letters decide they’ve had enough and pass out on you. The word ‘stroke’ refers to an outline around the edge of each letter. It looks like this:

When should you use a stroke on text?

I find strokes most useful when text is on a background that does not allow plain text to be readable. Text strokes (or outlines) may also be used for aesthetics, especially on thick type, to contribute to the overall colour balance of the design. Plain text often works best for brochures, CD covers, post cards etc. but not book covers. Title text on book covers, especially, needs some kind of embellishment to make it really say something about the book. Be aware that different software will render strokes differently. Setting up your text strokes in Photoshop, for example, often looks better than doing them in InDesign, but will not produce the sleek, sharp lines of InDesign text, which is vector.

When should you use a shadow on text?
Drop-shadows are often over-used so should be approached with care. In some designs, a drop-shadow can make text harder to read and in other cases it will help lift text off the page, making it beautiful and creative. you can do all kinds of things with drop-shadows; they don’t have to be black. In Photoshop, drop-shadows can be set up to darken whatever colour is behind the text. You could also try light drop-shadows, fading drop-shadows and solid ones for different effects.
When should you use an outer-glow on text?
Outer glows are a subtle but flexible way to make text stand-out from a complex background. In Photoshop CS3, you have a range of settings to choose from including colour, opacity, spread and size. I usually like to set my colour to a colour that is already in the background, set the opacity anywhere from 75 to 100% and have the size larger than the spread. In this designer’s opinion, the best way to decide on outer-glow in graphic design is trial and error.

For text inside images, understanding the difference between size and resolution is vital, so that you know how big the image is going to be in the end result (more on this below in images).

Fonts

Fonts or typefaces provide a fast and seemingly infinite way to be creative with text. When designing a brochure, book cover or other printed project, the sky is the limit and you can find hundreds of free fonts online (eg. www.highfonts.com). Software like Microsoft Office, Adobe Creative Suite and Corel Draw come with a range of fonts and the best ones are those that contain bold and italic (oblique) versions as well as sub-types like book, medium and extra bold or black.

You have probably read elsewhere that using more than two or three fonts on one design is inadvisable (going overboard with fonts for the sake of it is a sign of an amateur designer), but did you know that it is unwise to use fancy fonts on websites or in Office documents that are destined for use on other computers? The reason for this is that different computers have different fonts installed on them. A heading on a website you design using Caflisch Script Pro may look wonderful on your computer, but to someone who doesn’t have that font installed, their browser will not be able to display it! Likewise, working files (editable files), like PowerPoint shows, Word documents, layered PhotoShop files and InDesign layouts using fancy fonts that are transferred to another computer, do not automatically contain those fonts.

How to transfer fonts from one computer to another

You can manually transfer fonts from one computer to another by copying and pasting the font files from your font folder (in Windows computers, this is located in C:\Windows\Fonts). There is an easier way to ensure your Microsoft® PowerPoint show or Word document contains the fonts you’ve designed it with. In Microsoft® Word or Microsoft® PowerPoint 2007, open the file, go to Save As then click on the Tools drop down and go to Options and tick Embed fonts in the file.

Most graphic designers know how to transfer fonts when sending an Adobe InDesign project from one computer to another because there is a feature inside the program called PreFlight Package that ensures not only are the fonts included, but also all the images, or links, which are not embedded in the InDesign file itself (unlike in Microsoft® Word). With Photoshop, however, missing fonts can also be a problem if the new user needs to be able to edit the text without changing the font. In that case, the sender should include the font with the Photoshop file (barring any copyright or licensing issues to do with ownership of the font).

Typesetting (paragraphs, headings, columns, margins etc.)

Some designers forget about the basics of good writing, which includes the use of paragraphs, indentation and headings to make text easier to read. On-screen, paragraphing looks best in blocks, like on this page, however you will find many books using indentation to signify where a new paragraph starts. This is usually because the indentation method of paragraphing saves space. It is difficult to use this form of paragraphing on websites so it’s best to stick with block paragraphs online.

Indenting entire paragraphs, as I have done in the sub-sections under each of the main sections of this article, helps with readability and enables a reader to skip over irrelevant information easily. This is done using the <blockquote></blockquote> tags in the HTML code.

Care should be taken when setting up headings in any article or design. First level headings should be the largest or most obvious, second-level headings the second largest and so forth. You can also differentiate heading types with different colours and embellishments like italics. Websites, Microsoft® Office software and layout programs like Publisher, InDesign and Quark enable styles to be set up so that you don’t have to manually change the text settings each time you get to a new heading. You may be familiar with terms like ‘Heading 1’, ‘Heading 2’ and ‘Body Text’, for example. Styles set up in Word will carry through into InDesign so if you are using them, it’s a good idea to get them right before sending the document to your layout designer or attempting to do it yourself.

The use of columns in layout projects generally make it possible to fit more text on a page and some would argue it is easier for readers because they don’t have to drag their eyes across a wide space. You don’t see columns very often on websites because website text (and e-book readers) need to be able to reflow for different screen sizes and resolutions. Columns are more common in print because the designer has absolute control over their appearance. The layout designer can ensure, for example, that headings don’t occur at the end of a column, the last line of text doesn't fall over into the next column (an orphan) and that the lower edge of the text at the bottom of each column lines up perfectly. This can be achieved by playing with leading (space between the lines), tracking (space between the characters) and spaces around any other intruding elements like headings, images, captions, block quotes (stand-out text) etc.

Space-saving tricks

On the subject of space-saving, it can be a priority for a client to fit more text (often to the detriment of ideal design aesthetics). In cases where space is very tight and text cannot be rewritten, moved or deleted, here are some space-saving tricks I employ:

Reduce the text size and/or the leading (space between the lines).

Reduce the space around headings (eg. instead of having a blank line, use ‘space before’ or ‘space after’ paragraph settings in InDesign or Word.

Reduce the size of margins.

Reduce the space around images or block quotes (or move or delete them). Moving an image to a right-hand position will usually take less space than a middle or left-hand position. Having the image fall off the page will also save space, but may not always be feasible aesthetically.

Put image credits inside the margin instead of underneath the graphic.

Implement columns.

Convert from block paragraphs to indented paragraphs.

Use hyphenation (I generally have hyphenation turned off so it only occurs where I feel it is absolutely necessary). On the subject of hyphens, it is a very bad idea to type in a dash because any change later could cause that word to flow onto a new line where it doesn’t need a hyphen. In InDesign, insert a ‘discretionary hyphen’ instead.

Colours

The colour choices a graphic designer makes are significant because they say something about the brand, project, product or event being advertised. If a colour management strategy does not exist for a client, I find that a good starting point is the colours found in their existing elements. Are there certain colours in the logo, on the website, in the photographs or artwork that have been chosen for the project, etc. Using the eye-dropper tool in Photoshop, it is possible to pinpoint the exact colour values in any part of an existing image. I often use Print Screen to quickly grab a section of a website so I can eye-dropper the colours in a logo or shape.

What are colour values and why use them?

It is not accurate to refer to the colours in your design as light blue and dark green. If you come to do another project for the same project or product, how will you ensure you choose the same light blue and dark green? The answer is in becoming familiar with colour values. There four three colour types a graphic designer needs to know about these days:

RGB: Red Green Blue. Light is made up of these three colours, therefore everything you see on screens, including television and computers, is RGB. When working with image, RGB is the pure, original form. When touching up photos, playing with page backgrounds or doing any kind of colour adjustment to an image, always try to go back to the RGB original. JPGs for websites also must be in RGB format to work in most browsers. If you see a little red X where your image should be, it is either because the link is broken or the image type is CMYK.

CMYK: Cyan Magenta Yellow Black. These are the four colours commonly used in printing. Professional print jobs need to be supplied in CMYK for the most accurate results, however when taking files to your local copy shop or photo centre, RGB will print fine (ie. you would not normally notice the difference). If you’re doing your own graphic design work, you might be wondering how and when to change your images to CMYK. The first rule of thumb is to keep the original RGB files. If graphics have been created in Photoshop with layers (eg. text), I would normally flatten them, then go to the Image menu, then Mode then click on CMYK Colour and Save As. These finalised CMYK images are what I would insert or link in the layout software.

HEX: Hexadecimal values apply solely to web design and are used in HTML code to specify colours. While you can type in words like ‘blue’, ‘yellow’, ‘black’ etc. it is better to use hex codes. The eyedropper tool in Photoshop will tell you the hex value of a colour, but it may not be web safe so it is a good idea to use a hexadecimal colour chart as your reference as well. There’s one on the W3C website.

When choosing colours, it is a good idea to have a scheme in mind, often made up of a one main colour and four supporting colours, which may or may be complimentary to the main colour. I highly recommend Color Scheme Designer here: http://colorschemedesigner.com/.

Photographs

To the home user, it may seem simple to take a photo, whack it in a Word document, wrap some text around it and voila! A design has been created. In the world of professional layout and design, however, there are hundreds of ways to use the humble photograph and dozens of considerations when doing so. Is it a good quality photo (good enough for the intended purpose)? Are there any legal concerns such as copyright or defamation? How is it oriented? Will it be positioned across a fold? Will it have text over the top of any part of it? Will it need to fade out or will parts of it be extracted from the background?

The difference images can make to a design

Take a look through any magazine and you will find photos used in many different ways. Those images that are not square often have text wrapping around them in unusual shapes. All this is possible using professional layout software like Adobe InDesign and although you can do some layout in Microsoft Word, it is severely limited and clunky in comparison. The position of photos and other graphics can make or break a design. Book covers designed with a solid coloured background, straight text up the top, a rectangular photo in the middle and straight text down the bottom are boring and amateurish. Take a look at the covers in any bookstore and you will find wondrous variety in the use of both text and images.

The photography workflow

Ideally, a design project starts with thumbnail sketching and plans, followed by customised photography. When photos must be sourced from elsewhere, this will generally limit the designer’s possibilities, making the sketching phase somewhat redundant. In many of my projects for clients and employers, I start with image sourcing and then fit my graphic design work around what could be easily and cheaply found. In magazine and book publishing houses, however, design is taken somewhat more seriously and there is enough time and money allocated for customised photo shoots or illustration.

Photo Books

The latest phenomenon in Photo Books is making it quick and easy for home users to create a page with photos in a variety of positions, but none of these templated designs will ever come close to what a graphic designer could do with the same photos and space. I am often impressed by the ease with which people can create Photo Books, but they really are just glorified digital photo albums, complete with layout flaws, overdone fonts and typos.

How to touch-up flawed photos

Touching up photos is not difficult. In fact, the tools available in Photoshop are so sophisticated now that anyone can do it after being shown how. I use a variety of tools in Photoshop to ensure any graphics I work with are as pristine as possible for printing. This varies widely depending on the origins of and problems with the image. For example:

Images scanned from magazine, book or other printed item have a moire pattern, which can be removed in Photoshop using a Gaussian Blur (Filter menu - Blur).

Images taken by an amateur photographer often have poor lighting or lacklustre colours, but this can be fixed for most photos in Photoshop using the automated colour curves tool (Image menu - Adjustments - Curves - Auto). Alternatively, you can play with the tool to get it right manually.

Images from years gone by often have white scratches or lens dust marks, which can easily be removed using the Healing Brush or Clone Stamp tool. Play around with it till you get the hang of it, but remember to set the part of the image you want the clone stamp to copy by holding CTRL then clicking with your mouse.

Images with extra limbs, faces, trees or other unwanted objects can be edited using a variety of tools in Photoshop, including the Healing Brush, Clone Stamp and good old-fashioned manual erasing, painting and blurring. There is an art to this and it can be time-consuming.

Images with missing limbs, clothes, people or other elements can also be touched up using copy and paste from other images, painting, blurring and the Clone Stamp. Learning to use the extract tool (to extract the object of a photo from its background) is essential so play around with it (Filter menu - Extract).

Vector graphics (including professional digital art and clipart)

What are vector graphics? Computers display images in one of two ways: bitmap or vector. Bitmap involves pixels or dots—millions of them all lined up to give the illusion of a seamless image or photo. The display of vector graphics involves a mathetmatical equation (i.e. points, lines, curves, shapes and polygons). Vector graphics are sharper than bitmaps and can be infinitely scaled larger and smaller without any loss of quality. It is not possible to display all kinds of images in vector, but it is possible to display anything in a bitmap. Consider the following table:

Object	Bitmap	Vector
Text	Possible, but more likely to be blurry around the edges and not readable to computer software (except OCR).	Preferable because it is sharp, readable to computer software, scaleable and results in a smaller file size than a bitmap.
Photos, paintings & sketches	Preferable because it is acceptable to the human eye.	Not ideal because converting a photo to vector would create a complex image (large file size) and it’s unecessary.
Clipart, cartoons & illustrations	Possible, but wasteful considering clipart is usually already in a design ideal for the vector format (chunks of colour, lines, etc.)	Ideal because it is sharp, scaleable and smaller in file size than bitmap. It can also be edited more perfectly and easily.

The most common bitmap formats are:

JPG: Digital cameras generally save straight to JPG (also Jpeg) and most website graphics are JPG. Despite some controversies in the history of the JPG, it is one of the most easily compressed and uncompressed (size-efficient) image formats on disk and has therefore been used widely for the past decade or more.

TIF: Can be single or multi-page and are suitable for use in print layout, but not on websites. Not ideal for use in Word or PowerPoint due to their large size. TIF (also TIFF) is generally considered to be less lossy than JPG, meaning that you can open it, edit it and save it more times without losing quality.

The most common vector formats are:

PNG: A useful format for websites because it can include transparency data and is usually a smaller file size (except when used for complex images, like photos, which really shouldn’t be vectorised anyway).

GIF: A useful format for websites because it can include transparency data and animation. The animated gif was very popular in the early days of the world wide web, but has declined in recent years. This is possibly due to it being tacky, but is probably more to do with being replaced by Flash as the preferred method for animation on websites.

EPS: An original, editable vector format ideal for sending to other computers because it is so universally recognised in graphics software. It is also the ideal vector format for print projects.

AI: Adobe Illustrator files are like EPS files except they are generally only readable in Adobe software. This is my format of choice when working on book designs.

Some combination formats are:

PDF: PDF is inherently neither bitmap nor vector. Rather, it can contain both types of data. It is possible, depending on the PDF’s origins, to insert one straight into an InDesign layout as if it is a graphic.

PSD: It is possible for Photoshop files to be the working, layered originals, meaning that all the objects you see can be edited independently of the others (on layers). Since the release of the Adobe Creative Suite versions of Photoshop, it has been possible to create Smart Objects within a PSD file. These can contain vector images (such as EPS or AI files) or text. Text in PSD files also remains vector unless it is rasterized or flattened.

Click here to read some of my tips for specific kinds of layout projects, including ways to make them exciting to your target market and some of the pitfalls to avoid when designing them.

Return to Layout Page

Please email
Amanda@GreensladeCreations.com
or call 0403 124 533
to discuss your needs.

For details of all of Amanda’s services, including how she can train your staff to maintain your website, email newsletter, image collection and more, please download this Greenslade Creations brochure.

Email | Layout | Writing | SEO | DAM