Photoshop CSS: Convert Layers, Shapes and Fonts to Pure CSS3

By CSS, Design, Tools No Comments


With CSS3 photoshop plugin you can convert your  layers to CSS3.

photoshop-css-hat-layer css-hat-code

Example CSS code generated:

CSS Hat 2

Using CSS over images gives front-end developers many benefits. However it requires a ton of hand-coding to reflect all the layer styles into the code. CSS Hat prevents this pain.

Select any Photoshop Layer and generate Colors, gradients, sizes, borders… All instantly in CSS.

Photoshop Colors, gradients, sizes, borders in CSS.


52 Font search engines for commercial and free fonts.

By Design No Comments
1stopfonts A font of the day place. An archive. A font search engine. [Google]
Agfa Font search engine packaged so that one might think it is an independent effort. Not so: Agfa is swamping the net with URLs to capture font traffic. This site leads mainly to Agfa fonts. [Google] Font-related search. [Google]
Columbia University Search for type books in Columbia University’s extensive type collection (which comes mainly from Bullen and ATF). [Google]
Creative Pro Font search engine and font search links at Creative Pro. [Google] Font search at [Google]
Dogpile Open Directory The main font link sites, with a search engine on top of them. [Google]
Download-Fonts Agfa-Monotype-ITC font search engine. [Google] FTP search of Russian sites. [Google]
Filetype search in Google Example of a filitype search in Google: “filetype:ttf 3of9”. [Google] Search files by filename. [Google]
Font Hit Font search engine. Good for commercial searches, but awful for anything non-commercial. [Google]
Font identification To identify fonts, you can try a number of things: ask on the newsgroups like comp.fonts, ask the mail groups like Typophile, try a web-basec automated service like MyFonts or Identifont (which, if they work, guide you to a commercial product), or try special software like Font Matcher (for fonts already on your computer), or Font Assist. [Google]
Font identification (Spanish) Font identification jump page, in Spanish. [Google]
Font Matcher Free Windows software from 2000 that finds the best font match from your truetype collection (on your computer) for a given bitmap of a character (e.g., in BMP format). By Javier Guerrero García. [Google]
Font search Lycos search example for Tekton. Replace Tekton in the URL by whatever. [Google]
FontAssist 3.0 Commercial PC program for identifying or finding a close match for scanned fonts. Free trial with 30runs. By Balarad Software (Ladislav Balara) in Presov, Slovakia. The font recognition program recognizes 5300+ Corel Draw, Microsoft Windows, Microsoft Word and other trueType fonts based on font features and some key letters. Can also be used as a font installer and printer. Download site. [Google]
FontBook online Searching for a designer or a font? Look no further than the FontBook. It has over 25,000 fonts listed. [Google]
FontFind A font search engine, I guess, but all my searches led nowhere (I tried Waaiberg, Lillie and Bruno—at least two of these should have had had hits). [Google]
FontFinder From Leksand, Sweden, Peter Reichel’s font site. It advertises the following: Search the Font database by name/design, attribute/family, headline, text or pi-fonts. Create and customize (body and headline text) extensive type-charts (PDF created on the fly) for more than 1000 fonts, in your own language. Download free TT-fonts with extensive kerning tables. Problem is that on some Netscape browsers, nothing works. [Google]
Fontfinder Font search engine by Maximilian Bloch. Some pages are directly linked to Agfa/Monotype and MyFonts, so this is not quite an unbiased site. And Maximilian, stop putting “Download font” when you mean “Click here to purchase font”. [Google]
FontHit An advanced on-line font search engine. New free font alerts. [Google]
FontIdentifier Linotype’s expert system (question-based) for identifying fonts. [Google]
Fontpool font search Search for a font at Fontpool. [Google]
FontSearchEngine.Com Font search engine under development. [Google]
Fontseek Font search. The font data bank has over 55,000 fonts, which are mostly conmmercial. In fact, it looks like yet another Agfa/Monotype site. [Google] Alexander Neuber’s nice font search engine. It searches among commercial and free fonts. Bookmark it! Its font data bank contains more than 55,000 free and commercial fonts. The search results comes with a preview and download URL. [Google] In my view, the best font search engine on the web. Try it out! [Google] Font search engine for a few big commercial houses. Of limited use. [Google]
Free Fonts Excellent free font search engine. Run by Alexander Neuber. More direct page. [Google]
FTP search for a font This is one of the most useful services anywhere. Want lots of fonts fast? Search for, or ttf, or something similar. Once you get the idea, the world is at your feet. Mirror services: Sweden ( only) | Servers in Slovenia | Some FTP servers in Japan | Some FTP servers in Russia | only | Belgium and worldwide | FTP searches in South Africa | FTP searches in Russia. [Google]
Global Search Font search engine that requires registration. [Google]
Google Google font searching can be automated as in this example. If you look for Monotype Corsiva, say, then use the direct URL or Take a guess at what the filename could be. [Google]
Google Books Google’s book scanning project. Books available starting in August 2006 include Jan Middendorp’s Dutch Type and hundreds of others. The pages come in low quality JPG format, about 90k per page. Furthermore, the right-click download function is disabled. The only way to get an entire book is to click on every page in the browser, and then check the cache on your computer, which should have each page in its JPG format—a painful process that will take a good hacker to automate. Text pages are sometimes in PNG format. Grabbing text for quotations, as one can do in PDF files for example, is impossible. So, in summary, Google Books is useful for advertising purposes, to make one buy the book. It is useless for those wishing to do some serious reading or those interested in the fine details of type specimen or other images. [Google]
Harvard Hollis catalog Search for type specimen and type books at Harvard. [Google]
Hotbot: recent truetype additions Search Hotbot for recent pages with TrueType fonts. [Google]
Hotbot: recent type 1 additions Search Hotbot for recent pages with type 1 fonts. [Google]
Identifont Font identifier based on answering questions. A great initiative of David Johnson-Davies, it currently contains information about most major type libraries, including Adobe, Agfa-Monotype, Bitstream, Elsner+Flake, Font Bureau, FontFont, ITC, Linotype, P22, and URW++, and is undergoing continuous development. Interview. [Google]
Identifying and getting a hold of fonts Interesting discussion on how to find and get fonts for free, with tons of practical tips. [Google]
Letrag Spanish language type site with goodies on type classification, font search, a type glossary, font identification, type articles, and related information. [Google]
OnTheWeb Find a commercial font through this site. [Google]
René Crol Free fonts made in 2008-2009 by Dutchman René Crol: BANAAN, BLOESEM, BRETAGNE, CROL, FRIET, HAPPYdave, LUSIVERS.-NL (letters made from matches), POTLOOT, SCHROEF. [Google]
Sans Serif Font Identification Sans serif font identification based on the letter G. [Google]
Search Free Fonts Find over 10,000 free fonts and 12,000 commercial fonts. Catogorized alphabetically and stylistically. The commercial ones all get beamed back to Agfa. Their search engine could not find my own fonts. The “articles” are also sent back to Agfa/Monotype. A list of what can be had for free here. One suggestion: please leave out “Free” from the name “Search Free Fonts”. [Google]
SSi Font Database Font database that is not too shabby. It will locate many commercial fonts, and mention the SSi equivalent. [Google]
The Font Pool MyFonts affiliated site with links to over 27,000 fonts, organized and categorized by K.C. Woodward. Font categories. [Google]
Type Navigator Fontshop’s on-line search engine makes locating a font in the Fontshop library simple. Completely visual and mouse-driven, this is a step forward. A test for modern correctly showed that Fontshop offers these modern typefaces: FF Acanthus (Kobayashi), FF Bodoni Classic (Wiescher), FF Cellini (Boton) and FF Danubia (Solt-Bittner). The software was developed by Hansjörg and Robert Stulle. [Google]
Typeface Identification Guide

