HO-1: INTRODUCTION TO FIREWORKS

Size: px
Start display at page:

Download "HO-1: INTRODUCTION TO FIREWORKS"

Transcription

1 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 user interfaces, and creating and optimizing images for the web. Fireworks offers the flexibility to edit both vector and bitmap images, a common library of prebuilt assets, and time-saving integration with all the other tools that form part of Adobe Creative Suite (Dreamweaver, Flash, Illustrator, Photoshop). Fireworks is a graphics' creation and editing package that has lots in common with illustration tools, such as Freehand and Illustrator. With Fireworks you can create, edit and optimise all the graphic elements - text, photographs, roll-over images, buttons, banners, animations, image maps, navigation bars, pop-up menus - you will need for your web site. When you create complex graphics in Fireworks you are creating files that contain a number of different OBJECTS. In Fireworks' default PNG file format these objects always remain editable, meaning that you can change text or colour elements of any graphic in an instant - the control that this gives you over your graphics is Fireworks' main strength. Note: you should always save a copy of any original PNG files as a working file in a relevant sub-folder in your myfiles folder (e.g. I:\myfiles\mm\ho1\) The Fireworks Screen and Tools Panel The aim of this Hands-On exercise is to introduce you to Fireworks, its menu commands, onscreen panels (which are also a feature of Flash and other Adobe packages) and the canvas work area. 1. The first step though is to create a sub-folder ho1 in your myfiles folder (I:\myfiles\mm\ho1\). Use this folder to save all the work you do in this hands-on exercise. 2. Click on Start Programs Adobe Web Standard CS4 and open Adobe Fireworks CS4. Note: you can attach programs to the Start Menu, by right clicking on the item and selecting 'Pin to Start Menu'. This adds a program short cut to your Start Menu, which is available for ease of use in the future. 3. When Fireworks first opens you should see the following Screen, which shows files you have recently edited or allows you to create a new PNG file: 4. Select 'Create New: Fireworks Document (PNG) on this screen OR select File/New on the Main Menu and create a new document with dimensions, 400 pixels x 400 pixels, and canvas colour set to white: mm-0010.doc Page 1 of 7

2 5. Fireworks then creates a blank CANVAS (the name given to the Fireworks work area), which is where you will do all your work, creating, editing and optimizing your graphics/images. 6. Select File Save and save your file as mmho1.png in your ho1 folder (I:\myfiles\mm\ho1\). Your screen should look something like that shown below: 7. When you open a file a number of elements are usually displayed by default. These include: the menu bar - along the top of the screen. the tools panel - on the left hand side of the screen. several multi-tab panels - on the right hand side of the screen. mm-0010.doc Page 2 of 7

3 8. The TOOLS PANEL, shown down the left-hand side of the above diagram, contains a number of tools which you will explore in the next few ho exercises. Tip: If the Tools panel is not visible, select Window Tools or Ctrl+F2, to display. You can leave it docked in its normal position or drag it to another location if you prefer. 9. Select the RECTANGLE TOOL (shown below) and draw out a small rectangle in the top left-hand corner of the canvas. Tip: If you hold the shift key down as you drag out the rectangle tool it will draw a perfect square. 10. All objects that you draw or place on the canvas can be edited. To edit an object you first need to ensure it is the 'active object'. To do this you need to select the object with the Pointer Tool. Once selected you will see little blue handles around the edges of the object, or in the case of a square/rectangle at the four corners. 11. Select the PROPERTIES panel (bottom left hand corner of the screen) and adjust the shape's border and fill colours: 12. Use the pointer tool to drag out one of the blue handles and make your rectangle larger. Note: you need to left-click on one of the small blue rectangles and drag this out with the mouse button held down. 13. With the shape still selected, click on the PROPERTIES panel. The section in the bottom left hand corner defines the dimension/size (W: = width and H: = height in pixels) and position (X: = x-coordinates, Y: = y-coordinates, measured from X=0, Y=0, which is the point at the top left hand corner of the Fireworks canvas): mm-0010.doc Page 3 of 7

