Free Tools and Tips

Useful Web Designers GUI Icon Sets

Icons are everywhere in a website and their primary purpose of guiding and giving out information to visitors is a highly important one. Other than words themselves, these little graphics within a website that tells you how you can move to the next page, cancel a transaction, checkout the cart and the likes, basically the entire navigation. In a general sense, they act as symbols that allow easier and smoother communication between the webpage and the person interacting with it.

Depending on the web context, icons should be designed in a manner that are pleasing to the eyes, and most importantly, communicate what it is suppose to communicate. Here’s a showcase of 40 Free and Useful Icon Sets for your reference. Full list after jump.

Function Icon Set
128 Icons, they are only available in 48×48px. [via wefunction | Download]

Onebit Free Icon Set
A total of 50 icons. These icons are free to use in any kind of project unlimited times .[via Icojoy | Download]

Onebit Free Icon Set 2
Total of 30 icons, 48×48 in PNG format. [via Icojoy | Download]

WP WooThemes Ultimate Icon Set
The free download contains all 79 icons, sized at 256×256 pixels and available in both PNG and GIF formats. [via WooThemes | Download]

SEM Labs Web Blog Icon Pack
48x 48 icons for use on the front and back-end of the site released under the Creative Commons License. [via semlabs | Download]

Bright!
This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.[via iconeden | Download]

Milky
The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds. [via iconeden | Download]

Iconza Icons
Collection of free icons that can be colored and reduced in size to your taste. [via Iconza| Download]

Basic Set
42 high quality icons for your web application, software or GUI design. Comes in various sizes of 64×64, 48×48, 32×32 & 16×16. [via prokofusha | Download]

MinIcons [via kyo-tux | Download]

Coquette Icons Set
Free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format. [via dryicons | Download]

Coquette Icons Set 2
Improved version of one of DryIcons’ most downloaded and most popular free icons sets. [via dryicons | Download]

Dropline Nuovo [Download]

Developers Icons
105 icons (32×32) for your toolbar or anything. Comes in .png, .ICO, .ICNS, .iContainer. [via Sekkyumu | Download]

Circular Icons A themed collection of 100+ 16×16 icons designed by Ben Gillbank, licensed under the Creative Commons Attribution 2.5 License. [via Pro Theme Design | Download]

Web Application Icons Set
20 icons designed specially for web applications, Free Web Application Icons Set is completely Free for both personal and commercial projects in any way you like. [via Webappers | Download]

Mini and Pixel Icons

If large and silky smooth icons aren’t the style you are looking for, how about simple, mini and pixelated one. Such icons can save significant amount of space for your website. Did we also mention their are light in filesize too?

Twotiny- Two icons setsfor websites and web applications. [Download]

Twotiny Expansion Set [Download]

Icons
A free set of over 250 18×18 pixel icons. Each icon was carefully created one pixel at a time using only whole value hexadecimal shades of grey. [via Paul Armstrong | Download]

Tango Icon Library
The Tango icon library contains a basic set of icons for the most common usage. To make it easier for a developer to find an appropriate icon for their application a number of aids are there to help. [via Tango | Download]

Mini Icons 2
113 10×10 greyscale icons in .gif format. [via brandspankingnew | Download]

Mini Pixel Icons
320 icons (available in various color theme) for general web design such as: blog themes, forums, eCommerce sites, and CMS application. [via Icondock | Download]

Web Social Icons
30 free web social icons, great for your website and blog. [via seanau | Download]

Microformats
These icons can be used to depict various microformats in webpages or on the desktop.

512 Pixel LED Icon Set
Designed for web designers/developers by Marcis Gasuns. [via Led24 | Download]

Iconjoy Free Web Development Icons- These icons are free to use in any kind of project unlimited times.

Set #1 [Download]

Set #4 [Download]

Greyscale
40 greyscale icons which each fit into a 34 x 34 pixel area. [via e-lusion | Download]

FamFamFam Icons
Silk [Download]

Mini
“Mini” is a set of 144 GIF icons available for free use for any purpose. [Download]

