WpRecipes

Grafpedia

Web Designer Depot

Web Designer Wall

Spoon Graphics

I Love Colors

N.Design Studio

DivVoted

Matt Mullenweg

Legendary Aircraft

In my opinion, that’s how all free stock images websites should be. As an example of this, let’s talk about a website I recently discover, named FreePixels.com.

Freepixels is very simple to use: Just go on their site and search for stock images. If you don’t need to find something specific, you can also browse the site to see what images can be used in your designs.
All freepixels.com images are categorized, which makes things a lot easier when you have to browse. I browsed a few categories while writing this post, and I must admit that I spent a long time on the site, browsing, watching images, thinking about how I can use them…

That’s a good point, but now we must talk about the licence. Licencing is a common problem to every creative person: “Can I use this icon? “Is that image CC licenced?” I have heard theses questions a lot of time. Even worse, on one of my first PsdVibe tutorials, I had to remove an icon I’ve used from the tutorial and all screenshots because the icon’s licence didn’t allowed me to do that.
On FreePixels, you don(t have to worry: All images from the site can be used both personally and profesionnally. That means, you can use them to illustrate blog posts, but you can also feature some of their image on a client’s website.

Of course, and particulary in the case of a website dedicated to stock images, an image is worth a thousand words. This is why I thought I can’t finnish this article without featuring some of my favorite stock photography from Freepixels. Just click on an image to download it.

Nice images, isn’t it? Visit FreePixels for more.

Source

Creating a CSS layout from scratch

Source

From PSD to CSS/HTML in Easy Steps – Part 1

Source

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

Source

How To Create a Horizontally Scrolling Site

Source

Converting a Design From PSD to HTML

Source

The Design Lab: PSD Conversion

Source

Web Design Layout #9 SiteBuild

Source

Convert a Photoshop Mockup to XHTML/CSS

Source

Coding a Clean Web 2.0 Style Web Design from Photoshop

Source

Please remember that even if theses templates can be downloaded for free and used for learning purposes, you have to buy a licence to use it for a client or on your own website. Read more about PsdVibe’s licences on this page.

The first XHTML/CSS Template we got for you is the one created after reading this tutorial.

And the second one is the “Modern blog layout“:

Get a commercial/public use licence for theses templates (More info)

Source: http://hjoranna.deviantart.com/art/Wood-Texture-4-117827898

2

Source: http://www.flickr.com/photos/matthamm/2689470945/

3

Source: http://www.flickr.com/photos/matthamm/3345597659/

4

Source: http://www.flickr.com/photos/matthamm/3345597591/

5

Source: http://www.flickr.com/photos/matthamm/3346430996/

6

Source: http://www.flickr.com/photos/matthamm/3345597487/in/photostream/

7

Source: http://crimson-designs.deviantart.com/art/Bruised-Red-Wood-11647331

8

Source: http://www.flickr.com/photos/deiby/2528506906/

9

Source: http://errantdreams.deviantart.com/art/Wood-Texture-3-Hardwood-94017060

10

Source: http://www.flickr.com/photos/bittbox/3508082241/in/set-72157617708336229/

Source

Feed me animals

Source

Cute critters

Source

Vector animals

Source

Vector kittens

Source

Nice animals

Source

Twitter animals

Source

Animal icons

Source

Asian cats

Source

Aries icons

Source

Another one to suggest? Be sure to tell me in the comments!

If you know of any other good free stock photo websites that offer quality images, please be sure to let us know in the comments.

Design Studio Web Page Layout

Learn how to make a dark and professional looking design studio web page layout. With this step by step tutorial that is easy to follow.  The PSD is available with this tutorials as well.

Design a Nice Blog theme on the 960 grid

In this tutorial I’ll show you how to mock up a fresh looking blog theme in Photoshop that is designed to be used within the 960 framework. This tutorial was designed more for web design theory than Photoshop technique. It is for that reason that I don’t go into great depth on each Photoshop step, but spend considerably more time on design theory and application. Photoshop beginners may find it somewhat tricky to follow along.

Create a Photoshop template for Drupal or Joomla

Learn how to make a bright and vibrant photoshop template that could be used for your Drupal or Joomla theme.  The only downside is that you have to pay for the psd files.

Dark and Simple Car Layout #4

In this tutorial were going to be making a stylish car layout, although the layout isn’t particularly car “related” it does featured some awesome content box styling.

Simple Wood Web Design Layout #9

Another tutorial by the hv-designs team and  in this tutorial il show you how to create a web design layout, currently the 9th one in there our tutorial database.  I personally enjoy the wooden header effect.

Light Colored Portfolio Layout #10

In this tutorial were going to be creating a simple straight to the point portfolio. Ive had tons of emails requesting for a portfolio layout. So here it is.

Website Hosting Template Layout

In this Photoshop tutorial, they will show you how to create a unique and professional hosting template. This tutorial goes through the steps to create a website header, footer and content area.

Create an Awesome Enterprise Layout

You will create a tutorial for a WordPress Style design or for a company layout.   You can use this
layout in different ways if you modify it a little to your own liking.

If you know of any web design tutorials that were posted in March that are worth putting in the list, please let me know in the comments and i’ll add them!

Tested In:

Firefox, Opera, IE7, Safari, Netscape, and Chrome

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.