NightLion » Useful Web Coding, Development and Design Resources » NightLion

12 Top Quality Photoshop Light Effect Tutorials

NightLion — Tue, 01 Mar 2011 19:50:48 +0000

Below are a few Photoshop light effect tutorials that have caught my eye while looking over the tutorial sites, for me these produce the best results while using brushes, blurs and other media such as textures to create a top quality effect.

Create Awesome Abstract Nebula Circle Shape in Photoshop

Covers using filters with textures such as the twirl filter and warp filter with a Nebula star texture making for impressive results.

Create a Colorful Aged Poster With Special Lighting Effects

You’ll learn how to use texture and adjustment layers to create an aging effect on a colorful abstract poster design.

Create a Surreal Girl with a Raven Composition in Photoshop Tutorial

Loads of great tricks in this tutorial. If you want to take your creative composition skills to the next level, this Photoshop tutorial is perfect for you as it involves illustration, textures and Photoshop.

The Making of ‘Constant Slip’

This is more a process description of making this illustration, than a detailed step by step how to, but is very detailed and can lead to some very creative ways of achieving light effects.

Achieve Brilliant Lighting Effects in Photoshop

Using default brushes, blending options and a few stock images, you’ll learn step by step a variety of techniques that you can use in your own digital artworks to achieve professional results.

Add Brilliant Light Effects to Your Work with Photoshop

Several super easy techniques for incorporating remarkable light effects to your work using Photoshop. Including making your own set of abstract brushes and working with textures.

Create a Cosmic-Inspired Dreamy Scene in Photoshop

A demonstration of how to use stock photography, 3d elements, and various techniques to create a cosmic-inspired Photoshop master piece.

Create A Gorgeous Light Effect Using Photoshop

Using soft brushes and smoke textures allows you to create simple yet effective light effect all is explained.

Creating a Surreal Smoking Bird Composition in Photoshop

Making a monochromatic scene with the subject being a bird with smoke surrounding its body. Using a high contrast stock image combined with smoke brushes.

How to enhance your subjects with striking light effects in Photoshop

A simple technique that can be used to enhance any kind of subject with stunning light effects. Using a particular selection tools, gradients and brushes to achieve the result.

MSNBC New Background Design in Photoshop

Plenty and blur effects and colours to create a simple vibrant background.

Show me the light digital art tutorial

How to use stock images to make a beautiful digital artwork with nicely colored lights, All you need for this tutorial is the provided colors in Motion textures pack and a model.

(Via Design Shard.)

★

★ 50 of the Best Seamless Pattern Sets for Web and Design

NightLion — Sun, 02 Jan 2011 22:01:18 +0000

(Via Speckyboy Design Magazine.)

50 of the Best Seamless Pattern Sets – Updated: “

There are no individual patterns in this post, only complete sets, with each set containing anything from 3 patterns all the way up to 100, and are available in a variety of popular formats: .eps, .ai, .png, .pat, .psd and .jpg.
You will find all kinds of varied patterns, such as fabrics, geometric shapes, flowery, retro, vintage, grunge, swirls, paper, dots, lines… and much more. And if all that is not enough we have also collected a selection of the best resources for you to dicover even more seamless backgrounds.

Throughout this Christmas week we are taking a look at the most popular and some of the most resourceful articles that we have published in the past year.
I promise that by next week normal service will resume with even higher quality articles, with even more resourceful posts and, of course, some highly inspirational posts. I can hardly wait!
As for now, why not enjoy some of our classics. Hope you have all had a great Christmas!

This article was originally published on July the 28th 2010 and entitled 50 Tileable and Seamless Pattern Sets (500+ Patterns).

Seamless Paper Patterns – 6 Patterns (Photoshop & JPG)

Fabric Inspired Vector Swatches – 4 Patterns (.ai)

Abstract Gears – 3 Patterns (.eps & .png)

Vector Panton Patterns – 16 Patterns (.ai)

Monochrome Geometric Patterns – 100 Patterns (.ai)

Mono Circles – 3 Patterns (.eps & .png)

Vector Seamless Backgrounds – 6 Patterns (.eps)

Retro Set – 3 Patterns (.eps & .png)

Tiles Pattern – 3 Patterns (.ai & .jpg)

Seamless Plaid – 20 Patterns (.ai)

Striped Checked – 3 Patterns (.eps & .jpg)

Grungy Abstract Squares Patter – 4 Patterns (.pat)

Funky Circles Set – 3 Patterns (.eps & .png)

Imperial Leaf Pattern – 3 Patterns (.ai & .png)

Geometric Goodness – 3 Patterns (.eps & .png)

Halftone – 52 Patterns (.ai)

Pattern Swatches – 54 Patterns (.ai & .jpg)

Seamless Stripes – 3 Patterns (.eps & .png)

Degrees Stripes Pattern – 45 Patterns (.ai)

Patterns .36 – 25 Patterns (.png, .jps & .pat)

Ornate Set – 3 Patterns (.eps & .png)

Photoshop Patterns – 20 Patterns (.pat & .jpg)

Swirly Curls – 9 Patterns (.jpg, .ai & .eps)

Summer Pattern Pack Vol. 2 – 8 Patterns (.pat)

Abstract Blobs – 3 Patterns (.ai & .png)

Leafy Set – 3 Patterns (.eps & .png)

Handmade Paper – 7 Patterns (.pat & .jpg)

Foolish Pattern Pack – 10 Patterns (.eps)

Retro Grunge Wallpaper – 10 Pattens (.pat & .jpg)

Geometric Set – 3 Patterns (.eps & .png)

