What do Island Cowgirl Jewelry, Related Grey, Innovative Results and Carl Warren & Co. all have in common. This cover of course! Sheesh, sometimes I just gotta spell it out for ya. Shot by the ohh-so-talented Challenge Roddie, this cover pulled 4 very different industries together in one studio to hit a home run concept. Plus, the little dog, Dexxy, didn’t poop on anything, so there’s that!

I probably should have marked this with ‘mock’ or ‘concept’ because as you may have noticed this doesn’t actually appear in the 3-2011 issue of OCMETRO. What’s that? You don’t have the March issue of OCMETRO adorning your coffee table. For shame! I digress. Sometimes the limitations of dense stock photo heavy pages is the bland, “I’ve seen this before” quality you get with the available choices. So, when a gem like the above comes along the opportunity is not to be missed… or so I thought. Silly me. Not living in the ‘I’m the king, me, me, me’ world I wish I lived in as a creative director, there’s always someone higher on the food chain that has the power to veto, and veto they did. Luckily concept can live on in blog. HUZZAH!

New design, check. Fresh event look, check. Convincing the powers that be to let me use a spot UV for the first time, check. The sales pitch was tough, because you can only show non-artistic people a sample of something and get the idea across. There’s always that need of “well, what will ours look like?”. Luckily, they left their trust (and probably some held back fears) in my hands and the final product was perfect. Smooth black matte finish topped with a nice thick coat of UV.

Phew! Just in the nick of time. One day later and this post would never have seen the light, as it were. Officially, tomorrow is the day of the Rapture according to some. So, live it up, because the planet might get a bit less crowded tomorrow.

OCMTERO’s annual “Women in Business” cover design. In an attempt to pull off an elegant, Vanity Fair-esque look, we enlisted the help of South Coast Plaza for wardrobe, Solmas for hair & makeup and our amazing freelance photographer, Challenge Roddie, for capturing it all. This cover design was quite the departure from our standard business type covers, but with each of the women on the listing being the top of million-dollar plus companies, we had to do something special.

As mentioned previously, the design group over at Churm media likes to have some creative fun in our “downtime”. Given nothing more than an objective and a few “must use” image files, the designers are set free to explore whatever they can come up with to achieve victory. This round the objective was simple, to create an ad using whatever theme you want and a selection of 4 must use images. And if memory serves me correct, I took the win this round with the ruling judgement of our awesome colleague judges.

My first year designing the annual “40 Under 40″ for OCMETRO and Churm Media, and I wanted to make a mark. Inspired by a design I’d seen on one of my frequented design blogs, I undertook the arduous task of manually typesetting each and every name to fit the shape of the ’40′ … even despite the editorial blunders of misspelled names that I later had to reformat and fit into an already tight, finished piece. Despite the grief and “woe is me” moments, the finished piece really stood on it’s own and was a big hit at the event and with our readers.

April 2009′s issue of OCMETRO was it’s annual “Marketing Matermind” featuring Jon Gothold, Executive Creative Director at Santa Ana’s DGWB, an advertising agency.

Working with a freelance client, ripeorange inc., on an event for an upcoming media travel showcase led to the design of many collateral items. This menu was created in InDesign CS5 and printed on recycled card stock for each of the guests.

The concept was to keep a very clean, easy to navigate design with a “high fashion” feel to it. Using the modern, duochromatic colors and accentuating singular letters with the complimenting colors we were able to accomplish the task with much praise from our client.

In the world o’ publishing, sometimes we don’t always get the cream of the crop when it comes to image selection. For whatever the case may be, we might be given lemons. In particular, I was given this image as a high res option for our cover story layout, and ended up making due with it as a cover image. Interesting enough in it’s own right, dabble in a little bit of typography and clipping paths, BOOM! Cover!

Prepping my team at Churm Media for the big switch from Quark 8 to InDesign CS5 (Hallelujah!), I assigned the project for everyone to design a magazine cover using exclusively InDesign and supporting Adobe products, for photo retouching/manipulation. They were given free reign, with the one caveat being that it had to look like a magazine cover, not an art piece. Being a team player I to took part in this exercise. Drawing inspiration from, quite possibly, the best news site on the internet, I set my goals at creating a cover for slashdot. Their tagline says it all, “News for nerds. News that matters.”. Being a long time follower of the site, and getting 90% of my conversation topics their as well, I knew that I wanted a cover subject that would ‘fit’. John Stewart immediately jumped to mind and my search of google images began. Maybe not the obvious choice for a “nerd news” magazine, but the guy has brains and wit to match … I knew the fit would work. Once I had the idea, the rest was a breeze.