4 14. Experiment with the other tools on the PROPERTIES panel to see their effect. It may all seem very complicated at first, but you will soon learn a few tricks. For example, using the appropriate tools adjust the colour of the object's fill, its border colour and thickness and pattern. 15. Click on the FILTERS tab and select Shadow Drop Shadow and add a drop shadow to your shape: 16. Experiment with the other Filter options to see their effect. Finally resave your file as mmho1.png Displaying and Using Tools The Tools panel contains a series of tools that you use to create, select, and edit objects. Many of these tools are arranged in tool groups, as shown below for the Rectangle Tool (R). A group of tools is indicated by a small triangle in the lower right hand corner of the Tool's shortcut button: The Rectangle Tool: The Blur Tool: The Rubber Stamp Tool: The Hotspot Tool: The Slice Tool: The Paint Bucket Tool: Displaying and Using Panels Panels are floating controls that you use to edit and optimise different aspects of your graphics. For example: the Optimise panel enables you manage the settings that control images size, quality and file type. the Color Palette lets you control the fill and line/border colour of an object. mm-0010.doc Page 4 of 7

5 the Pages and Layers and States panels control the way a document is organised and contains options for creating, deleting and manipulating layers and frames. the Behaviours panel controls behaviours, which determines what happens when the mouse pointer moves over hotspots and slices in your images. the Library panels contains shapes and styles as well as the Library, which contains graphics, buttons, animations, symbols, etc that you have previously saved. Note: If a particular panel is not displayed you can activate it by selecting Windows Panel Name from the drop down menu. A tick to the left of the panel name means that the panel is already displayed. The Library The Library is where you can store the objects you have created, which is particularly useful if you want to use other INSTANCES of the same object elsewhere in the file, for example, if you are creating a series of navigation buttons. To add a graphic object that you have created to the Library you must first convert it to a symbol: 1. Select your rectangle so that it is the active object (remember this is indicated by the light blue handles). 2. Select Modify Symbol Convert to Symbol on the Main Menu (or press F8) and create a graphic symbol called myrectangle. 3. You should find that your Document Library now contains an item called myrectangle. 4. The advantage of the Library is that it enables you to manage objects that you create. It also means that if you need other instances of the same object, you can simply drag the symbol from the Library onto your canvas. Note: the properties of each instance of a library object (size, shape, colour, etc) are governed by those of the original symbol. Any changes to symbol will change all the instances of that symbol. 5. Try this out. Drag a copy of the myrectangle symbol on to your canvas and position just below the original square. Double click on the new instance to open it inside the Symbols editing window and use the Fill Panel to change its colour. 6. When you close the symbol editing window you will notice that your original square and the library symbol also change colour. This is because all instances of a symbol have the same properties. mm-0010.doc Page 5 of 7

6 7. If you want to create an identical object with different properties you need to create a new symbol. Click on the arrow dropdown menu in the top right hand corner of the Library Panel and select Duplicate from the drop-down list. 8. Set the name of the symbol to myrectangle1 and select OK to save the new symbol in the library. Double click on the myrectangle1 symbol in the library to open it in the Symbol edit window. Use the Fill Panel to change the Symbols colour. 9. Close the editing window and drag a copy of your new symbol onto the stage: The Properties Panel Although you may find it strange to think in terms of X,Y coordinates you will soon learn how important this can be when you want to position objects on the Canvas. In this respect the PROPERTIES Panel provides a very accurate way of controlling the size (W, H) and position (X, Y) of any object on the canvas. As mentioned above, the Properties Panel shows: (i) the exact dimensions of an object in pixels (W: Width, H: Height), (ii) the precise location of an object in terms of its X,Y coordinates, relative to the top left hand corner of your canvas, which has the coordinates 0,0 (X=0 and Y=0). 1. Select the top shape in your mmho1.png file and open the Properties Panel (bottom left hand corner of the canvas): mm-0010.doc Page 6 of 7

