keynote for web page banners

8/10/2019 Keynote for Web Page Banners

1/59

Teacher Helping Teacher Integrate Technology

Alex Reyes : [email protected]: http://it2.yisd.net
mailto:[email protected]:[email protected]


2/59

............................................Create Web Banners with Keynote 9...........................................................................Select a Template 9

............................................................................A Basic Template 9........................................................................Modify Dimensions 10

.........................................................................Keynote Inspector 10......................................................................Document Inspector 11

.........................................................................Custom Slide Size 11....................................................................Custom Size Dialogue 12

.....................................................................Banner Size Settings 13...............................................................................Blank Banner 14

............................................................Create a Solid Background 15.........................................................................Select and Delete 15

............................................................................A Blank Canvas 16..............................................................................Rectangle Tool 17

........................................................................Default Shape Size 17...........................................................................Move and Resize 18

.........................................................................................Resize 19

..........................................................................Metrics Inspector 19....................................................................New Size and Position 20.............................................Fill Options with the Graphic Inspector 21

..........................................................................Color Fill Options 21................................................................................Default Color 22

...........................................................................Change Color Fill 23..............................................................................Select A Color 24

.....................................................................Change Border Style 24.........................................................................Position Fill Shape 25

..................................................................Lock Background Color 26.........................................................................A Locked Element 27........................................................................Unlock an Element 27

......................................................Create a Gradient Background 29............................................................................A Blank Canvas 29...........................................................................Rectangle Shape 30

..............................................................................Default Shape 30............................................................................Move the Shape 31

.........................................................................................Resize 32.........................................................................Graphic Inspector 32

..........................................................................Image Fill Option 33...........................................................................Default Gradient 34

.................................................................Change Gradient Colors 35.............................................................................Color Live View 35

...................................................................Bottom Gradient Color 36

...............................................................................Color Choices 37.............................................................................Remove Border 37

...........................................................Resize and Position Gradient 38...............................................................................Lock Gradient 39

..............................................................Add Pictures from iPhoto 40..........................................................................................Media 40

........................................................................Photos from iPhoto 41..................................................................Drag and Drop Images 41


3/59

...............................................................................Large Images 42.....................................................................Proportional Resizing 43

........................................................................Reposition Images 43...............................................................................Smart Guides 44

........................................................................Place Your Images 45................................................................................Get Creative 45

...................................................................................Adding Text 47......................................................................................Text Box 47

...........................................................................Default Text Box 48.................................................................................Position Text 48

....................................................................Change Font and Size 49.......................................................................Format Bar Options 50

................................................................................Font Options 50.........................................................................Resize Text Boxes 51

....................................................................................Align Text 52.....................................................................................Bold Text 53

............................................................................Save Your Work 54

....................................................................Save Keynote Banner 54..........................................................................Name the Banner 55...................................................................Saving Banner Image 56

.........................................................................................Export 56................................................................................Share Option 57

..............................................................................Select Images 57....................................................................................File Name 58

...........................................................................Compare Quality 59


4/59

Copyright 2013 by Alex Reyes

Cover design by Alex Reyes

Book design by Alex Reyes

This work is licensed under the Creative Commons Attribution-

NonCommercial-NoDerivs 3.0 Unported License. To view a copy of

this license, visit

http://creativecommons.org/licenses/by-nc-nd/3.0/.

Every effort has been made in the preparation of this book to ensure the accuracy of the

information presented. However, the information contained in this book is provided without

warranty, either expressed or implied. Neither the author, nor any distributors will be held liable

for any damages caused or alleged to be caused directly or indirectly by this book.

The author has endeavored to provide trademark information about all the companies and

products mentioned in this book by the appropriate use of capitals. However, the author cannot

guarantee the accuracy of this information.
http://creativecommons.org/licenses/by-nc-nd/3.0/http://creativecommons.org/licenses/by-nc-nd/3.0/http://creativecommons.org/licenses/by-nc-nd/3.0/http://creativecommons.org/licenses/by-nc-nd/3.0/