Grainy Whitewashed & Worn Seamless 5 Patterns – (.jpg & .pat)

Patterns .34 – 14 Patterns (.png, .jps & .pat)

Patterns .28 – 50 Patterns (.png, .jps & .pat)

Japanese Style – 19 Patterns (.png)

Retro Set – 3 Patterns (.eps & .png)

Patterns .38 – 25 Patterns (.png, .jps & .pat)

Vivid Red Tileable Patterns – 5 Patterns (.jpg & .pat)

Geometric Links – 3 Patterns (.eps & .png)

Textured Stripes – 6 Patterns (.pat)

Micro Patterns – 54 Patterns (.pat)

Grungy Floral Patterns – 10 Patterns (.pat & .jpg)

Woven Plaid Swatches- 25 Patterns (.ai)

wallpaper.patterns – 15 Patterns (.pat)

Random 2 – 15 Patterns (.psd)

Pattern 2 – 14 Patterns (.jpg)

Retro Grunge Abstract Maze – 6 Patterns (.jpg & .pat)

Thats My Dad – 20 Patterns (.pat)

Silvers Screentone Pack V2 – 31 Patterns (.pat)

Tileable Midnight Blue Grunge – 5 Patterns (.jpg & .pat)

Polka Dot Pattern Swatches – 25 Patterns (.ai)

Further Tileable Seamless Pattern Resources

Patterns from Everyday Icons

Pattern 8 – Free Repeat Patterns

Squidfingers / Patterns

DROMOSCOPIO – Background Pattern Library

Pattern4u – Lined from kollermedia.at

ava7 Patterns – 1546 Free Seamless Background Patterns

Kaliber10000 { The Pixel Patterns Collection }

DinPattern – Free Seamless Patterns

(Via Speckyboy Design Magazine.)

★ 100 Great Free Fonts for Designers

NightLion — Mon, 08 Nov 2010 01:50:03 +0000

High quality fonts can add great feel and an extra touch to design, whether it be web or graphic design, or they can form the basis for a creative typography piece. While there are certain high quality paid fonts that are overused, such as Helvetica and Avenir, there are tons of free fonts out there just waiting to be used in design.

This post showcases 100 great free fonts for graphic and web designers as well as digital artists to use in their work. Please be sure to read the usage agreement for details about commercial vs. noncommercial works, as each font’s license differs based on the artist’s agreement for using the font. It’s always better to be safe than sorry when using free resources in your commercial works.

Hope you find them useful!

Windsong

Wild Script

WC Roughtrad

WC Mano Negra

Urban Sketch

UMBERETTE

Tabitha

Swenson

Sophie

Snyder Speed Brush

Sketchy

Sketch Rockwell

Simplelife

Shelter me

Serena

Hand of sean

Scrubble

Rough Draft

Rickles

Redstar

Radio

preludeflf-bold

PP-Handwriting

Pisan

Philippe

one-stroke-script

onemiguel-shaded

Note-this

neville-script

never-let-go

mural-script

milktop

mighty-to-save

marketing-script

learning-curve

lauren-c-brown

koala

katy

karabine

jump

journal

john

joehand-2

jessica

jenelson

jellyka-estrya-s-handwriting

j-d-handcrafted

japanese-brush

it-aint-rocket-science

imitation

hzhandwrite

honey-script-light

harabarahand

handvetica

hand-of-sean

Graph

glider

FreestyleScript

fff-tusj

FatStack

fafers-handwriting

eraser

dwerneck

desyrel

deathrattle

Daniel

Cup

creampuff

Cool Hand Luke

complete-in-him

coertschrift

clementine

christopherhand

cheryl

Chemist

ChalkDust

carefree

cac-pinafore

bubblyfrog

brook-23

brankovic

bradley-hand-itc

blackout

bethhand

bee-marker-ink

bearer

avant-que

angelina

analgesics

ampersand

Almagro

alako

akadora

aaaiight

50s

xiao-gao

(Via CreativeFan.)

★ 100 Free High Quality WordPress Themes for 2010

NightLion — Wed, 29 Sep 2010 16:31:03 +0000

An awesome collection of 100 free wordpress themes from Smashing Magazine

http://www.smashingmagazine.com/2010/08/19/100-free-high-quality-wordpress-themes-for-2010/

★ The 100 best button styles for webdesigner inspiration

NightLion — Sat, 11 Sep 2010 23:14:30 +0000

Via: The 100 best button styles for webdesigner inspiration: ”

Dear Web-designers, to make it easier for you, I tracked the 100 perfect buttons of the web, efficient and beautiful. You only need to watch them and you cannot avoid clicking them, but ensure you do not click on the pictures, because they are only ‘Screens’, better to got to the original websites to admire the whole of these exceptional websites.

If you like this list of buttons, perhaps will you have interest for the hereby articles:

And find now the selection of the 100 perfect buttons.

And to help us to promote this article, do not forget to click on the below buttoms, to share this page with your friends through Twitter, RSS Facebook or your blog. In advance, many thanks for your contribution.

“

(Via 2experts Design.)

No related posts.

★ The 100 best icon packs from Fotolia for webdesign projetcs

NightLion — Tue, 17 Aug 2010 04:09:08 +0000

The 100 best icon packs from Fotolia for webdesign projetcs: “

It is possible on the web to find dozen of dozen of different websites proposing graphical resources to web designers and of it completely free. For a professional web designer it is the opportunity to save precious time on his projects helping to quickly satisfy his clients and more efficient.

Beyond, if you appreciate the contain of this post, I give you the possibility to reach articles previously published on 2expertsdesign.com :

To join the original page, only one click on the picture, a new window will automatically open on Fotolia.

“

(Via 2experts Design.)

★ 30 Fresh and Free Icon Sets for Designers and Developers

NightLion — Sat, 14 Aug 2010 07:02:51 +0000

30 Fresh and Free Icon Sets for Designers and Developers: “

As we like to do every few months, in this article you will find a comprehensive round-up of the best and freshest icon sets for web designers and developer. As well as the popular icon categories – general purpose developer sets, mini-pixel sets, pictograms and social media and service icon sets – we have also introduced a new category into this round-up: The Super Icon-Set. Perhaps this title is a little bit ambitious, but when you have a look at the ‘Super’ sets below, what else could you call them?

The Super Icon-Sets

The Graphs 2

This is the second release of ‘The Graphs’! With 169 vector icons it is by far and away the largest and the most flexible graph icon collection on the web. With the power of Scalable Vector Graphics you can use these icons directly into your web pages. You can change colors, re-size elements, replace objects, make adjustments, make new combinations – All of these icons are completely editable.
Format(s): .ai & .svg
License: The Graphs 2 is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
The Graphs 2 →

260 Free Vectors Icons (User Interface Design Framework)

This amazing resource consists not only of the 260 free vector highlighted here, but also a collection of GUI web elements and 200 graphic styles for buttons, navigation menus and panels.
Format(s): .ai
Sizes: Based on a precise 16 pixels grid.
License: This framework has been released as a complete web designer kit for free, even for commercial use. You are only required to link back to the source if you use the elements, icons or styles on an online website
260 Free Vectors Icons (User Interface Design Framework) →

Ultimate Free Web Designer’s Icon Set

The set consists of 750 web application icons, user interface icons, e-commerce icons, general use icons, desktop icons, blog icons, smiley icons, button icons, keyboard icons, national flags icons, popular online services icons and many others.
Format(s): .psd & .png
Sizes: 48x48px
License: You can freely use this icon set for both your private and commercial projects, including software, online services, templates and themes.
Ultimate Free Web Designer’s Icon Set →

Pictogram & Toolbar Icon-Sets

Peculiar

Peculiar is an icon package made with only CSS. They have been created for sites and web applications that depend on fewer HTTP requests as possible or dont need to use any image at all. The package contains 45 pictograms that are available in 16pixels size.
Format(s): .css
License: Peculiar is available for free for educational purposes only. Otherwise, for any personal or commercial work a license must be bought. The license costs $25 and gives you the right to use the pictograms on unlimited sites and/or web applications.
Peculiar →

342 Vector Icons designed by Mike Brisk

Format(s): .ai
License: This work has been licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
342 Vector Icons designed by Mike Brisk →

Toolbar Icons for Interface or GUI Designer (244 Icons)

This is a latest version of the Gentleface Toolbar Icon Set made for interface (gui) desginer. These icons can be used for wireframes and software mockups creation, websites and software applications toolbars and menus including iPhone and iPod apps. Youll find a set of 8 cursors and 236 icons in black and white color versions. The icons include pagination arrows, ratings and voting controls, social interaction symbols file system and text editor actions.
Format(s): .png & .swf
Sizes: 16x16px, 32x32px and 48x48px
License: Allows for use in wireframes, on personal and community web sites, in free and open source software applications and other types of non-commercial usage. (The Royalty Free license costs $29.99)
Toolbar Icons for Interface or GUI Designer (244 Icons) →

Monochrome Symbols Icon Set

Format(s): .ai, .png & .psd
License: MediaLoot License Agreement’>.
Monochrome Symbols Icon Set →

gcons

gcons is a comprehensive collection of 100 creative, open source and multi-purpose icons in 12 colors for the web and desktop applications.
Format(s):
Sizes: 32x32px
Format(s): .psd, .png, .jpg & .gif
License: gcons is free for personal and commercial designs / applications but the icons may not be sold, sublicensed, rented or transferred.
gcons →

Reflection (208 icons)

Format(s): .ai & .png
Sizes: 128x128px
License: These icons are available free of charge for personal and commercial projects, with attribution required.
Reflection (208 icons) →

Socialmonochromicons v.2 (150 Icons)

Format(s): .eps & .png
License: Socialmonochromicons by Elegant UI is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Socialmonochromicons v.2 (150 Icons) →

General Designer & Developer Icon-Sets

Eloquence! (75 Icons

Format(s): .png
Sizes: 32x32px
License: Free for commercial use. Redistribution is prohibited.
Eloquence! (75 Icons) →

Project Icons (175 Icons)

Format(s): .png, .ico & .icns
Sizes: 32x32px
License: These icons are licensed under a Creative Commons Attribution 3.0 license. For more info and suggested attribution format, read the downloads included license document.
Project Icons (175 Icons) →

Toolbar Icon Set & Toolbar Icon Set 2

Format(s): .png, .ico & .icns
Sizes: 32x32px
License: These icons are licensed under a Creative Commons Attribution 3.0 License.
Toolbar Icon Set (70 Icons) →
Toolbar Icon Set 2 →

PixeloPhilia & PixeloPhilia2

Format(s): .png
Sizes: 32x32px
License: These icons have been licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
PixeloPhilia →
PixeloPhilia2 →

Simple But Sophisticated App Icon Set

Format(s): .png
Sizes: 16x16px, 32x32px & 64x64px
License: These icons can be used in commercial and non commercial design projects. You may NOT modify and redistribute or sell this icon set.
Simple But Sophisticated App Icon Set →

Faenza Icons (300+ Icons)

Format(s): 16x16px, 22x22px, 24x24px, 32x32px & 48x48px
Sizes: .png & .svg
License: This work is released under the GNU/GPL license.
Faenza Icons (300+ Icons) →

Designer Icons

Format(s): .png
Sizes: 32x32px
License: This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.
Designer Icons →

Icons Project

Format(s): .png
Sizes: 16x16px & 32x32px
License: This work is licensed under a Creative Commons Attribution 3.0 License.
Icons Project →

iPhone Style Sidebar Icons

Format(s): .png
Sizes: 32x32px
License: Free
iPhone Style Sidebar Icons →

Content Management System (CMS) Icon Set

Format(s): .png
Sizes: 48x48px
License: You can freely usethese icons for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented.
Content Management System (CMS) Icon Set →

ComFi Telecom Icons

Format(s): .png
Sizes: 32x32px
License: The icons are licensed under a Creative Commons Attribution 3.0 license. http://creativecommons.org/licenses/by/3.0/
ComFi Telecom Icons →

High-Res Browser Icons

Format(s): .png
Sizes: 16x16px, 32x32px, 64x64px, 128x128px & 256x256px
High-Res Browser Icons →

Mobile Application Icon-Sets

Mobile Berries (80 Icons)

Format(s): .png
Sizes: 64x64px
License: View License Agreement from templay.de.
Mobile Berries (80 Icons) →

Multitouch Gesture Library and Illustrations

The GestureWorks multitouch authoring environment for Flash and Flex ships with a library of unique gestures.
The library has been built upon an open source gesture framework, allowing developers to customize and extend the ‘gesture object’ to create support for new gestures. This gives the developer the flexibility to customize gestures to suit the project, and, as new gestures become common, they can be easily incorporated, helping to ‘future proof’ your applications.
License: Library released under a FreeBSD license.
Multitouch Gesture Library and Illustrations →

Social Media Icon-Sets

Icons : 19eighty7

Format(s): .png
Sizes: 20x20px
License: This icon set is completely free to use for both personal and commercial projects. No attribution is required.
Icons : 19eighty7 →

iPhone 4 Mini Icons

Format(s): .ai & .png
Sizes: 64x64px, 128x128px, 256x256px & 512x512px
License: The icons and are licensed under a Creative Commons Attribution 3.0 license and can be download for free for personal and commercial use.
iPhone 4 Mini Icons →

Tag Style Social Media Icons

Tag Style Social Media Icons →

Social Media Balloons

You might also like…

30 of the Best Web Development and Design MINI Icon Sets →
15 Uniform Payment Options Icon Sets for Ecommerce Design →
14 Free Mobile Application Development Icon Sets →
The Top 50 Web Development Icon Sets from 2009 →
8 Free Pictogram Icon Libraries and Collections →
40 Fresh and Free Icon Sets for Web Designers and Bloggers →
35 Original and Creative Free Twitter Icon Sets →
50 High Quality Free Icon Sets in PSD Format →
50 Social Service and Bookmarking Icon Sets for Bloggers →
50 of the Best Ever Web Development, Design and Application Icon Sets →
42 Amazing Photoshop and Illustrator Icon Design Tutorials →
Free Icon Set for Designers – The Go Green! Icon Set (108 Icons) →

“

(Via Speckyboy Design Magazine.)

★ The Ultimate HTML5 Toolbox: 60+ Articles, Tutorials, Resources and Inspiring Showcases

NightLion — Wed, 30 Jun 2010 22:09:52 +0000

The Ultimate HTML5 Toolbox: 60+ Articles, Tutorials, Resources and Inspiring Showcases: “

HTML5 is the exciting and long-awaited upgrade to HTML, featuring semantic tags, advanced functionality, and forming a powerful combination with CSS3. Most developers have heard about HTML5, and are pretty excited to start using it, but as with any new technology, there is a learning curve. Since it’s a relatively new development, there aren’t quite the plethora of tutorials and articles as there are with HTML4. But not to worry, there are still more than enough resources to get you started.

This post serves as the ultimate HTML5 toolbox. First, there’s a few introductory articles and videos to help you understand why HTML5 is important. Then we’ll dive right in with a collection of tutorials that are start-to-finish. Next, there’s a great collection of articles and tips that will help you understand more, and will cover some of the nuances of HTML5. There’s also tons of inspirational showcases, and a massive resource list that you can use to supercharge your productivity!

Introduction:

Introduction to HTML5 – Video – Everything you want to know about how HTML5 works, why HTML5 matters, and everything else.

A Preview of HTML5 – A great introductory article explaining HTML5 and why you should use it.

Website Creation Tutorials:

Design and Code a Cool iPhone App Website in HTML5

Coding an HTML5 Layout from Scratch

Touch the Future – Design an Elegant Website with HTML5 and CSS3

HTML5 and CSS3 – The Techniques You’ll Soon Be Using

Website Layout Tutorial: HTML5 and CSS3

Coding a CSS3 and HTML5 Single Page Website

Cheat Sheets:

HTML5 Cheat Sheet (PDF) by SmashingMagazine – A great cheat sheet from the Smashing Magazine gurus.

HTML5 Visual Cheat Sheet by Woork – A visually appealing and easy to use reference for HTML5 tags and properties.

HTML5 Pocket Book – A must-have reference for all developers who will be using HTML5.

HTML5 Glossary – A great glossary of topics relating to HTML5.

HTML5 Reference by the W3C – A great all-in-one reference by the W3C.

Useful Articles and Tips:

Structural Tags in HTML5 – Understanding the tags in HTML5 is key to being able to use it properly, and this article explains it all.

The Power of HTML5 and CSS3 – An article that explains how HTML5 and CSS3 work in tangent to deliver powerful results.

Have a Field Day with HTML5 Forms – HTML5 forms are incredibly powerful, so this article/tutorial teaches you how to use them.

HTML5 Rocks My Socks Off – An article explaining why HTML5 is so powerful that will convince you to start using it too!

Code Structure for HTML and CSS3 – A great article that helps you understand how HTML5’s semantic tags relate to website structure.

HTML5 Doctor – Helping You Implement HTML5 Today – A great resource that covers all sorts of HTML5 topics.

HTML5 Forms – What Support is there? – A useful guide to understanding which browsers support which HTML5 form features.

Inspiration:

30 Magnificent Sites Using HTML5 at their Core – A showcase of fully functioning websites that are based on HTML5.

25 Ultra Modern Websites Using HTML5 – A beautiful showcase of some very well designed websites using HTML5 and CSS3.

Beautiful HTML5 Website Showcase – Another showcase of websites that are already using HTML5 and CSS3.

Resources:

Awesome Articles by Other Bloggers:

(Via CreativeFan.)

★ iPhone and iPad Development GUI Kits, Stencils and Icons

NightLion — Wed, 30 Jun 2010 22:02:43 +0000

iPhone and iPad Development GUI Kits, Stencils and Icons: “

Apple don’t have any comprehensive pre-built GUI resources for app development, making it very hard to match the uniformed style of the iPhone or the iPad. You will need to create your own.

To help streamline your iPhone app design and development, we have put together a fairly comprehensive collection of iPhone & iPad GUI kits that will allow you to focus on developing rather than having to design everything from scratch.
Within this post you will find complete GUI kits and stencils, iPhone GUI elements and PSDs and finally a collection of the best icon-sets perfectly suited for the iPhone. (Some of the preview images are intentionally to large to show the as much of each GUI as possible).

Complete iPhone & iPad GUI Kits

iPhone PSD Vector Kit

This iPhone PSD Vector set, from Smashing Magazine and designed by Renee Rist, comes with several button elements as well as six different iPhone interface options.
iPhone PSD Vector Kit »

iPhone GUI PSD Design Template

iPhone GUI PSD Design Template »

iPhone Design Stencils – Yahoo Design Pattern Library

This iPhone Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG).
iPhone Design Stencils – Yahoo Design Pattern Library »

