Lemina Troque
Well-Known Member
- Messages
- 6,745
- OOC First Name
- Stalker
- Wand
- 12 3/4" Black Walnut/ Maple Essence of Silver Thistle
Okay, well, this is something a lot of people have problems with, the easiest method seems a little buggy 
But I'll try my best 
I'm not going to go into details about how to create a siggy. The tutorial will start at the point at which you have a completed siggy, all ready to split up and code 
I'm gonna use this banner, below, which I actually had to split up anyway 
Also, I'm using CS4. Up to CS2, you have to use the 'Jump to Image Ready' button. I'm not really 100% sure how this works as I've never used the earlier versions, but I'm sure you can use my tutorial along with others online to figure it out.
Alrighty, so you start off in Photoshop, with the image all loaded up. It should still be a PSD
There are two ways to go here, I'm only going to show one.
Start by selecting the slice tool. You get this by right clicking on the crop tool.
Use this to select all your slices.
Make sure they do not overlap. You will need a slice for each link that you want and will also need others so that there are no L shaped slices.
So, now that you have all your slices done, you just need to save them. Go to File > Save for Web & Devices.
Select all the slices, using ctrl, and then change it at the side from GIF to PNG-24.
Keep all the defaults when you are saving it, but you might have to change from HTML and Images to Images Only, it depends.
Now, if you go to the folder where you saved your images, there will be another folders called 'images'. Upload all these files and then get ready to code it up
Take the top row and put in all the images for this row. Do not press enter! Only press enter between each row. Post the image in order. They should be named something like rhiannel_1, rhiannel_2 etc. So use this order!
For the links, put a link around every little slice of the image that has a word in it. This kind of thing is better seen by example, so here is the finished code for the siggy I was doing
But I'll try my best I'm not going to go into details about how to create a siggy. The tutorial will start at the point at which you have a completed siggy, all ready to split up and code I'm gonna use this banner, below, which I actually had to split up anyway
Also, I'm using CS4. Up to CS2, you have to use the 'Jump to Image Ready' button. I'm not really 100% sure how this works as I've never used the earlier versions, but I'm sure you can use my tutorial along with others online to figure it out.
Alrighty, so you start off in Photoshop, with the image all loaded up. It should still be a PSD
There are two ways to go here, I'm only going to show one.
Start by selecting the slice tool. You get this by right clicking on the crop tool.
Use this to select all your slices.
Make sure they do not overlap. You will need a slice for each link that you want and will also need others so that there are no L shaped slices.
So, now that you have all your slices done, you just need to save them. Go to File > Save for Web & Devices.
Select all the slices, using ctrl, and then change it at the side from GIF to PNG-24.
Keep all the defaults when you are saving it, but you might have to change from HTML and Images to Images Only, it depends.
Now, if you go to the folder where you saved your images, there will be another folders called 'images'. Upload all these files and then get ready to code it up
Take the top row and put in all the images for this row. Do not press enter! Only press enter between each row. Post the image in order. They should be named something like rhiannel_1, rhiannel_2 etc. So use this order!
For the links, put a link around every little slice of the image that has a word in it. This kind of thing is better seen by example, so here is the finished code for the siggy I was doing
Code:
[IMG]http://i43.tinypic.com/9bcdu8.jpg[/IMG]
[IMG]http://i39.tinypic.com/2ymj6s8.jpg[/IMG][url=http://hogwartsnewzealand.com/topic/7120873/1/][IMG]http://i40.tinypic.com/15qf812.jpg[/IMG][/url]
[IMG]http://i41.tinypic.com/zvt1jc.jpg[/IMG][url=http://hogwartsnewzealand.com/topic/7118996/1/#new][IMG]http://i40.tinypic.com/2e5o0g2.jpg[/IMG][/url]
[IMG]http://i44.tinypic.com/2hydi4i.jpg[/IMG][url=http://hogwartsnewzealand.com/topic/7094179/1/#new][IMG]http://i43.tinypic.com/n3927d.jpg[/IMG][/url]
[IMG]http://i39.tinypic.com/2v143kz.jpg[/IMG]