7 Free Tools to Identify A Font !!!

1. What The Font

Developed by one of the largest font providers, WhatTheFont is your number one spot for identifying your fonts. Simply upload an image of the font that you want to ID and upload it to their servers (or add a link to the image on the WTF interface), and the system will show you multiple font results. If unable to find it, it will prompt you to go to their Font Forum where you can post the image and wait for feedback from font experts as to what that font may be called. I’ve used both systems and this usually solved most of my font questions.

Click here to read Full story

99 Cool Resources for Web 2.0 Design

BADGES

Web 2.0 Badges – A set of free badges to download and use in your own designs.

Fresh Badge – Quickly generate your own badge.

adClustr – Starburst badges.

Deziner Folio – A collection of different badges.

BittBox – Free vector badges.

Official Seal Generator – An alternative to the typical badge.

Photoshop Tutorial – A quick lesson on making your own badge.

Glossy Photoshop Tutorial – Create a glossy badge with this tutorial.

BUTTONS

My Cool Button – A nice online tool that will help you to quickly create the button that you want.

Adam Kalsey’s Button Maker – Simple tool to make your own buttons.

Button Maker from Blog Flux – Create your own custom button.

Brilliant Button Maker – A similar button maker to the previous 2.

CSS Buttons – Choose the text, border, and background.

Buttonator – A paid option for creating buttons.

RSS Button Maker – The name pretty much says it all.

Button Boost – A little bit different than some of the other button generators.

ButtonGenerator.com – Create buttons for navigation menus.

Crystal Button – Slick web buttons made easy.

Chicklet Creator – Create buttons that allow visitors to subscribe in their feed reader of choice.

ROUNDED CORNERS

Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.

RoundedCornr

Corner Shop

Spiffy Box

Canvas Corner

Spanky Corners

Sliding Doors Text Box

Smart Rounded Corners

Rounded Corners in CSS

News List

LOGOS

Each of these tools will create a simple web 2.0 style logo.

Web 2.0 Logo Creator

Web 2.0 Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Stylr

ICONS

A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.

UtomBox – A great collection of web 2.0 icons.

Feed Icons – The standard RSS icon.

Map Icon Factory – Create your own map icon.

Perishable Press – A nice collection of RSS icons.

Glass Style RSS Icons

Snap2Objects – Vector RSS icons.

31 Sources of Quality, Free Icons

GRADIENT IMAGES

Another common element of web 2.0 is gradient images. Here are a few tools to help you.

Gradient Image Maker

Gradient Generator

Online Gradient Image Maker (OGIM)

SPEECH BUBBLES

Speech bubbles are commonly used for styling comments or blockquotes.

Will Mayo

Bubblesnaps

CSS Play

XHTML Speech Bubbles

WigFlip

Fluid CSS Speech Bubbles

MySpace Speech Bubble Generator

Photoshop Tutorial

BACKGROUND IMAGES

Background Image Maker – Create background images with choices like transparency and gradients.

Stripe Generator 2.0 – If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.

Stripe Designer – Easily create striped images.

Tartan Maker – Create a tartan background image.

Texture Generator – Creates textured images that you can use as a background.

All Free Backgrounds – Choose the background you want.

COLORS

The Colors of Web 2.0 – Are you looking to match the color of a popular web 2.0 site?

Web 2.0 Color Pallete – Popular web 2.o colors.

Color Schemer Gallery – Having problems choosing a color scheme? Find one you like in this gallery.

COLOURlovers – More samples of color combinations.

Website Color Picker – Test color combinations quickly.

I Like Your Colors – Get the colors used by a particular site.

NAVIGATION

CSS Menu Generator – Easily create attractive CSS menus.

Listamatic – Collection of CSS menus.

List-O-Matic – Create your own CSS menus.

List-U-Like – Another tool to create your own navigation bars.

Tabs Generator – Create tabbed images for navigation.

Flash Buttons – Create navigation menus with flash buttons

CSS Play – An extensive collection of CSS menus.

Exploding Boy – Tabbed CSS navigation menus.

CSS Navigation Menu Generator – A tool to help you create your own menu.

FAVICONS

