Due to its popularity in current webdesign I put together a collection of 31 impressive ‘hand drawn’ fonts.

Whilst the all-time favorite Helvetica font provides a clean and sharp look, ‘hand drawn’ fonts give your website a more personal and sometimes more interesting touch. They can be used for various elements in web as well as print design.

Most of the fonts are available under a Creative Commons License. But please make sure to check the details before using the fonts for commercial projects.

Sketch Block

Mia’s Scribblings

Rock Show Whiplash

Peixe Frito

3Dumb & 2Dumb

Bearpaw

FFF Tusj

Against Myself

The Quiet Scream

WC Roughtrad Bold

Pointy

Pee Pants Script

Karabine

Sketch Rockwell

Waste of Time

Tire Shop

scrubble

Estrya’s Handwriting

Fail

HandVetica

Grutch Shaded

Clementine Sketch

Fh Scribble

My Turtle

Jump Start

MyCoy – Hello Lori

Oh Ashy

Love Ya Like A Sister

Aguzlo

Barnes ERC

JamaiStevie

More and more people like and user Twitter and therefore many siteowners want to place a follow-link on their website. But as simple text links are too uninteresting, we have collected the best icons and graphics on the internet. 

Twitter icon by fast icon

Twitter icon set by smashing magazine

Twitter social icon by design reviver

31 twitter icons by vincentabry

A little bird told me by mattknow

Twitter icons by flockey

Twitter icon by phiredesign

Cute twitter bird icon by wefunction

Free twitter graphics by randa clay design

Twitter birdy icon by Loondesign

Twitter icons by icontexto

It’s twitter time! by productivedreams

Twitter icons with attitude by monkeyworks

Pratika twitter icon by smashing magazine

(MAX)Icone blog by webfruits

Web 2Origami by Iampaddy

High resolution twitter bird icons by the design superhero

Happy twitter birds by webdesign.fm

Cute tweeters icon set by smashing magazine

Glossy twitter icons by AODdesign

Sticky twitter icons by Kuerbisfeld

The leaves fall by smashing magazine

For all who want to make their own one:

Create a twitter style bird mascot by vectortuts

Adobe Illustrator has become one of the leading products for vector design, especially icon design. But when you start to create your first icon, you have to keep one thing in mind – bitmap or vector? (As the guys of firewheeldesign point out, vector icons are less work than those made with Photoshop. On the other hand, scaled vector graphics don’t look very nice in comparison to icons created with Photoshop) All in all it’s a decison between saving time and getting the best possible quality.

To understand the basics of icon design, read the following articles:

7 Principles of Effective Icon Design by PSDTUTS

10 Mistakes in Icon Design by Turbomilk

Now that you are a bit familar with Icon design – try these tutorials:

Vectortuts.com

Create a Detailed Camera with Photo Icon

Create a Vector Film Slate Icon

Make a Handy 3D Vector Calendar Icon

How to Create a Vector Light Bulb Icon with Inkscape

How to Turn Glasses into a Great Geek Icon

Illustrate a Fun Magnify Zoom Icon

SpoonGraphics

Create a Vector RSS Icon with Illustrator

Translucent IM Style Illustrator Icon Tutorial

How to Create a Vector iMac Graphic in Illustrator

N.Design Studio

iTune icon

Glassy Button

Other:

Complicate Orb Icon by Hatching Egg Story

Designing a Sleek Pencil Icon by Design Blurb

Creating A Folder Icon by MagnusFx

Create an envelpe icon with a satin feel by aiVault

Design Float Circle Icon by Qbrushes

Do you want a special RSS icon for your website? Actually most blogs and newssites have RSS feeds. But many have just a standard button. You might want to show that your are more creative then they are. Use one of these free and fresh RSS icons so that you are in contrast of the masses.

RSS icon pack vol.2

RSS feed by Aaron Ovadia

MycirclesRSS

RSS icon by carlnewton

Feedicons²

Acid RSS by cavin

RSS Owl by balpert

RSS icon by datamouse

RSS icon set from smashingmagazine

3D RSS feeds icon

Circle feeds icons

Free RSS feed icons

Alternative RSS icon by mouserunner

RSS reader icon by twinware

NewsFire by barrymieny

Christmas RSS icons

RSS icons from simdes

Vektor RSS buttons

And for everyone how searches for a standard RSS icon:

Feedicons

Cool Wallpaper for your Mac, made by Ben Adamson. Available in 1024×640 and 1920×1200.

Conquer the Universe Background. A galaxy wallpaper with Apple logo to honor the great birth of Leopard. Offered in 1920×1200, with and without the Apple logo.

Stylish Simpsons Wallpaper with a hungry Homer and a sweet Apple.

Free and Customizable Leopard Wallpapers. The wallpapers currently come in the following dimensions: 1024×768, 1280×800, 1280×960 and 1600×1200. Each of them suits a different mood.

Leopard (Red) and Leopard Server (Blue) Aurora Wallpaper. Both come in 1024×640 and 2560×1600.

30 Apple related wallpapers (Apple logo, MacOS, iPod) that are definitely worth a look.

Retro Apple logo but with a glassy modern look. The Wallpaper comes in 3 big sizes (1280 x 1024, 1600 x 1200, 2560 x 1600) from which you can create all other common resolutions.

Do you have a banner for your website or blog? If not, create one right now! In order to do this, I summed up a few basic tips.

1. Be professional: A banner is your virtual business card. People are getting their first impressions of your website based on your banner ad, so you must to be sure that it presents you in the best possible manner. This means you should be very careful with using correct spelling and grammar. Also, choose font sizes, styles and colors that maximize your banners readability. If you don’t do so some people might get a bad feeling of your site.

