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.

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