Flags
247 icons in GIF and PNG formats representing most countries in the world as small pixel icons. [Download]

Splashy Icons
470 splashy icons. [Download]

Bitcons
Mini-pixel icon set (16×16 pixels) containing 91 121 individual icons for various subjects. [via somerandomdude | Download]

Bullet Madness
A list of 200 bullets, arrows and icons uploaded by stylegala users.

Minimalist Pixel Icon Set
[via nclud | Download]

Fugue
2,225 icons are included in PNG format (16×16 pixel). [via pinvoke | Download]

Sizcons
Comes in 2 different format: 16×16 version and a 12×12 version. [via randomjabber | Download]

Social Media Icon Pack
This icon set consists of 30 (16×16) finely crafted social media icons. They are free to use non-commercially. [via Komodo Media | Download]

Sweetie
2 sets of cute and clear icons to use in your nifty web application, respectively Sweetie BasePack and Sweetie WebCommunication. [via sublink]

Vaga
60, semi-transparent .png icons (16 x 16) ready to use and available for free download. [via tenbytwenty | Download]

Tags: Useful Web Designers GUI Icon Sets

World of Mosaic Twitter Wallpapers

World of Twitter is a series of mosaic tile wallpaper created with thousands of Twitter avatars as background and Twitter logo as foreground. These mosaic artworks are generated with Mac’s MacOSaiX and further refined with Photoshop and resize to fit as wallpapers.

Each set comes in four different screen resolution. Feel free to download and use them as your desktop wallpapers. You might also want to check out the wallpaper gallery, or Blue Bird Twitter wallpapers I’ve previously created.

Twitter Logo

The Blue Bird

Tags: World of Mosaic Twitter Wallpapers

Shortcuts to Increase Windows 7 Keyboard Productivity

via Wikipedia

With all the less pleasant verdicts about Vista, Windows 7 is perhaps PC users’ next best news. Codenamed Blackcomb, this new Microsoft operating system is surely a successor over it’s predecessor Windows XP and definitely Vista. With Microsoft to end their support for Windows XP in 2014, we figured Windows 7 will be completely taking over things in the next year or so.

If you are a Windows users it’s probably time for a change, or at least tryout this new operating system. Here are some shortcut keys to help improve your productivity and user experience with Windows 7.

General Windows 7 Shortcuts

Shortcut	Description
Win + UP Arrow	Maximize the current window
Win + Down Arrow	Restore down or minimize current windows
Win + Left Arrow	Dock the current window to the left half of the screen
Win + Right Arrrow	Dock the current window to the right half of the screen
Win + [number]	Activate and run the program pinned on Windows 7 Taskbar, running program won’t be affected
Win + Home	Minimize all but the current window
Win + Space	Makes all windows transparent so you can see through to the desktop
Win + Pause/Break	Open System Properties
Win + Tab	Flip Aero 3D [press Tab to cycle between Windows]
Win + B	Move focus to notification tray (the right-most portion of the taskbar)
Win + D	Show/Hide desktop
Win + E	Windows Explorer is launched
Win + F	Search
Win + G	Bring all gadgets on top and foreground
Win + L	Lock Computer
Win + M	Minimize all windows
Win + P	Open the projection menu (generally used for laptops connected to projectors)
Win + R	Run Command is launched.
Win + S	OneNote Screen Clipping Tool
Win + T	Show preview thumbnail of running applications in Windows Taskbar one by one without mouse over
Win + X	Mobility Center
Win + #	Quicklaunch
Win + =	Magnifier
Win + [+/-]	Enables the magnifier and zooms in/out
Win + Shift + Up Arrow	Maximize vertical size
Win + Shift + Down Arrow	Restore vertical size
Win + Shift + Left Arrow	Jump to left monitor
Win + Shift + Right Arrow	Jump to right monitor
Win + Shift + M	Undo all window minimization
Win + Shift + T	Cycles backwards
Win + Ctrl + F	Opens the Active Directory Find Computers dialog
Ctrl + Right Arrow	Move the cursor to the beginning of the next word
Ctrl + Left Arrow	Move the cursor to the beginning of the previous word
Ctrl + Up Arrow	Move the cursor to the beginning of the previous paragraph
Ctrl + Down Arrow	Move the cursor to the beginning of the next paragraph
Ctrl + Click	A pinned taskbar icon to cycle through the program’s open windows (e.g. IE)
Ctrl + Win + Tab	Persistent flip 3D
Ctrl + Shift with an arrow key	Select a block of text
Ctrl with any arrow key + Spacebar	Select multiple individual items in a window or on the desktop
Ctrl + Shift + Esc	Open Task Manager directly
Ctrl + Shift + N	Create new folder

