Unit 21 - Creating a Navigation Bar in Macromedia Fireworks
|
|
- Francis Warren
- 6 years ago
- Views:
Transcription
1 Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document Using both the House Style and Sketch Diagrams documents as your guide, this tutorial will show you, step-by-step, how to create a Navigation Bar using Macromedia Fireworks. While this tutorial details the creation of a specific navigation bar please feel free to substitute any of the settings for your own should you feel confident enough to experiment. That said, your navigation bar should match the settings detailed in your House Style and Sketch Diagrams documents. [A] Launching Macromedia Fireworks 1. Open Macromedia Fireworks. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 1
2 2. When Fireworks first loads you will be given 2 choices: (a) Open a recent item (b) Create new Unless you are editing an existing Navigation Bar project (in which case select Open and find your document) click Fireworks File under the Create New option. 3. The New Document dialogue box will open. You will then be asked to input a Canvas Size for the project. Bearing in mind the size of the Navigation Bar you have already specified in your Sketch Diagrams document, you will need to input a width and height large enough to surround the Navigation Bar when fully-extended. For example, if your Navigation Bar is made up of 5 buttons that are 120 pixels wide and 40 pixels high, then the total length would be 600 pixels (120 x 5 = 600) with a total height of 40 pixels. However, add to that a series of drop-down buttons of the same dimension (120 x 40) then the total height would increase by 40 pixels for each new drop-down button you add. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 2
3 The diagram below (Diagram 1) shows a navigation bar comprising of 5 buttons horizontally, with a further 3 drop-down buttons vertically. Each button is 120 pixels x 40 pixels and so the total area required for the navigation bar, when fully-extended, would be 600 pixels (120 x 5) by 160 pixels (40 x 4). (Diagram 1) In the example below (Diagram 2), I have added a 2 pixel space between each button which will increase the overall size required for the canvas. The space is not essential but it will enable your buttons to stand out from one another. (Diagram 2) Remembering the original size of the buttons (120 x 40) and now adding 2 extra pixels either end, top and bottom, and between each button, the canvas size is now made up of the following dimensions/pixels: = 612 pixels (horizontal) = 170 pixels (vertical) Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 3
4 It s important to remember that the canvas size must be large enough to contain all of the graphical items that go to make up your navigation bar. If the canvas is too small then some items will not be visible in the finished graphic. Once you are clear on the size of canvas required to contain your navigation bar, input the width and height in the boxes provided in the New Document dialogue box. Make sure the Resolution is set to 72 - Pixels/Inch The Canvas Color can be set to the same colour as your webpage background if the colour is solid. If the background colour of your webpage is patterned then set the Canvas Color to Transparent, that way the pattern will still show through. For this tutorial I want to use a background colour of white, so select the White option. Click OK If you need more help understanding navigation bar dimensions or assistance calculating the size of your canvas then please ask your teacher for help Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 4
5 [B] Canvas Area and Workspace Tools Layers Workspace Canvas The canvas area is the white section in the centre of the screen. The dimensions of the canvas are displayed in the bottom right-hand corner of the workspace (circled) The workspace is the area around your canvas. Image the workspace is a piece of card and that the canvas is hole cut out of it. The workspace sits in front of the canvas, and so the canvas is an area behind the workspace that is visible through the hole. Any items not place directly on the canvas will be hidden behind the workspace. In the example below, a circle has been created and placed slightly off the canvas in the bottom left-hand corner. Notice how the workspace covers the area of the circle not on the canvas. Important Any items placed off the canvas will be behind the workspace and will not appear in the finished graphic. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 5
6 [C] Creating shapes and positioning 4. Select the Rectangle tool button on the Vector tools section of the main Toolbar (left-hand side of the workspace). Note If the Rectangle tool is not showing then you must click and hold the button to display a list of available shapes. From the available list, click on the Rectangle tool to select it. Move the mouse pointer to the canvas area and draw an approximate shape for your button. Don t worry about the colour or getting the exact shape/size yet, we will fine-tune it next. With the rectangle shape drawn we now need to input the exact pixel values so that the button will be the right size for our navigation bar. With the rectangle selected (it will have blue squares in each corner as shown above) move your attention down to the Properties box at the bottom of the screen. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 6
7 The Properties panel allows you to change various things about the selected item. Size, colour, edge (the border around it), and texture, etc. Once you re a little more confident with Fireworks you may want to experiment with these settings. However, for now the only settings we need to change are the size and colour. The values shown in the example above (W:87 and H:25) will, no doubt, be different to the values shown in the properties for your rectangle. If the Properties panel does not look like the example above make sure the rectangle you created is selected. Input the width and height for the rectangle/button as decided previously in your Sketch Diagrams document. In the example below I have added the values mentioned earlier in this tutorial (120 x 40). Select the required colour for the rectangle/button from the Fill Colour menu. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 7
8 With the rectangle/button correctly formatted, it s now time to duplicate it (copy and paste) the required number of times to form the horizontal buttons that make up the navigation bar. You don t need to bother with the drop-down menus at this point as these are created differently. 5. Select the rectangle and click Edit > Copy (or use the [Ctrl] + [C] keyboard shortcut). With the rectangle copied, click Edit > Paste (or use the [Ctrl] + [V] keyboard shortcut). The newly pasted rectangle will be placed directly over the original and so it may look like nothing happened. Click and drag the rectangle to the upper-left hand corner of the canvas and then, using the [Directional Arrows] on the keyboard, position the rectangle so that it touches the top and left edges of the canvas/workspace. When positioned correctly there should be none of the white canvas visible above and to the left of the rectangle. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 8
9 Once positioned correctly, ensure the rectangle is still selected and then, using the [Directional Arrows] on the keyboard once more, move it to the right 2 pixels by clicking the [Right Arrow] twice, and then down 2 pixels by clicking the [Down Arrow] twice. Each click/press of the [Directional Arrows] is equal to 1 pixel. 6. Copy and paste the remaining 3 rectangles and then position them as detailed in Step 6 so that each rectangle/button is 2 pixels away from its neighbour and 2 pixels down from the top of the canvas. Example showing the correct position of all 5 rectangles with a 2-pixel space around all edges Again, if you re creating a slightly different navigation bar to the one detailed, feel free to position your rectangles as and where you decided previously Save the Navigation Bar project as a Fireworks PNG (*.png) file to your Unit 21, AO3 folder using the name Navigation Bar. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 9
10 [D] Turning shapes (symbols) in buttons Okay, so you ve created and positioned all of the horizontal rectangles in readiness for your navigation bar. Now we must change each rectangle into a button so that users can interact with the navigation bar and can, in theory, access different areas of your website. Remember, you re not actually creating the website to accompany this navigation bar, but you are creating graphics that are usable. The 5 main buttons we re going to create are: Home Recycling (which will also be our drop-down menu) Forum History Contact Us 8. Select the upper-left rectangle and then click Modify > Symbol > Convert to Symbol (or use the [F8] keyboard shortcut). The Symbol Properties dialogue box will open. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 10
11 The Symbol Properties dialogue box. Other than naming it, you can also specify what type of symbol it is. There are 3 options: Graphic Animation Button Simply put, a Symbol in Fireworks is a graphical item that, once created, is stored in a Library of available symbols (graphics, animations and buttons) that can be used multiple times within the same project. Once created, symbols can easily be edited to create new graphical items. 9. Input the required name, Home and select the Button type. Working from left to right, modify all of the other rectangles so that they become buttons and are named as shown below. 10. With all rectangles modified into Buttons and named correctly, double-click the upper-left button, the Home button. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 11
12 11. The Button Editor will open. The Button Editor enables you to edit the various states of a button in Fireworks so that there is some interaction when a user clicks on it. There are 4 possible states: Up - the normal state of the button. Over the state when the cursor is over the button. Down the state when the button is pressed Over when down state when the button is down, and the cursor is over the button In this tutorial we will only use the UP, OVER and DOWN states. The changes to the button between up, over and down should not be huge; you re looking for small changes such as a colour change (text, button or an area of the button), or maybe a shadow appearing. Massive changes to the shape or position of the button simply don t work. For example, the images below show the three states of the button (up, over and down) where only subtle changes have taken place. Up Over Down Normal state of button Text changes colour Background changes colour Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 12
13 12. With the Button Editor open, we now have to edit each state, starting with the UP state. It s always an idea at this stage to double-check which button you re editing. If you turn your attention to the Tabs at the top of the Button Editor you will see the name of the button (as created by you in the Symbol Properties dialogue box previously). Select the Text tool button on the Vector tools section of the main Toolbar (left-hand side of the workspace), and then click somewhere on the button to open a text box. Don t worry about the position of the text box at this stage as we will align the text box and button shortly. Input the name for the button, in this case: Home Having created your House Style previously, now would be the time to make sure that the font, font colour and font size you choose were applied to the text. I ve chosen the following formatting for these buttons: Font... Arial Rounded MT Bold Colour... White Size Formatting changes are made using the Properties panel at the bottom of the screen. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 13
14 Aligning the text and button. 13. Make sure the text box still selected (it will have a blue box with squares down each side). Click Window > Align. The Align menu will open. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 14
15 The Align menu. Fig.1 Fig.2 Fig.3 Fig.4 The Align menu (Fig.1) allows you to specifically arrange items on the canvas. They can be arranged to the right, left, centre, top or bottom. Items can also be distributed across the canvas, which means selected items can be evenly spaced left to right, or top to bottom. Using the Align menu, arrange the text box as follows: Click the To Canvas button (Fig.2) ensure that the text box is aligned with the button Click the Align horizontal centre button (Fig.3) Click the Align vertical centre button (Fig.4) Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 15
16 The text box should now be in the exact centre of the button. Close the Align menu if it s in the way, although you will need to open it again later to arrange the other text boxes for the Recycling, Forum, History and Contact Us buttons. With the UP state created we can now move on to the OVER state. 14. Click on the Over tab. 15. Move your attention to the bottom right of the button workspace and click the button named Copy Up Graphic. This places a replica of the UP graphic in the centre of the workspace ready for editing. Change the colour of the text (double-click the text box to enable editing) to a bright yellow. With the OVER state created we can now move on to the DOWN state. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 16
17 16. Click on the Down tab. 17. Again, move your attention to the bottom right of the button workspace and click the button named Copy Over Graphic. This places a replica of the OVER graphic in the centre of the workspace ready for editing. Using the Properties panel, change the colour of the rectangle/background to a darker red. You may have to pick the Pointer tool first before the rectangle/background can be selected. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 17
18 With all 3 states created (UP, OVER and DOWN) click Done. The first button (Home) should now look like this: Repeat the process of creating the UP, OVER and DOWN states (Steps 10 to 17) for the remaining buttons Recycling, Forum, History and Contact Us. Once done, your canvas should look like the following example: Save the project, File > Save. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 18
19 [E] Drop-down menus Okay, you should now have an UP, OVER and DOWN state for all 5 of your buttons, so now it s time to create the drop-down menu for the Recycling button. 18. Select the Recycling button, and then click Window > Behaviors (or use the [Shift] + [F3] keyboard shortcut). The Behaviors window will open. Click on the, and then from the list that appears select Set Pop-Up Menu. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 19
20 The Pop-up Menu Editor dialogue box will open. The Content tab should be selected. Add the following text for the Recycling button: Because we re just creating the graphic and there isn t an actual website where the Navigation Bar will be used, there is no need to input any information in the Link and Target fields. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 20
21 Click on the Appearance tab. The Appearance menu will already have defaults in place, and so what is shown above are the settings I have selected. These are as follows: Cells... HTML Vertical Menu Font... Arial Rounded MT Bold (this will need to be typed in) Font Size Font Alignment... Centred Up State (Text)... White Up State (Cell)... Red Over State (Text)... Bright Yellow Over State (Cell)... Dark Red When creating your own drop-down menu please feel free to experiment with the settings found here, however, for this tutorial input the details exactly as shown. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 21
22 Click on the Advanced tab. Again, as with the Appearance menu, the Advanced menu will already have defaults in place, and so what is shown above are the settings I have selected. These are as follows: Cells width (pixels) Cell height (pixels) Cell padding Text indent... 0 Cell spacing... 2 Menu delay Pop-up borders... unchecked (tick removed) Cell width, cell height and cell spacing are set to match the original settings for the menu (button = 120 x 40, with a 2 pixels space between each button). Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 22
23 Click on the Position tab. Again, as with the Appearance and Advanced menus there will already be default settings in place, and so what is shown above are the settings I have selected. These are as follows: Menu position X:... 0 Menu position Y: The X value represents left to right, while the Y value is top to bottom. With a value of 44, the Y value places the drop-down menu below the Recycling button, 44 pixels from the top of the canvas. If you remember, the buttons are 120 x 40, and there is a 2 pixel gap above, below, to the left and to the right of each button. Placing the menu 44 pixels from the top of the canvas retains the 2-pixel spacing above and below the Recycling button ( = 44). Click Done when finished. Press [F12] to preview your menu. Save the project, File > Save. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 23
24 [F] Exporting the Navigation Bar 19. Create a new folder called Navigation in your Unit 21, AO3 folder. 20. With your finished Navigation Bar open in Fireworks, click File > Export (or use the keyboard shortcut [Ctrl] + [Shift] + [R] ). Select the save location as the Navigation folder created in your Unit 21, AO3 folder, and then change the remaining settings (if necessary) to those shown above. Click Export. Your Navigation Bar, together with all necessary graphics, will be saved. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 24
Unit 21 - Creating a Button in Macromedia Flash (simplified)
Unit 21 - Creating a Button in Macromedia Flash (simplified) Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------
More informationCreating Buttons and Pop-up Menus
Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about
More informationHow to...create a Video VBOX Gauge in Inkscape. So you want to create your own gauge? How about a transparent background for those text elements?
BASIC GAUGE CREATION The Video VBox setup software is capable of using many different image formats for gauge backgrounds, static images, or logos, including Bitmaps, JPEGs, or PNG s. When the software
More informationHO-1: INTRODUCTION TO FIREWORKS
HO-1: INTRODUCTION TO FIREWORKS The Fireworks Work Environment Adobe Fireworks CS4 is a hybrid vector and bitmap tool that provides an efficient design environment for rapidly prototyping websites and
More informationInteractive Tourist Map
Adobe Edge Animate Tutorial Mouse Events Interactive Tourist Map Lesson 1 Set up your project This lesson aims to teach you how to: Import images Set up the stage Place and size images Draw shapes Make
More informationFig. A. Fig. B. Fig. 1. Fig. 2. Fig. 3 Fig. 4
Create A Spinning Logo Tutorial. Bob Taylor 2009 To do this you will need two programs from Xara: Xara Xtreme (or Xtreme Pro) and Xara 3D They are available from: http://www.xara.com. Xtreme is available
More informationCS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 02: Introduction to Photoshop Part 1
CS 1033 Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 02: Introduction to Photoshop Part 1 Upon completion of this lab, you should be able to: Open, create new, save
More informationTITLE: GLASS GOBLET. Software: Serif DrawPlus X8. Author: Sandra Jewry. Website: Draw Plus Tutorials by San. Skill Level: Beginner.
TITLE: GLASS GOBLET Software: Serif DrawPlus X8 Author: Sandra Jewry Website: Draw Plus Tutorials by San Skill Level: Beginner Supplies: None Description: This is a very easy beginner tutorial that shows
More informationIntroduction To Inkscape Creating Custom Graphics For Websites, Displays & Lessons
Introduction To Inkscape Creating Custom Graphics For Websites, Displays & Lessons The Inkscape Program Inkscape is a free, but very powerful vector graphics program. Available for all computer formats
More information2. If a window pops up that asks if you want to customize your color settings, click No.
Practice Activity: Adobe Photoshop 7.0 ATTENTION! Before doing this practice activity you must have all of the following materials saved to your USB: runningshoe.gif basketballshoe.gif soccershoe.gif baseballshoe.gif
More informationOn the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW
STAROFFICE 8 DRAW Graphics They say a picture is worth a thousand words. Pictures are often used along with our words for good reason. They help communicate our thoughts. They give extra information that
More informationFireworks 3 Animation and Rollovers
Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos
More informationFireworks Basics. The Fireworks Interface
Fireworks Basics Scenario Firework is a graphics application that allows you to create and manipulate Web (and other) graphics. It combines both bitmap and vector editing tools, and integrates well with
More informationHO-FL1: INTRODUCTION TO FLASH
HO-FL1: INTRODUCTION TO FLASH Introduction Flash is software authoring package for creating scalable, interactive animations (or movies) for inclusion in web pages. It can be used to create animated graphics,
More informationPaint Tutorial (Project #14a)
Paint Tutorial (Project #14a) In order to learn all there is to know about this drawing program, go through the Microsoft Tutorial (below). (Do not save this to your folder.) Practice using the different
More informationDOING MORE WITH WORD: MICROSOFT OFFICE 2007
DOING MORE WITH WORD: MICROSOFT OFFICE 2007 GETTING STARTED PAGE 02 Prerequisites What You Will Learn USING MICROSOFT WORD PAGE 03 Viewing Toolbars Adding and Removing Buttons MORE TASKS IN MICROSOFT WORD
More informationUsing Adobe Contribute 4 A guide for new website authors
Using Adobe Contribute 4 A guide for new website authors Adobe Contribute allows you to easily update websites without any knowledge of HTML. This handout will provide an introduction to Adobe Contribute
More informationDesigner Reference 1
Designer Reference 1 Table of Contents USE OF THE DESIGNER...4 KEYBOARD SHORTCUTS...5 Shortcuts...5 Keyboard Hints...5 MENUS...7 File Menu...7 Edit Menu...8 Favorites Menu...9 Document Menu...10 Item Menu...12
More informationThe American University in Cairo. Academic Computing Services. Word prepared by. Soumaia Ahmed Al Ayyat
The American University in Cairo Academic Computing Services Word 2000 prepared by Soumaia Ahmed Al Ayyat Spring 2001 Table of Contents: Opening the Word Program Creating, Opening, and Saving Documents
More informationHYPERSTUDIO TOOLS. THE GRAPHIC TOOL Use this tool to select graphics to edit. SPRAY PAINT CAN Scatter lots of tiny dots with this tool.
THE BROWSE TOOL Us it to go through the stack and click on buttons THE BUTTON TOOL Use this tool to select buttons to edit.. RECTANGLE TOOL This tool lets you capture a rectangular area to copy, cut, move,
More informationUsing Microsoft Excel
Using Microsoft Excel Formatting a spreadsheet means changing the way it looks to make it neater and more attractive. Formatting changes can include modifying number styles, text size and colours. Many
More informationCreate and edit text. Create the title text First you ll create the title text for the car rental ad.
8 Choose the Pointer tool and click the mask thumbnail in the Layers panel. The Property inspector shows that the mask was applied using its grayscale appearance. The darker pixels in the mask knock out
More informationDrawing Tools. Drawing a Rectangle
Chapter Microsoft Word provides extensive DRAWING TOOLS that allow you to enhance the appearance of your documents. You can use these tools to assist in the creation of detailed publications, newsletters,
More informationTower Drawing. Learning how to combine shapes and lines
Tower Drawing Learning how to combine shapes and lines 1) Go to Layout > Page Background. In the Options menu choose Solid and Ghost Green for a background color. This changes your workspace background
More informationBold, Italic and Underline formatting.
Using Microsoft Word Character Formatting You may be wondering why we have taken so long to move on to formatting a document (changing the way it looks). In part, it has been to emphasise the fact that
More informationDrawing shapes and lines
Fine F Fi i Handmade H d d Ch Chocolates l Hours Mon Sat 10am 6pm In this demonstration of Adobe Illustrator CS6, you will be introduced to new and exciting application features, like gradients on a stroke
More information4 TRANSFORMING OBJECTS
4 TRANSFORMING OBJECTS Lesson overview In this lesson, you ll learn how to do the following: Add, edit, rename, and reorder artboards in an existing document. Navigate artboards. Select individual objects,
More informationGrade: 7 Lesson name: Creating a School News Letter Microsoft Word 2007
Grade: 7 Lesson name: Creating a School News Letter Microsoft Word 2007 1. Open Microsoft Word 2007. Word will start up as a blank document. 2. Change the margins by clicking the Page Layout tab and clicking
More informationWord 2013 Quick Start Guide
Getting Started File Tab: Click to access actions like Print, Save As, and Word Options. Ribbon: Logically organize actions onto Tabs, Groups, and Buttons to facilitate finding commands. Active Document
More informationChemSense Studio Client Version 3.0.7
Quick Start Guide: ChemSense Studio Client Version 3.0.7 January 5, 2005 Comments/Questions/Bug Report? E-mail: chemsense-contact@ctl.sri.com Background The ChemSense Studio Client software supports the
More informationAdd Photo Mounts To A Photo With Photoshop Part 1
Add Photo Mounts To A Photo With Photoshop Part 1 Written by Steve Patterson. In this Photoshop Effects tutorial, we ll learn how to create and add simplephoto mounts to an image, a nice finishing touch
More informationDOING MORE WITH WORD: MICROSOFT OFFICE 2010
DOING MORE WITH WORD: MICROSOFT OFFICE 2010 GETTING STARTED PAGE 02 Prerequisites What You Will Learn USING MICROSOFT WORD PAGE 03 Viewing Toolbars Adding and Removing Buttons MORE TASKS IN MICROSOFT WORD
More informationWord 2003: Flowcharts Learning guide
Word 2003: Flowcharts Learning guide How can I use a flowchart? As you plan a project or consider a new procedure in your department, a good diagram can help you determine whether the project or procedure
More informationThis Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the
More informationEducation and Training CUFMEM14A. Exercise 2. Create, Manipulate and Incorporate 2D Graphics
Education and Training CUFMEM14A Exercise 2 Create, Manipulate and Incorporate 2D Graphics Menu Exercise 2 Exercise 2a: Scarecrow Exercise - Painting and Drawing Tools... 3 Exercise 2b: Scarecrow Exercise
More informationClip Art and Graphics. Inserting Clip Art. Inserting Other Graphics. Creating Your Own Shapes. Formatting the Shape
1 of 1 Clip Art and Graphics Inserting Clip Art Click where you want the picture to go (you can change its position later.) From the Insert tab, find the Illustrations Area and click on the Clip Art button
More informationIn this exercise you will be creating the graphics for the index page of a Website for children about reptiles.
LESSON 2: CREATING AND MANIPULATING IMAGES OBJECTIVES By the end of this lesson, you will be able to: create and import graphics use the text tool attach text to a path create shapes create curved and
More informationENGL 323: Writing for New Media Repurposing Content for the Web Part Two
ENGL 323: Writing for New Media Repurposing Content for the Web Part Two Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Using Color to Establish Visual Hierarchies Color is useful in
More informationDOING MORE WITH WORD: MICROSOFT OFFICE 2013
DOING MORE WITH WORD: MICROSOFT OFFICE 2013 GETTING STARTED PAGE 02 Prerequisites What You Will Learn USING MICROSOFT WORD PAGE 03 Viewing Toolbars Adding and Removing Buttons MORE TASKS IN MICROSOFT WORD
More informationCreating a Website in Schoolwires
Creating a Website in Schoolwires Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Navigating to an assigned section... 2 Accessing Site Manager... 2 Section Workspace
More informationWith ClaroIdeas you can quickly and easily create idea maps using a combination of words, symbols and pictures.
Welcome to ClaroIdeas ClaroIdeas is a fresh tool to support the creation and editing of concept maps or idea maps using visual and audio components. It has been specifically developed to support people
More information1. Navigation and menus
1. Navigation and menus Screen 1 Your website is made up of a number of different pages, which are organised into your site's menu and form the main navigation for your site (Screen 1, Number 1). The menu
More informationLab #3: Web Design with Graphics
English 413: Electronic Documents and Publications Dr. Jablonski Spring 2004 What You Need to Complete this Lab Lab #3: Web Design with Graphics 1. HTML editing software, preferably Dreamweaver MX 2. UNLV
More informationORGANIZING YOUR ARTWORK WITH LAYERS
9 ORGANIZING YOUR ARTWORK WITH LAYERS Lesson overview In this lesson, you ll learn how to do the following: Work with the Layers panel. Create, rearrange, and lock layers and sublayers. Move objects between
More informationimindmap Quick Start Guide PC Users
imindmap Quick Start Guide PC Users ThinkBuzan Ltd. CREATING YOUR FIRST MIND MAP This guide is designed as a quick starting point for learning how to use imindmap. Simply follow the basic step-by-step
More informationA Step-by-step guide to creating a Professional PowerPoint Presentation
Quick introduction to Microsoft PowerPoint A Step-by-step guide to creating a Professional PowerPoint Presentation Created by Cruse Control creative services Tel +44 (0) 1923 842 295 training@crusecontrol.com
More informationBeginners Guide to Snippet Master PRO
Beginners Guide to Snippet Master PRO This document assumes that Snippet Master has been installed on your site. If not please contact the Bakas IT web team at webreg@bakasit.com.au. Initial Login Screen...
More informationNVU Web Authoring System
NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the
More informationGIMP TEXT EFFECTS. Text Effects: Outline Completed Project
GIMP TEXT EFFECTS ADD AN OUTLINE TO TEXT Text Effects: Outline Completed Project GIMP is all about IT (Images and Text) OPEN GIMP Step 1: To begin a new GIMP project, from the Menu Bar, select File New.
More informationSession 7 MS Word. Graphics. Inserting Clipart, and Graphics Modify graphics Position graphics
Session 7 MS Word Graphics Inserting Clipart, and Graphics Modify graphics Position graphics Table of Contents Session 7 Working with Graphics... 1 The Toolbar... 1 Drawing Toolbar... 1 Picture Toolbar...
More informationWindow Designer. Opening Screen: When you start Window Designer, you will see the Opening Screen. Here you will be choosing from 4 options:
Window Designer Opening Screen: When you start Window Designer, you will see the Opening Screen. Here you will be choosing from 4 options: New Design: Use this option when no pre-built templates are available
More informationLearning Microsoft Word By Greg Bowden. Chapter 10. Drawing Tools. Guided Computer Tutorials
Learning Microsoft Word 2007 By Greg Bowden Chapter 10 Drawing Tools Guided Computer Tutorials www.gct.com.au PUBLISHED BY GUIDED COMPUTER TUTORIALS PO Box 311 Belmont, Victoria, 3216, Australia www.gct.com.au
More informationOverview of Adobe Fireworks CS6
Overview of Adobe Fireworks CS6 Lesson topics: Work with the Adobe Fireworks CS6 workspace: tools, Document windows, menus, and panels. Customize the workspace. Change the magnification of a document.
More informationMicrosoft Word
OBJECTS: Shapes (part 1) Shapes and the Drawing Tools Basic shapes can be used to graphically represent information or categories. The NOTE: Please read the Objects (add-on) document before continuing.
More informationHow to Create Greeting Cards using LibreOffice Draw
by Len Nasman, Bristol Village Ohio Computer Club If you want to create your own greeting cards, but you do not want to spend a lot of money on special software, you are in luck. It turns out that with
More informationAdobe Flash CS3 Reference Flash CS3 Application Window
Adobe Flash CS3 Reference Flash CS3 Application Window When you load up Flash CS3 and choose to create a new Flash document, the application window should look something like the screenshot below. Layers
More informationEDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9
EDITOR GUIDE Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 1 Button Functions: Button Function Display the page content as HTML. Save Preview
More informationAbout Freeway. Freeway s Tools and Palettes
About Freeway The most important thing to appreciate before you start a site in Freeway is how the process works, especially if you have tried other Web publishing software before. Freeway is not an HTML
More informationMicrosoft Word 2007 on Windows
1 Microsoft Word 2007 on Windows Word is a very popular text formatting and editing program. It is the standard for writing papers and other documents. This tutorial and quick start guide will help you
More informationA QUICK TOUR OF ADOBE ILLUSTRATOR CC (2018 RELEASE)
A QUICK TOUR OF ADOBE ILLUSTRATOR CC (2018 RELEASE) Lesson overview In this interactive demonstration of Adobe Illustrator CC (2018 release), you ll get an overview of the main features of the application.
More informationCPM-200 User Guide For Lighthouse for MAX
CPM-200 User Guide For Lighthouse for MAX Contents Page Number Opening the software 2 Altering the page size & Orientation 3-4 Inserting Text 5 Editing Text 6 Inserting Graphics 7-8 Changing the Colour
More informationGIMP ANIMATION EFFECTS
GIMP ANIMATION EFFECTS Animation: Text Word by Word ANIMATION: TEXT WORD BY WORD GIMP is all about IT (Images and Text) BACKGROUND IMAGE Before you begin the text animation, you will download a public
More informationUsing Flash Animation Basics
Using Flash Contents Using Flash... 1 Animation Basics... 1 Exercise 1. Creating a Symbol... 2 Exercise 2. Working with Layers... 4 Exercise 3. Using the Timeline... 6 Exercise 4. Previewing an animation...
More informationSketchUp Starting Up The first thing you must do is select a template.
SketchUp Starting Up The first thing you must do is select a template. While there are many different ones to choose from the only real difference in them is that some have a coloured floor and a horizon
More information3 AXIS STANDARD CAD. BobCAD-CAM Version 28 Training Workbook 3 Axis Standard CAD
3 AXIS STANDARD CAD This tutorial explains how to create the CAD model for the Mill 3 Axis Standard demonstration file. The design process includes using the Shape Library and other wireframe functions
More informationBlender Lesson Ceramic Bowl
Blender Lesson Ceramic Bowl This lesson is going to show you how to create a ceramic looking bowl using the free program Blender. You will learn how to change the view, add, delete, scale and edit objects
More informationPOWERPOINT BASICS: MICROSOFT OFFICE 2010
POWERPOINT BASICS: MICROSOFT OFFICE 2010 GETTING STARTED PAGE 02 Prerequisites What You Will Learn USING MICROSOFT POWERPOINT PAGE 03 Microsoft PowerPoint Components SIMPLE TASKS IN MICROSOFT POWERPOINT
More informationHow To Capture Screen Shots
What Is FastStone Capture? FastStone Capture is a program that can be used to capture screen images that you want to place in a document, a brochure, an e-mail message, a slide show and for lots of other
More informationCROMWELLSTUDIOS. Content Management System Instruction Manual V1. Content Management System. V1
Content Management System Instruction Manual V1 www.cromwellstudios.co.uk Cromwell Studios Web Services Content Management System Manual Part 1 Content Management is the system by which you can change
More informationKeynote Basics Website:
Keynote Basics Website: http://etc.usf.edu/te/ Keynote is Apple's presentation application. Keynote is installed as part of the iwork suite, which also includes the word processing program Pages. If you
More informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationUsing Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area
4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan that is shown below. Logo Page Heading
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationLearning to use the drawing tools
Create a blank slide This module was developed for Office 2000 and 2001, but although there are cosmetic changes in the appearance of some of the tools, the basic functionality is the same in Powerpoint
More informationCreating a new project To start a new project, select New from the File menu. The Select Insert dialog box will appear.
Users Guide Creating a new project To start a new project, select New from the File menu. The Select Insert dialog box will appear. Select an insert size When creating a new project, the first thing you
More informationMicrosoft Visio Working with Shapes
Working with Visio Shapes Shape is the general term for the objects you will find on a stencil and objects created using the drawing tools. These include geometric shapes such as rectangles, triangles
More informationFrontPage 98 Quick Guide. Copyright 2000 Peter Pappas. edteck press All rights reserved.
Master web design skills with Microsoft FrontPage 98. This step-by-step guide uses over 40 full color close-up screen shots to clearly explain the fast and easy way to design a web site. Use edteck s QuickGuide
More informationIncluded with the system is a high quality speech synthesizer, which is installed automatically during the SymWord setup procedure.
Introduction to SymWord SymWord is a simple to use, talking, symbol-word processor. It has the basic functionality of a word processor. SymWord can also be configured to produce speech and/or display text
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationPart II: Creating Visio Drawings
128 Part II: Creating Visio Drawings Figure 5-3: Use any of five alignment styles where appropriate. Figure 5-4: Vertical alignment places your text at the top, bottom, or middle of a text block. You could
More informationMacromedia - Fireworks TechNotes: How to create transparent Pop-up Menus
Page 1 of 6 Home > Products > Fireworks > Support > TechNote Index How to create transparent Pop-up Menus Pop-up Menus can be structured to have transparent or translucent backgrounds. Modifying the Pop-up
More informationECDL Module 6 REFERENCE MANUAL
ECDL Module 6 REFERENCE MANUAL Presentation Microsoft PowerPoint XP Edition for ECDL Syllabus Four PAGE 2 - ECDL MODULE 6 (USING POWERPOINT XP) - MANUAL 6.1 GETTING STARTED... 4 6.1.1 FIRST STEPS WITH
More informationEXCEL BASICS: MICROSOFT OFFICE 2007
EXCEL BASICS: MICROSOFT OFFICE 2007 GETTING STARTED PAGE 02 Prerequisites What You Will Learn USING MICROSOFT EXCEL PAGE 03 Opening Microsoft Excel Microsoft Excel Features Keyboard Review Pointer Shapes
More informationSOFTWARE SKILLS BUILDERS
CREATING AN ALL Hyperstudio is an easy to use but powerful multimedia authoring tool that lets you and your students create a series of linked cards, called a stack. Each card can contain text, graphics,
More informationIntroduction to MS Word XP 2002: An Overview
Introduction to MS Word XP 2002: An Overview Sources Used: http://www.fgcu.edu/support/office2000/word/files.html Florida Gulf Coast University Technology Skills Orientation Word 2000 Tutorial The Computer
More informationA Dreamweaver Tutorial. Contents Page
A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating
More informationUsing Blending Modes for Simple Color Correction
Using Blending Modes for Simple Color Correction In a previous lesson, you were introduced to blending modes using the Brush Tool. Blending modes are also a powerful feature of the Layers Panel and can
More informationGuide to WB Annotations
Guide to WB Annotations 04 May 2016 Annotations are a powerful new feature added to Workbench v1.2.0 (Released May 2016) for placing text and symbols within wb_view tabs and windows. They enable generation
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More information2. Write Your Test Questions & Create Interactions Page 12
This guide will show you how to create a computer-based test using Authorware 4.0 or higher. These instructions are for use on both Macintosh and IBM (Windows) computers. It is recommended that you purchase
More informationStep 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor.
All Creative Designs HTML Web Tutorial for PC Using KompoZer New version 2012 now available at: http://www.allcreativedesigns.com.au/pages/tutorials.html Step 1 Download and Install KompoZer Step by step
More informationGoldfish 4. Quick Start Tutorial
Goldfish 4 Quick Start Tutorial A Big Thank You to Tobias Schilpp 2018 Fishbeam Software Text, Graphics: Yves Pellot Proofread, Photos: Tobias Schilpp Publish Code: #180926 www.fishbeam.com Get to know
More informationWord 3 Microsoft Word 2013
Word 3 Microsoft Word 2013 Mercer County Library System Brian M. Hughes, County Executive Action Technique 1. Insert a Text Box 1. Click the Insert tab on the Ribbon. 2. Then click on Text Box in the Text
More informationIntroduction to Microsoft Word
Chapter Microsoft Word is a powerful word processing program that allows you to enter text, make changes to it, format it, record and print it. You can use it to produce professional business letters,
More informationLesson 6 Adding Graphics
Lesson 6 Adding Graphics Inserting Graphics Images Graphics files (pictures, drawings, and other images) can be inserted into documents, or into frames within documents. They can either be embedded or
More informationJASCO CANVAS PROGRAM OPERATION MANUAL
JASCO CANVAS PROGRAM OPERATION MANUAL P/N: 0302-1840A April 1999 Contents 1. What is JASCO Canvas?...1 1.1 Features...1 1.2 About this Manual...1 2. Installation...1 3. Operating Procedure - Tutorial...2
More informationHow To Capture Screen Shots
What Is FastStone Capture? FastStone Capture is a program that can be used to capture screen images that you want to place in a document, a brochure, an e-mail message, a slide show and for lots of other
More informationWord 2007: Flowcharts Learning guide
Word 2007: Flowcharts Learning guide How can I use a flowchart? As you plan a project or consider a new procedure in your department, a good diagram can help you determine whether the project or procedure
More informationUsing SymPrint to Make Overlays, Templates & More...
Welcome to SymPrint SymPrint is an easy-to-use tool for creating communication overlays, worksheets, classroom activities and more using a modern toolbar and common-sense interface modeled after the programs
More informationInkscape tutorial: Donate button
Inkscape tutorial: Donate button By: Very Simple Designs (BDT466) Web Site: http://verysimpledesigns.com/vectors/inkscape-tutorial-donate-button.html This Inkscape beginner tutorial teaches the viewer
More information