Screen real estate is an increasingly important topic in the world of ecommerce. Finding the best way to use screen space can be the difference between a one-time visitor and a lifelong customer.
Content switchers or sliders are an excellent way to display several items in a confined space, as well as increase user interaction. In this video tutorial, I will show you how to design custom content-switcher graphics in Adobe Photoshop CS4.
To begin, I will show you how to set up an area to act as the content holder. This will include setting up a bordered area for the content as well as importing a sample image for the design.
Next, I will show you how to add a simple four-button navigation-system graphic inside of the content area where users can select which page of content they would like to view. I will also show you how to offset the selected page by modifying the color of the button's text.
With the first navigation system graphic in place, I will show you how to design an alternative navigation system using round Back and Forward buttons on either end of the content container. I will show you how to create these buttons using a gradient fill, stroke, and outer glow, as well as how to use the text tool to create embossed back and forward arrows.
For the third and final content-switcher design, I will show you how to create a tabbed navigation system that relies on icons to convey information. These icons will be accompanied by instructive text and an arrow design to show users how to navigate the content switcher.
By the end of this tutorial, you should have a better understanding of some of the techniques that can be used to create the graphics for a content switcher in Adobe Photoshop CS4.
