Horseknecht got their homepage at Neopets.com

De bloglayout
De bloglayout
Deze layout kan, zoals daarnet al is gezegt, bijna iedereen wel maken. Wel vereist is dat je bekend bent met HTML. Ben je dat niet, dan moet je hier even kijken. Pas dan kunnen we verder. Ga mij ook niet mailen dat het niet lukt als je geen verstand hebt van HTML, dan kan ik je niet helpen! Voor alle andere vragen sta ik natuurlijk wel open...

Stap 1 - voorbereiding
Dit is niet moeilijk, maar wel belangrijk. Zo moet je bijvoorbeeld in je hoofd hebben:

Wat is mijn thema?
Wat voor kleuren ga ik gebruiken?
Welke vakken wil ik?

Stap 2 - bginnen met tekenen
Er zijn verschillende programma's om een layout mee te tekenen. Ik neem Paint, omdat iedereen die heeft. Andere prgramma's die je kan gebruiken zijnbijvoorbeeld Photoshop of Paint Shop Pro.
Als eerste moet je natuurlijk weten wat voor vakken je nodig hebt. Ik neem als voorbeelden: welkom - links - mascotte - agenda. Die vakken begin je te tekenen. Zo ziet dat er ongeveer uit als hiernaast.
Zoals je ziet heb ik alleen de vakken getekend. Let op: bij al het tekenwerk in deze gids mag je je fantasie de vrije loop laten gaan. Dit zijn slechts voorbeelden

Stap 3 - kleuren
Nu we weten waar de vakken komen, is het tijd voor het inkleuren. Dit is belangrijker dan je denkt! Mensen komen niet in je gilde als je pijn in hun ogen krijgen van je kleurkeuze, maar als ze te zacht zijn is het weer te saai. Dus een goed punt om even bij stil te staan.
Ik neem als voorbeeld een tropische gilde. Dat vraagt dus om veel groen en lichtbruin.

Stap 4 - plaatjes
Natuurlijk onmisbaar bij een goede layout zijn plaatjes. Plaatjes van neopets vind je o.a. op de volgende pagina's:
Kerst | Piraat | Fee | Spook | Halloween | Tyrannisch | Maraquaans
Mijn tip is altijd: houd het rustig. Mensen zien door de bomen het bos niet meer als je ze overspoelt met 20 plaatjes. 2 Is al meer dan genoeg bij zo'n kleine layout. Maar hoe groter de layout, hoe meer plaatjes je natuurlijk mag gebruiken :P. Ik heb 5 plaatjes gebruikt bij dit voorbeeld, wat al wat veel is, maar in dit geval mag dat, omdat ik ze gedeeltelijk transparant heb gemaakt.

Stap 5 - text
Dit is ook vaak wel leuk op een layout. De meeste mensen zetten de naam van hun gilde op de layout. Dat gaan wij dus ook doen. Kijk maar naar het plaatje hiernaast.
Belangrijk is dat je een mooi lettertype hebt. Die vind je overal bij google. Schrijf de letters in Word, en kopieer ze dan naar je plaatje. Hier komt binnenkort een tutorial over op deze pagina. Als je dit gedaan hebt, ben je eigenlijk alweer klaar!
Wat je ook nog kan doen, is de functie van elk vak boven het vak zetten. Dit kan mooi zijn, maar dat is een kwestie van smaak.

Stap 6 - opslaan, uploaden, invoegen en coderen
Dit is de laatste stap van het maken van een gewone layout.
Het opslaan is niet moeilijk. Er zijn wel een paar formaten waarin je het kan opslaan:
Als .bmp - Voordeel: het plaatje blijft scherp. Nadeel: het wordt een enorm formaat. Het zal dus erg lang duren om het te laden, en misschien kun je hem zelfs niet uploaden omdat hij te bgroot is.
Als .jp(e)g - Voordeel: het wordt een plaatje die niet veel ruimte inneemt en zal snel laden. Nadeel: er gaat (veel) kwaliteit verloren.
Als .png - Voordeel: het wordt een klein, snel geladen plaatje en alle kwaliteit blijft behouden (tip). Nadeel: Het is een (veel) groter formaat dan .jp(e)g..

Het uploaden is al helemaal makkelijk. Dit kun je doen via bijv. Photobucket.com of Imageshack.us. Weet je niet hoe dit werkt? De mensen op de prikborden vast wel :P.

Voor het invoegen en coderen heb je dus, zoals aangekondigd, een beetje verstand nodig van HTML. Toch zal ik het hier even uitleggen.

1. Open in paint je plaatje en kies select.
2. Zoom in op 200%.
3. Kopieer de volgende code:
<div style="position:relative;left:1;top:2; width:3;height:4;overflow:auto" /> Text </div>
3. Ga met de cursor zo staan dat de linker en het bovenste uiteinde van je cursor (het kruisje) tegen de linker- en de bovenste rand van het vak staan.
4. Rechts onder zie je een aantal pixels staan. Onthoud die. Zet het eerste getal in plaats van de 1 in de code. Zet het tweede getal in plaats van de 2 in de code.
5. Klik en sleep de muis naar de linker-onderhoek zodat de rechter en het onderste uiteinde net de rand raken. Er zijn nu twee nieuwe getallen bijgekomen. Zet het nu derde getal in plaats van de 3 en de vierde spreekt voor zich.
6. Doe dit met alle vakken. Bij ronde hoeken, teken er even een vierkante hoek overheen, en haal hem daarna weer weg.
7. Kopieer nu de volgende code en zet op de plaats waar "JouURLHier.phtml" staat jou eigen url.
<img src="JouURLhier.png">

Gefeliciteerd! Je kan nu een prachtige layout maken! Maar de sleutel tot een mooie layout, is creativiteit!

De fullpage layout
Nu gaan we een fullpagelayout maken. Deze is een stuk leuker, want je kan er veel meer mee doen. Je bedekt de hele pagina en bepaalt zelf wat waar komt en hoe het er komt.

Stap 1 - beginnen te tekenen
Natuurlijk beginnen we met het plaatje dat hierboven is genoemd. Plak dat in paint. Je ziet er een vak op getekend. Daar moet je zo veel mogelijk van afblijven, daar komen bijvoorbeeld de gilderaad, gildepoll, gildestatestieken, enz. in. Natuurlijk mag je hem kleuren in de kleur die jij wilt.
Nu ga je tekenen. Teken er vakken in. Ik raad je aan om gewoon vierkante vakken te nemen. Ronde hoeken mag ook nog, maar ik raad je af ronde vakken te nemen. Dat is erg lastig om te coderen en nog minder mooi ook. Als je vakken hebt getekend, is het een kwestie van inkleuren en plaatjes en text invoegen. Kijk maar naar het plaatje hiernaast (die sterk verkleind is, en waarvan een stuk is afgehaald :P).

Stap 2 - opslaan en in twee delen...
Nu heb je een layout getekend, precies zoals jij het wou. Maar, hoe komt die layout nou zoals jij wilt op een site? En hoe krijg je die vervelende text en dat vervelende logo weg? Nou, zo dus.
Neem de layout voor je. Sla de layout in zijn geheel op. Ga nu onder afbeelding (of: image) naar "kenmerken" (of: attributes). Stel nu de grootte van de afbeelding in op 1000 pixels breed en 185 pixels hoog. Er gaat nu een hoop van je afbeelding weg. Geen probleem, je hebt hem immers al eerder opgeslagen. Sla de afbeelding opnieuw op (natuurlijk onder een andere naam). Nu heb je twee delen: de achtergrond en de banner. Op naar het coderen (tsja, het zal toch moeten).

Stap 3 - coderen
Coderen gaat eigenlijk vrij simpel.

Als eerste heb je een begincode nodig. Dat is deze:

