Also, I’m giving away THREE full license codes for ShoutDesigner, courtesy of the good people at ShoutSoftware, part of ShoutInternet.

Installation

To my surprise, ShoutDesigner is built on Adobe Air. Which, mind you, felt quite promising not only because that meant that the developer coded the app once and then exported to all supported platforms, which in the case of Air means Windows and Mac (sadly, Linux is not supported in the latest installments of the runtime) but also because that meant that as a [not for long] Windows user there was no chance that I’d, once again, find myself in the position of using an app that was originally designed for OSX, then ported on Windows as a dodgy, half-assed piece of spaghetti-coded error-bonanza.

Pardon the rant, I guess not writing for a long time had me brew up some frustration on certain issues.

Installation went by at lightning speeds, which was to be expected, but nevertheless still felt like a +1 for ShoutDesigner.

First run

Having been auto-launched by Air, thank you very much Adobe, ShoutDesigner’s interface and I met for the first time. And, lo and behold, what do we have? An out-of-the-box Mac interface. I’m on a Windows machine. This felt strange, to say the least. Even my iPhone twitched a bit. True story.

Still, the interface is clear, simple and rather self explanatory, as it should be, though I think users could live well enough without having a moderately sized Shoutsoftware logo shoved in their faces at all times. That’s what the About section is for.

Registration

The developers at Shoutsoftware were kind enough to provide me with a registration code, which I was quick to use. It was a bit disappointing, though, that I had to enter the registration code in series of 4 characters at a time, but, hey, I can’t complain too much. Oh, wait, I actually can and am doing just that.

Using the app

Let’s get down to the actual usage of this app. First thing I noticed was that the default button, which I initally thought to be just a link to the developer’s website where you can buy the app, is actually a designable button! The fact that, post registration, the label “Download Free Trial” didn’t change didn’t help, either, as I, for a few seconds, thought I’d done something wrong in the registration bit.

After this initial confusion, though, I was [very] pleasently surprised to see that one need not go through the top side steps incrementally, but rather on an “as-needed” basis. Whoop-de-doo to that, I say.

The first step in designing your next mind-altering button is to choose a style. Now, let’s get one thing clear: this is a tool meant for designers. And when you mention the word “style” to a designer, you’re going to get a lot of definitions; from Photoshop’s idea of style to CSS to fashion style, we as designers deal with that particular word on a daily basis. Perhaps this wasn’t the best choice of words here, to call it “Style” and it maybe wouldn’t be that bad if, oh, only the bottom right bit of the app would show us some description of what “Choosing the button style” entails. As it stands, we are left to our own devices, wit and click-happy hand-sausages.

So, you’ve scrolled through the countless “Style” options and found something you like. Excellent. Next, you, naturally, click “Next” but, wait, what’s this? It’s the same initial style again! You go back, thinking “what did I just do wrong?” and then you realize that you should be clicking on the button itself in order to lock in your selection. No, there is no hint towards that particular workflow. Can you say “cursor: pointer“?

In step 2 you’re faced with choosing a size. Now, admittedly the following isn’t a bug or a nuisance, but rather the hopeful wish of a web designer: why can we only choose pixel sizes?! Oh, how I long for percentages or even no implicit width at all! Moving on.

As in the first step, after making my size selection I clicked the button. Guess what happened? Nada, zilch, zip. Apparently, this time one needs to click the “Next”  button in order to continue to step 3. Talk about consistent UI controls, eh? The “Next” button becomes the main workflow funnel gate in all subsequent steps. In step 3 you choose the base color and background color for said selected style. One upside of this is that you can enter a HEX value directly, which is a big bonus. Moving on further.

Step 4, setting the text and text style, is quite interesting as it also comes with label presets. Sure, they’re not essential but I guess if you’re having a hard time choose a proper call to action on your button, they might come in handy. One downside is that when setting custom text, the label doesn’t update immediately. Rather you have to either change focus on another window altogether or try and find a non-active spot in the UI itself (somewhere under the Exit link). Furthermore, once you’ve set your custom label text, the custom input becomes empty, so any changes you may want to make to your text require that you input the whole thing all over again. “A bit annoying is it“, Yoda would say. A big upside is Google Fonts integration as well as separating web safe (called “Common“) fonts from those installed on the user’s machine. But there is one downside with this section. A big one. The size of the actual button changes with each typeface. That’s right. So the pixel dimensions set earlier really aren’t reliable as a larger font size will increase the button’s height and width considerably. That is a potentially huge problem. Let’s move on, though.

In step 5 you can set an icon for the button, which is a very nice and welcomed addition, but what makes this step very cool is the fact that you have ample control over the icon. Position, size, spacing from the label text and even inverting the color to fit in with the button style are more than enough to integrate a cool looking little icon in your button. Kudos!

Step 6 sets “Effects“. And by Effects they mean setting a hover style and what I presume to be CSS box-shadow and text-shadow. There are no hover options, position controls or even transparency control for the shadows, which is a bit of a let down but, overall, I say it’s nice that they were able to include these features in what is the very first version of this app. As this is the last step in the app’s main workflow, you’re presented with two buttons in lieu of the old “Next” : View CSS and Export. Export gives you a few image saving options and an output size which helps to trim down your jpegs, via a Quality slider control.

I’m sure I’m not the only one who was eagerly awaiting the bit where CSS came in. So, here’s what happens when you click View CSS:

Not entire something you’d expect from a button that says “View CSS“, right? Oh, well, let’s get through these steps and see what happens.

In this first step towards our CSS button, you can set the image path of your domain, which leads me to believe that the app will not output CSS gradients (say it isn’t so, say it isn’t so) as well as a very helpful “Target URL” for the button.

Next step takes us to an HTML section which presents a bit of code that you’re supposed to put in your project. Fair enough, and, in all honesty the code isn’t bloated as much as it could’ve been, though I have to call shenanigans on the fact that they used <div class="btn"> instead of a much more semantic <button class="btn">

And we’ve come to the critical moment of this review: the actual CSS. And boy, did they do a real job here. No, I don’t mean that in a good way. I’ve pasted the actual code that ShoutDesigner has given me. This is exactly as it was spewed at me, sans some spacing, of which WordPress is anal-retentive about. You’ll get the picture, anyway.

<link href='http://fonts.googleapis.com/css?family=Paytone One' rel='stylesheet' type='text/css'/>
<style type="text/css">
.btn { float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0px 0px 0px 146px;
margin: 5px 0px;
height: 93px;}
.btn:hover { float: left;
opacity:0.8;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0px 0px 0px 146px;
margin: 5px 0px;
height: 93px;}
.btn a{ float: left;
height: 93px;
background: url(images/btn_stretch.png) no-repeat left top;
background-size: 100% 100%;
line-height: 93px;
padding: 0px 0px;
color: #FFFFFF;
font-family: Paytone One;
font-size: 20px;
font-style: null;
font-weight: bold;
text-shadow: #EDEBE1 0px 0px 13px;
text-align: right;
text-decoration: none;}
.btn span { background: url(images/btn_right.png) no-repeat;
float: left;
padding: 0px 0px 0px 183px;
height: 93px;}
</style>


Need I really point out the faults here? Alright, I will:

• the mere suggestion of including the button’s CSS in a style tag in your page’s head section instead of including it in the project’s stylesheet is offensive to all that our community has struggled to work for for the past 10 years
• defaulting to float: left is a presumption based on fairy dust most likely; this decision should be left to the designer
• using the very old and inflexible method of making buttons [left fixed part] – [horizontally flexible part] – [right fixed part]
• using images for rounded corners instead of border-radius
• using the verbose version of font declarations, instead of the much nicer and cleaner abbreviated property of “font: “
• not using a font stack, but rather relying solely on one option

Verdict

Most likely, my review seems quite negative and vitriolic at time, but that’s just my own style of approaching software and technology. I mean, have you EVER met a designer who doesn’t complain about every little, insignificant thing? No, that’s because we’re all about attention to detail. This is exactly the case with ShoutDesigner. It’s a good app, there’s no doubt about that, but it too has it’s faults, and in the journalistic interest of a information transparency, I made sure I pointed them all out above.

So what’s my final word on this app? Should you buy it, can you use it? Yes and yes. As long as you’re aware of its current issues and work around them ShoutDesigner can be a very helpful and time saving tool. Certainly, future releases will more than likely solve most of the issues pointed above and improve in existing positives. Until then, for its $27 price tag, ShoutDesigner delivers far more value than it costs.

The giveaway

Right, I did mention a giveaway. The nice people at ShoutSoftware were kind enough to give me three licenses to freely do as I please. As such, I am giving away these three full licenses for ShoutDesigner to three randomly chosen people who comment on this post. The giveaway will end Thursday, 9PM GMT, at which time the winners will receive an email with their license codes.

And if you like my weird, yet open style of writing, you can stay up do date with my antics on either

Twitter

or

Facebook

I then realized I had been listening to Craig Armstrong. For those of you who didn’t care to click his name and read about the guy, he’s a pianist and composer of very calming, relaxing instrumental music. Ok, so Mr. Armstrong surely had some sort of effect on my experience here, no? As it turns out, he didn’t.

The test

I tried looking at the same page several hours later, while listening to Megadeth. And while the audio was by no means similar to the soothing piano licks of Armstrong, my experience was, nevertheless, the same. The same peaceful, serene feelings were there, unhindered by the heavy, aggressive riffing of Mustaine & Co.
Time to bring in the big guns. I used my work colleagues as guinea pigs, showing half of them the site with some music by Craig Armstrong and half without. Wouldn’t you know it, they had the same experience as I, regardless of the soundtrack. So there was no interference from the audio, just a fortunate happenstance.

There’s a very scientific explanation for why this, seemingly, simple page has such a powerful effect. And the answer, as with most things scientific, lies in our noggins. The visual part of the brain processes images in various ways, but they are almost never 100% reliable. In fact, we base many of our assumptions about what we see by making use of things we’ve known since we were children. As we were growing up, we, as all children, had an instinctive need to grab, drag, touch, push and pull pretty much anything we could get our fluffy little hands on. That’s because touching something is one of the most useful ways to prove that what our eyes see is real. But, wouldn’t you know it, the web is not 3D (thankfully) and so we’re easily fooled by parallax trickery and faux depth.

How does this relate to Jin’s page? Simple: the blurry, fuzzy background and its black foreground, coupled with the white, crisp text of the post itself give the, very natural, illusion of depth. But this isn’t enough. Whether consciously or not, Jin went a step further with it and added some very soft, 1px thick lines around the header. What they do is emphasize the idea that you’re behind something. Something that is not in focus, some space that is darkened by the looming sunset and it really does a wonderful job of making you feel like you’re looking through some sort of window or large crack in a wall. Moreover, take notice of the angle that the background was taken at. It’s a very steep angle, quite dramatic, which works to give it that theatrical sense that you are privy to something inspiring, something that will, surely, cause some sort of life changing breakthrough.
Instead it’s about WordPress Custom Fields.

Actually, the fact that it’s about something as dry and technical as Custom Fields is proof that our brains don’t need context in order to be emotionally stimulated. What we need are visual cues, hints, angles and directions that talk to our brains in a way that it understands. If the content itself were in the same vein as the design of the page, I’d probably start a cult and worship Jin. But I won’t. Instead, I’ll keep admiring this wonderful page, this beautifully emotional experience, hidden away amongst millions of dry and uninspiring pages and be thankful that I know of its existence and am able to share it with you.

For those unfamiliar with jQuery Masonry, what it, essentially, does is mimic a vertical float, not just the regular horizontal kind. In fact, I used it for the homepage of my blog (where the different posts are displayed).

So, what’s the trouble with CSS? It’s quite simple: there is no CSS model that takes into account vertical alignment. Period. I swear I tried everything. From floats, to positions, displaying inline, run-in, you name it, I tried it. But there was this midget in my head telling me that there must be a solution. And, wouldn’t you know it, BAM, two days ago, while eating an omelet, of all things, it struck me.

The all mighty columns

The solution is so simple that it gave me a brain freeze: CSS columns. Granted, their purpose is to display text in columns like a newspaper, but their display mode is exactly what’s needed to recreate the Masonry effect. But let’s get down to the code. What do you need, you say?

A container and some children

<div>
<a href="#">Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!</a>
...and so on and so forth ad nauseum.
</div>


The CSS magic

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }


An interesting fact: the width of the elements within the columned container is not relative to the width of the parent, but the width of the column. In the case of the example above width: 100% actually translates to 150px, not 480px (the width of the parent).

Fallbacks and browser compatibility

Of course, our friends at Microsoft have taken good care to not provide support for CSS columns. Not even in IE9! In this case, I recommend slapping in David’s awesome plugin like so:

<!--[if lte IE 9]>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<![endif]-->

In Microsoft’s defense, for what it’s worth, this does work (well, even!) in the IE10 Platform Preview. Hopefully they’ll leave support for columns in the final version, which could be released as early as next year.

I’m guessing there’s no point in mentioning that this works (brilliantly) in Gecko and Webkit browsers (Mozilla, Chrome, Safari). Opera does weird things that I don’t quite understand yet, but does an acceptable job of rendering columns (it just has trouble with the gaps and all).

