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.

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!

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!

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?

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!

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.

Unless you’re at a fancy dinner party with your best friends from the gentlemen’s club smoking 15 year old scotch damped cigars and being served Porto by an Oxford graduate turned butler.
Wow! How many people did I offend with that sentence? Let’s see now…oh, so both of you! Very well then, let’s carry on with this gig.

01

I used a background I had lying around as a backdrop. If you like it and think that you’d want to know how I made it leave a comment and I’ll consider it.

02

Those of you familiar with the 3D modeling world realize that I’m talking about Lathe Modeling.

This is one of those techniques that rubbed off on me from doing 3D work. Those of you familiar with the 3D modeling world realize that I’m talking about Lathe Modeling. It’s really a simple concept: if the object you’re trying to create is symmetric, just do one half then duplicate and flip horizontally. This is one time when being lazy and doing half the work really pays off.

03

Glass is a funny material. It doesn’t really have a color of it’s own [of course, except for tinted glass] but it does refract light within itself a lot. Luckily, my wine bottle is not empty so the glass will take a desaturated red tint; although the background is highly saturated, because of said light refraction and the nature of wine as a material, the bottle appears desaturated. I used a Radial gradient from gray-ish red to dark red for the body of the bottle.

04

Light also likes to bend around a bottle so I added a medium lit desaturated red Inner Shadow to the body.

05

However flat and perfect the glass of the bottle may be, the liquid inside it will undoubtedly create ripples. This is probably the one time I found a Satin effect purposeful. Be careful not to over do it. Subtle, as always, is key.

06

The bottle was looking rather light and not blending nicely with the background so I cheated a bit. I duplicated the bottle, changed it to an opacity of about 20% and made it a flat black.

07

Time to move on to the neck of the bottle. I drew it in a general shape because it really doesn’t matter that much as it will be covered up by the plastic wrapper. I needed this in order to make the wrapper proportional and correct.

08

And here we are with the wrapper. I used the same technique with the Satin effect except I made it darker than the bottle [obviously plastic is less reflexive as glass].

09

Time to add some light bling to the bottle with two white rounded rectangles.

10

Which I then faded out with a layer mask and changed their opacity to 10%.

11

Ah, but the bling is not yet over. For the purpose of a sparkly design I let loose my inner fizziness and drew a few pink dots with sizes varying from 1px-3px. I think it really adds a nice feel to the design, without being too corny or out of place. And no, you can’t argue with me on that one.

12

I just realized I left the white neck of the bottle visible and that white stood out like a Java programmer at a design conference. Changed it to desaturated medium red.

13

You don’t need to be overly obvious in your choices in order to get your point through.

Also I felt it would be appropriate to make a difference between the liquid and the bottle, around the neck. Nothing spectacular, it’s a highlight much like the rounded rectangles on the bottle and another rectangle behind it. This is one to remember: you don’t need to be overly obvious in your choices in order to get your point through.

14

As always I forget about shadows right until the very end when I keep asking myself “what the heck’s missing?”. A simple blurred ellipse will do the trick, as it has many times in the past.

And, of course, some lovely, simple and elegant type to put it all into perspective.

Not a lot of things to take home from this tutorial, I know, but sometimes it’s not the volume of information that matters, but how important it is. Until I again dump a huge payload of insanity on them unsuspecting interwebs, I bit thee fare well, mes amis!
Seriously speaking I really do not encourage drinking alcohol or smoking. They’re bad habits that destroy your body and considerably decrease your performance, both intellectually and physically.

First off we have to gather our project assets, but that means one must clearly have the idea of the graphic set into one’s mind. For this tutorial I went for the popular “person in the air with stuff around it” type of design… with a twist. But more on that at the end of the tutorial. So I went to the good ol’ boys of SXC which have been life savers on countless times for me and I imagine plenty of other designers.

These are the 6 picture I gathered for my project. When it comes to asset management you need to keep a few, very important things, in mind. This is a most crucial step in the life of the project. Bad choices here will lead to wasted time, money, resources, brain cells and perhaps high blood pressure for those of you that think coffee is a food group.

