Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Design and build an image slider header – part 2

Part 2 takes the Photoshop design created in step 1 and puts it into motion using HTML5 and a jQuery plug-in that promises the WOW factor

In the last issue we dived into Photoshop and revealed how to create a clean header element and image slider. Our objective was, once designed, to build the header using HTML5 and CSS3 before working some magic with the WOW Slider jQuery plug-in on the image lightbox.

As we said in the first instalment, there are many good reasons for having a well-built image slider, especially if you are a creative who wants to showcase your work. jQuery carousel plug-ins are very popular these days and can be found on many websites. As there are so many to choose from, it makes sense to try as many as you can and regularly update the one on your site to keep things fresh.

If you didn’t follow along with part 1, then fear not – you can just use the design supplied on this month’s cover disc. You will need to find your own stock images and we will be using Dreamweaver as our editor – however, you are free to use whatever editor you are most comfortable with. For a look at the slider in action, head to www.neilrpearce.co.uk/build.

Download tutorial files

Setting the background

The first thing we need to do is open up the design in Photoshop that we created in part 1 (or alternatively just grab the file from the CD). Hide all layers except the background, the topbar and the slider stripes layers. Then, using the Rectangular Marquee tool, make a selection from the top down at about 115px wide. Go to Edit>Copy Merged and save it as ‘bg.jpg’ inside a folder called ‘images’.

Select the logo

Now make a selection around the logo but hide the background layer so that it has a transparent background and save that as a PNG file. By doing it this way, if we ever want to use a different background colour or texture, we can easily, without it affecting the logo. Also save this inside the images folder.

Slider background and overstate

Here we make a selection around the overstate on our navigation and save that as we did in the previous step. Next, locate the green slider background layer and Cmd/Ctrl-click on that layer to make the whole thing an active selection. Edit>Copy Merged that and, once again, save it within your images folder.

Slider shadow

Again this is pretty straightforward and, by making sure the background layer is hidden and using the Rectangular Marquee tool, we can make a selection around our slider’s drop shadow and save that as a PNG. Now that should be all we need in order to start building our header and slider.

HTML5 Doctype

Launch Dreamweaver (or your preferred text editor) and create a new file; either open a new HTML5 file or manually type in the HTML5 Doctype. Then create a link to the styles.css file (which we will create in a minute) inside the head tag and save it as ‘index.html’.

001  <!DOCTYPE HTML>
002 <html>
003 <head>
004 <meta http-equiv="Content-Type"         content="text/html; charset=utf-8">
005 
006 <title>WOW slider</title>
007 
008 <link rel="stylesheet" href="styles.css">
009 
010 </head>
011 
012 <body>
013 
014 
015 </body>
016 </html>
017 

Wrap it up

Let’s make a wrapper so we can control the width of our page. Instead of using the boring old div tag, let’s use section and give it an ID of wrapper. That way our wrapper has more meaning than normal and this generally helps support the semantics of the page.

001 <body>
002 
003 <section id="wrapper">
004 
005 
006 </section>
007 
008 
009 </body>
010 </html> 

Header tag

Now we’re going to use our second HTML5 tag: the header tag. The header tag can be used more than once throughout your document but it makes sense to use it at the top of the page where it will make the most impact when a visitor first arrives. Inside that we can include an empty div with an ID called logo so that we can target the logo using our CSS; this will help to keep the page nice and light.

001  <header>
002 
003  <div id="logo"></div>
004 
005  </header>

Nail the navigation

Now inside our header tag we can use the HTML5 nav tag and then, as usual, include an unordered list for our navigation buttons. Here we are looking to target whatever page we are on; make use
of a class called current to implement this.

Slider section

Now underneath our header tag, let’s add in a section tag called slider_wrap that we will use to place the whole slider in. Create a div with an ID of slider_bg; this will be used for the green background of our slider. Lastly we will add in a div with an ID of shadow that will serve as our slider’s drop shadow.

×