This is usually where you’d find a link to a demo page. This time, however, I direct you to the homepage of this site. Yes, I used it live. I have that much confidence in this. Enjoy, kids!

So throw your comment down there, describing you design. What makes you want to pick up that tablet and start punching pixels?

For those that don’t know, Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine, has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon and, consistently, pumps out some of the best posts on Smashing Magazine.

Alt+Click / Option+Click

If you want to quickly contract/expand a group tree in Photoshop’s Layer palette, just Alt+Click the little arrow next to the parent group. This little thing:

This may be a familiar feature to some of you, but what few of you know is that if you just created a bunch of Layer Styles via the Blending Options panel, minimizing the group will take care of minimizing the little “fx” drop. I don’t know about you but leaving an fx drop down open just drives me nuts, so this little tip takes care of manually fixing that.

Ctrl+Alt+Click / ⌘ + Option + Click

This one’s the daddy version of the Alt+Click trick. No matter which arrow you Ctrl+Alt+Click, the entire tree structure of your document will contract/expand. Yes, even groups that are not children of the group you were clicking on. How cool is that!

Happy clicking!

But what do you do when you don’t actually have an iPad to test your designs on? Sure, there’s http://www.ipad-emulator.com/ but when you’re in the mockup phase, going back and forth from Photoshop to an online emulator, doesn’t really help. What’s more, you can’t get a physical sense of how the design will work. Are the buttons big enough, is the line-height too small? You get my drift.

So, here’s a quick and dirty way of getting as close as possible to how your design will look and feel on an iPad without actually having one.

01

Open Photoshop and make a new document of 1024×768 px at 132 ppi. I added a few gutter guides, 30×30 px.

02

Set the zoom in Photoshop at 100%. Next, get a ruler or some measuring tape and, physically, measure how many inches/centimeters your canvas diagonal has on your monitor. If your canvas’ diagonal is bigger than 9.7 inches / 24.6 centimeters, then zoom out, in Photoshop, until you get it to match. If it’s smaller, then zoom in.

Be careful, the zoom value that matches the 9.7 inches / 24.6 centimeters differs from one monitor to another, resolution to resolution.

For example, on my 15″, 1440×900 px laptop, the zoom value is 82.5%, on my other 15″ laptop that has a resolution of 1280×800 px, however, the zoom value is 73.7%. Quite a difference.

03

This means that I can edit my design at whatever zoom level I want, then just input 82.5 in the little input field at the bottom left of Photoshop’s UI and I can get a true-to-life feel of how the design will perform on the actual device. No switching between environments, apps or what have you.

The coolest part about this … uhmm … technique is that you can physically see whether your buttons are large enough, or if you can easily enter text in an input etc. simply by touching your monitor, because what you see (in terms of scale) is, literally, what you get.

I know it’s not the most orthodox method for solving the problem at hand, but it does work, and, once you get over the fact that it’s a workaround, it makes sense.

Happy monitor smudging!

One of the arguments I favor most of that conversation Eric Meyer had with a few people for why you shouldn’t design in the browser is: “designing in the browser hinders creativity because you’re only going to think about the code; your mind is stuck in a browser environment”. I’m sorry, I thought I was designing websites FOR the browser environment. I wasn’t aware my web design was meant for a 10 foot banner.

I decided then and there that I was going to give this a try, I mean, how hard can it be? So I set out to design in the browser and in the browser alone. I’ve gone through three projects this past August with this process and I must admit that I’ve learned more about web design this month than I have for the past two years.

So, what sets apart In-Browser Design, as I like to call it, from the more “traditional” approach?

Speed

You’re basically cutting design time by 75%. At least I did. Not having to go through designing a mockup meant that after the client sees the design and approves it, the website is done. Needless to say, that makes clients hella happy. This does mean that clients need to be informed about what you’re doing. If it’s a Photoshop mockup that they want and they won’t have it any other way, then that’s what they should get. I was fortunate to be able to do In-Browser Design with actual clients; others might not.

Focus

Content is king is something we hear all over the place, it’s become our motto and a constant reminder of the priorities of building a website. But so many designers still forget about this simple directive and the reason why so many still fail to put content first, is, in my opinion, partly because of the work environment.

Think about it, what is Photoshop about? First and foremost it’s about graphics. We know this, we understand this, this is why we turn to it; to make graphics. Now let’s look at websites. What are websites about? Content. In the same way that Photoshop without graphic tools is not Photoshop, a website without content is not a website.

So, by moving into the browser, intertwining code and design, the designer’s focus gets shifted from the graphics to the content, which is where it should be, when it comes to websites.

Code

As web designers, our life is torn at, somewhat, opposite ends: at one end we’re artists struggling to create art, beauty, self-expression; on the other end we’re analytical, we’re pragmatic, we struggle for clean code, semantic tagging, logical user interfaces and sustainability. This designer dichotomy, I think, is unhealthy. It breeds three types of websites:

1. websites that are gorgeous, but their code is ugly as sin
2. websites that are ugly, but have spotless code
3. websites that are mediocre, with mediocre code

What In-Browser Design does, in my experience, is break that dichotomy because it reverses the traditional order of things. By tradition, we first create a design mockup, the client gives the ok and then we start coding.

With In-Browser Design, you start coding the HTML from day one. Structure, semantics, code cleanliness and all those things take focus first. It’s only after the content is set in page that we can start focusing on design. By that time you’re well familiar with the content, you understand the underlying structure that you’ve laid down and your mind can focus on design and beauty and art without worrying about “can this be coded?”.

Proper progressive enhancement

Those of us who adhere to the progressive enhancement philosophy are, most of the time, adamant about why it is so important. But, to really have proper progressive enhancement In-Browser Design is the only true path worth taking.

I’m coming back to this, because I think it’s such an important step, a real paradigm shifter. Start out with the basic HTML (and PHP/Ruby/etc. if your page is dynamic) and the actual content, work your way up to CSS, then Javascript if need be. Progressive enhancement and In-Browser Design are a match made in heaven, if there ever was one, there is no doubt about this in my mind.

Interaction

When doing a mockup, you’re forced to work with a static entity, there’s no going around this. But, with In-Browser Design, you have hover states, selections, inputs, textareas, buttons, all the things that users interact with on a website readily available to you to test out, just like a regular user. It is immensely gratifying to be able to experience the full interaction that users will have with your website when in this design phase.

CSS3 Super Speed

You knew I was getting here. Part of designing with code is that you’re concerned over something that should also concern traditional web designers during the design process as well, though it rarely does: page speed. It’s quite simple and I’m sure most of you reading this already know about it: the more images you have, the more HTTP requests, the longer it takes for a page to load. Let me just stop you before you start your rant and I’ll state that large sprites are not a solution. Why? Large sprites = lots of Kb, pure and simple; load time goes up, again.

*I am, however, not an advocate for extra markup just to replace an image with the aid of CSS3. My point of view is simple: if it doesn’t require extra markup and it’s doable with CSS3, then I’ll do it. Else, use images.

Enter CSS3. Gradients, rounded corners, shadow, @font-face are but a few of the slew of goodies that CSS3 provides. I’m a pretty big advocate of CSS3 over images* so In-Browser Design is the perfect meeting place for me to settle the two. There are things that no CSS3 magic can do, and that’s fine, I’ll go for images on that one. But where there is room for CSS3, I’m sure to use it. And all this is coming back to progressive enhancement, of course.

Those are all well and fine, but there doesn’t seem to be anything new being brought to the table here, is there? In the hands of the most skilled designers, Photoshop is a mighty weapon, wielded to build some of the most amazing websites we’ve ever seen. I’m not arguing that Photoshop/Fireworks/Gimp/Paint Shop Pro/Pixelmator etc. aren’t great tools. Far from it. I’m arguing that they are not meant for the web (Fireworks included, but that’s another story). I’m arguing for a new paradigm for building websites.

It’s no mystery that I am completely hooked on this new philosophy and it’s in my nature to speak about it loud and proud, so let me make amends for what could probably be seen as a very emotional editorial on some occult practice of making websites. I don’t want you to start doing this from now on. I don’t want you to think that traditional website design is bad. What I do want you to do is keep an open mind. And if you’re feeling adventurous, maybe even give it a shot once. See if it’s for you. If it’s not, no harm done. If it is, then step into my office and whatever I can do to help you with this, I will.

I like to look at this In-Browser Design philosophy as Website Design. Not coding, not code while designing, but purely Website Design. Because that’s what it is, by excellence even; you are able to have full control over every aspect of your work, it’s truly WYSIWYG and that’s more than I could ever wish from a web design environment.

Bill and I share a passion for guitars and rock music so it was a no-brainer as to what the theme would be. We initially settled for an ’80s metal theme complete with all the Van Halen-ish, Twisted Sister-ish goodness but as the game progressed we found ourselves leaning more to a Duran Duran / Misfits inspired design. Goes to show you just can’t plan pure creativity.

So did you learn anything?

With every game I learn something new and this one was no exception. Perhaps unwillingly, Bill assumed the role of “Fine Tuner” while I, naturally, hit the design like a train through a brick wall. This sparked a realization: as designers we must assume both roles, sometimes simultaneously, sometimes alternatively, in order to ensure that the piece that we’re working on is high quality. This dichotomy would probably drive a non-creative insane faster than you can say “dual humbucker, coil-tapped, mahogany body, rosewood neck” but for designers it seems to be an intuitive position.

What does this mean? Beats me, but it’s good to know, I guess. Perhaps this will help better define these roles and, in the end, have us create better designs. Or maybe it’s just one of those useless, yet interesting, facts.

Anyway, let’s see what Bill and I came up with:

01

I started the game with a basic design of an electric guitar. Design in the 80s was anything but subtle so a basic “subject in the center” design felt just about right. Granted, I messed up the colors which have nothing to do with our theme.

02

But Bill fixed that in the second wave with a nice spectrum color correction that set the game back on it’s initial track.

03

What would an 80s design be without halftones, right? Also, I couldn’t stay away from the EVH style stripes. Or from Color Dodge, for that matter. Yes, you can call me a Color Dodge b**ch.

04

In an obvious Shark Week inspired move (sic!), Bill bootstrapped a wicked tiger/zebra pattern on the guitar that just took the guitar to a whole new level of 80s extravaganza, as well as some abstract Aerosmith-like wings.

05

A bit of color treatment and a simple text from me and this design was really getting there.

06

Rehashing the purple from the lower side of the canvas, Bill detailed the text for a more refined punk look.

07

And like a train through a brick wall, I dirtied up the whole design and defined the guitar a bit better.

08

And in the last wave, Bill focused more on small details and fine correction, as any final step should. The result speaks for itself. Nay, screams heavy metal for itself!

It was a great game, we had loads of fun and the result I can safely say is awesome x10. With every game it’s more and more apparent that Contagion is equally about collaborating for great designs as well as interacting with other designer, having a laugh and building friendships.

The theme of this game was design itself which, at first, I thought it was kind of silly. But after a while I realized it’s probably one of the toughest topics we could have chosen. Practically what we were saying was “design for the sake of design” which may sound childish and pointless but as the game itself pointed out, is a very good exercise in design control.

Design control?

It’s often that we find ourselves working somewhat mechanically or instinctively, rather than logically, which is all fine and dandy if you’re going for art, but design is not art. Design has to trigger more than just an emotional response and for that you need to be able to control your creative output like a frackin’ Jedi.

This game was a bit different from the previous two in respect to the control that both I and Brian had with our respective waves. As a result of applying ourselves and not letting things get out of hand, design wise, we stopped at the 8th wave because we both agreed that any more tinkering would be pointless. Brian also decided to remove previous elements from one of his waves because they didn’t fit. With this kind of self control and objective thinking we were able to have not only a very enjoyable and satisfying game but also a truly kick ass design.

So, without further ado, let’s get to the screenshots.

01

As always, the first wave belongs to yours truly. Playing on a slight pun, I put together a simple backbone for the design. I was a bit reluctant of using color in the first wave, but I soon found out that Brian was a Jedi master and he wasn’t going to leave a tiny thing like that get in his way.

02

And BOOM! When I opened this my face just lit up. It’s amazing how with just a few basic techniques, Brian managed to steer the direction of the design so radically. Whereas the first wave looked peaceful and soft, in this second wave it became clear that we were taking the path of destruction.

03

I’m a big fan of doodles so I doodled my way out of this wave, unbalancing the two halfs of the design for a more dramatic scene, as well as a bit of tinkering with the text.

04

Brian saw a movie poster in the design so he decided an explanatory, trailer style type would steer the game further in that direction. The pictures he added further emphasized the movie poster style, but a few minutes after passing the wave to me, we both decided the design would be better off without them.

05

A movie poster wasn’t my initial idea and I wasn’t going to go down that road at this point, but a vintage poster, now that’s more like it. A few color adjustments and repositioning the left type and I was ready to pass the ball to Brian again.

06

Now that we had a clear direction with the design, Brian added some rather subtle light streaks, basically nudging me to take the design into a more explosive state.

07

And boy, was I nudged. I love explosions and pretty much anything that makes a big ball of light, so it was no surprise that I over-burned the central area a bit. It’s an explosion, of course it’s burned.

08