01 – 02 – 03 – 04 – 05 – 06

When choosing your assets focus not on the technical features of the picture, like perspective and depth and color balance, things which can later be edited but rather on the quality of the picture and the feelings it expresses, how well it fits into your scenario. These should be the only two parameters in your search. Anything else is editable.

Here’s a real example: the girl I chose. My search query was “girl jumping”. Go ahead, search it on SXC. You’ll see there are plenty of good choices but my vision implied joy, happiness. Most were eliminated because they expressed freedom more than joy. Also I ended up with my picture because I like the fact that you can’t see her face. Most of you would disagree because faces are the part of the human body that express the most emotion. And I agree, but the hair on her face, caused by the speed of the fall (and probably thin hair strands) transmitted joy, in my mind, more than any of the other possible choices.

01

First things first: the background. The picture I found had some lens distortion problems, even though it’s a 3d render and not a real room. The vertical perspective was a little high so I brought it to normal. I left the slight inverse fisheye effect, visible where the wall meets the floor, because it will later give depth to the design, a problem often found in photo manipulations. And, trust me, if you can get depth from something in your design, be it the lens perspective, depth of field, lots of objects stacked etc. take it! it’s scarce and precious and will elevate the design 3 levels above average.

02

But that plant stand really screws things up, doesn’t it? It’s slanted and looks really, really fake. So I cloned some of the background to cover it. This wasn’t as easy as it seems because of the progressive angle of the wallpaper.

03

As you can see it’s showing what seem like stains. But that’s alright, those areas will be barely visible after the final color treatments.

04

Time for the next asset: the girl. I placed her to seem as if she has just jumped from the couch. Also, pay a lot of attention to size here. You need to visualize how big the girl would be in comparison with the couch if she were standing next to it and resize her accordingly. I also tried to place her at a size that didn’t seem impossible. to achieve…couches must have some sort of elastic limit, right?

05

Stefan’s sharpen method: Take one non-sharp layer, duplicate it, set it to blend on Vivid Light, turn the opacity down to 50% and then apply a High Pass filter and adjust according to taste. Works every time. Thanks, Stefan!

Here I used Stefan of Photo-D-Mention sharpen method. I’m not sure he made it up or he saw it somewhere but hey, he told me about it so the kudos go to him. It’s simple and effective, just the way I like it. And it goes like this:

06

Next please! Those would be the fireworks from asset 4. I placed these first because they are fewer and I could see whether they would be enough or if more was actually more. Set to blend to Soft Light and mask out the edges with a very very soft brush.

07

More was better. It’s the same technique as with the previous fireworks. Only these are bigger. And on top of the other ones.

08

Ok, now grab your trusty large soft brush [of doom] and start drawing behind the girl with some really saturated yellow on one layer and white on another layer above this one. Then blur generously and hello mr. Glow.

09

I used soft brushes and hexagonal shapes that were then blurred to recreate what would seem like a Bokeh effect. I did this to make a sort of transition from the bottom of the image to the top. It’s really a very old technique that comes from painting and it’s meant to catch the viewers’ attention to a certain area of the image.

10

I’ve said it before, I’ll say it again: shadows and lights make or break a design more than anything else.

It’s only natural that the couch would receive shadow coming from the girl, considering that the light is coming from above. This is one of those things you need to start thinking about when you attempt a photo manipulation. I’ve said it before, I’ll say it again: shadows and lights make or break a design more than anything else.

11

I know, sunbursts have been done to death and back, but just like I did for my Nifty Jellyfish tutorial, I like to be a bit off so I drew a few of them just above the Bokeh layer. The color is a pale blue set to blend on Color Burn.

12

Above the sunburst I used a custom shape set called Arabeski Shapes set to Overlay. Sadly, I noticed it’s not available for download anymore. They were created by Deviant Art user Limoli, so kudos to her!

13

In order to further portray the idea of joy I added some nice butterflies using Emma Alvarez’ brush set. I didn’t over do it with the butterflies because the scene might have become too crowded which is quite a pain to look at, you can imagine.

