Design and build an image slider header – part 1
Image sliders are a great way of showcasing your design skills but also of engaging the visitor. It’s safe to say most sliders are powered by jQuery and probably use an open-source plug-in like Nivo or Cycle. These plug-ins are great and I would highly recommend them. However, in this two-part tutorial, we’ll design our slider using Photoshop and build it using a touch of HTML5 and CSS3. As for the slider plug-in, we’re going for the ‘WOW’ factor; the WOW Slider (http://wowslider.com) comes with many stunning visual effects.
In part 1 of this guide we will be opening up Photoshop and taking a look at filters, layer styles and getting the most out of patterns. Next month we will be launching our favourite text editor and building our attention-grabbing image slider – don’t miss it!
Lay down the background
Create a new file that is 1,200 x 700px and then fill the background with the colour #e6f1e7. Next go to Filter>Noise> Add Noise, and set the Distribution to Uniform with the Amount at 3%. Then create two vertical guidelines using the View>New Guide tool, with the first set to 120px and the second to 1,080px. That now gives us a working area of 960px – the web standard.
Top green bar
Select the Rectangle Marquee tool and drag out a selection spanning the full width of the document that’s about 15px high. Create a new layer and call it ‘Top bar’, and then fill the selection with green (#9dcd67). Give it the same amount of noise as the background by pressing Cmd/Ctrl+F.
Add the pattern
Open the ‘pattern.jpg’ file from the CD and go to Edit>Define Pattern. With the Rectangle Marquee tool, drag out a selection under the top bar, again 15px high. Then select the Paint Bucket tool, change it to Pattern (in the top right) and, on a new layer, fill the selection with the pattern. Turn down the Opacity to 20%.
Work up the logo
Select the Horizontal Type tool and type out the logo (size: 48px, colour: #999999). We used the font Lobster 1.4 from Google Web Fonts (www.google.com/webfonts). Ctrl/right-click on the type layer and choose Blending Options. Add Inner Shadow with both Distance and Size set to 2px, then reduce the Opacity to 35%.
Logo divider and tagline
Select the Line tool and turn off Anti-alias. On a new layer, draw a line next to the logo no longer than 30px in the colour #e0e0e0. Do another line right next to that in #ffffff. We then finish off our logo with the tagline using a 15px-sized Century Gothic font.
With the same Century Gothic font, type out the navigation text at a size of 15px. Then drag out a horizontal guideline and align them to the centre of the logo. Create a new layer under the Home text and call it ‘Overstate’. With the Rectangle Marquee tool, drag out a selection and fill it with our stripe pattern before turning down the Opacity to 20%. At this stage, change the colour of the Home text to #9dcd67.
The slider background
Now we can start creating the slider itself. So, with the Rectangle Marquee tool selected once again, drag out an oblong between the two side guidelines that’s about 370px in height. Fill it with the same colour green as we used in our top bar and also apply the same noise filter as the top bar and background, using the shortcut described in step 2.
The main image
Choose your own stock photo or download the example one available at: http://www.sxc.hu/photo/1361773; just make sure it’s bigger than 1,000 x 400px. Open it in Photoshop and unlock its background layer. Then Cmd/Ctrl-click on the layer to make it a selection before going to Edit>Copy Merged.
Setting the image
Go back into the main document and drag out two guidelines by 15px either side from inside the main guides. Using the Rectangle Marquee tool, drag out a selection within these guides that is about 385px high.
Add in the image
Now we need to paste our image inside this selection. So go up to Edit>Paste Special>Paste into, and then, making use of the Free Transform tool, resize your image accordingly. Next you need to open up your Blending Options menu and give it a 1px stroke in #999999. Call this layer ‘Main image’.
What we need to do now is add some shadows to the sides behind the main image. So, create a new layer under the slider image, call it ‘Shadows’ and then, with the Rectangle Marquee tool, drag out a selection about 945px wide and 338px in height; fill this with black (#000000). Give it a Gaussian Blur of around 7.4px and drop the Opacity to 70%.
Now let’s add the stripy banner that sits behind our slider. Once again drag out a selection using the Rectangle Marquee tool spanning the whole width of the document. Next, create a new layer called ‘Stripes’ and fill it with the stripe pattern. Lastly bring the Opacity down to approximately 20%.
The slider shadow
Using the Rectangle Marquee tool, drag out a selection under the slider that is the same width as the main image and about 45px high. Now create a new layer, call it ‘Slider shadow’ and fill it with black. Go to Edit>Transform>Perspective and click and drag the left corner to the right to bring in the top corners as shown.
Warp the shadow
Now that we have the right perspective, let’s use a bit of warping to arc the shadow up slightly. Go to Edit>Transform>Warp, click the bottom centre of the shape, and then drag up to create the arc. You may want to have a play around with this, but here we have it almost touching the main image above.
Finish off the design
Now we have our shadow in good shape, all that is left to do is to give it some blur. Go to Filter>Blur> Gaussian Blur and apply the same settings as the earlier steps – which should be 7.4px. Finally turn down the Opacity to 40% and then, using the Move tool, position the shadow slightly higher so it slips under the slider.