Grunge has undoubtedly become my favorite form of design and I know Matt Brett can say the same as well. I believe though that a lot of people misinterpret grunge as being sloppy and unappealing – which is the furthest thing from the truth. So today I want to showcase the best practices and examples of grunge in web design. Feel free to read the article over and leave your thoughts in the comments at the end of the article – we love your opinions here and value your input.

Grunge and Grids

This section will kill off the doubters who say that grunge is sloppy and it can’t be controlled in web design. That is 100% false and as you can see by the awesome designs below, the grunge elements are accents to the grid layout they’ve prepared for their websites. The grunge doesn’t overpower things, and the websites still have a nice and clean, easy to read flow to them.

Building the grid allows the content to flow properly and then once you have the grid and/or wire frame built, you can start adding in the grunge elements that give the design its spunk. I personally use the 960.gs grid for my designs and have also been looking into the 1kb grid as of late. Check them out because it will definitely help your work flow more naturally and give you quicker build times when you get started coding your layout out.

Ryan Dean-Corke ↓

Mindutopia ↓

Corking Design ↓

Artexpo New York ↓

Form + Function ↓

Subtle texture backgrounds

This has to be one of my favorite ways of adding grunge to a website. The subtle, barely visible grunge that gives off just the right amount of texture and personality, while keeping the design itself clean and easy to read once again stomps the ‘messy and unattractive‘ statements people make into the ground.

If you look at the examples below you will notice that the websites rely on slight textures in the backgrounds and maybe 1-2 elements in the design itself to give off the grunge look. For instance, the Snook website has a texture background and also features a hand drawn face in the sidebar, while still keeping things simple and clean.

31Three ↓

Snook ↓

Arbent ↓

Kean Richmond ↓

Adii ↓

Room Five ↓

Matt Hamm ↓

Hand Drawn Elements

Here is a type of grunge web design I am getting more and more into lately. With the recent launch of my Guerrilla web design portfolio I started dabbling in the art of drawing elements by hand for websites. It’s definitely a fun process and helps you stand out from the other websites out there. After all, no one is going to have that same piece of design because you created it yourself.

As you can see in the examples below, you can give subtle hand drawn elements like the scribbles on Not Your Average Joe, or you can get a bit more creative with it like the Elan Snowboards website. Whichever direction you take it in, just remember to have fun and know that your website will definitely turn a few heads.

LePush Mail ↓

Not Your Average Joe ↓

Casio Exilim Lab ↓

Biola Undergrad ↓

Elan Snowboards ↓

Heavy Use of Grunge

And now we get to the craziness! These websites are visually stunning (in my opinion) and showcase just exactly how far you can take grunge in your website design process. They definitely don’t go light on the effects that grunge gives, and they do a damn good job utilizing the grunge in their designs to showcase exactly what their website is about.

That is the one thing I really like about these websites – even though they’re filled with grunge, they still keep the proper intentions for their website clear and focused. It’s something you have to admire and something the designers of these types of websites should all be proud of.

Revolution Church ↓

Cogitatur ↓

The Farmer & The Chef ↓

{ths} ↓

Gary Nock ↓

Adding in different grunge elements

So you’ve built your site but you want to give your design a bit of a grunge element – what do you do? Do you add in a slight grunge background and then pop in a paper with tape like Jason Julien does? Or what about distressing your logo and sidebar title sections like Web Gab?

The examples below show you that you don’t have to overdo the grunge in order to get your creativity showcased in your design. Sometimes a little bit does go a long way, and these are all proof of that.

Jason Julien ↓

Abbey Theatre ↓

Web Gab ↓

Nathalie Kosciusko-Morizet ↓

JOBY ↓

Passing It On To You

Do you have a website that uses grunge in various ways, or do you know of a website that isn’t in the article but should be? Drop us a comment and let us know.

Before really getting into the details, though, just be aware that the actual process can be pretty intensive. In addition to the time I spent writing this tutorial, I also invested several hours just in sketching and drawing.

Now, before I scare you off, here’s a preview of what we’re going to be creating:

As you can see, this is a highly detailed vector pattern, and we’re going to make it highly editable too, allowing you to use up to five different colours! So let’s get started!

Step 1

The first step is to get yourself a nice sharp pencil and some paper and just start sketching. For me, this is by far the easiest way to get my ideas out, and to play with various concepts. I also find the real pencil to be more fluid and organic that my stylus and tablet.

If you do like to do this kind of work with your tablet, then just do your best to emulate the steps digitally. It shouldn’t be too difficult.

Either way, just start sketching. Don’t try to create a masterpiece right off the bat, though. If you have a vision in your head, I would encourage you to try and realize it, but remember that this stage is really very experimental.

Here is the design that I finally settled on:

Notice that there is nothing seamless about this swirly design. Don’t worry about that. All we’re looking for is an element to use as the fundamental basis for our pattern. Making it seamless will come later.

Step 2

Now that we have our sketched element, we want to create a grid upon which to repeat it. Personally, I created my grid in Illustrator, then printed it off on a blank piece of paper. Fortunately, this is really easy to do.

Since we are going to be printing this one off, create a new document with the dimensions of a standard page size – 8.5” x 11”. With the document created, select the Rectangular Grid Tool (hidden beneath the Line Tool). Now, instead of drawing, just click on the artboard. This will bring up a dialogue box, which will give you very precise controls over your grid. I chose to create a 3 by 3 grid, with the following settings:

