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).
which is easily created with a photograph. At the end of the tutorial you will be able to download the original PSD if you would like to work with it, plus you can get a two-page PSD set that includes the homepage we will be designing, and a secondary page. The PSD set can be downloaded from our portfolio gallery, Folio Focus.
The Final Result:
Before we get started, here is a look at what we will be designing. To see it in full size, click on the image below. Throughout the tutorial the images of the design in process can be seen in full size by clicking on the image.
Today we will be going through the process of designing an attractive blog theme in Photoshop. The design uses a textured background and a basic two-column layout with a right sidebar. At the end of the tutorial you will be able to download the PSD file if you would like to work with it.
What We Will Be Designing:
Before we get started, he is a preview of what we will be designing (click the image to see it in full size).