While working on a recent project, I noticed that WebKit browsers (Chrome, Safari) display small-caps much smaller than other browsers. I know. Yet another cross-browser bit of weirdness to deal with.

There’s an easy fix though: CSS media queries. Pop the code listed below into your CSS and you can easily target WebKit browsers and make them behave.

@media screen and (-webkit-min-device-pixel-ratio:0) {
	.some-element {
		font-size: .85em /* Add your formatting */
	}
}

Read more posts from Bullman Design.

I thought the rebranding of the logo and website prompted some new business cards.

Read more posts from Bullman Design.

Still a little confused about SOPA & PIPA. Here’s a great infographic explaining how the bills violate the 1st amendment courtesy of Lumin Consulting.

Read more posts from Bullman Design.

Read more posts from Bullman Design.

If you’ve ever stared for an inappropriate amount of time at the iTunes visualizer (I can’t be the only one), then you’ve seen the work of Flight404. Great music as well (courtesy of  Zoë Keating).

Read more posts from Bullman Design.

Adding noise to Photoshop artwork can add much needed texture and realism to your images. For this tutorial, I wanted to show you my favorite way of quickly and easily adding noise with reusable Pattern Overlays.

Bring The (Photoshop) Noise

As with everything in Photoshop, there are several ways to do this. My favorite method utilizes the Pattern Overlay layer style. The main benefit of this technique is in its re-usability. The patterns only have to be set up once and can then be applied quickly and easily.

Step 1

Create a new document 200 px wide by 200 px high at 72 pixels/inch.

Step 2

If it isn’t already, fill the “Background” layer with white. Right-click on the layer and select “Convert to Smart Object”.

Step 3

From the “Filter” menu, select “Noise > Add Noise…”. Set the Amount to 10%, Distribution to “Uniform” and make sure the Monochromatic box is selected. Click “OK”.

Step 4

From the “Edit” menu, select “Define Pattern…”. Name the pattern “Noise 10%” and click “OK”.

Step 5

We’re now going to create several more patterns, each with increasing amounts of noise. Since the layer is a Smart Object, the Noise filter settings can be adjusted easily. In the layers panel, double-click “Add Noise” to re-open the filter settings. Raise the Amount to 20% and click “OK”. Create another pattern, this time with the name “Noise 20%”. Repeating this process, create patterns with noise amounts of 30, 40, 50, 60, 70, 80 and 90%.

Step 6

Now we will create a Pattern Set for our new noise patterns. From the “Edit” menu, choose “Preset Manager”. Choose “Patterns” from the Preset Type. You should see all of the patterns we created along with some default Photoshop patterns. Shift-select all of the noise patterns and click “Save Set…”. Name the set “Noise Patterns” and click “Save”.

Note: I had to close and re-open Photoshop before the new pattern set would show up in the preset list.

Step 7

Now to put those killer new noise patterns to use. To apply the patterns, double-click on a layer to open the Layer Style menu. Select Pattern Overlay from the right-hand menu.

Step 8

Use the arrow on the right side of the Pattern select and choose our new “Noise Patterns” set.

Step 9

Select the pattern of your choosing. Change the Blend Mode to “Multiply” and adjust the opacity to your liking.

Note: The Blend Mode can be adjusted to achieve different results. For darker artwork or colors, try “Color Burn”.

Conclusion

Now you can apply great looking noise texture to any artwork quickly and easily. I have several texture presets and use them all the time using this technique.

Read more posts from Bullman Design.

Quick Tip:

For Advanced Custom Fields Post Category rule to work properly, you must first have posts assigned to categories.

The Back Story

I recently started utilizing Elliot Condon’s absolutely fabulous Advanced Custom Fields plugin for WordPress. WP by itself is already a fantastic CMS (yes it IS a CMS, haters) but this plugin really puts it over the top. For all you Drupal folks out there, think Advanced CCK.

When setting up Advanced Custom Fields, you can create rules so that the new fields only appear on certain content editing screens like posts, post format, pages, page templates and anything else you can cook up. Really cool!

Only problem was, every time I tried to set the rule to Post Category, it wouldn’t show any categories. I wasted waaay too much time on the support forums and the Google trying to find an answer.

After pulling my hair out, I realized that I actually needed some posts to engage the rules filter. I was doing all the backend setup for a new site and didn’t have any content yet. There wasn’t any posts for the plugin to pull in categories for. Once I created some dummy posts with the appropriate categories — BAM — worked like a charm.

I usually don’t like to advertise my idiot moments for the whole world to see, but seeing that this happened to me twice (yes, I know), I thought it merited a post. Hopefully this will save you some time if you run into the same problem.

Read more posts from Bullman Design.

For anyone struggling to find some balance, harmony or, well, symmetry in their life, check out this video by Everynone. The video was inspired by the Radiolab episode “Desperately Seeking Symmetry”.

If you are not familiar with Radiolab, by all means, visit their site, listen to some past episodes and experience what a modern, 21st century radio program is all about.

Read more posts from Bullman Design.

In search of a little Thursday afternoon inspiration? Here are some wonderful animated shorts by German designer/animator Lucas Zanotto. Also of particular note is the music and sound design, courtesy of David Kamp.

TUI Weather Spot

The making of the TUI Weather Spot

Look4U

… and my personal favorite!

Read more posts from Bullman Design.

Do you think M. Night Shyamalan should go back to film school? A website I recently worked on does. The site is trying to raise $150,000 so that M. Night can go back and learn some rudimentary skills he might have missed out on.

M. Night School is getting a bunch of press. Sites like Movieline, The Huffington Post and even Perez Hilton are weighing in on this crowdsourced movement.

I was hired to take the original mockup of the site and turn it in to a full-fledged website. The trickiest part about it was that it needed to resize to fit as many browser widths as possible. This fullscreen technique is very common on a number of Flash-based websites, but I had to do it without Flash.

Using jQuery as my coding weapon of choice, I created some tricky functions that dynamically resized all the elements on the page in the proper proportions. If you’re a jQuery junky, checkout the code and you’ll see what I mean.

Whether you agree with them or not, it’s still a pretty funny and visually interesting website. Check it out and let me know what you think below.

Read more posts from Bullman Design.