fibut i™m not an artistfl - rajeun.net › PDF › ebookdesign.pdf · 5 the fibut i™m not an...

the�but i�mnot anartist�guide toebookdesign...

for all those who thinkthey “can’t” -I’ll show you that youCAN

Neil Tarvin

2

the �but i�m not an artist� guide to ebook design

Copyright 2002 by Neil G. Tarvin, DC. All rights reserved. Nopart of this book may be reproduced or transmitted in any form,by any means, (electronic, photocopying, recording, orotherwise) without the prior written permission of the author.No liability is assumed with respect to the use of the informationcontained within. Although every precaution has been taken,the author assumes no liability for errors or omissions. Neitheris any liability assumed for damages resulting from the use ofthe information contained herein.

Neil G. Tarvin, [email protected]

just so you know

http://www.ebookgraphics.com

mailto:[email protected]

3


about this ebook

This is an ebook for all those people who don�t know how to getstarted - who don�t think they can design and create an ebook- who have a passion to write but don�t know how to put it alltogether in a readable format.

It�s particularly for those who don�t want an ebook that looksjust like everyone else�s.

You�ll find all sortsof comments andinfo in this sidepanel!

You may have already figured out that this ebook, like my last,will be - well, different.

This ebook is really an extension of the first and it might becalled an �advanced� version of it. In reality, it�s not reallyadvanced, it just covers different aspects, and in some greaterdetail. While �How to design and create a great ebook...�covered the overall view, this one will cover the �down anddirty� stuff.

It�s purpose is simply to get you thinking - to give you ideas,and show you some of the things that can be done. (It has agrander purpose, too - and that is to elevate the quality of ebookson the Internet!)

4


table of contents

just so you know ........................................................................................................ 2

about this ebook ........................................................................................................ 3

table of contents ........................................................................................................ 4

about color ................................................................................................................ 5

using graphics ........................................................................................................... 19

using fonts ................................................................................................................. 29

design your ebook ..................................................................................................... 37

layout and your ebook ............................................................................................... 39

rogue pages .............................................................................................................. 57

the end of the road .................................................................................................... 64

the questions ............................................................................................................. 65

5


There�s so much to say about color, it�s hard to figure out whereto start! To simplify, we�re going to concentrate on the uses ofcolor in ebooks and on the web. There are numerous reasonsand ways to use color � the trick is using it effectively.

Here are some of the reasons to use color in your ebooks.

Primary, number one reason to use color is � people like it!Simple statement � complicated explanation! There is a hugefield of study dedicated to color psychology. Color affects youremotions, and can even create physical reactions. We�ll begetting into this more deeply a little later, but for now, just believethat people like color because they react to it on a primal, evensubconscious, level.

We can also use color to highlight and emphasize particularpoints of importance. This one�s pretty easy to figure out. Youhave something important to say, so you use color to makeyour point.

We can use color to aid in scanning documents. This verymuch relates to the previous point. By coloring a series of items,you can concentrate your reader�s attention.

How about using color to reflect relationships? In this ebook,for example, I use a single main color bar for each chapter.Subheads within that chapter are colored the same as thechapter heading, but in a different position. Is the reader goingto notice it? Perhaps not to say out loud �Oh, he used a differentcolor for each chapter!� But, at some level it will register.Eventually, the reader will use the colors as guides to locatewhere he is in the ebook.

We can also use color as a code. This is very obvious in thingslike charts and graphs, and in lists. Charts can get prettyconfusing if everything is a single color!

about color

Scanning? Incase you didn�tnotice, I�ve donethat on thispage.

Why did Iuse pastels inthis ebook?

These are thebasic uses of colorand the ones we�llbe concentratingon.

6


The appearance of color is dependent on light.

No matter what the source, whether candle light, electric light,or daylight, the light source will have different properties thataffect the appearance of colors. In other words, colors will lookdifferent when viewed in different light. Many paint stores nowhave daylight bulbs or an area where chips of paint can beviewed under daylight conditions. Conversely, all colors aredimmed or eliminated in reduced light. The next time you�re outdriving at night, look around. It will look like all color has beendrained from everything � except those items that areindividually lighted!

Humans have limited vision when it comes to color. The eyecan detect the range of light spectrum from about 400nanometers (violet) to about 700 nanometers (red). We seethis as a smoothly varying rainbow of colors. Is there color wecan�t see? Yes � ever heard of infared, or ultraviolet? Infared ispositioned after the red area on the spectrum � ultraviolet ispositioned at the beginning of the spectrum.

Physically, the retinas of our eyes contain rods and cones. Rodsare basically used for black and white vision, and peripheralvision. Cones have the ability to separately sense three majorparts of the spectrum - red, green and blue. Cones are sensitiveto red, green, OR blue, but not all three colors. When we seepurple, for example, we�re exciting the red and blue cones. Aqua� the blue and green cones, and so on.

Our perception of color is determined by which combination ofcones are excited and by how much.

