Mirror’s Edge: Leading with Colour

2189_mirror_s_edge_23BAM! Right hook! Right in the jaw!

Okay, so, aside from the awesome concept art, guess what we’re going to talk about today!

No, no, not Japan again, I promise!

SOUTH KOREAN MUSIC!

Just kidding, just kidding!!

Today, we’re back to talking about colour and more to the point; how a video game managed to base its entire concept around leading the player in a parkour environment with colour!!

Now, before we begin, I want you to do me a favour! See this image file right here? U+2193.svg

That’s right, right here —>Mirror__s_Edge_20_by_HDspring
I want you to click it! Go ahead, I’ll wait!

Now, once the image is loaded, just admire it! And we’re admiring, and we’re admiring… this, is Mirror’s Edge! Notice how for the most part, everything looks very white and very clean! Though, notice the coloured elements everywhere; that’s the contrast kicking in. I actually steers the eyes towards the colour because of the contrast to the white. Though, notice how the red is much ‘louder’ than the other colours… don’t worry, we’ll get to that. For now, some background info!

139521353517146mirrors-edge-art

Rats! The Fuzz!

Set in a dystopian totalitarian society, this game follows Faith (as pictured); a runner. A runner is someone who delivers sensitive information to those who need it (for use against the government), but without getting seen by the cameras and officers that lurk below. The solution? Go over their head, literally!

As previously stated, this game follows parkour elements to allow you to complete your goals and it actually uses colours to direct your eye on where to go!Subway-1-mirrors-edge-2064597-799-450 Red is the main colour used as it stands out the best, but other colours such as nice oranges, yellows, greens and blues are used to guide the character in the right direction! In sort, you always know where to go because the colours -show- you the way because your eyes are attracted to said colours! Isn’t that awesome!

Here, I got a video to illustrate my point! Please watch, if not for the visual representation, bur for the amazing music!

Thanks for watching!

– Stephen

Advertisements

It’s All in the Title!

Okay, so maybe not -all- of it is in the title, but the placing of one such thing and how it is stylized can be a major influence on the visual construction of an image.

If there is one thing I think I have learned from this degree as well as this class, it was that not only does a title matter… but it is also how you present it. Looking at things such as font, accents, and colour, the point of this entry is to show that with a little imagination you can shift focus, add dimension, and most of all… just make it look cool and awesome! For my examples, I will use some of my favourite album covers!

First up is, well… the artist is on there and that is enough! As you can Utada_mainsee, the colours are mostly dark with a golden tinge with horizontal lines spanning into the subjects face. However, the title is in a simple white front and lines have been inserted to accent the title of the album… interestingly enough, vertical lines against the horizontal lines. The position of the title is also significant as it was placed over the subject to better close in the image.

Next up, is something that follows on the dark tone but manages to bring in a bit more colour. Despite the blinding solar eclipse happening in the Namieuncontrolledbackground, this singer manages to shine through along with the title. Interestingly enough, the font and colour chosen seem to be trying to mimic her wind-blown hair. Stylized in a broken cursive font, the curves are further accentuated with the title been bent along the curve of the moon. The only issue with this cover however is that the title bends -too- well. The colour fits very nicely with the singer’s hair, which is a bit of a problem as it melts into the longer sections. I think if they had brought it down a bit, the effect could have been kept but wouldn’t blur into the hair but that is just me. Now, our next and final example is the perfect blend of colour and focus to end this post on!

UNLOCKED-RegularTaking a look at this cover, not only do the solids elements really bring out the subject of the photo, but the positioning of the text draws attention as well. The text frames the subject, which draws the eyes and the text itself is white to bounce the solid colours presented. The front is a rigid style with lines cutting through at parallel angles to break it up so the strong boldness doesn’t take over the image.

So, to conclude; titles matter! They accent photos, they frame photos and above all… they can often be what pulls the eye of a client or a passer-by. Never under estimated the power of a good, strong title presented in an even stronger, visual way. Remember, it’s all about getting noticed!

– Stephen Andrews

Semiotics & The Days Of the Week!

Today, you are in for a treat… WE’RE GOING TO LEARN THE DAYS OF THE WEEK IN JAPANESE! What?! THAT HAS ABSOLUTELY NOTHING TO DO WITH VISUAL DESIGN, YOU SAY?! On the contrary, it has everything to do with semiotics!

Alright, let’s start with a quick breakdown! In Japan, there are three writing systems:
1. Katakana – カタカナ(used in cases whre you are spelling words taken from English and spelling someone’s name for the most part)
(1.5 Romaji – This one doesn’t really count in my opinion, it is japanese words written with the latin script, so our alphabet)
2. Hiragana – ひらがな (The basic writing system that is primarily used)
3. Kanji – 日本 (Borrowed Chinese symbols used to differentiate Japanese homonyms in sentences)

Looks pretty cool, eh? Anyways, we’re going to focus on the kanji!

Now, as we learned from semiotics, you have the three categories: Iconic, indexical, and symbolic. Well, kanji is very much iconic because they are quite literally symbols that represent something, in some cases a direct representation of the object. Though, before I explain further, let’s look at them!
* 曜日 translates to ‘yobi’, which means ‘day of the week’

日曜日 (nichiyobi) – 日 – this is the kanji for Sunday, with the lone icon meaning ‘sun’, and while the sun is indeed not square, it is believed to come from a squared out circle.
月曜日 (getsuyobi) – 月 – Monday, and the lone icon means ‘moon’, nearly identical to the ‘sun’, but smaller and with extended roots to show what I believe to be it ‘rising’.
火曜日 (kayobi) – 火 – Tuesday, with the icon representing ‘fire’. This is a clearer kanji where you can see the origins with the shape of the flame and sparks flying out.
水曜日 (suiyobi)- 水 – Wednesday, or the day of the ‘water’. This kanji is said to represent a waterfall.
木曜日 (mokuyobi) – 木 – Thursday, ‘wood day’, with the kanji looking strikingly like a tree. In fact, putting three of those symbols together actually creates the kanji for forest.
金曜日 (kin’yobi) – 金 – Friday, ‘gold day’ and while I can’t readily remember the exact meaning behind the symbol, I always thought it looked like a home where one invests their wealth.
土曜日 (doyobi) – 土 – Satuday, ‘Earth day’, with the kanji showing a cross coming out of the ground, possibly a sprout.

As you can probably gather, they all derive from either elements or major parts of daily life! So, as you can see, these iconic symbols actually went so far from simple meanings to actually becoming part of day-to-day vocabulary.

So that is it for now! I hope you enjoyed the quick dive into Japanese as well as information as to how semiotics can actually be quite close to what they are meant to represent and how they can assimilate into major parts of vocabulary.

Sincerely,
Stephen Andrews

OH SNAP!

Alright, ladies and gentlemen!

So, no picture for this one, but I promise what I am about to share with you is worth more than a thousand words! Today, I am posting about the infamous ‘snap’ tool that can make carrying over images between Photoshop & InDesign a breeze!

So, lets say you have just finished editing an image for a client and you need to import it into InDesign to put it into a fabulous brochure you designed. You could save it as a file and then close Photoshop and wait for InDesign to open, or try using the bridging program for (wait for it…) more waiting!!

However, if you already have the two programs open, you can transfer it over as easy as a *snap* (okay, I’ll stop.)

Here is what you do; take one of the windows (Photoshop or InDesign) and shrink it by hovering your mouse around the edges of it. Now, once it is at a size you can easily move around, grab it and drag it across your desktop and further, so far you can’t even see it on your computer monitor. What is going to happen is that an outline is going to appear that spaces off half of your screen and simply let go of the window you are holding and it will ‘snap’ into place.

Do this again with your other window so that they are now side by side! Now, grab the image you have in Photoshop and just drag it over into the InDesign window and the image should carry over! No need to copy and paste, only dragging!

Well, that is it for me! If my instructions were not good enough, just find me in class and I shall gladly give you a tutorial!

Stay awesome fellow bloggers,

Stephen Andrews

A Lack of Colour

For this blog entry, I thought I’d talk a bit more about colours, especially about bringing colours and titles to the ‘front’ of the picture.

Now, we have heard of how hot colours and cool colours react differently when used correctly for visual design purposes but what I would like to show you today is how the LACK of colour can work in your benefit. To help me illustrate this point, I have brought an image of Ms. Lara Croft shipwrecked for the cover of the new Tomb Raider game (yes, we’re going into a nerdy zone).

As you can see, the main body of the target as well as the background has in some sense been sucked of the majority of its colour while keeping more of the prominent tones intact (i.e. the blood and pieces of her attire). Strategically, the two colours for the title (white and red) are matched over her, but the white is very bright and red has a cooler quality than normal.

 

Now, I know what you’re thinking; ‘Stephen… the colours are sticking out because they are the only defined colour in the picture, stop your rambling!’ A valid point! Though what my aim to point out is that the entire background is not black and white, and that essentially the broadness of the title and the colours are actually helping to hold the prominence of the other colours back.

This, effectively, causes a shift allowing the title to be at the ‘front’ and the image to be at the ‘back’. It also catches the eyes rather quickly as you might guess, as the lack of colour in an environment where colour is profuse (such as a gaming store) allows it to stand out.

So, summary check!

1. Taking away colour from an image and matching a title over it with a broad contrast can help to ‘suck’ the remaining colour way and draw the eye.

2. Sometimes, it is the lack of colour that can make a product or poster stand out.

Thank you for reading!

Talking RGB & YMCK Like It’s NBD

For this entry, I thought I would talk about a recent conversation I had with a friend of mine who went to school for graphic design! We were going for a drive when I brought up the fact that we had started using Photoshop in this course (though in my case ‘using’ is a far leap from ‘hoping this click makes everything right’.)

As much we have dealt with RGB & CMYK in this course and while we did indeed discuss it in class, I still had a few questions about the main difference. Asking for an answer that was as simply as possible despite the complexity of the difference, he simply said that RGB takes up less data, follows a colour system that works with a lot of electronics and was often a go-to. CMYK on the other hand, offers images a look that is a bit more realistic, a bit more vivid but at the use of a lot of data which as both Williams and my friend pointed out, is why it is mostly used for print. The picture posted helps to represent this.

rgb-and-cmykIn my naivety, before I had learned the data value difference, I asked why web sites and electronic screens did not use CYMK due to its visual superiority to which the reply was “you could, but it would take –a lot- of data to get the image where it was and the change isn’t worth the processing power”.

Though, as my friend pointed out, there was the addition of yellow to the RGB colour system in a new television thanks to SHARP with their AQUOS television and ‘Quattron’ technology (George Takei commercial included). This is something of a jump ahead as far as colour is concerned, though not much has been told of its other applications and there are those who say the difference is rather minimal as most channels use RGB and the colour is only added through video processing.

In the end, the Williams did a good job summarizing the systems with the following:
‘Use CYMK for projects that are to be printed.
Use RGB for anything that will be viewed on a screen.’

Technology is still advancing rather rapidly forward however, so it is anyone’s guess as to how long we will keep the RGB system as processing power increases and the issue of screen colour diminishes. Who knows? It will be interesting to see how this all goes as we advance away from flat-screen viewing and start to go into holographics.

– Stephen A

Photoshop Cowboy: The Magnetic Lasso

During our recent ad recreation project I managed to get some practice with the magnetic lasso, with the majority of this ‘practice’ ending with frustration and lots of unwanted points. Yes, the magnetic lasso can be a relentless pain when in the early stages of use but after further research into why it was so hard to use, I managed to compile a small list to make the experience more pleasant.rbps-040

After reviewing a quick tutorial on Youtube about it, I found my first mistake; impatience. If you want to use this tool, you are going to need a lot of patience. Yes, it is tedious, but better to go at a snail’s pace and get success rather than a painful defeat.

The second item is shadows; keep in mind where the lighting is coming from in your picture. If the photo you are cutting an image from has a similar lighting situation, the shadow can be taken with it as well. If this is not the case, the shadow will ultimately be your call but can add a nice effect.

The third item is that you need to be careful of what I’m going to call ‘mini-edges’. These are sections of the photo that have very small edges and can lead to the photo looking choppy once it is cut. Ultimately, these both can and cannot be avoided; to deal best with them, try to zoom in closely and work around the tricky areas. It takes time and precision but will offer a better over all look. If time is not on your side however, try to get as closely as possible.

The fourth and final item is; the eraser tool! I was lucky enough to have Sarah point this out to me so snaps for Sarah! When you are finished and the image looks a little jagged, just take the eraser tool with a small and soft point and run it around the outline slowly and it will help to give a polished look.

That is it on the subject for now, but if I manage to find more tips or discover better ways to help give a more professional look I will add them in a new entry. If anyone else has tips of their own by all means post it in a comment! Save an image; post a comment.

– Stephen A.