Creating an E-Commerce App in Sketch (Chapter Excerpt)
|
|
- Elinor Sparks
- 8 years ago
- Views:
Transcription
1 Creating an E-Commerce App in Sketch (Chapter Excerpt) 1
2 In this chapter we'll be creating the design for a fictional E-Commerce ios App called Store. 12 screens in total will be lovingly created inside of Sketch. We will make our way through the app, from the splash screen to the checkout. Putting the best parts of Sketch into practice. If you are a more experienced Sketch user there's still an abundance of detailed tips and practices that you may have missed before, and will hopefully give you a few of those Ah I didn't know you could do that moments. As well as the standard Sketch tools, and features available to us, we ll be putting the Craft plugin by InVision to good use also. 2
3 If you haven t already (and skipped over the Good evening Mr Sketch, we ve been expecting you chapter), make sure you have the following applications, and assets installed - Sketch - Craft - Iconjar - Raleway and Open Sans fonts* * You can find these in the Sketch Chapter/Fonts folder. Please Note: Throughout this chapter I will be showing you how to navigate to specific menu items, insert Symbols, create Text Styles, all done the default Sketch way. If this is your first time out using Sketch it pays to know your way around the application. If you re a more seasoned Sketch user (or just love saving time) you may want to use the Runner plugin I mentioned in an earlier chapter. It really is a wonderful tool that will speed up your workflow greatly. Still unsure? Check out this handy demo. Applications, and assets all installed? Great stuff! Let s go ahead and create some awesome in Sketch. 3
4 Splash We ll kick of proceedings with a simple Splash screen for our app. So press (A) to bring up the Artboard selection in the Inspector panel on the right, and choose the iphone 6 option. 4
5 Quick tip: You can quickly rename your Page, Artboard, or any Layer by selecting it in the Layers List and using (Cmd + R), or by simply double-clicking on the name. Go ahead and do just that. Change the page name to Artboards, and the Artboard name to Splash. 5
6 Check the Background Color option also. Leaving it at the default of White #FFFFFF. 6
7 Let s add a background image to our screen. Draw out a Rectangle (R) 375 x 667px to cover the Artboard. 7
8 Quick tip: You may have missed this tip in an earlier chapter, so I ll show you here. With the shape layer selected, remove the Border, and then from the Menu bar choose Edit > Set Style as Default. This just saves you from the mundane task of removing the Border of each Rectangle shape you insert, which will be quite a lot throughout this chapter. 8
9 Rename the Layer (Cmd + R) to something suitable like Background Image. From the Inspector panel, click on the Color Fill, and choose the Pattern Fill option. Make sure the option is set to Fill in the select menu, and then click Choose Image 9
10 Browse to the Sketch Chapter/Images/General folder, and choose man_red_check.jpeg 10
11 Add another Fill on the same Layer (keep this as a Color Fill), and set the Hex value to # with an Opacity of 60%. 11
12 Now let s start inviting some icons to this party. Open up Iconjar, and click the plus (+) symbol at the top of the application to begin creating a new icon set. Give the set a name. Something along the lines of Store - Icon Set would be perfect. 12
13 Then browse to the Sketch Chapter/Icons folder. 13
14 Click Add, and your icon set is now ready to party like it s 1999! Select the Building icon and drag this onto the screen we created in Sketch. 14
15 Now select the Shape Layers of the icon and change their Fill Color to #FFFFFF. Leave the icon size as it is. 15
16 Insert a Text Layer (T). Change the wording to Store, set the text to Uppercase via Type > Uppercase, then enter the following settings in the Inspector panel - Typeface: Raleway - Weight: Bold - Color: #FFFFFF - Size: 36 - Alignment: Center - Character Spacing:
17 Insert another Text Layer (T). Change the wording to The home of fashion, then enter the following settings in the Inspector panel - Typeface: Open Sans - Weight: Light Italic - Color: #FFFFFF - Size: 18 - Alignment: Center - Character Spacing: 3 17
18 Quick Tip: You may find that when inserting a Text Layer, and setting its Alignment to Center, that you will still have spacing to the right of the last letter. Which you of course don t want with centered text. 18
19 To fix this pesky little issue, quickly jump to the Inspector panel, and change the Character Spacing by a small increment (i.e. 4 to 4.1), and then back to its original setting (i.e. 4). Frustration avoided! Quick Tip: If you haven t already, check out the Sometimes it s the little things that get missed chapter, and look at setting up your own Keyboard Shortcuts. Two of my favourites are for setting text to Uppercase, and Lowercase, and will come in very handy throughout this chapter. With one of the Layers selected, use the Measure guides (Alt) to set appropriate spacing between the two Text Layers. 19
20 Then, with the both Text Layers selected, and using the Alignment Tools in the Inspector panel, choose the Align Horizontally option. Group the two Text Layers (Cmd + G), and then rename the group (Cmd + R) to Title + Subtitle. 20
21 Select the icon, and text group you just created, and use the Align Horizontally option again. With both groups selected, hit (Cmd + G), and then rename that new group (Cmd + R) to Logo. To finish up this screen, select both the Logo group you created, and the background image layer, then choose the Align Horizontally, and Align Vertically options to center the logo on the screen. 21
22 22
23 Prototyping an E-Commerce App in Flinto (Chapter Excerpt) 23
24 Now that we have our 'So good, your mama would love it' design created in Sketch, it's time to breathe some life into it, and that s where a good dose of Flinto medicine will come in very handy. Let s make this happen Opening up Flinto After opening up Flinto, you ll be presented with the splash screen, where you can go ahead and click on New Document. This, in turn opens up the New Document window (Yes, I know, the obvious has well, and truly been stated there). Set the Device Type to iphone 6 (the same as the Artboards in the previous chapter), and click Create. 24
25 Quick Tip: Once you have your New Screen displayed, you can use the same Keyboard Shortcuts you ve become accustomed to in Sketch - Zoom In Cmd + (+) - Zoom Out Cmd + (-) You can also click on the screen to have it center on the canvas when you zoom. Always handy that one. You will find there are a lot of similar actions, and keyboard shortcuts to those that you re used to in Sketch. Flinto does make the transition between the two applications feel very familiar, which is great. 25
26 We of course, won t be needing the screen that has just been created, as we re importing in the screens from Sketch. So delete it either by pressing the (Delete) key, or right-clicking on the screen, and choosing Delete. From the Inspector Panel, leave the Document settings as they are, apart from the Background Color, change that to White #FFFFFF. 26
27 Remember to quickly save the new document, and give it a name for the Sketch plugin to reference very shortly. Something like Store - Ecommerce App would be perfect. Jump back to Sketch, and make sure the Sketch file we created in the last chapter is open, and ready to rock! Choose Plugins > Send to Flinto from the Menu Bar, or use the Keyboard Shortcut (Shift + Ctrl + Cmd + F). 27
28 From the popup window, set the Scale to 200% (as we designed at 1x in Sketch, but want Flinto to scale our design up to 2x for the iphone 6 Retina screen), and click Send. 28
29 Give it a moment, as we do have quite a few screens for Flinto to process and then in the next window, check that the Flinto file you saved earlier is selected, and click Merge. 29
30 Back in Flinto, you will see all your screens have been imported into the application, and from the Layers Panel you will see that the Layer/Group hierarchy has been preserved from your Sketch file. Choose the menu item Center Canvas, and use the shortcut Cmd + (+), and Cmd + (-) so all of your screens are visible, and centered on the Canvas. 30
31 Please Note: If (in the Layers Panel) your screen names are not in the same sequence as they were in Sketch, you can easily click, and drag to re-order them correctly. 31
32 Splash With the Splash screen being the Home screen of our app, we need to let Flinto know that. So with that screen selected, check the Home Screen option from Screen Properties in the Inspector Panel. You will now see a small Home icon appear on both your screen, and in the Layers Panel. Now, we re going to add a timed transition from the Splash screen, to the Home screen. So select Timer Link in the Inspector, and enter the following settings - Timeout: Target: Home - Transition: Fade In 32
33 You will now see the Splash screen with a blue border around it, and the Home screen with a red border around it. This shows you that there is now a transition in place between those screens. Think of blue as the Start screen, and red as the End screen. Simple as that. 33
34 Quick Tip: Now would be a good time to fire up the Preview window. I know there s not much to see just yet, but from here on in you have the ability to view your changes as they happen. Click on the Preview icon in the Toolbar, or use the simple shortcut (Cmd + P). 34
35 If you haven t already, you can also grab the Flinto App from the ios App Store. Always test on a real-world device when you can that s my motto. I like to use the Preview (Cmd + P) function for my initial run-through, and then switch to the ios App after that. It s entirely up to you. 35
36 Home With this screen, we will be creating some simple links, a scrollable area, and also putting the mighty Transition Designer to the test. We ll start with the links first, and create a Link through to our Sidebar Menu screen. And I ll show you a couple of ways to achieve this. You can select an element on the screen, and simply use Create Link (F), then drag the Noodle to the screen you want to link to. Or, you can use Draw Link (D), which enables you to create a freeform link which you can create at any size you require, and is perfect for when you want to create links on smaller UI elements such as a Search icon, where you need the tap area to be a little bigger when using it on your ios device. This is the method that we ll stick with for most of this chapter. 36
37 Please Note: You may be saying What the heck is a Noodle?. A Noodle is that orange line (with the dots at each end) that connects the screens together in Flinto. I ve heard it referred to as a Pick Whip, Connector, and Outlet Thread. But we ll go with Noodle because, well, it sounds cooler. Ok. Back to it. Use Draw Link (D), to create a link hotspot around the Menu icon on our Home screen, and drag the Noodle to the Sidebar Menu screen. Then click to bring up the Gesture/Transition window. Select the Tap gesture, and click New Transition. 37
38 38
39 and boom! We re into the Transition Designer, where the really cool stuff happens. 39
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 informationMicrosoft PowerPoint 2010 Handout
Microsoft PowerPoint 2010 Handout PowerPoint is a presentation software program that is part of the Microsoft Office package. This program helps you to enhance your oral presentation and keep the audience
More informationTriggers & Actions 10
Triggers & Actions 10 CHAPTER Introduction Triggers and actions are the building blocks that you can use to create interactivity and custom features. Once you understand how these building blocks work,
More informationTutorials. If you have any questions, comments, or suggestions about these lessons, don't hesitate to contact us at support@kidasa.com.
Tutorials The lesson schedules for these tutorials were installed when you installed Milestones Professional 2010. They can be accessed under File Open a File Lesson Chart. If you have any questions, comments,
More informationHow to Use the Drawing Toolbar in Microsoft Word
How to Use the Drawing Toolbar in Microsoft Word The drawing toolbar allows you to quickly and easily label pictures (e.g., maps) in a MS Word file. You can add arrows, circle spots, or label with words.
More informationHow 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 informationAdobe 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 informationGoogle Docs Basics Website: http://etc.usf.edu/te/
Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google
More informationCreate a Simple Website. Intel Easy Steps 1 2012 Intel Corporation All rights reserved.
Create a Simple Website Intel Easy Steps 1 2012 Intel Corporation Website Creating a Simple Website As more and more people are using the Internet to get information, it has become very important for businesses
More informationOffice 365 Training. Contents
Office 365 Training Contents Logging into Office 365 and setting up your Office 365 Suite... 3 Moving Files to OneDrive for Business Cloud Storage... 6 - Creating Folders to organize your OneDrive... 9
More informationDreamweaver 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 informationMost of your tasks in Windows XP will involve working with information
OFFICE 1 File Management Files and Folders Most of your tasks in Windows XP will involve working with information stored on your computer. This material briefly explains how information is stored in Windows
More information6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field.
Adobe Acrobat Professional X Part 3 - Creating Fillable Forms Preparing the Form Create the form in Word, including underlines, images and any other text you would like showing on the form. Convert the
More informationSiteBuilder 2.1 Manual
SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved. Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can
More informationHow 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 informationMS Word 2007 practical notes
MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the
More informationHow to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
More informationUsing Acrobat Comment and Markup tools
Using Acrobat Comment and Markup tools In Adobe Acrobat 9 and Adobe Reader, a comment is a note, highlight, stamp, or any other markup you add to your PDF document by using the comment and markup tools.
More informationChoose a topic from the left to get help for CmapTools.
Using CmapTools Create a Cmap Add a Concept Create a Proposition from One Concept Create a Proposition from Existing Concepts Save a Cmap Open a Cmap Create a Folder Drag in Resources Import Resources
More informationLotus Notes Client Version 8.5 Reference Guide
Lotus Notes Client Version 8.5 Reference Guide rev. 11/19/2009 1 Lotus Notes Client Version 8.5 Reference Guide Accessing the Lotus Notes Client From your desktop, double click the Lotus Notes icon. Logging
More informationManaging Contacts in Outlook
Managing Contacts in Outlook This document provides instructions for creating contacts and distribution lists in Microsoft Outlook 2007. In addition, instructions for using contacts in a Microsoft Word
More informationBook Builder Training Materials Using Book Builder September 2014
Book Builder Training Materials Using Book Builder September 2014 Prepared by WDI, Inc. Table of Contents Introduction --------------------------------------------------------------------------------------------------------------------
More informationMICROSOFT OUTLOOK 2010 WORK WITH CONTACTS
MICROSOFT OUTLOOK 2010 WORK WITH CONTACTS Last Edited: 2012-07-09 1 Access to Outlook contacts area... 4 Manage Outlook contacts view... 5 Change the view of Contacts area... 5 Business Cards view... 6
More informationios App for Mobile Website! Documentation!
ios App for Mobile Website Documentation What is IOS App for Mobile Website? IOS App for Mobile Website allows you to run any website inside it and if that website is responsive or mobile compatible, you
More informationcss href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family
technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title CANAJOHARIE CENTRAL SCHOOL
More informationIf you know exactly how you want your business forms to look and don t mind detail
Advanced Form Customization APPENDIX E If you know exactly how you want your business forms to look and don t mind detail work, you can customize QuickBooks forms however you want. With QuickBooks Layout
More informationcss href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family
technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL
More informationSage Accountants Business Cloud EasyEditor Quick Start Guide
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
More informationSitecore InDesign Connector 1.1
Sitecore Adaptive Print Studio Sitecore InDesign Connector 1.1 - User Manual, October 2, 2012 Sitecore InDesign Connector 1.1 User Manual Creating InDesign Documents with Sitecore CMS User Manual Page
More informationImporting Contacts to Outlook
Importing Contacts to Outlook 1. The first step is to create a file of your contacts from the National Chapter Database. 2. You create this file under Reporting, Multiple. You will follow steps 1 and 2
More informationMicrosoft Outlook 2007 Calendar Features
Microsoft Outlook 2007 Calendar Features Participant Guide HR Training and Development For technical assistance, please call 257-1300 Copyright 2007 Microsoft Outlook 2007 Calendar Objectives After completing
More informationHow To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For
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 informationHow to Borrow Library Books on your PC
How to Borrow Library Books on your PC What you will need 1. Westlake Porter Public Library card number (located on the back of your library card, starts with PPPL, a total of 14 characters; card should
More informationIn list view, the Finder window displays folder or volume contents as a list, which can be sorted by name, date, kind, or other criteria.
Using the Finder When you first start up your Mac, you're greeted by the Finder, which allows you to visually access practically everything on your Mac, including applications, hard disks, files, folders,
More informationADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
More informationCricut Design Space Reference Guide & Glossary
Cricut Design Space Reference Guide & Glossary Top Menu Bar Grid On/Off button Panel Menu Side Menu Bar 1 Cricut logo click the Cricut logo at any time to return to the Cricut Design Space landing page.
More informationWord 2007: Basics Learning Guide
Word 2007: Basics Learning Guide Exploring Word At first glance, the new Word 2007 interface may seem a bit unsettling, with fat bands called Ribbons replacing cascading text menus and task bars. This
More informationMaking a Web Page with Microsoft Publisher 2003
Making a Web Page with Microsoft Publisher 2003 The first thing to consider when making a Web page or a Web site is the architecture of the site. How many pages will you have and how will they link to
More informationIntroduction to Google SketchUp (Mac Version)
Introduction to Google SketchUp (Mac Version) This guide is handy to read if you need some basic knowledge to get started using SketchUp. You will see how to download and install Sketchup, and learn how
More informationMacros in Word & Excel
Macros in Word & Excel Description: If you perform a task repeatedly in Word or Excel, you can automate the task by using a macro. A macro is a series of steps that is grouped together as a single step
More informationTUTORIAL. 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 informationAdobe 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 informationFile Management With Windows Explorer
File Management With Windows Explorer Preamble: After you have created and saved numerous files using various programs, file management, the process of organizing and keeping track of all your files, can
More informationMicrosoft Office 2010: Introductory Q&As PowerPoint Chapter 1
Microsoft Office 2010: Introductory Q&As PowerPoint Chapter 1 Are the themes displayed in a specific order? (PPT 6) Yes. They are arranged in alphabetical order running from left to right. If you point
More informationWindows XP Managing Your Files
Windows XP Managing Your Files Objective 1: Understand your computer s filing system Your computer's filing system has three basic divisions: files, folders, and drives. 1. File- everything saved on your
More informationAdvanced Presentation Features and Animation
There are three features that you should remember as you work within PowerPoint 2007: the Microsoft Office Button, the Quick Access Toolbar, and the Ribbon. The function of these features will be more
More informationCreating an Email with Constant Contact. A step-by-step guide
Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here
More informationJoomla Article Advanced Topics: Table Layouts
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
More informationChapter 14: Links. Types of Links. 1 Chapter 14: Links
1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and
More informationMaximizing the Use of Slide Masters to Make Global Changes in PowerPoint
Maximizing the Use of Slide Masters to Make Global Changes in PowerPoint This document provides instructions for using slide masters in Microsoft PowerPoint. Slide masters allow you to make a change just
More informationLYNC 2010 USER GUIDE
LYNC 2010 USER GUIDE D O C U M E N T R E V I S O N H I S T O R Y DOCUMENT REVISION HISTORY Version Date Description 1.0 6/25/2013 Introduction of the Lync 2010 to product line. 2 Lync 2010 User Guide 401
More informationSMART Notebook 10 User s Guide. Linux Operating Systems
SMART Notebook 10 User s Guide Linux Operating Systems Product Registration If you register your SMART product, we ll notify you of new features and software upgrades. Register online at www.smarttech.com/registration.
More informationunderstand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver
LESSON 3: ADDING IMAGE MAPS, ANIMATION, AND FORMS CREATING AN IMAGE MAP OBJECTIVES By the end of this part of the lesson you will: understand how image maps can enhance a design and make a site more interactive
More informationOutlook Email. User Guide IS TRAINING CENTER. 833 Chestnut St, Suite 600. Philadelphia, PA 19107 215-503-7500
Outlook Email User Guide IS TRAINING CENTER 833 Chestnut St, Suite 600 Philadelphia, PA 19107 215-503-7500 This page intentionally left blank. TABLE OF CONTENTS Getting Started... 3 Opening Outlook...
More informationCONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
More informationMicrosoft Migrating to Word 2010 from Word 2003
In This Guide Microsoft Word 2010 looks very different, so we created this guide to help you minimize the learning curve. Read on to learn key parts of the new interface, discover free Word 2010 training,
More informationCreate an Art Collage
Create an Art Collage Anyone with children knows how much art they bring home from school everyday, those backpacks full of art add up fast. Now, you don t have to part with a single precious piece or
More informationDigital Marketing EasyEditor Guide Dynamic
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
More informationIntellect Platform - Tables and Templates Basic Document Management System - A101
Intellect Platform - Tables and Templates Basic Document Management System - A101 Interneer, Inc. 4/12/2010 Created by Erika Keresztyen 2 Tables and Templates - A101 - Basic Document Management System
More informationNDA-30141 ISSUE 1 STOCK # 200893. CallCenterWorX-Enterprise IMX MAT Quick Reference Guide MAY, 2000. NEC America, Inc.
NDA-30141 ISSUE 1 STOCK # 200893 CallCenterWorX-Enterprise IMX MAT Quick Reference Guide MAY, 2000 NEC America, Inc. LIABILITY DISCLAIMER NEC America, Inc. reserves the right to change the specifications,
More informationCreate A Collage Of Warped Photos
Create A Collage Of Warped Photos In this Adobe Photoshop tutorial, we re going to learn how to create a collage of warped photos. Now, don t go letting your imagination run wild here. When I say warped,
More informationCreating Interactive PDF Forms
Creating Interactive PDF Forms Using Adobe Acrobat X Pro Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This
More informationWelcome to the Notability User Guide Find what you re looking for quickly using the search icon.
Welcome to the Notability User Guide Find what you re looking for quickly using the search icon. Table of Contents: Page 1: Table of contents Page 2: Intro and Handwriting Page 3: Writing and Typing Page
More informationChapter 23: Drafting in Worksheet View
Chapter 23: Drafting in Worksheet View Worksheet View is a powerful, 2D production drafting module. Here you can find all of the drawing and editing tools needed to create fast, accurate, detailed working
More informationMicrosoft Migrating to PowerPoint 2010 from PowerPoint 2003
In This Guide Microsoft PowerPoint 2010 looks very different, so we created this guide to help you minimize the learning curve. Read on to learn key parts of the new interface, discover free PowerPoint
More informationFoxit Reader Quick Guide
I Contents Foxit Reader Contents... II Chapter 1 Get Started... 1 Foxit Reader Overview... 1 System Requirements... 1 Install Foxit Reader... 2 Uninstall Foxit Reader... 2 Update Foxit Reader... 2 Workspace...
More informationUsing FileMaker Pro with Microsoft Office
Hands-on Guide Using FileMaker Pro with Microsoft Office Making FileMaker Pro Your Office Companion page 1 Table of Contents Introduction... 3 Before You Get Started... 4 Sharing Data between FileMaker
More informationMicrosoft PowerPoint 2010 Templates and Slide Masters (Level 3)
IT Services Microsoft PowerPoint 2010 Templates and Slide Masters (Level 3) Contents Introduction... 1 Installed Templates and Themes... 2 University of Reading Templates... 3 Further Templates and Presentations...
More informationBuild a New Website Using the UB Content Management System (UBCMS)
Build a New Website Using the UB Content Management System (UBCMS) Support Website Online training, help and support, UBCMS status and more. ubcms.buffalo.edu Training Feedback Survey https://www.surveymonkey.com/s/mm-dd-yyyy
More informationThe 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 informationStep 1: Setting up the Document/Poster
Step 1: Setting up the Document/Poster Upon starting a new document, you will arrive at this setup screen. Today we want a poster that is 4 feet (48 inches) wide and 3 feet tall. Under width, type 48 in
More informationRecreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
More informationInserting Graphics into Grant Applications & Other Word Documents
Merle Rosenzweig, oriley@umich.edu Inserting Graphics into Grant Applications & Other Word Documents ABOUT This document offers instruction on the efficient and proper placement of images, charts, and
More informationPowerPoint 2007 Basics Website: http://etc.usf.edu/te/
Website: http://etc.usf.edu/te/ PowerPoint is the presentation program included in the Microsoft Office suite. With PowerPoint, you can create engaging presentations that can be presented in person, online,
More informationFlorence School District #1
Florence School District #1 Training Module 2 Designing Lessons Designing Interactive SMART Board Lessons- Revised June 2009 1 Designing Interactive SMART Board Lessons Lesson activities need to be designed
More informationBasic Microsoft Excel 2007
Basic Microsoft Excel 2007 The biggest difference between Excel 2007 and its predecessors is the new layout. All of the old functions are still there (with some new additions), but they are now located
More informationRADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide
RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and
More informationCATIA Basic Concepts TABLE OF CONTENTS
TABLE OF CONTENTS Introduction...1 Manual Format...2 Log on/off procedures for Windows...3 To log on...3 To logoff...7 Assembly Design Screen...8 Part Design Screen...9 Pull-down Menus...10 Start...10
More informationHandout: Word 2010 Tips and Shortcuts
Word 2010: Tips and Shortcuts Table of Contents EXPORT A CUSTOMIZED QUICK ACCESS TOOLBAR... 2 IMPORT A CUSTOMIZED QUICK ACCESS TOOLBAR... 2 USE THE FORMAT PAINTER... 3 REPEAT THE LAST ACTION... 3 SHOW
More informationCAPITAL V8. Capital Business Software Tutorial Series. Introduction to Capital Business Manager V8 User Interface 1.2
CAPITAL V8 Capital Business Software Tutorial Series Introduction to Capital Business Manager V8 User Interface 1.2 C A P I T A L O F F I C E B U S I N E S S S O F T W A R E Capital Business Software Tutorial
More informationNDSU Technology Learning & Media Center. Introduction to Google Sites
NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants
More informationModule One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface...
2 CONTENTS Module One: Getting Started... 6 Opening Outlook... 6 Setting Up Outlook for the First Time... 7 Understanding the Interface...12 Using Backstage View...14 Viewing Your Inbox...15 Closing Outlook...17
More informationDESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site
Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit
More informationRaptor K30 Gaming Software
Raptor K30 Gaming Software User Guide Revision 1.0 Copyright 2013, Corsair Components, Inc. All Rights Reserved. Corsair, the Sails logo, and Vengeance are registered trademarks of Corsair in the United
More informationChapter 1. Creating Sketches in. the Sketch Mode-I. Evaluation chapter. Logon to www.cadcim.com for more details. Learning Objectives
Chapter 1 Creating Sketches in Learning Objectives the Sketch Mode-I After completing this chapter you will be able to: Use various tools to create a geometry. Dimension a sketch. Apply constraints to
More informationOutlook Web Access (OWA) 2010 Email Cheat Sheet
June 9, 2014 Outlook Web Access (OWA) 2010 Email Cheat Sheet Outlook Web Access 2010 allows you to gain access to your messages, calendars, contacts, tasks and public folders from any computer with internet
More informationGo Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
More informationOutlook Web Access Tutorial
1 Outlook Web Access Tutorial Outlook Web Access 2010 allows you to gain access to your messages, calendars, contacts, tasks and public folders from any computer with internet access. How to access your
More informationWHAT S NEW IN WORD 2010 & HOW TO CUSTOMIZE IT
WHAT S NEW IN WORD 2010 & HOW TO CUSTOMIZE IT The Ribbon... 2 Default Tabs... 2 Contextual Tabs... 2 Minimizing and Restoring the Ribbon... 3 Customizing the Ribbon... 3 A New Graphic Interface... 5 Live
More informationTABLE OF CONTENTS SURUDESIGNER YEARBOOK TUTORIAL. IMPORTANT: How to search this Tutorial for the exact topic you need.
SURUDESIGNER YEARBOOK TUTORIAL TABLE OF CONTENTS INTRODUCTION Download, Layout, Getting Started... p. 1-5 COVER/FRONT PAGE Text, Text Editing, Adding Images, Background... p. 6-11 CLASS PAGE Layout, Photo
More informationAs in the example above, a Budget created on the computer typically has:
Activity Card Create a How will you ensure that your expenses do not exceed what you planned to invest or spend? You can create a budget to plan your expenditures and earnings. As a family, you can plan
More informationGetting to know Windows 8
Getting to know Windows 8 Queen Mary student desktop Sign In & Sign Out Sign in: Please enter your Queen Mary username and password when prompted. Sign out: There are two easy ways to sign out: From the
More informationAs in the example given, a Newsletter created on the computer typically has: A title that explains what sort of information is in the newsletter
Create a How do you let others know about events and activities taking place in your community? Do you want to create a newsletter to share the information? A newsletter is a publication that is distributed
More informationOutlook Tips & Tricks. Training For Current & New Employees
Outlook Tips & Tricks Training For Current & New Employees The workshop will help build the necessary skills needed to begin using Microsoft Outlook 2010. The participant will learn how to create e-mail
More informationCreating an Email with Constant Contact. A step-by-step guide
Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here
More informationGraphic 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 informationFireworks 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 informationMICROSOFT OUTLOOK 2010
MICROSOFT OUTLOOK 2010 George W. Rumsey Computer Resource Center 1525 East 53rd, Suite 906 Chicago, IL 60615 (773) 955-4455 www.computer-resource.com gwrumsey@att.net What Is Outlook?... 1 Folders... 2
More informationWeb Ambassador Training on the CMS
Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create
More informationTakeMySelfie ios App Documentation
TakeMySelfie ios App Documentation What is TakeMySelfie ios App? TakeMySelfie App allows a user to take his own picture from front camera. User can apply various photo effects to the front camera. Programmers
More information