Deezine iPad magazine design App quickguide
4 likes3,994 views
This document provides a tutorial for using the Deezine app. It contains 38 pages explaining how to start a project, edit pages, add interactivity, add content like text and media, customize reading modes, and export or share the finished project. The tutorial includes explanations and screenshots for each step of the process.
Deezine iPad magazine design App quickguide
- 1. EXT TU ENDE TO RIA D LS
- 2. www.deezine.es This tutorial guide extended is avaliable in two languages: English Castellano You can send us feedback, questions, anything to: deezine@fuelgrafics.com Credits Idea, Concept, UI and Graphic Design FUELGRAFICS Technology development and magic V2MSOFT
- 3. P.3 I Tutorials Deezine App · 2012 Contents START A PROJECT EDIT PAGE INTERACTIVITY ADD CONTENT READING EXPORT & SHARE P. 4 P.9 P.16 P.23 P.29 P.34 PROJECT GALLERY HOW TO ADD PAGE INTERACTIVITY: THE KEY ADD MEDIA READING MODE HELP P. 5 P.10 P.17 P.24 P.30 P.35 EXPORT TO NEW PROJECT WHAT IS A LAYOUT interactive MODE ADD TEXT INTERACTIVITIES .DZN FORMAT P.6 P.11 P.17 P.25 P.31 P.36 MULTI STEP IMPORT A PROJECT PAGE BROWSER BY BUTTONS ADD text from RSS top bar options EXPORT TO PDF P.7 P.12 P.18 P.26 P.32 P.37 MULTI STEP BACKGROUND SHARE IN SOCIAL PROJECT OPTIONS PAGE INFORMATION BY VERTICAL SWIPE COLOR AND TEXTURE BOTTOM BAR OPTIONS NETWORKS P.8 P.13 P.19 P.27 P.33 P.38 IMAGE USE AS PROJECT IMAGE BOOKMARKS ADD MODULE SECTIONS SEQUENCE DRAG P.8 P.14 P.28 P.20 DELETE PAGE STEP EDITOR P.14 P.21 BLOCKAGE STEP OPTIONS P.15 P.22
- 4. P.4 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT Start a Project
- 5. PROJECT GALLERY: P.5 I Tutorials Deezine App · 2012 START A PROJECT Edit /Delete Project PROJECT GALLERY The project gallery is displayed once you start the application. From the project gallery you EDIT PAGE can manage all the projects: NEW PROJECT • Start a new project • Import from Dropbox • Continue editing a project • Delete a project INTERACTIVITY Also, you can visit Deezine Social Networks, send us IMPORT A PROJECT a comment or suggest, comment Deezine on the AppStore or visit our website ADD CONTENT PROJECT OPTIONS READING USE AS PROJECT IMAGE EXPORT & SHARE
- 6. NEW PROJECT P.6 I Tutorials Deezine App · 2012 START A PROJECT PROJECT GALLERY • Click the button New Project, at the top left of the screen, to create a new work. • Type the name of the project and a new editing screen will EDIT PAGE be displayed. • Your new project will appear NEW PROJECT at the end of your projects. INTERACTIVITY IMPORT A PROJECT ADD CONTENT PROJECT OPTIONS READING USE AS PROJECT IMAGE EXPORT & SHARE
- 7. IMPORT A PROJECT P.7 I Tutorials Deezine App · 2012 START A PROJECT PROJECT GALLERY Click the button Dropbox, at the top right of the screen, to import a Deezine file from Dropbox > Deezine Folder* and keep working on it. EDIT PAGE *The Deezine Folder has been created the first time you export a project NEW PROJECT to Dropbox and you link your Dropbox account to Deezine INTERACTIVITY IMPORT A PROJECT ADD CONTENT PROJECT OPTIONS READING USE AS PROJECT IMAGE EXPORT & SHARE
- 8. P.8 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT USE AS PROJECT IMAGE PROJECT OPTIONS IMPORT A PROJECT NEW PROJECT PROJECT GALLERY • Rename • Duplicate as project image. • Move right/left PROJECT OPTIONS Any image that you used Hold the tap on a project to: inside the project, can be used USE AS PROJECT IMAGE
- 9. P.9 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT Edit Page
- 10. P.10 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT BLOCKAGE DELETE PAGE BOOKMARKS PAGE INFORMATION PAGE BROWSER WHAT IS A LAYOUT HOW TO ADD PAGE of the project. to add a new page. • Click Add Page button, at the top of the screen, How to add a page • First at all, enter at edit mode
- 11. WHAT IS A LAYOUT P.11 I Tutorials Deezine App · 2012 HOW TO ADD PAGE START A PROJECT • When you add a page for the first time, a list of Layouts and all different page typologies are displayed. WHAT IS A LAYOUT • After choosing a page from a Layout, you will have to EDIT PAGE choose next pages from layouts with same orientation; so if you choose vertical pages you may not choose PAGE BROWSER horitzontal once for this project. INTERACTIVITY • You can see a page preview, checking it and tapping on Preview Button. Then just tap PAGE INFORMATION on Add to edit it, and you can add all pages you want. ADD CONTENT BOOKMARKS READING DELETE PAGE EXPORT & SHARE BLOCKAGE
- 12. Page management buttons P.12 I Tutorials Deezine App · 2012 HOW TO ADD PAGE START A PROJECT are located, from left to right, at the bottom on the left of the screen with the edition mode, to visualize it, hold the tap during 2”: WHAT IS A LAYOUT PAGE BROWSER EDIT PAGE • Press the Page icon to browse the thumbnail page viewer in PAGE BROWSER order to see a preview of your publication. INTERACTIVITY • Tap on the thumbnail image during 3” and reorder or move pages. PAGE INFORMATION • To hide the browser window, just tap the icon again. ADD CONTENT BOOKMARKS READING DELETE PAGE EXPORT & SHARE BLOCKAGE
- 13. PAGE INFORMATION P.13 I Tutorials Deezine App · 2012 HOW TO ADD PAGE START A PROJECT • Page information. • Add Bookmark, the bookmark name will be used as a chapter name if you add an Index Page. WHAT IS A LAYOUT • Delete Bookmark, the book- mark will be deleted, also from EDIT PAGE the Index Page. PAGE BROWSER INTERACTIVITY PAGE INFORMATION BACK / FORWARD PAGE ADD CONTENT Go to back or to forward page BOOKMARKS of the project. READING DELETE PAGE EXPORT & SHARE BLOCKAGE
- 14. P.14 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT BLOCKAGE DELETE PAGE BOOKMARKS PAGE INFORMATION PAGE BROWSER WHAT IS A LAYOUT HOW TO ADD PAGE number. Bookmarks Delete Page Go to bookmark or page Delete just the active page.
- 15. P.15 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT BLOCKAGE DELETE PAGE BOOKMARKS PAGE INFORMATION PAGE BROWSER WHAT IS A LAYOUT HOW TO ADD PAGE Blockage For example in: the editable area / zone. the page if it is bigger than Voguee Layout > Double Page editable element and to scroll Press this button to block any
- 16. P.16 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT Interactivity
- 17. Interactivity: The key P.17 I Tutorials Deezine App · 2012 INTERACTIVITY: START A PROJECT THE KEY • Interactivity is the key of this application: you can view and interact with the content of the page interactive MODE in many different ways. • The interactive reading is now EDIT PAGE a new field of experiences for the users, who can interact on presentation modes with images and contents: rhythm, BY BUTTONS MULTI STEP order and sequences of content are offered to users. INTERACTIVITY BY VERTICAL SWIPE MULTI STEP INTERACTIVE mode ADD CONTENT • Deezine offers 4 interactive modes with every Layout, SEQUENCE DRAG called Interactivity mode. IMAGE • Press Interactivity mode button to select and choose an interactive from the panel displayed. READING • With No Steps mode: There is STEP EDITOR only an image-text content on the page view. EXPORT & SHARE STEP OPTIONS
- 18. Multistep by buttons P.18 I Tutorials Deezine App · 2012 INTERACTIVITY: START A PROJECT THE KEY • A Step (images/text content) will be displayed, by choosing the interaction mode Multi Step by buttons, with buttons interactive MODE for each added Step. • This is the only interaction EDIT PAGE mode that supports video. • See more in Reading BY BUTTONS MULTI STEP INTERACTIVITY BY VERTICAL SWIPE MULTI STEP ADD CONTENT SEQUENCE DRAG IMAGE READING STEP EDITOR EXPORT & SHARE STEP OPTIONS
- 19. P.19 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT IMAGE MULTI STEP MULTI STEP INTERACTIVITY: STEP OPTIONS STEP EDITOR interactive MODE SEQUENCE DRAG BY VERTICAL SWIPE BY BUTTONS THE KEY images. Multistep • See more in Reading by vertical swipe when users swipe vertically Multi Step by vertical swipe, content) will be displayed by • An specific step (images/text choosing the interaction mode
- 20. Image sequence drag P.20 I Tutorials Deezine App · 2012 INTERACTIVITY: START A PROJECT THE KEY • An specific step (images/text content) will be displayed by choosing the interaction mode Image Sequence Drag, when interactive MODE the user slides their fingers along the images. EDIT PAGE • This is a useful interaction to create narrative experiences through images. • See more in Reading BY BUTTONS MULTI STEP INTERACTIVITY BY VERTICAL SWIPE MULTI STEP ADD CONTENT SEQUENCE DRAG IMAGE READING STEP EDITOR EXPORT & SHARE STEP OPTIONS
- 21. Step editor P.21 I Tutorials Deezine App · 2012 INTERACTIVITY: START A PROJECT THE KEY • The Step Editor button offers information about the active step and the total amount of steps to be done. interactive MODE • To edit the content, press the Steps button to view EDIT PAGE the Step editor board. • Users can choose from this bar: - Tap over the step number BY BUTTONS MULTI STEP to view the step content - Add a new step tapping INTERACTIVITY the + button - Delete a step tapping the - button, always delete BY VERTICAL SWIPE the last step. MULTI STEP ADD CONTENT SEQUENCE DRAG IMAGE READING STEP EDITOR EXPORT & SHARE STEP OPTIONS
- 22. P.22 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT IMAGE MULTI STEP MULTI STEP INTERACTIVITY: STEP OPTIONS STEP EDITOR interactive MODE SEQUENCE DRAG BY VERTICAL SWIPE BY BUTTONS THE KEY Options: step options • Duplicate the same step during 2”, will appear Step If you hold the tap on a step • To move right/left the step
- 23. P.23 I Tutorials Deezine App · 2012 START A PROJECT EDIT PAGE Add Content INTERACTIVITY Users can insert their own images/video and text and edit background color and texture. ADD CONTENT You can add content in every selected Step, if the site has them. READING EXPORT & SHARE
- 24. ADD MEDIA P.24 I Tutorials Deezine App · 2012 START A PROJECT ADD MEDIA • Grey squares indicate the designate space for images or videos. • Tap edition icon (pencil) and an editing board will be displayed, from where you EDIT PAGE can choose, in this order: - Materials, photos or videos. ADD TEXT - Materials source; iPad photo album, social network (Face- book, Flickr, Youtube, Vimeo), camera (all iPads least iPad1). - Use a texture in the content. INTERACTIVITY - Assign a geolocation or allow fullscreen. ADD text from RSS • When you added an image, you can zoom in/zoom out with two fingers in the image area. ADD CONTENT • Be aware, it is not possible to mix image and video in the same interactive page. COLOR AND TEXTURE BACKGROUND READING ADD MODULE EXPORT & SHARE SECTIONS
- 25. ADD text P.25 I Tutorials Deezine App · 2012 START A PROJECT ADD MEDIA • Squares with red broken lines indicate the designate space 2” for text edition. • Tap the area during 2” and a panel to write will be displayed, you can: EDIT PAGE - Type from your iPad Keyboard on the white gap. ADD TEXT - Or Select the text from a URL RSS. • The options to modify the text are: INTERACTIVITY - Pick the font color - Choose the font in a hole font families diversity ADD text from RSS - Choose font size - Choose aligment of the text • You can choose if you want an interactive text area in ADD CONTENT each step or just use it on every step. • Deezine recognize URL links COLOR AND TEXTURE BACKGROUND READING ADD MODULE EXPORT & SHARE SECTIONS
- 26. ADD text from RSS P.26 I Tutorials Deezine App · 2012 START A PROJECT ADD MEDIA • It is really easy to add text from URL of RSS. • Copy the URL of the RSS Blog, something similar at: http://feeds2.feedburner.com/ fuelgrafics EDIT PAGE • Paste it on the gap • And choose the text you want ADD TEXT to add. • Now you can modify it as you like. INTERACTIVITY ADD text from RSS ADD CONTENT COLOR AND TEXTURE BACKGROUND READING ADD MODULE EXPORT & SHARE SECTIONS
- 27. P.27 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT ADD MODULE BACKGROUND ADD text from RSS ADD TEXT ADD MEDIA SECTIONS COLOR AND TEXTURE and texture texture of the page. edition icon to select • Each background has an the background color and Background color
- 28. P.28 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT ADD MODULE BACKGROUND ADD text from RSS ADD TEXT ADD MEDIA SECTIONS COLOR AND TEXTURE laterally. sections. Add New Module Area. • Some pages add module • To add a new module, tap the Add module sections • To delete the module swipe it
- 29. P.29 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT Reading
- 30. READING MODE P.30 I Tutorials Deezine App · 2012 START A PROJECT READING MODE • The Preview Button is located at the top on the right of the screen margin. Tapping the button, Deezine switches into reading mode from the same page. EDIT PAGE • Swipe from right to left to go to next page. • Swipe from left to right to go to previous page. INTERACTIVITIES INTERACTIVITY ADD CONTENT top bar options READING BOTTOM BAR OPTIONS EXPORT & SHARE
- 31. Interactivities P.31 I Tutorials Deezine App · 2012 START A PROJECT READING MODE Users will find icons in any page for every type of interaction: • Multi Step by buttons: Tap each button to display EDIT PAGE each Step content. • Multi Step by vertical swipe: Swipe vertically an image to display each Step content. INTERACTIVITIES Only works over image area. • Image Sequence Drag: INTERACTIVITY Slide your fingers along the images to display each Step content. Only works over image area. • No Steps: The page offers only a group of content or Step, because ADD CONTENT there is no interactivity applicated. top bar options • If you forget add interactive mode option, it will appear an empty icon, to advice you • Active Step / Total Steps: Show active steps and total READING steps. • See more in Interactivity BOTTOM BAR OPTIONS EXPORT & SHARE
- 32. P.32 I Tutorials Deezine App · 2012 START A PROJECT Top bar options READING MODE To visualize/hide the Naviga- tion Tools hold the tap, out of text area, during two seconds. • Help: Expand help page EDIT PAGE • Export: Go to export tutorial • Edit mode: Go back to edition mode from INTERACTIVITIES the active page. INTERACTIVITY ADD CONTENT top bar options READING BOTTOM BAR OPTIONS EXPORT & SHARE
- 33. bottom bar options P.33 I Tutorials Deezine App · 2012 START A PROJECT To visualize/hide the Naviga- READING MODE tion Tools hold the tap, out of text area, during two seconds. • Browser: - Press the Page icon to brow- se the thumbnail page viewer EDIT PAGE in order to see a preview of your publication. - Tap on page you would like to view. INTERACTIVITIES • Page Information: Show the page number, the INTERACTIVITY title and the bookmark title (if it has it) • Go to next / back page • Go to page or bookmark • Text size: Increase the text size ADD CONTENT and return to original size top bar options READING BOTTOM BAR OPTIONS EXPORT & SHARE
- 34. P.34 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT Export & Share
- 35. P.35 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT SHARE IN SOCIAL NETWORKS EXPORT TO PDF EXPORT TO .DZN FORMAT HELP HELP It shows a new screen with definitions related to the page.
- 36. P.36 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT SHARE IN SOCIAL NETWORKS EXPORT TO PDF EXPORT TO .DZN FORMAT HELP FORMAT EXPORT TO .DZN read or keep editing it. into Deezine format (.dzn). So, any person with the app can enjoy your publication, to • Users can export a publication
- 37. EXPORT TO pDf P.37 I Tutorials Deezine App · 2012 START A PROJECT • Export to PDF and decide if you want to upload HELP the file to Dropbox in (Aplications>Deezine >Your Project) or open it on device. • Your Deezine Project in PDF EDIT PAGE format shows each step of interactivity on a different page. EXPORT TO .DZN FORMAT INTERACTIVITY ADD CONTENT EXPORT TO PDF READING SHARE IN SOCIAL NETWORKS EXPORT & SHARE
- 38. P.38 I Tutorials Deezine App · 2012 EXPORT & SHARE READING ADD CONTENT INTERACTIVITY EDIT PAGE START A PROJECT SHARE IN SOCIAL NETWORKS EXPORT TO PDF EXPORT TO .DZN FORMAT HELP -Twitter -Facebook networking share in social vourite social networks: experiences through their fa- • Users can share their Deezine
- 39. deezine.es