Magazine Commentary

What you’ve all been waiting for:

Advertisements
Posted in Uncategorized | Leave a comment

Final Magazine

misc cover_vmisc vertical2 misc vertical3 misc vertical4 misc vertical5 misc vertical6

Posted in Uncategorized | Leave a comment

Analysing digital magazines

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.

 

Posted in Uncategorized | Leave a comment

Making of: Misc. magazine

Cover
heThe 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

scrollable frame

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 

pit sketch

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).

Screen Shot 2013-05-15 at 15.08.51

Article 3: Getting over genre-phobia

pen tooling

Screen Shot 2013-05-15 at 15.11.13

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 

Screen Shot 2013-05-15 at 15.25.51

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

Screen Shot 2013-05-15 at 15.49.24

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).

Extra stuff:

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.

pixel art creation

Posted in Uncategorized | Leave a comment

Legal and Ethical considerations

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:

  •    Make sure you get permission to use images that’s not original (i.e. logo, screenshots, concept artwork). I’m sure they’ll appreciate you promoting them with their artwork but it’s still safest to ask first.
  • The same rule applies to music, videos and other copyrighted content.
  • Even adaptations (a la fanart) are bound by the claws restrictions of copyright law. So essentially companies can sue you for selling fanart. Yes I know, it’s barmy. Though I think it is important to know that no creator likes to sue their fans as that would be asking for a stab in the foot (after all it’s fans that help drives sells). Nonetheless it doesn’t mean you can mass produce and sell fan works without permission either.
  • Strangely enough if said adaptation or deviation was a clear parody then that is fine. Hence why court cases drag on , seeing as how it’s quite complex to argue what is a parody and what isn’t.
  • On both the ethical and legal front you have to aware of producing inaccurate content or biased material. This is the biggest editorial boo-boo you can commit and poorly researched content can get you in an legal pickle. Sure it may attract more attention to produce something controversial but if false accusations creep into your content, prepare to be bombarded with lawsuits.
  •   Altering images can also be a huge ethical issue, as it once again upsets people (What else did you expect from a lie?). The fact that a lot of magazines do this to make up fake gossip shows you just how valued this ethical consideration is in industry.
  • Privacy matters are just as important. Don’t go sticking people’s names and pictures without their permission. Most certainly don’t go into their private life without their permission either. Personally privacy is a big deal in the UK (unless you’re celebrity) and a classic example of ethical conundrums.
Posted in Uncategorized | Leave a comment

Page Furniture, Colour Scheme and Wireframes

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:

Screen Shot 2013-03-20 at 15.38.37

Page furniture with background.

Screen Shot 2013-03-20 at 15.58.15

Page furniture without background. semi-circle, font of title and the arrows at the corners will be a consistent theme throughout the magazine.

Wireframes

MiscV MiscV2 MiscV3

Posted in Uncategorized | Leave a comment

Masthead/Logo (+ font)

The great adventure of designing a great logo for the magazine

Finding a decent font:

Browsing for fonts. So many to consider.

Browsing for fonts. So many to consider.

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:

They all look nice in their own ways. Hmm decisions, decisions. Personally the first one is seemly the most appealing to me (maybe its the minimalist inside me and my love for sans-serif or because I've been staring at it the longest).

They all look spectacular in their own ways. Hmm decisions, decisions. Personally the first one is the most appealing to me (maybe its the minimalist inside me and my love for sans-serif s or because I’ve been staring at it the longest).

Update: So it turns out the microsoft logo uses an identical font (yep), it makes it worse that Misc contained similar lettering with Microsoft.

Microsoft logo

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).

Verdana's always reliable for a clean look. Now I just have to make a final choice between this and the square font (bottom left, in the fonts list above)

Verdana’s always reliable for a clean look. Now I just have to make a final choice between this and the square font (bottom left, in the fonts list above).

What better way to test this then by placing the fonts on my mock-up magazine’s cover!

MiscMast2

I’ll go for this font due to the blocky nature (fits right in the world of games where pixel and blocky art-styles are common) and it being an orignal font I downloaded rather then a classic font (this reflects the miscellaneous and original theme embodied in the magazine).

Screen Shot 2013-03-20 at 15.03.46

Main  Font:

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).

Posted in Uncategorized | Leave a comment