A few months ago, as I was working to put together the redesign of the Echo Enduring Blog and Echo Enduring Media, I published an articled entitled “10 Of My Favorite Online Tools for Design and Development“, in which I outlined some of the online tools that I use the most in my work. It turned out to be a pretty popular article, and I think that some people really benefited from it.

Well, after only a few short months, I’m back with another article in the same vein. In the weeks and months since that original post, I’ve come across a bunch more awesome online tools that can make a designer’s life so much easier and I wanted to share them with you.

Text Generators

Despite some very valid arguments again using Lorem Ipsum text, I still frequently find myself in situations where I need some kind of textual placeholder. Perhaps its for creating a theme, or for a client that doesn’t have any copy written. Sometimes I just need a few paragraph of text to run through some JavaScript or jQuery processing. Whatever the need, I am very rarely in the mood to just start cranking out several paragraphs of placeholder text on my own.

That’s where text generators can come in incredibly useful, and I’d like to introduce you to two of these:

BlindTextGenerator

This web app is a great little tool for designers who need to grab some quick placeholder text. It may look simplistic, but don’t let the interface fool you—this little app can pack a big punch, and deliver placeholder text in all kinds of different and interesting ways.

Blind Text Generator allows you to create a wide range of different blocks of placeholder text

It makes use of a number of different base texts, starting with the classic Lorem Ipsum, and including text in both English and Latin. Beyond that, you can control the number of character or words, and the number of paragraphs, offering a surprising degree of flexibility in terms of the length of your text. Being able to turn on <p> tags is a nice touch too.

Fillerati

Fillerati is another placeholder text generator, which spits out text from a number of classic literary works of authors such as Lewis Carrol (Alice in Wonderland), H.G. Wells (War of the Worlds) and Jules Verne (Around the World in 80 Days). Designed in an attractive and contemporary style, this little app is a pleasure to work with.

Fillerati generates placeholder text in a number of different formats, based on a selection of different literary classics

It also provides some added flexibility in the way the placeholder text is generated, allowing you to create paragraphs, headings (ranging from levels 1-6), list elements and even just plain text. The type of content you’re generating also changes the slider control, which you can use to control how many paragraphs, words or list elements you want.

CSS Generators

Now, I’m a huge fan of CSS3 and all the various bits of awesomeness that it provides us with, but as many of these new properties are introduced, I am finding that they are becoming a bit more complex than the most of the properties that we saw in CSS2. That’s cool, but sometimes it makes coding and experimenting a bit more challenging. Well, there are a variety of different generators out there that can help you create your CSS on the fly.

Border Radius

Web services seriously don’t get any simpler than Border Radius. You basically visit the site, provide values for the radius (roundness) of the four corners of a box and grab the CSS.

Border Radius generates simple CSS for creating elements with rounded corners

The only other option is being able to tell the app if you want the WebKit, Gecko (Mozilla) or regular CSS3 properties.

Yes, it may seem ridiculously simple, but it’s also super quick and easy to use and can actually be a real time saver—especially for people who are just getting started with CSS3 (or even CSS in general).

CSS3 Gradient Generator

Of all the new CSS3 properties that we can use (to some degree) here and now, the CSS gradient is probably (in my view) the most complex and daunting of the entire group. As such, a number of different generators have cropped up and the aptly named CSS3 Gradient Generator seems to be a pretty good one.

This app allows you to generate the code for creating CSS3 gradients

I like how big the gradient is preview is, allowing you to really see how one colour blends into the next. A really nice colour selection tool allows you to choose from the colour picker or define them manually in RGB, HSB or hex code. Also, the one-click “Copy the code” option is a really nice feature.

The only thing that I don’t like quite as much is the user interface (UI) for creating, deleting and controling the positioning of the swatches. It’s definitely usable, but it took me a couple of minutes to figure out what all the controls did.

Ultimate CSS Gradient Generator

Obviously, this one is another CSS gradient generator. Despite it’s grandiose name, it does have both some advantages and disadvantages over the CSS3 Gradient Generator that we just looked at (making its ultimate-ness questionable).

Another CSS gradient generator, based on the familiar UI of Photoshop

Self-styled as a Photoshop-like generator, this little tool does take UI cues from Adobe’s flagship application. Most specifically, this comes in the form of the gradient slider, where you can select the individual points within the gradient and adjust the colour, slide them back and forth to change their position and even just click to create new points within the gradient. If you are at all familiar with Photoshop, these controls will seem very natural to you, as will the colour picker window.

Interestingly, though, the colour picker does flip the controls for saturation and hue, with the saturation being controlled by the vertical slider to the right of the colour window, and hue being controlled by the x-axis of the colour window itself. In Photoshop, it is the other way around. Also, as much as I like this tool, it could definitely benefit from a one-click copy function.

CSS Tricks Button Maker

When it comes to the world of CSS, Chris Coyier is the man. He produces all kinds of insanely awesome stuff over at CSS Tricks, and this CSS Button Maker is no exception. Of all the CSS generators that we have already looked at, this one is probably the single biggest time saver if you are looking to style your buttons entirely with CSS.

