Term One Project

“Hansel and Gretel” Interactive E-Book

After creating an interactive E-Book, I was able to show a range of techniques using, multiple pieces of software, that I have learnt over the process of this term and after applying them to my work, they have shown to be effective.

  • Adobe Illustrator

I used Adobe Illustrator to create character models to add into the images for the imagery of the E-Book.
hansel-screengrab
I started with the model of Hansel using different layers assigned to different areas of the body to allow moving the body parts dependent on the scene. After placing the shapes of the different parts, I used the Point Selection tool to manipulate the points of these shapes, allowing me to create unique shapes for the hair, hands, pocket and feet. I also grouped some parts of the torso (and lines used for the dirt patches) to allow me to keep them consistent and lined up.  I was also sure to delete the ends of some of the shapes in order to show the attachment of the body parts but without using shape builder as to keep functioning pivot-able body parts. I made mostly Hansel blue to as it could imply sadness, making the viewer feel sorry for him.
gretel-screengrab
Copying over the model from Hansel (to make sure they were sized similarly and saving time).  I used the Point Selection tool in similar places to keep some shape from Hansel but adjusting the hair using this tool on an ellipse and shaping it into her hair. I created a rectangle around the waist with three more ellipse varying along and using the Shape builder tool (and selecting them) I joined them to look like an apron.
father-screengrab
As a less important character in the story, the father of Hansel and Gretel hasn’t got as much detail, comprising of mostly of rounded rectangles, using the Add Anchor Point Tool (under the Pen Tool) I added points to the shapes of which I could manipulate using Point Select Tool which can be seen in the middle of the chin and shoes.
witch-screengrab
For the head of the witch, I used the Point Select tool on two rectangles allowing me to make trapezium shapes out of them but moving the points of the corners. I then selected the shapes and used the shape builder to attach them. I then placed an ellipse behind and one in front for the cheeks and used another rectangle for the nose, making her face a strange shape to make the viewer feel uneasy about her not looking normal human shaped. using the same process as the head I created the hat and grouped it so it could be moved on and off her head at will. The body was created using the Rounded Rectangle Tool and Point Select tools as to give the character a rounded figure. I also adjusted the stroke’s size when creating the shapes to give a form of scale and difference to the different body parts.

Adobe Photoshop

Buttons

I used Adobe Photoshop to create the designs for the buttons I used in my E-Book as it allows the use of “Blending Options” which give the shapes that are produced in their options to be altered to make them look certain ways.

button
To create a this button I used the Gradient Tool after creating a rectangle I added Noise to the shape then Blur through the Filter tab to give the button a metallic look. I then created a rounded rectangle (holding Shift and dragging to make it square) then added an outer bevel to it as well as an outer glow and drop shadow to make it stand out from the page which I also aimed for with the colour scheme as yellow contrasts the blue sky which is where I chose to position most of the buttons. Doing this on two separate layers allowed me to create a clipping mask on the first rectangle making the button have the metallic effect.
home-screengrabcontents-screen-grabshop-screengrabsettings-screengrabprev-screengrabnext-screengrab
I added relevant icons to the buttons to imply what the buttons do by creating shapes and manipulating them in various ways and giving them an inner bevel to make it look as though they are ingrained into the buttons. I gave the Previous and Next buttons a red and green coloured gradient overlay so half the button blends into the bottom of the screen while the other half keeps the button visible.

Backgrounds

For the backgrounds I used a graphics tablet to create the scenes for the 2D Characters to be placed into. Using the Paint Brush Tool and creating new layers (as well as adjusting the opacity) I created rough pictures to ensure not to spend to much time on them to stay efficient while still using the paint tool and graphics tablet to familiarise myself with this process.

I used Guides from in the View tab to divide up the page to allow for text when they were placed into InDesign. I was also sure to group the layers if there was more than one background on the page to make sure I didn’t effect areas that were complete.With both Photoshop and Illustrator open next each other, I selected all the vector shapes from Illustrator and dragged them over to Photoshop, which converted them into vector smart objects allowing me to resize and position them into the scenes giving them a distinct look from the background.

3DS Max

I used 3DS Max to create a candy cane and gingerbread man to include as interactive elements for the E-Book.

The candy cane was created from a capsule with a bend modification which I adjusted to get the bend in the candy cane. I then created a UV template and used it to created a texture in Photoshop using red and light grey rectangles to align with the template. I then modified by twisting the model in order to get the spiralling effect that candy canes have.
I created a gingerbread man using a reference of the outline of a gingerbread man that I found on Google images (found here). I created a cylinder for the head and moved the vertex of the shape to the outline of the head and bevelled the plane at the bottom of the cylinder multiple times to create the body.

InDesign

Using Adobe InDesign, I created a prototype for the E-Book to show the navigation and interactive content in action.

After setting up the document to the requirements I specified in the Design Document, I placed rectangle frame in the places I had planned in the wire frames but also accounting for the fact I had put some backgrounds together as one file. After doing this I added masters to the pages in order to have the buttons on each page by inserting the rectangle frames and inserting the button graphics I had created, also using multiple masters as the layout out of the buttons varied depending on the page. The images were added using Ctrl + D  which allows importing multiple images into the wire-frames.
To add the buttons, I selected the relevant frame and image, being sure I’d selected Digital Publishing, then clicking the “Buttons and Forms” tab. This allowed me to give a function to the buttons such as telling it which page to turn to.
I added a “multi-state object” by importing three images, placing them on over the other and clicking “Object States” after selecting them which gives makes them all one object that, with a button set to “Next State” as it’s function, allows the viewer to cycle through the images in the states.
To include 3D work into the E-Book , I created 60 frames of my two models pivoting and inserted them into a rectangle frame using the Overlays tab which allows files to be placed to create a type of interactive animation which allows the audience to interact with the content, in this case making the models spin.