Ultimate iPhone Stencil (OmniGraffle)

This Ultimate Stencil for OmniGraffle contains backgrounds, title bars, buttons, selectors, and almost all iPhone UI elements. The text is fully editable on lists, title bars, buttons, and scroll wheels and the buttons can be resized horizontally by ungrouping, resizing the middle element, and then regrouping the elements back into a single button.
Ultimate iPhone Stencil for OmniGraffle »

iPhone 3G Stencil (OmniGraffle)

This OmniGraffle stencil includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons… All of the components are on a transparent background and should re-size nicely.
iPhone 3G Stencil for OmniGraffle »

iPad and iPhone Design (OmniGraffle)

Design your application for iPhone, iPod touch and iPad devices with this exhaustive set of stencils. All stencils have been originally created by hand with native OmniGraffle shapes and groups and can be scaled, resized and exported to other vector formats in Graffle.
iPad and iPhone Design (OmniGraffle) »

FreshBooks iPhone Application GUI

FreshBooks iPhone Application GUI »

iPhone GUI as Rich Symbols for Fireworks

iPhone GUI as Rich Symbols for Fireworks »

iPhone UI Vector Elements

iPhone UI Vector Elements »

iPad GUI PSD Design Template

This PSD was constructed using vectors, so it’s fully editable and scalable. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.
iPad GUI PSD Design Template »

iPad Vector GUI Elements

This GUI set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard, ballons, etc… It also includes scalable and totally editable vector versions (AI).
iPad Vector GUI Elements »

iPhone GUI PSD Elements

MobileMe Full iPhone GUI

MobileMe Full iPhone GUI »

Matte iPhone UI

Matte iPhone UI »

Sexy Vector Cell Phone

Sexy Vector Cell Phone »

MobileMe Full GUI

MobileMe Full GUI »

iPhone 3G-3GS PSD

iPhone 3G-3GS PSD »

Apple iPad: Fully editable PSD

Apple iPad: Fully editable PSD »

Apple iPhone 4G .PSD

This. PSD is based on the controversial iPhone Gizmodo.com obtained and may not reflect the actual final product.
Apple iPhone 4G .PSD »

iPhone App Dev Icon Sets

iPhone Toolbar Icons

There are 160 clean and simple toolbar icons in this set designed specifically for the iPhone, with a source .psd file for futher customisation.
iPhone Toolbar Icons »

Glyphish’/>

The Glyphish icon set have designed and carefully optimized specifically for use on toolbars and tab bars in iPhone apps, but would also be perfect for Android Development.
The 130 icons are 24-bit .png images are about 30×30 pixels for tab bar icons and about 20×20 pixels for toolbar and navigation icons.
Glyphish »

iPhone Toolbar Icon Set

This set of 64 icons for the iPhone toolbar that contain beautiful shaded portions to give added depth and to highlight the icon features.
iPhone Toolbar Icon Set »

Free iPhone Toolbar Icons

These icons have been developed specifically for iPhone developers, completely free for anyone to use commercially under the Creative Commons Attribution 2.5 Canada license.
Free iPhone Toolbar Icons »

30 Free Vector Icons

30 Free Vector Icons »

iconSweets

