• 
• 
• 
• 
• 
• 

We finally got around to making our first Photoshop Brush Set. This set of Photoshop brushes contains 5 grunge style brushes made from 5 different grunge style textures. Feel free to download these grunge style Photoshop brushes and do as you please. The only thing we ask is that you share your work with us in our Flickr Group.

We will be creating more Photoshop brushes as time goes on. If there are any styles or types of Photoshop brushes you would like to see, please drop us a line or leave a comment.

We are also interested in seeing any Photoshop brushes you have created. Please leave a comment with a link to your brushes. If we like them, we might feature them on Outlaw Design Blog.

More Grunge Resources on Outlaw Design Blog

• Free Photoshop Brush - Grunge Set 1
• 63 Must Have Grunge Fonts
• Free Grunge Style Resources
• 10 Awesome Grunge Fonts
• Free Grunge Style Brushes

Educating Your Client

It’s not secret that we as designers, either web or graphic, have a love hate relationship with many of our clients. Many of them just don’t understand the process of the business, what good design looks like, or how not to act like an idiot. But, in their defense, it’s not all their fault. They just don’t know.

That brings me to my main point, educating your client.

I was browsing the web looking at a wide array of web design firms, personal portfolio sites, and freelance designers pages to see how designers were achieving this, if at all. It seems that many freelancers are under using their web site. Many simply use it as a web design portfolio and put some contact information.

Occasionally some of the designers had a blog in which they would, on occasion, post helpful little post about color schemes, designing a logo, etc. While this is a good start to helping educate your client, it’s just the tip of the ice berg.

By spending some time to create a decent FAQ section or a blog that has quality information about the design process, terms, standards, and things of that nature, you will start to create a more informed client. Not only will this help you avoid potential headaches, but it also makes you like more of an expert in your field.

Take Visual Scope for example; they are a Seattle web design firm that is much like every other generic web design company out there. Their website has a web design portfolio and information about their web site design services.

While they are very run of the mill looking, they have something going for them. They have an information page that helps educate their clients. There’s no fascinating information here, no link bait, nothing profound; but to the average Joe who knows nothing about web design, this is informative wealth of information.

This all goes back to the point that by educating your client you are making yourself even more of an expert in their eyes.

What have we learned? That by educating your client you save yourself arguments, headaches, potential suicide, and make yourself an expert in your field (even if you’re not). So spend a day writing a few articles or blog post educating your clients, what have you got to lose?

How to Make Money Selling Wallpapers

Last weeks post about adding Powerpoint presentations to your arsenal really got me thinking about untapped niches for graphic designers. While I was deep in meditation on the subject online, I came across this post by Smashing Magazine. The post is nothing more than some free icon and wallpapers, but one of the showcased wallpaper designers really caught my attention.

Designer Vlad Gerasimov is the brain behind Vlad Studio. Valds website is a prime example of a graphic artist cashing in on these niche ideas. The website offers an array of products including; desktop wallpapers, wallpaper clocks, e-cards, posters, and more. Rather than trying to sell the product individually, Vlad has chosen to charge a small subscription fee. A very smart business move on his part.

Getting Started
The great thing about selling designer wallpapers is that it takes little to no money or time to start. Once you have a dozen or so desktop wallpaper designs ready, all you need to do is setup some sort of store front. A good premium wordpress theme and a paypal account should do the trick. Once you get those tasks out of the way the only work left is a little bit of marketing and creating some regular addition to your store.

If you want to see how Vlad made some of his wallpapers, check out his photoshop tutorials page in which he demonstrates how he made many of them.

Desktop Wallpapers Worth Selling

Check out these examples of Vlads top selling desktop wallpaper designs.

63 Must have Grunge Fonts

Looking for the best free grunge fonts out there? We have found all of them and they are trapped in this post. If you think this collection is as awesome as we do, please help spread the word by giving us some Digg love! Its better than us asking for a donation, and cheaper! To donate to ODB, simply click the Digg button.

Read more

Taming the Best: IE6-Proofing Your CSS

