Become a Photoshop Layers Ninja
I'm always looking for ways to use Photoshop more efficiently. My recent obsession has been finding keyboard shortcuts to work with layers. Claiming that you'll be a layers ninja after reading this might be a stretch. But try these tricks while your fellow designers are watching, and your stealthy sleight of hand will probably blow their minds.
Dynamic Diagonals
The team here was recently checking out the Diesel Denim site. Pretty cool, and it's diagonal.
This reminded me of a few things:
- Diagonals are dynamic (said in wise professor voice).
- I don't use them much. More perhaps?
- Diagonals are very much in play on the web. We're way beyond Flash and background tiles.
- I should see what's out there.
Here's a handful that we dug up...
Print:
If You Love Fontspring So Much Why Don’t You Marry It?
The following account represents one person's unabashed love for an up and coming web font service.
As many know by now, the dawn of true web type is finally upon us. Dozens of service offerings have sprung up, pricing models have become more reasonable, and @font-face usage is becoming far more ubiquitous than it was just a year ago. I couldn’t be more thrilled.
We’re so close to the typographic possibilities that web designers have always dreamed of, but there are still some roadblocks in terms of what works best for agencies and clients. I won’t weigh the pros and cons of different services and options. That’s been done elsewhere already. I'd rather explain why I love Fontspring so much for our needs at Viget. For a more technical and pragmatic view on exploring the realities of @font-face usage see Doug's post.
Continue reading "If You Love Fontspring So Much Why Don’t You Marry It?"
A Design Double Dog Dare: Switch Up How Organized (or Chaotically) You Work
Thinking back to childhood, there were those who lined up their crayons, organized them by color, and sharpened them in that crayon sharpener in the back of the crayon box before ever touching crayon to paper. And then there were those who had crayons flung everywhere, mixed old and new crayons together, and basically worked in total anarchy.
Continue reading "A Design Double Dog Dare: Switch Up How Organized (or Chaotically) You Work"
Stop Making Sprites (Compass, Sass, and PNG Sprite Generation)
Update 01/11/12: new code at the bottom of this post.
Sass has been kicking around for a while, but I hadn’t given it a try until just recently. Sass usually goes hand-in-hand with Rails, Compass makes it so easy to run Sass on standalone projects that I’ve started using it on nearly everything. The result is faster, DRYer, more enjoyable coding. The biggest benefit for me has been Compass’s sprite generation, which — if done right — can cut down your coding time and filesize.
Sprites are an optimization best practice, but they’re no fun to work with. Making them by hand requires a lot of nudgy mechanical math, and most auto-spriting tools create more work than they save. Compass does sprites the smart, Sassy way: by compiling them from your code and filling in the CSS rules for you.
It also does things the Rails way, in that it provides conventions to follow rather than configuration to specify. I’ll walk you through my process for Compass spriting on a simple, standalone project.
Continue reading "Stop Making Sprites (Compass, Sass, and PNG Sprite Generation)"
JS 201: Run a function when a stylesheet finishes loading
This is the first in a series I’m calling, “JS 201.” It’s not introductory material, but is instead that helpful middle ground between the basics and pretty much anything John Resig writes. Short, practical, typically plain-ol’-JavaScript tips is what you’ll get.
I’m in the middle of working out a new feature for a project that requires JavaScript to append some markup, stylesheets, and scripts to a page. The task is fairly straightforward: JavaScript has native capability to do all of that. I’m looking at you, createElement and appendChild.
I did run into a problem, though. A piece of JavaScript required styles be applied to certain elements before it should execute. Unfortunately, the script was executing while the stylesheet was being loaded. Like most reasonable front-end developers, I figured I’d just run a function when the onload event fired on the link element. It works for images, why not for stylesheets, right? Wrong!
Continue reading "JS 201: Run a function when a stylesheet finishes loading"
Designing PUMA
Over the past year and a half I've had the opportunity and pleasure to run as lead designer and art director for Viget's engagement with PUMA. When we started the project many moons ago we had a very singular focus, the PUMA Running site. Over the course of the engagement our focus has expanded to include over a dozen category (sub-brand) sites and other micro-sites in collaboration with PUMA's internal team. Recently we tied them all together with the launch of the new PUMA.com (an exciting day for our team). I've been a long-term fan and consumer of PUMA products and they have been on the top of my "dream client" list for a long time so this project has been especially rewarding for me.
Our role on the design side of things has spanned from design production and illustration all the way up to photo/video-shoots direction and high level creative concepting. Many hours of collaboration between our departments (marketing, design, fed, UX, dev) and PUMA's internal team have resulted in a PUMA brand with a stronger, more cohesive, and consistent story in the online space. The content and visuals of PUMA's sub-brands can now live harmoniously together, working together to tell the bigger PUMA story, while the awesome offline PUMA campaigns have more room to come to life and stretch their legs online.
2011