CSS Trickster Chris Coyier's button generator makes creating slick CSS buttons a breeze

With a wide range of controls that allow you to define the size, padding, border radius, gradient, background, border and :hover and :active states, this generator is a powerful little tool to help you create awesome looking button styles to integrate into your website quickly and easily.

I actually used it just this past week and was more than happy with the results. I did do a couple of minor tweaks to the generated code, but using the generator definitely saved me a ton of time, and I was very happy to see that it degrades pretty nicely in older browsers too!

Typography

I love typography. You might even say that I obsess over it. As I was doing the redesign of this blog back in the summer, I spent hours and hours and hours pouring over different typefaces. So, it should come as no surprise that I have a couple of typography-related tools to share!

Baseline CSS

You’ve probably heard it said before, but it bears repeating—typography is not about picking a cool font. Yes, typeface selection is an important first step, but there are all kinds of other choices that need to be made, like leading (line spacing) and tracking (letter spacing). One important consideration that doesn’t get a lot of attention on the web is baseline alignment. Baseline CSS is a framework that works to solve this particular problem.

An awesome CSS framework for bringing a typographic baseline grid to your web designs

It many ways, it works almost like a reset stylesheet, except that instead of just resetting all the borders and padding and so forth, it actually sets the basic rendering of all the HTML elements to align with each other according to the “defined” baseline. Of course, the baseline itself is theoretical, and actually uses font-sizes, line heights and relative positioning to actually control the alignment, since there is no native baseline CSS property (though wouldn’t that be cool?)

It probably isn’t needed for every site out there, but for a site that uses a lot of text this framework could be a huge asset.

TypeTester

Ever wanted to be able to compare several different typefaces on a web site at the same time? To do this manually would require a lot of work, repeating elements, setting styles, reviewing, resetting styles and so forth. Well, TypeTester is an awesome tool that can do most of the heavy lifting for you.

Type tester is an awesome tool for testing and comparing different typographic stylings and seeing how they render on the web

Basically, you define your sample text, and then have three columns, each containing the same block of text, but each controlled with different options. This means you can look at the text in the same typeface, but at three different sizes, or with three different leadings or colours. You can compare the same text at the same size, but with different typefaces. With powerful controls, the combinations for testing are virtually limitless!

Each column also renders the text in regular, bold, italic and bold-italic weights/styles, as well as in mixed case, upper case and small caps, giving you plenty of options to compare.

In terms of fonts that are available, well there is a list of safe fonts, of default Windows fonts, of default Mac fonts, default Vista fonts and Google fonts. It also says that you can choose your own (providing a list of all your installed fonts), but this doesn’t seem to work quite perfectly (I expect this has something to do with different formats). Still, there are a ton of different options for you to play with.

Oh, and as if all that’s not enough, when you find the perfect type settings, you can also grab the appropriate CSS. Nice!

Other Tools

To end this list off, I have two miscellaneous tools. They don’t really fit together in any distinct category, but I still think that they are all pretty awesome and hope that you can get some use out of them.

Favicon.cc

Sticking with the generator theme for now, we have Favicon.cc. Favicons (those little icons that appear in the status bar and in browser tabs to identify a site) are a small but important consideration when it comes to usability. This tool is a quick and easy way to generate your own favicon from an existing image.

A super simpe online tool for the quick (or not so quick) creation of a favicon for your site

All you have to do is upload an existing image (square works best) and this little app will scale it down to a standard 16 x 16 format. That’s not very big, so I would recommend against using anything overly detailed. Remember this is an icon, not a photo. For those who may be feeling extra adventurous, the app will also allow you to create your own icon from scratch, by defining the colours of each point on the 256 pixel grid. Or, you can use this to make slight tweaks the an icon generated from an uploaded picture.

When you’re done, you just download the .ico file and drop it into the root of your webserver. It’s a fast and easy way to create favicon files.

JSONLint

Last on the list today, we have an awesome and useful JSON validator. I’ve been working with JSON a lot over the past several weeks, and this little tool has been an invaluable resource for me.

Working with JSON? This awesome little validator is a super useful tool for validating and debugging your code

Basically, like most validators, you can just copy your JSON code and paste it into the applications texteara. Then, press the Validate button and in a flash, you’ll be told if your code is valid or not. If it’s not, you’ll get some reasonably descriptive error messages to help you track down the problem and resolve it. I don’t even know how much debugging time this tool has saved me, especially when first learning the ins and outs of JSON.

Also, one hidden feature of this one is that you can just paste a URL instead of actual code. In this case, the app will go out and scrape the JSON from the page and try validating that instead.

Conclusion

Again, like my earlier post, this list is not an exhaustive roundup of all the different resources that are out there on the web. There are all kinds of other awesome apps and tools for us to find and get excited about. So who knows, maybe in another four months I’ll have yet another list of awesome tools to help make our design and development work easier and more streamlined.

What about you? What are some of your favorite resources and web apps that make your work as a designer or developer go more easily? Please feel free to share them!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