Click the OK button and your grid will be created automatically. Now, just align it to the centre of the page. It should looks something like this:

Alternatively, you can also just draw your own grid with a ruler and pencil.

Step 3

Regardless of how you ultimately decide to create your grid, it’s still an important step because we’re going to use this grid to position several copies of our designed element together, using a simple trick that I learned when I was just a kid.

If possible, take a photocopy of your design. You can work with the original here if you want, but we’re going to be doing some significant tracing, so I strongly suggest working with a copy.

Then take a dark pencil (like a 6B) and draw all over the back of the page, behind your design. Place the sheet over your grid and trace the with a sharp pencil. This will transfer the graphite on the back of the sheet onto the grid, creating a copy of your design.

Repeat this process several times, rotating the element for greater visual interest. Also, do your best to approximate seamless edges. Wherever the element runs off the edge of your grid, try to line up a continuation on the opposite edge. Here is what I came up with using my design:

You may be able to notice that my seams aren’t quite perfect. They’re close though, and will allow for a reasonable starting point when it comes time to erase our seams.

Tip: If you have access to a lightbox, you might consider using that to do your tracing. It will likely be a bit more precise. Unfortunately, I don’t have a lightbox, so I just used the tracing trick I just outlined.

Step 4

Next, we want to fill in the detail. We’ve placed our element onto the grid several times, and it’s starting to create an interesting looking design, but it still looks a little sparse. To fill it in, just start drawing freehand.

Use the same kind of lines and strokes that you used when designing the element in the first place. In my case, I used more swirls and leaves. Also, look for ways to connect your different elements. My element had one open ended swirl, which I was able to extend into some of the empty areas, or use to connect one element to another.

I also made sure that I filled in each of the blank areas differently. This works to establish uniqueness within repetition. The main element is the ultimately similar, but each repetition is actually quite unique.

Another way to achieve this is by slightly altering each repetition of the element. For example, you could add some extra swirls that connect to other parts of the pattern, or you could erase a small part of the design and re-draw it to make it fit a bit better.

Once you have completed your pattern, I recommend drawing over all your traced lines, just to strengthen them a bit by making them more defined. This is yet another way that you can add more uniqueness to the pattern. Because tracing is far from a perfect science, each repetition of the design element should have slightly different lines. They will be very similar, without being perfect clones of each other.

This is my finalized, hand drawn pattern.

Step 5

Okay, it’s time to go digital and, while the ultimate goal of this tutorial is to create a hand drawn vector pattern, we’re actually going to do a bit of work in Photoshop first, to help prepare the pattern for vectorization.

Scan your drawing into Photoshop and save it as a PSD right away.

Next, draw a selection around the edge of the grid and crop the image down to that size. All that extra stuff beyond the edge of the grid won’t really be needed.

Select Image » Image Size from the menu. You’ll probably notice that your image is not a perfect square (if it, congratulations on your keen pixel-eye). Resize the image into a perfect square. In my case the dimensions were 2088 x 2120, so I simply resized the image to an even 2000 x 2000. This shifted the proportions of the drawing ever so slightly, but the overall effect was negligible and hardly noticeable.

Step 6

Now, we are going to throw down some digital ink. This will be much easier if you have a tablet, but you can still follow along using a mouse.

Create a new layer and call it “inks”. Select a small brush and set your foreground colour to black. Now, on the new layer, just paint over our pattern, making a much cleaner, digital version of it. Depending on the complexity of your design, this can become a pretty intensive process, but it’s an integral part of this design process.

So let’s get to work.

Tip: If your pencil lines scanned darkly, it could be difficult to see the black as you paint it onto your inks layer. To get rectify this, double click your background to convert it to a layer. Then add a new fill layer, set it to white and drag it beneath the scanned layer, which you can now set to about 25% opacity. This will dramatically lighten the background and make it easier to see your “inks”.

Here’s my pattern, fully inked after several hours of work (I am, admittedly, extremely slow at inking with my tablet):

Step 7

Now that we’ve inked the outlines of our pattern, it’s time to start really working on making our edges seamless. With the inks layer selected, choose Filters » Other » Offset from the menu.

Because our pattern is an even 2000 x 2000, we’ll set both the horizontal and vertical offsets to 1000px. Also, make sure that the Wrap Around option is selected. This will take the parts of the image that are shifted off of the canvas and wrap them around, so that the four corners of our original image will meet in the centre, like this:

The edges of the filtered layer will now be perfectly seamless (a natural effect of the Offset filter). However, we can now see seams crossing through the middle of the pattern (as highlighted in red). Many of the original lines come close to meeting up, thanks to our careful pencil work on the grid, but they’re not perfect and we’ll still need to do a bit of work.

Step 8

On your inks layer, use a small black brush and the eraser tool to go along and adjust the lines so that they all run into each other perfectly and seamlessly. In some areas this might mean just a little gentle touch up. In others, you might have erase entire sections and redraw them completely.

Regardless, the idea is to eliminate the obvious breaks, making the pattern completely seamless. Here is our revised pattern:

Notice the distinct lack of seams. The basic design of the pattern is now complete. All that’s left to do now is to vectorize it.

Step 9

This is probably the simplest part of the whole process. Simply save your Photoshop document so that only the ink layer and white background layer are visible. Then, open the PSD in Illustrator. You will be prompted as to whether you want to flatten the image or not. In this case you do.

