Adobe CC as Wireframe and Web Design Tool

Size: px
Start display at page:

Download "Adobe CC as Wireframe and Web Design Tool"

Transcription

1 Start designing by doing very rough sketches on paper, or lately more often, if not near my office desk, on my ipad or smartphone screen. These sketches focus thoughts regarding the chosen concept and the client will probably never see any of them. Use Adobe Illustrator and InDesign combined. Illustrator for creating most of the UI kit elements and InDesign for wireframing itself. Source: 49 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

2 Master pages Quickly and consistently apply global design elements like navigation, headers, footers and so on. Create as many master pages as you need, and on top of it, one master can be based on another. Solid grid support Easily and apply different kinds of grids, complementing columns, horizontal and vertical guides to create modules, and subgrids for greater complexity and precision. Alternate layouts Enable wireframes for multiple devices and orientations in the same file. CC Libraries Access and reuse different assets like commonly used objects, colours, character and paragraph styles. Create assets in InDesign, Illustrator, Photoshop or with the Adobe Capture mobile app, Layers Ability to organize, group, show/hide and lock/unlock objects and content selectively in the wireframe. Every page of a multi-page In- Design document has the same number and order of layers. All of the changes you make to layers are reflected on all pages, like visibility, stacking order or deletion. Styles and tables Give complete control over the look of your text, objects and tables through the use of InDesign styles. Styles can be based on each other providing the ability to cascade desired formatting easily throughout the document. Creation and formatting of tables. 50 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

3 Export options Export a variety of formats. Interactive PDF Publish Online converts document to interactive HTML that can be viewed in desktop and mobile browsers. Exported file is hosted on Adobe servers. Share the URL or embed it into a site. Create and prepare templates and object assets by yourself. Most of this work will be done only once and after a few hours of work you ll be ready There are a lot of assets and wireframe kits that on the internet InDesign documents can t export directly as layered PSD files If visual design is in Adobe Photoshop and want to have separated wireframe elements, Export PSD wireframes to PDF first, then open that PDF in Illustrator and export as layered PSD. Free to script to save InDesign files as a layered PSD New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

4

5

6

7

8

9

10 Create saved Workspace in Illustrator and InDesign Save the workspace by choosing Window > Workspace > New Workspace Do the same thing in InDesign using Digital Publishing workspace as a starter. Assembling Wireframe/Mockup/Prototype Kits Invest some time in making your user interface assets kit first. Adobe Creative Cloud, CC Libraries store all your components. Create one Library for websites wireframing, other for ios application, third for Android applications and so on. Create library Open Libraries panel and choose Create New Library from additional drop-down menu. Assets put in libraries can be made and used in different Adobe desktop or mobile apps on all devices you log into with your Adobe ID. Libraries can contain colours, graphics, layer styles (Photoshop only), paragraph and character styles. You add asset in library by clicking on the corresponding button at the bot- 58 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

11 tom of CC Library panel with respective element selected. You can also add graphic assets by dragging them directly from your artboard to Libraries panel. Assets in libraries are organized by categories. Libraries are searchable, Creating Components Illustrator is a much better choice for drawing different kinds of elements As a rule of thumb, make all kit elements that request some drawing beyond basic geometric shapes in Illustrator and simpler elements, that contain text you ll need to change in layout, like simple buttons, in InDesign. Make a list of all the elements in the wireframe you ll need, like navigation elements, page elements including images, video frames and text boxes, icons, avatars, form elements and all other interface elements. 59 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

12 Start by creating a new document for wireframe or mockup kit components. Choose either Web/Devices Profile in Illustrator or Web/Digital Publishing Intent from New Document dialog box, so pixels are used as units, and color mode is RGB. Make wireframe kit assets as simple as possible. You should use very limited colour palettes of preferably a few shades of grey. Visually accentuate elements that are more important by coloring them with darker shades, or by giving them bigger contrast. Adobe Illustrator assets in CC Libraries Assets you add to Libraries from Illustrator are linked by default. That means that when you modify a library asset in Illustrator, changes are reflected in all instances used. If you want to add unlinked asset to document press Option/Alt key while dragging it from the panel. When you use linked Illustrator assets in InDesign they have little cloud icon in the upper left corner when document is viewed in Normal mode 60 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

13 and they are all listed in Links panel. If you modify Library asset in Illustrator changes in the InDesign document won t be done automatically. Cloud icon will be replaced with Modified Link exclamation mark icon, and you ll have to update these links. InDesign assets you place in InDesign document are not linked. That means that you can edit instances independently of the original, and when the original asset is modified those changes are not reflected on assets you already put into layout. InDesign Flexibility with Texts InDesign has a nice feature for filling text boxes with placeholder text. When you draw text box just make a right mouse click on it and choose Fill With Placeholder Text. You can easily add text box to Library like any other graphic element just by dragging. Make button UI elements in InDesign too. To create a button, make text frame first, type respective text in it and then use Object > Text Frame 61 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