(The theory of color and vision is a very complex subject. Someexperts believe color is dependent strictly on the cones of theeye � others believe that color is determined by the brain�sinterpretation. We�re not going to get too deep into this, so ifyou want more info on light and vision, you can go here -http://lls.stcc.mass.edu/tamarkin/ap/AP2pages/vision.htm )

color and light

http://lls.stcc.mass.edu/tamarkin/ap/AP2pages/vision.htm

7


Did you everargue withsomeone aboutwhether a color isblue or purple?

Now, on top of lighting conditions, there are also variations ofperception between individuals. Perception is the brain�sinterpretation of what is being seen.

perception

color blindness

When we look at a color we can only relate to our ownexperience with it. Other people perceive the color differently,so what looks good to you, may not look the same to others.

If you put that in context with rods and cones, perhaps youhave more blue sensitivity, and they have more red sensitivity.Perhaps your eyes are responding differently to the lightavailable. Perception is very unique to each individual.

Here are some good examples of the effect of perception.

Now perhaps you can see why some people are color blind.Color blindness results from a deficiency, or weakness, of oneor more of the cone types. While most color vision deficiencyis a result of genetics, there are instances where a disease orillness has caused color deficiency. Montel Williams, forexample, is color blind because of Multiple Sclerosis.

Color blindness is not always simply being totally blind to acolor. People have varying degrees of color blindness, and alsovarying colors that they cannot perceive.

There is a set of cards called the Ishihara Test which test forthe various types of color blindness.

Chances are you�ve seen some of these cards before - theyare generally a shape - like a circle, filled with multicoloreddots. Some of these dots, in various color combinations, forma shape or a number.

On the following page, there are samples of Ishihara cards.

Males tend to be moresusceptible to colorblindness than females.

8


The individual with normal colorvision will see a 5 revealed in the dotpattern, while an individual with Red/Green (the most common) colorblindness will see a 2.

This plate will separate the type of colorproblems and their levels. Most will see thenumber "26" clearly while some will only seea "2" or a "6" or no numerals at all.

Optical illusions are also a part of perception. In the followingillusion, which blue is brightest? (On the right side, do you alsosee the white dots? No, you don�t � they�re not really there!)

The blues, by the way, are exactly the same color! This particularillusion is a great demonstration on the effect that adjacent colorshave on each other - the black gives the blue a deeper lookwhile the white brightens it.

optical illusions

9


Here�s another illusion. Notice how the colors guide the eye toenhance the illusion.

Here�s a great page with many optical illusions. (These illusionsare from this page.)http://home.soneraplaza.nl/mw/prive/beco/illusion.htm

Here�s something about perception that�s very unique - andyou�ve probably never heard of it before. One of the mostfascinating subjects relating to color is synesthesia. It is a veryrare condition in which people can taste shapes, hear colors,see sounds, and other sense crossovers.

Sounds strange, doesn�t it? Kind of like an LSD flashback fromthe 60�s! What would a color sound like, or taste like? Wouldyellow taste like a lemon? What if you saw sounds in color?Would you like to find out? Try this link (and his links page)http://wabakimi.carleton.ca/~sscott2/sam/Synaesthesia.html

If you REALLY want to know � try this online experiment!http://phinland.net/Synaesthesia/NOISE/continst.html

synesthesia

Now you may be asking yourself, why in the world are wereading about color blindness, optical illusions, andsynesthesia?

I simply want to point out to you that part of color perception isawareness and that for some people color is limited, or verydifferent from what you might expect! In the case of opticalillusions, it also shows you how you can use it to your advantagewhen playing with color.

http://home.soneraplaza.nl/mw/prive/beco/illusion.htm

http://wabakimi.carleton.ca/~sscott2/sam/Synaesthesia.html

http://phinland.net/Synaesthesia/NOISE/continst.html

10


Ever since grade school, you�ve seen color wheels. Did youever wonder how they were created?

Here�s our spectrum again. If we were to just join the two endsto make a circle, we�d be creating a color wheel, but just lookingat a color wheel doesn�t tell us much about how it�s actuallyused. So, we�ll build our own. Yes, I said build one. Relax. It�snot hard to do, and by building one you�ll better understand therelationships between various colors.

We have to know where to start. Well, the easiest place to startis with the Primary Colors - red, yellow, and blue. So, let�s justtake those three colors and place them in the shape of a triangle.

Good start. Now what?

After primary colors come Secondary Colors. Secondary colorscome from combining 2 primary colors, so, we�ll also have 3secondary colors.

We�ve seen a bit how your mind can play with color. Let�s getdown to how colors work together.

The orderdoesn�treallymatter

the color wheel

11


By combining Red and Yellow, we get Orange, Yellow and Bluemake Green, and Red and Blue make Violet. We�ll put thosebetween the two colors that are combined.

Let�s add one more layer - Tertiary Colors. Want to guess howwe create teriary colors? We simply combine the adjoiningcolors on our growing color wheel. In other words, we combinea primary color with it�s adjacent secondary color.

Our tertiary colors take their names from the combination - red-orange, yellow-orange, yellow-green, blue-green, blue-violet,and red-violet. If we wanted to, we could keep adding colors.The more colors, the smoother the color wheel, but, for ourpurposes, this is enough.

12


We just built a color wheel. What doesn�t show up on the colorwheel, though, are the neutrals - white, gray, and black. (We�llget into these later.)

Now that we have a color wheel, what can we do with it? Howdo we use it? Well, for one thing, we can use it to determinebasic color schemes.

Monochromatic color schemes are color schemes involving onecolor. But saying �one color� can be deceiving. Some additionalproperties of color now come into play and give us more toys toplay with.

We can use Hue. Hue is simply the color family - red, blue,yellow, violet, etc. There is no white, black or gray added. Youcould say �pure color�.

Value is the color�s lightness, or reflectvity. (Lightness vsdarkness of the color.)

Saturation - is the color bright or dull?

Tone is the hue plus gray (or the hue plus it�s complimentarycolor)

Shade is the hue plus black.

Tint is the hue plus white.

13


Obviously, saturation, tone, shade, and tint can greatly expandthe range of the color even in a one-color scheme!

Complimentary colors are the colors opposite each other onthe color wheel. Consequently, a complimentary color schemeinvolves two colors that are opposed on the color wheel.

Shade

Tint

Tone

The colorson this end

are fullysaturated

You cannot go wrongusing a complimentarycolor scheme. All youhave to do is select 2colors that areopposite each other onthe color wheel. Theyalways work together!

Why? Because they�compliment� eachother...

14


Look at the example below. Yellow�s complimentary color isviolet, blue�s is orange.

Now, if colors are complimentary, so are their tints, hues andshades. So once again, we�ve expanded the possible colorswe can use.

Do you want to work with 3 colors? This is called triadic color.Basically, you create an equilateral triangle, and the 3 colors ittouches are the triadic colors. We did this with our primarycolors, remember?

Here�s an example of atriadic scheme.

Again, we also have all the tints, shades, and tones associatedwith each of these colors.

Neutrals, as mentioned earlier, are whites, grays, and blacks.They are basically used as colorants in tints, shades, and tones,and are used for balance. Neutrals are not very important inregard to the color wheel, but they gain importance in the nextsection.

Your triangle cantouch ANY 3colors, not just theprimaries!

Triadic schemesare likecomplimentarycolor schemes -they will alwayslook good together.

15


Color Psychology is the use of color to create reactions in theviewer. We use a lot of color references in our language � greenwith envy, seeing red, blue blood, feeling blue, red carpet, andso on. These phrases are generally connected with themeanings of the colors they refer to. You can manipulatepeople�s reactions by choosing colors that evoke the responseyou want.

Green can be eitherwarm or cool. Whenit�s influenced byyellow, it becomeswarm and when it�sinfluenced by blue,it becomes cool.

Lighter colorstend to be morepassive, whiledarker colorstend to be moreactive.

The first general division is warm colors versus cool colors.

Warm colors create excitement and warmth and stimulatecreativity and activity. Warm colors include Reds, Orangesand Yellows.

Cool colors have calming qualities. These qualities aidconcentration and create peacefulness and tranquility. Coolcolors include Violets and Blues. When choosing colors, youmust also consider the effect of the lightness and darkness(value) of the color.

Just this little bit of knowledge should get you thinking - whatkind of reaction do you want from your readers? Will they reactbetter to warm or cool colors? What about your subject matter?Is it warm or cool in nature? (You may need to �go with yourgut� on this one!)

In addition to the general warm/cool division, each color hasit�s own personality and meaning. This will help you focus in onyour target market and the people you�re trying to reach. Let�slook at the spectrum again.

First, some general color characteristics.

Red - Energy, Passion, Power, Excitement

color psychology

warm and cool colors

16


Yellow - Wisdom, Playful, Satisfying, Optimistic

Orange - Happy, Confident, Creative, Adventurous

Blue - Peace, calm, tranquility, trust

Green - Health, Regeneration, Contentment, Harmony

Purple - Royalty, spirituality, nobility, mysterious

Gray - Security, dignity, reliability, conservative

Brown - Earth, outdoors, comfort, stability

White - Purity, simplicity, cleanliness, innocence

Black - Sophistication, elegance, evil, mystery

I�ve given you just 4 meanings for each of the colors listed above.There are lots more for each of them. Some are negative, someare positive. It�s really pretty easy to figure out what they are -you simply come up with related words to those listed.

Think about how the colors are used in society. For example,red is certainly passionate and energetic, but then why are stopsigns red? Blood is red - what does that mean? Yellow is listedas playful, but we also call cowards �yellow�. We use green toindicate health, yet sick people have a yellow, sallowappearance. If you think in terms of expanding the words listed,you must also consider the negatives!

There�s another problem, too. Things get even more complicatedwhen you realize that colors have different meanings in differentcultures. In US society, black is the accepted color for mourning.In the far east, though, white is the color of mourning. This maybe important to you if you are targeting a specific culture. There�sa good page on cultural color symbolism here.

http://webdesign.about.com/compute/webdesign/library/weekly/aa070400c.htm

It�s all kind of confusing, isn�t it? We have colors that havedifferent meanings in different contexts. We have culturalinfluences. We have perceptual differences. With all thesevariables, how can we use color to our advantage?

Can�t think of any?Get out thethesaurus!

Americans aremasters of languageconfusion. How do youpronounce �thought�?How do you pronounce�taught�?(Hmmm...why isn�t it�tought�, or�thaught�????)



17


First of all, don�t complicate things. I know that I pointed out alot of contradictions, but that was just to make you aware ofsome things you might not have considered. Keep it simple.

Secondly, many people will suggest that you choose colors toappeal to the target audience you�ll be marketing to. I don�tagree.

I believe you should choose colors appropriate to your subjectmatter and your ebook, not the target audience. What do youwant your readers to feel? For example, in this ebook, I�m usingvarious pastels. I asked you earlier �why� I was using them.Have you figured it out yet? Pastels are warm colors and theirsoftness tends to relax people. I didn�t want intense colors thatwould create a feeling of urgency. I wanted relaxing colors thatwill help people slow down and think about what�s in this ebook.Relaxing colors are also receptive colors.

Look at the ebooks below. One at a time, think about whatemotions or words each creates in you. There are no right orwrong answers - just how you feel about each color. Do any of

the colors evoke memories - good or bad? Do you have a gutreaction to one or more of them? Take your time and get a clearpicture.

Now think about your ebook. Think about the contents, thesubject matter, the object of your writing. What do you want toget accross to the reader? Which color does that for you?

Maybe a tint, or shade or tone of one of these colors will workbetter for your ebook.

18


Here are our original colors again, and the some tints of thesecolors. We could do the same thing with shades and tones aswell.

The point is - you have an almost infinite number of colors toplay with. Don�t be afraid to try different color combinations,tints, shades, and tones.

Adobe Photoshop has an interesting way of showing shades,tints, and tones in one fell swoop. Look at the way they do it.

Rememberthat Tintsare thecolor pluswhite

PureWhite

PureBlack

Grey

Now, we could get a whole lot more complex here, but youdon�t need to be a color expert to use color effectively - you justneed to know how wide your choices are.

Time to move along. We�re going to look at graphics next, andincorporate some of what we�ve learned about color into it.

This shows youa full range ofall the tints,tones, andshades forred.

You can seethat red isn�tjust red!

19


using graphics

Graphics can be anything used in your ebook that is not type.In some instances, though, even type is considered to be agraphic element!

Graphics can include lines, boxes, circles, clipart, photos,backgrounds, bullets, arrows, dingbats, and the list could goon and on.

Just as color should be used for effect, graphics should beused to illustrate and demonstrate. We�ve all seem websitesand ebooks where a piece of clipart has just been seeminglythrown in for no apparent reason.

Graphics can be used to emphasize a point, visually describesomething, break up heavy areas of text,or simply as part ofthe overall design. Graphics are always most effective whenused for a purpose. Don�t use graphics just for the sake ofusing them.

Let�s look at the simplest graphics first. These are the graphicsthat are built-in to virtually every word processing program.So, the first graphics are lines, dots and borders. They may bevery simple - like a single line, or very complex like an ornateborder. In many programs these can also be edited to get justthe shape you want, or to obtain various effects - such asshadowing. In addition to these graphic elements, you alsohave access to what are called dingbats or wingdings.

Dingbats are actually fonts. You create the graphic by typing

in a particular typeface. Here are some examples....

(ncvhcxudbflfpgunescr d e q w t d c h j b v f gvgdtfkv,bpnkl;uirt

!"#$%&;Dingbats will print in whatever size and color you choose forthe typeface.

These are �dingbats�and �wingdings� Youcan find them in your�font styles� menu inany word processor.

20


gYou might want to use a large dignbat to head upa paragraph, or smaller ones as separatorsbetween sections.fgfgfgfgfgfgfgfgfgfgfgfgfg

Keep in mind, though, that since digbats andwingdings are fonts, they are subject to all the rules involvingfonts - spacing, line length, justification, and line spacing.Dingbats can also be done in bold, italic, or bold italic styles!Dingbats are great �spicer-uppers� - and are easy for anyoneto use.

What we commonly call �lines� are called �rules� by those inthe graphic arts. Rules can be as thin as a hair (hairline) or aswide as you like.

Rules can also be used in �multiples� and in combinations, likethe samples below. They can also be solid or broken. They canbe vertical, horizontal, diagonal, or combinations of these aswell. And, of course, they can be any color!

Your HeadA wide rule can be used to emphasize headlines, like I do inthis book with chapter heads, or it can be used to focus attention- almost like an arrow would, as above.

21


OOPS! I�m getting ahead of myself - gotta get back on track!Let�s take a quick look at bullets.

Bullets are the little dots you see in front of many lists. But, dothey have to be dots? What about boxes, or stars, or any of thedingbats we�ve already discussed?

Back when the web was first becoming �graphic� (it used to benothing but text, you know) the big thing was to add bullets orlines to your web pages. People went crazy designing 3dimensional balls, dots, boxes, arrows, and various types oflines that could be inserted into web pages. They progressivelygot fancier and fancier as artists discovered how to create them.Now there are thousands of sites where you can pick up all thefree bullets and lines that you could ever want. Here are someexamples of bullets.

Back �BG� (before graphics) the only rules that you could addto web pages were just simple grey lines, but that�s all changednow. Here are some line examples.

The bullets and lines are actually in one of two graphic formats- either �GIFs� or �JPGs�. Originally, all were GIFs - there werefewer colors, and GIFs created a smaller image file size - whichmeant faster page loading. It didn�t take long before peoplestarted using JPGs - mainly because they allowed more colorsto be used, which meant better shading effects and moreprofessional looking graphics. GIFs and JPGs are still thepredominant graphic formats on the web.

Designing GIFs was a bit tricky, though - you had to matchyour background of the GIF to the background of your page,otherwise you�d get a little block of the wrong color surroundingyour GIF image.

Notice the grey aroundthese? These are oldbullets - designed to beused with the originalgrey page backgroundswhen the Net was firstgetting started!

See the bulletsabove!

22


The day that someone created a �transparent� GIF was a majorstep forward for web graphics. In the beginning, it took a numberof steps to create a transparent GIF, but it was worth it, becauseyou could then use any background - especially the wild andweird ones, without interference from your bullets.

GIFs *did* have their restrictions, though. There seemed to bea never-ending problem with the �owner� of the format, and aGIF could only use 256 colors. That doesn�t show very muchdetail.

People started using the JPG format to create graphics. JPGscould have millions of colors. They gave great detail, and wereparticularly good for photos. They were also good for creatinggradients, and other graphic elements that required smoothcolor transitions.

They did, though, create considerably larger files than GIFsdid. The following gradients illustrate the color depthdifferences.

It wasn�t all theformat�s fault,though sincemonitors back thenweren�t verysensitive, either!

You can really see the color separations in the 16 and 256color images above, and even a bit on the standard JPG, butas you get to the High Color (32k) and True Color (64k), youcan see how the transitions are smoothing out.

CompuServe �owned�the Gif format andwould periodicallyrefuse to let peopleuse it!

JPG�s no longer createoverly large files - thecompression on JPG�shas greatly improved!

std JPG

16 colors (GIF)

256 colors (GIF)

32K JPG (high color)

64K JPG (true color)

The more colors used, thesmoother the transitionsbetween colors.

23


I purposely picked two highly contrasting colors for theseexamples so that you could see how the transitions worked. Inreal life, you probably would NOT use contrasting colors in agradient. You�d most likely use different tones, shades or tintsof the same color as your starting and ending colors, such asthe one below.

Using the same color but in different tints, tones, or shades willgive you a smoother transition.

Like everything else having to do with graphics, though, thereare no hard and fast rules. Some images just plain look betterin one format or another, and you�ll just have to play a bit to findthe best format to use. In some instances, it won�t matter whichformat you use. The pictures below will illustrate this concept.Same picture - 3 different formats and they are not noticeably

ben- .gif.jpg

ben - .bmp

different! The difference is in the file size. The gif file is 35kb,the jpg is 13kb, and the bmp is 149kb. Since all the files encodedinto an ebook are reflected in the final file size, I�d use the .jpgversion to save space.

Resolution is also a part ofhow good a picture looks.Resolution is the numberof dots per inch (dpi) thatthe picture is displayed at.Resolution can be veryhigh - like 3000 dpi, orvery low - like 72 dpi. Thehigher the resolution, themore detail. The problemis, high resolution createsbig files - you have to finda happy medium - usuallyby trial and error.

ben - .jpg

24


I threw a new format into the mix on that last picture. BMP isanother file format for images. It�s the file format you createwhen you use Windows Paintbrush. There are many otherformats. PaintShop Pro lists 27 different image formats that theprogram can handle. Some paint programs create their ownformats, while some use standard formats.

It�s important to have a graphics program that can handle alarge number of image formats., and various programs havedifferent strengths and weaknesses. Although I have severalpaint programs on my computer, I use PhotoShop andPaintShop Pro the most often. Keep in mind, the newest versionof a program isn�t always the best for you! New versions areoften bloated with features you�ll never use in your entire life.Find a version that suits your needs.

Screens are another way to play with graphics and color. Wealready know that adding white to a color produces a tint - redplus white, for example, creates pink. Screens give a similareffect, but using a different method.

Screens are pieces of film that have been broken up into aseries of tiny dots. The number of dots per inch on the screendetermine the effect of the screen - a 10% screen, a 50% screen,etc. This means that if you use a 10% screen, only 10% of thecolor will show on the finished piece. The tiny dots on the screenwill allow the paper to show through. Hmmmm. So, if you havea piece of red clip art to be printed on white paper, and youplace a 20% screen on it, what happens? Well, 20% of the redshows, and the rest is the color of the paper you�re using.Remember perception and illusion? Your eye will blend the 20%red ink and the white paper. Now, what color do you think you�llsee? Yep. Pink! You can vary the shade of pink by the screenpercentage you use - the higher the percentage, the darker thecolor.

OK, that�s cool, but what does it mean to you? This is an oldgraphic design trick to expand the number of colors that can beused in a project. It doesn�t mean much on the �Net, where youhave millions of colors available to you, but what if you have ajob to be printed? Maybe you�re getting ready to do a postcard

I�ve stuck withPaintShop Pro 4 -it�s quick, easy touse, and unbloated!

100% Red

20% Red

screens and spots

25


ComputerRepairBring us your computerand we’ll fix it!

555-1234

5% 10% 20%

30% 40% 50%

60% 70% 80%

90% 100%

This is 1 color plusscreens...

mailing. The cost of full-color printing is way outside your budget,but you still want some color in the job. You can use a singlebase color, such as navy, and, using screens, get a whole rangeof blues on your postcards. Look at the examples below.

Notice thatsmallpercentagechanges don�tmake anoticeabledifference - inmost instances,artists use atleast a 20%difference tomake thechange visible

26


Add a second color, such as black, and you have even morepossibilities.

How about spot color? Spot color is just what it sounds like - aspot of color. Spot color is good for emphasizingsomething or drawing attention. Any time you seea blob of color on an otherwise single color piece,you�ll know they want you to pay attention to thatspot. You won�t have to look for it - your eye willfind it immediately!

One more thing about spot colors. They don�t haveto be placed just on clip art - they can also be usedon type to emphasize a specific word (or words). Manyheadlines are done in spot color to draw your eye and give the

You can�t discuss graphics without talking about clip art. The�Net literally has millions of pieces of clip art available - anysubject that you might want. These range from black and whitecartoons, to art with spot colors,to full color illustrations.

The trick to using clip art effectively is to look at it�s parts, ratherthan the whole. The �parts� are often more valuable than thecomplete drawing. Look at the computer above, then look backat the previous page. See anything familiar about it? It was�cropped� from the illustrations on the previous page - we�ll getinto cropping in a minute. Below are some of the different stylesof clipart.

clip art

Would spot colors morelikely be pastels orsaturated colors?

27


Photos are not really clipart, but the distinctions between photosand clipart blur on the �Net. For our purposes, we�ll combinethe two under the umbrella term of clipart just to make thingseasier.

Photos, though, can be much more difficult to work with thanclip art. You cannot easily patch them, or make changes tothem the way you can with clipart. That doesn�t mean, though,that you can�t manipulate them.

Cropping photos is an easy way to �adjust� a photo. In mostcases, the cropping is done to elininate excess �stuff� aroundthe photo. Here�s an example...

In this particular photo, I cropped it all the way around, but youcan also just crop the top, or bottom, or one side - really, anyway you like.

Cropping is done with a graphics program - such as PaintShopPro, but even if you�re just working wit Windows Paint, you cancrop photos and clipart. In most graphics programs you�ll have2 options for cropping. The first is a rectangular box tool (whichI used above). The second looks like a little lasso - it can cropto other shapes. You can see an example of that to the right.Obviously, the lasso tool is better when the background is whiteor a solid color, but this will at least show you what it does.

cropping

photos

Using the lasso almostalways requires a lot of�touch-up� to get rid ofbackgrounds!

28


Masking is another way to manipulate photos. It can completelyeliminate the backgrounds of photos. Photoshop does mask-ing in an easy to understand way. Here�s the jpg of Ben again.Using the lasso in Photoshop, I outlined what I wanted to KEEP,then I clicked the �QuickMask� button, and it gave me the firstphoto below. Everything to be masked out is in red. Using thepaintbrush, I then �painted� the mask right up to the pup. Theresult is the second photo. (Sorry, I didn�t take the time to makeit �perfect�!)

Masking can get very complex, and can take a long time to doproperly. PaintShop Pro also has masking capabilities, but doesit in a different way. I do all my masking in Photoshop - mainlybecause it�s easiest for me.

Virtually all commercial graphics programs let you work withlayers. Layers are extremely important in graphics. They notonly let you combine different elements of photos and arttogether, but they give you many more options for manipulatingthe art you�re creating. In addition, using layers gives you away to easily �back out� of errors without having to completelystart all over again. If you look at my cover tutorial, you�ll seehow I use layers in creating covers.

masking

layers

It�s very important tofind methods that youare comfortable with -every program isdifferent.

I generally put each item(graphics, type, etc.) on adifferent layer - this givesme a great deal offlexibility in changing andrearranging things.

29


Fonts are both the most important and least important part ofthe process. No, it�s not some kind of zen thing. Fonts areimportant because they actually convey what you�re trying tosay. They are the least important because if you have chosenthem properly, they will be invisible to the reader.

Invisible? Yes - your body copy fonts should guide the reader,make things easier for him or her, and not be noticeable as adesign element. If your reader stops reading because you�vemade it hard for them to continue, you�re either a lousy writer(and none of us fall into that category!) or you�ve made a badfont choice.

Type size and style are going to influence the style, tone, overallappearance, and even the length of your ebook.

Our job in this chapter is to clarify why we chooseparticular fonts for particular jobs.

You can, of course, pick a typeface simply because you like it,or because that�s where the dart landed, but type is complexand you really need to get a little bit deeper into it so yourchoice has more meaning.

There is a lot of psychology in type. It can shout or whisper, itcan be lively or sedate, it can convey your emotions, or hidethem. Typefaces can be formal or informal, casual or technical,masculine, feminine, or neutral. The sex and personality of atypeface is as impotant an element of design as the position ofheadings on a page.

Your readers will be influenced by the typeface you choose -often unconsciously influenced. Generally, speaking, the onlytime a typeface will be noticed during reading is if it is wrong -wrong sex, wrong tone, wrong style.

Correct use of type is not noticeable to the reader. It blends. Itfits. And that�s exactly what we want. It�s just not wise to use acasual typeface for a scholarly tome, or to use a very formal

using fonts

How does your type style fitwith your subject matterand layout?

What characteristics doesyour type need?

Masculine

Feminine

Informal

Technical

30


face for a book of limericks.

We have two messages to get across to the reader. The first isthe words themselves, and the second is how we want thosewords to be read. Form follows function, so let�s have a quickprimer on type.

We�re going to use a funnel technique to determine type - goingfrom the widest range of choices to the most specific, and we�llbe dealing first with body copy.

The first thing to consider is whether you should use a serif orsans serif typeface.

Serifs are the little tails on the ends of letter strokes. The vastmajority of print books are done in serif typefaces. Many expertsfeel that serif faces are easier to read because the serifs tendto guide the eye while reading and because of the variablewidth of the letter strokes. This is important because the eyenotices difference quicker than sameness.

Sans serif (which simply means �without serifs�) faces aregenerally used for short blocks of explanatory copy, or forextreme clarity. Sans serif faces have letter strokes of all thesame width. It�s often used in manuals or technical worksbecause it has a no nonsense attitude about it.

So, the first choice is - serif or sans serif?

To determine this, we have to determine the overall style of theebook. Is it casual, formal, instructive, or entertaining? Is it amanual or a novel? Masculine or feminine? Do you have longstretches of text, or short, concise paragraphs? Look at the 2sample paragraphs in the sidebar - which one appeals to youmost? Which one is easier to read onscreen?

In order to further define the serif vs sans serif decision, wecome to type families. Families consist of the main face styleand all the brothers, sisters, aunts, uncles, and cousins related

serif or sans serif?

This is a SERIFtypeface

This is a SANSSERIF typeface

In general, serif faces arefeminine, and sans seriffaces are masculine...

This is a sample paragraph done ina serif typeface. Serifs are the littletails on the end of the letterstrokes.

This is a sample paragraph donein a sans serif typeface. Sansserif faces have letter strokes thesame width.

type families

31


to it. The Helvetica family, for example is composed of Helveticalight, medium, bold, extra bold, condensed, italic, bold italic,and so on. Each of these relatives are individual fonts, andeach font is made up of letters, numbers, and other charactersin that particular face.

Visually the whole system looks like a family tree - which isexactly what it is. Helvetica medium begat Helvetica mediumcondensed. Helvetica medium condensed begat Helveticamedium condensed italic and so on.

Like it�s human counterpart, these families are of varying sizes.Some have many family members (Helvetica has a ton!) andsome have just 1 or 2 members (most script typefaces fall intothis category.)

This may be a consideration in the creation of your ebook. Ifyou choose a type family that is very small, you�re going to beforced to go outside of that family for other styles. If you want tomaintain a unified look to your ebook, you need access to relatedtypefaces - ie, a large family.

There is another consideration here since we�re dealing withan onscreen situation. Not all computers have the same fontsinstalled. If, like me, you collect fonts from various and sundrywebsites, you�ll have fonts on your machine that no one elsehas. What do you do then? How can you use all these greatfonts you�ve found?

A pdf file makes it easy. Fonts are embedded into the file whenit�s created. You can use any font on your machine and beconfident that it will show up just as you see it on the targetcomputer. Other formats may require that you include the actualfont file when you send your ebook out.

I suggest that you take one page of copy and try both sansserif and serif typefaces. You really need to see what both looklike with your own copy.

In the world of print and paper, most books use a type sizebetween 9 and 11 points. On a monitor, though, these sizesare just too small. A better starting place for screen type would

In case you�re curious, thereare literally thousands ofdifferent typefaces!

HTML makes it very difficult touse fonts - you are restricted towhat�s on the other person�scomputer. You can specify fontsubstitutions or a generic font,but unless you include the oddballfont with the file, the resultswill be less than satisfactory. Ifyou want to use an unusual font inHTML, you can create a gif orjpg image of it and insert thatimage into the HTML code whenyou want that font to show.

size

Is your type...

Masculine or Feminine?Weak or Strong? Livelyor Quiet? Formal orCasual?

32


be 11 to 14 points.

This ebook was done in 12 point type. I had to make acompromise because 13 or 14 point type would reduce theamount of copy on each page considerably and interrupt thecontinuity. Because I�m using a horizontal format, I had toconsider some additional factors including line length, leading,graphics, and illustrations as well as type size.

All type is not created equal! If you look at the samples in thesidebar, you�ll notice that the fonts all look like they�re differentsizes. Your eyes are not playing tricks on you - there is adifference in type size. That throws a new wrinkle into things,doesn�t it? (And we haven�t even talked about display typefacesyet - just wait. It gets even more confusing!)

We�re dealing with a visual medium, so the only way todetermine the right type size is visually. Luckily, it�s easy to dowith the computer. Try different type sizes until you find onethat looks good to you.

Now let�s add another variable that will change the way yourtype looks!

In the old days of typesetting, typesetters used to insert thinstrips of lead between the lines of type. So, the space betweenlines of type came to be known as leading (pronounced�ledding�). Leading is also designated in points, just like type.

Leading is absolutely critical for easy reading!

Too little and the lines run together - too much, and each line oftype looks like a separate paragraph. The trick is to find a happymedium. Doing this in print is simple - onscreen it�s a little trickier.

Look at the samples on the next 2 pages. I�m putting them onseparate pages so you can see all of each style at one time.

9 point type

10 point type

11point type

12 point type

13 point type14 point type

9 point type

10 point type

11point type12 point type13 point type14 point type

9 point type10 point type11point type12 point type13 point type14 point type

9 point type10 point type11point type12 point type13 point type14 point type

You�re reading thisin Adobe AcrobatReader. Look downin the lower leftcorner in the bar.What percentagedoes it say you�relooking at? Adobeadjusts the ebookpage size to yourscreen. This meansthe size you specifymay not be the sizethe reader sees!Just anotherwrinkle thrown in!

I write and design usingPagemaker, so thedefaults used in thesesamples are Pagemakerdefaults. Other layout anddesign programs maydiffer.

leading

33


This is 12 point Arial set at the default leading of 14.4 points.I�m going to add some additonal copy in here so you can seewhat it looks like as a block of text. Let�s add a couple of morelines of text so you have a good idea. I�m going to add someadditonal copy in here so you can see what it looks like

This is 12 point Arial set at a leading of 15 points. I�m going toadd some additonal copy in here so you can see what it lookslike as a block of text. Let�s add a couple of more lines of textso you have a good idea. I�m going to add some additonal copyin here so you can see what it looks like as a block

This is 12 point Arial set at a leading of 16 points. I�m going toadd some additonal copy in here so you can see what it lookslike as a block of text. Let�s add a couple of more lines of textso you have a good idea. I�m going to add some additonal copyin here so you can see what it looks like as a block

This is 12 point Arial set at a leading of 17 points. I�m going to

add some additonal copy in here so you can see what it looks

like as a block of text. Let�s add a couple of more lines of text

so you have a good idea. I�m going to add some additonal copy

in here so you can see what it looks like as a block











Too tight!

Acceptable

Best!

Acceptable

A little too loose!

Way too loose!

Now let�s look at the serif faces

34


This is 12 point Times New Roman set at the default leading of 14.4points. I�m going to add some additonal copy in here so you can seewhat it looks like as a block of text. Let�s add a couple of more lines oftext so you have a good idea. I�m going to add some additonal copy inhere so you can see what it looks like

This is 12 point Times New Roman set at a leading of 15 points. I�mgoing to add some additonal copy in here so you can see what it lookslike as a block of text. Let�s add a couple of more lines of text so youhave a good idea. I�m going to add some additonal copy in here so youcan see what it looks like as a block

This is 12 point Times New Roman set at a leading of 16 points. I�mgoing to add some additonal copy in here so you can see what it lookslike as a block of text. Let�s add a couple of more lines of text so youhave a good idea. I�m going to add some additonal copy in here so youcan see what it looks like as a block

This is 12 point Times New Roman set at a leading of 17 points. I�m

going to add some additonal copy in here so you can see what it looks

like as a block of text. Let�s add a couple of more lines of text so you

have a good idea. I�m going to add some additonal copy in here so you

can see what it looks like as a block











Which of these do youprefer?

Notice that, in general,serif faces look smallerthan a sans serif face ofthe same size.

How will that affect theleading range that might beacceptable?

It�s vitally important toremember that this is avisual medium.

Unless you actually SEE it,you really can�t tell if it�sgoing to work or not!

35


Did you notice that there was a �range� of acceptable leadingin those samples? That range was determined by simply lookingat the samples in layout mode in Pagemaker. The final decisionof 16 point leading was made after looking at actual copysamples of all of them in Acrobat, the program that would createthe final pdf file.

Color can enhance the effect of your type tremendously. Yourpersonality can come into play here, so use color in any wayyou like. If you check through this ebook, I�ve used it in numerousways. I�ve used colors to emphasize points, to designate areaswithin sections, to make sure my sidebar comments wouldn�tget confused with the text, for headlines and sub-heads, forrules, and so on.

Color attracts the eye, and breaks up long stretches of blackand white. It helps keep the reader interested. Just rememberto coordinate your color choices with the overall tone of yourebook. A very strong masculine typeface should probably notbe colored pink, but, hey, it�s your ebook, and if it fits with therest of your design scheme, why not?

Display faces are unique typefaces that should be usedsomewhat sparingly in your ebook.

They are usually used in ad copy, but there�s no reason whyyou can�t use them for headlines. Display faces, though, arenot really designed for sentences.

They work better as short headlines - things that you want toemphasize.

Script faces are those that look like handwriting. Never, never,never use scripts in all caps! It not only looks amateur andawful, it�s impossible to read. The sidebar has some examplesof script and display faces.

Pink?

color

script and display faces

36


You have a wide variety of fonts available to you. The key togood font choice is appropriateness. Ask yourself �Is thistypeface appropriate to what I want to do?� If the answer is�Yes!� - go for it.

Don�t fall in love with a typeface and try to force it into everysituation. The type must fit the purpose, tone, and function ofthe ebook or you�ll lose your reader.

This is a script face

This is a script face

This is a script faceNEVER FORMATNEVER FORMATNEVER FORMATNEVER FORMATNEVER FORMAT

SCRIPT FACES INSCRIPT FACES INSCRIPT FACES INSCRIPT FACES INSCRIPT FACES INALL CAPSALL CAPSALL CAPSALL CAPSALL CAPS

Display Face

Display Face

Display Face

Display Face

Display Face

37


Now weíre getting down to the nitty-gritty - designingtheebook.

Did you ever wonder why all the books produced by big citypublishers all look pretty much the same? Why novels all seemto have the same format? Why there are no illustrations in them?Why non-fiction books are badly illustrated and never seem tohave any style to them?

It all comes down to one thing. Cost. If you were to try to publishfifty or one hundred books, you�d probably start standardizingthem, too. You�d limit your type styles and sizes to just a few.You�d maintain the same margins top, bottom, right, and left forall your books. You�d standardize the number of pages as muchas possible to stay within press requirements, and you�d usethe same page sizes all the time for the same reason. And allyour books would look like everyone else�s.

Boring? You bet.

But, as a self-publisher � particularly a web publisher, you havejust this one ebook to be concerned with right now. You haveone ebook to concentrate on and create exactly the way youwant it.

This is your big chance to let your personality come through,so please don�t settle for an ebook that looks like every otherebook on the web!

People new to publishing think there is a certain way to dothings. They think that pages should be in a certain order, andthat there�s a secret formula to doing this. They are scared todeath of doing something wrong.

Folks, the secret is - there is no secret formula!

design your ebook

Design is not a suddenbolt of lightning out ofthe blue. It�s trial anderror, experimentation,and playing with aproject until it looksright. It�s nothing morethan trying everythingand then narrowing downthe choices. Trust yourinstincts.

Most design principlesare not dependent onthe type of programused to create theebook, but HTML has acouple of exceptions.

38


You are free to design your ebook any way you want. Let merepeat that so you don�t forget it.

Design your ebook ANY WAY YOU WANT!

You can get exactly the look you want, use multimedia, coloredtype, graphics, whatever you desire. The key is to use all thesegreat resources intelligently. Don�t use multimedia, for example,just because you can. Use it to demonstrate something, orexplain what you�re saying.

Use resources to enhance the value of your ebook. An ebookcan simply describe something, or it can use various resourcesto make the reading more interesting � it�s all up to you. If Iwere doing an ebook on exercises, for example, I wouldprobably want to include either some graphics or maybe a shortvideo demonstrating the techniques. These things wouldenhance the ebook and make the ebook more valuable to thereader.

You can make your ebook any size you want, or use greentype if that turns you on.

You can make it as simple or as elaborate as you like. You canproduce an illustrated novel, or an ebook of poetry with musicplaying in the background.

You can produce a kid�s ebook that uses links to send them allover the web on a treasure hunt.

You are limited only by your imagination!

Now daydream a little. Think about your subject matter. Pictureyour ebook in your mind. Look at the size and shape of it. Lookat the pages. Create the image. Got it? Good.

Now letís translate that image into reality!

Designers love theirjobs - thnk it hasanything to do with thefact that they get toplay all day?

You�re notrestricted to avertical formateither. This ebookhas also been setup in a horizontalformat.

39


When we talk about layout, we�re talking about how the pagewill look to the reader. We need to determine a number of thingsin this section � margins, headers, footers, body copy, chapterstart pages, headline copy, subheads, and rogue pages. We�realso going to revisit page size, but this time in a more genericway. Lots to do, so we�d better get started!

First, though, pick up any hardcover or paperback book thatyou have handy � it�ll help you see what these terms all mean.

An HTML designer may be restricted by screen size. A graphicdesigner who is preparing a job for print is restricted by therequirements of the press that will be used to print the job.Different presses have different paper size requirements, andin order to prevent a lot of waste a designer has to stay withincertain limits. In printing waste = additional cost.

Waste is not the only concern, though. Print designers mustalso be concerned with how the final product is going to beused. Whether it�s mailed, printed in a newspaper, distributedas a brochure, or any of a dozen other things can all affect thedesign and layout.

If a professional graphic designer has been given free rein ona project, he or she will often start out with a �tentative� pagesize. In other words, a page size is initially chosen to workwith, but may not be the final size used. There can be a lot ofexperimenting with type sizes, margins, and all the othercomponents we�re talking about here before the page size isfinally settled.

For the most part, these are all items that the electronic publisherdoes not have to be overly concerned with, but we do need tobe aware of some basic printing principles.

layout and your ebook

page size

Choose a page sizethat works for yourproject. Create asample page invarious sizes andcompare them. Lookat your margins, copyand readability onthe screen.

40


Check your printer setup dialog, and you�ll see some standardpage sizes listed.

In addition to those sizes, there are a few others that are notlisted in the standard print dialog. A common size for books is6 x 9 inches, but others may be 5.5 x 8.5 inches.

Paperbacks are fairly well standardized at about 4.25 x 6.75inches. A common size for textbooks is 10.25 x 8 inches.

If you look at your bookcase, though, you�ll notice that not verymany of your books line up with perfectly even top edges.

If there are few standard page sizes for print books, ebookshave even fewer! It�s safe to say that you may use any sizepage you like. I�m going to try to help you narrow down thatdecision.

The standard page sizes are good places to start, and willensure that your ebook prints out properly for those page sizes.

That doesnít mean you have to use them, though.

Adobe (maker of Acrobat) recommends 6 by 9 as a standardsize for ebooks. Think about this for a moment. What size isstandard typing paper? 8.5 by 11, right? 6 by 9 will certainly fita sheet of typing paper, but you�ll have a lot of waste on eachpage - particularly since using a 6 by 9 size will increase thelength of your ebook.

Now this may not mean anything to you as the publisher - but itcertainly might if you�re the reader and want to print the ebookout!

Page size affects not only the look of the ebook, but also thelength.

By using a small page size, an ebook publisher can stretch hisebook length by many pages.

Conversely, he can reduce the number of pages by using alarger page size.

Letter = 8.5 x 11 inches

Legal = 8.5 x 14 inches

Executive = 7.25 x 10.5 inches

Folio = 8.5 x 13 inches

A4 = 210 x 297 mm (8.4 x 11.88 inches)

A5 = 148 x 210 mm (5.92 x 8.4 inches)

B4 = 257 x 364 mm (10.28 x 14.56 inches)

B5 = 182 x 257 mm (7.28 x 10.28 inches)

This should point outthat �standards� arereally just�suggestions!�

Page orientation alsoaffects the number ofpages - horizontalebooks will almostalways have more pagesthan the verticalversion!

41


Page size applies primarily to PDF formatted ebooks. In theseyou will be using an actual page size. HTML compiled ebooks,on the other hand, are subject to no restrictions in page size.They can be any width, and any length you prefer.

Consider white space to be a design element.

It requires the same consideration as other parts of the designof your ebook. Here�s a little graphic artist�s trick. Look at yoursample book again. Now, unfocus your eyes if you can. (If youwear glasses, just take them off, you�ll get the same effect.)With your eyes unfocused, you can see what effect the whitespace has on the body copy and overall look of the page.

Too much white space, and the body copy looks sparse, toolittle and it looks cramped. The trick is to find a happy medium.

Paragraph style is also a part of white space design.

Think about the paragraphs in your ebook. Are they long andtechnical, or short and emphatic? If you leave space betweenparagraphs, does the extra white space overwhelm the page?It may if you use short paragraphs.

If your paragraphs are long, does it look like there�s just �toomuch� on the page? Decisions about white space don�t followany rules, it�s just a matter of what looks best to you.

Many of the fixes for these problems can be found in the marginsyou use for the page. The default margins in many programsare adequate for most work, but often not ideal.

If your body copy seems sparse, you have a couple of choices.

! The first thing you can do is reduce the amount of spacebetween paragraphs. Maybe a setting of 1 and a halflines is better spacing for your ebook than double-spacing between paragraphs.

! You can also reduce the leading (leading is the spacebetween lines of type) from the default. The default

white space

An easy way to unfocusyour eyes is to squint.You want the type tolook blurry so you�renot distracted bywords or letters.

Margins do not have to beeven all the way around.With 4 sides to workwith, you can have adifferent margin on eachof them. This ebook has 4uneven margins!

Changing themargins on aproject is theequivalent ofchanging the linelength.

42


leading is usually 1.5 points more than the type size.You can reduce the default leading to just 1 point morethan the point size. (We�ll be getting into more detailabout type sizes and leading shortly. I�m just mentioninghere as an option.)

! If you make the type size larger, it will help the copyfill the space.

! You can also change the margins. By making the marginswider, it reduces the space the body copy has to fit intoand makes it look tighter.

! The final choice you have is to make the pages smaller.

If your body copy seems cramped, you can use the same listas the above, but in reverse.

! Increase the amount of space between paragraphs.

! Break up your paragraphs to make them smaller.

! Increase the leading between lines.

! Make the type size smaller.

! Make the margins narrower.

! Make the page size larger.

What you�re actually looking for in doing this is balance. Themore balance there is between copy and white space, the betterthe ebook will look.

Experiment and find the tentative page size for your ebook.

Open your sample book somewhere in the middle. Now look atthe very top of the two facing pages. You will probably see thename of the book or chapter, or even the author�s name. Youmay also see page numbers here.

43


These lines, which are always above, separated from the bodycopy, and in a different size or typeface, are the headers.

Headers are optional in an ebook, but more important if you�repreparing a book for print. If you will be offering a printed copyof your ebook, you will probably want to include headers. Theywill give your printed copies a more finished look.

In a book that will be entirely electronic, though, you may findthat headers are distracting for the reader. This is particularlytrue in PDF files. Since the pages in a PDF formatted ebookscroll down, it can interrupt a reader when headers pop inbetween pages. Here are some sample ways to handle headers.

If you�re feeling really brave and daring, you can even createsomething unique rather than a standard header or footer, suchas the previous, or one like what I use in this ebook.

Notice that we did not consider headers in our page size

headers

These are examples ofsome pretty standardheaders and placement.

Although theseexamples show theconventionalcomponents ofheaders, you can useheaders to containany information youlike. Maybe you wanteach page to have adifferent quotation,or maybe a new tip.

44


Theseexamples aremore unusualheadertreatments

45


Headers can beused to hold anyinformation youlike. They can alsobe eliminated if youdon�t want to usethem at all!

46


determinations. This is because headers will invariably improve pageappearance unless you�ve chosen a page size that is far too small.

If headers are positioned at the top of the page, it stands to reason thatfooters are positioned at the bottom of the page. Footers rarely containmore than just the page number, but there�s no reason they couldn�t containmore. As in headers, you want to consider how the ebook is being read,and try to keep your footers unobtrusive. Most PDF ebooks have a singlepage number as the footer, usually in the lower right hand corner where it�sout of the way.

Footers can be formatted in the same way as headers.

footers

47


Body copy is the meat of your ebook.

It�s the way you present your words to the reader, so the goal isto make it readable. The body copy in your ebook does nothave to be fancy, but it does have to be able to guide the reader�seye and make his or her reading easy and enjoyable.

We�re going to do that with a combination of layout and fonts.

Basic body copy layout is a single column of type per pagewith indented paragraphs. The lines are justified � which meansthey are stretched to fill the space between margins. Prettyboring, but it�s what people are used to.

Making simple changes � such as eliminating the paragraphindent and adding space between paragraphs � can makereading a better experience.

body copy

Justified copy

Flush Left Flush Right

body copy layout

The three majorlayout styles -justified, flush left,and flush right.

They all haveadvantages anddisadvantages.

48


We start out withplain justifiedcopy

What if we separateimportant points andcolor them as well?

That�s a bit better - let�s try something else.

Let�s see what happens when weuse a colored type for the firstline of each major paragraph.

49


Check the list of questions in the back of this ebook. That�s allwe�re doing here! We�re just making minor changes and viewing

Let�s try somethingdifferent. Let�s let ourheadlines �hang� with thebody copy indented. (This isjustified copy)

I kinda like this one, but let�s go on...

Let�s try using a largertypeface for theheadlines

One more try. Let�s makethe lines flush left. (Thismeans they will not beforced to fill the entireline.)

And, this is how you design!

The �questions� areat the end of thisebook!

50


the results.

Now, no one expects a non-artist to be able to visualize all thisin their head. I suggest you take one page of your copy -complete with a headline - and just play with it. Try variouspositions, spacing, and margins. See what each looks like, andcome up with a tentative layout for your pages.

Headlines are important organizers for your ebook. There are3-4 headline types that we need to look at.

Chapter Start Headlines (Chapter Titles)These are the most important and consequently should be thelargest and most noticeable.

Subject HeadlinesThese are any major subdivisions in your copy. They tell thereader that this is an important section within the chapter.

Sub-headsThese further divide the major sections of your chapter.

Sub-sub-headsDon�t go any deeper than this! This may even be too much,depending on your ebook. If you feel you need to divide yourchapter even further, it may be time to rethink the chapter, or atleast the sub-heads! I believe that any chapter that has to havemore than 3-4 divisions should either be divided into 2 chapters,or the writer should be a little less compulsive about splittingthings up. Every little detail does not need its own sub-head.With a little thought, and maybe a bit of creative thinking, youshould be able to combine sub-sub-heads into a subhead topic.

Now, how are we going to handle these? Very simply. We�regoing to create a pattern. The pattern will consist of a size,style, and position for each headline type. The key to a patternis consistency, so the styles will be maintained throughout the

patterns

Some ebooks mayhave many sub-sub-sub-subdivisions.It�s not wrong, butit may confuse thereader.

headlines

51


ebook. I�m going to make it extremely simple for you to getstarted.

We�re going to use the body copy type size as our base. Don�tpanic! I know we haven�t even talked about type and fonts, andthat we don�t have a body copy type size yet. We don�t needone right now.

Remember I said we were going to create a pattern. If we use apattern, it will hold true no matter what our body copy type sizeends up.

Do you remember solving pattern problems in school? You knowthe ones - the teacher would say something like �1, 4, 7, 10, 13.Find the pattern.� This one�s simple, but sometimes we�d haveto practically turn ourselves inside out to solve them. (Don�tworry - we�re sticking with simple!)

So, what makes a headline stand out? One word - contrast.

There must be contrast with the body copy. This contrast canbe in the form of size, shape, weight, color, or any combination.

Let�s start with size, and we�ll go from smallest to largest.

Type size is designated in points with 72 points to an inch. Asyou can see, 1 point difference in size is not going to be verynoticeable. Matter of fact, most people couldn�t tell the differencebetween two type faces that vary by only 1 point in size.

Our first number then will be a minimum of +2 points largerthan body copy size.

Our maximum type size should fall between 8 and 10 pointslarger than our body copy size. This makes our maxium +10,and our overall range +2 to +10.

Got it? OK, let�s go on.

Our brains like patterns,and will try very hard tocomplete what it sees as anunfinished pattern.

A break in an otherwiseconsistent pattern can beused in a couple of ways -both positive and negative.

On the positive side, sincethe brain will immediatelynotice it, it can be used foremphasis - to makesomething stand out.

On the negative side, abreak in the pattern can jarthe reader and break theirtrain of thought.

Type sizes range from thevery small....

This is 6pt type

to the very large...

72 ptand even bigger!

size

52


Now all we have to do is determine how many heading levelswe have. Let�s say we have the following setup.

Level 1 - Our chapter heading/titleLevel 2 - Subject headingsLevel 3 - Sub-headsLevel 4 - Sub-sub-headsLevel 5 - Body copy

We�re going to start from the bottom, and since there are 4levels above our body copy, divide 4 into 10 (our max), and weget 2 and a half. We�ll just drop the half for convenience, anduse 2 as our pattern.

Level 1 - body copy + 8 (min) to10 (max)Level 2 - body copy + 6Level 3- body copy + 4Level 4 - body copy +2Level 5 - body copy size

Want to try another? Let�s say we have the following setup.

Level 1 - Our chapter heading/titleLevel 2 - Subject headingsLevel 3 - Sub-headsLevel 4 - Body copy

This time we have 3 levels above our body copy. Divide 3 into10, round off to 3 and use that as our pattern.

Level 1 - body copy + 9 (min) to10 (max)Level 2 - body copy + 6Level 3- body copy + 3Level 4 - body copy size

One last example. In this one, we�re only going to use 2 levelsabove the body copy size. Using our maximum numbers, thisgives us a pattern of 4-5 points above body copy size.

Level 1 - Our chapter heading/titleLevel 2 - Subject headings

Patterns help youremember �what goeswhere and how�

Pattern 1

Chapter Head (1)

Subject Heading (2)Sub-heading (3)

Sub-sub heading (4)

Body Copy (5)

Pattern 2

Chapter Head (1)Subject Heading (2)Sub-heading (3)

Body Copy (4)

Here�s what they look like

NOTE! Alwaysdetermine your bodycopy size FIRST!

53


Level 3 - Body copy

Level 1 - body copy + 10Level 2- body copy + 5Level 3 - body copy size

Keep in mind, these numbers are just suggestions. They arenot carved in stone.

The point is to create some kind of pattern that makes senseto you for your heading levels.

Now we have a relative size to work with and we can add morecontrasts if we like. We can make the headings bold, colorthem, use a different typeface, make them all caps, or whateverelse we�d like to make them stand out.

Adding these additional contrasts constitutes the style aspectof our pattern.

Style is anything that is not size or position. Yeah, right -so what is it?

Style is the actual typeface you use. Are you going to use thesame one as the body copy? Bold? Italic? Bold Italic?

Or, would you prefer using a contrasting style of type - somethingvery different from your body copy?

Style can also be the colors you choose to use for each of theheading levels.

Do you like contrasting colors, or complimentary colors? Doyou like things that match, or that purposely look different?

Colors look very different with different weights of type. Darkcolors can be used with any weight, but light colors should onlybe used with heavy weight (bold or extra bold) type.

Pattern 3

Chapter Head (1)Subject Heading (2)Body Copy (3)

Regular HeadingBold Heading

Italic Heading

Bold Italic Heading

How about a verylight face heading?

Or maybe a scriptheading?Do you like thecasual look?

Text

style and position

54


Style can be the addition of other graphic elements. This wouldinclude rules (lines), dots, boxes, graphics, pictures, bordersand frames. In this ebook, I use 2 different types of lines todistinguish between subject headings and sub-heads, and atotally different type of line for chapter headings. It could alsoinclude color bars behind the type. Lots of possibilities here.

Position refers to how the type is positioned relative to the pageand any other graphic elements. Headings should be positionedin such a way as to make them stand out.

Below there are some samples of how contrast in headlinescan change the overall appearance of your ebook.

Try various combinations of headlines and body copy to findone that not only works with your ebook, but that also pleasesyou.

layout

layoutlayoutlayoutlayoutlayoutThis sample is the current way I�m handling headlines andbody copy. The headline is an extra-bold version of the bodycopy. Contrast is in weight.

layout

This sample uses a script face for the headline. The contrastis in the shape of the script letters and the weight of the type.

This is another example of weight, but this time light ratherthan heavy.

layoutThe contrast in this example is in the style. We�re using sansserif for this body copy, and a serif face for the headline.

These are samples of how a simple change in the heading can change the tone of an ebook.

Don�t be afraid to combine styles in a single headline

55


Let�s talk for a minute about layouts and grids. When design was all done by hand, I used to use onlygrids for layouts, but now I use the layout functions in Pagemaker. Using layout software makesmaking changes a snap, and allows the time needed to play with designs and layouts beforecommitting to a particular layout. The next few pages show some possible layout styles and thelayout used to create this ebook.

These are just a few possible layout styles - there are many more...

Single column -single block

Single column -single blockwide leftmargin to allowfor punch or????

Single column -single blockwide rightmargin to allowfor ????

Double column -equal bothsides

Double column -unequal. Usuallywould be twoseparatestories

Double column -unequal. Usuallywould be twoseparatestories

Double column -multiple block

Single column -multiple block

56


These are the guides I used to create this ebook...

chapter title

Publishing a book is no more than a dream for most people.How many writers have good manuscripts tucked away at thebottom of a drawer because they can't (or won't) market them?How many others have dutifully sent off their manuscripts to 10or 20 or 50 publishers with nothing more to show for it than astack of rejection slips? There are many, many manuscriptsout

sub-head

Type Specs -

Chapter title -22 pt Arial Black and AvantGarde -flush right

Sub-head -16 pt Arial Black-flush right

Sub-sub-head -14 pt Arial Black-flush right

Body copy -12 pt Arial - justifiedno hyphenation

sub-sub-head

57


Chances are you�ve never heard of rogue pages before.

I wouldn�t expect you to know the term - it�s one I created torefer to all the pages that are not normal body copy pages.

In other words, this refers to copyright pages, Table of Contentspages, acknowledgements, title pages, dedications, indexes,and chapter start pages.

Each of these pages requires special treatment. They�re notgoing to look like body copy pages - each will be unique, andwe have to know how to handle them. They�re a part of thebook, too, and must be consistent with your style.

You may not want to use any of the above pages. Then again,you may want to use all of them. They do not have to be stand-alone pages. You can combine them. For example, yourcopyright notice may be at the bottom of your title page, or theacknowledgements and dedication may share a page.

This is another place where people think there�s a specific orderfor pages. Let me assure you. There is not a specidfic order -you may order your pages any way you like. Some peoplewon�t believe me, though, and will want guidelines. Look in theside column for a suggested listing.

Now let�s deal with some specific pages. We�ll just start at thecover.

Ebooks almost always have some kind of cover design for thefirst page.

It�s usually either text or a reproduction of their ebook coverdesign, and here I�m refering to those little ebook images thatare posted on websites. (There�s a sample of mine on the nextpage.) The image used on the ebook was also used as my

cover page

rogue pages

Here�s a suggested setup, but feelfree to change it if you like!

Cover pageTitle page (w/publisher info)Copyright pageAcknowledgements pageDedication pageTable of ContentsIntroductionBody of bookGlossaryIndex

This is really the�title� page

58


cover for this ebook.

Where do you get them? Well, there are a few people on theweb who are creating ebook covers for a fee. These fees rangefrom $25 - $100. Or, you can create them yourself usingPhotoShop, PaintShop Pro, Canvas, QuarkXPress, orPhotoImpact.

Want to know how I created mine? First, I copied a number ofebook covers from sites on the web. Using those as a model, Ithen used PhotoShop to create the base ebook in black, andthe shadow. I then added each element as a different layer -mainly so I could play with them without having to re-doeverything from scratch if I didn�t like what I was getting! Forexample - for the purple gradient background, I used the Selecttool to make a box the height and width of the ebook. I thenadded the gradient to the selected box and using the Skewcommand, I fit the gradient to the angle of the ebook. Samething with the type and illustration. The layer holding the typewas given a drop shadow, and the caveman was given atransparent background by using a mask. Once I got the hangof it, it wasn�t at all difficult. I also created a flat front view coverto use for this ebook.

You will probably need an ebook illustration if you plan to sellyour ebook. Covers tend to increase sales, and make the ebookless of an idea, and more of a product. Whether you do ityourself, or hire someone to create one for you, this should behigh on your list of priorities.

I think it would be overkill to have a cover and a title page. Titlepages consist of the title, any subtitle you may have, the author�sname, and at the bottom of the page, the publisher�s name andcity.

Always, always, always add a copyright slug to your ebook. Itdoesn�t have to be any more complex than just �Copyright (year)by (name), (city)�. But be sure to add at least that. If you want

Software packageand ebook cover

title page

Just add a link to your website andinclude your email address on anyof these front matter pages.

copyright

copyright 2002 by Neil G. Tarvin,Tulsa OK USA

59


something a little more specific, you can read the copyrightnotices in any of your books, find one that says what you want,and copy it.

Acknowledgements are nothing more than �thank you�s� topeople who have, in some form or fashion, helped you createthe ebook. In print books, these are usually people who havecontributed information to the project through research orprevious writings. In an ebook, you could acknowledge helpfulsites, forums, newsgroups, or ezines. These folks wouldcertainly appreciate being noticed and acknowledged in yourebook!

Dedication pages are usually reserved for someone (or,someones) the author feels particularly close to. Wife, husband,friend, lover, child, whoever. If you wish to use a dedication itshould be addressed to that person.

The introduction is where the author may explain about thebook, make comments, or even just chat a bit about how andwhy the book was written. Introductions can also be the lead-in the the book itself, with background material needed tounderstand the book�s contents.

This is virtually a �must� for non-fiction ebooks. I like the formatwhere each chapter is described, and not just listed with a pagenumber. I also like the Table of Contents to be linked to eachchapter or subject heading. Keep in mind, though, that not allebooks are designed for �jumping around� - some should beread straight through without detours. Determine the type ofTable of Contents that will work best for your particular ebook.

Chapter start pages are exactly what they say they are - pages

Always include a link inacknowledgements if atall possible!

dedication

table of contents

chapter start (and end) pages

introduction

Write your introduction last,otherwise you�ll constantly betrying to fit the content to theintro!

acknowledgements

60


that start a chapter. In print books, these pages have someunique characteristics.

! They are almost always positioned on right-hand pages.

! They rarely have headers on the page, but they do have footers.

! They seldom start at the top of the page, but 1/3 to 1/2 the way down.

You can use these standards in an ebook, but there�s no rulethat says you have to follow print standards. Use whatever looksbest to you and that suits your ebook style and content. Inprint, I like a book that follows these standards. It�s clean looking,and easily distinguished from the rest of the copy.

In an html or pdf ebook, though, you have a screen size to dealwith, and print standards don�t work out quite so well.

An html ebook has a specific amount of real estate that showson the screen, and it just doesn�t look very good when a pagestarts halfway down!

A pdf ebook is like a roll of paper towels - one long continuousstrip. You could start a chapter halfway down the page, butwhat happens if the previous chapter ends with just a few lineson the page? The reader has a long blank area to get throughbefore reaching the next chapter start.

The solution is to add a few extra lines at the top of a pdf ebookchapter start page, have a distinct way of indicating it�s a chapterstart page, and perhaps adding some specific graphic to helpdistinguish it.

Another influence is how the reader is navigating the pdf ebook.He or she has a number of choices, and you won�t know whichone he or she will choose to use. So, we have to find a happymedium - something that will work no matter which navigationmethod might be used.

If you�re using a standard 8.5� by 11� page size, when the readerclicks to change pages only about half of the page will show on

A specific graphic? Perhapsthe ebook�s logo, or a graphiccreated specifically for thispurpose.

I use the �Continuous�method when reading pdffiles. Long blank areas areannoying.

61


the screen. There�s our first clue - we�re going to have to keepour chapter headings in the top one-third of the page to besure it�s fully visible when the reader changes pages.

Tied in with this is how you�ll end each chapter. Conventionally,you�d simply end a chapter and start the next chapter on thenext page. This is the simplest way to do it, but then we�veprobably got a ton of extra space at the end of each chapter.

Why not put that space to use? You could sell ads to fill openspace like this, or you could use it to promote your own websiteor other products. You could use it as a directory of sorts to listany relevant links, software, websites, newsgroups, or emaillists that apply to the chapter. How about just including someillustrations, or interesting quotes, or even a quiz?

The glossary is a kind of dictionary which is included to explainwords and phrases within the ebook which might be unfamiliarto the reader. Glossaries are often used to make sure everyone- reader and writer - are interpreting words in the same way.

The index is used to give readers locations where specifc wordscan be found within the ebook. Indexes can be very difficult toset up unless using good indexing software.

Although I�ve given you a number of possible rogue pages,there can be others - a foreword or preface, or an appendix,for example. If you have additional rogue pages, just think aboutwhere they would logically fall in the organization of your ebook.

Rogue pages do not have to look identical to your body copy,but they should maintain a sense of continuity. Earlier we talkedabout heading styles. If you noticed, we are using that as oneof our rogue pages - the chapter start page.

Your chapter start page style will always give you a base to

index

design and rogue pages

glossary

62


work from in designing your other rogue pages. Carry theelements (or some of them) onto the other pages and yourdesign is automatically tied to the body copy. This ebook is agood example of that. If you look back to the Table of Contents,copyright and Introduction pages, you�ll see that I used mychapter start headings as headings on those pages as well.

I could have reversed the colors, or even changed them for therogue pages, and that continuity would still be there.

Study your chapter start page - itís the key to continuity!

Don�t want everything to look the same? Then change it. Changethe position or the color. Make them mirror images, if you like.(Look at the images below.)

Don�t be afraid to play with your layouts - and if you get stuck,use the list of creativity questions to kickstart your brain!

Remember that style is a combination of four things - size,position, color, and consistency!

You can incorporate otheraspects of the design aswell - I also used the bodycopy placement and thecomments column as tie-ins,and all pages have thelavender bar down theright side.

This is the current layout for thisebook.

The two at the bottom aredifferent treatments of the sameelements. As long as the elementsare the same the pages will worktogether!

The �questions� can befound at the end ofthis ebook!

63


Current layout again...

Colors switched between headand line underneath it...still fits!

64


Well, we�ve reached the end of this ebook.

This ebook was written not so much to give you specifictechniques, but to help you expand your thinking, become morecreative, and give you a starting point.

Hopefully, I�ve done that.

Now itís up to you - isnít it time to get started on thatnext project?

Donít hesitate to contact me if I can be of help...

[email protected]://www.ebookgraphics.com

the end of the road

The next few pagescontain �the questions� -these will help spur yourcreativity.

mailto:[email protected]

http://www.ebookgraphics.com

65


When trying to come up with creative solutions ask yourselfthe following questions:

How can you...

(1) Modify it?...add...duplicate...multiply �divide...exaggerate

(2) Minimize?...subtract...reduce in size...condense...omit�lower�shorten

�lighten

(3) Substitute?...other processes, material, ingredients...other place...other time

(4) Rearrange?...interchange components...other sequence...other patterns...other person

(5) Reverse?...transpose positive and negative...opposites...backwards...upside down

the questions

66


(6) Combine?...uses...purposes...ideas...approaches

(7) Change Patterns? ...in shape...in number of items ...in color ...in type ...in size...in position

8. Put to other uses...new ways...new uses

OK, now what? We�ve got this list of questions, and not theslightest idea of how to use them. The list is simply to help youthink more creatively.

Let me show you how it works.

At the top of the pages in most print books, there is a line oftype which usually has the book�s title or author�s name. Thisis called a �header�. You�ve decided you want a header in yourebook, but the standard is just plain boring.

What can you do?

What changes can we make to it? Well, the basic changes wecan make are size, shape, position, or typeface. Let�s just pickone of those to work with - how about �position?�

Ask yourself - how can we MODIFY the header�s position? Canwe SUBSTITUTE? Can we REARRANGE? Can we REVERSEor COMBINE it?

The biggest barrier to good design is trying to stick withstandards or conventional use. Throw those ideas out!

67


The thrust of design is to challenge conventions and standards.Ask the questions, come up with some possibilities, and trythem out. See how they work. And, then ask more questions.

Maybe after asking these questions we decide that there�s noreason why headers have to be at the top of the page.

Maybe some other location would be better - after all, there are4 margins on each page. Think about it.

Want to create a quickand easy slogan?

Here�s an easy way tocreate a slogan. Just list allthe words you can think ofthat refer to a particularsubject. Single words only �and feel free to use athesaurus. Once you�vecompleted your list,randomly choose any 2 or 3.Add �the�, �it�, �and� �in�,�with� and other small�connector� words asneeded. Just see what youcan come up with. Play withit a little. Instant slogan!

fibut i™m not an artistfl - rajeun.net › PDF › ebookdesign.pdf · 5 the fibut i™m not an...

Documents

Transcript of fibut i™m not an artistfl - rajeun.net › PDF › ebookdesign.pdf · 5 the fibut i™m not an...