I wish I could retrace the steps that led to this, but it was one of those conversations at work that went from point ‘A’ to point ‘JELLYBEANS!!!!’ in a mere matter of minutes (yeah, we ended up on poo … ). I’m sure someone could refresh my memory, but I’m not sure I want to travel that road again. Despite the selective slight amnesia, an idea was born … The Deuce Step.

I don’t want anyone to think that I’m trying to steal the sweet ass dance moves, so I’ll admittedly say that a quick google images search of “dance pattern” was my inspiration/base for the ‘steps’. I’m not planning on selling this shirt, so hopefully no one will have any problems with me borrowing the pattern for this, clearly for-fun, design. In fact, this is a simple photoshop mockup on a t-shirt template. I respect content.

All that being said, let me know what you think. Hopefully it makes you laugh, maybe cry or maybe even remember a nice pair of sneakers you lost to Fido’s happy little accident.

With the tides of internet coding changing, CSS3, HTML5 and jQuery are drastically changing the view of the web. With the ability to produce CSS3 animations, flash integration is becoming less popular as speed and compatibility are what everyone is looking for.

As an ongoing project for this blog, I’ve been learning some of these new techniques and coding tricks. Below is a code snippet for one of the new CSS3 transition upgrades. What this code will do is cause a soft glow to transition in and out when a link is hovered. This code can be adapted in your .css file to apply to other items as well like DIVs or li items. If you noticed on this blog it’s been integrated into the container boxes for my blog content.

For supporting browsers, you should see a slow fade in & out when hovered, if you do not see it then you should try to upgrade your browser… and if you’re still using IE, you should just slap yourself. Silly IE, the internet is for next gen browsers. Good luck with IE9.

1
2
3
4
5
6
7
8
9
10
11
12

a {
	-webkit-transition: -webkit-box-shadow 1s ease-in;
	-moz-transition: -moz-box-shadow 1s ease-in;
	-o-transition: -o-box-shadow 1s ease-in;
	padding:20px 40px;
	position:relative;
}
 
a:hover {
	-webkit-box-shadow:0 0 10px #444444; 
	-moz-box-shadow: 0 0 10px #444444; 
	-o-box-shadow: 0 0 10px #444444;

There are tons of great resources on the web for learning these new standards and techniques. A couple I used for inspiration for this post and tip are:

• Graceful Degradation With CSS3
• Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites
• css3.info
• Google Search for the term “CSS3″. You really can’t fail with google. (take note all you yahoo, or god forbid, AOL, users)

If you’ve got any tips you’d like to share, please leave a comment. Now have some fun coding, and if you REALLY want to see just how powerful these new CSS3/HTML5 features are then just check out the Spiderman Animation made entirely in CSS3.

“think dark” design, inspired by Jennifer Hood‘s comment on my recent post. Both of us coming from the print world, we know the importance, and frustrations, of “rich black” in the CMYK processes, although all the credit of “think dark” has to go to Jen.

Designed in Illustrator 5 and 100% vector.

Blown away… It’s really all I can use to describe the experience I just had with Google and HTML5. Maybe I’m just a nerd who gets his rocks off on techy, gadgety things, but I don’t think anyone will be able to deny the powerhouse that’s coming to the internet programming world, HTML5.

Take 4 minutes of your life and check out this project between Google and The Arcade Fire, “The Wilderness Downtown”. But sorry to all you hacks still living with Internet Explorer, you’re shit out of luck my friends… or should I say frenemies. (yeah, I think i just slipped into an MTV haze of unnecessary word combos). The project was started to shot the power of HTML5 with such things as it’s animation, video and layout capabilities, no flash involved!

So, go now, check it out. Drool a little if you’re a ubër nerd like me, but you will not leave disappointed… unless you’re an IE user, haha.

“The Wilderness Downtown” was inspired by recent developments in modern browsers and was built with Google Chrome in mind. As such, it’s best experienced in Chrome or an up-to-date HTML5-compliant browser. You can launch the project and learn more about it on our Chrome Experiments site at www.chromeexperiments.com/arcadefire.

We hope you enjoy it.

[-From Google's official blog]

Now, just to wet your appetites for HTML5, here’s a bit of simple code that can give you a sweet glow/drop shadow effect like you see on this site!

1
2
3
4
5

div:hover {
	-webkit-box-shadow:0 0 10px #1FA2E1; 
	-moz-box-shadow: 0 0 10px #1FA2E1; 
	box-shadow:0 0 10px #1FA2E1;
}