14 Options to define Inset spacing. Adjust Vertical Justification of text inside a box by choosing desired option from Align drop-down menu. Creating InDesign Wireframe Templates Create InDesign templates for making wireframes. Start by creating a new document with Web or Digital Publishing Intent and define appropriate page size for the screens you are designing for. Since it is recommended that you use some kind of a grid for laying out your wireframe elements set up the margins and create column grid by setting number of columns and the gutter space. You can change those settings later from Layout > Margins and Columns with respective master page (or pages) selected in Pages panel. If you need horizontal guides and complementary vertical guides, create them manually or make additional grid by using Layout > Create Guides When creating grid you can help yourself with one of the online grid calculator tools like the Gridulator. You can also create additional templates for presentation purposes with 62 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

15 device mockup as a frame for your wireframes. Since one InDesign document can be placed into another, you can create wireframes in one InDesign document and then place it into another one for presentation purposes. Keeping actual wireframe in separate document makes it easier to continue building from approved wireframes to polished visual design. When you make modifications on wireframe file just update it like any other link in presentation document, and ta-daaa! all changes are in your presentation too. In the Layers panel you can prepare separate layers for different kind of the content: user interface elements, interactive features, gestures, labels or notes. If you ll need more layers for a specific project you ll be able to easily add them anytime during the wireframing process. When you are done with creating save your templates as InDesign.indt template files. After all the templates you need are saved you are finally ready to start with wireframing efficiently. 63 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

16 Building Wireframes First things first start with the Master page. Drag all elements that will be the same on all screens of your project from Library. If you are designing website those are usually headers with logo and navigation and footer. Since you can make more than one Master page and they can be based on each other don t forget to take advantage of that feature. For example, depending on the project, you can create a Master page for one website category, then make new Masters based on the first one and change on them only elements that need to be different for other categories you re also having. You can t select, change or delete Master elements on regular document pages unless you click on them while holding Command/Control + Shift to override the master. Once your element is overridden you can change any of its parameters or completely delete it from layout. Keep in mind that even when you override the element, it s parameters that you haven t change are still dependent on the Master. For example, if you override an 64 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

17 element and change it s color, it s size is still connected to Master s and if you change it on Master page it will also be modified on that element you previously overrided. When inserting additional pages to your wireframing document remember to base them on the respective master. If you need to change the Master for pages already in layout, select them in Pages panel, make a right click and choose Apply Master to Pages When you are finished with Masters, move along with pages for all screens of your project. Use Library assets and arrange them using Smart Guides and Align options to create final UI wireframe layout. IIf you are making design for more than one screen size, make alternate layouts from Layouts > Create Alternate Layout or Pages panel. You can use liquid layout rules when creating alternate layouts to automatically or semi-automatically adopt page elements from one size and orientation to another or you can manually control them. For applying and testing Liquid Layout Rules use Page Tool or open panel: Window > Interactive > Liquid Layout. 65 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

18 If you want to convert your document to HTML prototype using InDesign CC 2015 Publish Online feature you can use much more interactive options like animations, multistate objects, multiple button actions, including all those intended for SWF/EPUB export. You can add simple animations using Animation panel and choosing one of the built-in Presets from drop-down menu and setting its properties. One object can have only one animation applied, but if you need to add more of them, group your object with empty box and use the new animation on that newly created object. And repeat that few times if needed. For objects you need to show different states create multi state object. Create object for each state. Object can be a single element (picture, text box, graphic) or a group of different elements. Open Window > Interactive > Object States panel, select all objects you created for multi state object and click on the New button at the panel bottom. After your multi state object is made you ll need to create buttons to go from one object state to another. Go To Next State or Go To Previous State actions reveal the specific object state with Go to State action. 66 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

19 If you want to have scrollable frame in your wireframe/prototype easiest way to create one is by using Universal Scrolling Frames extension from Ajar Productions. After you download and install extension you can use it as InDesign panel. For scrollable frame you ll need to make content and one frame for container. Content can be text frame, picture, or more elements combined. If using more than one element as a content don t forget to group them. When you are finished with making content and container box select the content and do Edit > Cut. Then select container and paste content inside by using Edit > Paste Into. Select container and using Universal Scrolling Frames adjust desired scroll direction. By combining buttons, multistate objects, animations and scrollable frames you can achieve rich interactive experience. To test interactivity in InDesign use EPUB Interactivity Preview panel. You can preview single page or whole document. Enlarge preview panel to your convenience. 67 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