As a designer, writer, husband and father (among other things), my life is pretty full and I absolutely love pretty much anything that can save me time. This is especially true when doing my work as a designer. Over the years, I’ve come across a number of awesome little websites and web apps, created by brilliantly helpful people to make my life easier – and yours too.

So, in this article, I’ve decided to share some of my favorite online resources. This isn’t to say that they are necessarily the best or the most powerful. They’re just the ones that I like to use. Some of them are generators of sorts, while others offer customizable and downloadable content that you can use in your own work.

Grids

I like using grids when I build websites, and the one I use most often is probably the 960 grid system, which I wrote about in one of my first posts on this blog. Not only does the grid allow me to create a beautiful, proportionate structure for my designs, it also provides an excellent and consistent framework. This, in turn, means that I can build concepts and prototypes faster than I could if I was coding the entire thing from scratch.

I’ve found this to be especially useful in my last few projects, in which I did a lot more of the design work in the browser itself, rather than mocking it all up in Photoshop.

Anyhow, while the plain-jane 960 grid worked well enough for me for my first few grid-based sites, I’ve been finding more and more that I want to tweak the basic parameters of the grid. For instance, I may want to increase the size of the gutter between columns, or change the number of columns from the standard 12, 16 or 24. Well, there are some awesome grid generator tools out there that I’ve used to do this.

Grid System Generator

The Grid System Generator is a great tool. Personally, I was first drawn to it because it could allow me to customize the standard 960.gs that I had become so accustomed to using. It allows me to specify different widths for the document, change the number of columns, and tweak the spacing of the gutter (through left and right margins). Yet, while CSS is adjusted for my settings, the basic syntax remains the same!

Generate custom CSS grids based on four different frameworks

The Grid System Generator isn’t a one-system app, though. You can also generate custom grid frameworks based on the Golden Grid, 1KB Grid and Simple Grid systems, making it a truly flexible tool with appeal and practical application for a wide range of designers and developers.

Tiny Fluid Grid

As a matter of personal preference when it comes to coding, I tend to prefer working with fixed-width layouts. It just tends to match the way I think – mostly in exact pixel widths. However, on one website that I was designing recently, the background image was extremely important for my client, and because I was using a base width of 960 pixels, this background became somewhat obscured on displays set to 1024 pixels in width.

So, I needed a way to shrink the content area down for smaller displays, while still maintaining the default width for larger displays. In other words, I needed a fluid grid. I could probably have done the math myself and converted the existing, static grid to a fluid one, but fortunately I had just discovered the Tiny Fluid Grid generator a few days earlier!

Generate a custom fluid grid based on the 1KB Grid system

This little web app will generate a fluid grid – based on the 1KB Grid System – and allows you to select the number of columns, the percentage width of the gutter, and (most importantly) the minimum and maximum widths of the grid itself. The syntax is pretty similar to the 960.gs, so I only had to make one slight tweak to the CSS to apply the grid to the existing site, though I had some other CSS trickery to do to force the grid to shrink down when I wanted it to.

Regardless, Tiny Fluid Grid was a real life saver on that project. It also has an awesome GUI. While most other generators just accept numeric input, this one has some really slick sliders that just make it fun to play with!

Typography

Obviously, typography is a hugely important aspect of any design, and the web is no exception. With the increasingly broad browser support for @font-face, and with font replacement services like TypeKit, designers are finding more and more freedom to do incredible things with typography on the web.

It has also paved the way for some really awesome typography-based tools on the web.

Font Squirrel

Looking to add some flair to your website, and move away from standard, web-safe fonts? Using @font-face is a great way to do this, but there are all kinds of licensing issues to be considered before you go uploading fonts to your server. There are also conversions to be made to account for the widest possible browser support.

Font Squirrel helps alleviate some of these issues.

Find fonts and download kits for @font-face integration

It is basically a repository of different fonts which, based on Font Squirrel’s interpretation of their licensing, are freely available to use on your websites. That’s pretty awesome. But it gets even better. The site also allows you to download @font-face kits, which include the font files along with a complete stylesheet that you can easily integrate into your own code.

It has made finding and integrating new fonts into my website an absolute dream.

What the Font?

Ever seen a cool font and wondered what it was? If it was from a famous image or logo, you may be able to find the answer on a forum somewhere (I have before), but that’s not always going to work for everyone. Well, the folks at MyFonts.com have developed a handy little app that you can use to try to satisfy your curiosity. Meet WhatTheFont.

Use this tool to identify cool fonts

Basically, you take a screenshot or photograph of some typography – preferably something unique and well spaced – and upload it to the site. It will then try to decipher the different characters and ask you to confirm that it identified the letters properly. One you’ve done that, the app will go out and try to determine what the font is.

Obviously, it’s not perfect, and the results are going to depend a great deal on the quality of the original source image. From what I can tell, the results also appear to be from MyFont’s own library (which really makes sense, all things considered). Still, it’s a useful little tool that’s fun to play with, and which can potentially introduce you to some awesome new typefaces. I have an app for my iPhone too!

Icons

I love icons. I love finding them, designing them and finding interesting ways of integrating them into my work. A few months ago, I also wrote a series about using icons on the web. All that being said, there are a few really awesome icon resources out there.

