Create an interactive E-Magazine in Adobe InDesign

[Music] hey everyone Angelo here welcome to another design tutorial today we're gonna discuss how to create an emag Azim health and lifestyle a magazine in adobe indesign i'm gonna show you some different interactive elements you can add to an e-magazine such as clicking a icon to bring up more information about a product I'm going to show you how to add simple animation so a headline will slide in when the page loads I'm going to show you how to add an animation to an image so that it zooms in in a 2d format when the page loads I'm going to show you how to also export the document as an epub fixed layout and open it in in Apple's books app ok and so let's get started first and foremost I want to show you the document size that I'm working on so I'm just gonna go here and go up to file and new document so when you're creating a new document be sure to select the web tab up top because this is transferring over to a digital format so I would click that and then in your presets here you're only gonna see four I'm gonna I'm gonna select view all presets and make my way down to 1024 pixels by 768 so that's the format that I'm working on it's gonna come in as a landscape but because this is a magazine I wanted to keep the traditional feel and make it portrait you can make it however many pages you want you can set columns adjust the gutter these are also things you can adjust afterwards so you're not set in stone one thing we do want is facing pages and so I have six pages here and then I would just hit create pages there are my six pages okay I'm just gonna go back to the document I'm working on because I've already laid this out and we'll start on page two here this is the area that I want to work on first and let me just zoom in to show you basically what I want to do here is I want to click this icon that I've created and it'll bring up this information about the product that I'm promoting here in this key magazine okay I'm gonna do that down here as well and I'm gonna do that down here as well so it's important to know that we're gonna be using interactive panels today and so you can switch your entire workspace from essentials up here to digital publishing but what I do is I just leave it on essentials because I do like having the properties panel accessed instead I'll just go to window interactive and just pick and choose which panels I want so for this tutorial we want animation want buttons and forms and we want object States the first one we're gonna work on is out object States okay so with your selection tool in your layout if you have a detail spread like this click on the first description just click it once hold your Shift key down and click the other the second one and then go down to the last one and click that one as well we're just clicking on the descriptions and not anything else let's open up the object States panel I'm just gonna tear it off here to show you so its object States again that can be accessed from window interactive object States and what I want to do here is I want to create a multi-state object so I'm gonna click this icon here the plus icon click that that's gonna create state one which is my first date let me just click this here state one you can see it's highlighted up top here state-to-state three and you'll notice when I'm clicking one the other one disappears it collapses now oftentimes when you're creating a multi-state object like this these states may come in different order so you'll have to either rename them or drag them in order so you can drag these so drag them in order because oftentimes state one will be down here and so you want just to take the confusion I would rename them and drag them in the order that you see them on the page so the state 1 state 2 state 3 okay so misery mode just briefly here so I have this object state here and I'm just gonna click on this object States these are the options that object state options here this icon click that and we want to hide it until it's triggered okay we don't want this appearing when the page loads so let's hide that until it's triggered that is done we have state 1 state 2 state 3 okay that's it I'm just gonna put that back now we're gonna focus on the buttons that I've created here so I want to click this and this will pop up so go ahead and click that as you can see I've already turned it into a button so if I put my guides on see that little icon in the bottom right hand corner that's signifying to me that it is a button so let's open the buttons and forms I'm going to tear it off again so I'm gonna click this by the way I've just designed a circle and then overlaid a exclamation mark group them by going to object and group this way when you click either one of them they'll be together and you can either you can also make that a button so that's what I've done there so the type I want this to be a button I've already set that the action this is important so this plus sign here add new action for selected event I'm gonna click that and typically you would want if you're doing like a presentation slide you would make it next page or last page or previous page I'm gonna work my way down so epub only this is an ePub that we're working on and I want this to go to a state so let's click that and right here you select the state that you want that button to go to so it is state 1 so I'll leave that as state 1 so that one's done I'm gonna go down to state 2 here I'm gonna click that button so button is correct you can rename these buttons if you want I'm just gonna leave it as button 3 again this is important click on the plus sign go to state and change it from state 1 to state 2 okay that one's done let's go to the last one here salt and pepper mills I'm gonna click that so it's already set to a button set an action to go to state and the last one is state 3 now you could test this out and your preview spread eat putt so let me just move this up here see down below in the left hand bottom left hand corner preview spread eat pod I'm gonna click that we're gonna do that in a second but I'm just gonna zoom in here and you see up here I can click that first one there's the first one there's the second one you know this is the first one's collapsed and then the last one the second last one will collapse and then that one will appear and then you can just work your way backwards if you want but those are activated now okay and basically I've explained this in previous tutorials that's basically working with object States and buttons and forms okay so that one's all set all right let's move our way up to here I'm gonna take the animation off this so let's say none and that one also does not happen so that's good I'm gonna move buttons and forms back into the panel here and okay so this is basically a headline and just a secondary image that I want to add an animation to this one here I'm gonna set it to zoom in in a 2d format and this here I'm just gonna have it slide in from the right-hand side of the page and this is pretty self-explanatory I just added a headline here and then I added an image which I overlaid over that part of the the the photo okay alright so let's do this I'm gonna start with the headline first I'm gonna click that and we want animation so I'm gonna click the animation panel I'm just gonna tear it off here I'm gonna move it like so okay so I'm gonna click on my headline I'm gonna add a preset to this there's many to choose from I want this to fly in from the right and this will appear it'll show you a preview of how that will look add an event this is important too how do you want this to appear preferably I'd like it to appear on page load you could set it to on rollover on click on page click but I think for this instance having it on page load is probably your best bet so on page load that's good you can set the duration of how long you want this to play I'm gonna leave it at one second you can set it the playtime at one second as well you can set a loop so it keeps doing it I don't see a reason why you would have to do that in this case and then you could set the opacity I have it fading in it just gives it a nice look to it you can also set the location I'm just gonna keep it or of it in the center okay so that's good and you can just preview that if you want by going to the epub preview and there it is it's sliding in from the right that's exactly what I want now let's move this over here I'm gonna click on the image and do the same thing only this time I'm gonna add a different animation click the preset and I want zoom in 2d okay let's do that also on page load the duration is a little bit longer than that one which is fine and then everything else is the same the opacity from preset is fine as well so let's give that a go and see how that looks so there's that and there's that let's have that actually let's try something else here let's make this the duration maybe let's try that now that looks pretty good too I just set this to play a little bit longer but the look of it is is fine too and you can play with those other adjustments to see if they if they need to have your your requirements for your layout test things out also as an added I'm just gonna do this over for a sec and I'm gonna go to window and interactive and timing let's just try something else so so you see here top kitchen trends that's my headline you can play around with the timing of how these actually play as well so there's top kitchen trends and there's that photo there I'm just gonna hold my command or control key on your windows collect them together and you can actually play these together so I'm gonna click that and see how that looks if I play these on page load together that's kind of cool right let's try that again I like that right so you can test out things like that so having them play together someone's not coming in first and the other I'm gonna keep it like that that's pretty cool too alright so let's close that timing you can just move that back here okay and then let's there's another one here I'm just gonna go to my pages and let's go to page 4 again this is a cooking tip in this recipe here that I've set up and so let's do the same thing I'm gonna click this description or this cooking tip and I'm going to go to object States and I'm gonna make that a state now there's only one so that's good I'm gonna click on the icon go to the buttons and forms panel give it an action I'm gonna click and you guessed it we're gonna have it go to a state which is the cooking tea and I'm gonna click this and we want it's I believe it's state two let's see if that works [Music] okay let's try and may have gone right there let's try something else oh I know what I did there one thing I forgot to do is I'm going to click this and I'm gonna hide it until it's triggered now let's try that I'm clicking that let's see if that works hmmm okay sure what's going on here let's try that again maybe it's the wrong we'll get it okay let's let's try this again maybe the buttons off I'm just gonna delete that State for a second but bad let's hide that until triggered see if that works hmm it's giving me a tough time here I'm just gonna bypass this because basically I did it up here and actually one more thing I want to try let me just remove the button completely and do this over again [Music] what I'll do is I'm gonna go up here and just actually grab this button let's go over here I'll just change let's remove the object State from their release state object yes okay let's try that again so this is a button I just have to make this estate first so let's click this and create a state perfect and I'm gonna hide that until triggered let's click that button go to state [Music] yeah something's happening there that I don't know so I'm just gonna bypass this and go on to how to export this as a epub fixed layout okay so what I want to do is go up to file and export and you'll see that I'm gonna rename this here kitchen magazine and I'm gonna set this to my desktop and you'll notice here so when you're exporting it's probably gonna pop up as a Adobe PDF print as a default go ahead and click that and let's go to fixed layout epub and let's go ahead and save that out your epub fixed layout export options are gonna show up okay these are important to know so the viewing apps I'm just gonna go down here the viewing apps I have mine as a default because I'm working on a Mac that it's gonna open in books okay and you can also add app applications that you think may open this okay so I'm gonna go back to general and export range I want to export all the pages I also want to I want to have these set to image high quality and the metadata I've already I've already plugged all that stuff into so you can actually put this in here or you can do it in the file and then file information and it will just transfer over in here okay so I'm gonna hit OK and you'll notice that it's gonna open [Music] and this here let me just that up and let's try it out so there it is there's the first page I'm gonna go over there's that animation I'm gonna go into this page here click there click there click there go on for my last page and I'm not sure what was happening on this I have to go back and investigate that I'm not sure what was going on but you see you have a really nice layout here and the fixed epub fixed layout carries all the fonts over all the images all the interactive tools as well and then you can kind of go through it that way everyone I promised I would look into why that button wasn't working on the cooking tip and I came to in conclusion that the reason it wasn't is because had different text frames sitting on top of each other so let's try that again I'm gonna click on the text frame and let's create a new state you can either do it that way or just click on this icon let me just tear this off click the icon again okay now you can see the icon showing that's actual state I'm gonna write however I'm sorry it's gonna regular click hidden until triggered that's good now let's go back to buttons and forms let me put this back down here I'm going to with my selection tool click on the icon go to buttons in forms let me bring that up it's already a button and the action we do want this to go to a state which we initially did I'm going to change that to state two because that's what that state is called and now if I test that out we should be able to click and there it is so the reason that wasn't working is because there was several text boxes on top of each other which was hindering the button from actually working as an added bonus I'm gonna show you how to design how to format a recipe in an e-book magazine so let's go ahead I'm gonna just double click in here and in my paragraph styles I'm gonna put this away paragraph Styles can be accessed from window styles paragraph styles and that will bring up this window here I'm just gonna tear that out as well you can also access the paragraph styles in your properties panel right here okay paragraph Styles character styles we're gonna focus on paragraph so I did create a paragraph style already which is called recipes style and let me just you know what I'm gonna start a new style here so I'm gonna highlight this and I'm gonna strip out the formatting by holding option and clicking on basic paragraph now all the formatting has been stripped and let's go ahead and highlight that and in my font we're gonna work we're going to select Baskerville Baskerville italic okay and I want the I want the point size to be 8 so I want it fairly small and I want the letting to be 14 okay and I did add tabs to all of these okay so let me just go to this for the object or tight and show hidden characters okay I'm gonna assume so these little arrows here are tab so I would just actually if it was just a space and be a die but I have tabs in between and I'll show you why in a second okay so what I'm gonna do is I'm going to save this as a new I'm gonna save this as a new paragraph style so I'm gonna highlight the text that I've just created and I'm gonna go down here that up right there new new new style I'm gonna click that and there it is there I'm gonna rename it recipe style to style to this way there's no confusion okay so if I click on basic paragraph style it's just gonna go back to its basic paragraph style recipe style - it saves that formatting now there's something else I want to do here because you can see the tabbing is off and so I'm just gonna click off here and I'm gonna double click recipe style - now if at any moment I wanted to change this paragraph style I can go in into the basic character formats and if I wanted to make it bigger maybe a point size bigger you can do that I'm gonna leave it at 8 if you want to increase the lighting you can see it's happening in real time but I also want to focus right here on tabs I want to add a tab in here because right now it's just I tabbed it but it's not properly tabbed that's why you see some of the words kicking over so click on the tabs and I want a left justified tab and I'm just gonna click on this gray bar up here and then kind of maneuver it until you see everything line up nicely okay you can see there's no words kicking over obviously if it's over here it's going to kick over bring it over to about 30 right there that's good and then that's good and if I wanted to change the color of this I would go to character color maybe give it another color you could see things are updating in real time and so I'll just leave it black and hit okay and there you go that's how you create a recipe style and over here ingredients again I want that to be a different style and I've already created one here ingredients header and there you go so whenever you're creating any kind of ingredients or a recipe using those two methods tabbing things properly is a good way to go so we figured out why that button wasn't working and I threw in another little tip on how to create a recipe style in Adobe InDesign that's it for today hope you enjoyed it and we'll talk to you soon [Music]

Channel: Angelo Montilla

Views: 146,986

Keywords: adobe indesign interactive e-magazine, adobe indesign, e-magazine layout, create e-magazine, EPUB Fixed Layout, digital publishing adobe indesign

Id: 3Isp79zsgWg

Length: 24min 43sec (1483 seconds)

Published: Tue Mar 24 2020