When the image opens, click on the pattern to select it. At this point it will be a simple bitmap or raster object. In the options bar, you should see a button labelled “Live Trace”. Directly beside that there should be a small black arrow. Click that and select Inked Drawing from the drop-down menu. If Illustrator warns you that this could be a slow process, go ahead and run the trace anyhow.

This is where all that Photoshop inking really shows its worth, because the Live Trace function will quite simply trace the outlines of our pattern and create beautiful, smooth vector paths out of them. Here is a preview:

Our pattern is now a vector. From the preview, it seems that not much has changed, but we’re actually going to have to do just a bit more work to take care of the pesky seams!

Step 10

Before we can do anything, though, we need to expand our pattern. Currently, it exists only as a Live Trace object. To turn it into editable paths, simply select it and click the Expand button in the options bar.

Next, you’ll also want to make sure that everything is a complete path, not just a stroke. I usually just select the entire group and then glance at the fill colour. If it’s black, that means that everything has a black fill. If it is greyed out, that means that only some of the elements have a black fill and that some of them are probably just stroked paths.

Live trace tends to group things logically. In this case, almost the entire pattern was comprised of strokes, which were all grouped together nicely. I simply selected the group and chose Object » Expand from them menu. In the dialogue box, I made sure that only the Strokes option was selected before pressing OK. Now all of my strokes have been expanded into complete paths.

However, each stroke now exists in its own group, so the next step is to just ungroup everything, until you have only one, all-inclusive group.

Step 11

Now it’s time for a bit of alignment work. Check the size of the artboard. Despite the fact that our original Photoshop document was 2000 x 2000 pixels, Illustrator opened the document at 480 x 480 pixels. This is no big deal, but they are important numbers to know.

Next, select the pattern group and check it’s dimensions. Chances are that it won’t be quite perfect, so set it to exactly 480 x 480 pixels.

Finally, check the position of your artboard. If it’s not positioned at 0px and 0px, change the settings so that it is. This will help us with some additional alignment issues.

With everything set to it’s proper size, it’s time to repeat the pattern. Select the main group and, making sure that the reference point is set to the centre, set the coordinates to 240px and 240px, respectively. This will align the middle of our pattern to the top right corner of our artboard. Duplicate the pattern three more times and, using the same technique, align the duplicates to each of the other three corners. Just think of it like a Cartesian Plane, and use positive and negative numbers accordingly (high school geometry is proving its worth!).

Again, here is a preview:

Now you will notice that those pesky seams are back (highlighted in red)! This occurs because, when Illustrator traced our inked lines, it tried to smooth everything out, and thus rounded the corners on our seams, meaning they no longer line up as well as we would like. Well now it’s time to fix them once and for all.

Step 12

To fix the seams, we’re basically just going to repeat a process of draw, combine and smooth, draw, combine and smooth. Find your first break in the seams. Select one of the shapes and, using the pencil tool, extend the shape so that it overlaps with the other shape to which it is supposed to be connected, like this:

Next, select both shapes, open the Pathfinder palette and press the Combine button to unite the selections into a single shape. Then, use the Smooth Tool (hidden within the Pencil Tool group; hold down the Pencil button and then select the tool that looks like a little file). Just draw across your lines to smooth them out and eliminate most of the extraneous anchors that tend to appear when drawing freehand.

If your smoothing dramatically changes the shape of a line, simply use the Direct Selection tool to adjust the position of the anchors and the curves.

Repeat this process anywhere that you find a break in the seams on the artboard. Don’t worry about anything that’s not on the artboard, since we’ll be cropping all that stuff away.

Step 13

Let’s add some colour. Select everything now and convert it all to a Live Paint object. Simply select the Live Paint Bucket tool from the toolbox, choose a colour and click somewhere on the pattern where you would like to apply that colour. Illustrator will convert everything into a new Live Paint object.

Now you can simply go through and fill in the different areas with whatever colours you want. In this case, I want to have the ability to create up to a five-tone pattern, so I’m going to use green for the vines, yellow for the spiky leaves and orange for the rounded leaves, as shown here:

This gives me five colour options, including the black outlines and the still transparent background. Also, as with fixing the seams, you only need to colour the parts of the pattern that actually appear on the artboard.

Step 14

When you’re finished filling in all your colours, it’s time to expand the Live Paint object, by clicking the expand button in the options bar. This will transform all of our coloured cells into shapes, and leave everything in one big group.

Next, create a box, with the exact same dimensions as the artboard – in our case 480 x 480 pixels. Drag this shape beneath our pattern group. This will function as a background.

Duplicate the background shape and drag it above the pattern group. With both this duplicate and the pattern group selected, click the Crop button in the Pathfinder palette.

This will use the topmost shape – in this case our square – and crop everything else that is selected and beneath it to that shape. Now there should be nothing left that is not directly on the artboard. Also, the edges of the pattern should be cut nice and flush, allowing it to tile seamlessly.

Step 15

The last step is simply to clean up the pattern. After expanding the Live Paint object and cropping the group, you will find that you have four different colour elements in your pattern group – black, yellow, orange and green. It’s a good idea to go through and separate these out, either into different groups or entirely different layers.

In this case, I will have five different sub layers – Strokes, Leaves 1, Leaves 2, Vines and Background.

Why? It makes things like changing the colours easier to manage.

