ART 170: Web Design 1

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "ART 170: Web Design 1"

Transcription

1 Banner Design Project Overview & Objectives Everyone will design a banner for a veterinary clinic. Objective Summary of the Project General objectives for the project in its entirety are: Design a banner that best represents a veterinarian practice called Comfort Care Veterinary Clinic. You MUST use Fireworks to design, optimize, and export the banners. Create a large header banner with a seamless tiling background image. Create a second smaller footer banner, based on the first design idea. Create an alternative animated large header banner. Optimize and submit your final banners as Animated GIF or JPG files; the final animated banner will be saved and exported as an animated GIF and the static banner as a JPG. Keep copies of your original artwork files as Fireworks Native PNG files. Creative and artwork requirements are as follows: o Incorporate original ideas o Use original, vector artwork created in Fireworks o You may use photos as secondary design elements but they must be original photographs Typography, content and color choices are up to you o Create color palettes in your design that compliment one another and your theme o Consider how texture, pattern, gradients, etc., can be used to express your ideas o Consider scale, depth and positioning of items in your design. Consider layout, composition, color and texture concepts covered in Chapters 2, 3 and 4 of your textbook The Principles of Beautiful Web Design Create two sample HTML pages per instructions o Successfully add banner images and tiling background o Create another page with the animated banner and tiling background o Add text content o Create CSS to guide basic HTML tags o Link the static and animated banners to one another 1

2 WEEK ONE Objectives 1. Create a folder for your banner work on the server so that it is saved from week to week. 2. Experiment with different ideas: consider color schemes, masking techniques, vector shapes, text, and logo ideas. As you play with ideas, consider how a simple animation will eventually figure into the animated gif version of the banner. 3. Generate two different ideas for the static banner this week. We will look at them and do critiques one week from today. 4. Optimize the banner using the two or four up views to compare file sizes versus quality. 5. Export and upload the two versions to your web folder. Step by Step for Week One Begin work on the initial rough design ideas. Experiment in Fireworks, and consider creative interpretations of the theme and what it means to you. Incorporate unique ideas, and think outside of the rectangle. You will begin with the static (as opposed to animated) banner first. It's OK if these ideas are rough you will be revising them in the coming weeks. Just make sure you can explain your concepts clearly for critique. Setting up FTP and a Folder to Save the Banners: Set up a banner folder on the desktop. Launch Dreamweaver and select Site > New Site. Set up the banner site. (Give it a name, point to the desktop banner folder as the local site folder, and set up the server with the host, your username and password.) Launch Fireworks and create a new document o Size it 960 pixels wide by 300 pixels high and with a resolution of 72 and a background of white. The banner won t be 300 pixels high, but the added height will give you more space while you experiment. Save your native PNG file in Fireworks to your desktop banner folder. o Select File > Save As in Fireworks o Choose Fireworks PNG if it s not already selected Name your file banner01-yourname.png 2

3 Fw.png will ensure you are saving an original editable file with layers intact. Upload the banner to the banner folder on the server. Do this frequently as you work. Save early, save often! You can also save a copy to your Drop Box folder. This will give you another backup. You can access both the server and the Drop Box folder at home or on the computer labs so you can continue work at your convenience. Kuler: Creative Color Considerations Use the Kuler website or Fireworks extension to create interesting color combinations. Select Window > Extensions > Kuler to access its panel in Fireworks. Select a color scheme; from the arrow on the right, Save to Swatches Panel. o You can watch a video overview of Kuler at o Consider how color theory and color choices relate to your theme; consider legibility of type, content and the logo in your design. Techniques to Trigger Your Creativity To overcome the rectangular nature of the web, many designers place masked images on their pages. Fireworks provides three kinds of masks. Auto Vector Mask Vector Mask Bitmap Masks Bitmap Masks Bitmap masks hide bitmap image data using a pixel-based mask. You can create bitmap masks using other bitmap images, selections or the Brush tool. To create a selection for a mask, you can use any of the bitmap selection tools. Decide on the type of edge you want for the selection (Hard, Anti-alias, Feather) using the Live Marquee settings in the Properties panel. Then, just draw your selection. Using the Brush tool, you can easily create or edit the mask live on the canvas, just by painting. Black hides, white reveals, and shades of gray produce semi-transparency. If you set your brush color to a shade of gray, the pixels you paint over will be semitransparent. 1. Import an image. 2. Use a selection tool such as the polygon selection tool to draw around the area you want in the mask. 3. Feather the selection. 4. Click the Add Mask icon at the bottom of the Layers panel. 5. Use the brush tool (soft rounded works well) to edit the mask. 3

4 6. Black hides and white reveals. Vector Masks Vector masks can be applied to vectors, bitmaps, groups, or graphic symbols. Compared to bitmap masks, vector masks tend to have a higher degree of control and accuracy, because you use a path, not a brush, to create them. It s easy to change the fill or stroke of a vector mask. Generating the same type of effect with a bitmap mask can be more time-consuming. Vector masks use one of two modes: Path Outline or Grayscale Appearance. You can change the mode in the Properties panel. In Path Outline mode, the vector mask acts like a cookie cutter, using the shape of the path to act as the mask. In Grayscale Appearance, any bitmap information in the vector fill gets converted to a grayscale alpha channel. Grayscale Appearance uses the pixel values of the vector s fill and the vector shape itself to create the mask. If your vector mask has a range of tones in it such as a gradient fill the image will be hidden or revealed based on those tones. Just like with bitmap masks, black hides, white reveals, and shades of gray produce semi-transparency, as in this example, where a linear gradient has been used to fill the vector shape. 1. Import image to canvas. 2. Draw ellipse shape over it. 3. Use the white, black preset gradient. 4. Select the image and the ellipse shape. 5. Choose Modify > Mask > Group as Mask. 6. Use the small blue handle to reposition the mask. 7. Auto Vector Mask Command. Instant Masks Choose Commands > Creative > Auto Vector Mask. Creating the Static Banner In Fireworks 1. Select File>Import to place images on the page. 2. Navigate to the image you want to import. 3. Click and drag the cursor to the size you want the imported image to be. 4. Apply one of the masking techniques: bitmap, vector, or auto vector. 5. Apply creative text techniques such as text on a path. 6. Create a logo for the clinic Comfort Care Veterinary Clinic. 7. In the Optimize panel, select JPG as the image format. OPTMIZING AND EXPORTING IMAGES FOR THE WEB 4

5 Consider the following when preparing images for the web: FORMAT: Identify the appropriate file format for our image GIF, JPG or PNG; RESOLUTION: Optimize images by adjusting the resolution: o Resolution (DPI, dots per inch) for web images should be 72 DPI (in most cases). o High quality cameras/scanners may capture images at 300, 250 or 150 dpi. PHYSICAL SIZE: Optimize images by reducing the physical size (when possible); COMPRESSION: Optimize images by adjusting colors, palette, and compression; COLOR MODE: Set images to RGB color mode (adjust any print or scanned images); o Web images use the RGB color mode. o Images that come from a printer, may use PMS or CMYK color mode. QUALITY: Find a balance between quality and file size. Open each of your banner PNG files in Fireworks and do the following: Open the Optimize panel if it s not already open (Window > Optimize) o Select JPG or GIF from file format menu depending on whether it is a static or animated banner o Choose Adaptive from the optimized palette menu for GIF images o Experiment with the number of colors in your GIF, comparing quality to file size o Choose a quality in the quality slider for JPG images Choose the 2 Up or 4 Up button (upper left corner) o this will show the original as well as the optimized versions A summary of all optimization settings will display under the image in the 2Up or 4Up screen Select File > Export to save your JPG or GIF files in your banners folder 5

Fireworks CS4 Tutorial Part 1: Intro

Fireworks CS4 Tutorial Part 1: Intro Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the

More information

BITMAPS TO VECTOR LOGOS

BITMAPS TO VECTOR LOGOS BITMAPS TO VECTOR LOGOS A. First set up a new page in Corel Draw. 1. Left click on the file menu 2. Then left click on new B. Importing Bitmaps 1. Understanding what a bitmap is A bitmap is a picture composed

More information

Adobe Illustrator CS5 Part 1: Introduction to Illustrator

Adobe Illustrator CS5 Part 1: Introduction to Illustrator CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Illustrator CS5 Part 1: Introduction to Illustrator Summer 2011, Version 1.0 Table of Contents Introduction...2 Downloading

More information

ACE: Illustrator CC Exam Guide

ACE: Illustrator CC Exam Guide Adobe Training Services Exam Guide ACE: Illustrator CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation

More information

Course Project Lab 3 - Creating a Logo (Illustrator)

Course Project Lab 3 - Creating a Logo (Illustrator) Course Project Lab 3 - Creating a Logo (Illustrator) In this lab you will learn to use Adobe Illustrator to create a vector-based design logo. 1. Start Illustrator. Open the lizard.ai file via the File>Open

More information

m ac romed ia Fi r e wo r k s Curriculum Guide

m ac romed ia Fi r e wo r k s Curriculum Guide m ac romed ia Fi r e wo r k s Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra

More information

VIRGINIA WESTERN COMMUNITY COLLEGE

VIRGINIA WESTERN COMMUNITY COLLEGE 36T Revised Fall 2015 Cover Page 36TITD 112 21TDesigning Web Page Graphics Program Head: Debbie Yancey Revised: Fall 2015 Dean s Review: Deborah Yancey Dean 21T Lab/Recitation Revised Fall 2015 None ITD

More information

Graphic Design Basics Tutorial

Graphic Design Basics Tutorial Graphic Design Basics Tutorial This tutorial will guide you through the basic tasks of designing graphics with Macromedia Fireworks MX 2004. You ll get hands-on experience using the industry s leading

More information

ACADEMIC TECHNOLOGY SUPPORT

ACADEMIC TECHNOLOGY SUPPORT ACADEMIC TECHNOLOGY SUPPORT Adobe Photoshop Introduction Part 1 (Basics- Image Manipulation) ats@etsu.edu 439-8611 www.etsu.edu/ats Table of Contents: Overview... 1 Objectives... 1 Basic Graphic Terminology...

More information

Fireworks for Graphics and Images

Fireworks for Graphics and Images Fireworks for Graphics and Images Joan Weeks SLIS Computer Labs Mgr. October 2009 Fireworks for Banners and Images Fireworks is a web developer s tool to make banners and graphics, as well as format images

More information

Scanning in Windows XP: Basics Learning guide

Scanning in Windows XP: Basics Learning guide Scanning in Windows XP: Basics Learning guide If you have ever wanted to scan documents and images on different scanners in your department, you've probably faced the difficulties that arise from needing

More information

Web Publishing Guidelines

Web Publishing Guidelines An Artist s Digital Toolkit Allan Wood, for educational use only Web Publishing Guidelines Setting Up Files for the Web When creating files to be used for the Web, the measurement settings should be in

More information

Graphic Design. Background: The part of an artwork that appears to be farthest from the viewer, or in the distance of the scene.

Graphic Design. Background: The part of an artwork that appears to be farthest from the viewer, or in the distance of the scene. Graphic Design Active Layer- When you create multi layers for your images the active layer, or the only one that will be affected by your actions, is the one with a blue background in your layers palette.

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

Recipes4Success. Animate a Rocket Ship. Frames 6 - Drawing Tools

Recipes4Success. Animate a Rocket Ship. Frames 6 - Drawing Tools Recipes4Success You can use the drawing tools and path animation tools in Frames to create illustrated cartoons. In this Recipe, you will draw and animate a rocket ship. 2014. All Rights Reserved. This

More information

TUTORIAL 4 Building a Navigation Bar with Fireworks

TUTORIAL 4 Building a Navigation Bar with Fireworks TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar

More information

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013 INPUT OUTPUT 08 / IMAGE QUALITY & VIEWING In this section we will cover common image file formats you are likely to come across and examine image quality in terms of resolution and bit depth. We will cover

More information

PowerPoint 2004 Presentation Design

PowerPoint 2004 Presentation Design PowerPoint 2004 Presentation Design This instruction/guide will focus on: Working with Master Views Modifying an existing design template Creating a custom design template Inserting a background graphic

More information

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional.

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. Vectorizing images Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. In this tutorial, you will trace a bitmap image to convert it to

More information

TUTORIAL. Introduction to Adobe Fireworks CS4

TUTORIAL. Introduction to Adobe Fireworks CS4 TUTORIAL October 2008 2008 Adobe Systems Incorporated. All rights reserved. If this tutorial is distributed with software that includes an end user agreement, this guide, as well as the software described

More information

Collect ingredients. Photographs. Art. Scans. Or fill and paint new elements inside Photoshop itself. Or, import graphics from other applications.

Collect ingredients. Photographs. Art. Scans. Or fill and paint new elements inside Photoshop itself. Or, import graphics from other applications. Collect ingredients. Photographs. Art. Scans. Or fill and paint new elements inside Photoshop itself. Or, import graphics from other applications. (This is the default Photoshop application window. My

More information

So you say you want something printed...

So you say you want something printed... So you say you want something printed... Well, that s great! You ve come to the right place. Whether you re having us design and edit your work, or you fancy yourself a designer and plan to hand over your

More information

Image Resolution. Color Spaces: RGB and CMYK. File Types and when to use. Image Resolution. Finding Happiness at 300 dots-per-inch

Image Resolution. Color Spaces: RGB and CMYK. File Types and when to use. Image Resolution. Finding Happiness at 300 dots-per-inch Image Resolution Color Spaces: RGB and CMYK File Types and when to use Image Resolution Finding Happiness at 300 dots-per-inch Rules to remember Text should be 400dpi at the final size in the layout. Images

More information

QUICK REFERENCE: ADOBE ILLUSTRATOR CS2 AND CS3 SECTION 1: CS3 TOOL BOX: PAGE 2 SECTION 2: CS2 TOOL BOX: PAGE 11

QUICK REFERENCE: ADOBE ILLUSTRATOR CS2 AND CS3 SECTION 1: CS3 TOOL BOX: PAGE 2 SECTION 2: CS2 TOOL BOX: PAGE 11 QUICK REFERENCE, ADOBE ILLUSTRATOR, PAGE 1 QUICK REFERENCE: ADOBE ILLUSTRATOR CS2 AND CS3 CS2 SECTION 1: CS3 TOOL BOX: PAGE 2 SECTION 2: CS2 TOOL BOX: PAGE 11 SECTION 3: GENERAL CONCEPTS: PAGE 14 SELECTING

More information

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades. 28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML

More information

Overview of the Adobe Flash Professional CS6 workspace

Overview of the Adobe Flash Professional CS6 workspace Overview of the Adobe Flash Professional CS6 workspace In this guide, you learn how to do the following: Identify the elements of the Adobe Flash Professional CS6 workspace Customize the layout of the

More information

Dear Candidate, Thank you, Adobe Education

Dear Candidate, Thank you, Adobe Education Dear Candidate, In preparation for the Graphic Design and Illustration certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this

More information

Adobe Illustrator CS6. Illustrating Innovative Web Design

Adobe Illustrator CS6. Illustrating Innovative Web Design Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe

More information

Working With Animation: Introduction to Flash

Working With Animation: Introduction to Flash Working With Animation: Introduction to Flash With Adobe Flash, you can create artwork and animations that add motion and visual interest to your Web pages. Flash movies can be interactive users can click

More information

Adobe Dreamweaver Exam Objectives

Adobe Dreamweaver Exam Objectives Adobe Dreamweaver audience needs for a website. 1.2 Identify webpage content that is relevant to the website purpose and appropriate for the target audience. 1.3 Demonstrate knowledge of standard copyright

More information

Creating Webpages in Dreamweaver MX for PC

Creating Webpages in Dreamweaver MX for PC Creating Webpages in Dreamweaver MX for PC Getting Started Before you can create a webpage you need to think about where the page will be stored both locally (i.e., hard drive, CD, disk) and remotely (i.e.,

More information

Contents The Design Chooser... Mail Designer Pro 2 at a glance... The contents window... Working with text... Your first mail design...

Contents The Design Chooser... Mail Designer Pro 2 at a glance... The contents window... Working with text... Your first mail design... Mail Designer Pro 2 Contents The Design Chooser... 4 Mail Designer Pro 2 at a glance... 5 The contents window... 6 Your first mail design... 9 Creating a new design... 9 Working with layout blocks... 9

More information

Help Document of Focusky (2016/3/25)

Help Document of Focusky (2016/3/25) Help Document of Focusky (2016/3/25) Table of Contents Overview... 3 Features... 4 Quick Start... 5 Register and Sign in... 5 Create New Project... 6 Design Interactive Presentation... 6 Add Animation

More information

Logo Design Studio Pro Guide

Logo Design Studio Pro Guide Logo Design Studio Pro Guide This guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used

More information

Contents The Design Chooser... 5

Contents The Design Chooser... 5 Mail Designer Pro 2 Contents The Design Chooser... 5 Mail Designer Pro 2 at a glance... 6 The Contents section... 7 The Style section... 11 Your first mail design... 13 Creating a new design... 13 Working

More information

Adobe Certified Expert Program

Adobe Certified Expert Program Adobe Certified Expert Program Product Proficiency Exam Bulletin Adobe Photoshop CS4 Exam # 9A0-094 ACE Certification Checklist The checklist below will help guide you through the process of obtaining

More information

MyGraphicsLab ADOBE ILLUSTRATOR CC COURSE FOR GRAPHIC DESIGN & ILLUSTRATION Curriculum Mapping to ACA Objectives

MyGraphicsLab ADOBE ILLUSTRATOR CC COURSE FOR GRAPHIC DESIGN & ILLUSTRATION Curriculum Mapping to ACA Objectives ADOBE ILLUSTRATOR CC COURSE FOR GRAPHIC DESIGN & ILLUSTRATION Curriculum Mapping to ACA Domain Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for preparing

More information

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you

More information

Creating Print-Ready Files

Creating Print-Ready Files A GUIDE TO Creating Print-Ready Files Our People. Your Vision. Let s Create. What is a Print-Ready File? A print-ready file allows a printer to produce your project quickly and efficiently. At Kopytek,

More information

m ac romed ia Fl a s h Curriculum Guide

m ac romed ia Fl a s h Curriculum Guide m ac romed ia Fl a s h Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra are trademarks

More information

ADOBE MUSE. Building your first website

ADOBE MUSE. Building your first website ADOBE MUSE Building your first website Contents Chapter 1... 1 Chapter 2... 11 Chapter 3... 20 Chapter 4... 30 Chapter 5... 38 Chapter 6... 48 Chapter 1 Installing the software and setting up the sample

More information

Introducing SketchBook Designer s UI

Introducing SketchBook Designer s UI Autodesk Design Suite 2012 Autodesk SketchBook Designer 2012 Tip Guides Introducing SketchBook Designer s UI In this section you will learn the following: Components of the toolbar Navigation Properties

More information

Photoshop- Image Editing

Photoshop- Image Editing Photoshop- Image Editing Opening a file: File Menu > Open Photoshop Workspace A: Menus B: Application Bar- view options, etc. C: Options bar- controls specific to the tool you are using at the time. D:

More information

How to create and personalize a PDF portfolio

How to create and personalize a PDF portfolio How to create and personalize a PDF portfolio Creating and organizing a PDF portfolio is a simple process as simple as dragging and dropping files from one folder to another. To drag files into an empty

More information

CIT Training Photoshop Elements 12 Basics [Basic Editing and Prepare Images for the Web]

CIT Training Photoshop Elements 12 Basics [Basic Editing and Prepare Images for the Web] CIT Training Photoshop Elements 12 Basics [Basic Editing and Prepare Images for the Web] 1 Learning Objectives Familiarize with the interface and learn basic tools in Photoshop Elements Learn to use edit

More information

Print Services User Guide

Print Services User Guide Print Services User Guide Understanding Artwork for Print 1 Preferred Formats: Preferred formats should contain only vector-based graphics and text, and/or high-resolution images. Low resolution images

More information

designed and prepared for california safe routes to school by circle design circledesign.net Graphic Standards

designed and prepared for california safe routes to school by circle design circledesign.net Graphic Standards Graphic Standards Table of Contents introduction...2 General Usage...2 Logo lockups: color...3 LOGO LOCKUPS: GRAYSCALE...4 Minimum Staging Area...5 Minimum Logo Size...6 Type Family...7 Color Palettes...8

More information

Step by step guide to Universal VLS Watt Laser

Step by step guide to Universal VLS Watt Laser Step by step guide to Universal VLS6.60 60 Watt Laser Step by Step The Universal VLS6.60 laser can raster and vector based files. Raster files are made of pixels. Raster images loose resolution as they

More information

manage graphics in Serif PagePlus X5

manage graphics in Serif PagePlus X5 How to manage graphics in Serif PagePlus X5 Serif PagePlus lets you insert pictures from a wide variety of file formats, including bitmaps, vector images, and metafiles, and in several different ways.

More information

Adobe InDesign Creative Cloud

Adobe InDesign Creative Cloud Adobe InDesign Creative Cloud Beginning Layout and Design November, 2013 1 General guidelines InDesign creates links to media rather than copies so -Keep all text and graphics in one folder -Save the InDesign

More information

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional.

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. Workspace tour Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. In this tutorial, you will become familiar with the terminology and workspace

More information

File types There are certain image file types that can be used in a web page. They are:

File types There are certain image file types that can be used in a web page. They are: Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner

More information

Adobe Training Services Exam Guide. ACE: Illustrator CS6

Adobe Training Services Exam Guide. ACE: Illustrator CS6 Adobe Training Services Exam Guide ACE: Illustrator CS6 Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation as Adobe

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

UNIVERSITY OF CALICUT

UNIVERSITY OF CALICUT UNIVERSITY OF CALICUT SCHOOL OF DISTANCE EDUCATION CCSS UG (SDE) V SEMESTER OPEN COURSE INTRODUCTION TO MULTIMEDIA (For the UG candidates with core course other than BMMC) QUESTION BANK 1. Compression

More information

KB COPY CENTRE. RM 2300 JCMB The King s Buildings West Mains Road Edinburgh EH9 3JZ. Telephone: 0131 6505001

KB COPY CENTRE. RM 2300 JCMB The King s Buildings West Mains Road Edinburgh EH9 3JZ. Telephone: 0131 6505001 KB COPY CENTRE RM 2300 JCMB The King s Buildings West Mains Road Edinburgh EH9 3JZ Telephone: 0131 6505001 Email: kbcopy@ed.ac.uk martin.byrne@ed.ac.uk colin.doherty@ed.ac.uk Step 1. Set up page orientation

More information

Designing for Print. How to build a file for successful printing. www.serviceprinters.com 127 East Second Street Duluth, MN 55805 1.800.877.

Designing for Print. How to build a file for successful printing. www.serviceprinters.com 127 East Second Street Duluth, MN 55805 1.800.877. Designing for Print How to build a file for successful printing by AN EMPLOYEE-OWNED COMPANY www.serviceprinters.com 127 East Second Street Duluth, MN 55805 1.800.877.4684 Proper Planning Prevents Poor

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

Crop and Frame Your Photos

Crop and Frame Your Photos Crop and Frame Your Photos Paint Shop Pro s crop tool gives you total control over your photo compositions. Cropping allows you to turn busy portraits into professional prints. And when you have a nicely

More information

Printing to the Poster Printer

Printing to the Poster Printer Printing to the Poster Printer Document size The HP Design Jet Z3100ps uses a roll of paper that is 36 wide, however it does not print all the way to the edge of the paper (known as a bleed ). One dimension

More information

Printing with White and Clear Toner on the OKI C941

Printing with White and Clear Toner on the OKI C941 Printing with White and Clear Toner on the OKI C941 With your C941 Multimedia Production Platform device from OKI, you can demonstrate your creativity or broaden your printed offerings by producing materials

More information

Contents. The Design Chooser... 4. Mail Designer at a glance... 5. Working with text... 20. The contents window... 6. Your first mail design...

Contents. The Design Chooser... 4. Mail Designer at a glance... 5. Working with text... 20. The contents window... 6. Your first mail design... Mail Designer 2 Contents The Design Chooser... 4 Mail Designer at a glance... 5 The contents window... 6 Your first mail design... 9 Creating a new design... 9 Working with layout blocks... 9 Layout blocks:

More information

Table of Contents File Set Up

Table of Contents File Set Up Table of Contents File Set Up File Basics Page 2 Setting Up Bleed Page 3 Banner Set Up Pockets and Bleed Page 4-5 Tradeshow Booth File Set Up Page 6 FTP Information Page 7 Scanning, Resolutions and Proofs

More information

FIELD TECHNICAL PROCEDURE

FIELD TECHNICAL PROCEDURE FIELD TECHNICAL PROCEDURE Document #: FTP-00276, Rev. B Issue Date: June 11, 2012 VUTEk QS, GS5000r, GS3250, GS3250LX, GS3250r,GS3200, Printers Affected: GS2000, PV200 +White; Rastek H650, H652, H700,

More information

Create a Web Page with Dreamweaver

Create a Web Page with Dreamweaver Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist

More information

Introduction. KIC Help Desk Guide v. 2.7

Introduction. KIC Help Desk Guide v. 2.7 Introduction Knowledge Imaging Center (KIC) kiosks are public self-serve scanning/copying systems for students, faculty, researchers, administrators and the general public. KIC systems make it fast and

More information

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe

More information

How to Prepare Your Cards for Press Using Scribus

How to Prepare Your Cards for Press Using Scribus How to Prepare Your Cards for Press Using Scribus This Tutorial is Divided into Sections: 1. What do I Need? What is Scribus? 2. How to start a new document with Scribus (the template explained) 3. What

More information

PE Content and Methods Create a Website Portfolio using MS Word

PE Content and Methods Create a Website Portfolio using MS Word PE Content and Methods Create a Website Portfolio using MS Word Contents Here s what you will be creating:... 2 Before you start, do this first:... 2 Creating a Home Page... 3 Adding a Background Color

More information

Digital Image Concepts I

Digital Image Concepts I Digital Image Concepts I The Pixel Handout 1.1 September 9, 2004 A Digital Image is composed of an array of picture elements or pixels. Each pixel represents a single color and value. The computer arranges

More information

Scanning and OCR Basics

Scanning and OCR Basics Scanning and OCR Basics Scan Text Documents into Word 2003 using OCR Software 1. Place the document to scan face down on the flatbed scanner. 2. Launch Microsoft Word 2003 for Windows. 3. Select Acquire

More information

Website Design Practice Final Exam

Website Design Practice Final Exam Website Design Practice Final Exam Multiple Choice Identify the letter of the choice that best completes the statement or answers the question. 1. is the current standard language used to create Web pages.

More information

Pimping Up Your USB Drive

Pimping Up Your USB Drive In this tutorial we show how to Pimp Up your USB Drive, by adding a display Icon for the device, as well as a cool background for the folders in the top level directory of the USB. Once you have completed

More information

ImageSkill Software. Tile Builder v1.5. User s Manual. Table of Contents

ImageSkill Software. Tile Builder v1.5. User s Manual. Table of Contents ImageSkill Software Tile Builder v1.5 User s Manual Table of Contents Introduction...2 Features at glance...2 System Requirements...2 Registering ImageSkill Tile Builder...2 Getting Technical Support...3

More information

How to create buttons and navigation bars

How to create buttons and navigation bars How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,

More information

What s New in Adobe Fireworks CS4

What s New in Adobe Fireworks CS4 What s New in Adobe Fireworks CS4 UITS - IT Training and Education About IT Training & Education The University Information Technology Services (UITS) IT Training & Education program at Indiana University

More information

Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations

Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations Creating Interactive Documents with PDFs and SWFs Adapted from Chris Converse, http://www.codifydesign.com/ Laurie Burruss laurie@lynda.com Pasadena City College Dec 9 3 pm Lynda.com > InDesign CS5 Tutorials

More information

The complete beginners guide to Adobe Illustrator. Get started

The complete beginners guide to Adobe Illustrator. Get started The complete beginners guide to Adobe Illustrator Get started The complete beginners guide to Adobe Illustrator VISUAL DEMO - What we are going to create on this course Go to page COURSE OVERVIEW - Project

More information

Creating Hyperlinks & Buttons InDesign CS6

Creating Hyperlinks & Buttons InDesign CS6 Creating Hyperlinks & Buttons Adobe DPS, InDesign CS6 1 Creating Hyperlinks & Buttons InDesign CS6 Hyperlinks panel overview You can create hyperlinks so that when you export to Adobe PDF or SWF in InDesign,

More information

PowerPoint 2007 The Basics

PowerPoint 2007 The Basics Opening Window PowerPoint 2007 The Basics Ribbon Office Button Navigation Bar Slide View Outline View Design Area Notes Area Status Bar The Ribbon The Ribbon replaces the Menu bar that we have seen in

More information

Password Memory 6 User s Guide

Password Memory 6 User s Guide C O D E : A E R O T E C H N O L O G I E S Password Memory 6 User s Guide 2007-2015 by code:aero technologies Phone: +1 (321) 285.7447 E-mail: info@codeaero.com Table of Contents Password Memory 6... 1

More information

POWERPOINT 2004 for MAC

POWERPOINT 2004 for MAC CMM1108 COMMUNICATIONS AND DIGITAL TECHNOLOGIES POWERPOINT 2004 for MAC Creating Presentations This tutorial has been adapted for teaching purposes from PowerPoint:Mac 2004 Help Menu options. Microsoft

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

The steps to create an HTML Web site with Virtual Exhibit are:

The steps to create an HTML Web site with Virtual Exhibit are: 23 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web site creator for PastPerfect Museum Software. Virtual Exhibit converts collection records and images stored in PastPerfect to HTML for posting

More information

NDSU Technology Learning & Media Center

NDSU Technology Learning & Media Center 1 NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Creating a Large Format Poster (Plot) Using PowerPoint 2013 Posters should be designed and created in a manner that best

More information

Graphic Design Studio Guide

Graphic Design Studio Guide Graphic Design Studio Guide This guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used

More information

SKILL SET 1 BASICS...

SKILL SET 1 BASICS... ITQ Level 2 Presentation Software Contents SKILL SET 1 BASICS... 9 1 - PRESENTATIONS... 10 2 - CREATING A NEW PRESENTATION... 11 3 - SAVING A PRESENTATION... 13 4 - CLOSING A PRESENTATION... 15 5 - OPENING

More information