Beyond the serene waters of Firefox, beyond the vast fertile plains of Safari, farther even than the citadel of Opera and the murky swamps of Internet Explorer 7, there lurks a beast–one that will take your best website designs, devour them, and leave nothing behind but a smoldering slag heap. It will reduce you to a blubbering pile as hours of your best work disappear into it’s gaping maw.

This beast is Internet Explorer 6.

A Plan of Attack

Everyone has their own recommendations for developing for Internet Explorer 6. Some start with a webpage that works in IE6, then testing it with more modern browsers. This is fundamentally backwards. Doing your initial coding with the goal of IE6 compatibility doesn’t encourage clean markup, valid code, or CSS best-practices. IE6 is the problem, so why saddle other browsers with code best suited for IE6?

We start our IE6-safe design by ignoring it. I personally am a strong advocate of using a reset stylesheet as the basis for your design; these remove inconsistencies in defaults between browsers and help ensure more consistent cross-browser rending. I start testing in Firefox, my preferred browser; feel free to use Safari, Opera, or even Internet Explorer 7 according to your preference. Once your site is perfect in your browser of choice (and you did remember to test in different resolutions and at different font sizes, didn’t you?), move to one of the other browsers. Test, tweak your CSS as needed, then make sure you didn’t break anything in your original browser. Keep iterating through this process until you’ve gone through all four browsers. Although any order is fine, I’ve had the best luck going from Firefox to Internet Explorer 7 to Safari to Opera; chances are good that by the time you have any two browsers done, the remaining two will require minor changes (if any) to work.

Once you’ve run the browser gauntlet, it’s time to validate your CSS. While there’s been some debate about how important validation actually is for CSS, it’s still generally considered best practice. Even if you end up without valid CSS when all is said and done, the CSS validator can help alert you to potential pitfalls along the way, including the bone-headed typos that I’m so apt to make. (Note, here, that there’s a difference between valid code and validating code; CSS vendor extensions like -moz-border-radius are valid according to the W3C, but will throw errors in their validator. So keep in mind what the rules are, when to bend them, and when to break them.)

At this point we’ve dealt with everything but Internet Explorer 6, creating a stylesheet that works in modern browsers. Now we’re going to give IE6 (and below) it’s very own stylesheet using Microsoft’s proprietary conditional comments (plain English explanation here):

<!--[if lte IE 6]>

  <style type="text/css" src="ie.css" mce_src="ie.css" />

<![endif]–>

What’s going on? The more astute of you may notice that we have inside what is actually a special HTML comment a link to a file called ie.css. Because of Internet Explorer’s support for conditional comments, it will read what’s inside the comment as regular HTML if it’s version 6 or earlier (the lte 6 part of the equation); everything else will ignore it (because, after all, it’s just a comment). Now we can dump IE6-specific hacks in their by the truckload and not have them effect other browsers. Not only that, because the code is actually in a comment, our page’s CSS will still validate (if we decide we’re into that sort of thing), no matter what kind of dirty, dirty things we have to do in there.

Know Your CSS Hacks

So what kinds of things are you going to need to put in your ie.css file? There are entire sites dedicated to Internet Explorer 6 bugs and workarounds; no point in rehashing them all here. Two that you’re sure to run into are the box model and the ever-mysterious hasLayout; the former can be fixed by adjusting width and height relative to padding and margin in your ie.css file, the latter can usually be fixed with the simple addition of the proprietary ‘zoom: 1;’ to the offending elements.

Another major issue is that Internet Explorer 6 and below don’t support lovely transparent PNGs. There are a number of fixes for this problem, none of which are entirely satisfactory, since they rely on CPU-intensive Direct X filters and JavaScript. Often times I’ll swap out my PNGs for GIFs in the ie.css file.

Testing On Any Platform

Of course, you’re going to need to test all of this somehow. At this point, very (very) few designers and developers have Internet Explorer 6 as their primary browser, so we’re going to have to get our hands on it somehow in order to see how all of this is looking. Luckily, we’ve got some options.

Web-based

Competitors: BrowserShots (free, recommended), BrowserCam, IE NetRenderer (free), Litmus, IE Capture (free)

Advantages: no setup, cheap or free, test multiple versions of Internet Explorer at a time, works on any operating system

Disadvantages: no interaction (can’t test JavaScript or hover effects), slow refreshes makes squashing bugs slow