And that’s exactly what we’re going to do. The contrasting green, orange and yellow were great for being able to separate different elements into groups, but for the final pattern, we want something a little subtler and more monochromatic. I chose a nice dark red colour and then created swatches with several variations of the colour. I then applied the different colours to each of my different sub layers (in this case I used the same colour for both types of leaves, but you don’t have to). The final pattern looks like this:

That’s A Wrap!

So there you have it. As I noted at the beginning, there are other ways of creating patterns. And, I’ll be the first to admit, there are probably simpler ways. I just wanted to show you a technique for creating high-quality, premium vector patterns with a hand drawn feel! I hope you enjoyed this tutorial, found it useful and maybe even learned a thing or two!

With the ever growing popularity of Twitter it’s no surprise to see that a lot of designers and developers have adopted Twitter and use it to connect with other designers and share links, quotes, ideas, etc…

So, since I’m addicted to typography, I thought I’d share my list of people I follow. This list contains only typography related Twitter users. Some are typeface designers, others represent type foundries and some exist to share news about typography and other related topics.

You can also find the list I created on Twitter here.

I hope you find this post useful! Please keep in mind that this is by no means a complete list so I invite you to leave a comment at the bottom of this post and let me know who I forgot. This list is in no particular order. :)

opentype: Web, graphic and type designer. Favourite topics at the moment: wayfinding, signage and webfonts (@font-face).

lovehelvetica: #LoveHelvetica. LoveNeue. LoveBold. LoveLight. LoveBlack. LoveExpanded. LoveCondensed.

typegoodness: By Frederik Samuel, typegoodness covering great typography

fontdeck: Real typefaces for your website.

jontangerine: Designer, co-founder of Fontdeck, and former journeyman in the Guild of Indian Ocean Octopus Fishermen.

typekit: Bringing real fonts to the web. From your friends at Small Batch Inc.

letterpress: Letterpress for the 21st Century

typerelease: No bio

TheServed: Serving fresh works from top creative professionals.

FontShop: Founded by Erik Spiekermann and Neville Brody. The first independent retailer of digital type. Since 1989.

font: Account for downloadable webfonts: @font-face

nicewebtype: One place for web typography.

typedia: A Shared Encyclopedia of Typefaces

typeoff: Diagnosed with terminal typographicalness.

TypeTweets: typography, typographie, typografie, tipografia, tipografía

TheTypeStudio: Author of Type Rules! 2nd edition, Gourmet Typography Training, TypeTalk on creativepro.com, fy(t)i on fonts.com, All Things Typographic enewsletter.

TypeCon: Official reports from TypeCon HQ. Assorted and sundry typographic musings and sites to see.

FontFont: This Twitter account is brought to you by FSI FontShop International [and its marketing head Ivo Gabrowitsch]

typemytype: No bio.

uppercasemag: No bio.

typesupply: I draw letters.

Typojungle: TypoJungle is an inspirational resource focused on typography, graphic design, books, exhibitions, minimalism and modernism, updated several times a day.

typefacts (German): Typografie verstehen – Christoph Koeberlin

Typecamp: Change how you think about typography and have fun while you’re at it!

typemark: I like… type, bacon, bodoni poster italic, making cars wait while I cross at a pedestrian crossing, graphic design, being a bit older and breathing.

typesociety: The Society of Typographic Aficionados

fanoftypography: Art Director/Graphic Designer with passion for Typography.

hypetype: Graphic Design & Art Direction.

DailyTypeface: A new typeface every day!

typodermic: I make fonts.

jasonsantamaria: Designer by day, designer by night.

typegirl: Type. Typography. Design. History. Music. Food. Love. Not always in this order.

Fontblog (German): Schrift ist nicht alles, aber ohne Schrift ist alles nichts.

typotheque: Fine quality Latin and non-Latin typefaces

Fontscom: Find Your Type!

fontfabric: Our goal is to create high-quality free fonts, which you can easily buy or download free of charge, and which will serve as a good base for any designer project.

hypefortype: HypeForType, helping designers evolve. The fastest growing Type Foundry in the UK working with some of the most talented creatives around.

exljbris: 100% Type Designer

AisleOne: A graphic designer obsessed with grid systems.

processtype: Typeface designers – twittered mostly by Nicole

Typophile: Typographic community celebrating its 9th year. Typophile is a @Punchcut gig.

ilovetypography: Founder of ILT. Fond of fonts, taken by typefaces. Designer, writer, typophile, bibliophile, atheist.

typography: Tales from the typographic adventures of @michaelcharris. For the love of what language looks like.

_twypo: Your dumb micro guide through the newest –and the oldest– typographic news

posttypography: the internet

typographyToday: All you need to know about Typography! every day update

UoR_Typography: No bio.

typoth: typo, typography, web, layout, graphic, design, wordpress, theme, css, template, designer and South Korea ;)

t8y: A typography feed. Headlines and links. Sometime news. That is all.

typeapp: The Typography Manual for the iPhone and iPod Touch

LDNTypographica: A website dedicated to the typographic map of London

typographica: A journal of typography with a focus on typeface reviews. Edited by Stephen Coles.

H_FJ: Typefounders.

houseindustries: Known throughout the world as a prolific type foundry, House Industries has made a considerable impact on the world of design.

commercialtype: No bio.

TypeMafia: No bio.

