Photo Sprites Menu Tutorial

This Tuto­r­ial will show you step by step how to build an attrac­tive menu using sprites for your Word­Press Photo web­site. I have used this fea­ture on the below demo site:

The menu is placed in the header.php of the Word­Press theme (here its Semi­oman­tics XO) in replace­ment of the navigation.

The image file con­sists roughly of a Film­strip serv­ing as mask and then the images which are inserted into the film strip. In the nor­mal posi­tion, the images are dimmed by a black fill layer at about 75% opacity.

The final image looks as follows:

Down­load my PSD file from HERE.

When you open the file in Pho­to­shop, you will find 3 fold­ers in the layer stack:

The bot­tom folder con­tains the lower film-strip, the next folder con­cerns the upper film-strip and on top you find the Semi­oman­tics XO Photo Pub­lish­ing ad which I kick in as a bonus.

To start, just make the “ad” folder invis­i­ble by click­ing on the eye icon placed to the left of the “ad” folder.

Then expand the folder called “lower” and inspect its con­tent. The lower folder rep­re­sents the images we will see when hov­er­ing with the mouse over the final menu.

At the bot­tom of the stack you will now find a green and a black back­ground layer. Use what­ever you feel more com­fort­able with, I sug­gest to use green for edit­ing and if you pub­lish on a dark web­site, save the final image with the black layer switched on.

On top of the back­ground there is an empty Image Layer which is just a place­holder to show you where to insert images.

After that come the images I have inserted and which you will replace with your own pho­tos or graphics.

I did not cre­ate a set of re-sized pic­tures for the pur­pose; I just placed pho­tos using the “Place” fea­ture: go File — Place, select a photo from your hard drive and place it on the can­vas. When it flies in, it comes with the “trans­form” han­dles and you can eas­ily move it into posi­tion and re-size it before con­firm­ing the placement.

Do this with 4 Pho­tos and delete my pictures.

Make sure you place all your images above the green or black back­ground layer and BELOW the Mask layer.

If you wish, just edit their style by dou­ble click­ing the Mask layer for exam­ple (the layer style pane pops up) and by chang­ing the color using a Color over­lay or a gra­di­ent or any other style.

