If you look at my nav bar, when you put your mouse over each link a little illustration appears. I use this trick a lot in websites and blogs, as it adds a quirky and unique touch to the design, rather than your average link rollover. To code it however is more complex than your average nav bar. First of all you must be able to use html and css on your site (wordpress.com dosn’t work for this, but self hosted wordpress and blogger are perfect).
I’m not one to share my tricks, but I had someone ask me how I do this the other day, and since it was my brother who taught me this trick, its probably only fair I pass it along to others.

You will need:

> Photoshop
>Notepad (PC) or text edit (Mac)
>Your website/blog
>A calculator  (yes this gets mathematical!)
>Paper
>Pen

—————
So I will do my best to explain this as simple as possible:

Step 1// Prepare your image.

1. Make your nav bar image in photoshop. If you want to put rollover image above, be sure to allow space for it (or below, depending on your vision!)

2.View>rulers> then drag guides to mark where you want each button to divide (as you see in my picture above).

3. Image>Image size > take note of the height in pixels. (we will need this much later on too, so write it down)

4. Select the whole page and copy (edit>copy ).

5. Create a marker, either a guide or make a new layer (that can easily be erased) and put something right at the bottom edge to make the end. (its very important things line up for this to work!)

6. Then go to Image>canvas size> and double your height, adding it to the bottom of the page.

7. Paste a copy of your design onto the page, then line it up to be sure it sits directly under the first one (making sure it is EXACTLY under is soo important)

8. If you made a divider to help line things up, you can remove that layer now.

9. Now have fun with the lower layer and add your rollover images.

NOTE:  If you also want active, and visited states, add additional copies below each copy, and alter them to how you want it to change for each state. The possibilites are endless!!

Ok now the image is ready, save it as a .jpg or .png, but leave it open. We are getting mathematical now!!

Step 2//Take measurements.

1. Hopefully you already wrote down the initial height measurement. I usually have a piece of paper and pen for this part.

Create a little diagram that looks like this, showing the dividing line, the name of each link(or just initial for reference) the height(shown as the middle line) and the width (shown at the end)  :

2. Window>info  (this brings up a box with co-ordinates.)  Select the pointer tool. Now watch and record the x value of each dividing line, by hovering over the line. (there is no harm at this stage if you are not totally accurate)

Fill in your diagram as you go along until you have taken all measurements.

3. Now get that calculator out, because its time to do some maths. (This stage is CRITICAL, if you get any measurement wrong, it will go wonky and won’t work, so always double check)

You need to work out the size of each button, based on the co-ordinates you took. So for example based on my diagram above, the first button is easy, it is 78. The next one is 168- 78, so it is 90. Go along and work out each button, adding the numbers to your diagram.

Yay we have our measurements, now we can get to the code and make this come to life!

Step 3//Write the html

1. Now the safest thing to do is write all your code in notepad/text edit before putting it on the site.  So fire up your text editor of choice (BEWARE- do not use word!!!)
Copy and paste the following:

<div id=”imagenav”>
<ul>
<li class=”nav_home” ><a href=”http://yourblog.com“>home</a></li>
<li class=”nav_about” ><a href=”http://yourblog.com/about“>about</a></li>
<li class=”nav_inventory“><a href=”http://yourblog.com/inventory“>inventory</a></li>
<li class=”nav_services“><a href=”http://yourblog.com/services“>services</a></li>
<li class=”nav_contact“><a href=”http://yourblog.com/contact“>contact</a></li>
<li class=”nav_blog“><a href=”http://yourblog.com/blog“>blog</a></li>
</ul></div>

If you need more or less links, add or remove some of these. Each link sits between an <li> and </li>

2. Now to edit this, change the blue text, to the name of each link (but keep it one word, so simplify if necessary), this creates  a tag to reference in the css.  Change the orange to your links, and the green to the full link name.

Your html is now ready to go. So save the file and we can write the css.

Step 4//Write the css

1. Again, in notepad/text edit, you can make a new file or just put this under your html.

2. Copy and paste the below css code.

3. Upload your image to your image host of choice and copy the image link.

/*—:[ nav bar  ]:—*/

#imagenav ul {
padding:0;
margin:0 auto;
height:136px;
display:block;
width:514px;
background-image:url(‘http://yourimage.jpg‘) ;
}

#imagenav ul li{
overflow:hidden;
display:inline;
float:left;
height:136px;
}
#imagenav ul li a{
display:block;
padding-top:136px;
height:1px;
background-image:url(‘http:/yourimage.jpg‘) ;
}

#imagenav .nav_home a{
background-position: 0px 0px;
width:78px;
}
#imagenav .nav_home a:hover{
background-position: 0px -136px;
width:78px;
}
#imagenav .nav_about a{
background-position: -78px 0px;
width:90px;
}
#imagenav .nav_about a:hover{
background-position: -78px -136px;
width:90px;
}
#imagenav .nav_inventory a{
background-position: -168px 0px;
width:98px;
}

#imagenav .nav_inventory a:hover{
background-position: -168px -136px;
width:98px;
}

#imagenav .nav_services a{
background-position: -266px 0px;
width:84px;
}

