Create an interactive pdf design portfolio

This is great technique you can do on Adobe InDesign to create a pdf portfolio. Basically it allows you to export a pdf with buttons which control large images to appear. You can even add rollover effects to the buttons. Almost exactly like a website portfolio really. I originally posted this tutorial in brief in another article, but wanted to revisit as I still think it makes a great portfolio and can really make you stand out.

So, lets start. Firstly place all your portfiolio  images onto the page. Start off with some smaller images. These act as the buttons which in turn will bring up a larger image. Place each one on a separate layer (window>layers), this will help to keep the file organised.

Next create the larger images you want to appear once the button has been pressed. These will normally be exactly the same – just bigger so everyone can see your pretty work. Put these on the same layer as the button they correspond to. Now we want to turn all our images into buttons, even the large ones. To do this hold control and click on the image (right click if your on a PC) go to interactive>convert to button. Alternatively you can bring the button panel up by going to window>interactive>buttons. Call the smaller images ‘button 1-6′, and the larger images, ‘button image 1-6′.

Nice and organised so far huh. Now lets add the rollover function to the buttons. Go to window>interactive>states which will bring you the states panel. Selecting the button you want to apply the rollover to, click the third icon along at the bottom to ‘create a new optional state’. This should automatically create a rollover image. Currently it will be the same image…so whilst selecting the rollover layer on the states panel, insert the image you want to appear as the rollover into the button box. I have chosen a black tinted image, which was made in photoshop. You may need to rescale this to fit the box. Do this to each of the smaller buttons. You won’t be able to see the rollover yet as it will only appear in an exported pdf. This tutorial was done using a slightly older version of InDesign. On CS4 it will actually be easier as the state panels just appear directly in the button panel

So now all our images are buttons and we have the rollover in place. Now lets get some more interactivity going. The way this works, is that we will place an event on each button to hide all the button images bar one. That way when you click on the button, it will show its corresponding image. Within the states panel, and making sure the original button layer of button 1 is selected (the one entitled up, not rollover), click on the options arrow on the top right and select button options. Leave general as it is and click on behaviours. Leave the event panel as mouse up, and change the behaviours panel to Show/Hide Fields. The button images are what you want to edit here. Make button image 1 visible by clicking on it once. All the others make invisible by clicking on them twice. A not visible symbol will appear next to them. Click on the add button, and you will see this behaviour appear in the left hand panel. Press OK. You need to add these behaviours to all the small buttons, changing the behaviour accordingly. So on Button 2, on mouse, you would have Button image 2 visible and all the others invisible. Again this is slightly differen’t on CS4. To add behaviousr there is a simple plus button – the rest should work the same.

And that is our file done I have added a title to mine as well. Now we need to export it as a pdf. Go to file>export and select pdf in the format panel. In the pdf options box, you must tick the interactive elements in the include options. And thats it! an interactive pdf portfolio with rollover buttons. Enjoy.

This tutorial was made in CS3. In CS4, you can even export the file as a swf, for web use. Click here for a tutorial to export as a swf from CS4. Is there anything Adobe InDesign can’t do? I hear you ask!