Iconza

Iconza is a free icon set fused together with a customizable generator. Basically, it is a set of 112 awesome, monochromatic icons that you can download and use in your designs (with attribution). All on its own, that’s pretty awesome. But it gets better.

Download this icon set with customized size and colour

The Iconza website actually allows for a reasonably broad range of customization options. There are 15 different colour options, including five shades ranging from black, to grey, to white. There are also three different sizes – 32×32, 24×24 and 16×16, and even just a cursory glance will reveal that the icons are optimized for quality at each size, rather than just scaled down. Lastly, this little web app provides an RGB colour selector for setting the background colour of the icons.

Feedicons.com

There is no shortage of RSS icons out there on the web, but if you’re looking for a nice simple solution for your visual RSS needs, then Feedicons.com could be a great solution for you.

Free and simple RSS icons

There are a few different download options, such as a 2 icon pack of 28×28 and 14×14 (the smaller one does look a bit off though). There is also a tiny pack of coloured 12×12 icons. The big one, however, is the developer pack, which contains icons ranging from 12×12 to 128×128, in all kinds of different image formats including editable vectors. This allows you all kinds of flexibility to customize the icons.

iconSweets

Monochromatic icons are probably some of the most useful, in terms of being able to easily integrate them into so many different types of designs, and there are so many different places to find and download such icons. One of my recent favorites is the iconSweet set, by YummyGum.

60 simple and beautiful monochrome icons

This pack contains 60 beautifully designed vector icons that appear to be designed primarily for use in your next iPhone or iPad app, but which could easily also become a focal point of your next web design too. Again, the fact that they are vector based makes them extremely customizable, which is always a bonus for any designer.

Admittedly, I also just really love the design of the website, which is part of the reason that I chose to include this particular set over some of the many others. The pink and grey colour palette and sliding images within the balloon are all really slick. That being said, however, there are lots of other similar sets available out there. To find more, check out this recent article of at SpyreStudios: 40 Minimalist Icon, Symbol & Pictogram Sets.

Other Graphics

As great as icons are, however, they are not the be all and end all of supporting graphics, and there a few other cool graphic-generating web apps that I really dig.

Placehold.it

When building prototypes and mockups of websites, I often don’t have actual images that stick in yet, and need to create a placeholder image. Traditionally, what I used to do was to create a single pixel image and then adjust the properties to stretch it out the the required size. That worked pretty well, but thanks to a recent tweet from SwissMiss, I discovered this incredibly simple and useful little site called Placehold.it.

Grab simple placeholder images of any size

Basically, this simple web app does one thing – it generates greyscale placeholder images of absolutely any size, all with a really simple, URL based syntax that is super easy to remember. All you have to do is insert the appropriate URL into your code, and the app will serve up a placeholder image for you.

It may not seem like a huge deal, but I’m pretty excited about this recent find. I can see it saving me a ton of time in future projects.

StripeMania

Stripes don’t seem to quite as popular in web design as they were two or three years ago, but they’re still something that will never really go out of style entirely. Every once in a while, I find myself needing some stripes for this or that – and not always just for on the web.

StripeMania is an awesome little web app that I’ve blogged about before in my article “17 Useful Pattern Resources“, which I always return to when I need some kind of repeating stripe pattern.

Stripemania

For an app that just generates stripes – something that might seem relatively simple – there are a surprising number of options and controls on this one. You can adjust the stripe width, the spacing width, the orientation, the colours of the stripes and the background and so forth. You can even set a gradient. All this makes for a powerful little tool with almost limitless customization.

AjaxLoad

If your websites are loading any kind of dynamic data through either AJAX or some other custom methodology, chances are that you’re going to want to include some sort of animated graphic, in order to indicate to the user that the data is actually loading. The AjaxLoad site is an awesome solution for this need.

AjaxLoad allows you to generate custom loading animations in GIF format

You can select from over 30 different animated graphics, select the foreground colour and the background colour, then generate and download an animated GIF based on your choices. If you want, you can even make the background transparent, though of course you’ll have to take into consideration the natural drawbacks of GIF transparency.

With the broad range of animations and the extensive customization, this little resource is a great one to keep in your bookmarks!

Conclusion

Obviously, this list is not an exhaustive roundup of all the different resources that are out there on the web. Such a list would be much, much longer and would include all kinds of goodies and awesomeness that I didn’t have the chance to include here. As I stated in the opening, these are merely some of my favorite, bookmarked resources, which I thought might be worth sharing.

What about you? What are some of your favorite resources and web apps that make your work as a designer or developer go more easily? Please feel free to share them!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

This is the second article in a series addressing the use of icons in web design. In the first article, we looked at what an icon is and why it can be an important element web design. Of course, that’s all well and good, but before you can start building icons into your designs, first you need to actually get your hands on some icons. In this article, we will discuss the process of locating and gathering icons for your own library.

Icons and the Web – Part 2: Collecting Icons