20 If you haven t being using Adobe InDesign interactive features yet be prepared that they have some learning curve, but with a little practice and few trial and error attempts you ll quickly master them. Exporting finished documents When you are done with the wireframe and presentation file making all that is left is show your great ideas to the client in best way possible. For that purpose you ll need to export your wireframes in one of the formats your client can preview. Although InDesign files can be exported in variety of formats you are probably going to use the most common Interactive PDF, or Publish Online feature if testing functional low or high fidelity prototypes. To save as interactive PDF choose Adobe PDF (Interactive) from Format drop-down menu in Export dialog box and adjust properties as needed. Do not forget to tick Forms and Media if there are interactive elements that you want to include. Clients can view PDF wireframes in free Adobe Reader and write all their comments in that same file. 68 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

21 You can also use PDF document you export from InDesign to create InVision (or some other tool that supports PDFs) prototype. If your standard prototyping tool, perhaps Marvel, can t import PDF export your InDesign wireframe pages as JPEG or PNG images. To export interactive HTML prototype that can be seen in modern browsers on different devices go to File > Publish Online or click on the Publish Online button from Application Bar. After the document is prepared to be published online and then uploaded you can copy document URL to share with all the stakeholders and start with reviewing process. You can also embed that published prototype on your site. Downside of Publish Online feature is that it doesn t have any additional control over the export and files are always stored at Adobe s servers. Also it s still preview feature and you can t be sure in which direction Adobe is going to develop it or even discontinue. Once your wireframe/prototype is exported it s time for testing, reviewing and iterating process to start 69 New York City College of Technology The City University of New York Department of Communication Design COMD 2427 Typographic Design III John De Santis

Adobe Fireworks CS Essential Techniques

Adobe Fireworks CS Essential Techniques Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 170 Adding Structure to # 79 Your Documents Creating a Master Page You can only have one Master Page per file, and you can easily set any

More information

The diverse software in the Adobe Creative Suite enables you to create

The diverse software in the Adobe Creative Suite enables you to create 556010 Bk01Ch01.qxd 2/6/04 7:28 PM Page 9 Chapter 1: Introducing the Adobe Creative Suite In This Chapter Looking over InDesign Drawing with Illustrator Introducing Photoshop Getting started with Acrobat

More information

The diverse software in Adobe Creative Suite 2 enables you to create

The diverse software in Adobe Creative Suite 2 enables you to create Chapter 1: Introducing Adobe Creative Suite 2 In This Chapter Looking over InDesign Drawing with Illustrator Introducing Photoshop Getting started with Acrobat Going over GoLive Integrating the programs

More information

Typography in Motion Project 3: Final Due Nov 2

Typography in Motion Project 3: Final Due Nov 2 NEW YORK CITY COLLEGE OF TECHNOLOGY DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 Typographic Design III Sec. D210 Fall 17 Thur: 8:30 AM-11:00 AM Room: N-1118 Instructor: John Battista De Santis jdesantis@citytech.cuny.edu

More information

How to Use Serif WebPlus 10

How to Use Serif WebPlus 10 How to Use Serif WebPlus 10 Getting started 1. Open Serif WebPlus and select Start New Site from the Startup Screen 2. WebPlus will start a blank website for you. Take a few moments to familiarise yourself

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

build a digital portfolio in WebPlus X4

build a digital portfolio in WebPlus X4 How to build a digital portfolio in WebPlus X4 Get started Open Serif WebPlus and select Start New Site from the Startup Wizard. WebPlus will open a blank website for you. Take a few moments to familiarise

More information

How to Prepare Your Cards for Press Using InDesign

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

More information

Adobe InDesign CS4. Introduction to Layout with InDesign

Adobe InDesign CS4. Introduction to Layout with InDesign Introduction to Layout with InDesign InDesign is a powerful Desktop Publishing (layout) application. It is flexible enough so that it can be used by both new and experienced users because there is no single,

More information

ORGANIZING YOUR ARTWORK WITH LAYERS

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

SOLO NETWORK. Adobe Flash Catalyst CS5.5. Create expressive interfaces and interactive content without writing code

SOLO NETWORK. Adobe Flash Catalyst CS5.5. Create expressive interfaces and interactive content without writing code (11) 4062-6971 (21) 4062-6971 (31) 4062-6971 (41) 4062-6971 (48) 4062-6971 (51) 4062-6971 (61) 4062-6971 Adobe Flash Catalyst CS5.5 Create expressive interfaces and interactive content without writing

More information

Adobe Creative Cloud InDesign CC

Adobe Creative Cloud InDesign CC Adobe Creative Cloud InDesign CC 2015.2 November 2015 Release Feature Guide 11/16/15 40 minutes Artwork by Þorleifur Gunnar Gíslason behance.net/thollig Adobe InDesign CC 2015.2 (November 2015 Release)

More information

EXPORTING ASSETS. Lesson overview