Brian decided to balance the design out more by adding a slight gradient to the left side gap which, I think, works very well. And after about 15 minute of debating the issue, we both agreed that taking this design any further would be pointless.

We ended up with a design that surprised us both in it’s apparent simplicity and it’s hidden complexity. It’s dichotomous, it’s uncompromising and it just plainly rocks your Jedi boots off.

There’s a strange beauty about the unknown of playing a game of Contagion and that makes it fun as well as formative. Oh, yeah, and I decided to call this design Bauhaus axe murderer. What do you think? Cool? You betcha!

Unlike the previous game of Contagion, which I played with Matt Ward of Echo Enduring Blog, this time I knew my opponent very well. I’ve worked with Sergiu before, we’ve known each other for quite a few years and we live in the same town so we both had a pretty good idea what the other one is capable of in terms of developing on the given theme. The theme behind this second episode of Contagion was that old dilemma: how much is design art? Both I and Sergiu are fond of 3D typography, so that was the basis I put out in the first wave.

Let’s get started with the pics and show you how the game evolved.

01

The first wave, as always, belongs to yours truly. I wanted a solid foundation but without going into too much detail.

And here’s a full res closeup of that first wave, for all you zoom freaks.

02

Sergiu saw a cosmic theme in the first wave, so he countered with a Sun and a few color variations. Subtle, but now I had a proper theme to work with.

03

In space stuff does one of two things: it either moves quietly or it bumps into other stuff. And quietly is boring, so I went all ka-bloo-eeeey on the canvas!

04

Carrying with the destruction theme, Sergiu ninja chopped the hell out of the WEB part of the design. I especially liked the angle suggestion that the cut makes.

05

In the year 876 B.C., a great and powerful race of alien explorers came to Earth. They brought with them knowledge, peace & the Internet, for which they had great passion. They shared their passion with the local populous and so humanity received the gift of the web. We, as web designers, are the keepers and builders of their legacy.

We’re all for a bit of fun, so I lit everything up a bit better and added a small explanation of the story behind the design. Consider it as a legend, a guide towards understanding the lunacy that came over us while playing this game.

I thought it was pretty funny and quirky. Others just took it at face value. Sergiu said it’s the absolute truth and the most accurate depiction of human history. Ever.

06

Sergiu replied by creating a pyramid shape encompassing the scene and centering the focus point. Also, sand dunes.

07

The type above would’ve looked totally out of place without some sort of connection to the design, so I added a couple of UFOs and brought a bit of the grid in my last wave back.

08

In his second to last wave, Sergiu went all nuts. I have no idea what he was smoking at the time and neither does he, but for some reason he added orcas. In the desert. Swimming. I have no words.

09

Playing on the silly text at the top of the design, I went and added a few people and some light beams coming from the UFOs. I also blended and shaded the orcas a bit.

10

In the last wave, Sergiu cleared up the “art form” part for readability and focused the central text more with a bit of background blur. Also, quite a creative touch with the waterfall that also stands as an “I” and explains how orcas can swim in the desert.

Since there is a lot of detail in the design, I took it to link you guys to a larger version of the final design.

Behold and be amazed: The Big Picture

It was great fun playing with Sergiu and I think we both learned a lot from the experience. Quick fact: around wave 5 Sergiu declared: “this game is really catchy; I wasn’t expecting that”. So there you have it folks. Another sick design with some sick designers.

First off, let me explain the game for you. Contagion is a game for graphic designers meant to exercise rapid inspiration and execution, as well as being a means for designers to learn new practices from each other. Contagion has no winner. It is as much a game as playing with toy trucks is. The game itself and its outcome provide entertainment beyond a score.
The two players decide upon a theme (subject) of the game. There are no limitations to what the theme may be, other than mutual agreement upon it by the players.
The first player starts with a blank canvas (International A2, 300 DPI, RGB), using a common graphics software. The first player creates a new layer and begins to create the first wave by designing something based on the agreed theme.
After a maximum of 30 minutes, the first player must provide the source file to the second player. The second player then begins to design upon the first player’s wave in a new layer, thus developing the theme further. The game lasts for 10 waves, with 5 waves per player. The game ends with the 10th wave, which corresponds to the second player. All layers must be delivered to the opposite player as raster layers. Players are not allowed to delete parts of any previous waves, even their own.

They are allowed to cover parts of the previous waves with new designs, though, in order to stay within the spirit of the game, it’s recommended that said covering should not extend to the entire canvas, thus discarding previous waves.

So, it’s a bit different than the original Layer Tennis and the first game in what I hope to be a long series has proven that very well. Matt and I played for about 7 hours, all the while keeping in touch via Skype. The game has a very nice way of forcing you to talk about things (even non design related) without it being uncomfortable. There’s also the increasing curiosity of what the end result is and towards the end both I and Matt referred to the game as “our design” instead of “the design”. Spending a few hours on a collaboration like this has a lot more benefits than just a pretty picture at the end. There’s an invaluable human connection being set up which really just makes the game that much more fun.

But enough of this blabber. Matt and I agreed to work on the subject of “Flood“. So, let’s see how the rounds played out, with full commentary by yours truly!

The first wave was mine. I tried to set a bit of a general mood here, without too much detail, letting Matt build up on this structure.

Matt responded with a simple, yet to the point typographic treatment.

In typical Sickdesigner tradition, I proceeded to go nuts with some over burnt abstract waves, and a slight vignette at the top.

This was clearly becoming a battle of order vs. chaos as Matt plunged in with some very sharp shards.

By the halfway point of the match I struck another chaotic blow by expanding the palette into what I can only describe as an LSD fueled wet dream.

Matt played into my chaos with a subtle grunge texture and introduced a mystical character. She reminded me of the Lady of the Lake.

I responded with a tighter color correction and played with the message a bit more.

Being an English Lit major, Matt quickly articulated the catch phrase and consolidated the water theme with a central ripple.

In my last wave, I took out the ol’ trusty tablet and really fluid-ized the heck out the whole design. Liquid love, baby!

The last round was, of course, Matt’s.  Here’s where his writing skills came into effect, as well as a solid set of retro lights to seal the deal.

It’s been quite an experience this first episode of Contagion both in a graphic sense and in a human relations sense. I may have stumbled upon my favorite game yet. Well, apart from real tennis, that is.

I hope you enjoyed this little experiment and here’s to many more. See you later, my sick little puppies!

A bit of an introduction

The W3C specifies that the initial display value of all elements is inline. Some of you may raise a brow in disbelief, and with good reason. What they didn’t specify is that the display property is sensitive to other properties. That is to say that some elements automatically change their default display value according to other properties they might have applied to them.

Practical example: divs and ems. By default, they both act as inline elements. Add width/height or float to them and you start to see a difference. While the ems keep being displayed as inline elements, the divs are rendered as block elements, which is what we’re used to seeing.

Because of this slightly esoteric behavior of the display property, I find it easier to think of divs and forms, etc. as block level elements, while all the rest as inline. Most of the time, the default values are sufficient and adequate but there are times when maintaining semantic code while having a specific element behavior requires a bit of display tinkering.

So, what’s the big deal?

Instead of writing a lengthy and, otherwise, boring post about how this value does this and that value does that, I went a bit further and made a demo page showcasing all the 17 possible display values in a retro kind of Dharma Initiative interface. Yeah, yeah, Lost is over, boo-hoo.

So, clicky on the demo button and have yourself a merry time (best viewed with Firefox 3.6). And don’t forget to get back here and leave a comment!

See the demo

Hopefully, you had a good time playing around with the virtual display keyboard and, who knows, maybe even learned a thing or two about the mother of all structural CSS properties – display.

Web design is growing ever closely to the rank of more traditional, elite professions. Yet, unlike traditional professions, web design is not subject to a standard practice model. We each build websites according to what we think is the best, or sometimes the fastest, approach.

Perhaps you read some books when you started out with web design that explained certain methods of the building process, I know I have. And, perhaps, like me, you too, disappointingly, found that most of these books derive solutions that are either contrived, redundant, illogical or do not withstand the test of time.
In this post, I’ll try to express what I believe to be a healthy candidate for the title of Website Building Standard Method. I call it the Solar Method (of building websites).

As the name implies, my Solar Method is derived from solar systems, more precisely, from the process of forming a solar system. Daunting as it may seem, it’s time for a little bit of cosmology.

The Cosmological Background

For objective reasons I shall use our own solar system as a basis for my theory. This in no way affects the methodology of the proposed theory. Also note that this is a very brief description of the history of our solar system and is meant to provide insight into the background of the proposed method.

Our solar system began its life as a piece of a giant molecular cloud, known as a pre-solar nebula. Upon gravitational collapse, this fragment of the nebula condensed into a proto-star surrounded by debris, known as a solar nebula.
It is from this solar nebula that planets began forming, through the process of accretion. Further down the timeline, through collisions and attractions, the solar system stabilized into the structure we see today.
Snoozing already? Don’t worry, it gets better.

Identifying Parallels

At the center of any website lies the all mighty HTML. It’s the main ingredient we feed browsers and it powers the better part of the web. HTML is the single most essential component of websites. Without it, most other web technologies are useless. In other words HTML is our Sun. And technologies such as CSS, Javascript, PHP, etc. are planets revolving around our HTML Sun.

While there are well founded reasons to claim that technologies such as Java or Flash are equal in importance to HTML, this method is aimed at web designers, not Java or Flash designers, so I’ll refrain from pursuing this line of investigation.

The Solar Method

Terms such as progressive enhancement, a clear focus on accessibility and semantics as well as a clear separation of markup, styling and interaction are driving factors in today’s web environment. These factors are also the driving factors behind this proposed method.

Q: what is the most simple solar system? A: a sun.

Delivering content to the lowest technological denominator is the starting point of this method. We find this lowest denominator by eliminating all non-essential web technologies: a browser that has disabled CSS, Javascript, Flash and Java, reading a website set on a server that does not allow for anything other than simple HTML delivery. It is in this harsh environment that we must first place ourselves.

This method tries to provide the necessary mindset through which we can build websites that manage to overcome the many obstacles of this desert environment and yet achieve our goal of delivering meaningful and complete content.

So let’s look at a very clear way of determining the steps one should undergo in building websites with the Solar Method:

1. HTML
   First, create the HTML content without any images or other media. This is, by far, the most crucial point in developing a website. Clean, semantic & meaningful HTML means your job later on will not only be easier, but also more satisfying.
2. Media & CSS
   Add any necessary media (images, sound, animation etc.) to the HTML code and also CSS styling to match the design.
3. Javascript
   Add Javascript interaction if needed.
4. Programming
   Add any necessary programming (PHP, Ruby, ASP etc.) code.
5. Flash
   Add any necessary Flash code.

At each step remember to make the website functional and meaningful as if no other technology would be added.

At this point you might be saying to yourself: “but this isn’t that complicated!“; and you’re right, it is not. This method is not meant to be complicated, it is meant to guide you in a logical way to building websites. Adding orbiting technologies around the underlying HTML base like planets around the Sun is, or should be, a natural impulse driven by reason and the aforementioned key factors in modern web design: progressive enhancement, accessibility, semantics and separation.

My explanation for the Solar Method may seem overly complicated, considering its easy to follow guidelines. The lengthy preamble was a conscious decision, of course, and it is meant to underline the importance of our work as web designers.

Our craft has grown and so should we, as it’s practitioners, beyond the proverbial “code monkey” and realize that our work is of great importance and we are fortunate to be able to call ourselves the builders of the Internet.

Comment on this post telling me why I should pick you. That’s it.

I’m sick(sic!) and tired of random giveaways. Chance shouldn’t always be the driving factor behind free swag, especially when the winner could win more than he/she was expecting.

Winning criteria

I’ll be choosing the winner based on one criteria, and only this criteria – if it makes me go like this:

Why you should enter

Because if your reason for wanting the ad slot makes me go bananas then you won’t just be getting a free, 125×125 graphic ad. You’ll also get me to tweet about it, post about it on Facebook and just spread the good word. Depending on the winning cause I might even write  a post telling the whole world why your project rules beyond belief.

So you don’t feel like commenting

I’m a considerate guy (really!) so, if your project is time sensitive or you just want to keep it under wraps until you’re ready to launch, then just use the contact link in the footer and send a private message detailing why you deserve the spotlight.

And drum roll please…. the winner is the ever so hilarious David Davidson (“lots of things but my name is dave”). But wait, there’s more. Because you’ve all been an awesome crowd, I just had to choose two winners. So, the second winner, who will also receive an ad slot just below David’s is … more drum roll … Tracy (“Tapps”). Thanks for playing, everyone!

The Starter Pack, as I call it, is a bit different than a template. I built it with one guiding principle: scalability. As a result, you can use this to get started on your portfolio page or the next Facebook.

Of course, the coding part is all HTML5, cross-browser, of course, but I’ve also gone and included a basic Photoshop template to get you started on designing the page. Just to lure you in to it, here’s a list of a few major features of the pack:

• Cross browser (IE6 is supported as well)
• Valid HTML5 (that’s right; valid, baby!)
• Tablet/Netbook ready (via CSS media queries)
• jQuery (from the Google CDN)
• Cufón ready @font-face ready (Lobster & Raleway fonts included from FontSquirel )
• Some structural reusable classes