Really, icon design is an entire creative branch onto itself, one tends to cross over into the realm of illustration (which is an entirely separate topic to be addressed at a different time). There are certainly many web designers out there who are also capable of creating their own icons, but there are also many more who just don’t have the time, interest or skill to invest in this creative process. Fortunately, there are numerous steps and resources that you can make use of for finding awesome and usable icons.

What follows are some tips that I’ve picked up in building an icon library throughout the course of my own design work.

Keep Your Eyes Peeled

There are hundreds of blogs and other sites giving away different freebie icons sets every single day. Frequently, blog and magazine owners will also publish lists that collect great new icons releases, or of icons of a particular type or design. More often than not, these icons seem to be of the social media type (which, though popular, may be getting just a wee bit tedious), but there are also some other types of really, really great icon sets being released.

So, I suggest keeping a careful eye on your RSS reader, and being willing to spring into download mode at a moment’s notice. When you see an awesome icon set, or something that you think you will be able to make use of at some point in the future, just go ahead and download it to your library for use at a later date. If you’re really lucky, you might even find a new set that is absolutely perfect for your current project!

Also, most sets tend to come in a compressed archive of some sort. Check the contents and make sure that there is a readme file or other documentation outlining credit and licensing information. If there’s not, I would recommend creating a quick text file yourself, and filling it with any pertinent information, such as the artist, the site you downloaded the set from and the license. That way, if you come back to the set months later, it’s quick and easy to find that information.

Bigger is Often Better

Typically, I have also found larger sets to be vastly more useful than smaller sets, simply on the basis of variety. Unless you have specifically commissioned an icon set, the chances of finding a small set with all of the exact icons that you are looking for or feel that you need is probably pretty rare. Since larger sets generally offer a wider variety, they are often also much more useful.

IconEden's Bright set is really extensive, especially for a free set

However, this is not always necessarily the case. Some icons sets can be quite large in terms of the number of icons that they present, but very narrow in the variety of those icons. For instance, a set may contain dozens of glassy button icons, with the same shapes repeated over and over, just in different colours. Or, you may have only a few core icons which are simply used together in other combinations to create more “unique” icons.

Now don’t get me wrong. Neither of these are necessarily bad things when it comes to icon sets. They are simply techniques by which a larger icon set can actually have a much smaller variety (and thus a more minimal potential usefulness) than it’s size might lead you to believe.

Nor am I saying that you should avoid smaller packs, many of which can be a real goldmine! I have simply found myself using the larger packs in my library on a much more frequent basis.

Establish An Icon Map

When starting out on a new project, it can be both helpful and beneficial to begin developing what I like to call an icon map. Basically, it’s a matter of examining the specific needs of the particular site that you are working and making a list of the areas in which you are going to need icons. This list then becomes your icon map, and can work as a guide for helping you determine which icon pack (or packs if you are combining several) will best serve your unique needs.

With this list in hand, you can then begin browsing through the different icon sets that are available to you, either online or in your own library. You can then cross check what’s available in each given pack against what you need. Obviously, the pack that meets the most of your unique needs is likely going to be the pack that you will want to implement.

Also, try not get to focused on one particular icon object (unless you have a good reason). Often, there are several different objects that can represent the same concept, though perhaps with slightly different connotations. For example, the concept of video could be represented by a camcorder, by a strip of film or by a television set. Being more open to different icon objects can often help you get more value and use out of a given pack.

Know Your License

One thing to keep in mind when searching for icons to use in your web designs is the fact that there is a large audience out there who are also looking for application icons, which they can use in their operating systems. As such, many icons are made available free of charge for personal use and this kind of customization. In these cases, the icons are often not available for public and/or commercial use, which may (or may not) rule out their use in your next design.

Even if the icons in a pack are not designed specifically as application icons, it is always important to read and understand the license agreement. Different artists release their work for use in different circumstances. Some icons may be completely free, with no strings attached. Others may require credit, or a backlink, or may limit the ways in which their icons can be used.

Always be sure to follow the specific terms laid out in these agreements. If the creator is kind enough to release them free of charge, it’s only common courtesy to adhere to their wishes. If your particular needs fall outside of the scope of the license, consider contacting the creator and seeing if you can work out an alternate arrangement. You may have to pay a little bit, but hopefully it’s a small price for the perfect icon set!

Resources

Of course, all of this talk about picking and choosing the right icons and building your own library won’t do anyone a lick of good if you don’t know where to find awesome icon sets in the first place! Well, I’m going to help you out in that regard too! Here are some great resources for finding equally awesome icons (both free and paid).

IconEden

IconEden is a great icon site, and some of my all time favorite icon sets have come from here, including the Bright and Milky sets, both of which are good sized and totally free sets. Additionally, IconEden also has a collection of premium sets, featuring as many as 440 awesome icons in a single set! Be sure to check them out!

IconEden

DryIcons

DryIcons is one of the single largest repositories of totally rocking icons, which can be used in both personal and commercial projects! One of the only requirements is to provide a link back to the DryIcons site, which is certainly a small price to pay for such awesome resources. If you just can’t bring yourself to add the link, though, you can always purchase a commercial license too.

DryIcons

IconShock

