Pink Floyd iBook

A visual history and the benefits of media compression

“All in all it was just a brick in the wall” is one of the most famous lyrics sung by legendary band Pink Floyd. This is the second Pink Floyd project I’ve done within the past year and I had almost all of my assets gathered, but I wanted to tell their story in a different way.

This book was a side project in my media compression class. At the end I will go through the benefits of compressing media to help make future projects smaller, yet retain their clarity.

I will present this book in the same order we compressed media files in class: audio, video, then images.

The first section I created was the album section. I thought about adding every audio file (like I did in my previous project) but that didn’t seem feasible. Even though I properly compressed the audio in my previous project, 169 songs still takes up a good amount of space.

I heard another student talk about Bookry widgets. I went online and found that they can be used for a variety of things, one of them being iTunes albums. Here’s just a handful of almost four dozen widget options:

Once I filled out the proper information for each album (including artwork) I downloaded the widget and placed it inside iBooks Author. I disguised it so it would look just like an image. I did add a prompt on the first album’s page letting the user know that it is tappable. Here are all the albums on one page (just to limit the number of screenshots in total):

And here is the widget and its interactions:

Here is a clip of Echoes, Live in Pompeii. The whole song is around 20 minutes long, I only used a 4 minute clip:

The final step in making the book was adding images, lots of them. I wanted to make this book as visual and interactive as possible. I had two main ideas for image-heavy sections: the band’s history and a profile of each of the band members. I first started with their history.

The first thought I had when creating this section was “How can I make this fun and have as little text as possible?” I was looking at images of the band online when I came across one band member’s (David Gilmour)guitars. That’s when it hit me: I could have the black fret marks tell their history. I’ll make each of them tappable and contain an important date in their almost 50-year history.

It was a little hard trying to fit the guitar all on one page so I photoshopped the guitar into two pieces and put them on separate pages so as one page turns and fades into the next. The effect is seamless. One downside of making the fret marks tappable is that it is hard to tap due to it being so small.

I thought I was finished with their history section when I noticed the tuning pegs. I thought, “What could I do with those?” I thought about it for a while until I decided it would be fun to list six cool facts about the band, one for each peg. I had to photoshop each peg individually as well as each fret mark and placed each in a pop-over so that when it was tapped, it would show the information. I also added some hints on each page on how to interact with the images. Here is a video of the guitar and the tuning pegs and their interactions:

The final section I made was about each of the band members. I debated not only on what information to give but how to design it. The biggest issue I had was how to make this section feel cohesive and seamless.

I tried several things from having one consistent background to having different album slices aide in page transitions. The bright colors of the different albums proved to be distracting so I decided to cut their Dark Side of the Moon album into nine pieces to be the background.

As far as information for each member, I chose to list the year and location they were born and some less-known facts.

The final part that I’d like to talk about is compressing media. Without compressing any of this media it came out to be over 600MB! Thats pretty crazy! But after compressing the video (to an H.264) and the images (.JPG by 50%) the overall size went down by about 2/3. Thats pretty eye opening.

I learned a lot in this project, not only in designing a more visual history, but in media compression.