EXPORTING ASSETS. Lesson overview 15 EXPORTING ASSETS Lesson overview In this lesson, you ll learn how to do the following: Create pixel-perfect drawings. Use the Export For Screens command. Work with the Asset Export panel. Generate,

More information

Creating an Animated Navigation Bar in InDesign*

Creating an Animated Navigation Bar in InDesign* Creating an Animated Navigation Bar in InDesign* *for SWF or FLA export only Here s a digital dilemma: You want to provide navigation controls for readers, but you don t want to take up screen real estate

More information

How to export and save files

How to export and save files How to export and save files Illustrator is popular with designers because they can create graphics that can be used in a wide variety of applications. You can easily save your work for print, video, or

More information

Welcome to Desktop Publishing with InDesign!

Welcome to Desktop Publishing with InDesign! Welcome to Desktop Publishing with InDesign! What We ll Cover Today What is InDesign? Preparing a print project Creating a new document InDesign interface Working with layers and links Formatting and managing

More information

Copyrighted material - provided by Taylor & Francis Not for distribution

Copyrighted material - provided by Taylor & Francis Not for distribution B efore we jump in and start building our websites we ll need to familiarize ourselves with Muse and its features. Much of the interface and toolset will be recognizable to you if you ve used any of Adobe

More information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

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

Microsoft Word

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

A QUICK TOUR OF ADOBE ILLUSTRATOR CC (2018 RELEASE)

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

How to lay out a web page with CSS

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

Create ruler guides. Create a ruler guide

Create ruler guides. Create a ruler guide Create ruler guides Ruler guides are different from grids in that they can be positioned freely on a page or on a pasteboard. You can create two kinds of ruler guides: page guides, which appear only on

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

BusinessObjects Frequently Asked Questions

BusinessObjects Frequently Asked Questions BusinessObjects Frequently Asked Questions Contents Is there a quick way of printing together several reports from the same document?... 2 Is there a way of controlling the text wrap of a cell?... 2 How

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

ENVIRONMENTALLY RESPONSIBLE PRINTING ARTWORK GUIDE BOOK ALL YOU NEED TO KNOW ABOUT CREATING ARTWORK FOR PRINT TOGETHER.

ENVIRONMENTALLY RESPONSIBLE PRINTING ARTWORK GUIDE BOOK ALL YOU NEED TO KNOW ABOUT CREATING ARTWORK FOR PRINT TOGETHER. ENVIRONMENTALLY RESPONSIBLE PRINTING ARTWORK GUIDE BOOK ALL YOU NEED TO KNOW ABOUT CREATING ARTWORK FOR PRINT TOGETHER. contents pg3. Choose a Design application pg4. Artwork requirements pg5. Creating

More information

13 PREPARING FILES FOR THE WEB

13 PREPARING FILES FOR THE WEB 13 PREPARING FILES FOR THE WEB Lesson overview In this lesson, you ll learn how to do the following: Create and stylize a button for a website. Use layer groups and artboards. Optimize design assets for

More information

COPYRIGHTED MATERIAL. Using Adobe Bridge. Lesson 1

COPYRIGHTED MATERIAL. Using Adobe Bridge. Lesson 1 Lesson Using Adobe Bridge What you ll learn in this lesson: Navigating Adobe Bridge Using folders in Bridge Making a Favorite Creating metadata Using automated tools Adobe Bridge is the command center

More information

MyGraphicsLab ADOBE INDESIGN CC COURSE FOR PRINT & DIGITAL MEDIA PUBLICATION Curriculum Mapping to ACA Objectives

MyGraphicsLab ADOBE INDESIGN CC COURSE FOR PRINT & DIGITAL MEDIA PUBLICATION Curriculum Mapping to ACA Objectives ADOBE INDESIGN CC COURSE FOR PRINT & DIGITAL MEDIA PUBLICATION Curriculum Mapping to ACA Domain Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for preparing

More information

Project 3: Assignment 7 Due Oct 19 Typography in Motion

Project 3: Assignment 7 Due Oct 19 Typography in Motion NEW YORK CITY COLLEGE OF TECHNOLOGY DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 Typographic Design III Sec. D210 Fall 17 Thur: 8:30 AM-11:00 AM Room: N-1118 Instructor: John Battista De Santis jdesantis@citytech.cuny.edu

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

December 3, What is New in CC 2019

December 3, What is New in CC 2019 December 3, 2018 What is New in CC 2019 Photoshop NEW Frame Tool Quickly place or replace images using the new Frame tool. Images are automatically scaled to best fit the frame and swapping out content

More information

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area

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

Balsamiq manual. Balsamiq Main window. Image 1

Balsamiq manual. Balsamiq Main window. Image 1 1 Balsamiq manual Overview Balsamiq Mockups is a program that is produced by Balsamiq Studios (founded 2008). It is a relatively new program that allow users to create wireframes that feels like hand drawing