[Christian Liljeberg]
Christian Liljeberg’s on-line typeface identification guide: “It is a step-by-step guide to help identify around 700 different typefaces. The Guide is based on the Rookledge’s International Typefinder (ISBN 1559210524 or 187075803X) by Christopher Perfect and Gordon Rookledge and David A. Mundie has converted it to HTML.” Christian was born in Gotheborg, Sweden, in 1978. [Google] Font search engine. Not bad! [Google]
Typophile Channel for Sherlock For Mac people: Sherlock channels at typophile that search many sites, all dot coms, including Adobe Type Library, Graphic Design Books, Creative Pro, Emigre, Font Bureau, FontFont Online Shop, Fontzone, Hoefler Type Foundry, Letterror, Lines & Splines,, Oak Knoll Books & Press, Parkinson Type Design, Porchez Typofonderie, Text Matters,, Typeright,, Typophile Forums, Yahoo Design Arts. [Google]

[Laurence Penney]
Send scanned images to the site for automatic recognition. A part of It did not work on the gif files I sent, but others report some luck. It will never recognize a non-commercial font or report all equivalent names of a font, so there is a built-in bias. [Google]

Top-10 design mistakes in web applications

By Design, UX Design No Comments

According to Jakob Nielsen, these are the 10 most common usability violations found in web applications:

  1. Non-standard interface controls, such as home-grown scrollbars
  2. Inconsistency in the way things work, appear and are labelled across the app
  3. No providing proper affordances that give people visual clues about what they can do with an object (e.g. that they can drag-and-drop an object)
  4. Not giving proper feedback about what is happening
  5. Bad error messages that don’t tell what went wrong and how to fix it
  6. Asking for the same information twice
  7. Not providing defaults (e.g. in a list of radio buttons)
  8. Dumping users into the app without giving them an idea of how it works
  9. Not indicating how collected information will be used
  10. Offering system-centric features that reflect the system’s internal view rather than the users

And generous as Jakob is, he also has a bonus mistake: Reset buttons on web forms.

Top-10 Application-Design Mistakes