Last week we published a tutorial for designing a clean portfolio site in Photoshop. In the past I’ve had several requests to follow up the Photoshop tutorials with one for coding the HTML/CSS of the page, so that is what we are going to do today.
Today we will be working through the process of designing a portfolio site layout in Photoshop. The tutorial will break down each step of the process, and you can download the PSD file from Folio Focus if you are interested.
The End Result:
Here is a look at what we will be designing in this tutorial (click on the image to see it in full size).
One trend in web design that has been gaining popularity is the use of fixed position banners that remain at the bottom of the browser as visitors scroll vertically. There are a number of sites in the design niche that are using this approach for various purposes. In this post I’ll show you how you can add one to your site, and for WordPress users we’ll look at how you can change the banner depending upon the category of the post by using PHP.
First, let’s take a look at 5 websites that are currently using this type of banner.
Web Design Ledger
Web Design Ledger started using a fixed position banner a few months ago to promote their premium membership and it has since been changed to be used for advertising space.
Yesterday we released a free one-page portfolio template in cooperation with Snobby Slice, and today we’ll go through the process of designing that template in Photoshop. If you want to get the Photoshop file used in this tutorial or grab the free template, you can do so at the end of this post. The template is free for personal or commercial use.
A Preview of the End Result:
Here is a look at what we will be designing (click the image to see it in full size).