The Source For Web Professionals


 

This site is dedicated to showcase only the most useful
web design tools & expert Insight
for web professionals.

Mozilla Firefox is a very popular browser, especially among web designers and developers. These days, with such a crowded field, staying at the top of the browser heap takes a lot of work. One of the factors that make Firefox so well-liked is the huge library of great extensions that enhance your browsing experience. Among the massive list of add-ons, many are vital to web designers and developers. If used, it will make your workflow quicker and more productive.

Let’s look at our top 20 essential Firefox extensions geared for people who build websites.

1. Web Developer

Web Developer

The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. For example, it has an option to inspect CSS styles of page elements that will tell you what CSS attributes they have, and which styles affect them.

2. SeoQuake

SeoQuake

Adding illustrative elements to a web design can take it to a whole new level. Illustrations add a uniqueness and character to a design, giving it the ability to make it truly stand out from the crowd. Designers and artists use them in various parts of a design: as backgrounds, as part of a captivating header, or as an accent within the content area.

In this article, you’ll be able to set your eyes on some of the best examples of websites that have chosen to use illustrated elements as part of the design.

1. The Great Bearded Reef

The Great Bearded Reef - screen shot.

2. iwit.nl

iwit.nl - screen shot.

3. MailChimp

MailChimp - screen shot.

4. Erguvan Platin Evleri

Erguvan Platin Evleri - screen shot.

5. Artgeex

Artgeex - screen shot.

6. Octwelve

Octwelve - screen shot.

7. meomi cloud house

meomi cloud house - screen shot.

8. the Octonauts

the Octonauts - screen shot.

9. Stuff and Nonsense

Stuff and Nonsense - screen shot.

10. Antiphrasis

Antiphrasis - screen shot.

11. Richard Stelmach

Richard Stelmach - screen shot.

In this massive collection of resources, you’ll find all sorts of resources including: tutorial sites, Photoshop Brushes, patterns, Photoshop Actions, showcases/collections, and much more.

Photoshop Tutorial Sites

1. Psdtuts+

Psdtuts+ is a weblog and Photoshop site that features high-quality Photoshop tutorials. On Psdtuts+, you’ll find tutorials such as “Creating a Touching Story Scene in Photoshop” and tips and tricks like “Using Adobe Kuler to Enhance Your Photoshop Color Workflow“.

Psdtuts+ - screen shot.

2. Tutorial9

Tutorial9 is a website that publishes excellent Photoshop tutorials such as “Draw a Classy 3D Poker Chip in Photoshop” and “Render a Realistic CD in Photoshop“.

Tutorial9 - screen shot.

3. PSDFAN

PSDFAN publishes high-quality tutorials, Photoshop freebies, and interviews with designers and artists.

PSDFAN - screen shot.

4. Photoshop Ninja

Photoshop Ninja is a site dedicated to Photoshop. It shares tutorials and tips such as “Opening Photoshop layered files as merged files“, “Creating overlapping text layers“, and “Why is my Photoshop layer style or effect not working?“.

Lately, there has been a trend towards incorporating hand drawn elements into web designs, bringing sketches and drawings that we typically see in the paper medium onto the web. Hand drawn elements can be seen in navigation bars, as backgrounds, as accenting elements, or as an entire site theme. They give a design a very unique, out-of-the-box, and organic/realistic look.

In this collection, you will be able to find some of the best designs that have hand drawn, “sketched” elements infused into them for your inspiration.

Bearskinrug

Bearskinrug - screen shot.

Tales Simon

Tales Simon - screen shot.

Sawyer Hollenshead

Sawyer Hollenshead - screen shot.

Kinetic Singapore

Kinetic Singapore - screen shot.

Christian Sparrow

Christian Sparrow - screen shot.

LOW MORALE

LOW MORALE - screen shot.

BootB

BootB - screen shot.

Pointless Ramblings

Pointless Ramblings - screen shot.

Kitty Attack

Kitty Attack - screen shot.

mel kadel

mel kadel - screen shot.

Frank PR

Frank PR - screen shot.

Redemption Maddie

Redemption Maddie - screen shot.

Legwork Studio

Legwork Studio - screen shot.

NJ REBEL

NJ REBEL - screen shot.

Dawghouse Design Studio

Dawghouse Design Studio - screen shot.

Design Jobs on the Wall

Design Jobs on the Wall - screen shot.

An effective logo sets the tone and public perception of your brand, and therefore careful thought and creativity must be put into constructing it.

In this article, you’ll find a large collection of tutorials and resources on the topic of designing logos by some of the most well-respected logo designers in the industry.

Logo Design Tutorials

Step-by-step logo

Designer/Author Chuck Green shows us the general process he takes when designing a logo.

Step-by-step logo - screen shot

Big Bocca - Illustrative Logo

This downloadable tutorial goes through the process of designing an illustrative logo.

Big Bocca - Illustrative Logo - screen shot.

Piranha’s Revenge - Illustrative Logo

Artist Von. R. Glitschka discusses his creative process for designing an illustrative logo.

Piranha’s Revenge - Illustrative Logo - screen shot.

Logo Frustration

Take a peak into a real-world project to see an actual logo designer in action.

Logo Frustration - screen shot.

Flash is an excellent technology for dealing with data visualization. It being client-side, it can reduce the amount of work your server has to perform in order to generate graphs and charts. Because of its robust ability in dealing with sleek and fluid animation and complex user interactivity, Flash is an excellent web and (and even desktop) application technology for dealing with graphing data.