Virtual Machine Based

Competitors: VMWare Player (free), VMWare Fusion, Microsoft Virtual PC (free, recommended)

Advantages: comprehensive interactive testing, real-time

Disadvantages: time-intensive initial setup, requires powerful computer and extra HD space

Multiple IEs

Advantages: real-time testing, easy setup

Disadvantages: Windows-only (or Wine or Parallels?), unreliable version reporting (conditional comments don’t always fire correctly), JavaScript and Active X issues

Final Thoughts

As designers we’d all love nothing more than to ignore Internet Explorer 6 and pretend it’s not there. But depending on your site, 15-50% of your users will be using IE6, so do so at your own peril. We’ve only scratched the surface here, focusing specifically on CSS. However, the iterative browser testing described is equally effective for things like JavaScript development.

Best of luck.

Pick Your Clients and Bill Them Too!

Tired of putting up with bad clients? Instead of endlessly browsing job boards, hoping for a job with a friendly client, why not go out and pick who you want to work with? Believe it or not, this isn’t a joke. Hand picking your clients is easier than you think. All it takes is some mild, social networking skills and the ability to pull yourself away from the computer every once in a while.

How and Why It can Work

If you still think I’m full of crap, let me give you a step-by-step play of how you can pick your own clients.

• You visit a new, privately owned, coffee shop in your town. You like everything about the place and decide you might like to work with the owner.
• Being the freelancer that you are, you go home and check out the website.
• You notice that they have no website or that it is pretty poorly made.
• Go back to the coffee shop a few days later and ask to talk to the manager.
• Upon meeting with the manger, you carefully mention the lack of a website and that you happen to be a designer.
• After getting the owner interested, you pull a couple tricks out of your sleeve and seal the deal.

Obviously this is an over simplified scenario, but it gives you the gist of things. As you can see, all it really takes to be able to start picking your own clients is a little bit of motivation and a slight social life!

Finding Good Clients

The first step in picking your own client is finding one you think you would be interested in working with. Odds are, if you pick a business that inspires you or that you find interesting, you’ll be a lot happier working on the project. Initially, you could just think about businesses in your area that you have always found interesting and see what their website and design status is. While the latter is a fine way to start, I have an even better idea.

Spend some time getting to know your town. Visit the historic downtown areas, trendy city spots, and art districts. While out and about, take note of interesting stores, services, and restaurants. If anything catches your eye, go check it out. Pay special attention to new businesses and privately owned ones, as these are a much easier sell than larger, chain type businesses. Pick up any flyer’s or business cards they have lying around and if possible, get the owners contact information.

How to Initiate Contact

To get the ball rolling in the right direction you want to speak directly to the owner. Don’t waste your time speaking with the cashier or the owners wife (unless of course shes the co-owner). Speaking with anyone other than the owner will likely cause your message to get distorted or lost through the grape vine.

Part of the reason this method of hand picking clients is successful is because its business on a very personal level. When you get a chance to meet the owner in person, don’t think of it as an in person “cold call” or a sales pitch. Business owners will know and appreciate the fact that you want to help them with their business, rather than sell yourself to them.

Talk to the owner as a customer first and a designer second. Don’t start the conversation with; ” I noticed your website sucks hardcore.” Instead, mention that you have visited the business a few times and really liked it so you decided to check out the site and noticed it was a little “out of date.”

Sealing the Deal

If you feel like the business owner will be a good client, their are a few small things you can do to reel them in. The fist is to offer them a lifetime discount, something like 10%. Tell them the initial price of your service and once their eyes widen, bring up the discount. Explain to them that the discount stands for as long as the two of you do business.

If the 10% discount doesn’t get them, offer to let them pay off the amount monthly. Small business owners can handle monthly payments a lot better than lump sums. You can even try to think of some various payment plans or discounts that might seem appealing.

If you’re lucky, you’ll be able to tell right away if the business owner is interested in your service. Unfortunately, most small business owners may need convincing. Its important to note that I said “convince” and not something like arm twisting or begging. If the business owner tries to play hard ball after you offer a discount, you probably don’t want to waste your time.

63 Wallpapers for Designers

Some really cool wallpapers for designers and other cool people.

Read more