More information

IN DESIGN. A review of the overview

IN DESIGN. A review of the overview IN DESIGN A review of the overview InDesign Review GETTING STARTED: Start by clicking the InDesign icon in your dock. Wait for InDesign to load. Click on Create New Document If resuming work, find your

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

Project 3: Assignment 8 Due Oct 26 Typography in Motion

Project 3: Assignment 8 Due Oct 26 Typography in Motion NEW YORK CITY COLLEGE OF TECHNOLOGY DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 Typographic Design III Sec. D210 Fall 17 Thur: 8:30 AM-11:00 AM Room: N-1118 Instructor: John Battista De Santis jdesantis@citytech.cuny.edu

More information

What s New in QuarkXPress 2018

What s New in QuarkXPress 2018 What s New in QuarkXPress 2018 Contents What s New in QuarkXPress 2018...1 Digital publishing...2 Export as Android App...2 HTML5 enhancements...3 Configuration changes...5 Graphics...7 Transparency blend

More information

Week 5 Creating a Calendar. About Tables. Making a Calendar From a Table Template. Week 5 Word 2010

Week 5 Creating a Calendar. About Tables. Making a Calendar From a Table Template. Week 5 Word 2010 Week 5 Creating a Calendar About Tables Tables are a good way to organize information. They can consist of only a few cells, or many cells that cover several pages. You can arrange boxes or cells vertically

More information

Adobe InDesign Notes. Adobe InDesign CS3

Adobe InDesign Notes. Adobe InDesign CS3 Adobe InDesign Notes Adobe InDesign CS3 Page 2 Introduction These notes have been put together for basic and advanced methods, features and language. I have also created notes on other Adobe products.

More information

Wix Website. Project overview. Step 1: Log onto a web browser and go to Step 2: Click Start Now. Step 3: Click Sign up

Wix Website. Project overview. Step 1: Log onto a web browser and go to   Step 2: Click Start Now. Step 3: Click Sign up Project overview For this project you will be using the website building site www.wix.com to create a portfolio website to feature your past graphic design projects. Step 1: Log onto a web browser and

More information

Design a basic 3 column brochure and newsletter: This handout covers Document Set-up, working with Graphics and Text.

Design a basic 3 column brochure and newsletter: This handout covers Document Set-up, working with Graphics and Text. an introduction InDesign 4.0 Workshop Objective Design a basic 3 column brochure and newsletter: This handout covers Document Set-up, working with Graphics and Text. Document Setup - 3 column brochure

More information

InDesign UX Design Patterns. by Justin Putney

InDesign UX Design Patterns. by Justin Putney InDesign UX Design Patterns by Justin Putney InDesign UX Design Patterns Hi, I m Justin Putney, Owner of Ajar Productions. Thanks for downloading this guide! It s full of ways to create interactive user

More information

1. New document, set to 5in x 5in, no bleed. Color Mode should be default at CMYK. If it s not, changed that when the new document opens.

1. New document, set to 5in x 5in, no bleed. Color Mode should be default at CMYK. If it s not, changed that when the new document opens. art 2413 typography fall 17 software review This exercise will reacquaint students with Adobe Illustrator, Photoshop, and InDesign. These are the three main design programs used by the industry. There

More information

In Depth: Writer. The word processor is arguably the most popular element within any office suite. That. Formatting Text CHAPTER 23

In Depth: Writer. The word processor is arguably the most popular element within any office suite. That. Formatting Text CHAPTER 23 CHAPTER 23 In Depth: Writer The word processor is arguably the most popular element within any office suite. That said, you ll be happy to know that OpenOffice.org s Writer component doesn t skimp on features.

More information

How to create text and graphics with the

How to create text and graphics with the Adobe Premiere Pro CC Guide How to create text and graphics with the Essential Graphics Panel The Type tool in Premiere Pro is based on familiar ways of working with text and graphics found in other Adobe

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

proj 3B intro to multi-page layout & interactive pdf

proj 3B intro to multi-page layout & interactive pdf art 2413 typography fall 17 proj 3B intro to multi-page layout & interactive pdf objectives Students introduced to pre-made layered mockups that utilized smart art by placing vector artwork into the Photoshop

More information

Goldfish 4. Quick Start Tutorial

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

How to Prepare a Digital Edition PDF Book With Adobe InDesign

How to Prepare a Digital Edition PDF Book With Adobe InDesign How to Prepare a Digital Edition PDF Book With Adobe InDesign This tutorial will offer you some advice on how to use Adobe InDesign to prepare an optimized digital edition PDF book. There are two ways

More information

Chapter 1. Getting to Know Illustrator

Chapter 1. Getting to Know Illustrator Chapter 1 Getting to Know Illustrator Exploring the Illustrator Workspace The arrangement of windows and panels that you see on your monitor is called the workspace. The Illustrator workspace features