Shortcuts for Ease of Access

Shortcut	Description
Right SHIFT for eight seconds	Turn Filter Keys on and off
Left ALT+left SHIFT+PRINT SCREEN (or PRTSCRN)	Turn High Contrast on or off
Left ALT+left SHIFT+NUM LOCK	Turn Mouse Keys on or off
SHIFT five times	Turn Sticky Keys on or off
NUM LOCK for five seconds	Open the Ease of Access Center
Win + U	Cycle through all open windows

For: Windows Explorer

Shortcut	Description
Alt + Left Arrow	Go back
Alt + Right Arrow	Go forward
Alt + Up Arrow	Go up a directory
Alt + Enter	Open the Properties window of the current selection
Alt + Spacebar	Open the shortcut menu for the active window
Alt + F4	Close the active window
Alt + Tab	Switch to previous active window
Alt + Esc	Cycle through all open windows
Alt + D	Move focus to address bar
Alt + P	Show/hide the preview panel
Ctrl + N	Open a new window
Ctrl + Mousewheel	Change the view type (extra large, small, list view, detail, etc.)
Num Lock + Asterisk (*) on numeric keypad	Display all subfolders under the selected folder
Num Lock + Plus Sign (+) on numeric keypad	Display the contents of the selected folder
Num Lock + Minus Sign (+) on numeric keypad	Collapse the selected folder

For: Taskbar Modifiers

Shortcut	Description
Shift + Click on icon	Open a new instance
Middle click on icon	Open a new instance
Ctrl + Shift + Click on icon	Open a new instance with Admin privileges

For: Dialog Box

Shortcut	Description
Ctrl + Tab	Move forward through tabs
Ctrl + Shift + Tab	Move back through tabs
Shift + Tab	Move back through options
Tab	Move forward through options
Alt + underlined letter	Perform the command (or select the option) that goes with that letter
Enter	Replaces clicking the mouse for many selected commands
Spacebar	Select or clear the check box if the active option is a check box
Arrow keys	Select a button if the active option is a group of option buttons
Backspace	Open a folder one level up if a folder is selected in the Save As or Open dialog box

For: Photo Gallery

Shortcut	Description
Ctrl + F	Open the Fix pane
Ctrl + P	Print the selected picture
Ctrl + I	Open or close the Details pane
Ctrl + Period (.)	Rotate the picture clockwise
Ctrl + Comma (,)	Rotate the picture counter-clockwise
Ctrl + Mouse scroll wheel	Change the size of the picture thumbnail
Ctrl + B	Best fit
Ctrl + E	Search for an item
Alt + Left Arrow	Go back
Alt + Right Arrow	Go forward
Plus Sign (+)	Zoom in or resize the picture thumbnail
Minus Sign (-)	Zoom out or resize the picture thumbnail
Shift + Delete	Permanently delete the selected item
Enter	View the selected picture at a larger size

Logging In And Out Windows 7

Shortcut	Description
Win + Right Arrow + Enter	Shutdown
Win + Right Arrow + Right Arrow + R	Restart
Win + Right Arrow + Right Arrow + S	Sleep
Win + Right Arrow + Right Arrow + W	Switch users

Tags: Keyboard Productivity, Windows 7 Keyboard Productivity

25+ Quality Metallic Textures Photoshop Tutorials and Brushes

Most textures and patterns do not look attractive in raw or when they are standalone, and these metallic ones are certainly no exceptional. However, with the right mixtures (and some creativity), these raw materials could output you some of the nicest metallic-themed design. If you are looking to create some realistic metallic design, here is a collection of Metallic Textures, Pattern, Brushes and Photoshop Tutorial that could come in handy.

