Advertisement
Complete Websites

Building a Website in Progressive Steps: Header and Footer

by

It's time for Part 2 of "Building a Website in Progressive Steps". In this part we'll
be discussing the header and footer, whilst designing them at the same time in Photoshop.


Step 2: Header and Footer Design

Don't like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Additional Resources

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Design & Illustration
    Interface
    How to Design an iOS 7 Email App in PhotoshopEmail app interface preview400
    In this tutorial, I will show you how to create a flat and modern, Gmail-inspired, iOS7 email app in Photoshop. We will begin by showing you how to sketch out your ideas, then we will see how to create your design in Photoshop, and finally, how to incorporate your design into an iPhone mockup. Let's get started!Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Web Design
    Complete Websites
    Creating a Theme for Anchor CMSAnchor tutorial 400px
    We're going to be making a custom theme for the "up and coming" open source CMS, Anchor. Anchor is a super simple, lightweight and bullet fast content management system. You can pick up a copy of Anchor from the Anchor CMS website, plus you can also checkout some of the themes available for Anchor on Anchor Themes.Read More…