What you’ve all been waiting for:
epaperflip on Publishing Software
What you’ve all been waiting for:
As a relatively young medium, digital magazines have yet to replace the popularity of its printed counterparts. But that doesn’t mean there are no stand-out digimags to take inspiration from today hence why this blog post exists.
Atomix (issue 10):
Atomix always opens up with a breathtaking (and somewhat psychedelic) video to introduce its cover. The abstract opening is a fitting way to introduce the cover. This issue in particular makes good use of contrasting colour in order to distinguish the text from the background.
Inside there are even more spectacular designs to marvel at. Article titles are designed to fit with the style of content covered (in this case games mostly). This is a digital product so it comes as a no surprise that the title are not content with being static: text animations, accompanying musics, tap here prompts are all present. Buttons are designed to fit the theme of the content as well as serve as a remote for accessing content.
What I adore the most is how the designers implemented interactivity without sacrificing looks. The scrollable backgrounds help adds surprises but what stood out the most for me was how animation was added to official artwork (i.e. the subtle flashing on a sword that reveals text upon tapping it). Not only does it draw viewers in, it also provides a hint to what’s intractable (i.e. tapping the sword revealed the text, which prompted an excited squeal from me).
One instance had the viewer engage in a ‘find the key’ game. Naturally this would cause people to instinctively touch the key in sight which will (you guessed it) reveal the article. These little touches of interactivity encourages the curious explorer gene in us all. Wanting to prod around in order to fulfil our sense of discovery and wonder is what makes a digital magazine stand out.
To top it all of the magazine probably uses the most creative ways to implement the scrollable content feature. Slide to read more icons are common place but it’s the way that scrollable content is designed that really amazes from fullscreen slideshows to scrollable speech bubbles.
Mixing the strength of different mediums to make a satisfying media smoothie is something that a lot of games get right. Atomix also gets it right: by combining interactivity (touch a symbol), sound (music starts playing in the background) and visuals (image of a character pops up) in interesting ways.
None of these would matter if the design obscured the text and Atomix deals with this layout issue in a variety of ways. Placing the text in the least crowded spot on a background image; giving text a translucent background for better eligibility; using sans-serifs and making sure the paragraphs balance out the images.
Each page is a new adventure, a new toy to play with, a new experience. That just about sums up this magazine for me. Now if only I can learn from them and then work for them…
Wired (sample edition, because I’m cheap like that):
The cover is often the most extravagant part of a digital magazine and Wired isn’t afraid to abide by that trend. Lights flash and we see a man’s face gradually revealed much like something out of a classic sci-fi movie. Video effects are fully exploited here.
In the opening page viewers are presented with the instructions needed to navigate and use the magazine (yes unbelievable as it is we now need a tutorial in order to best enjoy a magazine) and minimalistic icons’ meanings are explained.
Image sequences are used to convey simple yet effective motions (unveiling the insides of a microdrive has never been more epic) to help engage audience’s interests as well as add some personality to the photographs. Page intros are especially unique in the way that they utilise image sequences: making enticing products glow, animate flying objects, mini-movies and the occasional ‘woah where did that [insert object here] come from’. These help make the magazine more dynamic and visually interesting. That’s what motion graphics are for after all.
On the interactive side of the story…
There’s a tappable image on every page and each of them transitions to the next image seamlessly to the point that you’d think they were morphing not changing. In other tappy news, captions are interactive in Wired, you tap little circles for them to appear, a simple but effective way of involving the viewer.
Layout is probably more of a standout for wired than the interactivity though. Photography and typography marries well in many of Wired’s article designs. Again this is either done by laying the text in a plain part of a photography; having the text follow the same path as an object in the scene or by sticking it on the very focus point of the picture:
Everything is clean, the letters contrasts with the background and there’s a lot of empty space to let readers breath. Simple, uncluttered and effective design.
The sole reason why Wired’s interactive elements is sparse compared to something like Atomix (and the reason why it realises so much on motion graphics/image sequences) is because it’s designed mainly for print. Wired is not a digital only magazine and there will be elements that won’t make sense in print or vice versa. So the designers had to think of a way to create a media rich interactive magazine whilst trying to not sacrifice the look and feel of the printed version.
The cover art was created in illustrator using a variety of tools mostly involving the knife tool (which is brilliant for hair I must say). There was a lot of merging shapes, trimming (always keep your ‘Pathfinder’, located in ‘Window’ by your side when creating shapes) and looking at reference images (got to get the character details right or else fans will devour me).
Article 1: Wii need U
Graphics were once again created in illustrator. What’s new about this article is the scrollable frame. Created by pasting a frame of text into another frame (make sure you ‘Paste Into’ rather than normal pasting). Select the outer frame and open the overlay creator (windows>extensions>overlay creator), then choose your desired scroll. This is beginning to sound like a tutorial.
Article 2: Pit’s Rising
The huge drawing of Pit was originally a sketch which I scanned and trace in illustrator with the infamous pen tool (yes that one, you can learn it here, it’s really not that bad). The background was also made in illustrator with patterns and gradients (adjust the fill in Window> Appearance). For the magazine it self I added a music file (along with it’s controller files) and another scrollable frame for the slide (just make sure you group the images before hand before pasting it in the frame).
Article 3: Getting over genre-phobia
Featured on this page is yet another set of hand-drawn-scan-pen-tooled graphics, only this time I applied text wrap to them. At the corner I put a slideshow of screenshots because plain images are too mainstream.
Article 4: Rhythm Heaven
On this page there’s a huge video (I’m sorry for stating the obvious but it’s required as a part of the syllabus). The play button doesn’t come with the video feature in Indesign so that had to be made in Illustrator (transparent circle, 60 degrees polygon- aka triangle). The transparent background is made entirely made in Illustrator (no sketches, just some shapes, the pathfinder panel and the trusty knife tool).
Advert: Fire Emblem Awakening
Described as incredibly creepy by my peer, this auto playing image sequence was created in after effects using the puppet tool and exported as an image sequence (I know someone will ask how to do this so here the tutorial).
I put a lot of love and care into the pixel art page furniture on each page (a little attention to detail never hurts right?) and I can officially confirm that they were all done in Photoshop. Just to end the post with some helpful links here’s the tutorial for pixel art and overlay creator.
If my magazine (fanzine) was to be published and distributed for commercial purposes I would have to consider many legal and ethical issues that comes with it (because there’s always obstacles/legal landmines in life that you have to overcome). The below list are some of the considerations albeit not exhaustive:
Time to play around with colour scheme. I’m planning to change the colour scheme of said shapes depending on the content. Though the overall art-style will be a combination of vector art, illustrations and pixel art all produced in illustrator (though I’ll be using other applications such as photoshop to edit some objects etc). Overall I’ll be using pastel ans soft colours to provide an inviting atmosphere for the magazine.
Without further ado let’s get designing the page furniture:
The great adventure of designing a great logo for the magazine
Finding a decent font:
Applying a cell-shading (because it’s my favourite graphic style, it’s commonly used in video games, plus its original and easy to change the colour scheme of) effect to the chosen fonts:
Update: So it turns out the microsoft logo uses an identical font (yep), it makes it worse that Misc contained similar lettering with Microsoft.
If I wanted to give a message of being unique then this’ll never pass. Without futher ado I made another sans-serif logo (it’s the trusty verdana which I planned to use for the body text of the magazine as sans serifs are best for pixel-based digital screens).
What better way to test this then by placing the fonts on my mock-up magazine’s cover!
Verdana may have lost out on the logo test but it still makes for a readable font. After some research I’ve discovered that sans serifs were better for digital publications due to their simple, recognisable outline and the fact that it’s just more eligible on pixel display. Plus the traditional and classy looking serif isn’t really suited for a games magazine that incorporates interactive elements (digital magazines are quite young still).