iconSweets is a free icon set containing 60 vector Photoshop shapes, influenced by icon sets such as Glyphish and Pictoico. Perfectly suitable for iPhone & iPad app development.
iconSweets »

Touchscreen Hand Gestures v2 (OmniGraffle)

Vectorized version of Dan Saffers ‘Touchscreen Hand Gestures’ stencil (http://graffletopia.com/stencils/432) containing a collection of drawn hands for documenting touchscreen interactions.
Touchscreen Hand Gestures v2 (OmniGraffle) »

Gesturecons – Multi-Touch Icons

These vector based icons have been created to help in the design, development, implementation and promotion of multi-touch interfaces. You can use Gesturecons inside of your applications in order to demonstrate to users how to complete actions or prompt them to interact with an application when they approach it. You can scale them to any size and alter them in any way you wish.
Within the download package there are 52 high resolution vector icons entirely scalable and alterable (.pdf, .ai, .eps file types.).
Gesturecons – Multi-Touch Icons »

You might also like…

Mobile Web and App Development Testing and Emulation Tools »
35 Free Icon Sets for your iPhone »
14 Free Mobile Application Development Icon Sets »
10 Cool and Advanced Mobile Phone Concepts »
Top 20 Free Windows Mobile Social Media and Networking Apps »
Showcase of 20 Mobile-Friendly Popular Design Blogs »
49 Free Windows Mobile 6+ Smartphone Apps and Services »
45+ Cool Google Android Apps – The Perfect iPhone Replacement »

“

(Via Speckyboy Design Magazine.)

★ 25+ Free Vector World Maps (.ai, .eps and .svg formats)

NightLion — Wed, 30 Jun 2010 22:02:21 +0000

25+ Free Vector World Maps (.ai, .eps and .svg formats): “

If you are in search of a high quality vector World map, then your search is now over.
Most of the vector maps below are of the highest detail and accuracy, some have been designed specifically for designers and others to be used by everyone for whatever the project.
They are all in either .ai (Illustrator) format, .eps format or .svg formats.

Accurate Vector World Map (.eps and .ai, formats)

Accurate Vector World Map »

EPS Vector Maps for Designers (.eps format)

EPS Vector Maps for Designers »

World Map Illustrator File (.ai format)

World Map Illustrator File (.ai format) »

Vectorial World Map (.ai format)

Vectorial World Map »

Vector World Map (.eps format)

Vector World Map »

Vector Tech Map (.eps format)

Vector Tech Map »

Vector World Map (.eps format)

Vector World Map »

World Map in Vector (.eps format)

World Map in Vector »

Dotted World Map (.ai format)

Dotted World Map »

MacDaddy World Map (.ai format)

MacDaddy World Map »

Europe Vector Map (.ai format)

Europe Vector Map »

World Map Vector Illustration (.eps format)

World Map Vector Illustration »

Detailed World Map (.ai format)

Detailed World Map »

Wikipedia Blank Maps: World (.svg format)

Wikipedia Blank Maps: World »

Wikipedia Blank Maps: Equirectangular Projection »

Wikipedia Blank Maps: World98 »

Wikipedia Blank Maps: Low Res World Map »

Digital Vector World Maps(.ai format)

Oval World Map »

Rectangular World Map »

Blank Maps of the World from freemap.jp (.eps formats)

Photoshop Shapes: World Map

Photoshop Shapes: World Map »

You might also like…

A Round-Up of 50 Fresh Photoshop Tutorials and Techniques »
40 Detailed and High Quality Mobile Phone .psd Source Files »
50 High Quality Free Icon Sets in PSD Format »
The Best 40 Photoshop Text Effects from 2009 »
49 Most Creative Photoshop Tutorials of 2009 »
30 Artistic and Creative Photoshop Poster Tutorials »
40 Amazing Photoshop Brush Directories and Collections »
50 Imaginative Fantasy Art Tutorials for Photoshop »
25 Cool Digital Photography Tutorials, Techniques and Effects »
30 Useful Photoshop Buttons and Badges Tutorials »
25 Photoshop Tutorials for Creating that Perfect Web Page Design »

“

(Via Speckyboy Design Magazine.)

★ 30 of the Best Web Development and Design MINI Icon Sets

NightLion — Wed, 30 Jun 2010 21:58:49 +0000

30 of the Best Web Development and Design MINI Icon Sets: “

When choosing an icon-set for your web design or application, you not only need to find a set that perfectly conveys complex functions in a simple and visually appealing way, they also need to meet a certain unifying criteria, relaying to the user that the icons are related to each other in some way.
Its not easy finding an icon set that meet these requirements, and its especially hard finding a mini sized set of icons due to the design difficulties in something so small.

As such, we have collected 30 of the best mini icon-sets for your next web design or application project. The most popular sizes you will find are 12×12px and 16×16px, but you will also find some sets as small as 10×10px and some as large as 20×20px. They are also available in a variety of formats from .png and .gif to the easily editable .ai and .psd.
The one thing all of the sets have in common is that they have all been beautifully crafted and are all just sitting there waiting to be used in your next design project.

You might also be interested in…

50 of the Best Ever Web Development, Design and Application Icon Sets »
The Top 50 Web Development Icon Sets from 2009 »
40 of the Best Premium Icon Sets for Designers and Developers »
50 Social Service and Bookmarking Icon Sets for Bloggers »

Vaga by Ten by Twenty

Download Page: Vaga by Ten by Twenty »
Nu. of Icons in Set: 60
Format(s): .png
Size(s): 16×16px
License: These icons may be used by the licensee in any personal or commercial projects (royalty-free) and may not be resold or redistributed.

spirit20 by 19eighty7

Download Page: spirit20 by 19eighty7 »
Nu. of Icons in Set: 500
Size(s): 20×20px
Format(s): .png
License: Completely free to use for both personal and commercial projects. No attribution is required.

DEFAULT iCON by interactivemania

Download Page: DEFAULT iCON by interactivemania »
Nu. of Icons in Set: 110
Size(s): 16×16, 24×24, 32×32, 48×48, 64×64, 128×128 and 256×256px
Format(s): .eps, .png and .gif
License: Creative Commons Attribution-No Derivative Works 3.0.

HoHoHo! Icon Set by Brand Spanking New

Download Page: HoHoHo! Icon Set by Brand Spanking New »
Nu. of Icons in Set: 113
Size(s): 10×10px
Format(s): .gif
License: Creative Commons Attribution-ShareAlike 2.5 Licence.

Diagona Icons by Yusuke Kamiyamane

Download Page:Diagona Icons by Yusuke Kamiyamane »
Nu. of Icons in Set: 400
Size(s): 10×10px and 16×16px
Format(s): .png
License: Creative Commons Attribution 3.0 License.

Minimalist Pixel Icon Set by nclud

Download Page: Minimalist Pixel Icon Set by nclud »
Nu. of Icons in Set: 26
Size(s): 10×10px
Format(s): .gif
License: Creative Commons Licence.

bwpx.icns by Paul Armstrong

Download Page: bwpx.icns by Paul Armstrong »
Nu. of Icons in Set: 250
Size(s): 18×18px
Format(s): .gif
License: Creative Commons Attribution-Share Alike 3.0 United States License

Sweetie Icon Set by SubLink

Download Page: Sweetie Icon Set by SubLink »
Nu. of Icons in Set: 80
Size(s): 16×16px and 24×24px
Format(s): .png-24, .png-8 and .psd
License: Creative Commons Attribution-ShareAlike 3.0.

ExplodingBoy Pixel Icons by ExplodingBoy

Download Page: ExplodingBoy Pixel Icons by ExplodingBoy »
Nu. of Icons in Set: 31 Icons in four colors (blue, pale blue, orange, and grey)
Size(s): 20×20px
Format(s): .gif
License: Unknown.

Splashy Icons by Splashy Fish

Download Page: Splashy Icons by Splashy Fish »
Nu. of Icons in Set: 483
Size(s): 16×16px
Format(s): .png
License: They are free to do whatever you want to do with it and no attribution is required.

Sanscons by Some Random Dude

Download Page: Sanscons by Some Random Dude »
Nu. of Icons in Set: 100
Size(s): 16×16, 32×32 and 64×64 (in 13 different colors)
Format(s): .gif and .png
License: Creative Commons Attribution-Share Alike 3.0.

Mini Icons by FamFamFam

Download Page: Mini Icons by FamFamFam »
Nu. of Icons in Set: 144
Size(s): 16×16px
Format(s): .gif
License: Creative Commons Attribution 2.5 License.

Bitcons by Some Random Dude

Download Page: Bitcons by Some Random Dude »
Nu. of Icons in Set: 120
Size(s): 16×16, 32×32 and 64×64 (in 10 different colors)
Format(s): .gif and .png
License: Creative Commons Attribution-Share Alike 3.0.

Fugue Icons by Yusuke Kamiyamane

Download Page: Fugue Icons by Yusuke Kamiyamane »
Nu. of Icons in Set: 2,941(!)
Size(s): 16×16px
Format(s): .png
License: Creative Commons Attribution 3.0 License.

Web Mini by Axialis Software

Download Page: Web Mini by Axialis Software »
Nu. of Icons in Set: 237
Size(s): 16×16px
Format(s): .png, .gif and .ico
License: Creative Commons Attribution License.

Black & White Toolbar Icon Set by gentleface.com

Download Page: Black & White Toolbar Icon Set by gentleface.com »
Nu. of Icons in Set: 8 cursors and 236 icons (in both black and white color versions)
Size(s): 16×16, 32×32 and 48×48px
Format(s): .eps and .swf
License: Creative Commons Attribution-NonCommercial. The Royalty Free license costs $29.99.

Web Development Icons by Icojoy

Download Page: Web Development Icons by Icojoy »
Nu. of Icons in Set: 26
Size(s): 16×16px
Format(s): .ico, .icns, .tif, .gif, .bmp and .png
License: Unknown.

Silk Icons by FamFamFam

Download Page: Silk Icons by FamFamFam »
Nu. of Icons in Set: 700
Size(s): 16×16px
Format(s): .png
License: Creative Commons Attribution 2.5 License.

Mini Pixel Icons by IconDock

Download Page: Mini Pixel Icons by IconDock »
Nu. of Icons in Set: 320
Size(s): 14×14px
Format(s): .gif
License: IconDocks License Agreement.

LED Icon Set by led24.de

Download Page: LED Icon Set by led24.de »
Nu. of Icons in Set: 500
Size(s): 16×16px
Format(s): .png

Web Development Icons by kurumizawa

Web Development Icons by kurumizawa »
Nu. of Icons in Set: 26
Size(s): 16×16px
Format(s): .ico, .icns, .tif, .gif, .bmp and .png

Boolean: The Pixel Icon City by PraX-08

Download Page: Boolean: The Pixel Icon City by PraX-08 »
Nu. of Icons in Set: 100
Size(s): 16×16px
Format(s): .png
License: Creative Commons Attribution 3.0 License.

BacktoPixel by Icojoy

Download Page: BacktoPixel by Icojoy »
Nu. of Icons in Set: 75 icons in 10 Colors
Size(s): 9×9px, 18×18px and 28×28px
Format(s): png and .gif
License: These icons are free to use in any kind of project unlimited times.

Lullacons Pack 1 by Lullabot

Download Page: Lullacons Pack 1 by Lullabot »
Nu. of Icons in Set: 113
Size(s): 16×16px
Format(s): .png
License: GNU General Public License.

Tango Icon Library by the Tango Desktop Project

Download Page: Tango Icon Library by the Tango Desktop Project »

Interface Application Framework by webalys.com

Download Page: Interface Application Framework by webalys.com »
Nu. of Icons in Set: 290
Size(s): 16×16px
Format(s): .ai
License: These icons are free for personal and commercial use.

Tiny Icon Factory by tacolab.com

Download Page: Tiny Icon Factory by tacolab.com »
Nu. of Icons in Set: 28,000(!)
Size(s): 13×13px
Format(s): .png

Icon Library by PICOL (Pictorial Communication Language)

Download Page: Icon Library by PICOL (Pictorial Communication Language) »
Nu. of Icons in Set: 520
Size(s): 16×16px
Format(s): .png
License: Creative Commons-License BY-SA.

You might also like…

15 Uniform Payment Options Icon Sets for Ecommerce Design »
14 Free Mobile Application Development Icon Sets »
The Top 50 Web Development Icon Sets from 2009 »
8 Free Pictogram Icon Libraries and Collections »
40 Fresh and Free Icon Sets for Web Designers and Bloggers »
35 Original and Creative Free Twitter Icon Sets »
50 High Quality Free Icon Sets in PSD Format »
50 Social Service and Bookmarking Icon Sets for Bloggers »
50 of the Best Ever Web Development, Design and Application Icon Sets »
42 Amazing Photoshop and Illustrator Icon Design Tutorials »
35 Free Icon Sets for your iPhone – Pimp it Up! »
Free Icon Set for Designers – The Go Green! Icon Set (108 Icons) »

“

(Via Speckyboy Design Magazine.)

★ The 20 free fonts most used in the corporate design

NightLion — Tue, 11 May 2010 18:32:15 +0000

The 20 free fonts most used in the corporate design: “

Looking for the best fonts out there with no extra cash to spend? Well, nothing is impossible. Take a look below – I put together a collection 20 of the most used fonts by corporate designers. What’s important it is the fact that all these fonts are free, but they are still a perfect alternative to commercial fonts out there. Download and enjoy!

Best Corporate Free Fonts

Champagne Limousine

Click here to download this font

Vegur

Click here to download this font

Junction

Click here to download this font

Diavlo light

Click here to download this font

Delicious

Click here to download this font

Comfortaa

Click here to download this font

Caviar Dreams

Click here to download this font

Advent

Click here to download this font

Yanone Kaffeesatz

Click here to download this font

Sling light

Click here to download this font

Geo sans light

Click here to download this font

Convington

Click here to download this font

Decker

Click here to download this font

Sansumi bold

Click here to download this font

Oregon

Click here to download this font

Fontinsans

Click here to download this font

Kacst Poster

Click here to download this font

Albertino

Click here to download this font

Butter Unsalted

Click here to download this font

(Via 2experts Design.)

★ Custom Fonts on your website: Fast, Free and Cross Browser compatible, with TTFGen

NightLion — Mon, 07 Dec 2009 19:52:47 +0000

Definitely worth checking out, TTFGen provides a great way to embed custom TTF (true type) fonts on your website. The TTFGen script uses a PHP image renderer and your TTF giles to generate the image. The generated image takes parameters from your CSS file, and even includes support for rollover images.

It’s Fast Because it Displays Rendered Images, not Flash Objects

I used SiFR for a long time and the reason I didn’t stick with it was because of the amount of system resources and load time associated with the flash objects.

Fully SEO Complaint

Because it replaces text found within HTML tags, it is fully SEO compliant.

Tight CSS Integration

All of the parameters that generate the image are modeled after the standard CSS font parameters. So any styling that you do in your CSS will be reflected in your image.

WordPress Integration

For the not so technical, the is also a WordPress version. I’ve been using TTFGen on this website for a while and I recently switched to the WordPress version because it’s easier to manage.

Font Caching

Going back to my SiFR argument, once the image is generated, it is stored in a font cache folder on your webserver.

Benefits of the TTFGen WordPress Plugin Interface

Ability to Upload and Manage Fonts via a web interface
Ability to define and manage CSS associations without knowledge of jQuery
Make changes on the fly
Easily specify the replacement of div IDs, classes or full elements
Ability to easily whether or not the text is a link, and your desired rollover color

Where to get it?

TTFGen is a free download, available at www.ttfgen.com

★ Use Aptana’s PHP Development Environment with Aptana 2.0 +

NightLion — Fri, 13 Nov 2009 16:12:52 +0000

The team at Aptana must have heard our cries, because now with version 2.02, they have allowed the use of their original PHP 1.1 Development environment with the latest version of their software.

PHP Install Location

http://update.aptana.com/install/php/

Installation Instructions

In order to use Aptana PHP development environment:

Go to Help > Install New Software
Click the Add Button
Enter http://update.aptana.com/install/php/ as the location and PHP as the name
Press OK, Select the PHP addon, Install.

★ My Favorite Social Networking Icon Pack

NightLion — Fri, 23 Oct 2009 21:13:11 +0000

With so many sites out there giving you the top 5 or top 50 best social networking icon pack websites, I thought I would cut to the chase and give you my favorite pack.

Komodo Meedia has developed over 80 refined, amazing social networking icons for the top networks around.

Download the icon pack here