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

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

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

Speed

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

Focus

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

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

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

Code

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

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

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

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

Proper progressive enhancement

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

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

Interaction

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

CSS3 Super Speed

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

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

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

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

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

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

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

So did you learn anything?

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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

07

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

08

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

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

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

Design control?

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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

07

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

08

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

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

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

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

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

01

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

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

02

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

03

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

04

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

05

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

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

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

06

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

07

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

08

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

09

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

10

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

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

Behold and be amazed: The Big Picture

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

A bit of an introduction

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

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

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

So, what’s the big deal?

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

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

See the demo

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

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

The Cosmological Background

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

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

Identifying Parallels

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

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

The Solar Method

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

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

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

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

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

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

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

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

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

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

How to enter

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

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

Winning criteria

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

Why you should enter

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

So you don’t feel like commenting

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

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

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

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

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

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

Download the Starter Pack

UPDATE

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

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

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

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

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

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

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

01

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

02

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

03

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

04

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

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

05

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

06

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

07

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

08

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

09

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

10

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

11

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

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

Typography

The Why

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.

The How

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.

The Other One

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

The Why

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!

The How

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.

The Other One

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.

The Why

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

The How

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!

The Other One

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

The Why

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.

The How

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.

The Other One

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

The Why

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.

The How

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.

The Other one

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

01

Let’s take for instance Chrush + Lovely

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

02

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

03

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

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

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

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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

07

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

08

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

09

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

10

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

11

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

12

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

13

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

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

14

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

15

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

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

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

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

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

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

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

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

Single file vs multiple files

Click to show/hide code

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html>
4.    <head>
5.       <title>CSS3 Vignette</title>
6.       <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
7.    </head>
8. <body>
9. ...
10. </body>
11. </html>

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

Click to show/hide code

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html>
4.    <head>
5.       <title>CSS3 Vignette</title>
6.       <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
7.       <link rel="stylesheet" href="css/structure.css" type="text/css" media="screen" />
8.       <link rel="stylesheet" href="css/type.css" type="text/css" media="screen" />
9.       <link rel="stylesheet" href="css/colors.css" type="text/css" media="screen" />
10.    </head>
11. <body>
12. ...
13. </body>
14. </html>

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

Click to show/hide code

1. @import url('css/reset.css');
2. @import url('css/structure.css');
3. @import url('css/colors.css');
4. @import url('css/typography.css');

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

To indent or not to indent

Click to show/hide code

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

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

Click to show/hide code

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

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

Click to show/hide code

1. body{ margin:0; padding:0 }
2.  
3.    #wrap{ position: relative; margin: 0 auto; width: 900px; }
4.  
5.       #left{ float: left; width: 66%; }
6.  
7.          #left .inner{ padding: 20px; }

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

Single line vs multiple lines

Click to show/hide code

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

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

Single line CSS attributes are a very concise way of writing your styles, but they have the disadvantage of becoming harder to read as the attributes add up. The id left in the example above is an example of an easy to read and concise set of attributes, whereas the id right, with it’s many attributes is a huge pain to figure out, especially if you’re looking at the code a few months after it was written.

Click to show/hide code

1. #left{
2.    float: left;
3.    width: 66%; }
4.  
5. #right{
6.    float: right;
7.    width: 33%;
8.    border: 1px solid #333;
9.    background: #cecece;
10.    font: normal normal 1.4em Arial, Verdana, Tahoma, sans-serif; }

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

To alphabetize or not to ahlaiebtpze

Click to show/hide code

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

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

Click to show/hide code

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

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

The curliest of brackets

Click to show/hide code

1. #left{
2.    float: left;
3.    width: 66%; }
4.  
5. #left{
6.    float: left;
7.    width: 66%;
8. }
9.  
10. #left{
11.    float: left;
12.    width: 66%;
13.    }

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

A few examples

Click to show/hide code

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

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

Click to show/hide code

1. body{
2.   margin         : 0;
3.   padding        : 0;
4. }
5.  
6.   #wrap{
7.     position     : absolute;
8.     width        : 900px;
9.     }
10.  
11.     #left{
12.       float      : left;
13.       width      : 66%;
14.       }
15.  
16.     #right{
17.       float      : right;
18.       width      : 33%;
19.       }
20.  
21.       .inner{
22.         padding  : 20px;
23.         }

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

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

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

DEMO

So, what’s this puppy about?

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

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

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

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

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

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

The HTML

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

Click to show/hide code

1. <div id="top"></div>
2. <div id="right"></div>
3. <div id="bottom"></div>
4. <div id="left"></div>

The CSS

Here where the magic really happens:

Click to show/hide code

1. /* First we set the four elements of our vignette
2.  to be on top no matter what and set their initial
3.  width and height which we'll overwrite in the next declarations.
4.  */
5.  #top, #bottom, #left, #right{
6.  height: 100%;
7.  position: absolute;
8.  z-index: 999;
9.  width: 100%; }
10.  
11.  /* Overwriting the default 100% */
12.  #top, #bottom{
13.  height: 15%; }
14.  
15.  #left, #right{
16.  width: 15%; }
17.  
18.  /* We set the gradient with CSS3 from a solid gray to
19.  a 100% transparent color which should be the same as
20.  the body background color, to have a nice, clean falloff.
21.  And we're also setting the position of the vignette elements.
22.  */
23.  #top{
24.  background-image: -moz-linear-gradient(100% 100% 90deg, rgba(255, 255, 255, 0), #e1e1e1 );
25.  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
26.  top: 0; }
27.  
28.  #bottom{
29.  background-image: -moz-linear-gradient(100% 100% 90deg, #e1e1e1, rgba(255, 255, 255, 0) );
30.  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(#e1e1e1));
31.  bottom: 0; }
32.  
33.  #left{
34.  background-image: -moz-linear-gradient(100% 100% 180deg, rgba(255, 255, 255, 0), #e1e1e1 );
35.  background-image: -webkit-gradient(linear, left center, right center, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
36.  left: 0; }
37.  
38.  #right{
39.  background-image: -moz-linear-gradient(100% 100% 180deg, #e1e1e1, rgba(255, 255, 255, 0) );
40.  background-image: -webkit-gradient(linear, right center, left center, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
41.  right: 0; }

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

Browser compatibility

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

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

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

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

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

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

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

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

The Background

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

01

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

02

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

03

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

04

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

05

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

06

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

07

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

The boy

08

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

09

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

10

Now let’s set that layer to Color blending.

11

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

12

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

13

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

14

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

15

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

16

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

17

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

18

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

19

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

20

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

21

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

22

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

23

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

24

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

25

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

The hat and clothes

26

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

27

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

28

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

29

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

30

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

31

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

32

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

33

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

34

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

35

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

36

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

37

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

38

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

39

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

40

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

41

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

The hair

42

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

43

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

44

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

Fixes

45

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

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

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

KISE = Keep It Simple, Everyone

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

Shoot the target

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

Finding Niche

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

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

Alright, Mr. Smarty Pants

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

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

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

So what’s your point

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

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

KIPS

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

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

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

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