Naruto E-book Enhancement
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
As I used ibooks author for this process, I knew that I would be slightly limited in what experiences I could create and how elements would be displayed. Having used ibooks before, I knew that I wanted to include pop-ups and an extensive glossary of terms from the Naruto series. I knew these elements would be possible and would add a base layer that was exciting and interactive for the reader. Further on in planning, I decided I wanted to include images with motion to give a callback to the anime and the manga. After all, much of Naruto has been visual and the reason I chose to enhance this book is to make it more visual like all of the content that has come before it.
Pop-ups
At first, I wanted everything to be a pop-up so that the reader could learn as much about the Naruto universe as quick as possible. Upon further evaluation, I felt that it was unnecessary to include terms that were irrelevant to the story in pop-ups. For example, the reader didn’t need to know at the exact moment what the “Great Naruto Bridge” was. Instead I opted for a more character and action driven pop-up approach. I thought it most beneficial for the reader to know who the character was at that point in the story, and to also have a visual of the character. This can be seen in the left example below that highlights the character of Naruto.
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.
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.
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
As I mentioned previously, I wanted to make the glossary full of relevant and exciting information about the Naruto series. I included in-depth versions of the character bios that were seen in the pop-ups and also included a great deal of supplemental information that is mentioned during the book such as past events, locations and maps; information that isn’t necessarily important when reading on the page, but can satisfy the reader’s interest if they choose to go into further detail.
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
The final elements I included into the ebook were simple animations that I slotted in at important times in the story. I originally wanted to place the animations as chapter headings, but with the resources I had, I chose to include them into the story to add another layer of action to the story when it is being read. To create the animated images, I used panels from the original manga so that the animation style had an authentic look.
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
When I originally began designing cover art for this enhancement, I was unsure of how to give the cover justice and make it feel like a Naruto book. I created a few versions from my own designs, but then I looked to the original book cover and also took inspiration from the manga volumes. The manga volumes have a fairly solid and iconic layout, along with beautiful original art by the author and artist Masashi Kishimoto.
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.
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
When exporting the book, I tested on an iphone and an ipad so that the ibook was in a familiar environment and to also test the responsive design of the book when used on an small device and a fairly larger device. I decided not to test on android or a laptop device as the book is built specifically in an IOS program, therefore the book would not work as intended for use on an android device. With regards to the laptop, I did not conduct testing on one because ebooks aren’t commonly read on laptops and also due to possible bugs and responsive design with the ebook reader on laptop.
Page Layout and Pop-ups
In general, the page layout worked as intended and not many issues arose from testing on ipad and iphone. When it came to page display, the ipad showed the page perfectly and nothing had changed from the design in ibook author. The same couldn’t be said for the iphone as the header was hyphenated instead of responding to the device size. The error of title hyphenation can be corrected by making the text size smaller but is disappointing as the book should adapt to the screen size. When I went back into ibooks author and edited the text size and spacing, it fixed the iphone look but affected the metadata, so I decided to leave the chapter title text as is so that the metadata would be unaffected.
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
The glossary worked perfectly on ipad and displayed with all the elements in the correct place. The issue with the glossary came with testing the book on iphone. Again, I experienced the responsive issue that I had experienced with the chapter title, but this time with the images in the glossary. As I explained earlier on in this article, I decided to align the glossary image in the middle due to constraints from ibook author. With this change, I had hoped that the iphone would respond to the design and re-center the image but that was not the case. While the image appeared centered and correct on ipad, the image was cut off on iphone, while the text was responsive to the screen size. This issue resolved the same as the chapter title error in that I opted not to change the alignment to fit the iphone as it would overall affect the ipad look which is the intended look as the ipad will most likely be the most used.
Hokage — Conclusion
Creating this enhanced book also brought up a few reflections involving content. My first thought is that I felt as my chapters went on, it was difficult to include character pop-ups as many of the characters had already been introduced. However, at the same time the animations still remained relevant. The other thought I had was that due to the expansive glossary, and the legendary library of the Naruto series, it would work great in a format such as an enhanced ebook. It would be an amazing base to create an interactive glossary or encyclopedia of the Naruto series.
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.