7 2. This displays two very important pieces of information: (i) the pixel dimensions of the object: W: =144 pixels, H: = 94 pixels, (ii) the X, Y coordinates of the object: X = 25 pixels = horizontal distance from the left hand edge of the canvas Y = 25 pixels = the vertical distance from the top edge of the canvas. 3. Select the other objects in turn and note their properties. 4. Experiment with changing the dimensions (W,H) of an object and its position (X,Y) on the canvas. 5. Drag another square from the library and using the Properties Panel (X,Y) accurately position it below the first square. 6. Re-save your file as mmho1.png Getting Help Select Help Fireworks Help on the Main Menu, or F1 to display the Fireworks CS4 User Guide: FURTHER READING AND RESOURCES W3 Schools Web Multimedia Tutorial: History of Fireworks: Fireworks CS4 Documentation and Resources: Getting Started with Fireworks CS4: Adobe CS4 Help and Support: Fireworks Showcase: 6&loc=en_us Fireworks Developer Centre: CS4 Productivity for Web Professionals: _WebProfessionals.pdf mm-0010.doc Page 7 of 7

HO-FL1: INTRODUCTION TO FLASH

HO-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 information

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks 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 ------------------------------------------------------------------------------------------------

More information

Fireworks 3 Animation and Rollovers

Fireworks 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 information

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special. This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the

More information

ITEC185. Introduction to Digital Media

ITEC185. Introduction to Digital Media ITEC185 Introduction to Digital Media ADOBE ILLUSTRATOR CC 2015 What is Adobe Illustrator? Adobe Illustrator is a program used by both artists and graphic designers to create vector images. These images

More information

Education and Training CUFMEM14A. Exercise 2. Create, Manipulate and Incorporate 2D Graphics

Education 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 information

Using Adobe Photoshop

Using Adobe Photoshop Using Adobe Photoshop 2 In this section we ll look at some essential things you need to know in order to use Photoshop effectively. First of all, we ll take a look at customising Photoshop s settings and

More information

How to create a prototype

How to create a prototype Adobe Fireworks Guide How to create a prototype In this guide, you learn how to use Fireworks to combine a design comp and a wireframe to create an interactive prototype for a widget. A prototype is a

More information

Overview of Adobe Fireworks

Overview of Adobe Fireworks Adobe Fireworks Overview of Adobe Fireworks In this guide, you ll learn how to do the following: Work with the Adobe Fireworks workspace: tools, Document windows, menus, and panels. Customize the workspace.

More information

Overview of Adobe Fireworks CS6

Overview 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 information

Using Adobe Photoshop

Using Adobe Photoshop Using Adobe Photoshop 2 In this section we ll look at some essential things you need to know in order to use Photoshop effectively. First of all, we ll take a look at customising Photoshop s settings and

More information

ClipArt and Image Files

ClipArt and Image Files ClipArt and Image Files Chapter 4 Adding pictures and graphics to our document not only breaks the monotony of text it can help convey the message quickly. Objectives In this section you will learn how

More information

2.) Open you re my documents folder, and then open you re my pictures folder. Now create a new folder called mask advert.

2.) Open you re my documents folder, and then open you re my pictures folder. Now create a new folder called mask advert. PhotoShop Help File Sleeping mask advert lesson 1.) Open adobe Photoshop. 2.) Open you re my documents folder, and then open you re my pictures folder. Now create a new folder called mask advert. 3.) From

More information

Adobe Fireworks CS Essential Techniques

Adobe Fireworks CS Essential Techniques Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

Learning Microsoft Word By Greg Bowden. Chapter 10. Drawing Tools. Guided Computer Tutorials

Learning 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 information

Inserting and Editing Pictures in Dreamweaver 8. Terminal Objective: To insert and edit an image into Dreamweaver 8.

Inserting and Editing Pictures in Dreamweaver 8. Terminal Objective: To insert and edit an image into Dreamweaver 8. Inserting and Editing Pictures in Dreamweaver 8 Terminal Objective: To insert and edit an image into Dreamweaver 8. Information: If you have already inserted your image, go to page 3 to begin the process

More information

ILLUSTRATOR. Introduction to Adobe Illustrator. You will;

ILLUSTRATOR. Introduction to Adobe Illustrator. You will; ILLUSTRATOR You will; 1. Learn Basic Navigation. 2. Learn about Paths. 3. Learn about the Line Tools. 4. Learn about the Shape Tools. 5. Learn about Strokes and Fills. 6. Learn about Transformations. 7.

