Resources for Web Development Students @ Robin’s Blog

With hundreds of tutorials for creating portfolio layouts and mockups in Photoshop it’s hard to find tutorials that are easy for novice Photoshop users to understand and complete. We have reviewed several tutorials for creating one page portfolio layouts and I feel the following should be easy enough for the beginner to understand. These tutorials will teach you many new Photoshop techniques and will give give you a better understanding of how to properly convert Photoshop files to working Websites.

Before you complete each of these tutorials I would recommend that you download the source PSD (Photoshop) files that can be found on each of the tutorials. They are usually linked at the beginning of the tutorial or at the end. Open the source PSD files and examine the layers, guides, etc. Keeping the source files open while you are working on the tutorial is also helpful if you have questions about measurements, guide positions, and font colors and sizes.

Many of these tutorials call for screen captures of Websites you have created. Because you’re entering a new field you may not have a lot of sites to showcase, so feel free to use photographs instead.

After completing the Photoshop specific tutorials I have compiled several tutorials for creating the Photoshop mockup and converting it to a working XHTML/CSS site. Students in my class must complete all of these tutorials.

The first five tutorials are from DesignM.ag, a community for designers. They were extremely detailed and very easy to follow. DesignM.ag has additional layout tutorials that you may want to review after completing the tutorials outlined in this post.

How to Design a One-Page Portfolio in Photoshop

Design an Attractive One-Page Portfolio Using Photoshop

Design a Textured Portfolio Site Layout Using Photoshop

Design a Portfolio Site with a Textured Background

After completing the above portfolio layout tutorials you should complete Design a Clean Portfolio Site in Photoshop and How to Code a Clean Portfolio Design

More Advanced Tutorials

Once you have completed the above tutorials take your knowledge a step further by completing the following tutorials:

Design a Minimal and Modern Portfolio Layout with Photoshop – I would recommend that you download the PSD file for reference before you begin the tutorial. By examining the Photoshop file from Six Revisions I was able to see where guides should be set which made creating the overall layout much easier. Once you have completed the Photoshop layout you can code it by following the tutorial Minimal and Modern Layout: PSD to XHTML/CSS Conversion

How to Create a Grunge Web Design Using Photoshop – While this tutorial does not have “portfolio” in the title the layout is really perfect for a one page portfolio for those of you who are looking for a grunge style site. It’s a bit more challenging and I found it extremely helpful to download the grunge-web-design-from-scratch.zip that can be found on the second part of the tutorials, How to Code a Grunge Web Design from Scratch. You will find that this site does not display properly in Internet Explorer 6 because PNG 24 images are used. Here is an article on Transparent PNG 24 Images with Internet Explorer 6 for Beginners.

I have copies of each of these tutorials printed with my own notes. Let me know if you need help with measurements, etc. We are continuing to work on finding tutorials that are easy to understand. Meanwhile, explore some of the other tutorials for creating portfolio layouts and mockups in Photoshop.