Like DryIcons, IconShock offers a huge repository of free icons for both personal and commercial use. Again, you will find plenty of social media related icons here, and even more character icons, based on popular cultural works (movies, video games, comics). Many of the free sets are simply samples of larger, premium packs, which can be purchased for a price.

IconShock

IconLab

IconLab is an icon design firm offering a variety of different icons. They have some really cool freebie icons, and some really great premium ones. I’ve reviewed some of the pricing on these premium icons too, and it’s very reasonable for the quality of the icons.

IconLab

IconDock

IconDock is an icon site by Nick La, creator of Web Designer Wall and the founder of N.Design Studio. Nick has created some really awesome icons, most of which are of a premium nature and can be purchased in packs, or individually, which is something I haven’t seen on too many other icon sites. There are also some freebies available too, but you have to visit the blog portion of the site to find them.

IconDock

MediaLoot

Icons are certainly among the many different design resources that MediaLoot has to offer. Many are reserved strictly for members, but there are also some really awesome freebie sets that you can download for free. MediaLoot is still a really new site too, so you can definitely expect the total icon library to grow.

MediaLoot - Premium Graphic Design Resources

deviantART

Obviously, deviantART is so much more than just an icon repository, but there are plenty of awesome icons to be found there, if you’re willing to take the time to really look. A word of warning though: many of these icons are provided strictly for desktop customization (as discussed above) and may not be available for use in your next web design.

deviantART

Smashing Magazine

I certainly recognize that Smashing Magazine is more than an icon site, but it is also one of my favourite resources to turn to when I’m looking for a new icon set. They have released a number of their own freebie icons, but even more importantly they periodically publish lists of some of the best new icons out there on the net!

Smashing Magazine

Conclusion

Now, through two articles, we’ve discussed why using icons can be hugely beneficial for your web designs, and looked at where and how to find sets to help build your own library. Next week, we’ll look at some techniques for helping you organize those icons!

In the meantime, feel free to share your own thoughts and views on building an icon library. Is there another site or resource that you would recommend? Do you have any other tips for finding the best and most relevant icons?

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

I love seamless patterns. For me, they are one of the coolest and most useful design elements that you can collect, and they come in all sorts of different varieties. You can also use them in Photoshop, Illustrator and as background in web designs. That’s some pretty wicked flexibility.

Of course, not all designers have the time, skill or motivation to create their own seamless patterns. It can be pretty tedious work. Fortunately, there’s a ton of really great resources out there on this vast internet of ours. In today’s post, we’re going to look some of these totally free resources, which you can turn to when the need for a pattern arises. With these various sites at your disposal, you’ll have a really strong foundation for becoming a pattern master!

Downloadable Patterns

Let’s start with the basics. There are a number of different sites that offer free seamless pattern downloads. These patterns can come in a variety of forms, from basic JPGs, to transparent PNGs, right through to fully editable vectors or complete Photoshop pattern libraries.

Patternhead

Patternhead is an awesome pattern blog, in which creator John Rawsterne freely gives away really awesome patterns on a fairly regular basis. He also occasionally posts about other pattern freebies that he has found across the internet, and has a few tutorial and inspiration posts, too.

Patternhead

There is also a premium shopping section to Patternhead, where you can actually purchase licenses for any one of a few dozen more detailed patterns.

Pattern8

Pattern8 is actually a sister site to Patternhead, and is designed to make browsing patterns really simple. Instead of working through the different patterns post by post, you can actually view large collections of patterns on single pages. When you find a pattern you like, just click it to be taken to its own unique page, where you can download it.

Pattern8

All of the patterns on this site are actually provided in straight pixel format, unlike Patternhead, where the patterns are come in vector format. Fortunately, John also includes a link from Pattern8 back to Patternhead, so that you can pick up the vector pattern if you want.

Another really great feature of this site is the ability to browse the various patterns by colour. Just click on any of the tiny colour swatches across the top of the page, and all the patterns of that particular colour will be served up for you! That can make it a whole lot easier when looking for a pattern to match a specific palette.

Ava7 Patterns

Ava7 Patterns is a really nifty little site offering over 1300 free seamless patterns (as of the time of posting) for you to download. Like Pattern8, it also has the functionality to allow you to filter the patterns by their primary colour. Additionally, there is a similar tool which filters the patterns based on their basic shape. Tres cool.

Ava7 Patterns

This is also a really fun site. The design uses simple, bold colours, and there is an interesting effect in which, when you scroll the page, the patterns appear to stay locked in place. There are also a few features that really appear to be nothing more than a bit of fun, such as the “kill the fly” icon, containing a somewhat obscured but still very recognizable Internet Explorer icon. Try moving your mouse over the fly, to see it pounced upon by the bigger and stronger Firefox spider! Too funny!

PatternWall

Things don’t get much simpler than the PatternWall when it comes downloading seamless patterns. It’s pretty much exactly what it sounds like – a whole collection of different patterns all posted on a single page. Just click on the pattern you’re interested in to bring up a larger, tiled preview and a download button. Click the button to start the download.

PatternWall

It really is that simple. Oh, and just so you know, there are some patterns obscured by the cardboard header and advertising sidebar. To get these patterns, just click the hovering “hide cardboard” button at the bottom of the page and watching the obscuring elements slide away.

DinPattern

DinPattern is another site with dozens and dozens of really cool patterns that you can download for free. I have to say that the detail in a lot of the patterns on this site – all designed by Even Eckard – is really outstanding. The quality here is at a level that I would expect from premium pay-for textures.

Din Pattern

Now, I should note that these patterns all appear to be pixel based. No scalable vectors here. The size of the patterns is also pretty small. They will work great for website backgrounds, but can’t really be blown up. Still, in my view that doesn’t take anything away from the quality of this site.

The Design Inspiration – Patterns

The Design Inspiration is a site that collects all kinds of design related materials. There are logos, illustrations, websites, fonts, articles and, of course, patterns. A quick count suggests that there are about 243 different patterns here, which is a fairly decent collection!

The Design Inspiration - Patterns

Unlike most of the other sites in this article, this one doesn’t actually store all of its patterns on its own server. A few of them are immediately downloadable, but for the most part you will be redirected to the creator’s site. That’s not necessarily a bad thing, as it can be a great way to find other cool resources, and certainly shouldn’t dissuade you from checking this site out.

Vecteezy (with Pattern Filter)

Vecteezy is probably one of the best collections of free vector downloads on the internet. I know that, of all the sites that I have submitted my own vectors to, I see the most traffic from Vecteezy. There have been a number of different seamless vector patterns posted to this site, and you can see them all just by filtering the gallery to display items in the pattern category. Fortunately for you, the links I’ve included here already have this filter activated.

Vecteezy (with Pattern Filter)

There is no standard format for the packaging of these patterns, so you can expect to find all kinds of different things in the zip files. Some will just contain a simple EPS. Others, like my Imperial Leaf pattern (featured in the thumbnail above), contain multiple colour schemes in both AI and PNG formats.

Brusheezy (Photoshop Patterns)

If you don’t already know, Brusheezy is a sister site to Vecteezy, with one key difference, which should be obvious from the names. Instead of focusing on vectors, this site focuses on Brushes. But wait, you ask, isn’t this a post about patterns not brushes? True. However, in addition to their huge assortment of incredible (and sometimes not-so-incredible) Photoshop brushes, Brusheezy also has a section dedicated entirely to patterns.

Brusheezy (Photoshop Patterns)

Unlike the patterns on Vecteezy, though, these files are actually Photoshop pattern presets, meaning that you can just load these directly into Photoshop and start using them right away, provided your version is compatible with the set. Some downloads will also include a PNG or other file of the pattern, too, giving you a bit of flexibility or allowing you to use the image as a background in a website.

Pattern Generators

In addition to all the really wicked stock patterns you can download from the sites listed above, there are also some pattern generation sites out there that actually allow you to create or customize patterns. With these tools, you are basically taking a stock pattern of some sort and using a variety of different settings to modify and customize the pattern to your liking.

PatternCooler

At first glance, PatternCooler may look a lot like some of the other pattern galleries that we have seen so far, but don’t be fooled. There’s actually a lot more to it than that. If you check out the little icons beneath each pattern preview, you should notice that, in addition to having the option to download the pattern, you can also change the colours and size of the pattern!

PatternCooler

Making your own pattern is basically a two step process. First, you can change the colours of different parts of the pattern. This basically turns a simple design into the blueprint for millions of different combinations. Secondly, you can also change the size of the pattern. Once you’ve set your colours and size, your pattern will become available for download! Some of the designs are really sweet, too, so this is an awesome resource.

You can also create an account on this site, which allows you to save your various creations. Even cooler, though, is the fact that it lets you save your colours. This makes it really easy to create a number of different patterns all based on the same palette.

COLOURLovers – Patterns

COLOURLovers is a site all about colour (go figure). You can browse and create palettes and colours and such, but there is also a section dedicated to patterns! In some respects this section of the site bridges the (narrow) gap between pattern galleries and pattern generators, in that it actually is both. There are all sorts of pre-fabricated patterns that you can browse and download. Additionally, you can also create a new pattern based on their various templates

COLOURlover

The pattern generator is actually really easy to use. The only thing that I can’t get to work is to figure out how to actually save the pattern. I think I have to complete the form below the generator, but I didn’t really want to post a test pattern for everyone on the site to see, and I didn’t really have a source of inspiration for my playing around. But if you want to complete the form and post your own design, hopefully you can get it to work!

If not, the site still works as a really great gallery type resource, whereby you can download a ton of already customized patterns.

Stripe Generator

Who doesn’t love stripes? They are very Web 2.0, and with this handy tool, you can create all the stripes you want. This simple generator has a number of options that allow you to customize your stripes, including size, spacing, background options, shadowing and orientation. When you combine all of these different options, you have a really powerful and flexible tool!

Stripe Generator

The only thing that I wish this tool had is the ability to add gradients to your stripes. Fortunately there is another stripe generator that allow for gradients, which we’ll get to below.

Tartan Designer

Ever wanted to create your own Scottish-inspired tartan? Or maybe you actually are Scottish and want to make a pattern based on the colours of yer clan! Then Tartan Designer is the tool for you. True to its name, this site allows you to create your own repeating tartan pattern with a few simple controls! Just pick your colours, the width of your bands, the size of the tread and the orientation, then press the download button. Simple as pie. Or haggis.

Tartan Maker

The Tartan Designer site was also created by the same people who created the Stripe Generator, and uses some pretty similar functionality! There is also a really cool connection between the two. Hop back over to Stripe Generator and have a look at the icon just below the preview, which says “create a tartan with these colors”. Clicking this icon will actually open a new window and send you over to Tartan Designer, with a new tartan based on your stripe colours! Yet another awesome way to maintain some continuity between colour palettes.

Stripemania

Stripemania rules. Of all of the pages in this article, this is probably one of the ones that I have been using the longest. And, of the two different stripe generators, this one is certainly my favorite. There’s not really all that much to say about this particular site, though. It really is what it sounds like – another site dedicated entirely to the creation of stripe patterns.

Stripemania

A lot of the controls on this one are really similar to Stripe Generator, and though the later does have a few more options, the one thing that Stripemania offers that Stripe Generator doesn’t seem to have is the ability to create gradient filled stripes. This may not seem like that big of a deal, that simple gradient can really add a lot of depth to the pattern.

The one thing that does drive me absolutely nuts about this site, though, is the colour sampler. You can move around it’s colour visualizer, much like you would in Photoshop. Select a colour this way and the main swatch will update accordingly. However, while entering a hexadecimal colour code will change the colour in the visualizer, I can never seem to get it to update the actual swatch. I can usually approximate the colour I need, but for precise colour control, this apparent glitch really throws a wrench in what would otherwise be a top notch tool!

Pattern Tutorials

Maybe, after having seen all of these awesome pattern resources, you’ve been greatly inspired. Maybe, in all that material, you just can’t find what you’re looking for. Whatever reason you might have, if you want to try your own hand at making some wicked looking patterns, I’ve also collected a few tutorials to help arm you with the knowledge you’ll need.

Vector Freebie & Micro Tutorial: Seamless Swirls

This is a pretty simple tutorial in which GoMedia’s own Adam Wagner explains the process that he used to create a ridiculously detailed seamless vector pattern, based on just a few simple ingredients. As you’ll see, it’s a long and involved process, but the basic principal is actually really simple, as evidenced by the brevity of the steps

Vector Freebie & Micro Tutorial: Seamless Swirls

Be sure to read the comments, too, many of which actually offer some alternate methods for creating patterns. The comment by Track6 is particularly useful. Oh yeah, and the pattern that Adam creates? Freebie! That’s right, it’s available for download thanks to the endless generosity of the fine folk at GoMedia. 

Creating seamless patterns in Illustrator

In this tutorial, Illustrator all-star Veerle Pieters explains how to create an Illustrator pattern swatch. Of course, many of the same techniques would be used for creating just a basic vector pattern that you could then import into Photoshop or save as a PNG or JPEG for use on the web.

Creating seamless patterns in Illustrator

Some of the writing on this one is a bit dense, and some of the steps come at your in almost rapid-fire succession, so be sure to pay close attention. There’s really nothing deep, dark and mysterious here, but I will say that a couple of the tips at the end were news to me! I don’t use pattern swatches in Illustrator all that often, but it was really cool to learn that you can actually scale and rotate them using basic transform tools!

How to Make a Perfect Seamless Vector Pattern

I’ve posted about this tutorial before in my Two Useful Design Articles post. As always, I have to say how much I really love BittBox. There is so much great and useful knowledge and freebies there. Anyhow, this tutorial basically explains how to use Illustrator’s alignment tools to create a really basic seamless pattern.

How to Make a Perfect Seamless Vector Pattern

The example used here is probably not the most brilliant pattern ever created, but I think it works well for illustrative purposes. I actually used some of what I learned from this tutorial to create my Imperial Leaf pattern, which I think is a little more interesting. It’s really all about learning how to take the elements of your pattern and line them up properly in order to achieve perfect seams.

How to Create a Seamless pattern in 10 steps

Here is still another tutorial about how to create a seamless pattern in Illustrator. This one is probably the closest to the technique that I actually use, though it’s not quite the same. I use the concept of repeating my elements and letting them all hang over the edge of the art box or art area, however, this tutorial seems to be missing some of the mathematical precision that I like to use (and which I learned from the BittBox tutorial).

How to Create a Seamless pattern in 10 steps

Still, if it works it works, right?

One thing to note about this tutorial though – while the information is pretty good, the writing is horrid. More specifically, the punctuation is just downright bizarre, and for me (a grammar fiend) it’s just plain distracting. Hopefully you will have an easier time reading this than I did.

So there you have it folks, 17 different pattern resources for you to devour. Have fun, but please remeber to read the license agreements for any patterns that you download! Oh, why not leave a comment and let everyone know which resources are your favorites, or whether there are any other great resources that I missed!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd