Web Design & Layout Photoshop Tutorials
Create a Clean Modern Website Design in Photoshop
Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding. ... Read More
Create a grungy background using patterns: Part 2
I’ve been asked to do a tutorial on how to do my end result for the previous tutorial, so the end of the week article will be a continuation of the pattern tutorial. There is a lot of different ways you can play with this to make it grungy and dirty, this tutorial shows you what I did. ... Read More
Photoshop/Illustrator Tutorial: Designing a Vexel Banner
In this tutorial I will teach you some of the techniques I use when designing my banners. It requires a basic knowledge of Illustrator and Photoshop, but if you don’t understand anything please feel free to ask me. ... Read More
Watercolored Design Studio Blog Layout
In this tutorial you will learn how to make a clean and simple watercolor design studio layout for a blog. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download. ... Read More
Chocolate Pro WordPress Style Layout
In this tutorial you will learn how to create a brown ‘Chocolate’ WordPress style layout that is very professional. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download. ... Read More
Design an Elegant Abstract Site Header Image in Photoshop
In this tutorial, I will show you the processes I used to design this really cool, abstract style site header image in Photoshop, similar to the one I currently have on psdvault.com. Personally I can see an increasing trend of having a big and eye-catching header image for website/blogs, especially since broadband has become a commodity amongst the majori ... Read More
Website Gallery Layout Design
n this tutorial you will learn how to make a layout for a css website gallery using Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download. ... Read More
How To: Make the Viget Inspire Background
A few of you have been asking, so here it is: An overview of how we put the Viget Inspire background together. The driving philosophy behind real-texture stuff like this is to fake as little as possible. No matter how many brushes you have or how good you are in Illustrator, there's a quality of unpredictability in real photographs and real, physical el ... Read More
Custom Hang Tag
It seems like everywhere I look these days designers are using more and more handmade objects in their work. From pencil sketches and fabric scans to paper scraps and household odds and ends these items are making their way into our work. In this Photoshop tutorial you'll learn how to create a retail hang tag. ... Read More
Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!
This year has seen a big increase in grungey / textured / hand-drawn styled website designs. By nature I tend to design a cleaner look myself, but I thought I'd try my hand at grunge today and write up a tutorial on creating a simple paper texture from scratch in Photoshop then marrying it with a web layout to create a neat design. Then later this we ... Read More