In this article, you will find ten excellent Flash components that will help you in building stunningly attractive, complex, and interactive data visuals. These components will help you create an assortment of graphs and charts to aid in presenting otherwise boring and stale numerical data.

1. Open Flash Chart

Open Flash Chart Flash component screen shot.

Open Flash Chart is an open source Flash-based graphing and charting solution developed using ActionScript 3 and compiled using Flex. Open Flash Chart’s features include interactivity of your charts with tooltips, the ability to resize your charts client-side, and being able to save your graphs as images.

The utilization of paper as a design element in a web design is one of the most popular design trends. By using scraps of paper, cardboard textures, notebooks and notepads, a designer is able to compose an interesting and elaborate design. You’ll see paper used in various kinds of design components - in backgrounds, navigation menus, content areas, and all sorts of other web page parts.

In this showcase, you’ll see some of the best web designs that involve the use of paper elements and textures - for your inspiration.

Peace River Excursion

Peace River Excursion paper use screen shot.

Team Green

Team Green screen shot.

Diego Latorre

Diego Latorre paper use screen shot.

DK Publishing

DK Publishing paper use screen shot.

The Chernobyl Nuclear Disaster

The Chernobyl Nuclear Disaster paper use screen shot.

Church on the Rock

Church on the Rock paper use screen shot.

Dawghouse Design Studio

Dawghouse Design Studio paper use screen shot.

BlackWave Creative Branding and Design Services

BlackWave Creative Branding and Design Services paper use screen shot.

L’Antidote

L'Antidote paper use screen shot.

Gardening With Children

Chris Sharp paper use screen shot.

Revolution Driving Tuition

Revolution Driving Tuition paper use screen shot.

Pain is Good

Pain is Good paper use screen shot.

Music lovers often are sensitive to design. This probably explains why so many music websites are so wonderfully designed and inspiring.

In this article, you’ll be able to discover 30 beautiful music websites that stand out from the crowd.

Mx3

Mx3 screen shot.

midomi.com

midomi.com screen shot.

Apple - iTunes

Apple - iTunes screen shot.

Last.fm

Last.fm screen shot.

Deezer

Deezer screen shot.

evelMerch

evelMerch screen shot.

Gigotron

Gigotron screen shot.

Virb

Virb screen shot.

Mugasha

Mugasha screen shot.

just hear !t

just hear it

Songbird

Songbird screen shot.

14 tracks

14 tracks screen shot.

Bandize.com

Bandize.com screen shot.

Champion Sound

Champion Sound screen shot.

Lasttweet.com

Lasttweet.com screen shot.

Echodio

Echodio screen shot.

iLike

iLike screen shot.

Dorble.com

Dorble.com screen shot.

LyricSift

LyricSift screen shot.

Jamseed

Jamseed screen shot.

Taste Kid

Taste Kid screen shot.

NYLVI

NYLVI screen shot.

Pitchfork

Pitchfork screen shot.

Twisten.FM

Twisten.FM screen shot.

Sellaband

Sellaband screen shot.

Slicethepie

Slicethepie screen shot.

Tunerec

Tunerec screen shotl

Songza

Songza screen shot,.

Better Than The Van

Better Than The Van screen shot.

audiolife

audiolife screen shot.

Retro and vintage web designs have become increasingly popular. Ironically, the more and more the web progresses, the more designers start to revert back to old retro styles. For your design inspiration, here are 40 beautifully-designed websites that revert back in time to retro and vintage styles.

If you liked this collection, please consider also reading 20 Beautiful Vintage Photoshop Brush Sets.

1. Level 2 Design

Level 2 Design - screen shot.

2. Custom Design

Custom Design - screen shot.

3. Klassiker in Acryl

Klassiker in Acryl - screen shot.

4. Kritevia

Kritevia - screen shot.

5. Target Scope

Target Scope - screen shot.

6. DeVotchKa

DeVotchKa - screen shot.

7. Big Rig Design

Big Rig Design - screen shot.

8. Thunder Fuel

Thunder Fuel - screen shot.

9. Small Stone Recordings

Small Stone Recordings - screen shot.

10. The Lippincott

The Lippincott - screen shot.

11. Thrush

Thrush - screen shot.

12. FortySeven Media

FortySeven Media - screen shot.

13. Cottonseed Oil Comeback Tour

Cottonseed Oil - screen shot.

14. Jeffery Sarmiento

Jeffery Sarmiento - screen shot.

15. mediaBOOM

mediaBOOM - screen shot.

16. Carrozzeria Verga

Carrozzeria Verga - screen shot.

17. Slabovia

Slabovia - screen shot.

Vintage designs has gotten very popular over the past years, and it seems the trend keeps on going.

In this round-up, you’ll find 20 vintage Photoshop brushes you can download for free. There are over 300 individual vintage brushes here, so you will have a broad choice of brushes to apply onto your designs.

Each brush set was first tested, and the images you see below are previews of what to expect from each brush pack.

1. Darger-esque (23 brushes)

Darger-esque - preview.

2. 1920s ladies by 500ml brushes (7 brushes)

1920s ladies - preview.

3. Vintage Hands (15 brushes)

Vintage Hands - preview.

4. Vintage Models (11 brushes)

Vintage Models - preview.

5. Retr0 Brushes (30 brushes)

Retr0 Brushes - preview.

6. Old Maps (11 brushes)

Old Maps - preview.

7. Newspaper ads from the 60s (12 brushes)

Newspaper ads from the 60 - preview.

8. 1940 Cosmopolitan brushes (48 brushes)

1940 Cosmopolitan brushes - preview.

9. Vintage Movie Posters (16 brushes)

Vintage Movie Posters - preview.

Next,