#imagenav .nav_services a:hover{
background-position: -266px -136px;
width:84px;
}
#imagenav .nav_contact a{
background-position: -350px 0px;
width:90px;
}
#imagenav .nav_contact a:hover{
background-position: -350px -136px;
width:90px;
}
#imagenav .nav_blog a{
background-position: -440px 0px;
width:74px;
}
#imagenav .nav_blog a:hover{
background-position: -440px -136px;
width:74px;

}

4. Now the scary bit! Time to edit this code to fit with your html and your measurements and image. So I will guide you a step at a time..

- Paste your image code in where its says http://yourimage.jpg
- Where mine says 136 change it to your height.
-Where mine says 514 change to the width of your whole image.
-change all class names as per the html
-Now the complex number bit, which you must get accurate! Change all widths to the button widths we worked out.
-And finally change all positions to the position of the dividing line in front of the button (look at my numbers to see how it works).

NOTE: There are many more possibilities with this code, so if you know a thing or two about coding, you may be able to do some other things with this, like vertical menus, single rollovers, different positioning etc.

Step 5// Paste css code onto website.

1. Simply copy your css, and paste it into the css part of your site.

-On wordpress: appearance>editor>style.css>paste at the bottom

-On blogger: design>template>edit css>paste somewhere in the middle making sure it is after <head> and before </head>

Step 6//Paste html code into website.

1. First copy the code. Then..

-On wordpress: appearance>editor>header.php> paste at bottom  (or if you know what you are doing, place it wherever you want the rollover to appear on your page)

-On blogger: design>layout>make a html/javascript widget just under the header (not in sidebar) and paste code.

Note: On blogger, sometimes the ‘tabs’ code interferes, so you need to remove any css code relating to tabs (always use preview to check what you have done before saving changes)

Now if you did everything correctly it should work!!!

There are some really fun classes coming up next week at the school. For anyone looking for creative ways to entertains the kids!

Happy easter weekend! I won’t be getting to carried away with easter fun this year, as I have too much wedding planning and work to do!  It was Easter Saturday last year when Dan proposed to me (though easter last year was a bit later in April), which makes it a special time for us. How quicky time goes!  Now only 6 weeks till we get married!!  The last two years we went to the Easter show together over Easter, but I think we shall be giving that a miss this time, and instead will be doing wedding craft, discussing songs and making seating plans!

Enjoy the weekend whatever you end up doing!

1//Better Homes and Gardens 2//Country Living  3//Styleizimo 4//Twig & Thistle 5//Roy Joy

I feel like I have done so much new work lately, but share so little!!
Glitter and Pearls has had another big make over, thanks to me, with real glitter this time! This time we made the big leap from wordpress.com to self hosted wordpress, which really freed up the possibilities with both the design and function of the blog. Its like the site has matured. You can see the last re-design, here.  Hope you like the new look :)

The School is open!!  Sydney Stylist, Megan Morton, has begun a ‘school’ teach teach children an adults various crafting and styling projects and skills. There will be a wide array of exciting creative teachers to present these classes. Anyone can be part of it! The site will officially go live on Monday, and you will be able to see all the classes and book.

Now the reason I am involved with this, is that I was able to help Megan with the graphic side of things, the logo, signage, website, flyers and badges, and also the typography for the above wall installation. I was invited to her opening class which was so much fun!  We got to make flower bombs with Holly Hipwell of Flower Drum, and mingle with various bloggers and creatives.

Our lovely flower bomb  (Created by  Gemma Cagnacci and I )

Gemma and I, making our flower bomb (thanks to the school)

And this is me on the day, thanks to Matthew Roland taking this shot.

A special happy birthday to my mum! We had a little lunch tea party, and a friend also came to enjoy the fun.

I have some exciting news for you! Today, for the next 24 hours (New York time)I will be selling all my left over etsy stock for just $5 each. Why you ask? Because today celebrates 5 years since I signed up to etsy and started my own business!! My business has developed, grown and somewhat changed direction in that time. But I wanted to do something fun to celebrate this day.

So get shopping!! All these items are the very last of my stock, they won’t be back! PLUS all art prints will be signed with my current last name, and since I am getting married and changing my name in just 8 weeks, it makes these rather special and limited copies!

I do love texture, so very much. Here are a few lovely textured, rustic images I have seen recently.

Sorry for the lack of blogging lately, been a bit tied up with a huge pile of work and wedding prep (only 8 weeks to go!!)

1//roost blog (this blog is amazing!!)  2//voxpopulideco  3//kikki-k 4//teresa cutter

Trying to find that perfect little purse, that is unique, isn’t your typical bridal purse and suits my dress, what a challenge!!
Especially when you find things you like and it turns out they are no longer stocked or just insanely expensive. Perhaps I am just too picky!

These are some of the purses I came across and the style I have been searching for. 1920′s-30s style with beading and scallop edge/pattern. Which do you like best?

1/Forever21 2/1stdibs  3/greenCanyonRoad 4/Notonthehighstreet 5/Monsoon Accessories  6/ Weddingo

Ashley Percival draws the cutest owls ever!! Arn’t adorable, with their patterned wings and cute glasses.  See more of his illustrations here.  They have such character!