Oftentimes, the one thing missing from an effective site is a powerful overall design.
This video tutorial will show you how to use Adobe Photoshop CS4 to design a sleek ecommerce website that can be used as a framework in the future. This tutorial, along with other tutorials on website design, will generally be more advanced than my tutorials previously published on Ecommerce Developer.
In this tutorial, I will first show you how to setup the different content areas of a site, including the header, footer, menu, and center product preview. Along the way, I will be showing you how to add various gradients or style effects that will be used throughout the design.
With the content areas finished and properly placed, I will show you how to start adding filler content and additional elements to the site design. First, I will show you how to quickly design a search area using replicated effects from the menu bar. Then, I will move on to the center product preview area and show you how to lay in product images, background content, and product information. Additionally, I will show you how to design a simple product preview navigation system that is common among ecommerce sites today.
Moving on to the footer area, I will show you how to design more detailed product boxes and how to quickly replicate them to fill in blank spaces. With all of the content designed and properly placed, I will quickly take you through adding text links to the menu bar and above the search area.
With the site design completed, I will explain how to use this design as a template for future designs and show you some of the minor modifications I made to yield a completely different look.
By the end of this tutorial, you should have a better understanding of some of the techniques that can be used to create beautiful site designs in Adobe Photoshop CS4.