More information

2. If a window pops up that asks if you want to customize your color settings, click No.

2. 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 information

Unit 17. Level 1/2 Unit 17 Multimedia Products Development

Unit 17. Level 1/2 Unit 17 Multimedia Products Development Unit 17 Level 1/2 Unit 17 Multimedia Products Development Unit 17 Outcomes A: Understand the uses and features of multimedia products. Know why individuals or organisations use multimedia products. Learn

More information

Section 5. Pictures. By the end of this Section you should be able to:

Section 5. Pictures. By the end of this Section you should be able to: Section 5 Pictures By the end of this Section you should be able to: Use the Clip Gallery Insert and Delete Pictures Import Pictures Move, Resize and Crop Pictures Add Borders and Colour Wrap Text around

More information

ADOBE TRAINING CS6 PHOTOSHOP BASICS: EDITING PHOTOS & WORKING WITH TEXT - 1

ADOBE TRAINING CS6 PHOTOSHOP BASICS: EDITING PHOTOS & WORKING WITH TEXT - 1 ADOBE TRAINING CS6 PHOTOSHOP BASICS: EDITING PHOTOS & WORKING WITH TEXT Photoshop is the leading professional software for editing and adjusting photos, images and other graphic projects. It is a very

More information

Drawing Tools. Drawing a Rectangle

Drawing 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 information

How 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?

How 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 information

Animated Gif - Illustrator /Text and Shapes

Animated Gif - Illustrator /Text and Shapes - Illustrator /Text and Shapes Use Adobe Illustrator to create an animated gif. Use a variety of shapes, outlined type, or live traced objects as your subjects. Apply all the skills that we have developed

More information

ITP 101 Project 2 - Photoshop

ITP 101 Project 2 - Photoshop ITP 101 Project 2 - Photoshop Project Objectives Learn how to use an image editing application to create digital images. We will use Adobe Photoshop for this project. Project Details To continue the development

More information

Paint/Draw Tools. Foreground color. Free-form select. Select. Eraser/Color Eraser. Fill Color. Color Picker. Magnify. Pencil. Brush.

Paint/Draw Tools. Foreground color. Free-form select. Select. Eraser/Color Eraser. Fill Color. Color Picker. Magnify. Pencil. Brush. Paint/Draw Tools There are two types of draw programs. Bitmap (Paint) Uses pixels mapped to a grid More suitable for photo-realistic images Not easily scalable loses sharpness if resized File sizes are

More information

Page 1. Fireworks Exercise

Page 1. Fireworks Exercise Page 1 Fireworks Exercise 1. Create a New Fireworks Document - File>New. For this exercise, choose 800 for width, 600 for height, resolution 72 pixels/inch, canvas color to Transparent, then choose OK.

More information

Creating Buttons and Pop-up Menus

Creating 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 information

Interactive Tourist Map

Interactive 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 information

CREATING A BANNER IN PHOTOSHOP

CREATING A BANNER IN PHOTOSHOP CREATING A BANNER IN PHOTOSHOP 1 This tutorial will take you through how to create your own basic banner in Photoshop. We will go: A. Creating a background 1. Launch (Open) Photoshop CS5 The interface

More information

Adobe Flash CS4 Part 1: Introduction to Flash

Adobe Flash CS4 Part 1: Introduction to Flash CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Flash CS4 Part 1: Introduction to Flash Fall 2010, Version 1.0 Table of Contents Introduction...3 Downloading the Data Files...3

More information

Adobe Fireworks is an incredible application with specific solutions to

Adobe Fireworks is an incredible application with specific solutions to Chapter 1: Introducing Fireworks CS4 In This Chapter Understanding when you should use Fireworks Discovering the workspace Finding out about the tools Looking into the views Using the basic selection tools

More information

Fireworks Basics. The Fireworks Interface

Fireworks 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 information

Adobe Photoshop Sh S.K. Sublania and Sh. Naresh Chand

Adobe Photoshop Sh S.K. Sublania and Sh. Naresh Chand Adobe Photoshop Sh S.K. Sublania and Sh. Naresh Chand Photoshop is the software for image processing. With this you can manipulate your pictures, either scanned or otherwise inserted to a great extant.