14

The edges of the girl were really starting to annoy me now. Remember what I said about shadows and lights? Well light tends to diffuse, to scatter and affect the color of things around it function of it’s wavelength. So why isn’t my girl getting any of this light stuff on her? She is now. Make a new layer a clipping mask of the girl layer and using a soft brush with max 10% opacity go around her edges. Paint more towards the edge of the girl and less towards the center. Also, keep the brush off areas that would not normally have heavy light coloring like the middle of the back of her heels or her lower belly.

15

Sometimes it takes a little luck with these things [Photo manipulations] and also some looking for multiple possible answers to an issue.

Alright, now it’s time to move to our croc. Lovely little thing, isn’t she? I had to rotate her [for the purposes of this tutorial our croc is a she] and mask out the rest of the image before deciding where exactly on the couch she would fit. Also it took some cloning as well because there was some vegetation on her. Luckily crocodiles are very…patterned? Anyway, her tail was sticking upward which might have been a problem but I got lucky and saw an opportunity to place her tail on the couch arm rest. Sometimes it takes a little luck with these things and also some looking for multiple possible answers to an issue and then choosing the most natural and best looking one. Usually they’re the same.

16

Obviously the croc was going to leave a shadow on the couch. The way I made it was I drew with a 100% opacity black brush the rough idea of the shadow and then I Motion Blurred it horizontally with about 60px. That’s going to make the shadow look sharp and elongated, so I Gaussian Blurred it with about 10px to what you see now. Always keep in mind the direction of the light. It’s not complicated, it just requires some concentration and insight.

17