2. Ask for an action: What do you want people to do when they see your banner? Most probably you want them to visit your website. Write something like “click here” or “enter now” on it. On the Internet you can see many examples of this strategy.

3. Keep it simple: Most people are looking at a banner for less than a second. You must be sure that the message of your graphic can be easily understood. Organize your banner/advertising clear and concise to increase the possibility that the viewer gets your message. It’s very important to use just a few plain words because you can provide the user with more information on your website.

4. Raise attention or emotion: Use words like free, secret or other to raise the user’s attention. Make the viewer curious in your website. Maybe use a pun or contrast.

5. We want benefits, not features: What’s the difference between a feature and a benefit? A feature is the service you offer your visitors. A benefit is the effect on your visitors. What seems to be most appealing to you? – “We are specialized in finding deductions” (feature) or “Pay less tax” (benefit)? It is only important to say how your service improves your visitors life and not how you do that.

6. Test it: Design several ads and think about different slogans. Then run them for a short time and compare the traffic you get by the different ads. Use the most successful one and be sure your banners are always up-to-date!

7. Other important things to know: Be sure that your banner isn’t bigger then 20kb that it loads quickly. Also use the common formats as you can see at the bottom of this post.

If you don’t know where to place your banner, take a look at Google’s “AdSense Ad-Locations Heatmap”

• Ads closer to the center of the page tend to perform better
• Ads above the fold tend to perform better than those below the fold
• Ads placed at the end of articles tend to do well, even though they’re below the fold
• Ads placed near site navigation or by images or other rich content tend to do well, too

Standard Internet Ad Sizes:
Ad Size Ad Type
468 x 60 Full banner
392 x 72 Full Banner/ Vertical Navigation Bar
234 x 60 Half Banner
125 x 125 Square Button
120 x 90 Button #1
120 x 60 Button #2
120 x 240 Vertical Banner
728 x 90 Leader board
160 x 600 Wide Skyscraper
120 x 600 Skyscraper
300 x 600 Half Page Ad

This week I will present you 5 extraordinary fonts from deviantart.com, an outstanding community for art lovers.

Advent – This font features 7 weights (regular, light, extra light, regular oblique regular rounded, bold and extra bold) of advent along with carefully adjusted kerning. Unless written approval by the author Andreas Kalpakidis only personal usage of it is allowed.

Sliced AB – The typeface includes many of the key elements you need in a font, upper and lower case, as well as numerals and punctuation. Created by Alex Banks.

Bobel – by Chris Pitney. Licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.

Manu – Both, Oktober and Manu, are fonts designed by Alen Stojanac. The author grants permission to use, alter and distribute them, either commercially or non-commercially.

Oktober

See our Font Tests
If you want to see these fonts’ appearance before downloading them, have a look a our Font-Tests (.pdf) – Font Test with 8px, Test with 12px, Font Test with 14px, Test with 18px and Font Test with 26px font-size.

Please follow the license agreements, they can change from time to time.

Easter is coming and as the holiday approaches, it’s time to get into the right Easter spirit. Out there you find a lot of bad wallpapers and icons for Easter. That’s why I carried together a few high-quality and well-made works.

Wallpaper

Happy Easter! 1280×1024

Easter Eggs 1152×864

Happy Easter! 1024×768

Easter bunny 1600×1200

Icons

Oslo Easter, a iconset of 12 icons

Easter icons, 4 beautiful icons

Nowadays quite everyone uses stylesheets to make their sites more beautiful – colored tables, customized lists and cool tag clouds. If you know the right tricks nothing is impossible, but there is one problem.. do you know which browsers your visitors have? Of course not! And speaking from usability not only standard conform stylesheets and (x)HTML structure is necessary, but also a browser-spanning steady behaviour.

CSS3 is in the works, while CSS2.1 still isn’t completely integrated in all the common browsers. Some even have problems with CSS2 specifications. So what to do..? At first if you want to know how good your browser renders the different CSS commands, have a look at the Acid-Testpage. This week a new test, including a lot of CSS3 commands, has been published. While no final-version of the most popular browsers achieves more than 50 percent, some nightly builds obtain good results. This doesn’t mean that it is impossible to create equal looking sites for any browser, but it shows you how different they interpret/not interpret each command. Always the best thing is to compare your sites in different browsers and if necessary make use of some hacks.

Here you can find more help with CSS and standards:

• Quirksmode.org, CSS compatibility list with many examples
• Noupe.com, 7 CSS Hacks for pixel perfect design
• W3.org, the official site for Cascading Style Sheets specifications

Internet Explorer 8
This week the first official beta version of Microsoft’s Internet Explorer 8 has been released. It covers a lot of new features like eBay integration, better AJAX support and standard compliance. Explicitly the last point, standard compliance, is a hot topic when it comes to the IE. All past versions had pretty much problems with displaying CSS correctly. So the announcement that IE8 passes the Acid 2 test was a big surprise.

I have rounded up 10 CSS resources, codes and files that support you making more attractive CSS designs. There are a few very good coded and designed menus in this list… and a lot of other great stuff that maybe give you an inspiration for your own CSS Layout.

Exploding-boy – Free tab menus for you

aplus – Design your own advanced CSS menu

Mycelly – Nice and free CSS templates

CSS Tinderbox – Valid CSS layouts

Dynamicdrive- Comprehensive collection of menus, layouts and more

Mitchbryson – 71 CSS gallery sites

CSSvault – A shine site for inspirations

Smileycat- Always useful: hover effects in lists

Pullquotes – A great CSS code for remarkable quotes

Ryanfait – A CSS footer that is easily to use