The Web Design Source

14 Most Useful Web Design Cheat Sheets

Chris Schroeder — Tue, 31 Mar 2009 11:07:46 +0000

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 CS3 Keyboard Shortcuts

Photoshop Lasso Tool Cheatsheet

Adobe Pen Tool Cheatsheet

CSS

CSS Cheat Sheet (V2)

Mac OS X CSS Cheat Sheet

CSS CHEAT SHEET

XHTML

(X)HTML Elements and Attributes

HTML/XHTML in one page

JavaScript Frameworks

jQuery 1.3 Cheat Sheet

mootools 1.2 cheat sheet

Prototype 1.6.0.2 Cheat Sheet

Flash

Adobe Flash CS4 OS X Keyboard Shortcuts

Flash CS3 Cheat Sheet

Cardboard Textures

Chris Schroeder — Sun, 29 Mar 2009 11:01:12 +0000

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).

18 Photoshop Brush Sets for Creating Incredible Lighting Effects

Chris Schroeder — Sat, 28 Mar 2009 11:01:51 +0000

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

Fractal Brush

Fractal brushes

Abstract 12

CS4 V2 Brush

Destiny Brushes

Quantum Brushes

Lighting Set 4

Glow Brushes I

Nova Equinox Brushes

Light Brush Set

LIGHT II

Unreal Brushes v.1

LIGHT III

Abstract Glow

Genisis Brushes

Hyper Brushes

Ultimate Brush Pack No.3

13 Tutorials for PSD to XHTML Conversion

Chris Schroeder — Fri, 27 Mar 2009 11:03:18 +0000

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 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 HTML/CSS from HVDESIGNS

A site I have visited for a few years is hv-designs. They have some great tutorials there, and this is just another one of them you should take the time to check out. They do an excellent job showing you all the little details in coding up the HawkStudio Designs template.

From PSD to HTML Guide : Part Digital

This doesn’t provide you with one of the prettier results, but they do a great job explaining the whole processing of coding. Including a detailed process of how to slice the template.

The Design Lab: PSD Conversion

First they provide you with an excellent tutorial on creating a design lab layout. Then they take it to the next step and give you a step by step directions on how to convert your newly created PSD into a fully functional web design.

Convert PSD to HTML - Deviantart

This one is a little bit different because I found it on Deviantart. It’s great because it allows you to download the tutorial and view it whenever you like. It will come in handy if your ever in an area without internet access and want to pull up the guide where you are.

ScreenCast: Converting a Design from PSD to XHTML

Another great tutorial provided by NETTUTS. There is an original written tutorial, but this screencast does a great job of explaining all the steps in designing a simple, but beautiful layout. If you prefer to work at your own pace though, the written tutorial comes in handy.

Coding The Creative Design Layout

HvDesigns provided a nice and simple tutorial on creating a design studio layout and they backed it up by offering a simple tutorial on how to code it for the web. They are sure to leave no detail untouched, while providing great results.

From PSD to CSS/HTML in Easy Steps

This tutorial is will show you in detail on how to make a very basic, and nature friendly layout come to life by coding it into a fully functional CSS theme.

ScreenCast: Converting a Photoshop Mockup

I myself enjoy a good written tutorial, but I do realize everyone is different and I wanted to throw in another great screencast. In this 3 Part series you learn how to take your design from Photoshop to your browse in no time.

ScreenCast: How to Convert a PSD to XHTML

Keeping with the theme of screencast, like the last tutorial in the list I thought i’d share with you this great 3 Part tutorial. Oh yeah, there is a 4th part entitled ‘Kicking IE’s Butt’ which is one of the most useful things to know how to accomplish.

Coding a Layout with XHTML and CSS

This is a tutorial done by erracticwisdom. They do a good job explaining the tutorial, but its forwarded more towards users with a little more experience and I wouldn’t recommend beginners trying to follow.

Simple and Clean Portfolio Layout Coding

Last, but certainly not least is another tutorial done by hv-designs. They do a nice job describing how to code a simple portfolio layout that they teach you to design in a previous tutorial.

If you have any favorite web design tutorials that we did not mention, be sure to let us know in the comments.

Original post by PSDVIBE.

50 Stunning Photoshop Text Effect Tutorials

Chris Schroeder — Thu, 26 Mar 2009 11:01:08 +0000

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.

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

Typography is the art of arranging type, designing type, and modifying type glyphs. The arrangement of type involves the selection of typefaces, point size, line length, line spacing (leading), adjustment of space between groups of letters (tracking) and adjustment of space between pairs of letters (kerning).

Here are some resources to give you further insight:

The Wisest Mind Has Something Yet to Learn

And we, too, never stop being inspired, learning and creating:

How to Choose the Right Type

Guess if you can, choose if you dare. Typeface can make or break your design. Let the type speak for itself: its dimensions, curves, strength and space should define your purpose.

On choosing type, from iLoveTypography
15 tips to choose a good text type
From kerning to hierarchy: this is one resource you will surely bookmark

Resources to Live by

Finding quality fonts can be overwhelming because there are literally millions out there and finding the right one is a painful process. Here are a few resources I use to find a font for a project I am working on.

