Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation.
This article then is an extension of that previous discussion. We’ll be using multiple backgrounds to create a cool cinematic effect where someone traverses a map while the vantage point zooms out. The best and most nerd-tastic way to show this off is of course to use the familiar tale of Frodo crossing Middle Earth to arrive at Mount Doom in Mordor. Let’s get started.December 29th, 2011 Posted in CSS
In web design we often focus on using Photoshop to create pixel perfect designs that are meticulously shaped and layered until they’re absolutely pristine. Repeated patterns, tiny strokes, complex gradients and reflections are trademarks of this design style.
But what if you’re going for something more organic? How can we use Photoshop to create complex and random particle arrangements that don’t look cheesy and contrived? The answer of course is to utilize scatter brushes. This awesome tool seems fairly simple on the surface but there’s a ton functionality and limitless possibilities to explore so even if you’re a Photoshop pro, read on to see some great ideas for how to use scatter brushes in your work.December 28th, 2011 Posted in Software
The basic organization of a design project typically begins with a simple concept – the grid. Whether you decide to work within its constraints or intentionally move away from it, deciding how to use a grid tends to be one of the first steps in the design process.
Print designers have been working on grids since the first newspapers rolled off the presses hundreds of years ago. Most magazines also employ a grid; books are put together using the grid format. The grid can be part of a publication’s identity and helps create a sense of space and organization. Understanding the basics of grid design – from how it originated, to developing your own grid and using it in your workflow processes – will make working within vertical and horizontal constraints a snap.December 27th, 2011 Posted in Layouts
“Synergy” – In business this is a term that has been so often abused that it has become a meaningless buzzword. Some of you may cringe just at the sound of it.
However, in design synergy is a powerful weapon that, when wielded properly, can make your designs much more interesting and creative. What is synergy? Where can we find some solid examples of synergy in design? How can you use synergy in your work? Read on to find out.December 26th, 2011 Posted in Graphics
Christmas is nigh upon us. You’re likely rushing around like a crazy person this week trying to get all your work done, finish up your shopping, preparing to travel, etc. Let’s take a minute to slow down and absorb some solid Christmas-themed design inspiration.
In this post we’ll take a look at over twenty-five clever and/or funny Christmas ads. Some will make you laugh, others might earn an approving nod or even a roll of the eyes. All are definitely worth a look and are sure to get your brain in a creative mode.December 22nd, 2011 Posted in Graphics
Bootstrap is an interesting framework or “toolkit” offered up to developers completely free of charge by none other than Twitter.com. According to Twitter, Bootstrap is “designed to kickstart development of webapps and sites.”
Today we’re going to jump into Bootstrap and take a quick look at some of the things that it has to offer. This should help you decide whether this is just another bloated framework or an incredibly useful tool that you should use to kickstart your next project.December 21st, 2011 Posted in CSS
The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!
Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.December 20th, 2011 Posted in CSS
Today we’re going to discuss how design projects often require you to take a step back from who you are as a designer and forget your own personal taste while taking on the personality of a given brand.
The companies who hire you will have vastly different brands, strategies, and most importantly, customers. This principle is displayed quite prominently in the brands of major guitar manufacturers. Let’s dive in and see how Taylor, Fender, Dean, Gibson and more target the right customers through design.December 19th, 2011 Posted in Graphics
Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is Atlantic Corporate Interiors. Let’s jump in and see what we think!December 17th, 2011 Posted in Critique
In the past, we posted an awesome roundup of 15 Gorgeous and Thin Free Fonts to add to your collection. To round out the selection we’re following that up with some nice fat fonts to utilize when you need to make a big, bold statement.
Follow along as we introduce you to some of the most popular fat free fonts around. You’ll find some great serif, sans-serif, slab serif, display and even cursive typefaces to add to your collection.December 17th, 2011 Posted in Freebies