A Little About Web Design Resources to Share

This posting will be either a weekly or bi-weekly posting in which I share some of the latest web design resources that I utilize in my design work.  These are primarily links to websites that I find very interesting or collections of resources that I have gathered from around the web to share.

0to255.com

0to255.com
0to255.com

http://0to255.com/

This website has saved me so much time recently.  I used to have to keep Adobe Photoshop open while coding CSS to find tints and shades of the primary colors of a particular website.  I’d then have to tweak sliders in the color wheel to get what I thought was a particular shade.  Well not any more.  The 0to255.com website allows me to find different color variations when I’m coding and/or designing.  I simply punch in a color and the website will find all of the color variations from white to black and by clicking on the color, the hex code is copied to the clipboard.  That’s it!  Saves me time and effort in finding color variations.  Great tool.

Stripegenerator.com

http://www.stripegenerator.com/

Stripegenerator.com

Stripgenerator.com

I like stripes as they do a little bit to spice up backgrounds and make them a little more visually interesting.  The only problem is, using Photoshop they take too long to make.  Sure you can import a few patterns or brushes but you’re bound to the dimensions and settings of that pattern.  For example, you can adjust the spacing between lines easily or change the thickness of the line easily either.  So you’d have to have a bunch of patterns in Photoshop to make this happen (then finding them can be an issue as well).

Well that’s were stripegenerator.com comes in handy.  At this site you can create your own stripe patterns on the fly within the browser.  How cool!  You can adjust the stripe size, spacing, color and stripe orientation.  There are other customizations that you can choose as well.  The tool generates a downloadable PNG file that you can plug directly into your website via CSS.

I have one complaint about stripegenerator.com though and that is that you can’t create transparent space between the stripes.  This is so that the background-color property in CSS can show through between the stripes.  However, I was able to pull the .png file into Photoshop and edit out the white space.