Here Come the Tutorials

Now that you understand the importance of typography, let’s move on to the awesome Photoshop tutorials we were talking about. The above resources on type were pretty general, whereas these tutorials deal mainly with text effects that you could use in posters, magazines or whatever you wish. The basics of typography apply to most of the work you will do with the tutorials below.

Go Crazy with 3D

3D texture
Create amazing 3D-textured text with Illustrator and Photoshop in this in-depth tutorial.

Create a spectacular flaming meteor effect on text
Take typography one step further by having text falling from the sky in a burning inferno. Yes, this is the text-on-fire tutorial to end all text-on-fire tutorials. It uses a little Illustrator for the text and a lot of Photoshop to burn up the screen!

Funky 3D-style letters
A straightforward guide to creating funky 3D-style letters.

How to create high-quality metal 3D text in Photoshop
This tutorial shows you how to create 3D text and give it a high-quality metal look using only Photoshop.

Light and shade
In this tutorial we are going to take some very basic principles of light and shade to make a rather impressive-looking text effect.

Create Destructive Black and White Lettering with a Dramatic Splash Effect
Learn how to make some expressive lettering, which includes thoughts connected with a central word. You’ll turn standard text into a stunning, destructive illustration, and give it a final unique look.

Chunky 3D letters
Create big chunky 3D letters with this colorful tutorial!

Stunning 3D effects in 30 minutes
Together, with a pinch of this and a dash of that, we’ll figure out how to create this cool effect in just 30 minutes.

How to Quickly Create a Stylish Retro Text Effect
Learn how to create a quite cool retro text effect. You will learn how to use the Perspective tool to create depth and how designers can use default gradients in unusual ways.

3D text with a touch of grunge
A pretty detailed tutorial that shows you how to create grungy 3D text.

Design soft stylized 3D type
Learn the basics of creating polished 3D type using Illustrator and Photoshop.

Create a 3D flowery text effect

Create a dream-like design with 3D typograph
This detailed tutorial shows you how to create a 3D typography-based design. All the elements revolve around the theme of dreaming.

Elements of Nature

Quick and dirty Photoshop text effects from scratch (six tutorials in one)
Learn how to make six different effects using just layer styles. So really, this is like six tutorials in one!

Create a spectacular grass text effect in Photoshop
In this tutorial, you will learn how to create a rather cool-looking grass text effect.

Plastic text
Turn text into plastic using Photoshop’s layer styles.

Icy cold
Get ready for winter: create icy cold text!

Paint-splodged text
This is a quick text effect tutorial. It shows you how to simply create paint-splodged text.

Text in stitches
In this Photoshop tutorial, you will learn how to convert text to a path and stitch that path using a custom brush set.

Wet watercolor
A watercolor on wet paper effect. Experiment to create different painting effects.

How to create a gold text effect in Photoshop
Learn how to create a gold text effect. I personally love this effect, so subtle yet powerful.

Colored chrome
Make chrome text and then color it!

Reflective liquid type
Create liquid text, a very handy trick.

Wood inlay
A decorative wood-inlay text effect.

Paper-craft text effect
In this tutorial, you will learn how to create paper-craft text effects.

Dramatic text-on-fire effect in Photoshop
Learn how to use a photograph of fire to strike text to the match. This is a beautiful tutorial, a must-see.

Grunge & Co.

How to Create a Copper Photoshop Text Effect
This is a strong and eye-catching text effect, though relatively simple to create. You’ll be using bevel and emboss styles, pattern overlays, and combining different techniques to mock-up the text into a related background.

Vanity License Plate
In this tutorial you’ll learn how to create a custom vanity license plate using a few basic Photoshop tools a piece of reference material and some creative layer stylings.

Star Wars text effect
A step-by-step guide to creating a Star Wars text effect.

Create a trendy typographic poster design
Using simple shapes, you can produce some great-looking contemporary designs that create a big impact on posters; another good example being the recent Trendy Geometric Lines tutorial.

Graffiti with Photoshop
When you don’t have the guts to pull this off in the real world, Photoshop to the rescue. Learn how to make graffiti with Photoshop.

Super-cool frilly bits typography
In this tutorial, you will learn how to mix some vectors with letters to create a really nice design. This one is a personal favorite.

Typography wallpaper in Photoshop
Why not design your own typographic wallpaper from now on?

Dirty grunge text
Create dirty grunge text in Photoshop.

Rusty text
Make text rusty by following this easy tutorial.

Warm neon glow
Six simple steps to create a warm neon glow.

Floral
Learn how to make stylish floral typography.

Splattered blood
Blood-splattered mafia-style text!

Worn and torn
Create worn and torn text with this easy-to-follow guide.

Grunge rubber stamp.
Create a grunge rubber stamp effect in seven simple steps.

Distorted letters
Learn to distort letters using Photoshop brushes with this amazingly easy tutorial.

Decorative text
Learn how to decorate text with colorful floral patterns in this tutorial.

Rough metal
Create a rough-metal text effect with this tutorial.

Light and Glass