marksimonson: Type designer and lettering artist.

opto: I spin letters and draw tunes

letterror: Type stuff.

ultrasparky: Expat type nerd with interesting tattoos and terminal shyness

typefacedesign: boot camp for your brain

fontwerk: Open-minded Type Jockey, Singlespeeder and FSI FontShop International’s Marketing Director

Connare: creator of the world’s favourite font!? Photographer to the needy and the sexy ones

FontShopBeNeLux: FontShop is the original independent retailer of digital type. We offer more than 100,000 fonts.

CastleType: Independent type foundry since 1990. Revivals, classic styles, decorative fonts, custom font design. Find updates and news here.

espiekermann: Typomaniac

millertype: No bio.

fontsoup: No bio.

typopath: Graduate from the Digital Design program at VFS with a love for typography and pursuit in strategic branding.

motaitalic: Mota Italic typefoundry – specializing in versatile, multilingual typefaces

friendsoftype: Posts regarding type and the sketchblog. By @thebiganimals & @carambula.

VeerUpdate: We hype photography, illustration, and type.

P22TypeFoundry: No bio.

itfoundry: Designing Typefaces

typedirectors: We are an international organization for all people who are devoted to excellence in typography, both in print and on screen.

ministryoftype: This is purely for new posts and stuff about the site. My personal tweet feed is @aegirthor

thecreativetype: We are an awesome challenge blog for scrapbookers and other crafty types that love letters and typography as much as we do! come play along and win prizes!

theleagueof: Fueling the Open-Source Type Movement, one typeface at a time!

typeclub: We all have passion and love for typography, and want to share our ideas, inspirations and knowledge with everyone. Kern or die!

typesnob: A Type Snob’s opinion, for what it’s worth :) Website coming soon!

typemedia: Masters course in type design at the Royal Academy of Arts (KABK)

QBF_type: Quick Brown Fox Type Foundry is an independent type firm specializing in type creation for design and identity.

verynicetype: Direct feed from the Nice Type channel on Vimeo, showcasing kinetic and motion type animations.

Your Turn To Talk

I hope you liked this post! Make sure you drop a comment below and feel free to chime in and let me know if I forgot anyone. :)

Got your attention yet? Good.

As a freelance web designer, I can speak from the heart when I say that there are times in my business building process that I just wish I could work on things I liked all day long and not have worry about anything else. Passive income is the answer to that problem and since I’m sure that I am not the only one who has thoughts similar to this – you need to continue reading :)

In this article I am going to list and discuss 8 different methods we can earn some passive income and build the ultimate side hustle. In my opinion, a side hustle like this is a must have for any freelancer, because we all know about the feast or famine cycle and the troubles that come along with depending on one source of income. You know the phrase “don’t put all your eggs in one basket“? Yeah, we’re not going to be doing that anymore.

If at the end of the article you come across some questions or would like to discuss things further, just drop a comment and let me know and I’ll answer any questions you may have.

Stock Photography

With the relative low cost of a decent quality camera these days, anyone can take it outside for an hour or two and shoot some pictures to sell on stock photography websites. One site that sticks out in my mind is iStockPhoto.

Imagine uploading 10 photos a week for an entire year. At the end of the year, you’ll have over 500 photos that people can purchase and you can make money off of. This will take a minimal amount of time on your part and will also give you the added benefit of actually getting away from your computer and getting outside.

Vector/Graphic Files

We’ve all heard of Envato and their huge list of marketplaces that totally dominate the entire world, right? (ok, so they don’t dominate the world, but you get my point)

Why not take some of your old designs that clients didn’t accept, polish them up and place them on sites like Graphic River or Video Hive to see if you can earn some extra cash?

Reseller Hosting

Any web designer out there can utilize this method of passive income to the fullest. Places like This* Web Host (aff link) offer super low cost reseller hosting packages that you can use and sell to your web clients.

Now, you don’t have to build an entire web hosting business (you know, domain, logo & website), but by simply letting your web design clients know that you offer hosting, you can earn some really nice passive income over time. Imagine having 20-30 people paying you $10.00 per month hosting – thats an extra 2-3 grand per year in your pocket.

T-Shirts/Clothing

No matter if you’re a web designer, logo designer or anything in between, we all have creative juices that sometimes just flow out of control.

Put that extra energy to use and design some t-shirts. Make them for yourself and you never know who else might love the design. Places like Design by Humans have members vote on t-shirts and the winners win money. The shirt of the day wins $750, the shirt of the week wins $1,000, and the shirt of the month wins $1,750.

How To’s & Ebooks

You know a lot about your line of work, right? Could you put 20-30 thousand words together in ‘how-to’ form and tell people how to do what you do? Our friends over at Freelance Folder put out the Unlimited Freelancer book and I am sure are making some great passive income from the sales of the book.

Price your book right and pack it full of kick ass information and it can earn you some nice bank while you’re away from your computer doing something else you love.

Consulting

Along the lines of the method above, why not take some of your knowledge and teach others how to do things the right way.

Do you know how to market a freelance business properly? Sell consulting services that teach other freelance business owners how they can make more money by marketing the right way. What about design/coding consulting? You could turn your knowledge into a pretty nice bank account by offering classes/seminars and giving out tips/tricks on how to design better.

Themes/Templates