Also you could fill the Spocket Holes with any color or tex­ture, by select­ing the layer (hold down the con­trol key and click on the layer — you get the march­ing ants around the holes and can fill them using the Fill tool from Edit — Fill.

The Text layer is a Kodak type of text layer which gives the typ­i­cal film look. You may delete it and cre­ate your own texts. I kept it more or less as is as on the hover func­tion the look is more impor­tant that the menu list item title.

I have just added as a sam­ple a layer called Yorgo which can serve as a sam­ple for your own text layer.

We are now fin­ished with the lower folder.

Expand the “upper” folder. In my case I used the same images, how­ever you may load dif­fer­ent images.

If you use the same image, just select your image lay­ers from the “lower” layer (hold down the ctrl key and select the 4 images) then right-click on the selec­tion and go “Dupli­cate Layer”; you will now get the 4 image copy lay­ers just above the orig­i­nals and note, the copies are now selected: with the mouse just push these 4 image copies up into the “upper” folder and drop them above the “Image Layer”. Then delete my images. Now your lay­ers are cor­rectly orga­nized, but your images have not moved.

While your 4 images in the “upper“folder are still selected, use the Move Tool from the tool box and hold down the “shift” key while you drag the images up from the lower part of the can­vas to the upper film-strip.

This oper­a­tion will place your images auto­mat­i­cally prop­erly in the upper film strip.

Note now that your Images show as in the lower layer, how­ever they appear dimmed.

To achieve the dim­ming effect you could just load a black color fill layer on top of the photo lay­ers and fill it with some 75% black. To make this sam­ple more inter­est­ing, I have placed with each image a sep­a­rate fill layer, which allows you to cre­ate for each image a dif­fer­ent color layer with dif­fer­ent fill factors.

These lay­ers are referred to as Layer 1, Layer 2, Layer 3 and Layer 4 in the upper folder.

Exam­ple:

If you also re-style the mask, you could get some inter­est­ing effects:

Of course you could also use pat­terns for the over­lay effect:

Ok,OK, it’s always the same … so lets go funky-freaky-grungy-trashy:

Enough … as you see, your cre­ativ­ity and imag­i­na­tion are the limit.

To get rid of the Kodak stuff, like the image num­bers top and bot­tom of the film-strip, just delete or hide the “Text” layer.

Then, you notice the other text lay­ers on top of the stack: GREECE, LIFESTYLE, ARCHITECTURE, NATURE and YORGO’s; just mod­ify the text by edit­ing these text lay­ers or delete them and cre­ate your own. I have used these text lay­ers as menu labels. The font I used is Gotham but you could use Myr­iad pro which is just per­fect and Kodak like.

If you use, as I do, the best Word­Press theme frame­work, Semi­oman­tics XO, it will be easy to just copy what I am doing here. If you use another Theme, you will have to adapt the instruc­tion to your theme.

Edit header.php from your XO theme or, if you use a child theme, copy header.php from your XO theme folder to the child theme folder and edit it in your text edi­tor (PSPad for example).

From your orig­i­nal XO header.php delete lines 144 — 153 (they con­cern the Nav­i­ga­tion bars) and ad at the same place your menu links and a style class like so:

 <div class="sprites">
<a href="http://photo.yorgoopress.com/nature-photography/" class="sprite1" title="Nature Photography by Yorgo Nestoridis"></a>
<a href="http://photo.yorgoopress.com/architecture-photos/" class="sprite4" title="Lifestyle Photography by Yorgo Nestoridis"></a>
<a href="http://photo.yorgoopress.com/lifestyle/" class="sprite3" title="Lifestyle Photography by Yorgo Nestoridis"></a>
<a href="http://photo.yorgoopress.com/greece-photos/" class="sprite2" title="Yorgo Nestoridis Photography"></a>
 </div>

Note: you insert this code just before the header clos­ing </div> which is orig­i­nally on line 154.

Let me com­ment the above:

1. We cre­ate a div class to be able to style and posi­tion the menu bar as a hole. (line 1 above)

2. We enter the html code for the URL we want to link to from the menu; NOTE: each link is asso­ci­ated with a dif­fer­ent style class we cre­ate class=“sprite1”, class=“sprite2” and so on. These style classes will allow us to style each menu list item indi­vid­u­ally using the CSS style sheet. (lines 2–5)

3. We close the sprites class div we had pre­vi­ousely opened on line 1. (line 6)

You may just over­write my links with yours as well as the titles, but leave the sprite1, 2, 3, 4 classes as is.

You are almost done; we just need to add a few lines to our style sheet. From your Word­Press theme or Child theme, edit style.css and add the fol­low­ing code:

.sprite1, a.sprite1 {
display:block;
width:256px;
height:236px;
background:url('http://photo.yorgoopress.com/wp-content/uploads/2011/08/photo-sprite.jpg') 0 0;
float:left;

}

a.sprite1:hover{
background-position:0px -239px;
}

.sprite2, a.sprite2 {
display:block;
width:256px;
height:236px;
background:url('http://photo.yorgoopress.com/wp-content/uploads/2011/08/photo-sprite.jpg') 257px 0;
float:left;
}

a.sprite2:hover{
background-position:257px -239px;
}

.sprite3, a.sprite3 {
display:block;
width:256px;
height:236px;
background:url('http://photo.yorgoopress.com/wp-content/uploads/2011/08/photo-sprite.jpg') 513px 0;
float:left;
}

a.sprite3:hover{
background-position:513px -239px;
}

.sprite4, a.sprite4 {
display:block;
width:256px;
height:236px;
background:url('http://photo.yorgoopress.com/wp-content/uploads/2011/08/photo-sprite.jpg') 769px 0;
float:left;
}

a.sprite4:hover{
background-position:769px -239px;
}

Replace my back­ground image link with yours: upload your sprites to the Media Library from your WP Dash­board and grab the link from there.

You may now posi­tion your menu if needed or add a bor­der by adding one more line as I did on mine:

.sprites {display:block;margin-top:30px;border-top:1px dotted #fdd89e;border-bottom: 1px dotted #fdd89e;padding:10px 0 10px  0; }

This is it.

If you encounter any prob­lem or need help, just com­ment here below.

• /create_topic php yabb
• free pho­to­shop tuto­ri­als mask­ing lay­er­ing yabb administrator
• film strip psd
• sprite menu wordpress
• /forum_topic php?thread_id= yabb 2000–2003
• sprite word­press menus
• css sprite templates
• free slid­edeck skins
• sprite menu psd
• /data_north php?comment_id= yabb

Related posts:

1. Sim­ple Sprites Menu
2. Evo2 Gallery Tutorial
3. How to Style the Word­Press Menu
4. Evo2 Menu Tutorial
5. Evo 2 Home Page Tutorial

Tags: CSS Sprites Menu for WordPress, Free Photoshop Tutorial, Free PSD Sprites Menu, How to Edit Sprites, Photo Shop Tutorial, Photo Sprites Menu Tutorial, Semiomantics XO, WordPress Tutorial

This entry was posted on August 17, 2011 at 3:12 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed.