Archives for category: Web Design Resources

Latest Resources

Here are a few of the latest resources that I’ve been using in my web design work.  These resources/sites have been very helpful and have saved me a tremendous amount of time.

Border-Radius.com

border-radius.com

http://border-radius.com/

Probably my favorite site right now for doing rounded corners because it’s the easiest and quickest that I have found.  You just simply place a value in the boxes that correspond to a specific corner of the box and the CSS is generated inside the box automatically.  It’s great for generating code for rounding corners on a box where you don’t need all of the corners rounded.  Great tool.

CSS Sprit.es

http://css-sprit.es/css-sprit.es

I’ve been doing a fair amount of sprite work lately on designing the new rebornweb.com website.  This site has been a good help in doing this.  There is one thing that I think the site could do better.  After uploading the images, it’d be nice to be able to order them and/or reorder them instead of being surprised as to where the images will line up (i.e. whether or not an image is on the left or right, etc.).  It also requires flash as I think it’s using the jQuery uploader or something but other than that, I like the sample code and image generation.

Advertisements

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.