I’ve set up a separate project page (built with this Starter Pack itself) to showcase some of the features in the pack, so just click the link below (or the screenshot of the project page), read a bit about it and if you like it, I’d really appreciate a comment here.

Download the Starter Pack

UPDATE

As some of you have pointed out, I was in error by not pushing for @font-face. Thus, version 2.0 of the pack is up and running. Just click the download link and you’ll be up and running! Thanks everyone for the awesome support and huge help in making this a pretty cool little pack.

If you feel I’ve missed something in this pack, or that, perhaps, some areas can be improved, please, speak your mind in the comments area. I promise I won’t ignore you…much (just kidding!).

The concept of this tutorial is my response to the overwhelmingly magic power of the new Content Aware Fill tool, which is part of the new Photoshop CS5. I’ve, since, seen quite a few designers/photographers becoming a bit worried that their photo manipulation work load will take a plunge, because Content Aware Fill is such an easy to use and yet uber-powerful tool.

These being said, please note that Venus de Milo has boobs. And they’re naked. I suspect no underage viewers will find trouble with their parents on account of reading this, but it’s better to be on the safe side. So, if your parents have a problem with a 2100 year old naked lady made of marble, shut down this page and go solve the Fibonacci sequence for the first 500 steps (that’ll keep’em busy!).

But, you see, Content Aware Fill doesn’t actually fill anything. It removes things. And that’s all it will ever do, because that’s what it was built for. And removing things isn’t a task impossible to transpose into an algorithm, Content Aware Fill is living proof of it. But what IS impossible is creating an algorithm for adding things. This tutorial aims not just to inform about creating stuff, but also to prove, to those who still feel as if they’re losing their trade, that photo manipulation will, for a very long time, remain a domain limited to the power and intelligence of the human mind.

The rest of you lot, scroll down and let’s re-member this chick!

I used this picture, courtesy of good ol’ Wikipedia.

01

Since, as I said, we won’t be using any stock photos for her reconstruction, a bit of planning is in order. I quickly jotted out a rough sketch of what I believe is a viable position of the hands. Granted, I’m not aware of the entire history behind the statue, so this could very well be way off in comparison with the original structure. So don’t start yelling at me that “it ain’t right”. Thanks.

02

So, here’s the gimmick of this tutorial: in a new layer, using colors from within the original statue, I sketched out her hands. This is very, very basic and, as you can clearly see, “draw within the lines” doesn’t mean much to me. For this particular project I used only one regular squinted 45 degree ellipse shape Calligraphic brush, which you’ll find in any run of the mill graphics software. I chose that brush because it gives the appearance of plaster on a wall, which is remarkably close to what Venus’ texture looks like.

03

Here’s where the fun begins: using the same brush but at 50% opacity, I sampled some more original colors (mostly random at this point) and refined the sharp edges of the last layer.

04

To achieve natural lighting, I would zoom out to about 15% & squint my eyes to see whether the arms look proper. Alternatively, you can flip the image horizontally.

And again, with smaller brush sizes and more zoomed in. Notice I still don’t care about drawing “within the lines”. At this point I feel lighting and coloring are far more important than shape.

05

Fact: old statues are full of cracks and dents. Using a dark brush (not black!) I sketched out a few imperfections. Try to make them harsher than the ones on the real statue. You’ll see why in the next step.

06

Whoa! Where’d the cracks go? A: ever hear of Subsurface Scattering? Until a few years back, I hadn’t heard of this term either. It comes from the world of 3D software and refers to an underlying layer that is only partially visible, thus the term Subsurface. Well, I applied that same idea to Venus. Because her natural cracks seem like smudges in many places, with lots of variable widths and coloring, drawing full pixels would’ve rendered a very harsh outcome.

07

Then, using more of the technique from step 3, I blended her new body parts more and more.

08

I got rid of the sketch layer and masked out the arms. Take that, drawing within lines!

09

I realized that while the new appendages were fine, lighting wise, their color variance was..well, a bit invariable. So, in a new layer, I used a dark brush to detail some highlight area and desaturated them a bit by setting this layer to Hue.

10

Obviously, the new parts cast/receive shadows. Well…mostly just the right arm casts a shadow on the body. The other minor shadowing has been taken care of already through the layering process.

11

And with a bit of lighting correction, a cool vignette and some Curves for contrast, we’ve got ourselves a whole lot of greek woman.

Well, there you have it, folks. It’s, obviously, not the best reconstruction work, but I’d like to see a tool in Photoshop that can come even close to doing this without any stock photos. No, really, I would, it would be fascinating. Until next time, may the sickness be strong with you, my little padaw…grass… …. friends.

Typography

Typography is a general term that, in very loose terms, stands for “how text looks like”. Just like Colors, Typography is often underestimated and overlooked, but one must realize that it is THE most important aspect of web design. While the graphics we, so meticulously, craft in our designs are an indirect support for content, Typography deals with the direct organization and styling of content. Sometimes this can even be the only design element; such is often the case with minimal designs.

When it comes to Typography, I, personally, adopt a very dichotomous position: I feel the need to look at content both as text and as graphics. This is where, I believe, many inexperienced designers make the worst mistake. They’ll look at the content in terms of “it’s a bunch of text” and then go from there. But, treating text as both words and sentences etc. and as graphics, on a 1:1 ratio of importance, is a clear expression of our craft of visual communication.

I’ve wrote about the subject of  Typography before, in The Right Type For The Job, and the intertoobs hold bucket loads of information on the subject, so I won’t go into the basics of setting type, but rather stick to what this miniseries is trying to accomplish: getting those designs to pop!

As far as my experience goes, clients saying they want their type to “pop” usually translates to:

1. Clear hierarchy
2. Font family variation
3. Style

Now, let’s analyze these features and see how to make  use of them in you next eye-popping design.

Tip 1: One of the easiest and most natural ways of establishing typographic hierarchy is by making use of Scale. It’s really quite easy: stuff that’s important should be bigger than things that are lower in the hierarchy. It’s also good practice to employ a Scale ratio. One of my favorite Scale ratios is based on the Fibonacci sequence: 12 – 16 – 28 – 44 – 72.

Tip 2: It’s often that I hear clients demanding 3 or more font families within the same design. As most of us know, this is, usually, bad practice. Using more than two or three font faces results in clutter and actually becomes a barrier for the content itself. The viewer’s eyes become so distracted with the change in style that the actual message gets lost. When it comes to the web, I’ll usually work with a simple, yet effective, formula: one sans-serif font and one serif font. And that’s it. Whether you are partial to Verdana + Times New Roman, Arial + Georgia, Helvetica + Caslon etc. it doesn’t matter; not drowning you design in a gazillion font families is, at this point, more important than what works with what. I find that variation in font weights and/or italic style is a good way to “trick” the client into accepting a smaller number of typefaces.

Tip 3: We’ve all heard this: make this yellow, make that blue. And then you’re staring at your well though out design going “no way, dood, that would look awful“. Now, here’s something a lot of you, especially those of you just starting out with design, don’t realize: You choose the yellow, you choose the blue etc. Most often “yellow” can translate into something like “a subtle yellow gradient, with a small white stroke and light dark shadow”, which, at least in theory, sounds a lot better than “just yellow” and might work very well with your design and make the client happy. Give yourself more room to play with your design, especially with style.

Here’s a few samples of well implemented typography using the tips above:

01

Beyond the fact that Bless This Stuff is a pretty awesome site, the design sports a very pleasing Scale Ratio. Your eyes are naturally drawn to the site’s elements in the order intended by the designer by following size changes.

02

Steven Little’s website features three typefaces: a powerful serif used for the Call to Action, a comic-style cursive for the headings and contact links, and a classic sans-serif for the logo and main menu. I have to admit, the combination is very pleasing to the eye, even if I am a firm supporter of using a maximum of two typefaces.

03

Hradecon is an excellent example of well applied style to text, particularly the logo and main heading. It doesn’t take a lot to make it pop: a nice gradient, a bit of letterpress and a small highlight.

Of course, the tips discussed here are only a fraction of what typography is all about. They are meant to help novice designers gain more insight into the wonderful and often confusing world of typography. I mentioned in the beginning of this post that the interwebs hold vast amounts of knowledge in regards to this particular topic. With this in mind I recommend a very well written and mind opening article by Matt Ward: Create Beautiful CSS3 Typography. Even though it may seem to apply strictly to CSS3, it goes far deeper than that. It’s, most definitely, a must read.

And here we are at the end of this miniseries. I hope you enjoyed it and gained a bit more knowledge out of it. I’ll see you all on the next sick post. And, trust me, it is going to be sick.

Depth

Depth is just a short word for what I like to call Hierarchical Content Layering.  This is one of the most important aspects of web design simply because it’s so damn powerful. Depth is a play on the human eye, really, and the way that our eyes and brain understand the world around us.  Our eyes, naturally, focus on planes of interest, while consciously ignoring the rest of what we see.

Try a little experiment: look at something colorful, like flowers; then move your head about 45 degrees to the side and, without moving your eyes, try to notice the color of the object you were previously focusing on. It looks gray, right?

We can use this feature (or bug?) of the human eye to our advantage, in design. By creating planes of focus we can build a nice pyramid of interest in which the design supports the content, rather than the other way around.

Depth isn’t just something we can employ to create Hierarchical Content Layering, but also to provide a more natural atmosphere to the design. So, what are the major ways to add depth to your designs?

1. Blur
2. Scale
3. Shadow

Now let’s break them down and see how to use these three major techniques to bring some depth to your design!

Tip 1: a blurry background will automagically bring content to the center stage; the reason for this is simple: HTML text is naturally sharp and, by contrasting the background with the text, you’re forcing the user to focus on the sharp stuff, rather than the blurry background. If I make it sound like a sneaky move, that’s because it is. But in a good way!

Tip 2: Stuff that’s bigger is more important, more in focus than things that are smaller. Yes, it’s that obvious and that simple. But, as it’s often the case, it’s these seemingly obvious things that get missed.

Tip 3: Shadows follow the same rule as scale, with the addition that shadows need to bend and warp relative to your light source. If you haven’t already, read part 2 of this miniseries in which Liviu talks about Lights & Shadows and how to add them to your design popping arsenal.

Let’s look at a few examples of how to properly implement Depth into your designs.

01

HDQT makes extensive use of both blur and perspective scale to put the front content literally center stage!

02

Speaking of scale, Jeff Everson makes use of this in the background to make the header really pop out of the design.

03

Amp Your Biz has a very subtly implemented depth: it’s based on the large shadow cast by the header block and by the two-tone background. This really brings out the text and headings making it a very clear and convincing design. Very effective!

I hope you enjoyed this short dive in the mysteriously dangerous deep woods of Depth itself. I know, I said no more puns…I lied. Anyway guys & gals, I’ll see you next time for the final episode of the miniseries. It’s going to be typo-tastic!

Colors

Though sometimes carelessly splashed together, colors set the “feel” of a design and convey an emotional message before the visitor has read one single line of text. I’ve talked about this in an article last year, called Color choices ( how not to suck), in which I’ve put together a few of the more advanced ways to help with your chromatic endeavors. Well, now it’s time for some more basic info on this subject.

Colors establish visual identity as much as a logo does and to avoid “Mickey’s Merry Toy Emporium” looking like the “Grimm Reaper’s Lair & Scythe Store” it’s recommended you choose your color palette from the very beginning.

The general, beginner, rule is that a color palette should contain 3 – 5 colors. There are, however, exceptions to this rule (as there always are); these being designs that contain most, if not all major colors (rainbow designs in particular).

Choosing the color palette should be Step no.1 (at least for me) since it represents elements specific to the identity you are trying to create.

Ask not what you can do for colors but what colors can do for you!

Colors provide us with five major points:

1. visual identity
2. feeling
3. contrast
4. focal areas
5. identifying different types of content

Tip 1: As a guideline a color palette should contain the following:

1. a saturated color that usually serves to highlight certain areas
2. a medium saturated color with luminosity similar to the background
3. a background color, closer to either black or white

Now, of course, there are different palette types, which I won’t reiterate here, but rather point you to a very useful tool called Kuler. Most designers already know about Kuler, but it’s always worth mentioning again, especially for those just starting out with design.

Tip 2: Say you need an orange gradient. And you have an orange in your palette. The way I would go about it is by picking that orange and setting it in the middle of the gradient, then choosing the other two gradient colors based on that original orange. This way, you’re staying consistent with your chosen palette, while still having the freedom of playing around with gradients.

Tip 3: It’s not only important to choose a palette that represents the identity you are trying to create, it’s equally as important that the colors of said palette work together to generate that identity. One way to achieve this is by referencing color meaning. Some people argue that using your intuition is better than referencing color meaning. I say sure, use your intuition, but you better be sure that your intuition isn’t wrong!

01

A Modern Eden uses a very popular scheme: opposite colors (Red and Green) and a full tonal set of one warm color (Yellow-ish Orange). Coupled with about a 70-30 ratio of white to black, the design creates the feeling of peace, trust and liveliness.

02

Kyle Meyer‘s website works on the same opposite principle (Red Orange & Teal) and a warm Green-ish Yellow. Because colors are, mostly, restricted to the right side of the website they provide a visual cue to the most important parts of the site.

03

Nico Hagenburger‘s website has a more complicated color scheme.

It’s, apparently, just a few random colors thrown in together, but, in reality, there’s a lot going on. Small variations around Green, coupled with a saturated Purple area of interest direct the eye down the page in a natural fashion.

Stick around for the next episode in our miniseries, where we’ll be diving into the deep and treacherous waters of designing with Depth. And no more bad puns, scout’s honor!

Light and Shadows

Lights, and the shadows they cast, are one of the most important realism factors in design. Our eyes and brains are used to decoding the real world by analyzing and interpreting these two elements. Of course, we understand the world around us by interpreting a myriad of factors but in this episode, we’ll just focus on Lights and Shadows, or LS. Proper usage of LS can make a design feel more natural, break monotony and provide visual interest to key areas.

So how do we use these elements to make our design feel more natural?

Tip 1: First, we need to choose one, or more, light sources. As a rule of thumb, start by using only one light source at the top center of your canvas. This step should be done at the very start of the design process. This way, you can easily design all the elements in your project by referencing the light source.

Tip 2: Using LS implies, you guessed it, being subtle. A harsh, contrasting, singular light source is going to look cheap and steal the user’s attention from the actual content. Which is kind of a bad thing to do. LS, like all the tips in this miniseries is a design aid meant to enhance your project’s content, not overcome it.

While buttons, backgrounds and other graphical elements should be affected by any lights in your canvas, elements that will become markup (paragraphs, links, headings etc.) should not be affected.

Tip 3: Use the opposite rule: if you have a light coming from the left side, then the shadows will be right angled. Another thing to keep in mind: the closer your are to the light source, the smaller and more sharp the shadow becomes. And if you’re just starting out with this stuff, you can test how lights and shadows interact with real world objects by playing around with a reading lamp. Sounds silly, but it works.

Tip 4: If your light source has a tint, then it’s natural that said tint will affect other design elements and compose colors. For example: a yellow light hitting a blue button will, naturally, result in a slightly greenish tone.

01

Aran Down uses a central light source in a very interesting way: shadows, in this case, provide visual feedback about depth. Because the top three pieces have a large shadow they appear to be slightly elevated, as opposed to the sliding panel below it, which has very subtle, short shadows.  There are also other depth layers in the design, at a smaller scale, like the sliding panel navigation arrows or the logo picture. See if you can spot them all.

02

Volkswagen uses horizon and shadows to convey the idea of depth. The two cars in the back appear to be further away because they leave a smaller shadow. Sure, the scale change helps as well, but we’re only talking about LS here. Sure, Volkswagen could have taken the extra time to blend the shadows better (they’re a bit chopped off) but it’s still a pretty good example of how simple LS can make a design feel more natural and interesting.

03

Without its central light source, FLIPP‘s website would’ve been flat and unpleasing. An excellent example of how a bit of light changes everything. But just so I don’t blow too much steam up FLIPP’s back layer, that large metallic text really could have used some texture and a better blending with the light source. That is, it should fade to a darker gray towards the sides.

It’s the little things that make a design POP, so remember: you should design with subtlety and strive for that over-circulated ninja status we’ve all been reading about….little grasshopper!

Textures and patterns

Textures and patterns (referenced TPs from now on, yeah i know it sounds like the other tp but it’s not, so please keep your dirty mind out of the gutter) are useful for rendering realism. By now everyone has grown tired of the badly understood and implemented “Web 2.0″ graphical concept, so TPs come as a breath of fresh air to almost any design.

Now let’s see how to put them to good use, lest the gods of design will get angry and smite thee. Enough fun, time for the serious stuff.

Tip 1: One of the most important things to keep in mind is to not go overboard; a maximum of two (textures or patterns) per design is sufficient. You can achieve all the effects you need by playing around with scale, color or opacity. Also, be subtle in your focus. TPs are design aids, not focal points of the design.

Tip 2: It’s also a good idea to edit the TPs you’re using and make them blend and match the design. Most of the time a luminosity & opacity change are sufficient, but sometimes you have to get creative to make them work, never let them be “out of whack”.

Tip 3: Patterns are, by their repetitive nature boring and your job, as a designer, is to break that monotony. This is easily achievable using lights and shadows.

Tip 4: Try to think ahead. Someone, somewhere has to make your mockup into a functional website (it might even be you). So don’t make yours or their lives harder. If you have a texture that’s not absolutely huge, blend it into a solid color so it doesn’t appear chopped off on large screens.

Here we’ll be looking on some successful stories, and why they are so.

01

Let’s take for instance Chrush + Lovely

They have an abundance of textures, but they’re separated on each page, and you can clearly see the distinction between the sections. Every element blends in perfectly with the chosen color palette; nothing is out of place.

02

The Croquis uses a large watercolor backdrop to provide visual interest to the top part of the design, as well as some much needed contrast.

03

The O’Reilly’s Pub website has a lot of textures and patterns, but it’s not too much because they’re subtle and used to help content come alive, not hide it. Textures are often one of the best ways to set the mood of a design piece. And O’Reilley’s aced that one, although one must admit: the logo doesn’t really belong in this picture, right? So, beer, anyone?

Remember to use textures and patterns in a subtle manner: too many often result in lack of coherence and legibility, too few and you don’t get that POP factor. Stick around for the second episode of our mini-series and let those designs go-a-poppin’!

Justin Maller is one of my personal design idols and a world renowned graphic design genius. Since his portfolio got a quick update this month, I found it fitting to pay my tribute to his amazing works by doing a tutorial to achieve the effect of his  “Overload” project.

Of all of Maller’s latest works, “Overload” impressed me the most because it’s, seemingly, a simple design. It doesn’t seem to have anything more than a few stock photos stitched together and a photo filter. But, if you look closely, you’ll notice the lowered contrast, the almost posterized feel of the photo (without actually having that horrific effect) and even the varied sharpness. All these things change the mood of the scene into a very serene, almost dreamy environment.

So, our project will involve one stock photo (free to download, as usual), courtesy of user tomatie of SXC, though you can certainly follow this tutorial using a photo of your own, there aren’t really any restrictions, photo wise.

So let’s get started by importing our stock photo. Usually, I would tweak the perspective to something more suitable for the project at hand, but this time I think the photo looks pretty well framed as is.

01

Using any number of sharpen techniques (I’d suggest a plain old Sharpen or a High Pass set on Vivid Light) let’s add some shine and focus to our photo.

02

Next, we’ll do the opposite. Copy the original photo into a layer on top and add a Blur to it. It can be any type of blur, this is your call. Just don’t over do it. What we’ll be doing with this is adding a bit of Depth of Field.

03

And then we’ll mask out everything but the girl and the sand under her in this new blurry layer, leaving her in focus and the background in a nice, camera-like blur. This effect brings the viewer’s eye to the subject that you choose to be in focus; in my case, the girl.

04

It’s usually good to have a color palette (like a painter has) but for this project it is absolutely crucial. Whether you decide to go with a palette similar to what Maller used in his “Overload” project (like I have) or go with one of your choosing, please, set aside a layer and just draw your colors there. It’s a very useful practice that will save you loads of headaches and will keep your work tight and consistent, at least as far as colors are concerned.

05

What the heck is that? – someone should ask. That is a new layer on top of everything we’ve done so far in which I suggest using a technique I like to call “going monkey”. It’s like “going ape”, but without any actual violence. Just pick up colors from your palette and randomly draw patches of color. It’s important that you keep your strokes loose and not very detailed; this will render a more natural, organic feeling to the colorization.

06

Now let’s blur the life out of it until it becomes very smooth.

07

Now let’s set this last layer to Multiply. I’ve used Multiply because it works on multiplying light values while keeping the hues intact, just as we drew them in step 5.

08

Things were looking a bit too dark after the Multiply so I added a Levels Adjustment above everything and tightened the histogram until it got a bit clearer. Be careful not to over do it, we want to keep the photo’s details, not over expose them.

09

As with any work that’s very dependent on mood, getting colors just the way you want them is very important. I’ve created another layer of colorization, this time just with red. Then we’ll mask this layer using a horizontal gradient from black to white.

10

Now here’s one thing no filter can achieve. Adding highlights in just the right places. I just used a hard white brush and drew over the places where the light creates shine.

11

Next, set this last white layer to Overlay, blur it a bit and then set it’s opacity to about 50%. The effect is subtle, yes, but it’s the subtle, little things that make the difference. Just because it’s hard to observe it doesn’t mean it’s not there or that it doesn’t do it’s job.

12

Here’s something you don’t see everyday: lowering the contrast. Just use a regular, old Brightness & Contrast effect and lower the Contrast about 70% – yes, that much. The effect we’re trying to achieve is of a serene environment, not a razor sharp, in-your-face type of photo.

13

Focus is a very fickle thing. It’s works globally and locally and depends very much on the project at hand.

We do, however, need to focus the viewer’s eyes better. This is a great opportunity to bring up a Levels adjustment again. This time, however, tighten the black until you get a very harsh, grainy look. Don’t worry, we won’t leave things as they are.

14

Now let’s fade this Levels layer to the right. This way we’re completely focused on the girl’s face and upper body and less on the background and legs.

15

Next I added a simple black layer to the left side of the photo and faded it to the right, focusing the viewer even more on the right side.

Wait a second! But this isn’t exactly like Justin Maller’s design! No, it’s not. And it shouldn’t be. This tutorial isn’t about replicating someone else’s work. It’s about learning to change the feeling that an image conveys.

Well, hopefully you’ve learned a thing or two about making an image all dreamy like. If not, hit that Home button and start over!

Right off the bat, let me say that I do not proclaim (not anymore) that there’s a right way or a wrong way to format your CSS. I’ve come to the (hopefully mature) conclusion that the way one formats styles should be based on the type of project at hand. And this the basis of this post.

Gone are the days of small, static websites that take about a day to code and have less than 500 lines of CSS in them. Nowadays, we find ourselves working with blogs, CMSs, frameworks, web applications, web shops and generally huge friggin projects. The CSS we write today is almost never under 1000 lines and when you’re dealing with that much code, you need to be able to maintain it easily.

Most web designers have their own, preferred, way of writing. And they stick to it no matter what. I used to do that myself. But the more diverse your projects are, the more you’ll start to notice the pitfalls of your preferred technique. And then you might realize that your own, personal, style of writing stylesheets isn’t really that important, when it hinders to the maintainability of the project.

I think it goes without saying that in this post I will completely avoid the possibility of “inline” and “in head” styles. These two options aren’t really an option because they both mean polluting your markup, so I’ll politely tell them to get the fudge out of the equation. If any of you have a problem with that, take it down to the comments section, where complaints are more than welcomed.

I’ve got a system here, so, we’ll start with the big stuff (file management) and end with the really small stuff (the curly bracket – quite poetically).

Single file vs multiple files

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS3 Vignette</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
...
</body>
</html>

The single file approach, like the code above, is most suitable for small projects. I’d say somewhere under 1500 lines of CSS is the limit, at least for me. As long as you keep your styles organized, this approach should work out ok.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS3 Vignette</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/type.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/colors.css" type="text/css" media="screen" />
</head>
<body>
...
</body>
</html>

The multiple file approach is a good choice when working on larger, more complex projects. It’s also a good idea to use this approach when you have a project that will have a lot of updates. Being organized like this and keeping different sections separate can make your job a lot easier.

@import url('css/reset.css');
@import url('css/structure.css');
@import url('css/colors.css');
@import url('css/typography.css');

The direct approach to multiple stylesheets isn’t the only option. You can use the @import rule to put together your multiple CSS files within a single, main stylesheet.
The downside with using multiple stylesheets is that they add to the number of HTTP requests made for the page, which slows down your page load times a bit. I wouldn’t worry too much about it though. Most of the time you can get away with it and still have good performance on your pages. Compared with database queries, javascript calls or even image load, the downtime caused by large CSS files is, mostly, insignificant.
If you’re totally anal-retentive about page load times, however, you can use a stylesheet minifier to decrease the size of your CSS files. More often than not, you can slim them down to at least 60% of their original size.

To indent or not to indent


p{ font: normal normal 1.2em Arial, Verdana, Tahoma, sans-serif; }
p span{ color: tan; }


Not indenting your CSS selectors at all is usually a bad idea and I really can’t see one upside to it. So don’t be a naughty Nancy and press that Tab key every now and then.

#block{ float: left; margin: 0 20px 0 0; width: 200px; }
p{ font: normal normal 1.2em Arial, Verdana, Tahoma, sans-serif; }
p span{ color: tan; }
p em{ font-variant: small-caps; }

You can indent in chunks. That is to say, sections that are related directly are indented (like the span and em as children of the p tag), but unrelated ones stay unindented (like the block id and p tag). This could work, as you keep your file size small, while still having the legibility and organization specific to the indented style. It’s a sort of hybrid option.

body{ margin:0; padding:0 }
#wrap{ position: relative; margin: 0 auto; width: 900px; }
#left{ float: left; width: 66%; }
#left .inner{ padding: 20px; }

Fully indented text has the best legibility and is, to many people, myself included, the easiest way to maintain your stylesheets. The downside is that styles get big pretty fast so it’s a good idea to combine this style of writing with multiple file stylesheets.

Single line vs multiple lines

#left{ float: left; width: 66%; }
#right{ float: right;
width: 33%;
border: 1px solid #333;
background: #cecece;
font: normal normal 1.4em Arial, Verdana, Tahoma, sans-serif; }

I found that many of the programmers I’ve worked with prefer single line CSS. | I found that many fellow web designers prefer the multiple line approach.

Single line CSS attributes are a very concise way of writing your styles, but they have the disadvantage of becoming harder to read as the attributes add up. The id left in the example above is an example of an easy to read and concise set of attributes, whereas the id right, with it’s many attributes is a huge pain to figure out, especially if you’re looking at the code a few months after it was written.
#left{
float: left;
width: 66%; }
#right{
float: right;
width: 33%;
border: 1px solid #333;
background: #cecece;
font: normal normal 1.4em Arial, Verdana, Tahoma, sans-serif; }

The multiple line approach has it’s appeals: it’s easy to read, to edit and, subsequently, easy to maintain. The downside, of course, is the increased length of your stylesheets.

To alphabetize or not to ahlaiebtpze

#right{
background: #cecece; border: 1px solid #333;
float: right;
font: normal normal 1.4em Arial, Verdana, Tahoma, sans-serif;
width: 33%; }

I am a huge supporter of CSS alphabetization, so I may come off a bit subjective here, but I really do think it’s one of the best ways to format your stylesheets, especially when using the single line approach. That way, you can overcome the downside of many attributes becoming hard to read through, like in the example above.

#right{
float: right; background: #cecece; border: 1px solid #333; width: 33%; font: normal normal 1.4em Arial, Verdana, Tahoma, sans-serif; }

Alphabetizing takes time to get used to. It’s not the most intuitive and natural way of writing and it’s main downside is extra time spent on the CSS file. But, if you persist in this practice, you can develop your writing skills to such extent that it becomes natural to alphabetize.

The curliest of brackets

#left{
float: left;
width: 66%; }
#left{
float: left;
width: 66%;
}
#left{
float: left;
width: 66%;
}

Should the closed curly bracket at the end of each selector be next to the last property, or on the next line? And should it be indented or not? Personally, I put the bracket next to the last property, to save some space. But that’s just me, this one’s totally open to discussion.

A few examples


body{margin:0;padding:0}
#wrap{width:900px;position:absolute}
#left{width:66%;float:left}
#right{width:33%; float:right}
.inner{padding:20px}

I like to call this the programmer-friendly approach (though I’m sure this doesn’t apply to all programmers). Single line, chunky indenting, no alphabetization, no extra spaces, curly brackets at the end of the line. And it looks really, really crammed.

body{
margin             : 0;
padding            : 0;
}
#wrap{
position        : absolute;
width           : 900px;
}
#left{
float           : left;
width           : 66%;
}
#right{
float           : right;
width           : 33%;
}
.inner{
padding      : 20px;
}

I call this one the over-achiever approach. Multiple lines, full indenting throughout, alphabetized, curly bracket on a new line and indented and bonus points for super indenting the properties to be one above the other. And it is way to spaced out.

Whichever way you decide to approach your CSS stylesheet “writing skills”, be aware of the pitfalls of each one and settle on a way that fits your project’s needs, not your personal preference.

Of course, there are those of you just looking for the quick fix so, without further ado, here’s the link to the demo page:

DEMO

So, what’s this puppy about?

For those of you who don’t know, a vignette effect is a discoloration on the edges of an image. This effect usually appears in photography and it can be either accidental or intentional. It can also be either light or dark, depending on the situation. Like this:

Good, now that that’s out of the way, let’s continue to the actual tutorial.

We’ll be dividing the vignette into four div elements as shown in the diagram above.

Using absolute positioning we’ll be telling the four divs to sit in their respective corners and using a combination of CSS Gradients and RGBA we’ll fade the discoloration towards the center.

One should be careful not to overdo it with the vignette. A black vignette on a white background will look really cheap, mostly due to universal browser dithering problems, so a subtle approach is key to a successful effect.

We’ll also set the height/width of the divs using percentages. This way we’ll get a proportional vignette according to the user’s screen size. The trick with this technique is using just the right amount of height/width. Too much, and the content will become unselectable on account of the divs having a high z-index value. Too little and the effect is barely noticeable. I did a few experiments and the widest range of usable heights/widths is somewhere around 12%-17%. In this tutorial I used 15% which seems to work fine for resolutions from 1024×768 up to 1920×1080.

The HTML

The HTML part is really, really straight forward – just four empty divs, in no particular order:

<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>

The CSS

Here where the magic really happens:

/* First we set the four elements of our vignette
to be on top no matter what and set their initial
width and height which we'll overwrite in the next declarations.
*/
#top, #bottom, #left, #right{
height: 100%;
position: absolute;
z-index: 999;
width: 100%; }


/* Overwriting the default 100% */
#top, #bottom{
height: 15%; }


#left, #right{
width: 15%; }


/* We set the gradient with CSS3 from a solid gray to
a 100% transparent color which should be the same as
the body background color, to have a nice, clean falloff.
And we're also setting the position of the vignette elements.
*/
#top{
background-image: -moz-linear-gradient(100% 100% 90deg, rgba(255, 255, 255, 0), #e1e1e1 );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
top: 0; }


#bottom{
background-image: -moz-linear-gradient(100% 100% 90deg, #e1e1e1, rgba(255, 255, 255, 0) );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(#e1e1e1));
bottom: 0; }


