Photoshop Tutorials — Web Layouts

vCard is an electronic version of a Business Card and can be great to have around. In this tutorial we'll be creating a Mini vCard using Adobe Photoshop. This vCard has a very simple design and doesn't have too many steps.

In this tutorial I will show you how to slice images for the web in Photoshop, how use the Bootstrap 960 grid to structure the layout and how to set up Bootstrap Togglable Tabs to make the portfolio area functional. We will also cover some new CSS3 properties, such as transition and rotate.

In this tutorial I will show you how to create a portfolio web design using Photoshop CS6 and the 960 Grid System. During the process I will explain some of the new features in Photoshop CS6 and how to use them. In the second part of this tutorial we will learn how to code the design using Twitter Bootstrap.

Howdy! Maybe you’re one of those who haven’t updated their Twitter headers yet, or maybe you’ve heard it already but you’re not just into creating your own design due to a lack of inspiration? Well, that’s not a problem at all now, this tutorial is for you. I’m going to show you how to create your own, and showcase some Twitter headers for your inspiration.

In this tutorial we are going to design a nice, minimal calendar widget in Photoshop. We are going to use some really easy techniques to achieve a beautiful final result. By combining some gray, black, and variations of different light colors, and a nice subtle texture, we will try to give the interface a grungy, minimal look.

If you’re looking for a web work, you need two things. The skills to get the job done, and a portfolio to show it to your prospected clients. While you might get a few work without a portfolio, some of the clients out there still prefer to have one. And with the rise of demand on Web Industry, many designers are popping out here and there so the competition is beginning to be hard.

In this occasion i will teach you how to create simple and functional promotional mobile apps landing page. In this tutorial , we are going create landing page for restaurant apps...

Howdy Folks! In this tutorial you will learn how to convert Artthatworks from PSD to HTML using Skeleton Boilerplate and make it responsive with media queries. As I mentioned in my last tutorial, I hadn’t tried using a framework until recently.

Howdy, folks! In this PSD to HTML tutorial you will learn how to code the Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop. I’m not really into coding, more of a design person and this is my first coding tutorial. I will try my best to guide you through the whole thing. We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout.

In this tutorial we will be re-creating Tumblr’s layout. Keep in mind that we do not want to copy their design with bad intention, but only to develop our skills and would like to see if we could achieve an exact, or at least a similar web layout.