More information

From the dock at the left, right, top, or bottom of your monitor screen, open the Finder.

From the dock at the left, right, top, or bottom of your monitor screen, open the Finder. GETTING STARTED Composition & Defamiliarization: Using Adobe Illustrator as a Tool Kristen Foster 2010 Drawing and Composition Module OTIS College of Art and Design Trash preferences + Open Illustrator

More information

Macromedia - Fireworks TechNotes: How to create transparent Pop-up Menus

Macromedia - 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 information

Creating Vector Shapes Week 2 Assignment 1. Illustrator Defaults

Creating Vector Shapes Week 2 Assignment 1. Illustrator Defaults Illustrator Defaults Before we begin, we are going to make sure that all of us are using the same settings within our application. For this class, we will always want to make sure that our application

More information

Adobe Photoshop CS2 Reference Guide For Windows

Adobe Photoshop CS2 Reference Guide For Windows This program is located: Adobe Photoshop CS2 Reference Guide For Windows Start > All Programs > Photo Editing and Scanning >Adobe Photoshop CS2 General Keyboarding Tips: TAB Show/Hide Toolbox and Palettes

More information

Fireworks. what can it do?

Fireworks. what can it do? Fireworks what can it do? Image editing, image optimizing, HTML & JavaScript, primarily for web site use. Good integration with DreamWeaver and Flash Highlighted features Better pop-up menu code creation

More information

Graphic Design & Digital Photography. Photoshop Basics: Working With Selection.

Graphic Design & Digital Photography. Photoshop Basics: Working With Selection. 1 Graphic Design & Digital Photography Photoshop Basics: Working With Selection. What You ll Learn: Make specific areas of an image active using selection tools, reposition a selection marquee, move and

More information

Adobe Flash CS4 Part 2: Working with Symbols

Adobe Flash CS4 Part 2: Working with Symbols CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Flash CS4 Part 2: Working with Symbols Fall 2010, Version 1.0 Table of Contents Introduction...2 Downloading the Data Files...2

More information

How to create shapes. Drawing basic shapes. Adobe Photoshop Elements 8 guide

How to create shapes. Drawing basic shapes. Adobe Photoshop Elements 8 guide How to create shapes With the shape tools in Adobe Photoshop Elements, you can draw perfect geometric shapes, regardless of your artistic ability or illustration experience. The first step to drawing shapes

More information

To build shapes from scratch, use the tools are the far right of the top tool bar. These

To build shapes from scratch, use the tools are the far right of the top tool bar. These 3D GAME STUDIO TUTORIAL EXERCISE #5 USE MED TO SKIN AND ANIMATE A CUBE REVISED 11/21/06 This tutorial covers basic model skinning and animation in MED the 3DGS model editor. This exercise was prepared

More information

Screen Designer. The Power of Ultimate Design. 43-TV GLO Issue 2 01/01 UK

Screen Designer. The Power of Ultimate Design. 43-TV GLO Issue 2 01/01 UK Screen Designer The Power of Ultimate Design 43-TV-25-13 GLO Issue 2 01/01 UK 43-TV-25-13 GLO Issue 2 01/01 UK Table of Contents Table of Contents Honeywell Screen Designer - The Power of Ultimate Design

More information

Adobe Flash CS3 Reference Flash CS3 Application Window

Adobe 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 information

Create Sponsor Scroll

Create Sponsor Scroll Appendix B Create Sponsor Scroll TABLE OF CONTENTS... 1 CREATE, ANIMATE AND UPLOAD SPONSOR LOGOS Create... 2 Animate... 5 Upload... 6 Please note, this process requires two different programs, which should

More information

CS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 02: Introduction to Photoshop Part 1

CS 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 information

User Guide Version 3.2.1

User Guide Version 3.2.1 User Guide Version 3.2.1 www.thephotobookclub.com.au September 2012 1 Contents Introduction... 4 1.1 PhotobookClub Cool Tools... 6 1.2 Copyright and Content... 6 1.3 Privacy Policy... 6 2.0 Downloading

More information

ILLUSTRATOR TUTORIAL-1 workshop handout

ILLUSTRATOR TUTORIAL-1 workshop handout Why is Illustrator a powerful tool? ILLUSTRATOR TUTORIAL-1 workshop handout Computer graphics fall into two main categories, bitmap graphics and vector graphics. Adobe Illustrator is a vector based software

More information

Adobe illustrator Introduction

Adobe illustrator Introduction Adobe illustrator Introduction This document was prepared by Luke Easterbrook 2013 1 Summary This document is an introduction to using adobe illustrator for scientific illustration. The document is a filleable

More information

MS Publisher 2007: Graphics. Lesson Notes Author: Pamela Schmidt

MS Publisher 2007: Graphics. Lesson Notes Author: Pamela Schmidt MS Publisher 2007: Graphics Lesson Notes Author: Pamela Schmidt Auto Shapes When a shape tool is selected, a precision pointer (cross hair) will appear when the mouse pointer is taken over the document.

More information

Note: Photoshop tutorial is spread over two pages. Click on 2 (top or bottom) to go to the second page.

Note: Photoshop tutorial is spread over two pages. Click on 2 (top or bottom) to go to the second page. Introduction During the course of this Photoshop tutorial we're going through 9 major steps to create a glass ball. The main goal of this tutorial is that you get an idea how to approach this. It's not

More information

November 19,

November 19, http://www.eee.uci.edu/workshops/ Web Images: A Snapshot What kinds of images are GIF JPEG used on the web? What does the name stand for? Graphics Interchange Format Joint Photographic Experts Group Animations

More information

TITLE: 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. 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 information

Understanding the Interface

Understanding the Interface 2. Understanding the Interface Adobe Photoshop CS2 for the Web H O T 2 Understanding the Interface The Welcome Screen Interface Overview Customizing Palette Locations Saving Custom Palette Locations Customizing

More information

Cropping an Image for the Web

Cropping an Image for the Web Cropping an Image for the Web This guide covers how to use the Paint software included with Microsoft Windows to crop images for use on a web page. Opening Microsoft Paint (In Windows Accessories) On your

More information

On the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW

On 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 information

Part 1: Basics. Page Sorter:

Part 1: Basics. Page Sorter: Part 1: Basics Page Sorter: The Page Sorter displays all the pages in an open file as thumbnails and automatically updates as you add content. The page sorter can do the following. Display Pages Create

More information

Lab #3: Web Design with Graphics

Lab #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 information

Using Graphics. Digital Camera. Auto Shapes

Using Graphics. Digital Camera. Auto Shapes AutoShape Using Graphics Internet The following graphic elements are available to enhance your presentation Clip Art AutoShapes Fill effects Shadow effects 3D effects Digital Camera WordArt Digital Camera

More information

Lesson 6 Adding Graphics

Lesson 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 information

Microsoft Visio Working with Shapes

Microsoft 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 information

Introduction to Flash - Creating a Motion Tween

Introduction to Flash - Creating a Motion Tween Introduction to Flash - Creating a Motion Tween This tutorial will show you how to create basic motion with Flash, referred to as a motion tween. Download the files to see working examples or start by

More information

Creating Multimedia SWF Products

Creating Multimedia SWF Products Chapter InDesign can be used to create multimedia products that combine movie clips, sounds, images and animations into professional products that can be distributed on CD, DVD or as SWF files that can

More information

Think of layers as a stack of transparencies. Layers can be changed independently of other layers by clicking on its name in the layers palette.

Think of layers as a stack of transparencies. Layers can be changed independently of other layers by clicking on its name in the layers palette. Layer Techniques Think of layers as a stack of transparencies. Layers can be changed independently of other layers by clicking on its name in the layers palette. Reviewing the Layers Palette: A: Show/Hide

More information

Adobe Animate Basics

Adobe Animate Basics Adobe Animate Basics What is Adobe Animate? Adobe Animate, formerly known as Adobe Flash, is a multimedia authoring and computer animation program. Animate can be used to design vector graphics and animation,

More information

In this exercise you will be creating the graphics for the index page of a Website for children about reptiles.

In 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 information

1. Open PowerPoint and you will see the introductory screen that contains different themes and templates. From the selection displayed, choose Slice.

1. Open PowerPoint and you will see the introductory screen that contains different themes and templates. From the selection displayed, choose Slice. PowerPoint Assessment ***Remember! This is a test and you cannot ask for help. This must be done completely on your own. If you have forgotten a skill, please go to my Tutorials page on my website and

More information

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP GIMP WEB 2.0 ICONS Web 2.0 Banners: Download E-Book WEB 2.0 ICONS: DOWNLOAD E-BOOK OPEN GIMP GIMP is all about IT (Images and Text) Step 1: To begin a new GIMP project, from the Menu Bar, select File New.

More information

ENGL 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 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 information

SETTINGS AND WORKSPACE

SETTINGS AND WORKSPACE ADOBE ILLUSTRATOR Adobe Illustrator is a program used to create vector illustrations / graphics (.ai/.eps/.svg). These graphics will then be used for logos, banners, infographics, flyers... in print and

More information

Photoshop Basics A quick introduction to the basic tools in Photoshop

Photoshop Basics A quick introduction to the basic tools in Photoshop Photoshop Basics A quick introduction to the basic tools in Photoshop Photoshop logo courtesy Adobe Systems Inc. By Dr. Anthony R. Curtis Mass Communication Department University of North Carolina at Pembroke

More information

HAPPY HOLIDAYS PHOTO BORDER

HAPPY HOLIDAYS PHOTO BORDER HAPPY HOLIDAYS PHOTO BORDER In this Photoshop tutorial, we ll learn how to create a simple and fun Happy Holidays winter photo border! Photoshop ships with some great snowflake shapes that we can use in

More information

SMART Board Quick Reference

SMART Board Quick Reference The Ready Light Your SMART Board interactive whiteboard includes a Ready Light that indicates the status of your interactive whiteboard. Color of Ready Light Not lit Solid green Flashing green Solid red

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block

More information

Fig. A. Fig. B. Fig. 1. Fig. 2. Fig. 3 Fig. 4

Fig. 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 information

Locate it inside of your Class/DreamWeaver folders and open it up.

Locate it inside of your Class/DreamWeaver folders and open it up. Simple Rollovers A simple rollover graphic is one that changes somehow when the mouse rolls over it. The language used to write rollovers is JavaScript. Luckily for us, when we use DreamWeaver we don t

More information

COMP : Practical 6 Buttons and First Script Instructions

COMP : Practical 6 Buttons and First Script Instructions COMP126-2006: Practical 6 Buttons and First Script Instructions In Flash, we are able to create movies. However, the Flash idea of movie is not quite the usual one. A normal movie is (technically) a series

More information

Guide to WB Annotations

Guide 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 information

This document should only be used with the Apple Macintosh version of Splosh.

This document should only be used with the Apple Macintosh version of Splosh. Splosh 1 Introduction Splosh is an easy to use art package that runs under both Microsoft Windows and the Macintosh Mac OS Classic or Mac OS X operating systems. It should however be noted that the Apple

More information

Creating a Text Frame. Create a Table and Type Text. Pointer Tool Text Tool Table Tool Word Art Tool

Creating a Text Frame. Create a Table and Type Text. Pointer Tool Text Tool Table Tool Word Art Tool Pointer Tool Text Tool Table Tool Word Art Tool Picture Tool Clipart Tool Creating a Text Frame Select the Text Tool with the Pointer Tool. Position the mouse pointer where you want one corner of the text

More information

Using Microsoft Word. Tables

Using Microsoft Word. Tables Using Microsoft Word are a useful way of arranging information on a page. In their simplest form, tables can be used to place information in lists. More complex tables can be used to arrange graphics on

More information

MSP Yearbooks Quick Start Guide

MSP Yearbooks Quick Start Guide MSP Yearbooks Quick Start Guide March 2017 Contents Quick Start Guide 1 Introduction 1.1 Welcome to MSP Yearbooks 1 1.2 Help at your fingertips 1 2 Before you start... 2.1 Security settings information

More information

Bold, Italic and Underline formatting.

Bold, 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 information

Quick Guide for Photoshop CC Basics April 2016 Training:

Quick Guide for Photoshop CC Basics April 2016 Training: Photoshop CC Basics Creating a New File 1. Click File > New 2. Keep Default Photoshop Size selected in the Preset drop-down list. 3. Click OK. Showing Rulers 1. On the Menu bar, click View. 2. Click Rulers.

More information

POWERPOINT BASICS: MICROSOFT OFFICE 2010

POWERPOINT 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 information

Motion Guide Animations

Motion Guide Animations Motion Guide Animations Chapter 8 Animations that involve objects orbiting around a point can be done using fixed points, but better results can sometimes be achieved through the use of a circular motion

More information

Anima-LP. Version 2.1alpha. User's Manual. August 10, 1992

Anima-LP. Version 2.1alpha. User's Manual. August 10, 1992 Anima-LP Version 2.1alpha User's Manual August 10, 1992 Christopher V. Jones Faculty of Business Administration Simon Fraser University Burnaby, BC V5A 1S6 CANADA chris_jones@sfu.ca 1992 Christopher V.

More information

L E S S O N 2 Background

L E S S O N 2 Background Flight, Naperville Central High School, Naperville, Ill. No hard hat needed in the InDesign work area Once you learn the concepts of good page design, and you learn how to use InDesign, you are limited

More information

GIMP ANIMATION EFFECTS

GIMP 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 information

Exercise III: Creating a Logo with Illustrator CS6

Exercise III: Creating a Logo with Illustrator CS6 Exercise III: Creating a Logo with Illustrator CS6 Project 1: Creating Logos with the Shape Tools Now that we have some experience with Illustrator s tools, let s expand our goal to create a logo, web

More information

IT82: Multimedia Macromedia Director Practical 1

IT82: Multimedia Macromedia Director Practical 1 IT82: Multimedia Macromedia Director Practical 1 Over the course of these labs, you will be introduced Macromedia s Director multimedia authoring tool. This is the de facto standard for time-based multimedia

More information

Inkscape tutorial: Donate button

Inkscape 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

Word 2003: Flowcharts Learning guide

Word 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 information

CiDA Certificate in Digital Applications

CiDA Certificate in Digital Applications CiDA Certificate in Digital Applications CiDA EXAM TOP TIPS Make your home page with background colour, insert a table with 4 rows 3 columns and 0 padding. Add your fireworks banner, buttons, email

More information

for ArcSketch Version 1.1 ArcSketch is a sample extension to ArcGIS. It works with ArcGIS 9.1

for ArcSketch Version 1.1 ArcSketch is a sample extension to ArcGIS. It works with ArcGIS 9.1 ArcSketch User Guide for ArcSketch Version 1.1 ArcSketch is a sample extension to ArcGIS. It works with ArcGIS 9.1 ArcSketch allows the user to quickly create, or sketch, features in ArcMap using easy-to-use

More information

INKSCAPE BASICS. 125 S. Prospect Avenue, Elmhurst, IL (630) elmhurstpubliclibrary.org. Create, Make, and Build

INKSCAPE BASICS. 125 S. Prospect Avenue, Elmhurst, IL (630) elmhurstpubliclibrary.org. Create, Make, and Build INKSCAPE BASICS Inkscape is a free, open-source vector graphics editor. It can be used to create or edit vector graphics like illustrations, diagrams, line arts, charts, logos and more. Inkscape uses Scalable

More information

Interface. 2. Interface Photoshop CS/ImageReady CS for the Web H O T

Interface. 2. Interface Photoshop CS/ImageReady CS for the Web H O T 2. Interface Photoshop CS/ImageReady CS for the Web H O T 2. Interface The Welcome Screen Interface Overview Using the Toolbox Using Palettes Using the Options Bar Creating a Tool Preset Resetting Tools

More information

Chapter 5. Inserting Objects. Highlights

Chapter 5. Inserting Objects. Highlights Chapter 5 Inserting Objects Highlights 5. Inserting AutoShapes, WordArts and ClipArts 5. Changing Object Position, Size and Colour 5. Drawing Lines 5.4 Inserting Pictures and Text Boxes 5.5 Inserting Movies

More information