More information

FLIR Tools+ and Report Studio

FLIR Tools+ and Report Studio Creating and Processing Word Templates http://www.infraredtraining.com 09-20-2017 2017, Infrared Training Center. 1 FLIR Report Studio Overview Report Studio is a Microsoft Word Reporting module that is

More information

Adobe InDesign CC. 1. Introducing the Workspace. 2. Getting to Know InDesign. 3. Setting Up a Document and Working with Pages

Adobe InDesign CC. 1. Introducing the Workspace. 2. Getting to Know InDesign. 3. Setting Up a Document and Working with Pages Adobe InDesign CC 1. Introducing the Workspace Getting started Looking at the workspace Working with panels Customizing the workspace Navigating through a document Using context menus Using Panel Menus

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

How to create interactive documents

How to create interactive documents Adobe InDesign Guide How to create interactive documents You can use Adobe InDesign to create dynamic web content or interactive documents. InDesign supports export to web-ready HTML or interactive PDF.

More information

Chapter 4 Printing and Viewing a Presentation Using Proofing Tools I. Spell Check II. The Thesaurus... 23

Chapter 4 Printing and Viewing a Presentation Using Proofing Tools I. Spell Check II. The Thesaurus... 23 PowerPoint Level 1 Table of Contents Chapter 1 Getting Started... 7 Interacting with PowerPoint... 7 Slides... 7 I. Adding Slides... 8 II. Deleting Slides... 8 III. Cutting, Copying and Pasting Slides...

More information

Adobe XD CC: Streamlining User Experience Design

Adobe XD CC: Streamlining User Experience Design Pfeiffer Report Benchmark Analysis : Streamlining User Experience Design The productivity impact of integrating Adobe XD into the UX development workflow. About this Research This report presents the findings

More information

DESKTOP PUBLISHING FOR PRINT PRODUCTION PRACTICAL

DESKTOP PUBLISHING FOR PRINT PRODUCTION PRACTICAL DESKTOP PUBLISHING FOR PRINT PRODUCTION PRACTICAL M Scheme By, A.Paramasivam, Lecturer (SS) S.Marimuthu, Lecturer Department of Printing Technology Arasan Ganesan Polytechnic College Sivakasi Ex.No. 1

More information

Adobe InDesign CC Voluntary Product Accessibility Template

Adobe InDesign CC Voluntary Product Accessibility Template Adobe InDesign CC Voluntary Product Accessibility Template The purpose of the Voluntary Product Accessibility Template is to assist Federal contracting officials in making preliminary assessments regarding

More information

Creating Reports in Access 2007 Table of Contents GUIDE TO DESIGNING REPORTS... 3 DECIDE HOW TO LAY OUT YOUR REPORT... 3 MAKE A SKETCH OF YOUR

Creating Reports in Access 2007 Table of Contents GUIDE TO DESIGNING REPORTS... 3 DECIDE HOW TO LAY OUT YOUR REPORT... 3 MAKE A SKETCH OF YOUR Creating Reports in Access 2007 Table of Contents GUIDE TO DESIGNING REPORTS... 3 DECIDE HOW TO LAY OUT YOUR REPORT... 3 MAKE A SKETCH OF YOUR REPORT... 3 DECIDE WHICH DATA TO PUT IN EACH REPORT SECTION...

More information

Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme

Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme Introduction Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme In this Getting Started Guide, you can follow along as a website is built using the MIT DLC Theme. Whether you

More information

PowerPoint Instructions

PowerPoint Instructions PowerPoint Instructions Exercise 1: Type and Format Text and Fix a List 1. Open the PowerPoint Practice file. To add a company name to slide 1, click the slide 1 thumbnail if it's not selected. On the

More information

ACA Dreamweaver Exam Notes

ACA Dreamweaver Exam Notes ACA Dreamweaver Exam Notes Remember when you need to copy and paste the text you have to open up that actual text file itself and the need to go to edit> select all>, edit> copy>, then go back to the html

More information

Art170. Final Project Planning

Art170. Final Project Planning Final Project Planning Projects For the Next Two Weeks During the next two weeks of this class, you are going to thoroughly prepare your final web project. If you plan all details, putting the site itself

More information

Cognos. Active Reports Development. Presented by: Craig Randell

Cognos. Active Reports Development. Presented by: Craig Randell Cognos Active Reports Development Presented by: Craig Randell Objectives: Understand the purpose and benefits of Active Reports Through theory and demonstration introduce the different Active Report Components

More information

Introduction to Microsoft Word 2008

Introduction to Microsoft Word 2008 1. Launch Microsoft Word icon in Applications > Microsoft Office 2008 (or on the Dock). 2. When the Project Gallery opens, view some of the available Word templates by clicking to expand the Groups, and