There are two choices (in my opinion) that you can follow here. One, you can create templates (xhtml/css) or themes (wordpress, ecommerce, ect) and sell them on sites like Theme Forest or you can build your own brand up and sell premium themes like Woo Themes and StudioPress.

Yes, if you build a quality brand the work involved may be big, but in the end you’ll have the freedom to design things you love and not have to answer to clients – plus, if you’re that busy building themes, you’re obviously making good money, so stop complaining :)

Affiliate Marketing

No matter if you’ve only got a website that is your portfolio, you can place affiliate links to your web hosting company and other things like the invoicing software your use or premium membership sites you belong to, in the footer of your site where people usually place the “powered by” text.

You can also offer affiliate links during conversations through email/social networks/forums when you’re giving out advice. Make people aware of the links (like I’ve been doing in this post) and you’re good to go. The more your affiliate links are out there, the more likely you are to make some money from them.

So What Are You Waiting For?

Get out there and make some money! Any other tips you’d like to share? I’m sure we could all use some of your wisdom, please share your ideas with the rest of us! :)

Share Some Candy ↓

DFCKR ↓

Brand New ↓

Information Architects ↓

The Designed ↓

Heartworker ↓

Beyond the Pixels ↓

Jaboo ↓

Jonathan Snook ↓

Kim Ellefsens Blog ↓

Human Resources ↓

Burstoid ↓

Max Voltar ↓

Stefan Persson ↓

Triimpuls ↓

andread.it ↓

The Old Fashioned ↓

Novak ↓

Nathan Borror ↓

The Post Family ↓

Inkcover ↓

Aphichat Panjamanee ↓

Design View ↓

This Made My Day ↓

Posh CSS ↓

daus.trala.la ↓

Arbol Textual ↓

Cynosura ↓

Reachably ↓

Quality Peoples ↓

Huwshimi ↓

Blanketrash ↓

It’s Nice That ↓

Do it for the fame ↓

Minima ↓

Stuart Hobday ↓

Spinz ↓

Daring Fireball ↓

MAY ↓

I Love Typography ↓

In conclusion

I know the readers here have some minimal designs that weren’t on the list, so feel free to drop a comment and let us know. We’d love to check out your minimal sites – we seriously love them!

Check out the preview image below ↓

About The Files

All the files are in AI, ESP, PNG and PDF formats so it’s perfect for scaling or if you want to edit or tweak them to fit your designs.

Those vector illustrations are free for personal and commercial use and a license file is included in the zip.

Share The Love

If you liked those vector illustrations and would like to share them with other people please direct them to this post, do not upload these files anywhere else. Of course feel free to share the link to this post with others via the social buttons and badges at the bottom of this post! :)

Please share this link: http://spyrestudios.com/tweevil-free-twitter-vector-illustrations/

Download Tweevil, The Dark Twitter Bird

Hope you like Tweevil! Please let us know what you think, and make sure to either leave a comment or drop us a line if you used Tweevil in your designs, we’d love to see it in action! :)

Hi Jacob! First I’d like to thank you for taking the time to do this interview. Can you tell our readers a little about yourself, what you do, where we can find you online and where you’re from?

Thanks for having me here to share my thoughts Jon! A little bit about myself… well, I’m a web developer/designer. I’m 26. I work with PHP, JavaScript (MooTools/jQuery), HTML/CSS, and a bunch of other random stuff. I’m the founder and chief editor of Six Revisions , a site that caters to web developer and designers. You can find me online in a variety of places: on Twitter tweeting about interesting links and what I had for dinner, on Flickr sharing freebies and random goodies, on Delicious bookmarking tasty links, on Please Critique Me providing constructive feedback on design projects, and on Design Bump lurking and looking for web design and development links.

How long have you been blogging and how (or why) did you start a blog?

Six Revisions has been up for over a year. It started out of need to have a place to share the things I learned while I was building sites and applications, and the other stuff that comes along with that, such as dealing with managers and clients and the helpful tools that I discover (like Web Developer toolbar for FF). I guess people liked the things I published, so I continued to do it. Fast forward to now where Six Revisions is at a point where other designers and developer that are like-minded – that have a desire to share the things they’ve learned and already know – write for Six Revisions.

A typical day in the life of Jacob Gube, how is it like? What do you enjoy the most about your work?

A typical day is very busy. I wake up between 5:00 – 6:30AM every day, depending on how late I go to bed the previous night. The first thing I’ll do is get a pot of coffee brewing. I don’t do anything until I’ve injected my system with a sufficient quantity of caffeine as experience has shown me it’s never a good idea to do anything without coffee

In the mornings, I focus on creative and developmental tasks because this is where I’m most productive. Later in the day, say around 3:00PM, is when I do the administrative and mundane stuff like writing emails and proof-reading articles. The day ends (or at least tries to) at around 9:00PM, though many times I’ll go as late as 11:00PM. I’m very particular about relaxing and not burning out, so on some days, I’ll do absolutely no work. A couple of these a month can sustain such a busy lifestyle without burning out.

I enjoy every part of my work, or else I’d be looking for another profession. I mean, we build things that people use and rely on; they can be the person next door or in a country thousands of miles away, how cool is that?

What does your workspace look like? Clean and organized, messy and chaotic or somewhere in between?

My workspace is very clean, uncluttered, and minimalist. I’m a big fan of simplicity and minimalism – I write about it, I boast about it, I tweet about it, and I encourage it. To me, a clean and uncluttered workspace equates to a clean and uncluttered mindset.

What would be the biggest mistake you’ve made as a designer / developer / blogger / entrepreneur?

I f**k up on a regular basis, so I have a ton to pick from. I’d have to say that one of the biggest mistakes I’ve made recently is not looking into PHP frameworks more seriously. It could’ve saved me a lot of time at work. I’ve been using JS frameworks, but never really bothered with PHP because, until quite recently, I thought they were too slow, too bulky, too complicated, and wouldn’t be able to meet some of the demands I had. CakePHP changed my mind.

If you could give a single piece of advice to people who would like to follow your steps, what would it be?

I’ll borrow from a popular Nike ad tagline: “Just Do It”. A lot of people get caught up in the details and quickly lose motivation to start up a project.

I say, just do it and see what happens. You just might surprise yourself. Do it now, release as soon as you can, let your users dictate what version 1.0 should look like.

What project are you currently working on that you’re particularly proud of, or excited about (apart from SixRevisions)? If you can’t talk about it for some reason, can you tell us what project you had the most fun working on in the past?

I’m working on a social news type site/application built on PHP. I’m so excited about it that I want to tell everyone about it, but it’s a bit too early to reveal any specifics. It’s a personal project – self-funded – and with so many things going on, it gets shoved off for more pressing tasks. But whenever I get a couple of hours to sit down and just write code, that’s what I do. The UI and the code will all be done by me, just sort of as a personal challenge.

Also, I’m finishing up a book on JavaScript, it’s been a long journey and I can’t wait for it to hit the printing presses.

If you had to chose only one typeface or only one app or software, what would it be and why?

Typeface: Rockwell font family, with Vectora a close second.

Wait, no, Vectora’s a bit more flexible than Rockwell since its sans serif which is great for smaller font sizes like body copy. But I’m really not a print designer, so Rockwell would be alright… such a tough question… can’t I just have two for this one?

One app/software: Dropbox. I would’ve said Gmail, but I guess I can try and live without Gmail and just use another email client – but Dropbox is critical to my workflow.

Your 3 favorite blogs or online resources (not necessarily design related)

• Digg
• Stack Overflow
• Smashing Magazine

What’s in your iPod?

Modest Mouse, Dispatch, Supertramp, Young Jeezy, Ben Harper, Jack Johnson…

Thanks Jacob!

I hope you liked this interview with Jacob! Make sure you stop by SixRevisions and follow Jacob on Twitter! Of course feel free to drop by in the comment section and ask Jacob questions!

Hi Brian! First I’d like to thank you for taking the time to do this interview. Can you tell our readers a little about yourself, what you do, where we can find you online and where you’re from?

I’m an independent graphic designer from Philadelphia focusing on brand identity and web design. I am the founder of the design blog, The Design Cubicle, which focuses on helping and inspiring other designers and promoting design awareness to clients. It also showcases my work, creative processes and experiences.

My site, www.brianhoff.net is a more personal extension of my blog, which shares more personal resources, information and work. I call it my INFOlio, information portfolio.

How long have you been blogging and how (or why) did you start a blog?

November 11th is my one-year birthday of The Design Cubicle (so stayed tuned for a complete redesign and giveaway!). I started blogging for a number of reasons: To share and interact with other designers, to help educate and inspire both clients and designers and also serve as an extension to my visual portfolio — I’ve always felt that my blog and writing has helped me become a better designer.

A typical day in the life of Brian Hoff, how is it like? What do you enjoy the most about your work?

My day begins around 8:30am and starts off with a bowl of cereal and strong cup of tea — then it’s off to reading my RSS feeds, emailing, proposals (if need be that day), Twitter and then on to the projects.

I absolutely love typography and simplicity so I would have to say those are my two favorite aspects of my work, and something that I strive to become better at — I don’t think I will ever be satisfied with my work, both good and bad, but it drives me to keep improving and learning.

What does your workspace look like? Clean and organized, messy and chaotic or somewhere in between?

When working my workspace can become a bit messy, but as soon as the day is over, my obsessive tidiness kicks in.

What would be the biggest mistake you’ve made as a designer / developer / blogger / entrepreneur?

Although this sounds like a cliche answer, I would have to say every ‘mistake‘ I have made was a learning experience. I would not be where I am today had it not been for mistakes.

Having recently in the past 8 months gone full time independent, running a business and handling clients has been an on going learning process for me, as well as time management. Both are on my top priority list for improvements to my business.

If you could give a single piece of advice to people who would like to follow your steps, what would it be?

You have to be passionate about what you do — if you start blogging or designing (or anything) for the wrong reasons you will never succeed to the best capability.

Although running your own business has it’s advantages, it’s a full time job. And when I mean full time, I mean my work and my business never ends. I’m always responding to emails, blogging on weekends, networking with people when having drinks at bars, etc — It never stops.

What project are you currently working on that you’re particularly proud of, or excited about? If you can’t talk about it for some reason, can you tell us what project you had the most fun working on in the past?

Although I am not able to release the name of the company at this moment, I have been working on a huge branding project for an online-based company that involved color scheming, logo, stationery, merchandising collateral (bags, wrapping paper, etc.) and an e-commerce website (which I’m currently working on at the moment). It’s progressing beautifully!

If you had to chose only one typeface or only one app or software, what would it be and why?

One typeface… ouch that’s a tough one! How about one type foundry? Anything by H&FJ is brilliant!