#left{
background-image: -moz-linear-gradient(100% 100% 180deg, rgba(255, 255, 255, 0), #e1e1e1 );
background-image: -webkit-gradient(linear, left center, right center, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
left: 0; }


#right{
background-image: -moz-linear-gradient(100% 100% 180deg, #e1e1e1, rgba(255, 255, 255, 0) );
background-image: -webkit-gradient(linear, right center, left center, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
right: 0; }

The code may look a bit stuffy at first but it’s quite easy to maintain as only the hex values of the gradient and perhaps the height/width values need adjustment.

Browser compatibility

All in all I’d say it’s a pretty useful and usable technique, but if you must extend it’s compatibility to Opera and IE7 and above you could use fixed heights/widths and a repeating transparent PNG image. A lot less cool, but you get the point.

I hope you enjoyed this little technique and if you ever get the chance to use it somewhere, I’d appreciate dropping a line and showing off.

I cannot stress enough the fact that this tutorial is not about exactly matching the original poster, but rather about learning new and cool ways to manipulate a photo into the wackiest of concepts.

Take a look at the poster for Alice in Wonderland. This is what we’ll be using as a guide.

And here’s what we’re going to do:

First off, let’s gather some resources. Personally, I believe in open source as much as possible so I try to use only free stock photos. Plus, there’s the added benefit that you guys can play along to the tutorial using the same files, should you wish to do so.

1. BedHead Mugshot – I tried out several faces before I finally decided on this one. I suggest you at least try to use a person that already has curly hair. It makes creating the hair a bit easier.
2. Wall – This will be used as texture for the background.
3. Crocodile Skin – This one’s for the hat. The texture is going to be only slightly visible, so you can use a lower quality photo if you don’t like my choice.
4. Vintage Fabric 7 – This texture will be just a very tiny bit visible in the wrap around the hat, so you can even avoid using it altogether, though I suggest going the extra mile.
5. Headless Suit Guy – The boy we chose as the main model is wearing a T-shirt, so we’ll just have to transplant this nice suit over it.
6. Red hair bow – While I was unable to find a close match to Johnny Depp’s bow tie from the movie, this one, I believe, does the job nicely.
7. AliciaWonderland font by FZ – From what I’ve heard the font used in the movie posters is actually an adaptation ordered by the producers, so this close simile will have to do.

This is a pretty time and energy consuming exercise. In these situations I find it best to have a plan, even just a short mental one, to help with managing all the bits and pieces. So, first we’ll do the background, then the boy, next come the hat and clothes, then the hair and finally any fixes needed.

The Background

As part of a good design management practice, groups/folders for each section are well advised. So go ahead, make a group/folder and name it Background (duh!).

01

Let’s fill the background of our canvas with a nice green, say #1c3909 ? Yeah, that’ll do.

02

Now let’s add a Radial Gradient to the background. I used #78fb00 for the center and just faded the exterior to full transparent.

03

Next I added the Wall photo, set it to Soft Light blending and lowered it’s opacity to 40% and presto, voila: a nice grungy wall. Just like in the loony bin.

04

For those of you that don’t know, I’m a huge fan of non-destructive design. Which means I’m a sucker for vector shapes. So pick up that Pen tool and draw a very childish rendition of a black hat. Really, don’t try to make it look perfect. I advise this for two reasons: first off, it takes less time to do it and second, because the shape is simple and simplistic, it won’t steal attention from the main character, which is the focal point of the poster.

05

Now make a whole bunch of duplicates of our hat and resize and rotate in a swirly fashion. This is also one of those things you shouldn’t pay too much attention to. Just let things flow as it were. There’s no right way or wrong way on this one. After you’re done arranging the hats, group them together (or merge them in a single layer for those of you that aren’t as anal-retentive as I am about layers) and set the group (or layer) to Overlay and decrease opacity to 50%.

06

Also as part of our naturally flowing design, in a new layer, start drawing a bunch of black and white using a very large, soft brush, similar to what I’ve done above. This will be the backlight/shadow behind the character. Don’t worry, it won’t stay like this for long. Because in the next step we’ll be…

07

…setting the layer to Overlay. And ba-da-bing ba-da-boom, we’ve got a very nice contrast going on. Sure, it’s a bit over burnt in some areas, but they will be covered by the boy so they don’t matter.

The boy

08

First off let’s get rid of the background. I masked it out with a simple color selection. Use any technique you like, the mask doesn’t have to be perfect, as we’ll be doing a lot of work over the original picture. If you’ve never done something like this, I suggest this well written tutorial on selections based on color channels.

09

The overall color of Johnny Depp’s makeup in the original poster is blue, so I took a large hard brush and just drew over the character. The color is #a4b7e1. To draw exactly over the character you can either copy the selection you get from removing the background from the previous step or create a clipping mask, depending on your software of choice.

10

Now let’s set that layer to Color blending.

11

Using the same principle as before, let’s make another layer, this drawing with #e51709 over the hair. I tried to keep as much above the initial hair as possible, though pixel perfection isn’t needed here either.

12

And let’s set that layer to Color blending as well. Excellent, now we can get started on the makeup.

13

This is where pixel perfection is somewhat desirable. I picked up a few random purple tones and using a very soft brush with low opacity setting (I suggest around 10%) I kept drawing around the eyes. Remember to change the color tone every now and then, this way it will look a lot more natural and less plastic like.

14

Here I’ve added another layer on top and using the same brush I drew with a few pink tones around the eye.

15

And here, in another layer, I sketched out some of the makeup on the cheeks.

16

Little by little I added more and more color and different tones to the makeup. In our case, because it’s such a complex makeup we need to work by adding little by little, one at a time. Painstaking, I know, but necessary in order to have a high quality final piece.

17

The original photo had very uniform lighting, completely different from our spotlight-type setting. So I created two layers, both set on Overlay, one for the face and the other for the shirt and neck. On the first layer I drew with white and I used black for the other. This way we’re making sure that the lighting on the face fits with the scene.

18

The face, while almost properly lit, was lacking in definition. So using a small, black, 2px soft brush with about 5% opacity I slowly added some fine details like a bit of sharp shadow under the nose and under the lower lip and also defined the inner cheeks as well.

19

Sometimes it’s best to get up and take a walk somewhere just to clear your head. Because when you come back you might, realize, like I have: no way! the neck is too well lit and so is the forehead! Fixed it with a few soft brush strokes.

20

Here I added some more tones and darkened the lips a bit more as well as define the facial features better.

21

I don’t know about you but eye color changes always put me in a good mood. Just pick a nice green color (#9aff0a for example) and draw over the eye. Set to Overlay and done. Instant radioactive eyes.

22

Here I added even more to the purple makeup, especially around the cheeks.

23

Ok, so this one looks a bit more difficult than it actually is. Just sample colors from the hair and draw the eyebrow by following the curvature of the actual, natural eyebrow. It really isn’t that hard. Just use a small 1px-2px brush at about 30% opacity and you’ll do fine.

24

Bored yet? Well, don’t worry, the whole makeup thing is nearly done. I know I’m using the same technique in the last few screens but I think it’s important to visualize the process and learn that by not taking the one-layer-is-enough approach, you can reach a very realistic and pleasing outcome.

25

I added a bit of shadow on the right side of the face, cast by the hair falling over the eye and the eye lashes. While the lashes seem complicated, they’re just little drawn triangles, very similar in shape with shark teeth, of all things. And we’re done with the kid, for now.

The hat and clothes

26

I found it to be quite a daunting task finding a good top hat for this project. After a few hours of pointless googling I decided to make my own. Hey, you know the saying: “If you want something done right, hire someone else to do it”. So, I duplicated the hat we made for the background (why make a new one?) and because it was a vector object, resizing it to fit wasn’t a problem. I used #162707 as a base color.

27

You might be thinking the gradient I applied doesn’t seem to fit the lighting. And you’re right, it doesn’t, but I fixed that later with a shadow layer. Goes to show that a mistake isn’t a mistake if you fix it later. I should join a tautology group.

28

Crikey! It’s a croc’s skin. I’m not sure if the hat in the original poster is croc skin, it just really looked like it.

29

We’ll just set the croc skin layer to Overlay and lower the opacity to 50%.

30

I drew a very fine, blurred out white layer to the top and bottom of the hat. This gives depth and better defines our hat as more than just a flatlander.

31

The holes in the hat was a really fun layer to work on. Just pick up a black 4px hard brush and draw to your heart’s content. After I was done drawing, I added a hard white drop shadow at about 135 degrees to the layer and set the shadow to Overlay.

32

With the same lovable Pen tool I drew a general shape of a band around the hat and then added a horizontal gradient to it.

33

Directly above this came the Vintage Fabric stock photo set on Color Burn. This gave the band a natural, albeit subtle, texture that really lent to the realism of the design.

34

Using a light dark  brush set to Color Burn I drew a few lines where I imagined the creases in the fabric would be.

35

Using the same principle I added highlights and some more shadows to the creases.

36

And after some more playing around with shadows and highlights, both set on Overlay, the band is finished.

37

I did say I was going to fix the whole wrong lighting issue for the hat, didn’t I? It’s the same idea as in the previous step, only applied to the hat this time, not the band.

38

Now it’s time to get to the suit. I split the stock photo into three parts for easier transformations. This way, the parts fit with the boy’s body.

39

And then I played around adding shadows over the shoulders and colorized the shirt.

40

The bow is pretty straight forward. I cut it out using a color based selection and shortened the top end to look more like the one in the original poster.

41

After colorizing the bow with a dark blue, I added a bunch of layers set on Color Dodge and Overlay and just went nuts with colors. Blues, yellow, oranges, whatever you like, throw it in there, it’ll work out fine.

The hair

42

Now we’re getting into the most fun part of the design. Which, incidentally, is also the most time consuming and stressing: hair creation. We could steal hair from some stock photo, but what would be the point. We wouldn’t be creating anything ourselves. Start out with large, 80% opacity, strokes and define the basic shape of the hair and then we’ll move on to more and more detail.

43

After each red hair layer, I added another layer with dark strokes. I wish I had a smart answer as to why that should be so, but I don’t. I just find that this way the result is more natural.

44

And after a few hours of doing this hair starts to emerge. It may not be fashion model style hair, but it’s as mad as they get.

Fixes

45

I then proceeded to add a big shadow in the back of the character. This way it looks more like he’s in front of a wall and not just the result of a bad copy/paste.

And after a few fixes, mostly minor errors and details and a bit of basic type, we have our poster.

Some of you may criticize that this is not the shortest tutorial you’ve ever seen. I wish I could’ve shortened it more but not without sacrificing quality. And, after all, is this not the sickest hatter you’ve ever seen?

KISE = Keep It Simple, Everyone

While I understand and support the use of KISS for mainstream news media, where the target is pretty much everyone alive because of the general subjects they approach, when it comes to specific circles, to specialized fields, like design blogs and blogzines, KISS fails in ways I find hard to describe without getting pumped veins on my temples. How can we, as readers, take anything serious when we’re, essentially, being talked down upon? You would not take this kind of language if you were to talk face to face with someone, so why put up with it when it comes to the written word? Fine, feed my information as to a baby when I read the news, it’s for everyone, but don’t take that same language, the same pathetically recycled phrasings and use them when I’m reading about the latest developments on HTML5, for example.

Shoot the target

Let’s get back into our little design universe. First off, I’m an avid supporter for targeting your audience. With this very blog, I’ve tried to single out a certain type of individual to which I wish to address. I use a certain type of language, I stress certain words, I understand the intellectual level to which I want to address. And the key word for me here is WANT. It’s what I want to target, to whom I’m trying to talk to. Far too often it becomes apparent that a blog is created without having this idea in mind and the rational and voluntary targeting of audience becomes more of a “If you build it, they will come”. And yes, they come, and by the thousands, no less, but their value as readers is close to 0.

Finding Niche

It’s not about finding a niche, but more about finding your readers. The reason I dismiss the KISS attitude it simple: I WANT a certain type of reader and I don’t care about the people that don’t fall within the bell curve that my targeting describes. Sure, users that come for the sake of the ride pump up my page views, but they in no way help my blog grow.  For those that are now wondering if you fall within my target audience, here’s my creed and my directive:

My reader reads, he doesn’t skim. My reader writes, he doesn’t copy. My reader says I’m wrong, he doesn’t clap. My reader laughs and thinks. My reader doesn’t say First!

Alright, Mr. Smarty Pants

Sure, by now you’re positive I’m an idealistic numb nuts that doesn’t understand the real world. I do, actually, though that’s not really an argument for my cause. What is an argument is the fact that I don’t care about the profit.  I don’t care about the thousands and thousands of users that come strolling onto one of my articles, hang around for less than 30 seconds and then leave just as brain dead as they were when they first arrived. I care about the few readers that stay and digest my thoughts and ideas, that challenge me to do a better job, that contact me through whatever source they find convenient, that engage in conversation.

To me, conversation with my users is my profit. The fact that I know I’ve reached someone and I’ve made that person think twice about something, that is my win. And I don’t care about disagreeing with me, because that’s not my point, my point is to trigger thought and analysis. So what that you think one of my ideas is crap! Congratulations, half my mission is accomplished, the other half being to have you argument your position. And I do this through language first.

I don’t use easy words sometimes, I don’t explain everything about everything not because I’m a pompous, lazy bastard, but because I want an audience that knows this stuff already. I like novices, don’t get me wrong, we all were novices at one point, but it’s just not my target audience. I’m sarcastic because people with a sense of humor are more prone to open discussion. I don’t use toolbar screenshots in my tutorials because I believe in design without the restrain of a specific software.

So what’s your point

This is my corner of the web and I’ll build it as I see fit, for whom I see fit.

My point is to target your audience based on what you want. Don’t copy someone else, don’t talk to everyone, no one will listen. You’ll soon find out you don’t have the time, energy and patience to deal with users that do not interest your blog/magazine/newspaper’s needs. While we do write for the masses, that doesn’t mean the masses are right.

KIPS

I’d like to postulate that Sickdesigner.com is built not on KISS but on KIPS. KIPS = Keep It Personal & Smart. Some of you may disagree, and that’s nothing but good news to me, because that means there might be discussions about this, and even a heated debate maybe.

I’m not here to convince you to adopt the KIPS attitude, but to consider changing your attitude and your writing philosophy into something that fits your model. If you don’t have a model of your own, build one. Aimlessly writing a design blog is a waste both for your own time and the time of the community. And I’m not offering the key to success, either. Sickdesigner.com isn’t exactly the most successful blog out there. But you know what? I don’t care. Really, I don’t. Because to me, to Sickdesigner.com, the hierarchy stands:

1. The User
2. The Content
3. The Profit

Well, there you go, this is my view on my readers, the people I’ve come to hold dear and count on passing ideas back and forth, the people that drive me to write crazier, sicker articles every time. A huge thank you to all those that get involved, that take the time to say “Radu, you’re wrong” or “Radu, you’re right” and that make doing this a real and unadulterated pleasure.

01

Yes, I used a screenshot from the Trololo video and no, this is not another Trololo joke! This is an actual tutorial. We all get inspiration from strange sources sometimes and for me Trololo has done the trick. Also, for this technique I desaturated the image, in order focus just on the shades. This is taken directly from the popular video and, other than desaturating, is unaltered in any way.

02

Normally I’d save the grand and awesome technique for last, but it’s kind of hard to do that with this one, so here it is: turn down the opacity of the picture to about 10%, just like above. Notice how only the key features of Eduard Khil’s face are noticeable? Well, that’s what we need and only this to achieve our effect. It sounded a whole lot more dramatic in my head, but let’s keep going.

03

Pick up our trusty Pen tool and start drawing the shapes that are most obvious to you. You’ll squint and scratch your head in the process but it’s actually not that hard.
Wait, you might ask, this is the great technique? Yep. You see, the point of the Threshold effect was to isolate only the most essential features of a picture. But that it didn’t always manage to achieve it 100%. By lowering the opacity of the picture you’re forcing your eyes and brain to see and perceive only the most basic of features, which are exactly the ones you’ll be tracing with the Pen tool. Makes sense now, doesn’t it?

04

We’re obviously not superheroes and our eyes can only take so long of this abuse, so don’t try to hard. Instead, after you feel comfortable having done the trace, bring the image back to 100% opacity and tweak the shape’s anchor points. This is one of the reasons why using non-destructive tools, such as the Pen tool is very handy.

05

I did mention the technique is called “Manual shaded threshold”, right? Well, now comes the shaded part of the equation. With the image still at 100%, trace another shape with your Pen tool. This new shape should be traced around the first shape. Try to go more around the eyes, as they are the deepest element of the face and keep varying the shape itself; it looks boring otherwise.

06

Let’s get rid of the original picture now. We can still tweak the shaded shapes to look more natural and less jagged.

07

Now, draw a large shape behind the two we’ve already made that’s lighter than the black we used for the main features but still a bit lighter than the shaded shape. I’ve also created a few white shapes behind our first one to make the eyes and teeth.

08

My picture is 680 x 680 pixels so with a bit of math it was easy to create a grid. My blocks are 200 x 200 pixels and there’s a 40 pixel margin from the edge of the picture.

09

Let’s resize our head to fit within the first block.

10

And duplicate it 8 times in each of the other block. Dang, that’s a lot of Russian.

11

Here’s where the fun starts. One of the coolest advantages of working non-destructively is the ability to change and modify color on the fly. So play around with colors. I tried to not steer too much off the pop art style of one of Andy Warhol’s masterpieces. For this part I only affected the skin shape. The main features will remain black throughout this tutorial, but you can play with that too and still have a cool effect.

12

Now comes the shaded layer’s turn. Values here have, generally, two types of colors: the first are neighboring (like the first one)  or inverted like the fuchsia one (that would be the one from the last row, second column).

13

Now let’s make a square 200 x 200 pixels shape behind all the faces for each of the grid spaces, that’s 9 total. For now I just made the first one.

14

And here are the rest of them. The colors I chose are very pastel, so as not to detract from the faces. The Hue is basically the invert of the skin layer. So for the first block, for example, the skin is red, so the square behind is green, which is it’s negative.

15

The squares are a nice touch but the fact that they’re touching is a bit weird and reminds me of a checker board. So I decreased their width and height by 10 pixels each. That’s 10 pixels off the top, 10 pixels off the bottom etc.

16

Alright, now we’re getting somewhere!

17

Now let’s give it a worn look, like any respectable pop art design should. I used this picture set on Pin Light blending and on 30% opacity, but feel free to experiment, as the opportunities are literally almost endless. And just so you can better see the difference between where we started and where we ended up, take a look at the next image.

Pretty cool, ha? Considering that we started with a pixelated 1960s video screenshot I like to think the result is pretty awesome. What, I can’t toot my own horn a bit?

This design is so easy to work with and offers so much possibilities that I felt I had to share a couple of variations on this theme:

And now, my friends, I leave you with the wonder and marvel of the master himself, Eduard Khil. Tell it how it is Eduard:

Hopefully you learned something from this little tutorial/technique and didn’t just run through it mindlessly. Not that any of you would, I’m sure. Ahem… On the other hand, if you’re reading this, then you definitely read at least half of the stuff in this post, so I guess we’re even. See you next time, everyone!

Here a building, there a building … oh, it’s a city

Most of us live in urban areas. That’s pretty much a given. As such, some of the most common things around us are buildings. Now, buildings offer great design inspiration without a lot of work (or even movement for those of you that are borderline agoraphobic). From uber clean modern buildings, to old, decrepit shacks, each city has its wide range of dwellings, just for your taking. So, what do these mighty monoliths have to offer of design value?

You could just take a picture of a building you like, go home, sample it and use it either as a pattern or as regular texture in your next design, and that’s just fine, but you’d have learned nothing from the experience. When at location, take the time to really look at the building. Look at it’s walls, how the light falls, how the texture creates shadows, how colors blend and twist etc.
Let’s not fidget about, though, and get a proper example:

What can we say about this wall? It’s…brown and green? It’s made of wood? Yeah, sure, but look deeper than that. It’s rough, it’s not uniform, it has different colors and shades and bumps, cracks, folds, crevasses, the list can go on and on. So here’s a specific for ya: I’ve highlighted a section of the photo, to illustrate my example. Notice how, where paint peels off, the part that’s higher is lighter (the Highlight arrow) and how immediately under this highlight there’s a pretty strong shadow. Also, under the green paint, the wood isn’t uniform either, the lower part of the plank is grayer. You see, all these things can help you achieve an effect in your design. If you want to add depth to an element, now you have a way of doing so that’s not only cool and easy to remember, but it also appears in nature. So I’ve taken this information and put together a menu bar:

The menu bar design doesn’t just use the elements we’ve taken from the real life wall, it also takes on a life and feeling of it’s own. It stops being a dirty, grungy, distressed wall and looks like something one could easily use in a design related to gardening, maybe. That’s how you sample real life and turn it digital. But wait, there’s more!

Finding inspiration in crap

But let’s not get stuck on buildings. Things all around us have unlimited potential. Even things you’d think are total crap. Like a big pile of used tires, for example.

As you can see, this isn’t exactly the best looking pile of tires in the world, but that’s good. It’s something anyone is likely to see at one point or another, regardless where you live. Obviously, the lesson here is rubber as a material. How light falls on it, how do the grooves in the tires cast shadows and how does the fact that they’re round affect color and light. It’s all about taking a virtual step back in your own head and trying to analyze the material, the shape, the texture, basically breaking down an object into individual components and extrapolating information. It’s actually a lot easier than I make it sound. Anyone can do it. So let’s see a practical example of how extrapolating information from a big pile of crappy tires can translate into design:

Applying physical properties that you notice on the real object to a design element is one of the skills I think are most important to the artistic side of design. How fitting would this bar be in the header of a garage’s website. And the fact that you’re not just slapping textures mindlessly also means you have control and ease, in case your client should suddenly decide he/she likes four grooves instead of two, or something similar.

Analyzing and understanding not just the way things look, but why, can help your design skills grow immensely.

Kiss my shiny metal … car

The second most common things around us are, probably, cars. While cars themselves are a serious source of inspiration, we’re focusing on what they’re made of, which is mostly metal.

Again, this is just a normal scene you can find anywhere around you. Metal is, still, to me, one of the most interesting and hard to understand materials, in terms of the way light hits it. At certain angles it catches spot highlights and looks really shiny, but change the light angle even a bit and you can get either a flat gloss or color dispersion. It’s crazy! Oh, and don’t even get me started on different types of metal!

This last picture is up to you to figure out. Take a step back, squint your eyes, sing Celine Dion (what? it might just work). Whatever gets you there.

I deliberately selected only pictures that are not of exceptional quality and that do not take great photographic skill to better illustrate how all of these techniques can be learned by anyone. It doesn’t take talent, not even a lot of work, just a bit of focus and a desire to better understand the world around you and how it works. It’s all about the how.

As promised, here are some of the best articles from around the interwebs on the subject of inspiration from reality:

Offline Inspiration for Web Designers by Mike Kus
10 Unusual Places to Get Design Inspiration by Kayla Knight
Offline Inspiration: How To Find It and Get The Most Out Of It by Kayla Knight

I firmly believe that having a method to how you’re being inspired and influenced professionally is a cornerstone in a designer’s career. So drop a line below describing how you manage to squeeze inspiration from reality. How do YOU bend reality to your needs?

Those of us who deliberately work 20 hour days, 7 days a week, are slowly, but surely, destroying our bodies from the inside out. There’s no easy way to put this. Prolonged sleep deprivation is like smoking 3 packs a day. Couple this with more than 16 of those hours spent at a desk, in front of a monitor and the future doesn’t look so bright for us web folk.

We’re referring to voluntary lack of sleep, not clinical insomnia, which is another bowl of cereal altogether. If you suspect you’re suffering from clinical insomnia, I suggest checking out the wiki on this condition and, for your own sake, see a physician as soon as possible.

A lot of people don’t realize that sleep is a state in which the body also goes into maintenance mode, not just relax mode. During sleep our bodies undergo a series of essential changes: your brain consolidates data that’s been buffered into your memory during the day, your muscles relax and get toned after being worked up all day long (which doesn’t necessarily mean exercising), even your hair and nails grow more during sleep than when you’re awake.

El braino

But probably the most important part of sleep is the fact that your brain is able to take a brake, fix any problems that might have occurred during the wake state and even regenerate parts of itself. It’s as essential to life as eating and breathing. And without sleep or, with very little of it, our brains get some serious errors which can lead to long term effects on our lives.
Sleep deprivation, as it’s technically known, takes a great toll on the mind: in such a state the temporal lobes, responsible with perception, memory and speech basically pass part of their functions on to the parietal lobes (top of your head) of your brain.  As a result, someone that is sleep deprived may suffer lack of concentration, confusion, slurred speech, irritability and memory lapses.

On the other hand, the pre frontal cortex of your brain acts funny when your body is deprived of sleep: it goes into overdrive as a compensatory maneuver. The problem is that after a long period of deprivation, the brain simply can’t handle it anymore and parts of this area of your brain, as well as others can become damaged, leading to psychosis and bipolar disorders. Eventually, your brain becomes incapable of putting an emotional event into perspective. It’s not a permanent state of being nutters, but it still has great impact on your everyday life, not to mention work. Imagine designing a website for an awards ceremony while you think little tiny green men want to come steal your tablet stylus (just an example; I’d like to apologize to any little green men reading this that felt offended).

Microsleep

Fortunately, our brains are smarter than we are and when too long a time has passed without proper sleep, something called microsleep happens. For 30-60 seconds, the brain sends a shut down signal to your body and you fall asleep. This isn’t something one can control or avoid, it’s a fail safe to stop you from killing yourself, but it doesn’t mean that not getting enough sleep won’t, if you keep it up too long, ultimately kill you. What, you thought at one point you’d just shut down and sleep for two days and then everything is back to normal? Sorry to disappoint.

It’s a heavy problem

Sleep deprivation has many weird side effects, like the way brain functions get switched around, but perhaps one of the most variable effects is weight gain/loss. In some people, sleep deprivation causes severe weight loss. In others, weight gain. It’s, most likely, a conjuncture of factors that determine this outcome, like the way your circadian cycles (day/night) are disrupted, what kind of food you eat, when you eat it, if you just spend your time fully at a desk or also go out etc. And before anyone thinks about it, NO – you are not the exception that is going to have neither gain nor loss in their weight.

Aww, look at the kitty…

Some argue that the most important side effect of sleep deprivation is attention deficit

Some argue that the most important side effect of sleep deprivation is attention deficit. In the case of us web folk, attention lapses are not a matter of life and death, but they could cost us our jobs or projects. Forgetting to design a website’s footer or placing a different logo than the client’s or querying the wrong database table could even result in immediate termination of said project. Not to mention that sleep deprivation can actually decrease your efficiency. Work better, not more should be a directive I think everyone of us would be better off employing.

Killing me softly

Of course, there is a psychological layer to voluntary sleep deprivation. For people who work in web design/development, most of the time the motivation is making money/building my career/getting ahead/etc. While those are very good reasons to work more and better, it doesn’t mean you have to destroy yourself trying to get there. Those extra 3 hours of “work” are far better spent getting from 4 hours sleep to 7 hours. Just think about this, the next time you want to pull an all-nighter: Sleep deprivation can be used as an interrogation technique. Yeah, like torture. Would you, voluntarily, get on rack and yell “Pull!”? No, you wouldn’t. Well, some would, but that’s beside the point.
I’d normally end this article with some sort of advice to help you out but I really have only one: just go to sleep. Sleep deprivation isn’t a drug, so just stop killing yourself. It really isn’t worth it just for a few hours. Now stop reading this at 2 in the morning and go to sleep. Nighty night, everyone!

While the future of the Giant Panda is, to this day, uncertain, this wonderful species has become a symbol for all endangered species, mostly through the efforts of the WWF, who wear the panda as their logo ever since they were founded, in 1961. Thus, we consider this tutorial our statement for all animals facing extinction because of reasons outside the realm of natural selection.

On with the tutorial. Apart from a (really faded out) texture we’re going to apply at the end, this poster’s all about making things yourself. It’s become somewhat of a trend that I’ve noticed around the web to use an extreme amount of stock photography in tutorials. Don’t get me wrong, that’s not necessarily a bad thing. But if you’re going down that road, at least have the courtesy to call it a collage, not graphic design. But I digress; perhaps this should become the subject of a new Grinder post.

01

Let’s start with the panda itself. It’s not about being perfect, just try drawing what seems to you like the face of a panda. That’s what I did. I suggest using the Pen tool over a Brush, since you can modify the shape more easily in case you’re not satisfied. Make sure to draw assuming where the ears are going to go. We’re trying to make a panda’s face, not Bugs Bunny.

02

And here come the ears. Don’t worry about colors at this point, getting the shape right is key now. Fortunately panda ears aren’t that pretentious. Strangely enough, mine look a bit like a cow’s, don’t you think?

03

Keep in mind that panda eyes are droopy and a bit Rorschach-ish. Like me, you’re probably not going to draw them (with the Pen tool again) spot on right away. Tip: draw the eyes and modify their shape until hey look right to you and then position them on the face. This type of “concentrate small first, large second” approach is handy in many cases where you’re working with subjects that are not primitive shapes (rectangles, squares, triangles, circles, etc.).

04

Simple shapes can carry a lot of information and emotion as long as you know what your goal is.

Once the eyes are set, the nose and mouth follow more easily, because you’re constrained by the shape of the face and the position of the eyes.  The way I see it, the distance between the nose and the mouth is about 1/7th of the distance between the nose and the top part of the eyes, so that’s a handy little scale you can use. Also, the nose should be about as wide as the height of the eyes.

05

Ah, but here we begin to set a tone to our poster. I was going for a “mad and sad” kind of look and I think I’ve pretty much got it. What’s that? Why, you so candidly ask? How would you feel if all the people you know and love were killed and there was the very real danger that your entire species would be forever wiped out? Mad and sad, my point exactly.

As you can see from my example, you don’t need to over do the eyes. Simple shapes can carry a lot of information and emotion as long as you know what your goal is.

Also, I added a gradient to the ears to give off a sense of depth, that the ears are further back than the front of the face. I could have spent more time brushing or adding detail but they are not a focal point in this poster, the expression of the panda is.

06

Still, it’s apparent that the message I’m trying to convey here wasn’t so clear. So just another simple shape, nothing fancy, a tipped brow and the mood changes to an inquisitive one. The point is to question what’s going on and why. To raise a brow denotes introspection and demands a closer look at the situation. There are a myriad of expressions you can play with to give life and meaning to your design, because design for design’s sake is merely an exercise and not proper design.

07

Now, the point is that this has to instantly be recognizable as a panda, and apart from the black eye patches, pandas are known for being furry. Really furry. So, here’s how you achieve that fur effect: take a standard Rounded Bristle brush from your software of choice, they all have something like that. You need to make the size pretty small, about 10px in width and lower the opacity to about 20% at first. Use white for color and carefully trace around the shape of the face in one continuous stroke. Do this multiple times, but varying the way you follow the line of the face and changing the opacity every time (but keep it lower than 50%, otherwise you’d kill the effect). Essentially, you’re defining the actual shape of the panda’s face and creating the idea of fur, all the while keeping the focus on the panda’s expression, which, as we talked about earlier, is the key point in this poster.

08

To draw even more attention to the facial expression, I’ve added some fur (using the same technique as above) around the eyes, using black this time.

09

Let’s add some type at this point, something punchy, both in meaning and shape. I used Urban Sketch (#91857c) for “Save the” and white Arial for the rest. Keep the tracking of the type at low levels (around -100) to convey that punchy feel. In no way are we threatening the people that remain oblivious to the whole panda issue, the message is a wake up call and should, generally, trigger some sort of emotional response.

10

I’m a big fan of splatter brushes and they’re pretty much the only ones I use, other than the default ones. I like to make my own shapes using the Pen tool and raster masks and not rely on ready made brushes but I must admit there are times when brushes are quite inevitable. And blood is one of those times. I used the Dried Blood Splatter brushes and a range of colors: #f80b16, #8f061c, #cf0428 and #ca0427. Be sure to put the blood layer above all the other layers.

11

Again, using the Dried Blood Spatter brushes, I added a single dripping white line from the “S”. This way, there’s a clear indication of a spatial order between the text (in the back) and the blood (in front). It also sends the message that the pandas are the ones that are bleeding.

12

Remember we were talking about stock photography earlier. Well, here’s where that element comes in. I’ve used this nice fern photo, courtesy of Mayang’s Free Textures library. Together with SXC, Mayang’s is the place I usually go to when looking for textures on this and that. Highly recommended.

You’re probably wondering why you can’t really see the texture in the picture above. That’s because I set it to Hard Light blending, toned down the opacity to 5%, applied a Color Overlay of #1d455c set on Color blending and a black, very soft Inner Glow. It’s very hard to notice at this point, but it will become a lot clearer in the next step. The fern layer should stay directly above the background, and below everything else.

13

Make a new raster layer above the ferns and take a really huge white soft brush, like 500px or something like that, and click about 5 times centering the brush behind the panda’s head. You should see a really big, soft, white glow. Good. Now set it to Soft Light blending. This should bring out details in the fern just around the panda’s head, which is another good way of setting some depth to our composition. If you’d like to make the ferns more visible, just increase the fern layer’s opacity (in the last step we set that to 5%).

14

We could just leave things as they are, it’s looking pretty sweet already, but I a lot of times I  find myself saying that there’s something missing. And, usually, that something is a Curves layer. Feel free to experiment and see what kind of extra, subtle over mood you can throw on your poster.

Thanks for sticking all the way to the end of the tutorial, and I hope you learned a little something from my ramblings, and, perhaps, from the pandas as well.