Brushes and Patterns

Arc’s Rivets + Metal Brushes
by Arcy-is-distracted
138 Custom Photoshop Brushes, includes Rivets, Screw-heads, Bolt-heads, Metal seams, Metal seams w/ rivets, Complete Panels, Vents, Holes and more.

Barbed Wire brush
by Cat-in-the-Stock
Two barbed wire brushes.

Bullet Holes Brushes
by redheadstock
A set of brushes made up of various types of bullet holes.

Spiderman Pattern
by s0nkite

Metal Set
by for-certain
9 metal texture brush set.

Metal Mesh Brush
by SocioBunneh
High quality metal mesh brushes.

Idyllic’s -Metal- Brushes
by Chalob

Gears Vectors Brushes
by redheadstock
34 brushes for Photoshop 7+, Photoshop Elements 2+, GIMP 2.2.6+

Carbon Sheets
by idealhut

Cool Metal Texture
by skipgo

Textures

Black Metal Texture
by GrungeTextures
Closeup of pattern on surface of old black metal.

WireMesh
by stock.xchng

Foil 1
by Dori-Stock

ULV Metal plate
by enframed

Metallic Holes Texture
by LeMex

Metallic Grid Texture
by FantasyStock

Metal Pattern
by Thousandhands

Metal Texture
by wojtar-stock

Metal Stock
by CausticStock

Metal Floor
by loner654

Metal Grunge Set
by Dominick-AR
11 metal grunge brushes.

Metal
by GreenEyezz-stock

Metal Fence texture
by JayL-stock
This texture has been packed on a zip, the package contains diffuse.tga, opacity.tga and a diffuse.jpg.

Photoshop Tutorials

Create Carbon Fibre Pattern
by hongkiat

Texturing and Painting Metal
by Noise-Less
Painting a metal nut.

How to Create High Quality Metal 3D Text in Photoshop
by Wojciech Pijecki
This tutorial will show you how to create the 3D text shape and give it a high quality metal look using pure Photoshop.

Creating a Cool Brushed Metal Surface in Photoshop
by Fabio
How to create the brushed aluminum texture similar to the Apple products.

Tags: Photoshop Tutorials, Quality Metallic Textures, Tutorials and Brushes

Free Quality Hand-drawn Fonts

Unlike the serif font family, these hand drawn fonts looked less serious but they tend to give and convey strong human touch wherever they are applied. Hand-drawn fonts are hard to stand on it’s own, but they are utmost perfect for these following situations:If you are inspired to give your new web design a sketchy or hand-drawn look and feel, these fonts are without a doubt the perfect math to the layout.

• 
  via bootb
• Guides and instructions
  Whether its a storyboard, an online guide & tutorial or merely an attempt to help user understand an illustration better, arrow, pointer and text guide gets the job done seamlessly. In terms of text, typography that mimics human writing tend to make reading and understanding things easier. Here’s a good example:
  
  via woork
• Comic and dialogues
  You don’t need Marvel to tell you Helvetica won’t fit for the text in drawing and illustrations.

Free Hand-drawn Fonts

Here are 40 high quality hand-drawn fonts you can download and apply on your design. Please check with the creator if you are intended to use it for commercial products.

Alpha Mack

Analgesics

Bubbly Frog

Christopher Hand

Dali

Fabulous 50s

Fail

FFF Tusj

Daniel

Note this

Pisan

Rabiohead

Glider Girls

Green Piloww

Grutch Shaded

Hand of Sean

HandVetica

Jamaistevie

James Fajardo

Estrya’s Handwriting

Jerry’s handwriting

Joe Hand 2

Journal

Just Me Again Down Here

Later On

Love Ya Like A Sister

Luna Bar

Mia’s Scribblings

Pappo’s Blues Band

Peixe Frito

Positiv-A

Rock Show Whiplash

Salamander

Sophie, Regular

The Quiet Scream

Thurston Erc

Two Turtle Doves

WC RoughTrad Bta

Windsong