Free Tools and Tips

Knowledge Base for Internet

Archive for July, 2009

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]

wefunciton

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

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

onebit2

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]

wp_woothemes_ultimate_icons-preview

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]

semlab

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]

iconeden

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]

milky

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

iconza

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]

basicset

MinIcons [via kyo-tux | Download]

kyotux

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]

coquetteiconsset

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

Coquette-Part-2-Icons

Dropline Nuovo [Download]

nuovo

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

devlopersicons

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]

circularicons

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]

freeiconsdownload

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

Twotiny Expansion Set [Download]

twotiny2

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]

paularmstrong

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]

tango

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

miniicons2

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]

icondock

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

websocialicons

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

microformats

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

512pix

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

Set #1 [Download]

icojoy

Set #4 [Download]

icojoy2

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

greyscale

FamFamFam Icons
Silk [Download]

famfamfam-silk

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

famfamfam-mini

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

famfamfam-flags

Splashy Icons
470 splashy icons. [Download]

splashyicons

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

bitcons

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

bulletmadness

Minimalist Pixel Icon Set
[via nclud | Download]

nclud

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

fugue

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

randomjabber

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]

komodo

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

sweetie

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

vaga

Tags:

Thursday, July 30th, 2009 Icons No Comments

World of Mosaic Twitter Wallpapers

twitter-mosaic-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

twitter-logo

The Blue Bird

blue-bird

Tags:

Thursday, July 30th, 2009 WallPapers No Comments

Shortcuts to Increase Windows 7 Keyboard Productivity

windows7
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

windows-7-logo

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

ease-of-access-center

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

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

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

Logging_in_out

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: ,

Thursday, July 30th, 2009 Tools No Comments

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.

Arcs-Rivets

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

Barbed-wire

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

Bullet-Holes-Brushes

Spiderman Pattern
by s0nkite

Spiderman-Pattern

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

Metal-Set

Metal Mesh Brush
by SocioBunneh
High quality metal mesh brushes.

Metal-Mesh-Brush

Idyllic’s -Metal- Brushes
by Chalob

Idyllic-Metal-Brushes

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

Gears_Vectors_Brushes

Carbon Sheets
by idealhut

Carbon-Sheets

Cool Metal Texture
by skipgo

cool-metal-texture

Textures

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

Black-Metal-Texture

WireMesh
by stock.xchng

WireMesh

Metal-texture

Grating-texture

Diamond-Plate

Foil 1
by Dori-Stock

Foil

ULV Metal plate
by enframed

ulv

Metallic Holes Texture
by LeMex

metallic-holes-texture

Metallic Grid Texture
by FantasyStock

Metallic-Grid-Texture

Metal Pattern
by Thousandhands

Metall-pattern

Metal Texture
by wojtar-stock

metal-texture-7

metal-texture-2

metal-texture-1

Metal Stock
by CausticStock

Metal_Stock

Metal Floor
by loner654

Metal-Floor

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

Metal-Grunge-Set

Metal
by GreenEyezz-stock

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.

Metal-Fence-texture

Photoshop Tutorials

Create Carbon Fibre Pattern
by hongkiat

carbon-fibre

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

Texturing-and-Painting-Metal

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.

Metal-3D-Text

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

Metal-Surface

Tags: , ,

Thursday, July 30th, 2009 Photoshop Tutorials No Comments

Free Quality Hand-drawn Fonts

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

Monday, July 6th, 2009 Uncategorized No Comments
ody>