A slick supernatural text effect
Create a smoky night effect with text, giving it an eerie supernatural feel. It’s a good exercise in using the wave distortion filter.

Smoke type in Photoshop in 10 steps
Learn how to create a smoke typography effect by playing with some brushes and adjustment layers. It’s a very easy tutorial, and you will be able to finish the whole process in 5 to 10 minutes.

Moonshine effect
In just a few simple steps, you can add a soft, calm, easy-going moon-like text effect.

Transparent glass lettering in Photoshop
In this tutorial, you’ll use some super layer effects and a bit of magic to make a lettering style that looks transparent and stunning.

Scan-line text
Create a style dubbed “Scan-Line Text,” which is basically text that glows like bright scan lines, with a smart reflection as well. Learn how to create this amazing yet simple effect with this easy-to-follow tutorial.

Create a layered glowing text effect
In this tutorial, we will create this effect using very basic Photoshop tools and layering effects.

Vibrant pop text effect
In just a few moments, you can add a vibrant splash to your text that will really give your design a pop-culture flavor!

Slow-shutter effect
Learn how to create this beautiful slow-shutter text effect.

Colorful glow
A colorful, glowing text effect, great for integrating in designs with dark backgrounds.

Retro and Vintage

Colorful retro text
A colorful retro text effect using both Illustrator and Photoshop.

Colorful watercolor
Learn to make a colorful and distinctive watercolor text effect with this tutorial.

Experiments

Furry text
Create a tactile, furry text effect that looks like the real thing!

Wrapped parcel
A cartoon-like wrapped-parcel text style.

Barbed wire
Wrap your text in barbed wire!

Light burst
An amazing light-burst effect!

Sand writing
Learn how to write a message in the sand with Photoshop.

Flower text
Create a pretty floral text effect. It looks difficult but is surprisingly easy!

Resources

30 Awesome Photoshop Text Tutorials
30 Beautiful Photoshop Text Effect Tutorials
PSDtuts bring us 50 creative Photoshop text-effect tutorials.
25 Amazing Photoshop 3D Text-Effect Tutorials
25 amazing 3D-text Photoshop tutorials from DZineblog.
30 Beautiful Photoshop Text Effect Tutorials
More text-effect tutorials from Elsterama.

About the authors

Andrew Gibson is a photographer and writer. He runs the Magical Places Fine Art Online Photography Magazine.

Kumail.H.T is a professional Web and graphic artist. You may visit his portfolio or blog to learn more. He is also hosting a Graphical User Interface design competition in a few weeks, which you can learn more about here.

(al)

20 Beautiful Vintage Photoshop Brush Sets

Chris Schroeder — Wed, 25 Mar 2009 11:00:32 +0000

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)

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

3. Vintage Hands (15 brushes)

4. Vintage Models (11 brushes)

5. Retr0 Brushes (30 brushes)

6. Old Maps (11 brushes)

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

8. 1940 Cosmopolitan brushes (48 brushes)

9. Vintage Movie Posters (16 brushes)

10. Vintage brushes (12 brushes)

11. Vintage Birds (20 brushes)

12. Vintage polaroid brushes (14 brushes)

13. Vintage grunge brushes (17 brushes)

14. Alice in Wonderland brushes (20 brushes)

15. Old Newspaper (16 brushes)

16. Old Paper Brushes (7 brushes)

17. Vintage Lady (6 brushes)

18. Film and old projectors (5 brushes)

19. Vintage pics (8 brushes)

20. Birdcages (16 brushes)

About the Author

Mirko Humbert is a freelance designer from Switzerland. He shares his thoughts about his passion on his graphic design blog, Designer Daily, and also runs a CSS gallery called CSS Orgy. To connect with Mirko, you can follow him on Twitter.

200+ Beautiful Seamless Patterns Perfect for Web Design

Chris Schroeder — Tue, 24 Mar 2009 11:00:11 +0000

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)

Pattern 2 (14 patterns)

Patterns 2 (6 patterns)

Textured Stripes (6 patterns)

My first photoshop pattern (4 patterns)

pattern part1 (9 patterns)

Patterns .24 (33 patterns)

Lace Patterns: the prelude (6 patterns)

Untitled patterns 03 (12 patterns)

Patterns .23 (33 patterns)

Green Patterns (6 patterns)

Patterns .27 (50 patterns)

Patterns 3 (6 patterns)

Softly Plaidly- Peachy Keen (11 patterns)

black - white patterns (13 patterns)

PINKgossip_04 patterns (13 patterns)

A Decade Of Web Design In Pictures - 1997 to 2009

Chris Schroeder — Mon, 23 Mar 2009 11:03:58 +0000

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

Other patterns can be seen, design centric companies such as Apple and Oakley consistently focus on design, whilst news based websites such as CNN and the BBC have only modernized the traditional news & picture format.

Original Article: Design Reviver & edited by us.

Fluid Grids

Chris Schroeder — Sun, 22 Mar 2009 11:01:00 +0000

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

Stunning Examples of Light On Dark Web Design

Chris Schroeder — Sat, 21 Mar 2009 10:54:18 +0000

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.