More information

Adobe Graphic Master. BIGROCKDESIGNS computer training consultants. Course Outline LEVEL: Section 1 Illustrator CC (Day 1 & 2) DURATION:

Adobe Graphic Master. BIGROCKDESIGNS computer training consultants. Course Outline LEVEL: Section 1 Illustrator CC (Day 1 & 2) DURATION: Adobe Graphic Master Course Outline This course has been created to provide the user with the skills required to incorporate all the packages of Adobe Creative Suite CC/CS6 so as to develop all print requirements

More information

IMPORTING, ORGANIZING, EXPORTING, AND SAVING. MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication

IMPORTING, ORGANIZING, EXPORTING, AND SAVING. MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication IMPORTING, ORGANIZING, EXPORTING, AND SAVING MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication OBJECTIVES This presentation covers the following ACA Exam objectives:

More information

Overview of the Adobe Dreamweaver CS5 workspace

Overview of the Adobe Dreamweaver CS5 workspace Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one

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 is Scribus? 2. What Do I Need to Get Started? 3. Setting Up Your Scribus Document 4. Creating Master Pages

More information

Creating Page Layouts 25 min

Creating Page Layouts 25 min 1 of 10 09/11/2011 19:08 Home > Design Tips > Creating Page Layouts Creating Page Layouts 25 min Effective document design depends on a clear visual structure that conveys and complements the main message.

More information

Adobe InDesign. Place multiple and keep in conveyor. Figure 1 Conveyor with collected items

Adobe InDesign. Place multiple and keep in conveyor. Figure 1 Conveyor with collected items How to reuse objects As a designer, you ll often find yourself reusing the same graphics, headlines, and pages. After all, one of your design goals is probably consistency or uniformity, and such uniformity

More information

Introduction to Microsoft Office 2016: Word

Introduction to Microsoft Office 2016: Word Introduction to Microsoft Office 2016: Word Last Updated: September 2018 Cost: $2.00 Microsoft Word is a word processing software. You can use it to type letters, reports, and other documents. This class

More information

Working with Images and Multimedia

Working with Images and Multimedia CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.

More information

Muse Training for Webeditors

Muse Training for Webeditors Muse Training for Webeditors 1. Install Muse through the Adobe Creative Cloud Suite 2. Saving/Sharing Processes - Dropbox or T: Drive>(website name) Folder>(either) Assets or Documents Muse file should

More information

Getting Started with Publisher 2013

Getting Started with Publisher 2013 1 Getting Started with Publisher 2013 Learning Objectives Get familiarize with the Publisher user interface Create publications from scratch or from templates Customize your template design to meet your

More information

Getting started with HotGloo (V5.0)

Getting started with HotGloo (V5.0) Getting started with HotGloo (V5.0) Your first steps to a whole new wireframing experience. 2016 HotGloo Wireframing with HotGloo Welcome dear wireframe rookie, sensei, guru or ninja. No matter which level

More information

Adobe InDesign CS6 Tutorial

Adobe InDesign CS6 Tutorial Adobe InDesign CS6 Tutorial Adobe InDesign CS6 is a page-layout software that takes print publishing and page design beyond current boundaries. InDesign is a desktop publishing program that incorporates

More information

Lava New Media s CMS. Documentation Page 1

Lava New Media s CMS. Documentation Page 1 Lava New Media s CMS Documentation 5.12.2010 Page 1 Table of Contents Logging On to the Content Management System 3 Introduction to the CMS 3 What is the page tree? 4 Editing Web Pages 5 How to use the

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

Create and edit word processing. Pages.

Create and edit word processing. Pages. Create and edit word processing documents with Pages. In this chapter, we begin to get work done on the ipad by using Pages to create and format documents. Creating a New Document Styling and Formatting

More information

CreateASite Beginner s Guide

CreateASite Beginner s Guide Contents Getting Started... 3 Access the CreateASite Control Panel... 3 Select a Category/Subcategory... 4 Select a Template... 6 Change the Site Template... 10 Change Colours... 12 Change Fonts... 13

More information

Learning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC

Learning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC Module 1 Contents Chapter 1: Introduction to DreamWeaver CC Design Considerations...1-1 Types of Graphics...1-2 Backgrounds and Text...1-2 Planning the Navigation...1-2 The DreamWeaver Screen...1-3 Workspaces...

More information

Classroom Blogging. Training wiki:

Classroom Blogging. Training wiki: Classroom Blogging Training wiki: http://technologyintegrationshthornt.pbworks.com/create-a-blog 1. Create a Google Account Navigate to http://www.google.com and sign up for a Google account. o Use your

More information

InDesign CS4 is the sixth version of Adobe s flagship publishing tool,