To further blend the croc in the scene I added a few blending options: an Inner Shadow which is actually saturated light yellow set to Color Dodge and 70 degrees [because it's tail is more to the back of the couch than the head], a desaturated greenish Color Overlay set to Color and a low yellow to top white Gradient Overlay set to multiply to account for diffuse light.

18

Now it’s time for some finesse work. I realized that the croc wasn’t blending nicely into the scene and that’s because it was only casting shadows [on the couch] but it wasn’t receiving them naturally [to be read at all]. A new Clipping Mask on the croc layer on which I painted with a soft black brush did the trick. You can notice the new shadows clearer on the belly next to the back leg, under the mouth [chin?] but also all along the belly line in different degrees.

19

This may not be all that noticeable but it’s always good to pay close attention to details. The croc’s expression, so to say, was a bit blant. So I spruced him up a bit with a twinkle in his eye and using the Burn tool I accentuated his teeth by brushing over the dark parts in between them.

20

We’re almost there now. It’s time for some hippy happy hoppy typography in Folks Shades underneath which I added a new layer and painted it with white for legibility and better separation from the background.

21

It’s time now for out last asset. The tag. I masked out the rest of the image and resized and rotated to stick on the croc’s finger. She’s not dead, just…tagged?

22

Of course this needs to be blended too so again with a soft black brush I painted the shadow underneath the tag layer. Here’s a slight detail some of you might miss: the third finger seamed above the tag which meant it should leave a shadow. Pay close attention to the little things, but only after you’ve dealt with the big ones.

23

Just some text on the tag and we’re almost done. The text reads “Joy – the croc”, by the way.

Click the picture to enlarge it.

Quite a bit of change here, right? This is the Color Treatment process I was talking about. It’s fairly easy as long as you work non destructive and is the final step in any self respecting photo manipulation. It’s easy to understand why too: most projects require more outside assets than this tutorial so you need to somehow bring them all to a common denominator. Sure, blending and shadows and highlights etc. help but it’s this final step that really seals it.

I used a black Color Fill at 50% opacity set to Overlay [masked out] to create the vignette at the bottom, a Levels Adjustment to tighten the contrast and the most important part: a Curves Adjustment. There’s really no point in giving you my settings because they are not universal. Any picture can have any setting you wish, you’re not restricted by anything although I do suggest using the it subtly. Harsh color curves mean you will lose some details, maybe burn your image too much and all sorts of other nasty plagues I’m sure most of you have seen around.

Well, that’s that from me. I hope you liked this tutorial [and maybe laughed a bit at the silly Joy pun?]. I’ll be seeing you next time when I drop another payload of insanity on the ever so unsuspecting interwebs.

To serif or to sans-serif?

THAT IS THE…well it’s not really a question. On the web or screen in general, a sans-serif font is preferred for large bodies of text because they render nicely even at small sizes whereas serifed fonts work well on headings, subtitles, labels and generally larger text. Some of you may be here looking for a question like “Tell me, oh great and wise designer” – that would be me – “what is the name of the best font I should use?” and while I am inclined to spit out my personal favorites it wouldn’t be all that fair. It really doesn’t matter what the name of the font is as long as you know what it was meant to do. There are a ton of places to read about font categories like serif and sans-serif, blackletter, script etc. but personally I learned from DAFONT. They have a nice categorized list of free font clearly labeled and to me that’s the best place to look. If your project is about a medieval castle then a grungy font is not a good option for any element, but a nice gothic/blackletter font for the headings and a slightly slanted font for the body like Verdana are a marriage made in Switzerland indeed [<-pun on Helvetica btw].

Playing with style

No one designer can truly claim to have a winning combination for a project from the first try. We always, or should at least, play around with new variations, even if just a few notches here and there to see how to best convey the message transmitted by the text. The difference between a text speaking about global warming and another about tectonic plate movement can relate in design terms to the difference between using Helvetica or Garamond for the titles. So play around, click here and there, move knobs and switches but remember to do it in small increments and always keep in mind a goal. Also, always read the text entirely. Even if it’s something you don’t care about. Understanding what it is you’re styling is the most important thing you can do and it will point you in the generally right direction of the design. Even unconsciously.

Don’t sugar coat it for me

When you open up a design software, like Photoshop for example, most people make text that is smoothed. That is the general term when referring to the text Anti-Alias. Photoshop has 4 types of Anti-Alias and they differ in the way they render between themselves and between other software. But what is truly important is that these programs render text differently than web browsers do. Apart from Safari, which has Anti-Alias on by default all other browsers render text without it. So, remember that when making a design for web, text that will be saved as a picture can have Anti-Alias, text that is written in the code of the page, and rendered by the browser, should have an Anti-Alias of None.

Legibility

This one really is THE most important thing to keep in mind and most seasoned designers never make this mistake. Newbies do though. This is why this is still important. Here’s a little sample of what rookies vs. veterans choose in a “most likely” scenario:

There are several things wrong here and they are all related to legibility, although not all to the font-choice. There are 6 problems here. Try to see if you can find them all before reading on. Sort of like a test to yourself, to see how much of a rookie or a veteran you are.

1. Contrast

Most text, on the web as well as on print is to be found on a white background. This is one of those time-tested things that just can’t change because we humans read easier that way. The block on the left is all black which creates a lot of contrast. That is not an issue when it comes to print, but it is one on the web. It’s easy to see why this is problematic when one thinks of the number of LCD monitors owned by computer users. LCD Monitors, especially in the low end often boast contrast rates above 5000:1 which makes looking at such a text a pretty strenuous task. By making the title mid-gray and the subtitle light gray you create a harmony between the black of the body text and the white of the background while still retaining a clear separation between each section.

2. Small Tracking

The horizontal distance between letters in a block of text is called tracking. Here’s my advice, especially for those of you working on the web, maybe starting out with CSS and such: never use anything other than default values for tracking when it comes to a body of text like the “Lorem ipsum…” in the above picture. Ever. While CSS has a selector called letter-spacing it is NOT made to be applied on regular text, but rather on H1 or H2 or other such one-line pieces of text. I can barely read the lorem ipsum in the left side of the picture but you can notice how the default value to the right is nice and easy to read even at more than 3 feet away from the monitor.

3. Large tracking

Take a look at the titles. Notice how the tracking (we talked about this, remember?) on the left side is über-large? This is something I find often in headings of text. For some strange and unexplained to me reason beginners and amateurs always prefer powerfully positive tracking for titles and tracking. It’s quite a discrepancy and another factor in increasing contrast.

4. Bold

The gods of the interwebs have made it possible for us to use <strong> or <b> tags or font-weight: bold for a very good reason: to make something stand out. They didn’t add that the something has to be SHORT! This is again one of the painfully often things one sees on the web: big blocks of 20+ lines of text that has been all bolded. It’s a strain on the normal eye and even if some of you might think: “but I can read bolded text just proper, sir; yes I can!” this, like basically everything else related to design IS NOT ABOUT YOU! I don’t care, your client doesn’t care and most certainly anyone reading that text isn’t going to care that you’re fine and dandy with bolded text. Most people will stop and either navigate away or at best read past the bolded text without even realizing it.

5. Variety

The title and subtitle of any text have a clear purpose. The title hooks the reader and intrigues him, to a certain amount, to read on. The subtitle, if needed, provides extra explanations to said title or makes the reader even more curious and sometimes it is used as a punchline. For example – Title: Robbers clean out bank ; Subtitle: they didn’t know it was a sperm bank. Clever, isn’t it? In light of this, one should clearly separate the two elements mainly by size, if not also by color. I decided to separate them by size, font family and style. The title is Arial and the subtitle is an italic Georgia.

6. Leading

The vertical distance between lines of text is called leading, or line-height in CSS. This is one of those settings that depend directly to the font you are using. For my example I used 12px Arial and a line-height of 18px. This is my general rule for sans-serif fonts like Arial when it comes to line-heights:

This is not a strict rule. It depend on the font family. For Verdana, for example, the rule changes for me to y=x+9 because Verdana has a a small default line-height.

These being said here’s a small graph to help you if you’re just starting out with web based designs. I cannot stress enough how important it is that these are not strict rules. I break them everyday but they stand as a base for my choices when it comes to typography. If you find this helpful, don’t forget to drop a comment.

That’s it from me. Hope you guys picked something up from this rather long rant of mine. Be sure to come back around and see what design nonsense I have dumped lately on the ever so unexpecting internet.

We’ve all seen typographic designs popping up more and more all over the web lately and that really is nothing but good news. I’m sure you’ve ran across some sort of design where text replaced real life objects so I though I’d do a tutorial based on that style. The techniques aren’t hard to master, in fact, it’s quite easy to do. You just need a little patience and a good idea.

This tutorial is actually going to cover more than just the typography of object replacement, we’re also going to go into making a brush territory so let’s just dive right in…pun intented.
I created mine on a 1280×800 px canvas just because that’s the resolution of my laptop.

01

Usually when I’m doing any abstract work I like to have reference pictures of real life objects or events in order to get a feel for what I’m about to do. This time, on the other hand, I decided to replace any reference picture with a guide drawing. It’s good to sometimes exercise one’s drawing skills or lack of in my case. This is what I’ve drawn. Granted, it may not be the next Picasso but at least it gave me a clear idea as to what I’m about to do.

02

First we need to lower the Opacity of the guide Layer.Drawing text is easy but actually writing it with a text tool on a Shape isn’t so we’re going to have to first make all of our Shapes and as you can see it doesn’t have to be perfectly aligned with the guide layer. I did try to match the angles though. Also, seeing as this is a Tornado and not an ice cream cone, the spacing of the Shapes needs to increase more and more from down to up as we’re making them.

03

Ok, no more guide Layer anymore. Now we need to start wrapping text around out Shapes. You can do that by clicking the edge of any Shape with the text tool and then writing without putting any spaces in between the letters. I used Arial Black set to a very small Tracking (-100). And yes, this is one of the most daunting and nerve-wrecking jobs in the world because it can become very crouded very fast and the only thing that can help you align your text properly adding spaces in front of the line. With the Space Bar. Old school baby!

04

Carrying on through. Warm green tea helps to relax, take it from me. You can also play with various sizes for the text. This helps to give our tornado some sort of weird depth. Or perhaps it just looks cool.

05

As you can see, the higher we go on the tornado, the bigger the text, again the depth thingy. Also, for the last line (Webdesigners) I decreased the size of each letter to create sort of the tail of it, or perhaps a wagon being tossed into a barn. You decide.

06

And goodbye to all the Shapes. Well, their visibility at least. Now, we could stop here, because this IS a typographic tornado. But we’re not.

07

Any respectable tornado deserves to be on the Alley. So let’s make our very own Tornado Alley using just a black Shape with a few curved anchor points so it looks like a small hill side. Try not to make it too archy because we’re going to stick some text there later on. I also made it big enough to allow any desktop icons to be clearly visible against an all black background. Remember, it’s actually a wallpaper!

08

Tornadoes are not fun things. So we need a dramatic background, something with color. I chose a blue Radial Gradient having imagined a night time setting for our little tornado encounter. This is one of those steps where you can pick any color that suits you. You could have a yellow background and pretend it’s a sulfuric atmosphere or a fuschia one and pretend you’re on drugs. Your choice.

09

Just to make things pop and stand out I decided to further separate the foreground, which is out tornado, from the background which is supposed to be our atmosphere. So, for all intents and purposes, Render Clouds on a layer above the background.

10

Now, I really liked the Radial Gradient feel so I decided I wanted it back. So I made a new Layer Mask on the Render Clouds layer, made a white semi-circle on a black background and blurred the heck out of it in order to achive the vignette look.

11

It’s coming around now but the colors were to washed out, so I added a nice Blue to Navy Gradient Overlay set to Soft Light on the Render Clouds layer.

12

Sometimes, no matter how hard you work or try there’s really nothing like a good stock photo. http://storage.sxc.hu/j/je/jesuino/1092992_26909764.jpg was exactly what I needed to create the very stormy clouds I needed.

13

Set the new clouds stock photo to Overlay.

14

Remember when I said I was going to be adding a little text on our Tornado Alley? Yeah, like now. It’s a simple Typographic (Georgia Italic) Tornadoes (Gill Sans) text set behind the Alley layer. The trick is to position the text just so that it looks like it’s rising behind the hill.

15

Though it’s kind of hard to read, isn’t it? Just a white doodling layer and a hefty portion of vertical Motion Blur, set behind the text layer of course and voila, problem solved.

16

This diagram shows how to create a brush from a text. It’s quite easy actually. First you have to make the text, obviously, then when you’re satisfied with the way it looks, just Rasterize it and choose to Define Brush Preset. Save it to a Pallete, save the Pallete and then you’re ready to rumble.

17

I wanted to give the impression of a violent tornado, none of those hippie, picket fence tornadoes for me. So after turning the letters R A F (nothing to do with the Royal Air Force) into brushes I modified the brushes so that you would get a lot of scattering and variable opacity and also an angle variation. That was really all it took. Just needed to make a new layer, start drawing a wee bit and voila, wallpaper finished.
Hopefully this was a helpful tutorial. I’ll be seeing you soon enough with another crazy unintelligible tutorial from everyone’s least favorite sick web designer. Anyways, Be sure to come back around and see what design nonsense I have dumped lately on the ever so unexpecting internet.

First let me start by saying that this article will NOT go through color theory. There are plenty of very good learning materials all over the web, and you will find some of the better ones, in my opinion, at the end of this post. Yeah, me being one of the good guys, I link to others.

We WILL go through some of the processes I usually go through when I get a new project. And by far, at least for me, and I suspect for some, if not most of you as well, the hardest part of starting a project is choosing a good color palette.

Our scenario is pretty fortunate and unfortunate at the same time. It’s a good thing because you get to have the creative freedom we all adore so much but at the same time you have no clue whether the client will approve of your, however educated, choices. Which is why this seems to me the most challenging scenario when it comes to colors.

I’m going to run with a particular scenario for this article, one in which the client does not provide you with any color choices of his own, nor any company graphics. It’s all up to you to make the right decisions.

Now, whenever I get something like this, and it happens more often than not I like to use a little trick I made for myself which I shall gladly share with you: my little company color card. Yeah, that’s right. It does what it says. And here it is for your enjoyment and perhaps slight learning experience. (It’s a pretty big picture so be patient if it doesn’t load up at lightning speed).

I made this because I stumble upon a lot of the same type of clients, and by type I mean field of work. I must have made about 20 designs for car shops in the last year or so, and that’s just one example. This little chart has come in handy more than once, I have to tell you, and it really speeds things up and kind of takes me out of that “early design phase where you don’t know what to do”. Granted, I don’t respect it strictly and neither should anyone. It’s merely a guide of sorts and hopefully it will help you as much as it did me.

As you can see, I’m a pretty big fan of triad palettes. They seem to be the natural choice for me and this helps me make the most out of my designs. This chart is, of course, just something to give you an idea of what you might use and is not meant to be used literally. The actual hue of the colors in the chart is not important but what IS important is the relationships in the triads. That is what gives the feeling of the design, not the hue. You can have a rainbow design that could very well be used for a metal band poster and it will work only if you use saturation and luminance values between the different colors wisely.

Remember: you can use the values in the charts and just shift the hue values for the triads to get what you want. It’s easy and saves loads of time for those “2 hour design” project.

I don’t know any way I or anyone can explain literally how to not churn out a bad design but there are a few pointers concerning colors I can give you and if you manage to stick to them odds are most of the time your work will be pretty good:

Avoid extreme contrast all over your canvas

Unless specifically stated by the client, avoid single color (gradient) or gray scale designs. It takes a lot of practice and skill to masterfully pull that one off. Not to mention the fact that you have to work twice as much on one of these things. The reason it’s so hard is because you can’t break monotony with a second, third or fourth or fifth color. So you’re left with only shapes and contrast and while they are enough to create something awesome, in web design especially, where time is literally loads of money I don’t think to many of us afford to spend 2, 3 maybe 4 days on a single design.

Avoid extreme contrast all over your canvas. It’s good to use something like a red button on a light green background to draw attention to that area but if you over do it like say slam a long, red menu on a light green background you’re going to seriously annoy someone’s eyes. And usually that someone happens to be the client.

My cardinal law (I mean I hold it dear, not that I made it) when it comes to ANY design is this: make it subtle. Subtle gradients, subtle color changes between designated areas of the canvas, low contrast text color etc. The main idea behind any design is to draw attention. And while this rule is not as pertinent for print design (posters, banners, etc.) where one’s attention needs to be grabbed for a short time, in web design the goal is to keep the user on the site for as long as possible because most of the time we’re feeding them enormous quantities of information compared to most other media. So we have to have high contrast areas to draw the attention but we also must have subtle, calming, relaxing areas (more so than high contrast ones I like to think) in order to keep the user there and ultimately make him browse the site.

Think about what the colors mean. If it’s a tough muscle car custom shop don’t use pastel pink. Unless it’s a tough muscle car custom shop for fairies. That would be appropriate. Definitely.

Colors bleed into each other in real life.

If the client is an idiot and does want colors that have nothing to do with what he is about then think about nuances. Blue can range from greenish to sky to deep sea to near violet. And in conjunction with other colors you can achieve the right atmosphere and satisfy your client’s weirdo demands. It’s a question of attitude on your part. Do you just draw boxes like a drone or do you stop and analyze the matter at hand? I apologize to any and all drones reading this. I mean no disrespect to your kind. Some of my best friends are drones and they’re ok… I should move on.

Colors bleed into each other in real life. Do the same. A design doesn’t have to be a scientific illustration. It can and should be a piece of commercial art. Think of colors as people. Ok, I’m gonna stop right here because I am diving into that interracial pond and I do not have my apologetic cap on right now. Just…let them colors bleed.

Well, that’s it from me. I hope you learned a thing or two, I am off. Be sure to come back around and see what design nonsense I have dumped lately on the ever so unexpecting internet.

And, as promised, here are some resources, both for learning and speeding up your color work:

Colors In Corporate Branding And Design

Color Tools, Resources and Tutorials for Photoshopers

50 Totally Free Lessons in Graphic Design Theory

Using Adobe Kuler to Enhance Your Photoshop Color Workflow