The skills I have developed are useful to industries of digital media because it helps them plan, experiment with and create content.
For example creators of animations may find Illustrators useful for creating 2D character models and then taking them into Photoshop and placing them into a scene to get the shots for the frames. Web and App designers can use InDesign to easily plan the navigation for their products, allowing them to see how content will be laid out or what each button does so that they can test out the UI and UX. They can also use Photoshop to design the graphics or the visual elements for buttons allowing them to have a more unique feel in their work as well as. They, along with game developers, use information architecture to plan their work to decide the best ways that their audiences navigate the produce to insure that it is highly user friendly.

These skills would support a career in app designing most efficiently as they require the most elements I have covered in my work, in theirs. They require a lot of interactive elements as well as choosing styles, having a design process and requiring research into their products to expand ideas.

To ensure I met the deadline of my work I did my best to ensure that I prioritise my work, focusing more on which assets were required in the brief more than anything additional that I wished to include in my work. This also meant using efficient planning measures and setting myself targets to achieve by a certain time so that I didn’t spent to long on them such as the multiple different assets that were drawn but could be improved had I spent more time on them. I was also able to complete research efficiently by using secondary research sources so to make as any primary research may have been rushed and not as relevant.

As I require completing the work in continuous sessions, I had be sure to be sure to do the tasks with breaks to prevent a loss of work flow and repetitive strain of my body parts. I also sure to keep a straight posture and sit parallel to the computer screen so I could focus effectively and not strain my torso or eyes. I maintained a clear working space so that the mouse and keyboard were easily accessible. This helped me as it meant that my body could be prepared to spend prolonged amounts of time doing tasks required of me.

Using media to convey a meaning complements work as it it indicates to the audience how they should feel about the different aspects of the product. I used the vector character models to bring the characters out from the painted backgrounds by giving them colours that differed from the ones in the background images (except the father who is a minor character and the step mother who was painted using a red palette to indicate her rage). I also used lighter greens at the beginning of the story to give a neutral feeling to these pages, changing to a darker green as they get lost (using grass brushes to build on this) but upon stumbling upon the gingerbread house, I felt that the imagry should have more of an artificial appear considering that real gingerbread houses are man made as well as attempting to give off a “too good to be real” feel. The scenes in the gingerbread house are brown without much detail to make the rooms feel smaller to make it seem as though the characters are trapped. To make the picture easy to navigate visually, I made sure the points of interest were more detailed and other parts were more blurry to give a sense of composition to the images.
The font for the text on the pages was “Bookman Old Style” and I used it as it is a clear font to read, the letters are spaced well and I feel that the target audience I chose (older children and young teens) would be able to read it with ease. I also made it so that the text was black on white as to make it look visually like the pages of a book (except the “lost in the woods” page as it has a dark image so I made the text white so it is visible on the dark background).
The buttons have colour to them as I was aware of them being used mostly at the top of the screen with the sky which is blue, so I used yellow as it is the complementary colour of blue, making them stand out (along with the dropped shadow). I used the same button with a low opacity gradient for the next page buttons as yellow blended into the green and brown from he images so that in the scenes, half of the button blends while the other is more visible as to not ruin the illusion the story is trying to create.
I decided that some of the extra buttons with text on them should stand out from the text on the pages but  they should be fairly basic (and have the same font) to not draw too much attention from the story being told as flashy colours may be quite distracting and portray complement the button more than it’s function.

On observing my final product, it appears that I have taken a comical, cartoon-like style in my work as to account for my audience. In order to improve on this, I could have researched what comedy and cartoons people around that age are into and used styles similar to that to plan for my characters, scenes and text content. I could have also familiarised myself with the objects that I placed in scenes such as the cottage and ovens to make them more evident as to what they are along with creating them with a comical and/or cartoon-like style.

To plan I created a design document and style guide to refer back to guide my work and give me limits such as not exceeding the size of the page with content. I using information architecture created two task flows and two wire-frames of my work in order to plan the navigation and the placement of content that my product could have. I completed research on E-books and the story of Hansel and Gretel using the internet to familiarise myself with layouts that look pleasant (and don’t) as well as with multiple versions of the story itself to help build my work.

After this process I used my mood-board as a guide to which colours to use and how to design certain assets as it allowed me to see which colours go well as well as how the different shades of colour can convey the moods of different pages. I used the wire-frame as to know where the content on the pages should go, applying this not only in InDesign but in Photoshop to split one document up in order to be effective by having two images in one by using guides to divide the page in Photoshop. The task flows I created helped me know which pages should navigate to one and other when adding the buttons and being sure that it takes no more than 3 clicks in order to get to a specific page.

Ultimately, I could have spent more time on research at the same time as working on my assets as I should use more reference images in order to design the graphics to help the audience relate the content more with real life equivalents. I should have also used multiple sources for my research as it would prove to make my combined knowledge much more reliable so I need not reference back on things as frequently.
I should also have more of a plan of how much time to spent on content as to not end up rushing the last pieces content (like my homepage, contents page, settings page and last page of the story) to show that I am capable of distributing my time more efficiently.

 

 

Advertisements