20 Excellent Web Design Tutorials Using Photoshop

Via: cssrex.com

Designing is one of the most crucial step of  Web Development. The first thing that leaves an impact on a user is the design layout of a website. Photoshop is the tool of choice of most of the Web Designers. In photoshop, we can create almost evrything from small buttons and boxes to complete layouts and illustrations. Keeping that in mind, i have summed up 20 step by step tutorials that can help you in mastering website layout designing using Photoshop.

1. Design a Professional Portfolio Web Layout

web 2

The key feature of modern web design is simplicity. and some of the features that make a modern web page look fresh, appealing and easy to use.

The great sites above share the following design features:

• Simple layout
• Centered orientation
• Design the content, not the page
• 3D effects, used sparingly
• Soft, neutral background colours
• Strong colour, used sparingly
• Cute icons, used sparingly
• Plenty of whitespace
• Nice big text

Let's look at these features one by one [here].

Mashup websites

Here I show you some examples of mashup websites, they are great because they combine more than 1 API (Application Programming Interface) to make a unique tool. This is part of web 2.0

World National Anthems:

API: Google Maps + YouTube + Google Video

http://anthemsonmap.googlepages.com/index.htm

MapYourBuddies:

API: Facebook + Google Maps + Amazon

http://people.emich.edu/mchiang4/MapYourBuddies/

Twittervision 3D:

API: Poly9 FreeEarth + Twitter:

http://twittervision.com/maps/show_3d

TuneGlue:

API: Amazon eCommerce + Last.fm

http://audiomap.tuneglue.net/

vDiddy:

API: Grouper Video + Yahoo Video Search + YouTube

http://www.vdiddy.com/

Yahoo vs Google:

API: Google Search + Yahoo Search

http://www.langreiter.com/exec/yahoo-vs-google.html

Find Your own:

http://www.programmableweb.com/mashups