The Source For Web Professionals


 

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

A well rounded web designer’s day is spent immersed in multiple graphic design programs and writing front end code. All of this moving from one environment to another can make it hard to memorize such things as hot keys and shortcuts for each. This is where cheat sheets come into play. A cheat sheet is simply a printable reference or guide to a particular software package, language, framework, etc.

Here are 14 of my favorite cheat sheets.

Photoshop

Adobe Photoshop CS4 Keyboard Shortcuts

Adobe Photoshop CS4 Keyboard Shortcuts

Adobe Photoshop CS3 Keyboard Shortcuts

Adobe Photoshop CS3 Keyboard Shortcuts

Photoshop Lasso Tool Cheatsheet

Photoshop Lasso Tool Cheatsheet

Adobe Pen Tool Cheatsheet

Adobe Pen Tool Cheatsheet

CSS

CSS Cheat Sheet (V2)

CSS Cheat Sheet (V2)

Mac OS X CSS Cheat Sheet

Mac OS X CSS Cheat Sheet

CSS CHEAT SHEET

CSS CHEAT SHEET

XHTML

(X)HTML Elements and Attributes

(X)HTML Elements and Attributes

HTML/XHTML in one page

HTML/XHTML in one page

JavaScript Frameworks

jQuery 1.3 Cheat Sheet

jQuery 1.3 Cheat Sheet

mootools 1.2 cheat sheet

mootools 1.2 cheat sheet

Texture Resolution: 1700 pixels by 1400 pixels
No. in set: 3

This is a free pack of cardboard textures you can use for anything you want. I hate strict licenses you know! Just don’t claim it as your own or resell it (but you can use it in commercial projects).

Popularity: 18% [?]

A couple of months ago, we took a look at 28 Powerful Photoshop Lighting Effects. This time I want to show you some of the most incredible Photoshop brushes I’ve found that can be used to create similar stuff. If you have a project coming up that requires some type of lighting effect, you will definitely find these to be very useful.

Sui Generis 3

Sui Generis 3

Fractal Brush

Fractal Brush

Fractal brushes

Fractal brushes

Abstract 12

Abstract 12

CS4 V2 Brush

CS4 V2 Brush

Destiny Brushes

Destiny Brushes

Quantum Brushes

Quantum Brushes

Lighting Set 4

Lighting Set 4

Glow Brushes I

Glow Brushes I

Nova Equinox Brushes

Nova Equinox Brushes

Light Brush Set

Light Brush Set

LIGHT II

LIGHT II

Unreal Brushes v.1

Unreal Brushes v.1

LIGHT III

LIGHT III

Abstract Glow

Abstract Glow

Genisis Brushes

Genisis Brushes

Hyper Brushes

Hyper Brushes

Ultimate Brush Pack No.3

Ultimate Brush Pack No.3

Popularity: 16% [?]

From PSD to XHTML

From PSD to HTML, Building a Set of Website Designs Step by Step

You can always count on NETTUTS and the Evanto network to supply you with high quality tutorials.  This is a great tutorial for beginners and intermediate learners alike to advance there coding skills.  Be sure to set aside a few hours, this walks you through the entire process of creating the design.  From PSD, to HTML, and then to WordPress.


Build a Sleek Portfolio Site

Build a Sleek Portfolio Site from Scratch

With PSDTUTS providing a great file to start off with, NETTUTS delivers yet another great tutorial on coverting a PSD to HTML for your own Portfolio website design.

PSD to XHTML


PSD to HTML/CSS from HVDESIGNS

Photoshop’s text and layer tools can be used to create some really awesome effects. We’ve put together a list of 60 of the best tutorials we could find to help you stay up to date on the latest trends and techniques. You’ll find some really cool grunge and glass styles (plus a few surprises!) and learn how some of the best designers create their unique effects.

Preview

Courtesy: LemonDesign

Instead of listing 100 plus tutorials that you’ll bookmark never to come back, we’ve decided to take you through the basics of typography, hopefully inspiring and then teaching you. Typography is an art just like any other. You have to feel the form, admire the curves and connect with the flow.

Introduction to Typography

TypePoster

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.

Seamless patterns are a great way to add a big impact to a web design without a lot of effort. Here are 223 of them that are absolutely beautiful. Whether you use patterns to fill the entire background of your site or just a specific area of your design, you will definitely find these useful.

GypsyGarden (1 pattern)

GypsyGarden

Pattern 2 (14 patterns)

Pattern 2

Patterns 2 (6 patterns)

Patterns 2

Textured Stripes (6 patterns)

Textured Stripes

My first photoshop pattern (4 patterns)

My first photoshop pattern

pattern part1 (9 patterns)

pattern part1

Patterns .24 (33 patterns)

Patterns .24

Lace Patterns: the prelude (6 patterns)

Lace Patterns: the prelude

Untitled patterns 03 (12 patterns)

Untitled patterns 03

Patterns .23 (33 patterns)

Patterns .23

Green Patterns (6 patterns)

Green Patterns

Patterns .27 (50 patterns)

Patterns .27

Patterns 3 (6 patterns)

Patterns 3

Softly Plaidly- Peachy Keen (11 patterns)

Softly Plaidly- Peachy Keen

black - white patterns (13 patterns)

black - white patterns

By reviewing what’s changed and what’s stood the test of time, we can make general assumptions of web design principles that will work going forward. Things have moved on in terms of interface design and graphics, some websites more than others. Looking at the examples below sites such as Amazon, eBay and Craigslist have changed comparatively little (Craigslist has hardly changed at all), a testimony to their forward thinking at the time, whilst others such as the Whitehouse have come a long way.

Whitehouse 1997 - 2009

Microsoft 1999 - 2009

CNN 2000 - 2009

BBC 2000 - 2009

Ebay 1999 - 2009

Amazon 1999 - 2009

Craigslist 1999 - 2009

Apple 1999 - 2009

Oakley 2000 - 2009

Google 1999 - 2009

Yahoo 1997 - 2009

How awesome would it be if you could combine the aesthetic rigor and clarity of fixed-width, grid-based layouts with the device- and screen size independence and user-focused flexibility of fluid layouts? Completely awesome, that’s how awesome. And with a little cunning and a tad of easy math, ALA’s Ethan Marcotte gets it done. We smell a trend in the offing.

Read the rest of this great article at alistapart.com

Popularity: 17% [?]

Deciding when to use light text on a dark background in web design should always be about enhancing the content and the user experience. Here are some stunning examples of light on dark designs where the designers achieved this while maintaining excellent contrast and readability.

Tapbots

Tapbots

Black Estate Vineyard

Black Estate Vineyard

Jan Sochor Photography

Jan Sochor Photography

Mark Dearman

Mark Dearman

tictoc family

tictoc family

mediocore

mediocore

auditude

auditude

Inca un calator

Inca un calator

Edit Studios

Edit Studios

Lucas Hirata

Lucas Hirata

Krista’s Creations

Krista's Creations

Take The Walk

Take The Walk

SpaceCollective

SpaceCollective

Aten Design Group

Aten Design Group

nclud

nclud

Dan Tobolic

Dan Tobolic

sroown

sroown

Giant Creative

Giant Creative

Nine Lion

Nine Lion

Revyver Labs

Revyver Labs

Brand Storm

Brand Storm

Elysium Burns

Elysium Burns

Kanchi

Kanchi

Popularity: 17% [?]

Next,