Ludacris-Proximity Sadness Meter

Thursday #4

This is the 4th installment of my “weekly” design project. Carrying along the same tradition as the previous design, I’m having fun arranging concentric circles in semi-irregular patterns.

Absolutely hilarious video from Newswipe that nails down how to report the news. I love the bit about the Matrix.

Via Mike Gallay.

CSS Sprite Technique Using Color Overlay in Photoshop

As a web developer working with designers who provide me with a plethora of assets, I often find myself in situations where I need to create rollover states in Photoshop for text assets whose fonts I don’t have installed on my computer.

How often have you seen the dreaded “The following fonts are missing…Font substitution will occur” dialog when trying to simply change the color of the font in your design? This usually occurs when you’re creating an image sprite using those fancy-schmancy non-web fonts designers love so much.

While I highly recommend using Cufon or SiFR to dynamically replace web text with the correct fancy font, I treat navigation text differently.

Why? For one, Cufon and SiFR rely on Javascript and/or Flash in order to achieve the correct result, and I’ve had instances of bugs in both of them. Also, a bad instance of FOUC can help ruin an otherwise elegant design.

So instead I use the Fahrner Image Replacement and a well-designed image sprite to accomplish my top level navigation systems. It requires extra effort on my part and isn’t as flexible as using the aforementioned techniques, BUT in my experience its a more bulletproof solution.

Now back to the situation at hand: I have this great-looking font in my PSD but don’t have it on my computer. I need to make rollovers for all these navigation states and I can’t click into the text without altering its appearance. What’s a developer to do? Here are the required steps:

1. Duplicate the Photoshop layer and position according to the sprite design
2. In the layers panel, double click on the layer to bring up the Layer Style dialog box
3. In the left column of the Layer Style dialog, select Color Overlay and change to the desired color
4. Lather, Rinse, Repeat for as many elements needed to complete the navigation
5. Save out PNG or GIF (depending on file size)
6. Style using CSS to create the rollover effect

Photoshop's Color Overlay Dialog Box

At the end of the day, this technique may be tedious but its very reliable. Users without Javascript enabled can see the design in all its glory, you don’t have to bother the designers to send you over every single font they have, and at the end of the day you’ve built a nice fully-functioning navigation system with one image and some CSS know-how. Don’t you feel good about yourself?

Selleck Waterfall Sandwitch

Absolutely hilarious blog dedicated to collages of Tom Selleck posing with a waterfall and a sandwitch. I want to see a lot more stuff like this.

Courtesy of Collin Kelly

Visit Selleck Waterfall Sandwich.

Absolutely epic video, courtesy of my favorite guitar god.. The backup musicians crack me up and if you can last until the end, you get a healthy dose of trumpet accent love. Gorgeous. Makes me reconsider my life path.

Hilarious video of South African group Die Antwoord. Courtesy of my favorite South African creative Director.

Wednesday #3

This is the third installment of my “weekly” design series. I guess I should have been more realistic in regards to how consistent I would be with this project, but thankfully only a week slipped by.

Blue, orange and concentric circles are in full effect here. These are a few of my favorite things.

Tuesday #2

Just got back yesterday from snowboarding in Stowe, VT. Its been amazing progressing with my wife and it was a ton of fun hanging out with a big house full of people.

Because of that the design day got pushed back, so here is the updated version.

Now that I (already) broke the pattern, I’m wondering if I should start a new pattern with this. In other words, make next week’s design arrive on Wednesday, then the following Thursday, etc. We’ll see how it goes.

I was responsible for developing and coordinating the production of the ecommerce site, which included managing the development team, communicating with the client, developing a custom Magento theme and coordinating with the design team to make sure all project goals were met.

The result is a high-impact website that focuses on Diptyque’s strong historic brand with an ecommerce section that makes it as easy as possible for users to purchase.

Technologies Used

Magento, XHTML, CSS, PHP, Jquery, SVN

Highlights

elastic product zoom, elegant carousels & fades, custom Magento quickview (much props to Sankho)