How To Make A Div Overlay

That's right, your [i:7c5d6a2ff5][b:7c5d6a2ff5][size=24:7c5d6a2ff5]friendly[/size:7c5d6a2ff5][/b:7c5d6a2ff5][/i:7c5d6a2ff5] Moderator, Diamondandy, got bored and has decided to make a very basic overlay for you guys to follow and maybe learn from this and make your own... i am willing to give people a hand with problems etc.. but I'm not going to dedicate my time and day to everyone and make your profile.. [b:7c5d6a2ff5][size=18:7c5d6a2ff5]LEARN[/size:7c5d6a2ff5][/b:7c5d6a2ff5] the [b:7c5d6a2ff5][size=18:7c5d6a2ff5]HTML[/size:7c5d6a2ff5][/b:7c5d6a2ff5] and [b:7c5d6a2ff5][size=18:7c5d6a2ff5]CSS[/size:7c5d6a2ff5][/b:7c5d6a2ff5] as well because I'm not your dad.. I won't hold your hand every step of the day..

Software Used:
Adobe Image Ready CS 2
Macromedia DreamWeaver (In Part 2)

ok whan you open up imageready you need to become familiar with the tools you will be using in the program (link 1) in the link you will see the select tool, slice tool and slice select tool

http://img50.imageshack.us/img50/5239/tools8xd.jpg <<< link 1

now you have seen the main tools you will be using we can now start on our DIV, click on [b:7c5d6a2ff5]File > New[/b:7c5d6a2ff5] and make your Div the [b:7c5d6a2ff5]800 x 600[/b:7c5d6a2ff5] (link 2)

http://img158.imageshack.us/img158/1017/newdocument4fq.jpg <<< link 2

now you have made your new document it should look like the image below (link 3)

http://img101.imageshack.us/img101/9840/overlay23qr.jpg <<< link 3

so on our overlay we will obviously want a picture of ourselves on there so people know it's our page, so lets go look for our picture on our pc (links 4 and 5)

http://img223.imageshack.us/img223/4199/open8lx.jpg <<< link 4

http://img218.imageshack.us/img218/5448/openfound6jw.jpg <<< link 5

now our picture is open, we have to transfer it onto our overlay work area
so we click on the [b:7c5d6a2ff5]Select[/b:7c5d6a2ff5] tab and click on [b:7c5d6a2ff5]All[/b:7c5d6a2ff5] (link 6) when we have selected the whole picture, we then click on [b:7c5d6a2ff5]Edit[/b:7c5d6a2ff5] and click on [b:7c5d6a2ff5]Copy[/b:7c5d6a2ff5] (link 7).. when we do that.. we click on our Overlay work area and click on [b:7c5d6a2ff5]Edit[/b:7c5d6a2ff5] and then click [b:7c5d6a2ff5]Paste[/b:7c5d6a2ff5] (link 8)

http://img218.imageshack.us/img218/254/selectall6sp.jpg << link 6

http://img20.imageshack.us/img20/4842/copy7nb.jpg <<< link 7

http://img20.imageshack.us/img20/7237/paste1se.jpg <<< link 8

now we have a picture on our work area, we should make a few links.. ie.. View More Pics, Add Friends etc (links 9 and 10)

http://img54.imageshack.us/img54/9923/overlay113hr.jpg <<< link 9

http://img54.imageshack.us/img54/4629/overlay127xg.jpg <<< link 10

so yeah, so far we have our work area for the overlay, our pic and some links.. so now we need to fill the profile a bit, friends maybe? so basically we look for a picture of our friend and do the same as your pic.. copy and paste it onto the area and type their name under the pic so we know who our friend is... in my case it's my friend Lauz (link 11)

http://img95.imageshack.us/img95/3059/overlay139vr.jpg <<< link 11

so let's re-cap... we have our pic, our links and a friends pic and link...
i think we should learn how to make all these sections editable/linkable for our profile...
so we click on the slice tool and highlight the picture of yourself and give it a name (link 12)

http://img93.imageshack.us/img93/7555/sliceselect3ev.jpg <<< link 12

so now you know how to slice one section, i think we should slice the text and the friends picture too so we can link all them in the future (link 13)

http://img63.imageshack.us/img63/3003/overlay155qv.jpg <<< link 13

so does anyone fancy having a section for their comments box? about me? etc etc... well i thought you might want to put something about yourself on your profile after all so now we have to make a slice in the area for where you want your about me etc to be (link 14)

http://img124.imageshack.us/img124/4904/overlay167dn.jpg <<< link 14

now we have our text area made, we will want to make it editable... so goto the slices section and change it from [b:7c5d6a2ff5]Image[/b:7c5d6a2ff5] to [b:7c5d6a2ff5]No Image[/b:7c5d6a2ff5] (link 15)

http://img129.imageshack.us/img129/882/textslice2qb.jpg <<< link 15

when u change it to [b:7c5d6a2ff5]No Image[/b:7c5d6a2ff5] it will have a section u can type html etc in.. i have just typed in a few words just to fill it out for now so i know where it is in the coding when i look through it in [b:7c5d6a2ff5]macromedia dreamweaver[/b:7c5d6a2ff5], if you look on the right hand side of the next link you will see where i have just typed some random stuff in there (link 16)

http://img95.imageshack.us/img95/2439/overlay197hb.jpg << link 16

since the background is black u wont be able to see the text till later when u change the colour in [b:7c5d6a2ff5]macromedia dreamweaver[/b:7c5d6a2ff5]
now all we have to do is make each slice into a link itself :) , so we click on the select slice tool and click on the big pic of yourself .. at the right hand side it will have the slice info (name, type of slice, URL, target.. etc etc) in the URL section u will need to put the URL for the [b:7c5d6a2ff5]View More Pics[/b:7c5d6a2ff5] page (link 17)

http://img113.imageshack.us/img113/9734/linkingslices3tz.jpg <<< link 17

just repeat the process for all the other slices you have made which should be linked.. so now we have basically finished the making the Overlay seciton, all we have to do is save it for editing in macromedia/notepad (link 18)

http://img116.imageshack.us/img116/2883/saveas0ij.jpg <<< link 18

and now we find the location we want to save it in...

http://img91.imageshack.us/img91/2363/htmlimages3fc.jpg

TADA you have practically made your overlay now, you can click on the html file that has been created and view how your page will look right now before you edit it in [b:7c5d6a2ff5]Macromedia Dreamweaver[/b:7c5d6a2ff5] etc

hope this tutorial is of use and stuff... drop some comments or something
and if anything needs explaining then yeh.. tell me


PART 2: Coming Soon


BTW here is a link to a video of me making a very basic Div Part 1

http://rapidshare.de/files/17813323/div.wmv.html

© 2004-2017 MyGen.co.uk. All rights reserved.
MyGen v2.6 - 139004751 Unique Visitors
This page was created in 1.198 seconds
Privacy Policy

eXTReMe Tracker