Piktochart 101 Create your first infographic in 15 minutes

Similar documents
NDSU Technology Learning & Media Center. Introduction to Google Sites

Google Docs Basics Website:

Google Sites: Creating, editing, and sharing a site

How to Edit Your Website

Mail Chimp Basics. Glossary

How to Create a WordPress web site at

Catalog Creator by On-site Custom Software

HOW TO USE THIS GUIDE

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Sage Accountants Business Cloud EasyEditor Quick Start Guide

Hello. What s inside? Ready to build a website?

Working with the Ektron Content Management System

Creating a Website with Google Sites

If you know exactly how you want your business forms to look and don t mind

How 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

Digital Marketing EasyEditor Guide Dynamic

You can make your own layout / theme for your PowerPoint project.

Joomla! 2.5.x Training Manual

darlingharbour.com Content Management System Tenant User Guide

Chapter 1 Kingsoft Office for Android: A Close Look. Compatible with Microsoft Office: With Kingsoft Office for Android, users are allowed to create,

If you know exactly how you want your business forms to look and don t mind detail

Creating a Website with Google Sites

WP Popup Magic User Guide

Starting User Guide 11/29/2011

SmallBiz Dynamic Theme User Guide

+ Create, and maintain your site

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL

Terminal 4 Content Types. Need help? Call the ITD Lab, x7471

How to Edit an . Here are some of the things you can do to customize your

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

Introducing our new Editor: Creator

How To Add The WebReserv Booking Calendar To Your Facebook Page

WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version

MailChimp Instruction Manual

Microsoft Word 2013 Tutorial

ArcGIS online Introduction Module 1: How to create a basic map on ArcGIS online Creating a public account with ArcGIS online...

Introduction to Drupal

Website Editor User Guide

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

PowerPoint 2007 Basics Website:

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote

DRUPAL WEB EDITING TRAINING

Glogster.com. Type code from box above

Introduction To Microsoft Office PowerPoint Bob Booth July 2008 AP-PPT5

PowerPoint 2013 Basics of Creating a PowerPoint Presentation

University of East Anglia Liferay Training Admissions, Recruitment and Marketing Department

Using the Adventist Framework with your netadventist Site

Getting Started with SurveyGizmo Stage 1: Creating Your First Survey

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site

Frog VLE Update. Latest Features and Enhancements. September 2014

Access Edit Menu Edit Existing Page Auto URL Aliases Page Content Editor Create a New Page Page Content List...

WP Popup Magic User Guide

Hello. What s inside? Ready to build a website?

introduction to emarketing

6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field.

Increasing Productivity and Collaboration with Google Docs. Charina Ong Educational Technologist

Creating Web Pages with Microsoft FrontPage

Creating an with Constant Contact. A step-by-step guide

Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)

CMS Training. Prepared for the Nature Conservancy. March 2012

Drupal Training Guide

TABLE OF CONTENTS SURUDESIGNER YEARBOOK TUTORIAL. IMPORTANT: How to search this Tutorial for the exact topic you need.

Google Sites: Site Creation and Home Page Design

Microsoft PowerPoint 2010 Handout

Excel 2007: Basics Learning Guide

Creating a Poster in PowerPoint A. Set Up Your Poster

How To Manage Your Website On A Webmaster.Com (Webmaster) On A Pc Or Mac Or Macbook Or Macintosh (Web) On Pc Or Ipa (Web).Com (For Mac) On Your Pc Or Pc Or Your

Microsoft Expression Web Quickstart Guide

Community Health Maps Lab Series:

Saving work in the CMS Edit an existing page Create a new page Create a side bar section... 4

MS Word 2007 practical notes

Cricut Design Space Reference Guide & Glossary

Creating an with Constant Contact. A step-by-step guide

Introduction to dobe Acrobat XI Pro

Personal Portfolios on Blackboard

How to Use Swiftpage for Microsoft Excel

Dreamweaver and Fireworks MX Integration Brian Hogan

SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts

Penn State Behrend Using Drupal to Edit Your Web Site August 2013

Hands-on Guide. FileMaker Pro. Using FileMaker Pro with Microsoft Office

Setting Up Your Online ecommerce Shopping Cart

Terminal Four (T4) Site Manager

emarketing Manual- Creating a New

How to Create Pages Editing the Home Page two column layout.

Building Capacity to Use Infographic Tools

Teacher Training Session 1. Adding a Sub-Site (New Page) Editing a page and page security. Adding content cells. Uploading files and creating folders

Site Administrator User Guide. show, tell, share

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit

BID2WIN Workshop. Advanced Report Writing

Working with the new enudge responsive styles

Vodafone Business Product Management Group. Hosted Services EasySiteWizard Pro 8 User Guide

Content Management System User Guide

How to Use Swiftpage for Microsoft Outlook

Adding Links to Resources

Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015

User Guide. User Guide Title Page Page i

LiveStreamingCDN Producer User s Guide

UF Health SharePoint 2010 Introduction to Content Administration

Transcription:

Piktochart 101 Create your first infographic in 15 minutes

TABLE OF CONTENTS 01 Getting Started 5 Steps to Creating Your First Infographic in 15 Minutes 1.1 Pick a Template 1.2 Click Create and Start Adding Your Text! 1.3 Insert Your Graphics 1.4 Visualize Your Data 1.5 Share Your Infographic with the World! 3 02 The Piktochart Crash Course for Creating Killer Infographics 2.1 How to Cut, Copy, Paste, or Delete Elements From Your Canvas 2.2 How to Upload an Image to Your Account 2.3 How to Customize the Height and Width of Your Infographic 2.4 How to Save and Download Your Infographic 2.5 How to Print Your Infographic 2.6 How to Enter Presentation Mode 2.7 How to Publish Your Infographic Using HTML 9

If you are a bit nervous about diving in and creating your first infographic or think it will take hours, don t worry. In this ebook, we are going to show you how to create your first infographic with Piktochart s easy-to-use editor, which will allow you to tell a beautiful visual story in just five easy steps. Let s get started! After logging into Piktochart, you will first land on the Piktochart Templates page. CHAPTER 1 Getting Started 5 Steps to Creating your First Infographic in 15 Minutes 3

You can scroll through the hundreds of templates according to their respective formats: Infographic, Report, Banner, and Presentation. STEP 1 If you know the name of the theme you are looking for, use the search bar to find it quickly. Pick a template You can also filter through themes with similar topics to find templates that match the infographic you want to create! Here is a link to all the templates you need to get started! We have made the selection process as easy as possible: When you hover over a template, you will have two options to choose from: Preview and Create. You can preview and easily browse all of the available templates. Templates that are under FREE THEMES are free to use, whereas PRO THEMES can only be edited with a Pro account. 4

STEP 2 Click Create and Start Adding Your Text! You can take a closer look at each template by clicking Preview. Once you found an the perfect template, click Create to load the selected template and enter the Piktocharts Editor. When working in the editor you can add and delete text by double clicking on the text boxes. You can also make use of our new tool called Textframe to make stand-out text and titles with ready-to-use graphics! 5

STEP 3 Insert Your graphics Just click or drag-and-drop the graphics you need from the menu to your canvas. There are thousands of icons and images available in our libraries to make your infographic pop! Use the search tool or browse through them by category. You can also customize the color, size, and alignment your graphics as well. Our recent innovation called Photoframe allows you to drag and drop your photos into ready-made designs that instantly mask and pair your photos with text awesome right? You can also upload images from your desktop by dragging the photo to anywhere within the canvas. You can then use the the Arrange function in the property bar at the top. To set a background image, all you need to do is to set your uploaded picture as the most bottom layer.note that there are four layer buttons in the Arrange tool in the property bar. Select the picture which you want as a background image, and click on the second send to back Arrange button and it will be layered at the bottom, acting as a background on the block. 6

STEP 4 Visualize Your data Use the tools available in the left sidebar to visualize your data. There are tons of options to create charts and maps that can be customized to beautify your data. To create a chart, go to Tools at the menu on the left. Click on the Charts icon. A popup will appear that enables you to choose the best chart style for your data, coupled with a spreadsheet to input your data. Within the data tabs are two buttons Sample Data 1 and Sample Data 2. They are dummy data points to help you preview the different visualizations. You can insert data by copying and pasting from an existing table/spreadsheet. Alternatively, connect to Google spreadsheets or upload an Excel spreadhseet. Please note that for the format, it will need to at least have a header row or column with labels. Once you have inserted the information you need and selected the correct visualisation chart, click on the teal Insert Chart button at the top right corner of the popup. 7

STEP 5 Share your infographic with the world! You can preview your infographic before publishing by clicking on the teal Preview button at the top menu. It provides a clear picture of what your infographic would look like when embedded or when printed out. If all is well, it s time to share it! Reach your audience and make your infographic successful by publishing and sharing it. You can download your work as image, publish to the web, share by email, or share your infographic directly to social media. View your infographic on the output page by following the provided URL when you publish to the web for public viewing. As a Pro user, you will be able to download the infographic as a PDF and have higher resolution for downloads. And that s it! Pretty easy, huh? To review, here is the path to creating an amazing visual story with a Piktochart infograhic: Pick a Template Click Create and Start Adding Your Text! Insert Your Graphics Visualize Your Data Share Your Infographic with the World! But this is just the beginning. In the next chapter, we are going to show you the Piktochart Crash Course and pull back the curtain to give you everything you need to make beautiful infographics. 8

CHAPTER 2 The Piktochart Crash Course for Creating Killer Infographics Now that you ve got the basics down, we are going to give you an in-depth crash course so you can take your infographics game to the next level. In this chapter, you ll learn how to add graphical elements to your infographic, how to resize it, and how to download, print, or present your infographic, and more! When you are through, your friends will be asking you to create infographics for them! 9

How To Cut, Copy, Paste, or Delete Elements From Your Canvas There are a two ways in which you can copy, paste or delete elements from your canvas! How to Upload an Image to Your Account There are two ways in which you can upload an image to account. 1. The first way is to use the tools in the menu. 1. Drag & Drop: Click on the Upload Image icon (on the left menu) to open up your uploads library. There s an area at the top in which you can drag and drop your image. Your image will then appear in your library. You can also drag and drop images from an open folder on your computer directly onto the canvas you are working on. Use the tools located on the menu at the top of the canvas editor. The first two buttons are to undo or redo actions. The next four icons allows you to (from left to right) copy, cut, paste and delete selected elements from your canvas. 2. The second way is to use keyboard shortcuts. CTRL-C to Copy CTRL-X to Cut CTRL-V to Paste You can use Backspace or Delete to delete elements from your canvas. CTRL-Z to Undo CTRL-Y to Redo 2. Select Your File: By clicking on that selection a window will pop-up, and you can then select the file from your computer. The image will appear in your uploaded images library. You can keep track of the number of uploads with the tracker. PRO users can upload up to 400mb of images, whereas LITE users can upload 100mb of images. FREE users can upload up to only 20mb. Each image should be in jpeg, jpg or png format, and 2mb or less in size. To delete your uploaded images, just click on the X at the top right corner of the image you have uploaded. Note that if you delete an image from your Uploads library, the image will not appear on any canvases to which it was added. However, the image will appear on the downloaded infographic. 10