Favicon Generator – Create your own favicon from an image on your computer.

Favicon from Pics – Create a favicon from a photo.

Favicon Editor – Upload a photo, create a favicon.

Favicon.cc – Another option for favicons.

Photoshop Tutorial – Creating a favicon with Photoshop.

CHARTS

PHP/SWF Charts – Create attractive charts.

amCharts – Flash charts.

OTHER

Avatar Maker – Create and edit an avatar.

Shrink Pictures – Create an avatar from your photo.

ScaleNine – Collection of skins and themes created for Flex and Adobe AIR.

VectorMagic – Converts bitmap images to vector art.

Templatr – Create a layout.

PsycHo – Blog template generator.

Web 2.0 Generator – Creates layouts.

Typetester – Compare fonts on-screen.

BlogPoll – Create a free poll for your blog.

RSSxl – Convert an HTML page to RSS.

Meta Tag Generator – Easily create meta tags for your pages.

URL Rewrite – Create search engine-friendly URLs for dynamic pages.

.htacces generator – Quickly create an .htaccess file.

Thumbnail Generator – Create thumbnails for a large amount of images.

Reflection.js – Adds reflections to your photos.

Drop Shadow – Improve your images with a drop shadow.

CSS Sprite Generator – From Website Performance.

Vecteezy – Stupid name. Cool vectors.

Brusheezy – Photoshop brushes.

PSBrushes.net – More Photoshop brushes.

deviantART – Photoshop brushes at deviantART

Some freeware for your web development

GIMP – versatile graphics manipulation package

GIMP – versatile graphics manipulation package

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

Each task requires a different environment and GIMP allows you to customize the view and behavior the way you like it. Starting from the widget theme, allowing you to change colors, widget spacings and icon sizes to custom tool sets in the toolbox. The interface is modulized into so called docks, allowing you to stack them into tabs or keep them open in their own window.

HTML Kit for more than editing HTML

HTML Kit for more than editing HTML

HTML Kit is a full-featured free editor for HTML, XHTML, XML, CSS, JavaScript, PHP and other text file types. Over 400 plugins are also available, including HTML Tidy for creating standards-compliant HTML/XHTML pages. HTML-Kit has received 95% thumbs up out of 2900+ Download.com user reviews and over 4 million overall downloads.

Inkscape – Vector Drawing Graphics SVG PNG

Inkscape – Vector Drawing Graphics SVG PNG:

“Inkscape is an Open Source vector graphics editor, with capabilities similar to Illustrator, Freehand, CorelDraw, or Xara X using the W3C standard Scalable Vector Graphics (SVG) file format.

Supported SVG features include shapes, paths, text, markers, clones, alpha blending, transforms, gradients, patterns, and grouping. Inkscape also supports Creative Commons meta-data, node editing, layers, complex path operations, bitmap tracing, text-on-path, flowed text, direct XML editing, and more.

It imports formats such as JPEG, PNG, TIFF, and others and exports PNG as well as multiple vector-based formats.”

This software has solved my SVG view and Convert to PNG Problem. I got some icons from GNOME Art – Artwork & Themes which were SVG and was stuck. Then i found more SVG here Open Clip Art Library .

VIM – Advanced text editor VI

VIM – Advanced text editor VI

Vim is an advanced text editor that seeks to provide the power of the de-facto Unix editor ‘Vi’, with a more complete feature set. It’s useful whether you’re already using vi or using a different editor.

Vim is a highly configurable text editor built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems. Vim is distributed free as charityware.

Thingamablog blogging application

Thingamablog blogging application

Thingamablog is a cross-platform, standalone blogging application that makes authoring and publishing your weblogs almost effortless. Unlike most blogging solutions, Thingamablog does NOT require a third-party blogging host, a cgi/php enabled web host, or a MySQL database. In fact, all you need to setup, and manage, a blog with Thingamablog is FTP, SFTP, or network access to a web server.

Thingamablog allows you to:

• Set up a blog in minutes via an intuitive wizard
• Maintain multiple blogs
• Effortlessly manage thousands of entries
• Dynamically update blog content
• Write entries offline (Dialup users)
• Publish your blog with a single click
• Create a unique layout with customizable templates
• Import entries from RSS/Atom feeds
• Set up flexible archiving options
• Organize your entries by category or date
• Save entries as drafts
• Define your own custom template tags
• Syndicate your blog via an RSS or Atom feed
• Ping services like weblogs.com, BlogRolling, and Blo.gs

You have to install Java to run Thingamablog. Java. Java Technology is required to run applications, hese are usable in multiple operating Systems and use a JVM or Java Virtual Machine. – Java Software from Sun

Zoundry Raven – Portable WYSIWYG Publisher

Zoundry Raven – Portable WYSIWYG Publisher

“Multiple Blogs Made Easy – Do you have multiple blogs for different audiences? We make it easy to write and publish to separate blogs all with one editor.”

Tabbed true WYSIWYG Editing – True WYSIWYG writing and XHTML source editing. Drag and drop images, video, and text from the Web. Unicode (UTF-8) support. Preview posts in your blog’s template.

WordPress 2.2+ Page & Tag support – Use Raven to create and modify your WordPress Pages just like any other blog post. Set WordPress tags as well as import tags from all of your posts.

Raven2Go: Portable Application support – Install Raven as a Portable Application on your flash/thumb drive. We’ll stay out of your Windows registry and let you take your Blogging on the road.

BlogDesk – Offline Weblog Client

As an offline weblog client, BlogDesk lets you comfortably write and effortlessly publish new entries to your blog.

No need to use those annoying HTML Tags in the WYSIWYG editor. Images can be directly inserted and are automatically uploaded. Even publishing simultaneously to multiple blogs is a matter of a click.

With the ImageWizard you can not only insert images to your posts – it’s possible to edit them as well (crop, resize, rotate, shadow etc., see Examples). Even Thumbnails can be created – the preview will be shown in the blog and a click on the image will open it in its original size (just like here in the right column). Linking and uploading those images is automatically done by BlogDesk.

BlogDesk is totaly free of charge and optimized for the blog systems

• WordPress (
• MovableType
• Drupal
• Serendipity
• ExpressionEngine (pMachine)

How to make a Round corners with CSS???

Let’s start with a ’rounded-corner’ tutorial. In this tutorial you’ll learn how to make them. This isn’t the only method there is to produce round corners; this is just the method I use.

First, make two files, called index.html and roundcorners.css. We willl start with the index.html. The code provided isn’t everything you should have in your index.html. You should know how to add structure in your document. If not, please download the final code at the end of this tutorial.

This is very simple. We start with a DIV with id box. This is the box where all the elements of the box will appear in. In this box, we’ll add the corners and the content. Take a look below to view the codes.

<div id="box"></div>

As you can see, I have structured the document. I think this should be very easy to follow and the HTML part has been finished now!

We will continue with the CSS. Open up your roundcorners.css file now. You should understand we use images to give the box its round corners. I will use the following images.

top-left.gif
top-right.gif
bottom-left.gif
bottom-right.gif

CSS

body{
background-color: #CFCFCF;
}
#content{
float:none;
padding:20px 20px 0 20px;
}
#box{
width:300px;
background:#ffffff;
}
#top-left{
width: 19px;
height: 16px;
background: url(images/top-left.gif) top left no-repeat;
float:left;
}
#top-right{
width: 22px;
height: 22px;
background: url(images/top-right.gif) top right no-repeat;
float:right;
}
#bottom-left{
width: 22px;
height: 16px;
background: url(images/bottom-left.gif) bottom left no-repeat;
}
#bottom-right{
width: 22px;
height: 21px;
background: url(images/bottom-right.gif) bottom right no-repeat;
float:right;
margin-top:-21px;
}

As you can see, I’ve placed the div with id top-left at left (with float:left;) and made the div as small as the image itself. With the background style attribute I define a background (top-left.gif) and as you can see when you have done this too, it’ll display a perfect top left round corner (the perfection level of the round corner depends on your designing skills of course).

What I did next, is just repeat this step with all the divs and only change some small things. With top-right you should use float:right; and define another background image but the logic behind it stays the same.

download files here