InDesign CS4 is the sixth version of Adobe s flagship publishing tool, What InDesign Can Do for You InDesign CS4 is the sixth version of Adobe s flagship publishing tool, a product that came into its own with the third version (CS, which stands for Creative Suite). Widely

More information

Technical Case Study. Medieval Studies 1: Beginnings of English Q31207 (School of English Studies) WebCT Interface Design

Technical Case Study. Medieval Studies 1: Beginnings of English Q31207 (School of English Studies) WebCT Interface Design Technical Case Study Medieval Studies 1: Beginnings of English Q31207 (School of English Studies) WebCT Interface Design Nuno Barradas Jorge Rich Media Group, IS Learning Team November 2007 01 1. Introduction:

More information

Basic Concepts 1. Starting Powerpoint 2000 (Windows) For the Basics workshop, select Template. For this workshop, select Artsy

Basic Concepts 1. Starting Powerpoint 2000 (Windows) For the Basics workshop, select Template. For this workshop, select Artsy 1 Starting Powerpoint 2000 (Windows) When you create a new presentation, you re prompted to choose between: Autocontent wizard Prompts you through a series of questions about the context and content of

More information

Acrobat X Professional

Acrobat X Professional Acrobat X Professional Toolbar Well Page Navigations/Page Indicator Buttons for paging through document Scroll Bar/box page indicator appears when using the scroll button to navigate. When you release

More information

InDesign Basics. Adobe

InDesign Basics. Adobe Adobe InDesign Basics Craig Polanowski 1. Begin by creating a new document. Chances are pretty good that you will want to turn off the facing pages setting and create single pages instead of spreads. One

More information

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually

More information

Microsoft Excel 2010 Basic

Microsoft Excel 2010 Basic Microsoft Excel 2010 Basic Introduction to MS Excel 2010 Microsoft Excel 2010 is a spreadsheet software in the new Microsoft 2010 Office Suite. Excel allows you to store, manipulate and analyze data in

More information

InDesign CS Basics. To learn the tools and features of InDesign CS to create publications efficiently and effectively.

InDesign CS Basics. To learn the tools and features of InDesign CS to create publications efficiently and effectively. InDesign CS Basics InDesign Basics Training Objective To learn the tools and features of InDesign CS to create publications efficiently and effectively. What you can expect to learn from this class: How

More information

Creating Interactive PDF Forms

Creating Interactive PDF Forms Creating Interactive PDF Forms Using Adobe Acrobat X Pro for the Mac University Information Technology Services Training, Outreach, Learning Technologies and Video Production Copyright 2012 KSU Department

More information

SHAW ACADEMY NOTES. Diploma in Lightroom

SHAW ACADEMY NOTES. Diploma in Lightroom SHAW ACADEMY NOTES Diploma in Lightroom Diploma in Lightroom Lesson 7 Watermark, Exporting and Print Module Edit Watermarks In this section you can edit the text for the watermark. In any module, choose

More information

:: MULTIMEDIA TOOLS :: CLASS NOTES

:: MULTIMEDIA TOOLS :: CLASS NOTES CLASS :: 04 02.15 2017 AGENDA :: Homework Upload [ A-2 ] Ultimate Composite! Upload A-2 Project to Student PSD Folder :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] I. DOCUMENT SET-UP: a. Dimensions

More information

Using Microsoft Word. Paragraph Formatting. Displaying Hidden Characters

Using Microsoft Word. Paragraph Formatting. Displaying Hidden Characters Using Microsoft Word Paragraph Formatting Every time you press the full-stop key in a document, you are telling Word that you are finishing one sentence and starting a new one. Similarly, if you press

More information

Site Owners: Cascade Basics. May 2017

Site Owners: Cascade Basics. May 2017 Site Owners: Cascade Basics May 2017 Page 2 Logging In & Your Site Logging In Open a browser and enter the following URL (or click this link): http://mordac.itcs.northwestern.edu/ OR http://www.northwestern.edu/cms/

More information

Xerte. Guide to making responsive webpages with Bootstrap

Xerte. Guide to making responsive webpages with Bootstrap Xerte Guide to making responsive webpages with Bootstrap Introduction The Xerte Bootstrap Template provides a quick way to create dynamic, responsive webpages that will work well on any device. Tip: Webpages

More information

Creating a Website Using Weebly.com (June 26, 2017 Update)

Creating a Website Using Weebly.com (June 26, 2017 Update) Creating a Website Using Weebly.com (June 26, 2017 Update) Weebly.com is a website where anyone with basic word processing skills can create a website at no cost. No special software is required and there

More information

Adobe Graphics Software

Adobe Graphics Software Adobe Graphics Software Untitled-1.indd 1 20.11.2015 13:05:28 Untitled-1.indd 2 20.11.2015 13:05:28 3 Recent versions have brought in functionality for working with 3D designs, though the program still

More information