Naruto E-book Enhancement

Josh Wilsher
Oct 14, 2018 · 12 min read

Creating a Next-Level Ninja Experience

After the legendary manga series of “Naruto” ended in 2016, there was a slight void that was quickly filled by supplement novels that kept the story alive through the eyes of supporting characters. These novels told of how the ninja-world was affected after the end of Naruto’s saga, and overall was intended to act as filler stories with a few more consequences. The book that I chose to enhance in this process was the first released novel that follows one of my favorite characters. The novel is called “Kakashi’s Story” and focuses more on the character of Hatake Kakashi, Naruto’s teacher.

I chose this book as I knew that I would be able to utilize the history of Naruto. Being a massive fan of the series, I had a great deal of ideas to do the book justice and create an experience that is immersive for both veteran fans like myself, and newcomers. Although the book is a filler story, it is considered canon to the series and I wanted to add small details to draw readers and fans to experience a story that isn’t is the traditional manga form that Naruto has been in for 15 years.

Ninja Academy — The Plan

Pop-ups

Character (left) and power (right) pop-ups

The second pop-up topic I included was the superpowers (“Jutsu” as it’s known) being used in the story. The Jutsu are some of the most exciting parts of Naruto and I wanted the action of the story to be somewhat moving with the story. The example above shows how the reader is able to learn on-the-go what the “multiple shadow clone” technique is, and once having detoured for a few seconds, can carry on where they left off.

Final rendition of the pop up elements

The layout of the pop-up was fairly easy for me to design because I wanted it to loosely mimic a scroll. It would also have a front and center image with a smaller amount of text explaining the character than the glossary had

With the pop-up itself, I chose a light yellow/cream color to act as a seasoned paper look and then added a slight drop shadow to the character to help them jump from the pop-up and stand out.

When importing into ibook author, the image is automatically set to the left of the pop-up box. A text wrap around the image looked inconsistent and messy, whereas placing the image top and center worked well with the pop-up showing the character first and then optional information below the image.

Hidden Leaf Village Crest

For the reader to access the pop- ups, I used one of the most iconic symbols from the Naruto series, and that is, the crest for Konohagakure or “the village hidden in the leaves” which is the home state of Naruto, Kakashi, and most of the cast. With it being a familiar symbol, it’s something that draws the reader’s eye and provides a large enough area for the reader to tap on, while still remaining discreet enough to blend into the text of the book. Another reason that I chose the Konoha symbol was to maintain consistency when it came to the pop-up option, and having the most recognizable symbol in Naruto helped with that.

Glossary

2 version of a glossary page

As with the pop ups, I encountered the issue where the glossary pages forced my image to the right. I thought about wrapping the text around the image but thought that it would look too blended and opted for it to be below the image. At first, I entertained the idea of having the image sitting to the left with the text and thought that it was somewhat stylistic. However, to keep consistent with pop-up layout, I kept the image front and center so that it greeted the reader, and then placed the body of the information below.

Animations

Several Animations used in the Ebook Enhancement

With each image, I imported them into photoshop and took out the areas of the image that I wanted to move and then saved them as a transparent PNG file separately from the base layer. I then inserted both parts into Adobe After Effects and animated the desired layers using various effects such as opacity, rotation, or scale. After exporting to an .MOV file from After Effects, I used Adobe Media Encoder to convert the .MOV into an MP4 (H.264) so that I could use it in ibooks.

Rank S Mission — Cover Art

Versions of Cover Art

With the first version (1), I made a decision using a few elements and went in without much of a plan. I had a basic concept for cover 1, but after creating all versions, I felt like this version had too much of a junior novel aesthetic to it and that it didn’t pay enough credit to the Naruto series. With versions 1–5, I re-created the iconic volume layout that is seen on the Naruto manga volumes and then changed out parts of the information. For example, instead of the volume number in the bottom right circle, I placed “N1” to stand for “novel 1”, I also added the co-author’s name and the title of the book. In terms of design, I decided that I wanted a cover that highlighted Kakashi, but had a nod to his history and ties, such as Naruto, and Kakashi’s mentor.

The image used in versions 2 and 3 is one showing a chain of teacher and student. I liked this image as it captured Kakashi in-between 2 of the most important people in his history. Naruto (his student) on his left and Minato, Naruto’s father (his mentor) on his right. I took this design and darkened the surrounding area to highlight Kakashi so that it gave a nod to the importance of him. The same goes for the variation with the Japanese on the cover. While I loved both of these variations, the focus still didn’t feel like it was on the main character of Kakashi. I encountered the same issue of focus on the 4th variation, as the members of Team 7 cluttered the image of Kakashi in the background which can be seen clearly in version 5. With version 6, I wanted to try a simple layout that had an original manga look with a black and white image. Although it looked simple, it still felt like Naruto was trying to take over the cover of a book that was about Kakashi.

Final Cover Art

The final decision came down to version 5 because it had Kakashi on his own, retained the classic Naruto volume layout, and had catching, bright, complimentary colors. Full disclosure, I originally didn’t want this cover as I thought that it was too open and not very interesting. The image is also a color version of the original book image, but overall I knew that it was the cover that focused on the main character of Kakashi and that it was most related to the story.

Overall it is ironic that cover art was such a main part of my book enhancement as the covers on ibooks are barely seen and the reader usually sees only a flicker of the cover as the book opens up in the app itself.

The Chunin Exams — Testing

Page Layout and Pop-ups

Screen Examples from Testing

The pop-ups acted as intended and retained the image alignment and text size when opened. From going through several of the pop-up icons, I didn’t find any unexpected looks or actions. A slight difference in design came about with device choice as the pop-up acts different on an iphone. On ipad, the pop-ups looks like I had designed it in the author, but when a pop-up is selected on iphone, the entire screen is filled with the pop-up. While this is not an error and the content was correct, I thought it was interesting that this happened in the iphone experience because as I used it, I felt like it took away from the purpose of my pop-up which was to provide a quick way for the reader to learn about a character. With the pop-up on iphone filling the screen, it defeated the quick learn concept that the pop-ups are meant for. Regardless of the iphone experience, the pop-ups worked great on both devices.

Glossary

Screen Examples from Testing

Hokage — Conclusion

The book enhancement turned out to work as I had planned and I was very happy with how it turned out and how it felt on the ipad when using it. When considering the cons of this project such as the responsive screen sizing and image alignment, I have to put the blame on ibook author and also the iphone device as they both affected the experience through the lack of ability to adapt.

Although the outcome was affected, it wasn’t to the point where it ruined the book enhancement, and although ibooks author has a long way to go, it has good features that help with taking simple material and adding more dimensions to it. Even pop-ups alone make the reading experience more exciting and immersive.

Disclaimer: copyrighted material is covered under fair use as documentation is for an educational project.

Josh Wilsher

Specializing in Graphic & UI/UX Design

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store