5/59

About the AuthorMy name is Alex Reyes and my story is a little long. Don't worry I won't bore you with all the

details. I've worked with computers in one way or another ever since I was able to get ahold of

one, which was some time during my high school days. At one point I even ran my own

computer business. This was a few years before computers were as common place as they aretoday. Back then you needed to take out a loan to buy a computer, or you could lease one like a

car. Yes, I sold computers too. This was in the mid 1980s.

I really enjoy learning as much as I can about anything that has to do with technology, but

computers are my primary interest. I started teaching over twenty years ago and have had the

pleasure of doing two things that I really enjoy. That would be working with computers, and

teaching. I have always tried to integrate technology into any aspect of teaching while in the

classroom. In my current position with the district I have the pleasure of teaching teachers how

to use technology, and how it can be integrated within the daily classroom instruction. I like to

think of technology in terms of teaching and learning.

Recently, I have taken up another one of my life's pleasures, writing. With the increased

popularity of ebooks and the latest advances in software to easily create ebooks, I have let my

hunger for writing loose. In my district I write and publish blogs, ebooks and step by step

instructions for integrating technology into classroom instruction. It has been very successful and

I thought it would be a good idea to provide this expertise to other teachers everywhere. To that

end, I have started a we site to provide a variety of information, lessons and instructions for using

technology. The majority of the information on this site is free to download for teachers or

anyone interested.


6/59

PrefaceBooks like this one are born from requests by teachers. Ill usually get two or more requests on

the same topic and thats all I need. I figure that if there are at least a couple of people that have

gone out of there way to request help with a topic then there must be others out there with the

same need. These series of short step by step instructions is meant to help you learn how to usesoftware in small chunks. It is my hope that these short series of instructions will help you learn

what can be done so that you can apply these techniques in your projects.


7/59

Reader FeedbackFeedback from readers is always welcome. Let me know what you think of this ebookwhat you

liked or may have disliked. Reader feedback is important when developing titles that you as the

reader will really get the most out of.

To send general feedback send an email to [email protected]. Please make sure to mention the

title of the book in the subject of your message.

If there is a book that you need and would like to see published, please send an email to

[email protected] write suggest a title in the subject of your message.
mailto:[email protected]:[email protected]


8/59

Customer Support

Errata

Although I have taken every care to ensure the accuracy of the content, mistakes do happen. Ifyou find a mistake in one of the books, I would be grateful if you would report this. By doing so,

you can save other readers from frustration and help improve subsequent versions of the book. If

you find any errata, please report it to http://it2.yisd.net/innovate/contact. Please provide

details of the errata. This information will be provided on our web site to others so they can

return and download subsequent versions with appropriate changes made.

PiracyPiracy of copyright material on the Internet is an ongoing problem across all media. As a teacher

I know we need materials and take liberal use of copyright so we can have materials for

classroom instruction.This is why my work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License, except where otherwise indicated. Most of my

works are free to download and use.

If you come across any illegal copies of our work, in any form, on the Internet, please provide us

with the location address or website name immediately so we can pursue a remedy.

Please contact us at http://it2.yisd.net/innovate/contact with a link to the suspected pirated

material. We appreciate your help in protecting authors and our ability to bring you valuable

content.

QuestionsYou can contact us at http://it2.yisd.net/innovate/contactif you have a problem with any aspect

of the book, and we will do our best to address it.
http://cactesmagazine.com/contacthttp://cactesmagazine.com/contacthttp://cactesmagazine.com/contacthttp://cactesmagazine.com/contacthttp://cactesmagazine.com/contacthttp://cactesmagazine.com/contacthttp://cactesmagazine.com/contacthttp://cactesmagazine.com/contact


9/59

Create Web Banners with Keynote

Select a Template

When Keynote starts you might see the template chooser. This a good place

to start. If you don't see the template chooser then go to the menu andselect File - New From Template. In this lesson I will use a plain white