As far software that is not the obvious for a designer, I would say LittleSnapper. It’s great solution for capturing and organizing inspiration.

Your 3 favorite blogs or online resources (not necessarily design related)

• I Love Typography
• Carsonified
• Brand New

What’s in your iPod?

Too many to note here, but a few of my favorite bands/artists at the momemt include The Decemberists, Air, Cake, Manchester Orchestra, Modest Mouse, Tool, Pixies, Plus/Minus, Ratatat, The Shins, and Sigur Ros. I’m also a huge fan of ambient drum and bass — great design music!

Thanks Brian!

I hope you enjoyed this interview with Brian!

You can find him on The Design Cubicle, his personal site and of course on Twitter!

Stay tuned! We have one more interview scheduled, which will complete our interview series! :)

There have been countless round ups of websites with blue designs, brown designs and green designs but I have yet to see an article showcasing the portfolio website designs that brandish the purple color. And you know what they say, purple is the color of royalty – maybe these guys and girls are onto something? :)

Purple Rock Scissors ↓

Alexandre Prado ↓

Lisa Moseley ↓

Aespec ↓

Michael Chromik ↓

Design Hearts Me ↓

Full Fat Studios ↓

Jaxestudios ↓

SW Graphic ↓

Forte Creative ↓

One Mighty Roar ↓

Purple Raincloud ↓

GoodBytes ↓

Albert Lo ↓

Brian Wilkins ↓

.MT Comunicação ↓

Andrew Possehl ↓

Septira ↓

72 Thinking: Outlets ↓

Ronnie Morales ↓

Softio ↓

Adam McPeake ↓

Tanq ↓

Redesign Unit ↓

Klar ↓

Don’t forget to subscribe to the feed here in order to keep up to date with all of the articles we publish. We promise that you won’t be disappointed :)

Hey Danny! Thanks for taking the time to do this interview. Can you tell our readers a bit about yourself, what you do, where we can find you and where you’re from?

Well, I guess I am mostly known for my work at Outlaw Design Blog. Aside from the blog, I also run www.Wordpress-Designers.com where I design and develop custom Wordpress based websites. I also do work for a number of other major design blogs and host the TUTS+ podcast.

I don’t do much social networking, but you can keep up with me on Twitter at twitter.com/dannyoutlaw.

How long have you been blogging and why did you start a blog?

I have been running Outlaw Design Blog for a little over 2 years I think I originally got into blogging as a way to promote my design company, but then the blog quickly took on a personality of its own. I eventually decided to make the blog its own separate business.

A typical day in the life of Danny Outlaw, how is it like? What do you enjoy the most about your work?

What I enjoy the most is the fact that I work at home. Which means if I feel like taking a break to pay Halo 3 I can. The dress code is also pretty nice. Most days it consists of nothing but a pair of pajama pants. I typically do a number of blog post during the later hours of the day for the various sites I write for. The early hours of the day I tend to do my design work, as I feel more creative then. In the afternoon I like to take care of emails, client calls, and other various project management tasks.

What does your workspace look like? Clean and organized, messy and chaotic or somewhere in between?

Try to keep my desk pretty clean from clutter. I also try to keep all my documents scanned and on my computer, so I have little need for much real organization. The one thing that does cover my desk right now are toys. I dont have any shelves in my office yet, so my desk is a bit over run with them. I actually have 3 or 4 more boxes of toys that I just dont have anywhere to put right now!

What would be the biggest mistake you’ve made as a designer / developer / blogger / entrepreneur?

I would have to say trying to do everything myself. I used to try to design, develop, manage, etc all myself all the time. Once I decided to start working with other designers and developersI saw an increase in time, increase in profits, and a lot less stress.

If you could give a single piece of advice to people who would like to follow your steps, what would it be?

Don’t underestimate the power of personal branding. Success wont come overnight, but if you do it right, it’s pretty easy. It’s really just a matter of time and sticking with it.

What project are you currently working on that you’re particularly proud of, or excited about? If you can’t talk about it for some reason, can you tell us what project you had the most fun working on in the past?

I always have a ton of projects on the drawing board. I am really excited about the TUTS+ Podcast. We just released the first episode a few weeks ago. It seemed to go over pretty well. We are working on lining up our next few guests and I really can’t wait to see where this goes. Im also working on a book about Freelancing Abroad which I am excited about as well.

If you had to chose only one typeface or only one app or software, what would it be and why?

I would have to say the Things app. I have tried every to-do style app out there, and Things is by far the best one ever made. I dont know if I could live without it at this point.

Your 3 favorite blogs or online resources (not necessarily design related)

• CSSMania – I visit this site daily to see whats being made in the design community.
• Internet Gentleman – This is a buddy of mines new site which showcases some really cool stuff.
• Threadless -I have stopped buying shirts at the store and shop exclusively at Threadless these days.

What’s in your iPod?

I have a lot of everything, but my favorite genre is old country. People like the entire Hank Williams family, Johnny Cash, Johnny Paycheck, etc. But I also really dig old school punk and ska.

Thanks Danny!

I hope you liked this interview with Danny! You can find him on Outlaw Design Blog, WordPress Designers and on Twitter.

Make sure you stop by Danny’s and say hi! Of course feel free to ask Danny any question in the comments below!

Stay tuned! We’ll have more interviews with more awesome designers in the next couple days! :)