<style /> table{background:none}#m,#n,#mb,#ol, #header, #footer, .sidebar, .contentHeader {display:none} #main {background: none; border:none;position:absolute; top:1px; left:2px;} img{filter:alpha(Opacity=0)} p img{filter:chroma(color=)} TABLE{background:none}TD{background:none} </style /> <body background="Vul-de-URL-van-je-achtergrond-in"> <img src="VuldeURLvanjetopbannerin.png" style="position:absolute;left:0;top:0;width:1000;height:185">

Dit haalt alles weg, dus de achtergrond, copyright, reclamebanners... gewoonweg alles. Ook staan er twee dingen op: de achtergrond (vul wel je eigen URL in) en de topbanner (ook je eigen URL invullen). Nu moet je alleen nog de text en het menu in de textvakken plaatsen. Dat doe je zo:

1. Open in paint je plaatje en kies select.
2. Zoom in op 200%.
3. Kopieer de volgende code:
<div style="position:absolute;left:1;top:2; width:3;height:4;overflow:auto"> Text </div>
3. Ga met de cursor zo staan dat de linker en het bovenste uiteinde van je cursor (het kruisje) tegen de linker- en de bovenste rand aan staan.
4. Rechts onder zie je een aantal pixels staan. Onthoud die. Zet het eerste getal in plaats van de 1 in de code. Zet het tweede getal in plaats van de 2 in de code.
5. Klik en sleep de muis naar de linker-onderhoek zodat de rechter en het onderste uiteinde net de rand raken. Er zijn nu twee nieuwe getallen bijgekomen. Zet het nu derde getal in plaats van de 3 en de vierde spreekt voor zich.
6. Doe dit met alle vakken. Bij ronde hoeken, teken er even een vierkante hoek overheen, en haal hem daarna weer weg. (zie plaatje)

Als je vakken hebt die helemaal tot aan onderaan doorlopen (dus geen onderkant hebben), doe je hetzelfde met de volgende code:
<div style="position:absolute;left:1;top:2; width:3"> Text </div>
Je hoeft de hoogte namelijk niet in te stellen, en een scrollbalk heb je ook niet nodig. Nummer 4 hoef je dus niet in te vullen.

Je moet het menu ook nog op de goede plaats zetten, dat doe je op dezelfde manier als met de andere vakken, alleen vul je de getallen achter #main in de StyleSheet in.

Ik hoop dat alles een beetje duidelijk is uitgelegd, en dat jullie nu mooie layouts kunnen maken. Heel veel plezier met je gilde!

Werken met Microsoft Word

Het textvak van Word

Nu gaan we werken met de textvakken van Word. Hiermee kun je een hoop leuke dingen doen. Bij ons gaat het om de kleuren. Je kan bijvoorbeeld twee kleuren in elkaar laten overlopen, of kiezen uit de verschillende patternen of voorgemaakte opvullingen. Bij de screenies die ik hieronder gebruik, staat alles in het Engels. Het kan dus zijn dat je het even moet vertalen. Laten we beginnen!

Open word.
Klik op Insert-text box (of: invoegen-textvak), zoals hieronder:
Je krijgt nu een kruisje als cursor. Klik en sleep je cursor over het "blaadje" zodat er een vak komt te staan:
Klik nu op de rad van je textvak, en klik op de rechtermuisknop. Klik vervolgens op "format text box" (of "textvak opmaken"). Je krijgt als het goed is dit schermpje te zien:
Klik op het driehoekje dat hierboven omcirkeld is. Klik kan op "fill effects" (of: "opvuleffecten").
Je krijgt nu weer een nieuw schermpje te zien. Dit bestaat eigenlijk uit drie delen:
Bij het eerste vak kun je kiezen in welke stijl je het textvak in het algemeen wilt opvullen. Je hebt de keuze uit:
1 kleur (dit heeft weinig zin, dit kun je net zo goed met paint doen)
2 kleuren, de ene kleur loopt in de ander over (*tip*)
bestaand opvuleffect, bijv. viir, kalm water, oceaan, enzovoort. Ook erg mooi.
Bij het tweede vak kun je kiezen hoe je de in het eerste vak gekozen stijl wilt hebben. Bijvoorbeeld van links naar rechts, van boven naar beneden, vanaf het midden of vanuit een hoek.
Bij het derde vak kun je nog preciezer de stijl kiezen.
Nou, kies iets leuks uit, druk op oke, en het schermpje verdwijt weer. Bekijk je resultaat :). Dit is een voorbeeld:
Nu nog even wat doen. Die rand er omheen is niet mooi. Ga nog eens naar de rand van je textvak, druk op de rechtermuisknop en op "format text box" (of: "textvak opmaken"). Je komt nu weer bij het schermpje. Ga naar "border" (of: "rand"), en stel "geen rand" in.
Druk weer op oke, kopieer je textvak, plak het in paint, bekijk het resultaat en feliciteer jezelf!

Werken met Jasc Paint Shop Pro

3D letters maken

Hey daar! Jij wilt vast letters in 3D leren maken. Lijkt me logisch, anders lees je dit niet. Voor deze cursus heb je helaas wel iets nodig: Paint Shop Pro. Als je dit niet hebt, kan ik je helaas niet verder helpen. Laten we beginnen.
Toch nog weer eventjes een berichtje vooraf. Ik gebruik Paint Shop Pro 8, en in het Engels. Het kan zijn dat bij jou, als je een andere versie gebrukt, sommige dingen ergens anders zitten, anders heten, enzovoorts. Als jij het programma in het Nederlands hebt, zul je het voor jezelf even moeten vertalen.

Open Paint Shop Pro. Kopieer text van Word of schrijf het zelf even in Paint Shop Pro.
Selecteer met de Select-tool het gebied rond de text, zoals hieronder:
Neem nu de Magic Wand. Deselecteer nu alles wat geselecteerd is rondom de text. Dit doe je door te doen alsof je gewoon selecteerd, maar dan met Control ingedrukt. Deselecteer ook dingen als de rondjes in o's, kortom: zorg ervoor dat alleen de text geselecteerd is, zoals hieronder.
Je hebt nu dus alle text precies geselecteerd. Tijd voor reliÃ«f!
Klik bovenaan in de menubalk op Effects - 3D Effects - Inner Bevel, zoals op de screenie hieronder.
Je krijgt nu een nieuw scherm:

Hier staat een helehoop op. Waar dat allemaal voor dient, dat moet je zelf maar even allemaal uitzoeken. Sluffel er wat rond, verander wat dingetjes, net zolang totdat je tevreden bent. Klik dan op OK. Als het goed is, is je text nu 3D!

Werken met Adobe PhotoShop

Deze gids is in afwachting...

Werken met Windows e.d.

Fonts (lettertypes) downloaden en installeren
Je ziet ze vaak. Geweldig mooie fonts. Maar, als je ze ook wilt, merk je dat ze niet bij Word staan.
Vaak is het dan een lettertype (oftewel: font) die je van Internet moet downloaden. Hoe je dat doet? Dat zal ik je vertellen!

HO! Voordat je verder kan gaan, heb je een programmatje nodig dat files "uitpakt", oftewel WinZip. Alle fonts zijn grote bestanden. De sites hebben ze "ingepakt", zodat ze snel "vervoerd" kunnen worden. Jij hebt WinZip nodig om het weer "uit te pakken".

Note: alles wat ik in deze tutorial vertel en laat zien staat in z'n Engels. Als je alles in het Nederlands hebt, moet je het zelf even vertalen.

Open Internet.
Het eerste wat je moet doen is natuurlijk op zoek gaan naar een leuk lettertype. Hier zijn duizenden sites voor. Ik gebruik meestal Dafont.com.
Op DaFont zie he bergen lettertypes. Omdat het er zo veel zijn, hebben ze het onderverdeeld via het alfabet. Als je dus een woestijn-lettertype zoekt, kun je kijken bij de D van Dessert, of bijv. de S van Sand. Zoals je merkt moet je er rekening mee houden dat het een site in het Engels is.
Als je een leuk lettertype gevonden hebt, kunnen we pas echt beginnen.
Ga naar "mijn documenten.
Maak een nieuwe fonder. Dit doe je als volgt: rechtermuisknop - new - folder. Kijk maar hieronder:
Nu geef je de folder een naam: noem hem maar iets als "lettertypes" of "fonts" of wat je maar wilt.
Nu gaan we terug naar DaFont. Ga naar het door jou uitgekozen lettertype, en klik op "Download", zoals hiernaast:
Je krijgt nu een schermpje "file download". Klik hier op "open".
Als het goed is krijg je nu een schermpje van WinZip. Klik op "Use Evaluation Version".
Nu krijg je een schermpje met de inhoud van de "paketjes". Er staat altijd een True Type Font (.TTF), en vaak ook nog een textbestand. Dat textbastand heb je niet nodig.
Klik met de rechter muisknop op het .TTF-bestand en klik op extract:
Alweer krijg je een schermpje, dit keer met de plaats waar je het wilt opslaan. Daarvoor hebben we die map aangemaakt. Die moet je selecteren, zoals ik hier ook heb gedaan:
Nu heb je het lettertype op je computer staan! Feliciteer jezelf maar, je hebt het eerste en moeilijkste deel achter de rug. Nu alleen nog zorgen dat 'ie ook werkt...
Open "mijn documenten". Ga naar de map waar je je lettertype hebt geinstalleerd. Kopieer dit lettertype.
Ga nu naar "My Computer". Kies "Control Panel", en dan "Fonts". Als je het in het Nederlands hebt, wordt dit "Deze Computer - Controlepaneel - Lettertypes".
Plak simpelweg je font in deze map, gewoon door rechtermuisknop - paste, en feliciteer je zelf: nu heb je je font gedownload en geinstalleerd! Je kan het nu in elke textverwerker gebruiken.

Layout Extra's

Wat maakt een layout goed?

Het moet in verschillende browsers (zeker Microsoft Internet Explorer en Mozzilla Firefox) even goed werken.
Het moet lekker gezellig zijn, maar niet te druk.
Je layout moet 1 geheel zijn. Wat je vaak bij layouts ziet, is dat ze bestaan uit 1 achtergrondkleur, 1 kleur voor de vakken, een paar plaatjes met witte randjes eromheen en wat lelijke text met witte randjes er omheen. Dit is 1 van de moeilijkste dingen van het layoutmaken, maar als je het goed kan, dan zijn je layouts ook stukken mooier.
Het is wel erg handig als je ook nog iets anders hebt dan paint. In ieder geval is het erg handig om Word te hebben. Je denkt nu waarschijnlijkt: "Word? Dat is een schrijfprogramma, geen tekenprogramma!", maar dan heb je het maar half goed. Word heeft namelijk mooie textvakken. Klik hier om daar meer over te lezen.
Als je wel een ander tekenprogramma hebt (bijv. Paint Shop Pro of Photoshop), gebruik het dan ook! Probeer er mooie effecten mee te maken...
...zoals een 3D layout! Dit kan erg mooi zijn, maar ik zou wel een beetje oefenen met het programma en met layouts, omdat het er ook heel aanstellerig uit kan zien.
En dan nu... het moment dat we allemaal gevreesd hebben... dat ik alweeer het woord ga zeggen... ORGINALITEIT!

Banner
Steun deze site en zet de volgende banner op de petpage, userlookup, gilde of waar je maar wilt!

Linkpartners

Linkpartners gezocht!

Awards

Jaja, de eerste award is binnen voor deze pagina!