template but you can choose any template. I recommend you start with a

white template too so you can get the idea and then use a template. I rarely

use a template, because as you will see, I can create my own backgrounds

with the many tools available in Keynote.

A Basic Template

Choose a template. I recommend you select a blank template to get started.


10/59

Modify Dimensions

When Keynote opens a template or new blank keynote it uses one of the

default present sizes. You need to modify the size of the slides so they

conform to the size requirements of your banner.

Keynote Inspector

You will need the Inspector open. If it isn't open click the Inspector icon in

the toolbar.


11/59

Document Inspector

In the Inspector click the first icon to access the document inspector.

Custom Slide Size


12/59


13/59

Banner Size Settings

Replace the default size settings with 800 by 200. These are the current

slide settings for campus and department home pages through the Gamwell

CMS. You can set these dimensions to your specific needs. When you enter

the dimensions click OK.


14/59

Blank Banner

You now have a blank banner so we can begin to build our content.


15/59

Create a Solid Background

The text boxes on your blank slide are used for slide shows. We don't need

these boxes. Our ultimate aim is to create a static image.

Select and Delete

Select any text boxes and delete them from the banner.


16/59

A Blank Canvas

We now have a blank canvas. You might want to use the white canvas or add

some color. In the rest of this process we will walk through the process of

adding color to your canvas.


17/59

Rectangle Tool

Select the rectangle shape from the shape pull down menu.

Default Shape Size


18/59


19/59

Resize

Pull the right corner and make the image slightly larger than the canvas. We

will be fixing this in a moment.

Metrics Inspector


20/59

In the main inspector select the Metrics inspector so we can fine tune our

shape size and position. We want to make the size of our shape match the

size of our canvas.

New Size and Position

After you change the shape size to match the canvas, go to the position

option and make sure they are each set to zero '0'.


21/59

Fill Options with the Graphic Inspector

Click on the Graphic Inspector. This will help us change the fill options for

this shape.

Color Fill Options


22/59

Click on the fill options pull down menu and select color fill.

Default Color

The default color fill is white.


23/59

Change Color Fill

To change the color fill click the color selector button. The color button

changes to include a gray border. This gray border indicates that the color

palette is visible and that you can select a color to change the fill for the

selected shape. A colors palette will open. Your color palette will have

different color options available. These options are available by selecting one

of the options on the top. In my example I have the crayon option selected.


24/59

Select A Color

To fill the shape with a color click once on a color.

Change Border Style


25/59

The shape has a border which in this example is black. To remove this

border click the line style pull down menu and select none.

Position Fill Shape

After removing the border you might need to reposition the shape so there is

no part of the white canvas showing.


26/59

Lock Background Color

As you work with the banner it helps to lock the background color so you

don't accidentally move it while positioning other objects. To lock this shape

click on it once to select. You know it's selected when the handles are

available around the shape. From the menu select Arrange - Lock.


27/59

A Locked Element

When an element is locked the corners have a light gray x.

Unlock an Element


28/59

To unlock an element select it with your mouse and select Arrange - Unlock

from the menu.


29/59

Create a Gradient Background

A solid color is not the only option for a background. With Keynote you can

create a gradient. A gradient is a transition from one color to another. It's

like a sunset where the horizon transitions from a light orange to a darker

orange.

A Blank Canvas

You should have a blank canvas ready. If you don't remember hot to get

your canvas to the correct size, check the beginning of this lesson.


30/59

Rectangle Shape

Go to the shapes pull down menu and select the rectangle shape.

Default Shape


31/59

The default shape is a square. Let's resize this shape to fill the canvas.

Move the Shape

Move the shape to the upper left.


32/59

Resize

Click on the shape handle and resize the image so it is slightly larger than

the canvas.

Graphic Inspector


33/59

In the inspector click on the Graphic Inspector.

Image Fill Option

Click the pull down menu for the image fill option and select Gradient Fill.


34/59

Default Gradient

The default gradient is from gray to light blue. You can see the large color

button has been replaced with two smaller color buttons. The button above

is the blue, which represents the blue part of the gradient. The bottom is

gray for the bottom gradient color.


35/59

Change Gradient Colors

Click once on the top gradient color. The colors palette will appear. Select a

color.

Color Live View


36/59

When you select a color for the top part of the gradient the color will be

shown on the shape. This helps you determine if the colors will work.

Change the bottom gradient color.

Bottom Gradient Color

Click the bottom color button and select a color for the bottom part of the

gradient.


37/59

Color Choices

It is best to select colors for your gradient that go from a dark to light color.

This color gradient is most commonly seen in nature.

Remove Border


38/59

Select the border style and change it to none.

Resize and Position Gradient

Click the Metrics Inspector and resize it to fit your canvas. Change the

position for both X and Y to zero.


39/59

Lock Gradient

Remember to lock the gradient background so won't accidentally move it

while adding other content.


40/59

Add Pictures from iPhoto

With a background in place you can begin to add other elements. Let's add

some images.

Media

Click the media button in the toolbar.


41/59

Photos from iPhoto

Keynote integrates with iPhoto.

Drag and Drop Images


42/59

Drag and drop images from iPhoto onto the canvas.

Large Images

Digital photographs are usually much larger than your banner. You might

need to resize the image to fit in the banner area.


43/59

Proportional Resizing

To assure that images are resized proportionally, select a corner handle.

Reposition Images


44/59

Once your image is smaller you will need to reposition the image.

Smart Guides

As you resize and move an image, smart guides will appear to help you

center and align images.


45/59

Place Your Images

Place your image where it works best for your purposes.

Get Creative


46/59

Add more than one image and get creative.


47/59

Adding Text

Banners are not just for images. In this step we will learn how to add text to

a banner.

Text Box

Click once on the text box button in the toolbar.


48/59

Default Text Box

A default text box will be placed at the center of the canvas. You can click

inside this box and type your information.

Position Text


49/59

Move the text box to a position in your banner.

Change Font and Size

The text is a little too small. To change the font and size you will need to see

the format bar. If it is not currently visible go to the menu and select View -

Show Format Bar.


50/59

Format Bar Options

The format bar appears below the toolbar. Make sure the text box is

selected. Select a font and a font size.

Font Options


51/59

Try to select a font that can be easily read on a computer screen. Arial is

usually a good font to choose.

Resize Text Boxes

You might need to resize a text box to fit. Click and drag a text box handle.

The text will reflow to fix the new size.


52/59

Align Text

Align your text so its easy to read. When you center text it gives a more

relaxed feel to your information. Aligning text to the left makes it look a little

more formal. Don't center align a lot of text. This makes it hard to read.


53/59

Bold Text

If you need text to stand out, make it bold.


54/59

Save Your Work

Save your Keynote. Saving your original is very important. You will need to

come back and update this information and it helps to return where you left

off.

Save Keynote Banner

Click File and select save.


55/59

Name the Banner

Give your Keynote a descriptive name so you can find it later.


56/59

Saving Banner Image

When you've finished creating your banner its time to save a version as an

image. The most common image version is JPEG.

Export

Click File and select Export.


57/59

Share Option

You can also export an image using the Share option in the menu. They are

both the same just in two different places.

Select Images


58/59

In the export dialogue box select the images option. In the format select

JPEG. Leave the quality at 50%. Click Next.

File Name

This image is going to be used for the web so it cannot have spaces. You can

use an underscore to separate words. Click export to save the slide as an

image.

You can create more than one slide as a banner in Keynote and export each

slide as an image. In this way you can create all the images you will need for

a banner and export them all at once.


59/59

Compare Quality

The image quality is fairly close the original. Don't worry too much about the

change. It is important to have a small file size for your images. This will

assure that all images can quickly load onto user's browsers.

keynote for web page banners

Documents