How to Customize the Width and Height of Your Infographic Customize block width and height: You can do this on each of the blocks settings. There are two methods in which you can resize a block on your canvas. Customize block height: 1. Click on the block you want to resize to select it. There will be a white semitransparent bar defining the boundaries between the blocks. 2. A two way arrow will appear when you mouse-over this bar. Click on it and drag to resize the block height. 3. A tiny black box will appear to show you the size height to guide you as you resize. Please note that this method allows you to quickly resize the height of the block only. If you would like to resize both width and height, please use the following method. 1. Click on the block you want to resize to select it. There are six buttons on the left of the block. 2. Click the cog-shaped button (at the bottom) for Settings. It opens up a menu to change the width and height. Piktochart provides pre-set width e.g. 600, 800, and 1280 pixels width. If you would like a customised width, open the drop-down menu under Canvas Width and choose Custom. A textbox to input your desired infographic width should appear. Please note that changing the width on any block will apply the changes to all blocks. You can also input your desired height (in pixels) for the selected block. 11

What is Resize Content? How to Save and Download Your Infographic The checkbox Resize Content will scale all objects within the selected block accordingly as the block size changes. For example, if the infographic block size is reduced, all objects will shrink accordingly. Changing each object s size separately will not be needed, hence saving precious time! If Resize Content is unticked, any changes made on the selected block size will only affect the block, and all objects remain untouched. Note that the width changes will take place from the right side of the block! Can I change the width and height for Presentation formats? Our Presentation format templates are scaled to a 4:3 ratio and the option to customize the height of an individual block is disabled. This is because Presentation formats are optimized for presentation purposes the size is purposed to fit nicely on a projector screen. However, users may customize the width; the infographic block height will scale accordingly. 1. First, save your infographic by clicking on the Save button at the top right. 2. You will be prompted to enter a title for your infographic, and it might take a few seconds while a thumbnail is generated. After this, your infographic will be saved in your account for future uses. 3. Next, click on the Download option in the upper right. 12

How to Enter Presentation Mode Presentation mode is an interactive way to view your Piktochart infographic one block at a time. Using Piktochart for presentations means being able to create beautiful designer-made presentations using Piktochart templates. Presentation Mode is available once you have Saved and Published your Piktochart. When you view your infographic in a browser using the provided URL, you will have the option to enter Presentation Mode using the button at the top right. 1. A popup will appear. Here, you can pick the Resolution (image/ PDF), Size (Original/ Medium/ High Resolution/ Custom), and Size Format (PNG/JPEG) that you would like to save your infographic in. 2. If this download doesn t happen automatically, you can right click on the thumbnail and choose where in your computer you would want to save your infographic. How to Print Your Infographic Piktocharts may look great on-screen, but we know there may be times when you d like to have your infographic on paper. Once you enter Presentation Mode, all buttons will fall away to reveal an uncluttered view of your Piktochart one block at a time. You can transition from one block to another by clicking on the arrows to the right or by using the arrows on your keyboard. To print, you have to first download your infographic to your computer. Next, find the file you saved to your computer. Open it using your computer s photo software, and print with that application. 13

How to Publish Your Infographic To publish your Piktochart, first, click on the Publish button at the top right corner. A popup will appear with the option to publish your Piktochart. To publish your Piktochart using HTML, click on Public at the popup menu. You will then receive an output url, and HTML codes. You can share the url with your friends. Use the HTML codes to embed the Piktochart to your website or blog. You have the option of setting a custom width to your infographic within an iframe. Click Publish and decide if you want your Piktochart available for Public View, only for a chosen few (Share) or for your eyes only (Private). To do so, first go to the HTML or text section of your site editor. For WordPress, this is called the text tab. Copy and paste the entire code into this portion and publish your website. Different sites have different configurations. You may wish to contact your webmaster for help. This is usually a very straight forward process. Kindly note that some of these features are only available to PRO users. More information can be found in this Piktochart blogpost. 14

Final Thoughts That is the end of our Piktochart Crash Course on infographics, congratulations! You are all set to start creating beautiful visual stories with our infographics editor. If you d like to see all this in action, you can become Piktocharter in no time by watching our video tutorials on the Piktochart YouTube Channel! We also have created a follow up ebook to this one, Using Piktochart Like A Pro, where we ll show you how to become an expert infographics artist, with the ability to use everything in our editor s arsenal to make infographics like best design agencies. Follow us on these fine sites for more: 15