Binnenkort vind je op deze pagina de uitleg voor een splinternieuwe fullpage gildelayout! Kom dus snel weer eens terug!

Welkom

Hoi! Leuk dat je hebt besloten om mijn layoutgids te bezoeken. Je kan met behulp van deze layoutgids alle soorten layouts maken, van lookups tot en met petpagelayouts! Hiervoor heb je niet veel meer nodig dan paint en de uitleg op deze petpage. In de zijbalk kun je de linkjes vinden waarmee je makkelijk naar de layoutsoort kan gaan die jij wilt maken.

Voordat je begint zou ik het erg fijn vinden als je de volgende punten leest en jezelf hier ook aan houdt. Ik zou ook het heel fijn vinden als je de link naar deze gids en mijn username in de layout wilt laten staan. Je mag in plaats daarvan ook mijn username ergens op het plaatje van je layout typen. Dat scheelt ruimte in de tekstvlakjes en het staat ook nog eens mooier. Het hoeft niet perse heel groot. Als het er maar staat. Er is niets vervelender als te zien dat iemand zichzelf met grote koeienletters credits geeft voor een layout en dan vergeet dat ik via deze petpage heb geholpen met de codes.

Daarnaast zijn de templates uit deze gids niet bedoelt om te worden gebruikt voor graphicssites. Als iemand je vraagt of je een layout wilt maken voor diegene is dat natuurlijk wel goed, als je dan wel de link naar de gids laat staan.

Ik hoop dat je deze twee punten tijdens het lezen van deze gids in gedachten houdt. Ik wens je nu veel succes met het maken van je (eerste) layout, en als je vragen hebt of ergens niet uit komt kun je me altijd neomailen. Je kan neomailen naar mijn mainaccount inge_123. Lees als het kan wel eerst even de FAQ, ik krijg vaak dezelfde vragen =D

~Inge




Let op!

Let op bij de lookups: Om de lookup te laten werken, moet je in de hele code elke keer dat het stukje tekst "white-space: normal" voorkomt, dit vervangen door "position: absolute", alleen dan zal je lookup werken!!! Doe je dit niet, dan lukt je lookup niet!

Daarnaast staat er in de code van de layouts altijd (c) lookup by "Jouw Username" & inge_123. Doordat de code die ik gebruikte voor jouw username op dit moment niet meer werkt, zul je nu zelf je username daar moeten invullen!

Op zoek naar een leuke site?

Maaike maakt een overzicht van oude nederlandstalige gebruikersaccounts! Dus speel jij al heel erg lang neopets of ken jij iemand die al heeeeeeel erg lang neopets speelt? Stuur haar dan een mailtje!

Een andere site die zeker de moeite waard is om te bekijken is Stan's Verlaten Zolder Gids.

Heb jij een leuke site en wil jij iedereen laten weten dat hij bestaat? Neomail dan inge_123. Wie weet zie je hem dan de volgende keer hier op deze pagina staan!




Geef deze petpage een cijfer

Ik vind het leuk om te weten wat jullie van deze petpage vinden. Daarom kan je hier deze petpage een bepaald aantal sterretjes geven. Vijf is het hoogst, een is het laagst. Ik heb dit ratingsysteem niet gemaakt. Het komt van een duitse petpage die je hier kan vinden.

Het sterrensysteem werkte niet meer sinds de filters zijn veranderd. Het lijkt nu beter te werken dan eerst, alleen telt hij je stem helaas nog steeds niet op!





Tutorials ------ gallerijlayout 1

In deze tutorial ga ik je uitleggen hoe je een gallerijlayout maakt. Hieronder staat een voorbeeldje van hoe het eruit zal komen te zien.

Voor deze layout heb je een tekenprogramma (bv. paint) nodig en natuurlijk een gallerij. Klik hier om naar de plaats te gaan waar je je gallerij kan bewerken. Als je er nog geen een hebt, maak je er eentje aan.

Plak de code hieronder alvast in het vlakje waarbij gallerij omschrijving staat.

Als je hebt gekozen voor gallerij updaten en je kijkt in je gallerij dan zie je dat de layout nu nog standaard is. Je kan nu de banner gaan versieren in je tekenprogramma.

De banner is verkleind. Voor de goede grootte klik je met je rechtermuisknop op het plaatje en kies je voor eigenschappen. Je kan dan onder andere de link van het plaatje zien. Kopieer die en plak hem in je adresbalk. Dan kan je het plaatje opslaan.

Sla hem op op je computer, zodat je hem kan bewerken met je tekenprogramma (bijvoorbeeld paint, gimp of photoshop).

Dit is het bannertje dat bovenin je layout zal verschijnen

Als je dit plaatje hebt versierd kunnen we weer verder. Er moet nog een herhaalachtergrondje worden gemaakt om de layout naar beneden door te laten lopen.

De herhaalachtergrond maken we door een klein strookje van de onderkant van het malletje te nemen, dat te kopieren en in een nieuw bestand te plakken. Dan krijg je zoiets:

Dit is een herhaalachtergrondje

Als de hierboven beschreven methode nou echt niet lukt, kan je ook gewoon het plaatje hierboven even opslaan en met jouw kleuren versieren. Maar zorg er dan wel voor dat het malletje van de bovenkant hierin doorloopt!!

Dan is het nu tijd om je plaatjes te uploaden, zodat je ze kan gebruiken in je layout. Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatjes hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de grote code.

Nu gaan we beginnen met coderen. Dit is niet zo moeilijk aangezien je eigenlijk alleen maar de goede link op de goede plek in de code moet zetten. Ga naar de code die je al in het vlakje van je gallerij hebt geplakt.

De link van de banner moet je hier in de code neerzetten:

Let op: VEEL GEMAAKTE FOUT! Veel mensen halen het id="nietweghalen" weg en daardoor komt het plaatje niet op de goede plek te staan. Laat dus het id staan!

Dan de url van de herhaalachtergrond. Deze moet hier komen:

Eigenlijk ben je nu klaar! Je kan als je wilt nog de tekstkleuren veranderen. Een kleurenkaart kun je hier vinden. Je kan de tekstkleuren op de volgende plek in de code veranderen:

Je kan ook de navigatie op een andere plaats zetten. Dit kan je op de volgende plaats doen door de getallen achter "left" en "top" te veranderen.

Gefeliciteerd met je nieuwe gallerijlayout!




Tutorials ------ Gallerijlayout 2

In deze tutorial ga ik je leren hoe je een gallerijlayout maakt. Deze layout zal ook werken in je gallerij. Hier een klein voorbeeld van hoe je gallerij eruit zal gaan zien:

Voor het maken van een gallerijlayout heb je een code nodig. Hieronder staat de code die we gaan gebruiken. Plak hem alvast in het vlakje, dat je hier kan vinden.

Voor deze gallerijlayout heb je een banner nodig, die de bovenkant van je shop vult, en een herhaalachtergrond die de rest van de pagina aanvult.

Het plaatje hieronder is de banner. Hij is een beetje verkleind zodat hij op deze petpage past. Voor de goede grootte klik je met je rechtermuisknop op het plaatje en kies je voor eigenschappen. Je kan dan onder andere de link van het plaatje zien. Kopieer die en plak hem in je adresbalk. Dan kan je het plaatje opslaan. Sla hem op op je computer, zodat je hem kan bewerken met je tekenprogramma (bijvoorbeeld paint, gimp of photoshop).

Zoals je ziet is een stukje van de roze rechthoek op het plaatje wat lichter roze dan de rest. Dat heb ik expres zo gedaan, zodat je goed kan zien waar de navigatie zal komen te staan. Houd die plek zo rustig mogelijk qua achtergrond zodat je navigatie goed leesbaar blijft.

Op het malletje is ook, zoals je ziet de achtergrond licht gestreept. Dat kan je zo laten als je dat leuk vind, maar je kan het natuurlijk ook vervangen door een effen kleur of een leuk patroontje.

Vervolgens kan je beginnen met de herhaalachtergrond, zie het voorbeeld hieronder. Ook deze is verkleind.

Ik raad je aan om, als je de diagonale lijnen achtergrond die standaard op het malletje staat hebt gebruikt, dit herhaalachtergrondje te bewerken, aangezien je anders misschien last krijgt van strepen die niet goed doorlopen.

Als je zelf een achtergrond hebt gemaakt, kan je deze ook laten doorlopen door een stukje van de onderkant van het bannertje te nemen, en dat opnieuw op te slaan. Tot zover het gedeelte over de plaatjes.

Dan is het nu tijd om je plaatjes te uploaden, zodat je ze kan gebruiken in je layout. Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatjes hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de grote code.

Eerst moet je de link van de banner op de goede plek zetten. Zoek dit stukje op in de code die al in je gallerijbeschrijving staat en vervang de link. Zorg ervoor dat je het id="banner" gedeelte niet weghaalt, anders staat je banner niet op de goede plek in de layout.

Vervolgens moet je de link van de herhaalachtergrond op de goede plek zetten. Dit doe je hier:

Als je dat hebt gedaan en op "gallerij updaten" klikt zul je zien dat je winkel al bijna klaar is. Je moet alleen nog wat kleuren veranderen. Eerst de tekstkleuren. Ik heb in de code allemaal hexkleurcodes gebruikt. Op helisaems petpage staat een kleurenkaart waar je andere kleuren uit kan kiezen.

Dit stukje heb je net ook al gezien, bij het veranderen van de herhaalachtergrond. Maar je kan hier ook de tekstkleur van de hele pagina veranderen en de kleur van de scrollbalk.

Background-color verandert de achtergrondkleur. Dit is alleen zichtbaar bij hele grote beeldschermen. Met scrollbar-base-color kan je de kleur van de scrollbalk veranderen en color verandert de tekstkleur op de hele pagina.

Zoek het stuk hieronder op in je code, hiermee kan je het dropdown menu (datgene dat je ziet als je met je muis over bijvoorbeeld forums in je navigatie gaat) veranderen. Ik heb in de textarea hieronder erbij gezet wat wat doet.

Background-color verandert de achtergrondkleur. Door de kleurcode bij border: 1px solid #000000 te veranderen, kan je de kleur van de rand veranderen. Vervolgens kan je met de volgende regel de de kleur van de links veranderen. De laatste regel verandert de kleur van de links als je er met je muis overheen gaat. Dan staat er ook nog ergens dit. Hiermee kan je alle links in je winkel een andere kleur geven.

En, last but not least, op deze plek kan je de achtergrondkleur van de titel boven het tekstvlak rechts veranderen. Ook kan je het lettertype en de grootte van de tekst hier veranderen.

Nu is je gallerijlayout als het goed is klaar. Gefeliciteerd!




Tutorials ------ Shoplayout

In deze tutorial ga ik je uitleggen hoe je een shoplayout maakt. Hieronder staat een voorbeeldje van hoe het eruit zal komen te zien.

Voor deze layout heb je een tekenprogramma (bv. paint) nodig en natuurlijk een winkel. Klik hier om naar de plaats te gaan waar je je winkel kan bewerken. Als je er nog geen een hebt, maak je er eentje aan.

Plak de code hieronder alvast in het vlakje waar beschrijving winkel bovenstaat.

Als je hebt gekozen voor winkel bijwerken en je kijkt in je winkel dan zie je dat de layout nog standaard is. Je kan nu de banner gaan versieren met je tekenprogramma. Het plaatje hieronder is de banner die linksbovenin je winkel komt.

De banner is verkleind. Voor de normale grootte klik je met je rechtermuisknop op het plaatje en kies je voor eigenschappen. Je kan dan onder andere de link van het plaatje zien. Kopieer die en plak hem in je adresbalk. Dan kan je het plaatje opslaan. Je kan ook het plaatje naar je adresbalk slepen om de normale grootte te bekijken.

Sla hem op op je computer, zodat je hem kan bewerken met je tekenprogramma (bijvoorbeeld paint, gimp of photoshop).

Dit is het bannertje dat bovenin je layout zal verschijnen

Als je dit plaatje hebt versierd kunnen we weer verder. Er moet nog een herhaalachtergrondje worden gemaakt om de layout naar beneden door te laten lopen.

De herhaalachtergrond maken we door een klein strookje van de onderkant van het malletje te nemen, dat te kopieren en in een nieuw bestand te plakken. Dan krijg je zoiets:

Dit is een herhaalachtergrondje

Als de hierboven beschreven methode nou echt niet lukt, kan je ook gewoon het plaatje hierboven even opslaan en met jouw kleuren versieren. Maar zorg er dan wel voor dat het malletje van de bovenkant hierin doorloopt!!

Dan is het nu tijd om je plaatjes te uploaden, zodat je ze kan gebruiken in je layout. Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatjes hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de grote code.

Nu gaan we beginnen met coderen. Dit is niet zo moeilijk aangezien je eigenlijk alleen maar de goede link op de goede plek in de code moet zetten. Ga naar de code die je al in het vlakje van je winkel hebt geplakt.

De link van de banner moet je hier in de code neerzetten:

Vervang hier de de link naar het plaatje. De rest van de code moet je laten staan.

Dan gaan we nu de herhaalachtergrond op de goede plek zetten. Deze moet hier komen:

Vervang ook hier alleen de link van het plaatje. Als het goed is is nu een deel van de achtergrond nog steeds wit. Je deze kleur veranderen door de kleurcode achter "background-color" te vervangen door een andere. Een kleurenkaart kun je hier vinden.

Je kan nu als je wilt de tekstkleuren nog veranderen.

De tekstkleuren kan je in het onderste gedeelte van de code aanpassen.

Verander de kleurcode op de volgende plaats om de tekstkleur van je links te veranderen. De eerste kleurcode is de kleur als je de link ziet, de tweede kleurcode verandert de kleur als je met je muis over een link beweegt.

Op de volgende plaats kan je de kleur van de dikgedrukte (bold) en de schuingedrukte (italic) tekst veranderen.

Op de volgende plek kan je de achtergrondkleur van het drop-down menu van de navigatie veranderen.

Als het goed is is je layout nu klaar! Gefeliciteerd met je shoplayout!




Tutorials ------ Lookup Style 1


In deze tutorial ga je leren om een lookup te maken, die er zo uit zal komen te zien:

Om het voorbeeldje helemaal te bekijken, zoek je de link van het plaatje op (rechter muisknop erop klikken - eigenschappen) en plak je die in je adresbalk.

Om de lookup te maken heb je natuurlijk een code nodig, dit is deze code:

Om de lookup te laten werken, moet je in de hele code elke keer dat het stukje tekst "white-space: normal" voorkomt, dit vervangen door "position: absolute", alleen dan zal je lookup werken!!!

Deze lookup heeft twee plaatjes nodig die je kan versieren, maar de tweede kan je heel makkelijk maken van de eerste. Dit is het malletje van het eerste plaatje, sla het op in je computer en versier het dan in paint of wat dan ook.

Dit hierboven is de verkleinde versie en het randje is voor de duidelijkheid. maar als je hem opslaat krijg je gewoon de normale grootte. Dus niet bang wezen dat je lookup zo klein wordt.

Als je het eerste plaatje versierd hebt ben je klaar om het volgende plaatje te maken. Ik neem aan dat je al wel hebt gezien wat het missende stuk in de layout is.. het onderste stuk van de layout dat helemaal naar beneden doorloopt. Hoe maak je dat? Nou dat is heel simpel. Je kopieert namelijk gewoon het onderste stukje van het bovenste plaatje en plakt dat in een nieuw documentje. Dan krijg je zoiets:

Ook om dit plaatje heb ik een randje gemaakt en heb ik even verkleind, als je hem opslaat of de link van het plaatje in je adresbalk zet zie je de normale grootte en is het randje weg.

Zorg er wel voor dat je alleen een balkje hebt zoals hierboven, als er nog wit omheen zit erboven of eronder dan lukt het niet.

Nu heb je het meeste werk gehad. We gaan nu beginnen met het veranderen van de code voor jouw layout.

Plak de gehele code die bovenaan in deze tutorial staat alvast in je profiel voorkeuren stukje, dat is makkelijk.

Dan is het nu tijd om je plaatjes te uploaden, zodat je ze kan gebruiken in je layout. Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatjes hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de grote code.

We beginnen nu eerst met het veranderen van de plaatjes. In de code zie je ergens dit staan:

Dit is het stukje code waarvan je de link moet vervangen in de link die jij hebt voor plaatje 1. Verander de link in je code en bekijk dan even of het is gelukt.

Let op: VEEL GEMAAKTE FOUT! Veel mensen halen het id="nietweghalen" weg en daardoor komt het plaatje niet op de goede plek te staan. Laat dus het id staan!

Ergens iets meer naar boven in de code zie je dit staan:

Dit is de code van plaatje 2. Verander ook hier de link. Als je nu de lookup gaat bekijken zie je dat het bijna klaar is. we moeten namelijk nog maar twee dingetjes doen. Je kleuren veranderen en de headertjes veranderen. Dit is heel erg weinig werk.

Ik heb in de code als het goed is bij de meeste dingen erbij gezet wat het is, dus de kleuren veranderen moet geen probleem zijn. Een kleurenkaart kun je hier vinden. Daar kun je trouwens ook vinden hoe je de kleur veranderd in de layout.

Bij de headers moet je dit plaatje nemen als malletje:

Verander dit plaatje in hoe jij het wilt. Dit zet je in de code in de plaats van de link hier:

Als het goed is ben je nu klaar
Gefeliciteerd als het is gelukt en veel plezier met je zelfgemaakte lookup!!




Tutorials ------ Lookup Style 2


In deze tutorial zal ik je leren een lookup te maken die er ongeveer zoals het plaatje hieronder uit zal gaan zien. Je kan hem groter bekijken door de link van het plaatje op te zoeken (rechter muisknop erop klikken - eigenschappen) en in je adresbalk te plakken.

De code die je nodig hebt voor deze lookup staat hieronder. Plak deze alvast in het vlakje waar je lookupcode moet komen te staan. klik hier om naar de pagina te gaan waar je je lookup kan veranderen

Om de lookup te laten werken, moet je in de hele code elke keer dat het stukje tekst "white-space: normal" voorkomt, dit vervangen door "position: absolute", alleen dan zal je lookup werken!!!

Oke, dan gaan we nu de plaatjes maken. Je hebt bij deze lookup 1 malletje voor de bovenkant nodig en een herhaalachtergrondje. We beginnen met het versieren van het malletje. Hieronder staat het malletje, sla het op op je computer en open het in je tekenprogramma.

Dit hierboven is de verkleinde versie en het randje is voor de duidelijkheid, als je hem opslaat krijg je gewoon de normale grootte. Je hoeft dus niet bang te zijn dat je lookup te klein gaat worden.

Versier dit plaatje. Maak de onderkant niet te bont, want anders krijg je zometeen problemen met het herhaalachtergrondje. Je kan het onderste stukje het beste een kleur geven.

Je zal al wel hebben gemerkt dat het plaatje dat je net hebt versierd natuurlijk helemaal niet lang genoeg is om de hele lookup te versieren. Het malletje was alleen de bovenkant. Met de herhaalachtergrond die we nu gaan maken bedekken we het stuk waar je stats zullen staan.

De herhaalachtergrond maken we door een klein strookje van de onderkant van het malletje te nemen, dat te kopieren en in een nieuw bestand te plakken. Dan krijg je zoiets:

Als de hierboven beschreven methode nou echt niet lukt, kan je ook gewoon het plaatje hierboven even opslaan en met jouw kleuren versieren. Maar zorg er dan wel voor dat het malletje van de bovenkant hierin doorloopt!!

Ook dit plaatje heb ik even verkleind en ik heb er een randje omheengecodeerd. Als je hem opslaat of de link van het plaatje in je adresbalk zet zie je de normale grootte en is het randje weg.

Zorg er wel voor dat je alleen een balkje hebt zoals hierboven, als er nog wit omheen zit erboven of eronder dan lukt het niet.

Nu heb je het meeste werk gehad. We gaan nu beginnen met het veranderen van de code voor jouw layout.

Dan is het nu tijd om je plaatjes te uploaden, zodat je ze kan gebruiken in je layout. Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatjes hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de grote code.

Oke, we beginnen nu eerst met het veranderen van de plaatjes. In de code zie je ergens dit staan:

Dit is het stukje code waarvan je de link moet vervangen in de link die jij hebt voor het grote malletje. Verander de link in je code en bekijk dan even of het is gelukt.

Let op: VEEL GEMAAKTE FOUT! Veel mensen halen het id="nietweghalen" weg en daardoor komt het plaatje niet op de goede plek te staan. Laat dus het id staan!

Ergens iets meer naar boven in de code zie je dit staan:

Dit is de code van het herhaalachtergrondje. Verander ook hier de link. Als je nu de lookup gaat bekijken zie je dat het bijna klaar is. We moeten namelijk nog twee dingetjes doen. Je kleuren veranderen en de headertjes veranderen.

Bij de headers moet je dit plaatje nemen als malletje:

Verander dit plaatje in hoe jij het wilt. Dit zet je in de code in de plaats van de link hier:

Als het goed is ben je nu klaar. Als je je layout helemaal hip wilt maken, kun je natuurlijk nog de tekstkleur en achtergrondkleur (dat stuk dat nog wit is) veranderen. Ik heb in de code als het goed is bij de meeste dingen erbij gezet wat het is, dus de kleuren veranderen moet geen probleem zijn. Een kleurenkaart kun je hier vinden. Daar kun je trouwens ook vinden hoe je de kleur van de achtergrond veranderd in de layout.

Gefeliciteerd als het is gelukt en veel plezier met je zelfgemaakte lookup!!




Tutorials ------ Lookup Style 3


In deze tutorial zal ik je leren een lookup te maken met verspreide vlakjes. Je lookup zal er heel erg origineel uit komen te zien. Zie hier een klein voorbeeldje.

De code die je nodig hebt voor deze lookup staat hieronder. Plak deze alvast in het vlakje waar je lookupcode moet komen te staan. klik hier om naar de pagina te gaan waar je je lookup kan veranderen

Om de lookup te laten werken, moet je in de hele code elke keer dat het stukje tekst "white-space: normal" voorkomt, dit vervangen door "position: absolute", alleen dan zal je lookup werken!!!

Als je het nu opslaat, kan je op je lookup zien hoe de lookup er ongeveer uit komt te zien qua indeling. Dat is erg handig.

Nu gaan we eerst beginnen met de plaatjes. De lookup is opgebouwd uit twee plaatjes, omdat het plaatje anders te groot werd met laden. Ik ga je nu allebei de plaatjes geven, deze moet je opslaan op je computer en dan versieren. De plaatjes hieronder zijn verkleind, maar als je ze openent in je tekenprogramma zullen ze wel de gewone grootte hebben. Je hoeft dus niet bang te zijn dat je lookup te klein gaat worden.

Als je graag een tekstvlakje wilt, dan kan je dat er zelf bijtekenen. Er is standaard geen tekstvlak, als je niet zo goed bent met coderen, kan je de tekst er met je tekenprogramma opschrijven, je kan het dan alleen later niet meer zo makkelijk veranderen. De titeltjes (user info, neopets, trofeeen etc.) die al op de plaatjes zijn geschreven kan je weghalen, dan kan je je eigen titels erop tekenen.

Zorg ervoor dat de twee plaatjes goed op elkaar aansluiten. Het moet straks namelijk lijken alsof er maar 1 achtergrondplaatje is. Als je de plaatjes hebt versierd, kunnen we beginnen met coderen, maar eerst moet je natuurlijk de plaatjes uploaden.

Dan is het nu tijd om je plaatjes te uploaden, zodat je ze kan gebruiken in je layout. Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatjes hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de grote code.

Als je beide plaatjes hebt upgeload, kunnen we de links op de goede plek in de code gaan zetten. Kijk in je code of je dit stukje ziet staan. In plaats van de link moet je de link van jouw eerste plaatje zetten.

Hetzelfde geld voor de link van het tweede plaatje. Het enige verschil is dat je deze hier plaatst in plaats van de al gegeven url.

Let op: VEEL GEMAAKTE FOUT! Veel mensen halen het id="img1" of id="img2" weg en daardoor komt het plaatje niet op de goede plek te staan. Laat dus het id staan!

De tekstkleuren kan je op deze plek veranderen. Het enige wat je moet doen is de kleurcode achter color telkens veranderen. Een overzicht met kleurcodes kan je hier vinden.

Dan zou het ook nog zo kunnen zijn dat je trofeeen te groot zijn. Dat is natuurlijk erg jammer. De makkelijkste manier om dit op te lossen is door de cijfertjes hier te veranderen in een lager getal (let wel op: De cijfertjes moeten wel allebei even groot zijn anders krijg je uitgerekte trofeeen):

Als je rechts nog een heel groot stuk wit ziet, omdat de achtergrond niet breed genoeg is, kan je de achtergrondkleur hier veranderen. Ook kan je op deze plek de kleur van de scrollbalk veranderen:

Nu is je lookup als het goed is klaar! Als je nog meer wilt veranderen, mag dat natuurlijk. Ik zou je nog wel willen vragen om mijn naam op de lookup te laten staan met het linkje naar deze gids. Als je de credits zoals ze er nu op staan niet mooi vind, mag je ze ook ergens anders neerzetten (of op een van de plaatjes schrijven). Gefeliciteerd als het is gelukt en veel plezier met je zelfgemaakte lookup!!




Tutorials ------ Fullpage Gildelayout


Ook een gildelayout kan jij zelf maken. We maken in deze tutorial deze soort gildelayout:

Om het voorbeeldje helemaal te bekijken, zoek je de link van het plaatje op (rechter muisknop erop klikken - eigenschappen) en plak je die in je adresbalk.

Net als bij de lookuptutorial heb je een code nodig. Dit is de code die je nodig hebt, zet hem alvast in je gildelayoutvoorkeurenvakje:

Om het makkelijk voor je te maken heb ik een malletje gemaakt. Deze moet je gewoon opslaan in je computer en versieren. Dit is het malletje:

Dit is de verkleinde versie en het randje is voor de duidelijkheid. als je hem opslaat krijg je wel de normale grootte.

Ik ga er nu van uit dat je hem hebt versierd en opgeslagen. Maar zoals je ziet ben je nog niet klaar nu, dit is alleen de bovenkant (ook wel banner genoemd in andere gidsen). Je gildelayout moet nog door gaan lopen naar beneden. Dit doen we met een herhaal achtergrondje. De makkelijkste manier om een herhaalachtergrondje te maken is om de onderste twee milimeter (ca 4 pixels) te kopieren en in een nieuw bestandje te gooien en op te slaan. Als je dat niet zo goed snapt kun je ook dit plaatje hieronder nemen en het onderste stukje van plaatje 1 daarin plakken. (dit plaatje is verkleind en wat langer gemaakt voor de duidelijkheid. Ook het randje is weer voor de duidelijkheid):

Dan is het nu tijd om je plaatjes te uploaden, zodat je ze kan gebruiken in je layout. Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatjes hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de grote code.

De link van de banner plaats je hier in de code:

De link van het doorlopende achtergrondje zet je op de volgende plaats in de code:

Oke, dan gaan we nu kleurtjes van je tekst veranderen! Volgens mij hoef ik dat niet verder uit te leggen. In de code staat ongeveer overal boven wat wat is, dus kleurtjes veranderen moet te doen zijn. Een kleurenkaart kun je hier vinden.

Nu ben je als het goed is klaar met je layout. Gefeliciteerd:D




Tutorials ------ Overlay gildelayout


Note: Het gebruik van deze tutorial is op je eigen risico. Omdat de gildenavigatiebalk niet zichtbaar is, zou je geschorst kunnen worden. In deze tutorial ga ik je uitleggen hoe je een overlay gildelayout kan maken. Oftewel we overlappen de navigatie en zetten daarvoor in de plaats join en chat op de layout.

Wat heb je nodig? De gimp, codeerkennis en plaatjes.

Stap 1
Sla het plaatje hieronder op in je computer. Open het daarna in de gimp (of een ander tekenprogramma).

Als het goed is verschijnt het plaatje in zijn echte maat (949 bij 1000) in de gimp. Ik heb hem namelijk even verkleint om hem in mijn gids te laten passen.

Stap 2
Versier het plaatje, teken tekstvlakken op de layout en vergeet niet om Join en Chat op de layout te schrijven. Je moet nu net zoiets hebben als deze layout (verkleint)

Stap 3
Oke, dan gaan we nu coderen! Het voor veel mensen minst leuke deel van de layout.
Zet deze code alvast bij je gilde ontwerp voorkeuren

Zoals je ziet heb je nu de maraqualayout van mij op je gilde staan, dat is natuurlijk niet de bedoeling. In de code zie je dit staan:

Ik ga ervan uit dat je weet hoe je plaatjes upload. Verander de link in jouw link.

Oke, klik maar op veranderingen versturen. Als je nu in je gilde kijkt zie je dat de zijkant van de layout nog blauw is. Dat klopt natuurlijk niet. Je moet nu een klein plaatje maken met jouw achtergrondkleur erop. Net zoiets als dit:

De link van dit plaatje zet je op deze plaats neer:

Nu klopt je achtergrond helemaal, dan gaan we nu het tekstvlak positioneren.

In de code zie je dit staan:

Dat is jouw tekstvlak. We moeten hem alleen nog even op de goede plek plaatsen. Je kan je div verplaatsen door de "left" en "top" te veranderen. Left is gewoon het aantal pixels dat je div van de linkerkant van je beeldscherm is verwijderd en top, logisch, het aantal pixels dat je div van de bovenkant van je beeldscherm is verwijderd. Je kan heel makkelijk erachter komen hoeveel pixels dit is, door het meetlatje te gebruiken in paint of gimp bijvoorbeeld.

Als dat niet lukt kun je altijd nog een beetje gokken. Soms werkt dat ook wel namelijk.

Join & Chat - Manier 1 (GIMP NODIG!)

Dan gaan we nu de JOIN en CHAT laten linken! Dit doen we met image maps. Ga in gimp via het menu naar filters - web - image map zoals je ziet in het plaatje hieronder.

Als je dat hebt gedaan verschijnt er een nieuw venstertje. Hierin kan je met je muis de stukjes selecteren die je wilt laten linken. Welke soort selectie je wilt kun je kiezen met de opties die hieronder op de screenie staan.

Als je zegmaar zo'n selectie hebt gemaakt, dan krijg je dit schermpje. Hier hoef je alleen de link in te voeren. Verder niks.

Als je alle linkstukjes hebt geselecteerd zoals hierboven is beschreven klik je bovenin op beeld en kies je daar broncode.

Je komt dan bij het schermpje hieronder. Uit privicyoverwegingen heb ik een stukje uit de screenie (dat lege witte stuk tussen de tekst weggelaten). Het stukje code onder de screenie vervang je door het blauwgemaakte stukje tekst.

Join & Chat - Manier 2 (ZONDER GIMP!)

Je kan ook de Join en Chat zonder gimp doen. We maken dan geen gebruik van image maps. Deze manier duurt wat langer, maar is handig als je geen gimp hebt.

Op je layout heb je de vlakjes voor Join en Chat al staan. Deze knip je nu uit je layout en sla je beiden apart op.

Zo dus:

Deze zet je dan elk in een aparte div in je layout. De cijfers van de positionering van je div kan je zelf opzoeken door in paint met je muis op het hoekje te gaan staan en dan onderin je beeld het cijfer te bekijken. In gimp kan je ze opmeten met het meetlatje, net als in photoshop.

Oke, nu heb je dus je Join en Chat gecodeert.

Zet in je gilde de links van de normale navigatie van neopets neer, want je moet volgens de regels de normale navigatie van neo in je layout hebben. Met de link kunnen de mensen die in je gilde kijken dan weer verder navigeren op neo :). Voor de luie mensen onder ons, hieronder staat het lijstje dat je in je gilde moet hebben staan kant en klaar.

GEFELICITEERD! JE HEBT JE EERSTE OVERLAY GILDELAYOUT GEMAAKT!!




Tutorials ------ Petpagelayout

Zo, dus jij wilt een petpagelayout leren maken?? Nou dat kan, en het is helemaal niet zo moeilijk ook ^^. Hieronder zie je een voorbeeldje van de petpagelayout die ik met deze tutorial zelf heb gemaakt.

Om het voorbeeldje helemaal te bekijken, zoek je de link van het plaatje op (rechter muisknop erop klikken - eigenschappen) en plak je die in je adresbalk. En dan hieronder nog een voorbeeldje van een petpage gemaakt met deze gids door _shutupanddrive_96 ;). Hier geld hetzelfde om het helemaal te bekijken zoek je de link etc. Ik vind hem supermooi in iedergeval!:)

Deze petpagelayout kun je maken met heel weinig kennis van html, css en photoshop etc. Het enige wat je nodig hebt is paint en een lege petpage.

ga hierheen en klik daar de pet aan waarvan je de petpage wilt gebruiken. Plak de code hieronder in het codevlakje van je petpage ;)

Klik op veranderen zodat je de code tot nu toe in ieder geval niet kwijt raakt. Dan gaan we nu het bovenkantje van je petpage versieren. Sla dit plaatje hieronder op in je computer en versier het in paint.

Dit plaatje is verkleind ;) als je het hebt opgeslagen en opent in paint dan heeft het wel de echte grootte. Ook het randje is er niet als je het opent in paint;)

Oke, je hebt het nu versierd. Sla het even op (het liefste als .png, dat doe je gewoon door als je op opslaan als hebt geklikt plaatje.png te typen in plaats van gewoon plaatje). Dan gaan we nu verder met de herhalende achtergrond. Deze kun je maken door het onderste stukje van het bovenste plaatje te nemen, dat te kopieren en op te slaan of door het plaatje hieronder te nemen en te versieren (zodat het aan het bovenste plaatje vast zou kunnen zitten)

Ook dit plaatje is verkleind en daarbij een beetje uitgerekt xD

Als je deze hebt versierd kunnen we beginnen aan het "coderen" oftewel de links van je plaatjes in de code zetten XD

Hoe krijg je je plaatje op het internet?

Dan is het nu tijd om je plaatjes te uploaden, zodat je ze kan gebruiken in je layout. Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatjes hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de grote code.

Nu heb je dus twee links van je plaatjes. De link van het bovenkantje zet je in de plaats van de link hier:

HAAL NIET HET id="plaatje" WEG. dat is erg belangrijk

Oke, dan gaan we nu het achtergrondje erin zetten. Verander in de code de link hier:

Dan ben je nu eigenlijk klaar, als je wilt kan je nog wel de scrollbalkkleuren veranderen en de kleuren van de tekst en de achtergrond. De achtergrondkleur verander je door hier:

de #ffffff te veranderen in een andere kleurcode. Een kleurenkaart kun je hier vinden. Dit doe je ook bij de kleuren van de tekst en de scrollbalk ;) waar je die in de code kan vinden staat erboven in de code.

Van harte gefeliciteerd, je hebt zojuist ZELF een petpagelayout gemaakt!!




Tutorials ------ Petpagelayout 2

Deze tutorial leert je een petpagelayout te maken! Als je petpagelayout helemaal af is zal hij er ongeveer zo uit zien:

Om deze layout te kunnen maken heb je twee dingen nodig, namelijk een lege petpage en een programma waarmee je plaatjes kan bewerken, zoals bijvoorbeeld Photoshop, Paint Shop Pro, Microsoft Paint of The Gimp.

Pak nu je lege petpage erbij. Je petpages kun je via deze link bewerken. Klik op de pet waarvan je de petpage wilt bewerken. Vervolgens plak je alvast de volgende code in het witte vlak op de pagina die je krijgt als je op je neopet hebt geklikt:

Als je je petpage hebt opgeslagen dan kunnen we beginnen met het bewerken van de achtergrond van de petpage! Sla het volgende plaatje op op je computer.

Dit plaatje is verkleind, zodat hij in mijn petpagelayout past. Maar als je het plaatje hebt opgeslagen en opent in je tekenprogramma dan heeft het wel de echte grootte. Ook het randje is er niet als je het opent in je tekenprogramma. Als het je nu niet lukt om het plaatje in de goede grootte op te slaan, dan kun je proberen het plaatje naar je adresbalk te slepen en het dan op te slaan. Je kan ook met je rechtermuisknop op het plaatje klikken en dan kiezen voor eigenschappen. Daar kan je de url van het plaatje kopiëren en in je adresbalk plakken.

Het is de bedoeling dat je dit plaatje zo bewerkt dat hij aan jouw wensen voldoet. Je kan de achtergrondkleur veranderen en plaatjes toevoegen. Maak hem zo mooi als je kan! Zorg wel dat je de versieringen op de plek waar het tekstvlak is getekend rustig houdt, zodat je tekst strakjes goed leesbaar blijft.

Als je dit hebt gedaan kunnen we het plaatje gaan uploaden! Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatje hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de code.

De directe link kopieer je en plak je vervolgens in plaats van de url die er al staat, in de code die je al op je petpage had gezet:

Haal niet id="helisaemimg" weg, want dan klopt er niks meer van je petpage:) Dit gaat heel vaak fout, dus let erop dat je dit laat staan! Hetzelfde geld voor style="position:absolute".

Als je dat hebt gedaan en je petpage opslaat zul je zien dat je petpage al voor een groot gedeelte klaar is! Dan moeten we nu nog twee dingen doen, namelijk ervoor zorgen dat je achtergrond doorloopt en niet op een bepaald punt aan de rechterkant van je beeldscherm ophoudt en de kleurtjes van de tekst aanpassen.

We gaan nu eerst er voor zorgen dat je achtergrond goed doorloopt.

Hiervoor kopiëren we een reepje van de meest rechterkant van ons plaatje. Zorg ervoor dat dit reepje zo dun mogelijk is. Als je Photoshop gebruikt kan je hiervoor heel gemakkelijk de Single Column Marquee Tool voor gebruiken. Deze kun je vinden in de balk met tools als je met je rechtermuisknop op de Rectangular Marquee Tool klikt. Dit is het knopje met het vierkantje met de zwarte gestippelde lijntjes dat linksbovenin je toolsbalk staat. Hiermee selecteer je in een klik je een heel dun verticaal streepje van de achtergrond.

Zorg ervoor dat het stukje dat je selecteert zowel links als rechts dezelfde kleuren heeft, anders krijg je een gek herhalend achtergrondje omdat er kleurverschillen zitten bij de zijkanten van het plaatje. Dit reepje sla je op als een apart plaatje en ga je daarna uploaden op dezelfde manier als je net hebt gedaan bij het grote plaatje.

Vervolgens gaan we de directe link van dit plaatje ook op de goede plek in de code plaatsen. Deze link moet in plaats van de link die er al staat op de volgende plek in de code komen te staan:

Als de achtergrond van je petpage bestaat uit 1 kleur dan kan je er ook voor kiezen om alleen de kleurcode aan te passen en de url van het plaatje helemaal weg te laten. Maar dan moet je wel een tekenprogramma hebben waarmee je de kleurcode heel specifiek kan bepalen, omdat er anders kleurverschillen ontstaan tussen je achtergrond en het plaatje. Ik raad je daarom aan om gewoon een achtergrondplaatje te maken, zodat je zeker weet dat er geen kleurverschillen verschijnen.

Dan kunnen we nu de kleuren van de tekst aanpassen! Er zijn drie delen tekst die je kan aanpassen: De titel helemaal bovenaan de petpage, de titeltjes die iets kleiner zijn dan deze titel en de gewone tekst op de petpage.

De grootste titel kun je hier aanpassen:

De iets kleinere titeltjes kan je hier aanpassen:

En de gewone tekst kan je hier aanpassen:

Het aanpassen van de tekstjes gaan bij alledrie de delen tekst op ongeveer dezelfde manier. Je kan het lettertype aanpassen door font-family: verdana aan te passen. De tekstkleur kun je aanpassen door de kleurcode achter color aan te passen. Andere kleurcodes kun je vinden in de tabel onderin deze pagina. De kleurentabel kun je hier vinden. De grootte van de tekst kun je ook aanpassen. Dit doe je door het getal achter font- size te veranderen. Als je het getal groter maakt, wordt je tekst groter en andersom wordt je tekst kleiner.

Dan heb je bij de twee titeltjes nog een randje onder de titel. Ook deze kan je aanpassen. Je kan dit doen door border-bottom: 3px dashed #D2D2EF; aan te passen. Dashed betekent dat het een onderbroken lijntje is. Als je dit verandert in solid wordt het een vaste lijn. Je kan ook hier de kleur aanpassen door een andere kleurcode te kiezen in de kleurentabel. De dikte van het lijntje kan je aanpassen door het getal 3px aan te passen. Als je het getal hier groter maakt wordt je lijntje dikker. Als je het getal kleiner maakt wordt je lijntje dunner. Je kan er ook voor kiezen om helemaal geen lijntje onder je titel te zetten, dan wis je het hele regeltje. Als je in plaats van een lijntje onder je tekst een lijntje erboven wilt, dan verander je border-bottom in border-top.

Je kan ook de tekstkleur van de neopets credits aanpassen. Dit doe je hier:

Ook hier moet je dan de kleurcode achter color aanpassen.

Als je dit allemaal hebt gedaan is je petpagelayout als het goed is klaar! Gefeliciteerd met je layout en heel veel plezier ermee :)




Tutorials ------ Petpagelayout 3

Deze tutorial leert je een petpagelayout te maken die er zo uit zal komen te zien:

Voor het maken van deze petpagelayout heb je het volgende nodig: Een lege petpage en een tekenprogramma om je petpagelayout in te maken! Hierbij kan je denken aan Photoshop, Paint Shop Pro of Gimp, maar paint werkt natuurlijk ook prima.

Ga hierheen en klik daar de pet aan waarvan je de petpage wilt gebruiken. Plak de code hieronder in het codevlakje van je petpage.

Klik op veranderen zodat je de code tot nu toe in ieder geval niet kwijt raakt. Sla het volgende plaatje hieronder op in je computer.

Dit plaatje is verkleind, zodat hij in mijn petpagelayout past. Maar als je het plaatje hebt opgeslagen en opent in je tekenprogramma dan heeft het wel de echte grootte. Ook het randje is er niet als je het opent in je tekenprogramma. Als het je nu niet lukt om het plaatje in de goede grootte op te slaan, dan kun je proberen het plaatje naar je adresbalk te slepen en het dan op te slaan. Je kan ook met je rechtermuisknop op het plaatje klikken en dan kiezen voor eigenschappen. Daar kan je de url van het plaatje kopiëren en in je adresbalk plakken.

Het is de bedoeling dat je dit plaatje zo bewerkt dat hij aan jouw wensen voldoet. Je kan de achtergrondkleur veranderen en plaatjes toevoegen. Maak hem zo mooi als je kan! Zorg wel dat je de versieringen op de plek waar het tekstvlak is getekend rustig houdt, zodat je tekst strakjes goed leesbaar blijft.

Nu je de banner hebt bewerkt, kunnen we de achtergrond gaan maken. Deze layout gebruikt een achtergrond die zich verticaal herhaalt. Omdat hij zich herhaalt moet je zorgen dat de bovenkant en de onderkant van je herhaalachtergrond op elkaar aansluiten.

Je kan de herhaalachtergrond maken door het onderste stukje van het bovenste plaatje te nemen, dat te kopieren en op te slaan of door het plaatje hieronder te nemen en te versieren (zodat het aan het bovenste plaatje vast zou kunnen zitten).

Dit is mijn herhaalachtergrond:

Als je dit hebt gedaan kunnen we het plaatje gaan uploaden! Gebruik hiervoor een uploadsite zoals bijvoorbeeld Photobucket (zoek hiernaar met een bekende zoekmachine). Je kan op deze site een account aanmaken, waarmee je heel makkelijk plaatjes kan beheren. Als je je plaatje hebt geupload zie je je plaatjes als het goed is in het klein onder het uploadschermpje staan, als je op een van de plaatjes klikt, kun je onder andere de direct link van het plaatje zien. Die link moet je zometeen gebruiken in de code.

Als je de plaatjes hebt geupload kunnen we de linkjes op de juiste plekken in de code gaan zetten.

De directe link van de banner (het plaatje dat je het eerste hebt bewerkt) komt op de volgende plek in de code te staan:

Laat id="banner" in de code staan! Je moet alleen de link vervangen. Als je dit niet doet dan klopt er niks meer van je petpage:) Dit gaat heel vaak fout, dus let erop dat je dit laat staan! Hetzelfde geld voor style="position:absolute".

Oke, dan gaan we nu het herhalende achtergrondje in de code verwerken. Verander in de code de link hier:

Heb je aan de rechterkant van de layout een groot wit stuk? Maak dan je herhalende achtergrond breder en vul het nieuwe stuk met jouw achtergrondkleur!

Nu de plaatjes in de code zijn verwerkt ben je voor het grootste gedeelte klaar met je layout. Je kan de kleuren van je tekst nog veranderen. Dit kun je hier doen:

Je verandert de tekstkleur door de kleurcode achter "color" te veranderen. Je kan een overzicht met kleurcodes vinden op de kleurenkaart die je hier kan vinden. Je kan je tekst groter maken door het getal 8pt groter te maken.

Je kan ook de titeltjes veranderen. Dit doe je op de volgende plaats in de code:

Je verandert de tekstkleur in de titeltjes door de kleurcode achter "color" te veranderen. Je kan de achtergrondkleur veranderen door de kleurcode achter "background" te veranderen. De tekstgrootte verander je door het getal achter "font-size" te veranderen. Je kan ook de zwarte lijn onder de titeltjes veranderen. Dit doe je met "border-bottom". Als je het getal "2px" groter maakt, wordt je lijn dikker. "Solid" zorgt ervoor dat het een aaneengesloten lijn is. Je kan "Solid" veranderen in "Dashed", dan krijg je een stippellijn. Je kan de kleur van het lijnje veranderen door "#000000" in een andere kleurcode te veranderen.

Van harte gefeliciteerd, je hebt zojuist ZELF een petpagelayout gemaakt!!




Tutorials ------ Nieuwsberichtjes


Je ziet wel eens op graphicssites dat ze van die leuke tabelletjes maken om hun nieuwe dingen in te showen. Dit is niet echt een tutorial voor hoe je ze kan maken ;) maar een template, als je ze zelf wil leren maken kun je onderin de tutorial voor tables volgen ;). Hieronder vind je de code voor een standaard nieuwsbericht.

Nieuws
Gepost door: Inge
Datum: 1 november 2007
blablablablablablabla B)
blablablablablablabla B)
blablablablablablabla B)
blablablablablablabla B)
blablablablablablabla B)
blablablablablablabla B)
blablablablablablabla B)
blablablablablablabla B)




Tutorials ------ Blogs

Een winkelblog maken is eigenlijk helemaal niet moeilijk
iedereen zou dat moeten kunnen. Ik zal voordoen hoe je een blog maakt.

Maak een nieuw plaatje aan. Dit is die van mij:

Nu gaan we het vlak gewoon een beetje versieren (niet te bont op het plekje waar je je tekstvlak wilt, want anders is het straks niet zo mooi)

Oke, nu gaan we ons tekstvlakje erop tekenen. Dit kan je transparant maken, maar het makkelijkst is om het gewoon ondoorzichtig te houden.

Nu is het tekenwerk klaar. We moeten alleen nog coderen. Eerst load je je plaatje up. Doe dit met tinypic (punt com) dat is de allermakkelijkste site namelijk. Blader naar je plaatje totdat je de goede hebt gevonden. Bij "tags" hoef je niks in te vullen, klik nu op "Upload now" daarna moet je even wachten tot de nieuwe pagina is geladen. Als het is geladen klik je op de link achter Direct Link for Layouts.

Note: De blogcoder van neoextreme doet het soms niet, vandaar dat er hier twee keer een uitleg staat met een blogcoder. Je kan ook mijn code gebruiken als je liever geen blogcoder gebruikt, de uitleg daarvoor komt onder de stukjes over de blogcoders.

Blogcoder 1

Typ bij google in neotacular en ga naar de bovenste site. Op die site klik je links in de navigatiebalk onder het kopje Generators op x-blog. Daar kan je een blog maken. Het is helemaal niet ingewikkeld dus ik ga ervan uit dat jullie weten hoe het werkt. Op de eerste pagina plaats je de link van je plaatje in het balkje en dan klik je op ok. Op de pagina die je dan krijgt kan je met je muis een vierkantje tekenen op de plek waar je tekstvlak moet komen te staan. Als je al je tekstvlakken hebt getekend klik je op Give me the code! en voila je blog is klaar.

Blogcoder 2

Het coderen is niet echt moeilijk bij een blog, omdat je een blogcoder kan gebruiken. Typ bij google in blogcoder neoextreme en de eerste link waar je naartoe word verwezen is de blogcoder van neoextreme. Volg de stappen die daar staan en maak de code voor je eigen blog.

Hoe gebruik je de blogcoder?

Als je hem hebt gevonden klik je meteen op continue, de tekst op de eerste pagina is totaal niet belangrijk.

STAP 1 Je bent nu op de pagina waar je je plaatje moet invoeren. Kies: I want to use an image en zet bij Content/Image Width (px) de breedte van je plaatje. Klik daarna op Continue
STAP 2 Nu moet je de tekstvlakjes op de goede plek zetten. Klik op define layers en je komt bij een nieuw venstertje. Hier kun je met je muis op je plaatje de stukjes waar je een tekstvlakje wilt arceren. Als je dat hebt gedaan klik je op i'm finished en klikt op continue
STAP 3 Klik meteen op continue
STAP 4 Kopieer je code want het is klaar

Als je je blog hebt gecodeert dan ben je nog niet helemaal klaar, de code van de blogcoder werkt namelijk niet helemaal goed in je winkel op neopets. We moeten dus nog wat veranderen. Als je namelijk je blog nu op neopets zet dan is hij twee bij twee milimeter (en dat willen we natuurlijk niet XD). We moeten het plaatje gaan hercoderen met de grootte ervan erbij, zodat hij zijn normale grootte houdt.

Als je je plaatje hebt geupload kun je door er met je rechtermuisknop erop te klikken bij eigenschappen komen. Hier kan je de grootte van je plaatje bekijken. Die van mij is 400px breed en 250px hoog. Dit gaan we gebruiken om de code te verbeteren. De breedte wordt in codetaal "width" genoemd, de hoogte "height".

Helemaal onderaan de code van je blog staat dit:

Dit is de plek waar je de verandering moet maken. Zo moet het eruit komen te zien als je klaar bent met veranderen:

Zoals je ziet is de slash verdwenen en zijn daar width="getal" en height="getal" voor bijgekomen.

Als het goed is moet je blog nu klaar zijn en gelukt, net als die van mij.

Gefeliciteerd, als je alles goed hebt gedaan heb jij nu ook zo'n mooie blog gemaakt!
Gebruik mijn code

Een blog coderen lijkt moeilijker dan het eigenlijk is. Je hebt er maar een kleine code voor nodig. Kopieer de onderstaande code en plak hem op je petpage.

Zoals je ziet heb ik in deze code 2 divs gemaakt, de eerste is voor het geheel, met de achtergrond. De tweede is voor het tekstvlak. Door de tweede te kopieren en nog een keer in de code te plakken kan je nog een tekstvlak maken. Daar kom ik straks nog even op terug. Eerst zal ik je uitleggen hoe je ervoor kan zorgen dat deze code klopt met jouw blog.

Eerst moet je kijken hoe breed en hoe hoog jouw achtergrondplaatje is. Dit kan je zien door nadat je je plaatje hebt geupload het in een nieuw internetvenster te openen en dan met je rechtermuisknop op het plaatje te klikken. Kies voor eigenschappen. Daar zie je de hoogte (height) en de breedte (width) staan. Die cijfertjes plak je op de plek van de 250 en de 400 in de code bij de div #blog1. Vervolgens plak je de directe link van jouw plaatje in plaats van de link van mijn plaatje. Let hierbij op dat je niet perongeluk de haakjes eromheen weghaalt, want dan krijg je een foutmelding bij het opslaan.

Dus:

Klik even op veranderingen bekijken bij je petpage, zodat je kan zien of je het goed hebt gedaan. Als het goed is heb je nu je eigen achtergrond. Je moet nu alleen het tekstvlak nog op de goede plek zetten. Dit doen we bij de div #blog2. Je kan de positie van je achtergrond precies uitrekenen (zie deze tutorial) of je kan een beetje gokken.

Width en height heb je al vaker gezien. Ik neem aan dat je weet hoe je die berekent of je kan zelf gokken. Dan margin-left en margin-top. Deze zijn misschien nieuw voor je. Padding-top is (in dit geval) de ruimte tussen de bovenkant van de blog en de bovenkant van je tekstvlak. Padding-left is (in dit geval) de ruimte tussen de linkerkant van de blog en de linkerkant van je tekstvlak. Dit betekent dus dat je precies uit kan rekenen waar je tekstvlak komt.

Als je dat hebt gedaan is je blog klaar!

Gefeliciteerd, als je alles goed hebt gedaan heb jij nu ook zo'n mooie blog gemaakt!




Tutorials ------ Petlookup

Altijd al willen leren hoe je een petlookup maakt? Hier kan je het leren. Je hebt een tekenprogramma en kladblok nodig.

Zo zal je petlookup er ongeveer uit komen te zien:

Open nu alvast kladblok en plak daar de onderstaande code in. Kladblok is echt aan te raden bij deze soort layout, aangezien het vlakje op neopets waar je je code in moet plakken onhandig klein is. Plak het ook alvast bij je neopet in het petbeschrijvingsvlakje dat je hier kan vinden en open dan de petlookup van je pet zodat je kan zien waar ik het over heb.

Deze petlookup bestaat uit een header, footer, binnenste achtergrond, buitenste achtergrond en een tekstvlak met navigatie

We gaan eerst de header doen. Hieronder zie je een malletje voor de header. Sla deze op op je computer en versier hem.

Dit is onze header

Als je dat hebt gedaan loaden we de header meteen up. Dit kan je doen via tinypic (punt com). Blader naar je plaatje totdat je de goede hebt gevonden. Bij "tags" hoef je niks in te vullen, klik nu op "Upload now" daarna moet je even wachten tot de nieuwe pagina is geladen. Als het is geladen klik je op de link achter Direct Link for Layouts.

Zet de link die je krijgt in de plaats van URL van de voorbeeldheader hier neer:

Dan doen we nu de footer. Dit werkt eigenlijk hetzelfde als de header.

Dit is onze footer

Load de footer up en vervang dan de URL van de voorbeeldfooter hier:

Daarna gaan we de buitenste neopets achtergrond veranderen. Dit is de "body" achtergrond. Maak een plaatje met een leuk kleurtje en load ook dat up. In mijn code is dit stuk wit gestreept. Zet het hier in de code:

Naast de bodyachtergrond is er nog een achtergrond op neopets. Namelijk de mainachtergrond (ook wel binnenste achtergrond op neopets genoemd). Dit is de achtergrond die in het midden komt. In mijn code is dit stuk lichtblauw. Geef het de kleur die het beste bij jouw layout past. Hier kan je kleurcodes vinden, als je ze niet zelf kan opzoeken in je tekenprogramma. De kleur verander je hier:

Oke, dan hebben we nu de binnenste achtergrond, buitenste achtergrond, header en footer gehad. Dan gaan we nu beginnen de kleuren van de stats te veranderen. Dit is een beetje verwarrend omdat de stukjes code best wel op elkaar lijken, maar ik ga het zo goed mogelijk proberen uit te leggen. Houd de kleurenkaart er even bij. Dat is handig.

Ik begin meestal met de achtergrond achter de stats, omdat je dan goed kan zien of je tekstkleur leesbaar zal zijn. In mijn geval is de achtergrondkleur wit. Onthoud dat je als je een lichte achtergrond neemt, donkere letters moet nemen en andersom. Hier kan je de achtergrond veranderen:

Dan doen we nu meteen even de tekstkleuren. Die kan je hier veranderen (verander allebei de kleurcodes die je ziet staan, je kan twee verschillende kleuren nemen, maar ook dezelfde kleuren):

Dan doen we nu de kleuren van de headers. Die boven de stats en boven je tekststukjes. Eerst die van de stats. Hiervan kan je de achtergrond en de tekstkleur veranderen:

Dan de titeltjes boven je tekst. Die kan je hier veranderen:

Dan zijn we nu bijna klaar. De navigatie, die kan je ook nog van kleur veranderen. Als je layout blauw is kan je het misschien wel zo laten, maar bij een oranje layout zal het niet zo mooi staan zo. Dit stukje code is best verwarrend als je het voor de eerste keer ziet staan. Daarom zal ik precies vertellen wat je moet veranderen. Kijk even of je het onderstaande ziet staan in je code.

Het bovenste rijtje is voor als je de link zo ziet staan, of hem al een keer hebt bezocht. Het tweede rijtje is voor als je over de link heen gaat met je muis. In het bovenste rijtje hoef je eigenlijk alleen de background en color te veranderen. Bij het tweede rijtje verander je de bovenste twee dingen. Laat alsjeblieft display: block staan, anders krijg je rare dingen.

Als je dat hebt veranderd, ben je eigenlijk klaar met je petlookup. Je kan de code die je in kladblok hebt staan nu in het petbeschrijvingsvlakje plakken en kijken of het is gelukt. Als je kleuren nog niet helemaal bij elkaar passen, maak je nog een paar veranderingetjes. Je kan ook nog de rand om het hele middelstuk veranderen. Waar dat moet kan je makkelijk in de code vinden. Gefeliciteerd met je petlookup.

Tip: Door alle uitleg in de code heb je best weinig ruimte voor tekst. Als je wat meer ruimte wilt, haal je de titels boven de codestukjes weg. Vergeet niet mijn credits te laten staan.




Tutorials ------ Counters

Links in mijn navigatiebalk heb ik een counter staan. Een counter is een plaatje waarop je kan zien hoeveel bezoekers je al hebt gehad op je pagina. Je kan een counter zetten op je lookup, petpage, winkel... eigenlijk overal waar je maar wilt.

Het maken van een counter is eigenlijk helemaal niet moeilijk. Het enige wat je ervoor nodig hebt is een account op een site waar je counters kan maken en een tekenprogramma waarin je een achtergrondplaatje voor je counter kan maken.

Eerst moet je dus een account aanmaken op een site waar je counters kan maken. Een hele goede site is boingdragon. Ik kan geen directe link plaatsen, dus zal je zelf op zoek moeten gaan naar de site. Je kan hem vinden door bij google te zoeken naar "boingdragon" als het goed is moet je dan de eerste site die google vind gebruiken. De site heeft een bruine layout en links is er een navigatie die eruit ziet als hieronder. Klik op Counter Signup (het knopje dat groen is omdat ik eroverheen ging met mijn muis).

Vervolgens kom je op een pagina waar je een gebruikersnaam in kan voeren en een wachtwoord. Vul alles in en klik dan op Submit Request. Kies voor de veiligheid een wachtwoord dat je nog nooit eerder hebt gebruikt en kijk of je mailadres klopt, je moet je account namelijk via een link in een mail die je wordt toegestuurd activeren. Als je je account hebt geactiveerd kan je voor de eerste keer inloggen. Ga naar de hoofdpagina van de site, en klik dan in de navigatiebalk in plaats van op Counter Signup op Counter Login. Log jezelf in. Als je dat hebt gedaan kom je op een nieuwe pagina waarop je bovenin dit ziet

Bovenin zie je een blauwe navigatiebalk. Klik daarin op "add a new counter". Als de nieuwe pagina is geladen moet je klikken op het plaatje waarop een scorchio te zien is. Dan kan je namelijk een counter maken met je eigen achtergrond.

Nou heb je natuurlijk als het goed is nog geen achtergrond. Je kan een plaatje van neopets gebruiken, maar het is natuurlijk net zo leuk om er zelf een te maken! Zoals ik net al zei heb je daarvoor een tekenprogramma nodig. Ga naar paint, gimp, photoshop of een ander tekenprogramma dat je hebt en maak een mooi plaatje. Als je wilt kan je een vierkantje openhouden om de cijfers van de counter te laten verschijnen. Ik raad je aan om het plaatje niet te groot te maken, want een kleine counter is veel handiger in het gebruik dan een grote. 130 bij 60 pixels is een mooie grootte.

Dat is een voorbeeld van een counterachtergrond. Je mag deze gebruiken voor je counter of je zelfgemaakte counterachtergrond gebruiken. Voor je counter moet je eerst zelf je plaatje uploaden. Dit kan je doen bij tinypic (punt com). Blader naar je plaatje totdat je de goede hebt gevonden. Bij "tags" hoef je niks in te vullen, klik nu op "Upload now" daarna moet je even wachten tot de nieuwe pagina is geladen. Als het is geladen klik je op de link achter Direct Link for Layouts. Deze plak je in het balkje waar staat dat je de url van de background van je counter moet geven.

Als je dat hebt gedaan klik je op update url. Als het goed is komt dan jouw achtergrondplaatje bij de preview te staan. Ook kan je alvast je counter een naam geven en aangeven op welk nummer je counter moet beginnen met tellen. Nul is natuurlijk het meest eerlijke getal; Je wilt dat je counter klopt. Als je je counter in het begin al op duizend zet, dan is het beeld dat je counter geeft niet kloppend.

Zo ziet mijn counter er nu uit. Zoals je ziet staat de tekst in het midden. Eigenlijk wou ik mijn tekst helemaal links in het hoekje hebben. Gelukkig kan je je tekst heel makkelijk positioneren. Je kan dit doen bij "Center digits at X= cijfer, Y= cijfer". Als je wiskunde hebt gehad dan weet je dat X de horizontale afstand is, en Y de verticale afstand. Dus is het nummer dat je bij X neerzet, de afstand vanaf de linkerkant, en bij Y de afstand vanaf de bovenkant van het plaatje. Als je een beetje gaat spelen met de cijfertjes lukt het je wel om de tekst op de goede plek te krijgen (zie voorbeeld hieronder).

Nu de kleur van de tekst! Geel is niet zo mooi bij paars. Ik wil mijn tekst wit hebben. In het plaatje zie je een kleurenpalletje met daaronder border en font met een rondje ervoor. Border is engels voor rand. Dit is dus het zwarte randje om de cijfers heen. Zwart vind ik wel mooi bij mijn counter passen dus ga ik die niet veranderen. Als jij de rand wel van kleur wilt veranderen klik je nu gewoon op een kleur in het kleurenpallet. Als het goed is word het zwart dan een andere kleur. Om de binnenkant van de letters (het geel dus) ook van kleur te veranderen moet je eerst op het rondje voor font klikken. Als je daarna op een kleur in het kleurenpallet klikt, verandert het geel in een andere kleur.

Nu is de counter zo goed als klaar. Wat je nog kan doen is het aantal digits (cijfers) veranderen. Een is natuurlijk wel erg weinig. Je hoeft je site zelf maar tien keer te bezoeken en je counter is klaar met tellen. Ook kan je aangeven of je je cijfers naast elkaar of onder elkaar wilt plaatsen. Ook kan je kiezen of je grote, kleine of spookachtige letters wilt. Als je je counter hebt zoals jij hem hebben wilt, klik je op "create counter". Je word dan automatisch teruggebracht naar de overzichtpagina van alle counters die je hebt gemaakt. Je kan namelijk meerdere counters hebben op 1 account, handig!

Zo ziet je counter eruit op de overzichtspagina van je counters. Je kan je counter nog veranderen als je niet helemaal tevreden bent met het resultaat, door op edit options te klikken. Ook kan je je aantal hits aanpassen door op edit count te klikken. Maar wat natuurlijk het belangrijkste is, je moet de code van de counter krijgen! Dat kan je doen bij "install". Je word dan naar een nieuwe pagina gebracht, waar twee codes staan. Ik raad je aan om altijd de tweede te gebruiken, omdat deze ook op lookups werkt (dat doet de andere code niet). Kopieer de code en zet hem in je al bestaande code van je lookup, petpage, etc. zodat je hem kan gaan gebruiken. Om weer op de overzichtspagina van je counters te komen, klik je bovenin in de blauwe navigatiebalk op Counter listing.

Misschien ook wel leuk om te weten: Je kan met je counter ook bekijken wat de stats zijn van je pagina. Op welke tijdstippen heb je de meeste hits?? Wie komen er op je pagina?? Uit welk land komen je bezoekers?? Ook kan je zien op welke pagina de hits zijn gevonden. Dus als iemand stiekem jouw counter heeft gekopieerd en op zijn pagina gezet, kan jij dat zien! Ook kan je zien of mensen je site hebben vertaalt met een vertaalmachine. Dit kan je allemaal zien bij 7-day stats en Visitor Tracking. Die knopjes kan je vinden in je blauwe navigatiebalk.

Gefeliciteerd met je counter!




GIMP Tutorials ------ Gimp Downloaden

Gimp is een programma waarmee je layouts kan maken. Hoe je het downloaden moet kun je het beste op de site hieronder lezen. De link op het plaatje op die petpage typ je over in je adresbalk en dan kan je als het goed is bij de navigatie op de site ergens een tutorial vinden om gimp te downloaden.




GIMP Tutorials ------ Beginnen met gimp


Voordat je begint met gimp, moet je een aantal dingen weten. Bij gimp verschijnt er voor alles wat je doet een nieuw schermpje. Als je dus gaat gimpen krijg je een hoop vensters openstaan. Dat is op zich niet erg (je raakt eraan gewend) maar erg handig is het niet.

Verder het opslaan, bij gimp moet je altijd zelf de extensie achter je bestand typen. Dus als je bijvoorbeeld een GIF-afbeelding wilt maken en die wil je plaatje noemen, dan typ je bij naam: plaatje.gif

Wat heel handig is bij GIMP, is dat gimp een eigen bestandsformaat heeft, namelijk .XCF dit kan je bijvoorbeeld gebruiken als je halverwege je plaatje wilt opslaan. De kwaliteit gaat dan niet achteruit en je lagen blijven behouden.

Verder wil ik je waarschuwen dat je ALTIJD om de zoveel tijd je plaatje moet opslaan, ookal is hij half klaar. Het is heel deprimerend als je Gimp vastloopt en je overnieuw kan beginnen met kliederen ;).

Hier zie je het menu van gimp, ik heb op het plaatje wat letters en cijfers gezet, zodat ik makkelijk kan uitleggen wat elke tool doet.

A Hiermee kan je rechthoekige selecties maken.
B Hiermee kan je ronde selecties maken.
C De lasso tool. Hiermee kan je selecties maken, in een vorm die je zelf tekent
D Met het toverstokje kan je in een plaatje stukjes van dezelfde kleur selecteren. Ze moeten wel allemaal aaneengesloten zijn.
E Hiermee kan je een kleur selecteren. Handig bij glitters.
F Hiermee kan je selecties maken die door stipjes worden verbonden. Persoonlijk vind ik deze tool niet zo handig.
G Hiermee kan je paden maken. Heel erg handig, als je plaatjes uit wilt knippen.
H Hiermee kan je uit de afbeelding een kleur kiezen om als voorgrondkleur gaat gebruiken.
I Vergroot je afbeelding.
J De meetlat! Hiermee kan je het aantal pixels berekenen, heel erg handig als je een layout aan het coderen bent.
K Hiermee kan je lagen en selecties verplaatsen.
L Hiermee kan je een afbeelding snijden of schalen.
M Hiermee kan je je plaatje (of laag) draaien.
N Hiermee kan je je laag (of selectie) vergroten of verkleinen.
O Hiermee kan je een laag of selectie schuiner maken.
P Hiermee kan je het perspectief van je laag of selectie veranderen.
Q Spiegelen.
R Plaats tekstjes.
S Vul je laag of selectie met een kleur of patroon.
T Hiermee kan je een kleurverloop maken.
U Het potlood, hiermee kan je scherpe lijnen trekken.
V Penseel, ook wel brush genoemd. Hiermee kan je schilderen. Deze word meer gebruikt dan het potlood omdat je er vervagingen in kan zien.
W Het gom.
X Verfspuit, gebruik ik niet zo vaak.
Y De vulpen, hiermee kan je met inkt tekenen. Het is niet echt betrouwbaar als je zuivere lijnen wilt tekenen.
Z De kloontool. Naam zegt het al, je kan hiermee stukjes uit je plaatje kopieren. Om een plek in je plaatje te selecteren klik je op het plekje met CTRL ingedrukt. Daarna kan je op een ander plekje kleuren en verschijnt er daar wat er op het andere plekje ook is.
1 Hiermee kan je vervagen of verscherpen.
2 Hiermee kan je vieze vegen maken in je afbeelding.
3 Hiermee kan je lijnen tegenhouden of doordrukken.
4 Voorgrondkleur.
5 Achtergrondkleur.
6 Penselen en potloden. Klik erop en je ziet alle penselen die je kan gebruiken.
7 Dit zijn je patroontjes.
8 Je actieve verloop. Deze kan je veranderen door erop te klikken en een andere uit te kiezen. Je kan ook zelf verlopen maken.

De balk met de pijl Hier kan je vensters in slepen. Bijvoorbeeld je lagenmenu. Open je lagenmenu (CTRL + L) en klik in het bovenste grijze gedeelte net onder de blauwe titelbalk van het venster. Als je nou met je muis beweegt krijg je een klein pijltje met een vierkantje met lagen erin. Als je dat naar die streep sleept, zal je lagenmenu in dat stukje komen te staan en hoef je niet de hele tijd je lagenmenu apart te openen.




GIMP Tutorials ------ Blenden

In veel layouts word dit gedaan, blenden. Wat is blenden? Eigenlijk is blenden het samenvoegen van plaatjes op zo een manier dat er 1 plaatje ontstaat_ Dit kun je ook doen in Gimp. Hoe je dit doet ga ik je nu vertellen.

Zoek een paar plaatjes die qua kleur en thema bij elkaar passen. Voor mijn plaatjes heb ik gekozen voor het thema "fyora". De plaatjes die ik hiervoor heb gebruikt kun je vinden bij de neogroeten.

Vervolgens maak je een nieuw bestand aan (menu - bestand - nieuw). Je kan zelf kiezen hoe groot je je plaatje wilt maken. Mijn plaatje is 400 bij 300 pixels.

Nu maken we twee nieuwe lagen aan voor de te blenden plaatjes. Druk op je toetsenbord CTRL en L tegelijk in om bij het Lagenmenu te komen. In elk van de twee lagen plak je 1 van de twee plaatjes die we hadden uitgezocht.

Om een nieuwe laag te maken klik als in het plaatje hierboven te zien is het lege papiertje links aan. Je komt nu in een schermpje waarin je de laag een nieuwe naam kan geven. Verander hier alleen de naam (hoeft niet perse, het is wel duidelijker als je het wel doet) en klik op OK.

Als je het goed gedaan hebt ziet het lagenmenu er nu zo uit:

Nu gaan we beginnen met blenden. De makkelijkste manier om dit te doen is door met het gum in het plaatje uit de bovenste laag een deel te wissen, waardoor je het onderste plaatje ook ziet. Je gebruikt hiervoor een penseel met zachte randen. Een voorbeeld van een penseel die je hiervoor kan gebruiken zie je in het plaatje hieronder. Je kan de penseel groter maken door het getal achter "schalen" groter te maken. Een grotere penseel geeft een mooier effect. Ik raad aan om een penseel met een doorsnede van ongeveer_ centimeter te gebruiken.

Als je de juiste penseel voor je gum hebt gekozen ga je dus een stuk uit je bovenste laag wissen, zodat de twee plaatjes in elkaar gaan overlopen. Ik wis uit laag 2 het hele stuk rechts van de duistere fee, zodat het plaatje met de duistere fee netjes overloopt in het plaatje met fyora.

Als je het stuk uit laag 2 wist, ziet dit er als volgt uit. Je kan in dit plaatje ook goed zien hoe groot mijn penseel (de grote cirkel) is.

Dit kan je vervolgens met meerdere lagen met andere plaatjes herhalen. Hiervoor volg je gewoon de hiervoor genoemde stappen.

Om het resultaat nog specialer te maken kun je ook de modus van de bovenste laag nog veranderen. Volg hiervoor de tutorial waarin je kan leren plaatjes te Verkleuren.

Nieuwsgierig of jouw eindresultaat een beetje lijkt op dat van mij? Kijk zelf!




GIMP Tutorials ------ Bewegende plaatjes

Hoe maak je bewegende plaatjes in Gimp? Dat ga ik je in deze tutorial leren! Het plaatje dat ik voor deze tutorial gebruik kan je vinden bij de neogroeten.

Maak een nieuw bestand van 400 x 300 pixels. Plak hierin het plaatje dat jij wilt gaan gebruiken. Het plaatje waar ik deze tutorial mee begin ziet er als volgt uit. Om dit plaatje te maken heb ik een screenie gemaakt van de pagina met de Neogreeting en vervolgens het plaatje in een nieuw bestand opgeslagen.

Je kan een plaatje laten bewegen door middel van verschillende lagen. In deze tutorial ga ik de pen laten bewegen. Maak een nieuwe laag aan in het lagenmenu. Het lagenmenu kan je vinden door op je toetsenbord CTRL en L tegelijk in te drukken. Je kan als je dat wilt meerdere lagen gebruiken om je plaatje te laten bewegen. In dit voorbeeld gebruik ik echter maar 1 laag.

De laag of lagen kun je vervolgens gaan vullen. Ik heb hiervoor een screenie gemaakt van de Neogreeting, waarop de pen van Illusen is verschoven ten opzichte van het andere plaatje. Dit plaatje heb ik in laag 1 geplakt. Mijn lagenmenu ziet er nu als volgt uit:

Je hoeft niet persé de hele laag te vullen met een nieuw plaatje. Als je transparante stukken hebt in je laag dan zie je de achtergrond (dus het onderste plaatje in het lagenmenu) op die plekken.

Als je de lagen hebt gevuld kun je je bewegende plaatje alvast bekijken voor je het gaat opslaan. Via rechtermuisknop klikken - filters - animatie - afspelen kun je het resultaat bekijken. Als het nog niet helemaal goed is volgens jou kun je het nog wat veranderen en dan nog een keer testen.

Mijn bewegende plaatje is nu klaar. Ik kan beginnen met het opslaan in gif. Dit is het bestandsformaat waarin je bewegende plaatjes altijd op moet slaan. Voor het beste resultaat doe je voor het opslaan: rechtermuisknop klikken - filters - animatie - optimaliseren voor gif. Als je dit hebt gedaan krijg je een nieuw venstertje met het plaatje. Hierdoor laad je plaatje straks sneller als je er nogal veel beweging erin hebt zitten.

Kies vervolgens bovenaan in het venstertje van je PLAATJE voor bestand - opslaan als. Dan kom je hier:

Klik als je je plaatje een naam MET EXTENSIE (dit is gewoon het .gif erachter). Als je op opslaan hebt geklikt kom je bij het volgende venster:

Zorg ervoor dat jouw venster er precies zo uitziet als dat van mij en klik daarna op "exporteren". Je komt nu bij het plaatje hieronder.

In dit venster kun je door het getal achter "delays between frames" aangeven hoe snel het plaatje beweegt. Je kan dit getal gewoon op 100 laten staan. Maar als je wilt dat je plaatje minder snel beweegt, maak je het getal groter. Aangezien mijn plaatje met 100 miliseconden wel erg snel bewoog, heb ik het getal bij mijn voorbeeld veranderd in 200 miliseconden.

Als je dit hebt gedaan ben je klaar met je bewegende plaatje! Gefeliciteerd!

Dit is mijn eindresultaat:




GIMP Tutorials ------ Brushes toevoegen

Wil jij nou een leuk bloemetje op je layout maken, of van die leuke krullerige sliertjes? Dat doe je met brushes. En voor gimp kun je die ook krijgen. Je kan brushes zelf maken, maar ook downloaden van het internet. Over dit laatste gaat deze tutorial.

Als je bij google zoekt naar "gimp brushes" zul je wel een paar mooie brushes vinden.

Download daar een paar leuke brushes en volg dan de tutorial op het plaatje hieronder om ze in the Gimp te laten verschijnen.




GIMP Tutorials ------ Doorzichtige plaatjes

1. Ga naar lagen, dit doe je door CTRL en L tegelijk in te drukken. Je bent dan bij het lagenmenu.

2. Je ziet op de screenie bovenin drie woorden achter elkaar staan, namelijk lagen, modus en ondoorzichtigheid Om de ondoorzichtigheid van je laag te veranderen klik je met je muis op het balkje en verschuift dan je muis naar links of naar rechts, als de ondoorzichtigheid minder moet worden ga je naar links schuiven (of je veranderd gewoon het getal erachter XD).

N.B. Zorg er wel voor dat de laag waarvan je de ondoorzichtigheid van wilt veranderen geselecteerd staat (net als bij mij de BLENDLAAG geselecteerd staat) Selecteren doe je door op de laag te klikken ;).

Ahja, en een nieuwe laag maak je nog altijd door links op dat lege papiertje te klikken.

Als je het goed doet kun jij ook dit tekstvlakje zo maken als in deze winkelblog van mij




GIMP Tutorials ------ Glittersplaatjes maken (1)

Om glitters te maken in een plaatje heb je twee dingen nodig. Namelijk een glitterfill en een leuk plaatje!

Ik ga voordoen hoe ik een glitterplaatje maak in the gimp. Ik gebruik deze glitterfill (die ik trouwens van internet heb, maar geen flauw idee van welke site helaas):

Als je op google zoekt naar glitter fill zul je een heleboel leuke vinden ;) Sla hem op in je computer.

En met deze glitterfill ga ik dit plaatje laten glitteren:

Open beide plaatjes in gimp

Eerst ga je het wit om het plaatje met de pteri weghalen, het is tenslotte niet zo mooi op een roze achtergrond als je nog een witte rand eromheen hebt. Kies het toverstokje en klik op het wit om het plaatje heen. Nu heb je dit geselecteerd. Klik met je rechter muisknop op het plaatje. Ga naar lagen - transparantie en kies dan voor alphakanaal toevoegen. Daarna klik je nog een keer met je rechter muisknop op het plaatje en kiest dan bewerken - knippen. Dit herhaal je tot al het wit weg is.

Oke, dan ga je nu naar het lagen menu (druk CTRL en L tegelijk in om er te komen) Dupliceer je laag twee keer. Je hebt nu de pteri drie keer staan.

Selecteer nu laag 1. Dit doe je door op de laag te klikken. Als het goed is word nu deze laag donkergrijs.

Pak nu de glitterfill erbij. Zorg er ook hier voor dat laag 1 is geselecteerd. (doe dit op dezelfde wijze als bij het pteriplaatje)

Dan gaan we nu de glitterlaag 1 kopieren. Dit is heel makkelijk. Gewoon rechtermuisknop klikken op het plaatje, bewerken kiezen en op kopieren klikken. Je kopieert nu alleen de onderste laag.

Ga nu weer naar het pteri plaatje en kies het toverstokje in het menu. Je gaat nu alle stukjes die je wil laten glitteren selecteren. Door shift ingedrukt te houden tijdens het selecteren kun je achter elkaar de stukjes die je wil selecteren aanklikken zonder dat het oude stukje niet meer geselecteerd is.

Dan is het nu gewoon een questie van de gekopieerde glitterfill in het plaatje te plakken. Klik met je rechtermuisknop op het plaatje en kies "plakken op". Je herhaalt dit totdat het hele geselecteerde stuk is gevuld met glitter.

Zorg ervoor dat de selectie WEL geselecteerd blijft. Anders moet je het bij laag 2 en 3 telkens opnieuw doen.

Nu kopieer je in de glitterfill laag 2 en plakt die in laag 2 van het pteriplaatje. Je herhaalt dus wat je net bij laag 1 hebt gedaan. Ook bij laag 3 herhaal je wat je bij laag 1 hebt gedaan.

Als het goed is heb je nu drie lagen met glitters. Dan kunnen we het nu op gaan slaan. Dit doe je door bovenin het venster van je plaatje op bestand - opslaan als te kiezen.

Het resultaat:




GIMP Tutorials ------ Glittersplaatjes maken (2)

In deze tutorial ga je leren hoe je je plaatje HELEMAAL kan laten glitteren! Hiervoor heb je dus geen glitterfills nodig.

Ik ga voordoen hoe ik een glitterplaatje maak in the gimp. Daarvoor gebruik ik een plaatje van een pteri.

Open je plaatje in gimp.

Eerst ga je het wit om het plaatje met de pteri weghalen, het is tenslotte niet zo mooi op een roze achtergrond als je nog een witte rand eromheen hebt. Kies het toverstokje en klik op het wit om het plaatje heen. Nu heb je dit geselecteerd. Klik met je rechter muisknop op het plaatje. Ga naar lagen - transparantie en kies dan voor alphakanaal toevoegen. Daarna klik je nog een keer met je rechter muisknop op het plaatje en kiest dan bewerken - knippen. Dit herhaal je tot al het wit weg is.

Oke, dan ga je nu naar het lagen menu (druk CTRL en L tegelijk in om er te komen) Dupliceer je laag twee keer. Je hebt nu de pteri drie keer staan.

Selecteer nu laag 1. Dit doe je door op de laag te klikken. Als het goed is word nu deze laag donkergrijs.

doe filters - ruis - scatter RGB. schuif die balkjes bij groen, rood en blauw zo totdat je de preview mooi vind ;)

klik nu laag twee aan. doe weer filters - ruis - scatter RGB en doe de balkjes ietsjes anders dan de eerste keer (niet teveel laten afwijken van de eerste pteri hoor, anders krijg je zo'n knipperding) dan klik je laag drie aan. doe weer filters - ruis - scatter RGB - balkjes ietsje veranderen

Als het goed is heb je nu drie lagen met glitters. Dan kunnen we het nu op gaan slaan. Dit doe je door bovenin het venster van je plaatje op bestand - opslaan als te kiezen.

En zie hier, het resultaat! Als het goed is ziet jouw plaatje er nu ook zo ongeveer uit.




GIMP Tutorials ------ Bewegende Buttontjes


In deze tutorial zul je leren net zo'n buttontje te maken als het buttontje hieronder.

1. maak een nieuw bestandje aan van 88 breed en 31 hoog (dat is de meest gebruikte maat )

2. dan versier je dat een beetje niet te druk anders vallen je letters niet op.

3. Klik op het T'tje in het menu en schrijf je tekst (lettertype: redensek bijvoorbeeld), zet wel je voorgrondkleur even op wit voor je begint te typen. kies als lettergrootte 13px (via dialogen - gereedschapopties )

4. klik de achtergrond aan en maak dan een nieuwe laag aan met het lege papiertoetsje. Als het goed is komt deze nieuwe laag nu tussen de achtergrondlaag en de Tlaag in te staan. Klik op de Tlaag. Klik nu met je rechtermuisknop op je plaatje en kies "alpha naar selectie" als het goed is zie je nu van die stippellijntjes in de plaatje.

5. klik de middelste laag aan. klik op het plaatje met je rechtermuisknop op het plaatje en kies je bewerken - lijn tekenen op selectie zorg ervoor dat je voorgrondkleur zwart is. Je krijgt nu een nieuw venster, daarin zet je de lijnbreedte op 1 (standaard staat deze op 6).

6. Voeg de tekstlaag samen met de laag van het zwarte randje (rechtermuisknop op de tekstlaag klikken en dan neerwaars samenvoegen )

7. nu dupliceer je de laag met het tekstje met rand eromheen net zoveel keer als het aantal letters dat je hebt in elke laag kleur je een letter in (met dat emmertje)

Zoals je ziet heb ik hier de voorbeeldjes een beetje vergroot, dat is handig omdat je dan tenminste goed kan zien wat je aan het doen bent met die miniscule lettertjes. Dit doe je door rechtsbovenin op het pijltje te drukken bij lagen - grootte van vooruitblik - gigantisch te doen.

8. Nu gaan we het plaatje optimaliseren voor GIF. Dit doe je door (klik met je rechtermuisknop op het plaatje) filters - animatie - optimaliseren voor gif te gebruiken.

9. na het optimaliseren voeg je in het nieuwe plaatje de achtergrondlaag samen met de laag daarboven dan sla je het op als gif. Ik ga ervan uit dat je onderhand weet hoe je een plaatje opslaat als gif, als je het nog niet weet moet je even terugkijken bij het einde van de tutorial "glitters in gimp".

Gefeliciteerd, je hebt zojuist je eerste bewegende buttontje gemaakt!




GIMP Tutorials ------ Glow en Schaduw


Deze tutorial is voor twee soorten effecten tegelijk. Als je hem doet voor de glow ben je ongeveer halverwege klaar. De schaduwtutorial duurt tot aan het einde. Voor de schaduw moet je eerst een neonglow maken.

Je maakt een plaatje aan. Zet het stukje dat je wilt laten schaduwen in een aparte laag (CTRL + L, dan kom je in het menu lagen, klik op het witte papierknopje om een nieuwe laag te maken).

dupliceer de laag die je wilt laten schaduwen.

Selecteer de onderste laag (ik selecteer dus laag twee). Dan doe je filters - vervagen - gaussiaans vervagen (zet hem op ong. 46)

Nu heb je dus je glow klaar. Volg de volgende stappen als je er een schaduw van wilt maken.

Zet nu je achtergrondkleur en je voorgrondkleur allebei op zwart

Daarna doe je filters - kleuren - projecteren - gradient map (gimp 2.2) in gimp 2.4 kun je de gradient map vinden in het menu colors - map - gradient map (als je een nederlandse versie hebt, dan krijg je waarschijnlijk kleuren - projecteren - kleur overloop). Als je dat doet krijg je dit:

Nu is je schaduw klaar!




GIMP Tutorials ------ Tekst Effecten


In deze tutorial ga ik je leren hoe je op een hele makkelijke manier, mooie letters kan maken met Gimp. Voordat je begint moet je even kijken welke versie van Gimp je hebt. Voor gimp 2.2 kan je hieronder verder lezen. Voor gimp 2.6 moet je even doorscrollen.

Gimp 2.2
Klik in je menubalk op Xtra

Je komt nu in een menu. Klik hier op Script-Fu en kies dan voor Logo's. Je bent nu in een menu waar je allerlei verschillende tekststylen kan kiezen. Ik neem meestal glossy, omdat ik dat een heel mooi lettertyp vind. Maar je kan natuurlijk ook bijvoorbeeld ijsachtige tekst maken. In deze tutorial kies ik voor glossy. Klik daar dus op in die lange lijst met tekststylen.

Als het goed is verschijnt er nu een groot venster, met daarin een hoop opties. Het zal waarschijnlijk wel duidelijk zijn, maar voor degenen die het toch niet helemaal begrijpen heb ik in het plaatje hieronder de opties wat verduidelijkt.

Als je op Ok drukt, heb je als het goed is jouw tekst, in speciale letters. Als je niet helemaal dezelfde dingen hebt ingevuld als ik zijn je letters misschien iets anders, maar vast ook heel leuk :). Je kan ook zelf een verloop maken, dat is heel makkelijk. De bovenste drie verlopen in het lijstje zijn namelijk gemaakt met je voor en achtergrondkleur, dus als je die veranderd, veranderd ook het verloop! Ik had voor mijn verlopen gekozen voor de kleuren lichtoranje met donkeroranje.

Nu kan je doorscrollen naar het stukje waar het titeltje "Tekst op het plaatje zetten" boven staat.

Gimp 2.6

Typ je tekst in een nieuw bestand. Dit kan je doen met het knopje waar een grote A op staat. Door dubbel te klikken op dit knopje kom je in een menu waar je je lettertype en tekstgrootte kan veranderen. Verander niet de tekstkleur, want dan werkt de volgende stap niet meer. De tekstkleur moet dus zwart blijven.

Vervolgens ga je naar Filters.

En selecteer je Alfa naar Logo.

Daarna kies je hoe je je tekst wilt veranderen. In mijn voorbeeld heb ik gebruik gemaakt van Glossy.

Als je dan vervolgens op Ok klikt, krijg je deze tekst.

De tekst op het plaatje zetten Nu vind ik zelf persoonlijk die witte achtergrond helemaal niks. Ik wil deze tekst op dit plaatje hebben:

Ik zal nu laten zien hoe ik de tekst daarop krijg. Pak eerst je letterplaatje. Ga naar je lagenmenu (CTRL + L) en verwijder de (onderste) witte laag. Dit doe je door de laag te selecteren en dan op het vuilnisbakje te klikken.

Nu is de achtergrond van je tekst transparant. Ga naar het venster met je letters en klik op bewerken - zichtbare kopieren. Kies niet voor gewoon kopieren, want dan kopieer je maar 1 laag!!!

Ga dan nu naar het plaatje met je achtergrond. Maak eerst een nieuwe laag, zodat je later nog wat kan verschuiven. Doe dan bewerken - plakken en plak je tekst in de nieuwe laag. Dan kan je nu met de Verplaats lagen en Selecties M tool de tekst verplaatsen (het is het knopje in het menu met die vier pijltjes aan elkaar). Voeg dan je lagen samen (ga naar het lagenmenu en klik op de bovenste laag met je rechtermuisknop. Kies dan voor afbeelding pletten). Sla het geheel op. En tadaaaa, je hebt een plaatje met mooie letters :)




GIMP Tutorials ------ Plaatjes Uitknippen


In deze tutorial ga ik je een techniek leren, waarmee je heel netjes plaatjes uit kan knippen.

Ik begin met het plaatje hierboven, de poogle ga ik eruit knippen, zodat de achtergrond transparant wordt. Om de poogle uit te knippen gebruik ik de paden aanmaken en bewerken tool.

Met deze tool moet je een rondje om de poogle heen trekken. Het werkt niet als een penseel, maar door om de centimeter een keer te klikken komt er een stipje te staan. Die stipjes verbinden zichzelf automatisch.

Als je dat hebt gedaan doe je selecteren - uit pad. Als het goed is is nu je poogle geselecteerd. Daarna doe je bewerken - kopieren. En daarna bewerken - plakken als nieuw beeld. Dan sla je het op of plak je het in je layout. Zie hier het eindresultaat:




GIMP Tutorials ------ Diagonale lijnen

In deze tutorial zal ik je uitleggen hoe je diagonale lijntjes door je plaatje heen kan maken. Ik begin met het onderstaande plaatje.

Diagonale lijnen maak je het snelst met een patroontje, je kan dit patroontje zelf maken, maar ook gewoon het patroontje hieronder in je gimp zetten (hij is nogal klein dus pak je vergrootglas)

Ik leg nu eerst uit hoe je deze in je gimp zet, dan zal ik daarna uitleggen hoe je zelf diagonale lijnen patroontjes kan maken. Sla het patroontje op in je computer. Kijk dan eventjes welke versie gimp je hebt.

Versie 2.2 Open dan gimp en open het plaatje van het patroontje. Daarna doe je Script-Fu - Selectie - Naar patroon. Geef je patroon een naam en klik op ok. Het patroontje staat nu tussen jouw patroontjes.

Versie 2.4 Open dan gimp en open het plaatje van het patroontje. Klik dan nu zonder iets aan het plaatje te veranderen op opslaan. Als het goed is krijg je nu in het balkje bovenaan de naam van het plaatje te zien met als extensie .png, maak daar .pat van en klik op opslaan. Je hebt het plaatje nu omgevormd in een patroontje. Dan moeten we het nu nog in de patronenmap plakken, op dezelfde manier als je hebt gedaan bij de brushes. Als je niet meer precies weet hoe dat ging kijk dan even bij de brushes tutorial. Zoek via start - zoeken naar je gimp map, als je die hebt gevonden, klik je in de gimp map op de map patterns (of als je een nederlandse versie hebt: patronen) en in die map sleep je het patroontje.

Je kan ook zelf zo een patroon maken, maak een nieuw bestand en kies een goede brush uit waarmee je straks stipjes gaat zetten. Hoe kleiner je bestand, des te dichter liggen de lijnen bij elkaar! Mijn patroontje is 5 pixels breed en 5 pixels hoog. Mijn brush is vierkant en heeft een grootte van 1 pixel, ik kan daar dus vijf stipjes mee zetten in mijn bestand. Het is handig om je bestand wat uit te vergroten zodat je goed kan zien waar je de stipjes zet. Het patroontje moet er ongeveer zo uit zien:

Als je dat zo hebt gemaakt en je denkt dat je patroon goed is zo, zet je hem op precies dezelfde manier als hierboven beschreven bij je patronen.

Dan gaan we nu de diagonale lijnen aanbrengen in het maraquaanse plaatje. Open dit plaatje en maak meteen een nieuwe laag (klik op het papiertje in het lagenmenu CTRL + L)

Doe dan selecteren - alles en klik daarna op bewerken - vullen met patroon. Zorg ervoor dat jouw streepjespatroon actief staat. Je kan checken of je de goede hebt door naar het kleine voorbeeldje naast "vullen met patroon" te kijken. Als het goed is zie je daar je diagonale lijntje, net als bij mij.

Vervolgens krijg je dit

Ondoorzichtig nog.. De volgende stap zorgt ervoor dat je je plaatje door de streepjes heen kan zien. Ga naar je lagenmenu en kies voor de modus "Overheen Leggen". Snap je dat niet helemaal? Kijk dan goed naar het onderstaande plaatje en neem de opties over die in het lagenmenu staan aangegeven. Het plaatje dat je achter het lagenmenu ziet staan, is het resultaat van de verandering van de modus.

Persoonlijk vind ik nu de streepjes nog een beetje te zwart, dus ik ga de ondoorzichtigheid van de lijnenlaag veranderen, om dat te verminderen. Zoals je kan zien in mijn lagenmenu, heb ik de ondoorzichtigheid voor dit plaatje op 17.5 gezet. Dat hoeft niet perse, doe wat jij het mooiste vind.

Voeg dan nu beide lagen samen. Ga naar het lagenmenu en klik daar met je rechtermuisknop op de bovenste laag. Kies dan voor Zichtbare lagen samenvoegen.

Als je de onderstaande melding krijgt, klik je gewoon op ok. Er verandert dan namelijk als het goed is niks aan je plaatje.

Daarna kan je je plaatje opslaan.

Zie hier het eindresultaat:




GIMP Tutorials ------ Glossy Lijnen


In deze tutorial ga ik je leren hoe je glossy lijnen kan maken in Gimp. Je kan deze lijnen gebruiken om je layouts nog mooier te maken. Zie hier alvast het eindresultaat. Ik zal hierna vertellen hoe jij dit ook kan maken.

Het eerste wat je moet doen is een golvende lijn maken met je paden en selectietool. In het knoppenoverzicht dat je kan vinden bij de "beginnen met gimp" tutorial is dit het knopje G. Dit geld voor Gimp 2.2. Als je gimp 2.4 hebt, kan je het knopje vinden als je op de B drukt op je toetsenbord. Bij beide versies zie je op het plaatje van het knopje een soort vulpen met een streepje eraan. Om een golvende lijn te maken klik je eerst in het werkveld op de plek waar je wilt beginnen met je golvende lijn en dan op een ander plekje (iets hoger of iets lager). Als je je muis ingedrukt houd nadat je hebt geklikt en dan je muis verschuift kan je een bocht maken in je lijn. Als je het goed hebt gedaan zal je zoiets krijgen:

Maak nu een nieuwe laag. Dit is erg belangrijk, omdat je anders geen glossy lijn kan maken! We gaan eerst een zwarte basislijn maken. Je kan je lijn zwart maken door door je voorgrondkleur op zwart te zetten. Vervolgens klik je op bewerken en kies je voor lijn tekenen op pad. Zet de lijnbreedte op 1px. In de screenie hieronder staat 3. Dit is fout. Je moet echt 1 doen, anders dan krijg je een minder goed resultaat.

Dan gaan we de lijn gaussiaans vervagen. Dit kan je doen bij filters - vervagen - gaussiaans vervagen. De vervagingsradius kan je op 1 tot 3 pixels zetten. Het is eigenlijk maar net wat jij mooi vind. Als je een strakke zwarte streep in de midden van je glossy lijn wilt aan het eind van deze tutorial, kan je de vervagingsradius het beste zo laag mogelijk houden. Persoonlijk vind ik een radius van 1px het mooist.

Als je dit hebt gedaan, ziet je lijn er zo uit:

Als je dit hebt gedaan dupliceer je de laag (door in het lagenmenu op het knopje met de twee papiertjes te klikken) en doe je op de bovenste laag een gekleurde gradient map, in mijn geval dus roze, in het nederlands heet dit een kleurverloop. Je kan dit doen door de volgende opties te kiezen: filters - kleuren - projecteren - gradient map (gimp 2.2) in gimp 2.4 kun je de gradient map vinden in het menu colors - map - gradient map (als je een nederlandse versie hebt, dan krijg je waarschijnlijk kleuren - projecteren - kleur overloop). Het kleurverloop word gemaakt met de kleuren die jij als actief hebt staan in je menu waar je de kleur van je brush kan selecteren. Kies daar dus alvast een goede kleur voordat je gaat beginnen met de gradient map.

Als je dat hebt gedaan verander je de doorzichtigheid van de gekleurde laag (zie de tutorial over doorzichtige plaatjes), zodat je een combinatie krijgt van roze met zwart.

Vervolgens maak je een nieuwe laag, die je ONDER de twee lagen met de lijn zet. Hoe doe je dit?? Dat is heel simpel, je klikt op de alleronderste laag en klikt dan op het lege papiertje waarmee je een nieuwe laag kan maken. Als je dan de nieuwe laag maakt, komt hij automatisch boven de onderste laag en onder de lagen met de lijnen te staan.

Zorg dat de nieuwe laag actief staat. Ook bij deze laag gaan we weer een lijn tekenen. Kies bewerken - lijn tekenen op pad. Maar let op: Deze laag moet een lijnbreedte krijgen van 3 pixels. Het pad dat je in het begin van de tutorial hebt aangemaakt, bestaat als het goed is nog steeds, dus die hoef je gelukkig niet overnieuw te maken. VOORDAT je deze lijn gaat trekken, geef je de lijn een kleur. Deze lijn word dus niet zwart. Je kan het beste een lichtere kleur kiezen dan de andere kleur die je al hebt gekozen. Dus je combineert donkerroze met lichtroze of bijvoorbeeld donkerblauw met lichtblauw.

Ook deze laag vervaag je. Dit doe je op precies dezelfde manier als bij de laag met de zwarte lijn. Het enige verschil is, dat deze lijn een gaussiaanse vervaging krijgt met een vervagingsradius van ongeveer_ /8 pixels.

Als het goed is heb je nu het eindresultaat bereikt.

Merk op dat je de techniek die je net hebt geleerd ook voor andere dingen kan gebruiken. Zo kan je het bijvoorbeeld gebruiken om tekstjes te stylen. De tekst helisaem hieronder heb ik gemaakt met precies dezelfde techniek als hierboven beschreven, met een aantal kleine aanpassingen. Als het goed is moet jij nu in staat zijn dit ook te kunnen maken. Om dit te maken maak je eerst een tekstlaag, waarin je met de teksttool een woord schrijft (dubbelklik op het knopje in het menu om het lettertype enzo aan te passen). Vervolgens moet je deze laag twee keer dupliceren en een van de onderste twee lagen verkleuren in zwart. Beide lagen moet je ook gaussiaans vervagen zoals hierboven beschreven. Om het extra mooi te maken kan je van de lagen nog de doorzichtigheid veranderen. Maar zoals altijd met graphics maken, moet je blijven uitproberen om nieuwe dingen uit te vinden.




GIMP Tutorials ------ Verkleuren

In gimp kan je ook plaatjes verkleuren. In deze tutorial zal ik voordoen hoe je dat doet. Ik heb voor deze uitleg Gimp 2.6 gebruikt, maar bij oudere versies werkt het ook. Ik begin met dit plaatje.

Vervolgens maak je een nieuwe laag aan (via het lagenmenu dat je kan vinden met CTRL + L, als je daar bent klik je op het witte papierknopje om een nieuwe laag aan te maken). Deze laag vul je met een kleur. Ik heb voor dit voorbeeld gekozen voor roze.

Als het goed is zie je nu alleen een roze vlak. Dit kunnen we heel makkelijk veranderen, door in het lagenmenu de modus van je roze laag te veranderen. Ik heb hem in dit voorbeeld op scherm gezet.

Maar als je een andere modus kiest, zoals bijvoorbeeld Delen, dan ziet je plaatje er soms heel anders uit (bij het plaatje hieronder heb ik de modus Delen gekozen).

Je kan ook in plaats van een effen kleur, een kleurverloop (gradient) gebruiken. Je kan je actieve kleurverloop hier kiezen:

Klik op het knopje waar de pijlen bij staan en klik op het verloop dat je wilt hebben. Klik dan het venstertje weer weg en klik op het knopje dat ingedrukt is op het plaatje hierboven (die tussen het emmertje en het potloodje). Als je nu zorgt dat je roze laag is geselecteerd en je drukt je muis in aan de ene kant van het plaatje, en je laat hem los aan de andere kant van het plaatje heb je een verloop gemaakt! Als je daarna zorgt dat je modus op iets anders staat dan Normal (maar bijvoorbeeld op scherm of delen) dan zie je heel lichtjes het verloop door je plaatje heen.

Zo moet het er ongeveer uitzien in je lagenmenu:

Dan zal je plaatje er ongeveer zo uit komen te zien:

Je kan dan tenslotte ook nog combineren. Dat doe ik zelf vaak in layouts, dan heb ik een hele rij vol met lagen met gradients en kleuren erin. In de screenie hieronder kan je goed zien hoe ik dat doe. In het groen heb ik erbij gezet welke laagmodus ik heb gebruikt (dat staat er normaal niet bij)

Valt best wel mee he, plaatjes verkleuren? Als het goed is kan jij dat nu ook! Gefeliciteerd =D




Codeerhulp ------ Coderen

In deze tutorial ga ik uitleggen hoe je een layout kan coderen. Als je nog niet zo veel weet over codes raad ik je aan om bij het begin te beginnen. Alle tutorials hieronder hangen namelijk met elkaar samen. Ik maak ook veel gebruik van Engelse termen, omdat ik de Nederlandse niet weet. Zelf heb ik namelijk leren coderen van Engelse sites. Zie het als een service dat jij het nu in het Nederlands kan leren =D

Coderen doe je het handigst in kladblok. Dan kan je namelijk je codes opslaan en bekijken. Sla je bestand op als .html bestand. Als je dan later op het bestand klikt, opent het in internet, waardoor je kan zien hoe je pagina eruit ziet. Je kan je bestand als html bestand opslaan door als je opslaat de naam van naam.txt te veranderen in naam.html.

Je maakt bij coderen op Neopets onderscheid tussen HTML en CSS. Hoe kan je dat uit elkaar houden?? Dat is eigenlijk niet zo moeilijk. HTML en CSS staan namelijk vaak apart van elkaar. Het CSS gedeelte staat bovenaan de code, het HTML gedeelte onderin_ Je kan HTML ook herkennen aan de driehoekige haakjes, die gebruik je bij CSS namelijk niet. Wat doet HTML eigenlijk?? En wat CSS?? Met HTML geef je de structuur van de pagina aan, met CSS 'style' je als het ware de pagina. Omdat je voor CSS eerst informatie over HTML nodig hebt, zal ik eerst wat informatie geven over HTML.




Codeerhulp ------ HTML

Hoe ziet HTML eruit?

Zoals ik al zei staat het HTML gedeelte van de code onderin_ Op neopets maken we meer gebruik van CSS en daarom zal ik HTML kort toelichten. Je hebt het namelijk nodig om delen van de CSS te laten werken.

Een HTML code staat altijd tussen driehoekige haakjes, die je kan vinden bij de punt en de komma op je toetsenbord. Ik zal je leren om het HTML gedeelte zo kort mogelijk te houden door de CSS zo veel mogelijk bij elkaar te plaatsen (dat is overzichtelijker, en daardoor makkelijker).

Maar eerst moet je natuurlijk de basis van HTML leren. Je gebruikt HTML erg vaak. Ik neem aan dat je vast al wel eens iets als dit hebt gezien.

Daar kan je je tekst dik mee drukken. Met het stukje dat voor info staat open je de b tag. De computer weet dan dat je de tekst die na die drie tekens komt dik moet worden gedrukt. Met het stukje achter de b wordt de computer duidelijk gemaakt dat de rest van de tekst niet meer dik moet worden gedrukt. Niet al te moeilijk toch?

Dan kan je HTML ook nog eigenschappen geven door deze in de openingsregel van de HTML te schrijven. Als je bijvoorbeeld je tekst een leuk kleurtje wilt geven wilt kan je deze code gebruiken:

Dan geef je dus in je HTML tag extra informatie voor de computer die hij moet gebruiken. Maar als je dit te veel doet, wordt je pagina erg onoverzichtelijk_ Vandaar dat ik je nu wat zal leren over CSS.




CSS

Basiskennis

CSS staat voor Cascading Style Sheets. Zoals ik al zei kan je hiermee je pagina vormgeven. CSS bestaat uit een selector, dat is hetgene dat in het geheel word veranderd (bijvoorbeeld body, p of a), de attribute is het specifieke ding dat we gaan veranderen (hierbij kan je dingen als background, color en border voorstellen) en property geeft aan waarin we het gaan veranderen (bijvoorbeeld een kleurcode of een bepaald aantal pixels).

Zo pas je het toe. Je moet je CSS altijd tussen de style tags zetten. Anders werkt je CSS niet en heb je alles voor niks gemaakt. Je hoeft maar 1 keer in je code style tags te gebruiken. Bij sommige layouts zie je dat style heel veel keer achter elkaar wordt geopend en gesloten. Dat is dus fout en daarbij zonde van de ruimte op je pagina.

Zoals je ziet geef je aan dat de selector de dingen die tussen de krullerige haakjes staat toegepast moet worden door de computer. Je gebruikt altijd een dubbele punt tussen de attribute en de property. Anders kan de computer die twee dingen niet onderscheiden_ Je kan ook meerdere attributes onder elkaar zetten. Deze scheid je door middel van een punt komma.

Ik zal nu een voorbeeld geven zodat je misschien beter snapt hoe dit werkt. Met al die Engelse woorden klinkt het heel ingewikkeld terwijl het dat eigenlijk nog niet echt is. Stel je hebt een leeg schilderij en je wilt de achtergrond van je schilderij geel maken. In het echte leven pak je dan een grote kwast en een pot verf en klieder je dat schilderij geel. Zo werkt dat bij webdesign niet. Je moet hier gebruik maken van woorden. Als de computer die woorden leest, zet hij het om in de kleur geel. In dit geval is dus de selector het lege schilderij; dat moet tenslotte helemaal geel worden. Wat wil je veranderen?? De achtergrond. Bij webdesign gebruik je Engelse woorden. Het Engelse woord voor achtergrond is natuurlijk background. Dit is dus de attribute. De achtergrond moet geel worden, dus is property yellow.

Nu zul je begrijpen dat de selector schilderij hier op Neopets helemaal niet bestaat. We hebben tenslotte geen schilderijen op internet! In de volgende stukken van deze tutorials zal ik je verschillende selectors aangeven en daarbij attributes en property's uitleggen.

Ook kan je verschillende selectors tegelijk veranderen. Selectors scheid je door middel van komma's. Dus zo:

Als je dit snapt kan je verder kijken. Snap je het nog niet?? Lees dit stuk dan net zo lang tot je het begrijpt, want je hebt dit echt nodig voor de rest van de tutorial.




Met CSS de achtergrond van een layout veranderen

Op neopets heb je twee verschillende achtergronden. Namelijk de main achtergrond en de body achtergrond. De main achtergrond heb je alleen op Neopets, de body achtergrond is een achtergrond die je hebt bij alle websites. Body is de allerachterste achtergrond, standaard is hij grijs en je kan hem alleen zien als je een groot beeldscherm hebt. De main achtergrond is standaard wit en heeft een rand. De main zit ongeveer in de midden van de body achtergrond en vult dus het midden op.

Zoals je net hebt geleerd, is de body nu dus de selector, daar wil je namelijk de achtergrond van veranderen. Background is net als in het vorige voorbeeld de attribute, en de property word een kleur, of een achtergrondplaatje. Ik ga deze twee dingen apart laten zien. Eerst laat ik zien hoe je de achtergrond een kleur geeft. Kijk alvast naar het voorbeeldje hieronder. Als je deze code gaat gebruiken, dan word je achtergrond lichtblauw. Ik maak hier gebruik van een kleurcode. Je kan deze zelf opzoeken in een tekenprogramma of de kleurenkaart die te vinden is in deze gids gebruiken.

Om de main achtergrond een kleur te geven verander je body in #main. Dan ga ik nu laten zien hoe je je pagina een achtergrondplaatje geeft. Het werkt bijna hetzelfde, alleen de property is verschillend. Ook heb je bij achtergrondplaatjes te maken met het positioneren van de achtergrond en moet je aangeven hoe je wilt dat je achtergrond zich herhaalt.

Zoals je hebt geleerd, moet je in de plaats van property een eenheid zetten. Hieronder een rijtje van de mogelijkheden die je hebt.

Bij background-position kan je gebruiken:

Deze kan je ook met elkaar combineren, dan krijg je bijvoorbeeld left top, dat betekent dat je plaatje linksbovenin je pagina te zien zal zijn. De volgorde waarin je ze plaatst maakt dan niet uit. Top left werkt net zo goed als left top.

Bij background-repeat maak je gebruik van hele andere eenheden. Hieronder een rijtje met de mogelijkheden.

Als je dit gebruikt wordt je pagina natuurlijk erg lang. Vooral als je een beperkt aantal tekens mag gebruiken (zoals op lookups) is dat erg irritant. Gelukkig kan je dit allemaal afkorten en in 1 regel zetten. Het ziet er dan zo ongeveer uit.

Als je dan alle property's in de code zet krijg je zoiets:




Style je tekst!

Op dezelfde manier als je net de achtergrond van je pagina hebt veranderd, kan je ook de tekst stylen. Er zijn verschillende manieren waarop je je tekst kan veranderen. Je kan de tekst voor de hele pagina stylen óf voor maar een deel van de tekst. Bijvoorbeeld alleen de dikgedrukte tekst. Ik zal eerst uitleggen hoe je de tekst voor de hele pagina veranderd. Daarna ga ik specifiek in op een aantal andere manieren om de tekst te veranderen.

Als je de tekst veranderd kan je de kleur, het lettertype, de grootte en nog veel meer bepalen helemaal bovenin je pagina. Bij de CSS. Je kan de hele pagina veranderen door bij de body tag aan te geven wat er moet gebeuren. Dus net als bij de achtergronden gaan we weer gebruik maken van de body tag.

Ik heb een aantal dingen waarmee je je tekst kan stylen uitgekozen omdat die het meest worden gebruikt. Je kan nog veeeeel meer van dit soort selectors voor tekst vinden op de petpage die ik aan het begin van deze tutorial gaf. Omdat ik ze niet allemaal uit kan leggen (dan wordt de gids veel te lang) raad ik je aan om die gewoon eens uit te proberen en te kijken hoe ze werken.

Met de selector font-family kan je het lettertype veranderen. Nou ja, iedereen weet wel een aantal lettertypes. Je kan bijvoorbeeld kiezen voor arial of georgia. Maar let wel op, als je een font neemt dat haast niemand heeft, zie alleen jij het echte font. De anderen zien een ander font, bijvoorbeeld arial. Je kan dus het beste een van de fonts nemen die standaard op je pc staan en niet een gedownload font.

Color spreekt voor zichzelf. Je kan hier de kleur van je tekst mee veranderen. Ik denk dat ook font-size voor iedereen wel duidelijk is. Je kan daarmee de grootte van je tekst veranderen. In plaats van AANTAL in de code moet je een cijfer zetten. Bijvoorbeeld 12. De spatie tussen het getal en px moet je weghalen, anders werkt de code niet goed in Firefox.

Dat was allemaal over de hele pagina. Je kan ook een deel van de tekst op de pagina stylen. Het verschil met de hele pagina zit hem in de selector. De rest blijft allemaal hetzelfde. In plaats van body gebruik je nu alleen i (hiermee "style" je alle schuine tekst op de pagina) of b (alle dikgedrukte tekst) of u (alle onderstreepte tekst). Als je bijvoorbeeld b gebruikt, word alleen de dikgedrukte tekst veranderd, de rest blijft hetzelfde.




Links

Met deze informatie kan je nu dus ook links stylen. In codeertaal wordt een link aangegeven met a. Dat moet je onthouden_ want links zijn heel belangrijk voor webpagina's. Bij links wordt er onderscheid gemaakt tussen de link die je ziet als je kijkt naar de link, de link waar je overheen gaat met je muis, de link die is bezocht en de link als je erop klikt.

a: link is de link als je er gewoon naar kijkt, zonder iets te doen
a: active is de link als je erop klikt
a: visited is de link als je hem ooit al eens hebt bezocht
a: hover is de link als je er met je muis overheen beweegd

Maar dit is wel lang he?? Zelf kort ik het altijd af en geef ik alleen de hover een ander kleurtje. Dat doe je zo.

Zoals je weet worden links standaard onderstreept_ Als je dat niet wilt moet je text-decoration: none gebruiken.




Verdeel je site in div(ision)s: oftewel zelf selectors maken

Dit is echt het aller aller allerhandigste deel van CSS. Zelf selectors maken! Je kan divs zien als kleine vlakjes die je op je pagina plaatst. Dit vlakje kan je verschuiven over je pagina en eigen eigenschappen geven. Bijvoorbeeld eigen tekstkleuren die verschillen van de rest van de pagina, of een eigen achtergrondkleur.

Je kan een div een zelfverzonnen naam geven. Zelf geef ik nog wel eens mijn div de naam "inge", lekker makkelijk en niet al te origineel. Je kan zien of iets een div is aan de punt of het hekje voor het woord.

Het maakt niet zoveel uit of je er een punt of een hekje voor zet. Het verschil is voornamelijk dat een punt een div class aangeeft en daarom vaker dan 1 keer gebruikt mag worden. Een div id wordt aangegeven met een hekje en mag maar 1 keer worden gebruikt.

Zoals je in het begin van de gids al kort hebt geleerd gebruik je HTML om de CSS te laten werken. Bij een div moet je onderin bij het HTML gedeelte van de layout aangeven dat de div moet worden gebruikt. Dit doe je door onder het style gedeelte dit toe te voegen aan de code.

Zoals je ziet heb ik in de HTML erbij gezet dat de div gebruik moet maken van de informatie die hij kan vinden bij #inge. Bij het HTML gedeelte haal je het hekje weg en gebruik je alleen de naam van de div.

Je kan een div gebruiken om stukjes van je layout te stylen, of bijvoorbeeld om tekst te schrijven. Je kan een div namelijk heel makkelijk een nieuw plekje geven in je layout. Dit heet positioneren. Ik gebruik voornamelijk absoluut positioneren.

Absoluut positioneren houd in dat bij de div de afstand tussen de linkerbovenhoek en de linkerzijkant en bovenkant van de div wordt berekent. Om het even beter te kunnen toelichten heb ik het voorbeeldje van net ingevuld en zal ik dit nu proberen goed uit te leggen.

Je hoeft dus een div niet alleen te gebruiken om te positioneren. Je kan ook een div gebruiken om een stukje van een tekst bepaalde eigenschappen te geven, als je bijvoorbeeld even zo snel geen andere tag weet. Ook kan je de divs gebruiken om je pagina nog overzichtelijker te maken, omdat je alles van elkaar af kan scheiden.




Stukken uit de code weghalen

Nu je weet hoe je zelf divisions maakt, kan je ook leren hoe je dingen laat verdwijnen van je pagina. Wat je op lookups, gildes en andere plekken op neopets vaak ziet is dat ze de header en de footer en nog wat andere dingen weghalen. Dit zijn eigenlijk ook divisons. Alleen heb je ze niet zelf gemaakt. Ze horen standaard bij neopets. Omdat het divs zijn kan je ze met een simpele code kan laten verdwijnen.

Zoals je ziet gebruik je display: none om ervoor te zorgen dat de header en de footer niet meer zichtbaar zijn. Maar let op, je kan dit niet doen bij #main, de binnenste achtergrond van neopets. Deze heb je namelijk nodig om je informatie te blijven zien. Om deze onzichtbaar te maken haal je de achtergrondkleur en het randje dat eromheen zit weg.

Ik heb je nu in grote lijnen uitgelegd hoe CSS werkt. Ik hoop dat je wat hebt gehad aan deze tutorial. Als je nog meer wilt leren over CSS raad ik je aan om de tutorial voor verborgen tekst uit te proberen. Die heeft ook te maken met CSS. Misschien dat je dan ook snapt hoe dat echt werkt!




Codeerhulp ------ tables

Wat zijn tables nou eigenlijk? Dat kan ik het beste uitleggen met een klein voorbeeldje, kijk dit is een table:

hoi hoi
hoi hoi

Maar hoe maak je dat? Eigenlijk is dat niet zo moeilijk. Je moet gebruik maken van drie tags, namelijk.

Jep, maar wat moet je daarmee als je niet weet wat het betekent?

Table Deze tag hoef je over het algemeen maar 1 keer per tabel te gebruiken. Alleen aan het begin en het eind. Het houd je tabel als het ware bij elkaar.

Table Row (tr) Deze tag zorgt ervoor dat je een rijtje met cellen kan maken. Voorbeeldje:

rij 1
rij 2


Table Data (td) Deze tag zorgt ervoor dat je cellen naast elkaar kan plaatsen. Tussen deze tags zet je je tekst!! Probeer het niet ergens anders neer te zetten, want dat werkt niet. Voorbeeldje:

cel 1 cel 2


Ik neem aan dat iedereen dat begrijpt, maar dit is natuurlijk ook nog heel simpel. Je kan dit allemaal combineren. Hierdoor krijg je meerdere rijen met meerdere cellen erin, net als in het bovenste voorbeeldje.

Een randje maak je door de tag "border" toe te voegen aan je tabletag. Dit heb ik bij mijn voorbeeldjes ook steeds gedaan, omdat dat duidelijker is. Je kan ook de kleur van het randje veranderen.

rij 1
rij 2

Dan heb je nog de tag "rowspan" hiermee kun je rijen samenvoegen.

hoi hoi
hoi

En colspan, waarmee je cellen samen kan voegen

hoi
hoi hoi hoi




Codeerhulp ------ Bladwijzers

Met CSS kan je linken naar een andere plek op je petpage/lookup of wat dan ook. Dit gebruik ik zelf ook vaak op deze petpage. Het is niet echt ingewikkeld.

In je navigatie gebruik je deze code

Om ervoor te zorgen dat de link werkt, moet je op de plek waar je naartoe wilt linken de volgende code neerzetten

Zoals je ziet komt het woord petpet in de navigatie overeen met het woord petpet op de plek waar je naartoe wilt linken. Zorg ervoor dat deze twee woorden altijd gelijk zijn! Anders werkt het niet. Je kan daarbij ook 1 woord maar 1 keer gebruiken. Om meerdere links te maken, geef je de andere links een andere naam. Welke naam maakt niet uit, als de twee woorden maar gelijk aan elkaar zijn en je ze nog niet eerder hebt gebruikt. Dan krijg je dus zoiets

En dan krijg je

Zelf heb ik soms dat ik perongeluk twee keer het stukje met (a name="meerca") neer heb gezet. Dat werkt natuurlijk niet, aangezien je computer dan niet weet of hij naar het ene plekje moet linken, of naar het andere plekje. Je kan natuurlijk wel de link in je navigatie twee keer neerzetten. Dat maakt niet uit.

Zo simpel is het! Nu je dit weet begrijp je misschien ook de tutorial over verborgen tekst hieronder. Good luck!




Codeerhulp ------ Verborgen tekst

In deze tutorial zal ik je uitleggen hoe je tekst en plaatjes kan laten veranderen als je op een link of plaatje op een andere plek op de pagina klikt. Dit is een voorbeeld van wat je gaat maken:

Deze tekst zal veranderen als je op de link onder dit vlak klikt.
De tekst is veranderd xD Om het terug te veranderen, klik je op de andere link
Verander de tekst
Verander het terug

Ik zal beginnen met het stuk van de code tussen de style tags. Eerst codeer je een div die je positioneert op de plek waar je hem wilt hebben. Dit zal alle tekst gaan positioneren.

Daarna zetten we ook twee div classes in de code.

De div class ".hidden" maakt alle tekst in de tekstbox onzichtbaar_ De div class ".visible" zal ervoor zorgen dat alleen de tekst in die div class zichtbaar is.

Nu gaan we ook het stuk buiten de style tags veranderen.

Zoals je kan zien heb ik een div gemaakt die alles omvat. Daarna heb ik de div class die alles onzichtbaar maakt neergezet. Tussen die twee divs staan de zichtbare div classes. Je kan zoveel zichtbare div classes maken als je wilt.

Nu moeten we nog een menu maken, omdat je niet naar de onderste zichtbare div classes kan navigeren over de pagina als je het zo laat staan. Tussen de style tags positioneer je een nieuwe div, die je menu zal gaan positioneren.

Als je dat hebt gedaan, moeten we nog links maken die naar de visible div classes leiden. Om dat te doen, gebruik ik ankers. Zet alle ankers precies boven elke zichtbare div class en geef ze verschillende namen omdat ze anders niet zullen werken. Als je meer zichtbare div classes hebt nummer je verder met d, e, f, etc.

Om het menu te maken gebruik je de volgende code:

Als je meer zichtbare div classes hebt kan je deze links kopieren en plakken en a, b en c veranderen in d, e, f, etc.

Je bent nu klaar! Zet alles in een code en je zult zoiets krijgen:

Als je deze codering gebruikt, kan je veel verschillende dingen op je petpage zetten. Je hebt dus veel minder petpages nodig. Yay!




Codeerhulp ------ Codes

De volgende codes kan je gebruiken om zelf een layout te maken.

een herhalend achtergrondplaatje (voor de buitenste neopets-achtergrond)

de buitenste neopets-achtergrond in een kleur

de binnenste neopets-achtergrond helemaal weghalen

de binnenste neopets-achtergrond een kleurtje geven

de binnenste neopets-achtergrond een achtergrondplaatje geven

een mooie scrollbalk (werkt alleen in IE)
Gebruik de kleurenkaart onderaan om andere kleurcodes te kiezen

Onderstreep je tekst

Maak je tekst dikgedrukt

of schuin, dat is ook heel leuk

Dit is niet interessant, dus streep ik het door

een leuk kleurtje

lekker GROOT

Zo maak je een titel

Verander het cijfer achter de h's om de titel groter of kleiner te maken

Rood is een mooie kleur voor een achtergrond

hoi

Link naar een andere petpage

Zet je codes in een textboxje zoals hieronder:) (haal alleen wel de spaties uit de code weg, en zet tussen text en area een laag streepje)

Verander de breedte van je textboxje (haal weer de spaties uit de code weg, en zet tussen text en area een laag streepje)

Verander de hoogte van je textboxje (haal weer de spaties uit de code weg, en zet tussen text en area een laag streepje)

Voeg een leuk plaatje toe




Codeerhulp ------ Werkende layout in Firefox

Firefox is een browser net als IE, het werkt alleen op sommige punten net iets anders. Firefox is een stuk strenger met de codering, dat kun je goed merken. Ben je een heel klein dingetje vergeten dan werkt het meteen niet meer. Hoe laat je nou je layout werken in firefox? Dat klinkt heel moeilijk, maar is het eigenlijk helemaal niet.

Help, mijn tekst staat niet op de goede plek!!

Wat ik vaak zie is dat mensen een layout hebben gemaakt, een hele mooie in IE. Maar als je in firefox gaat kijken staat alle tekst rechts door elkaar. Heel irritant. Maar waar ligt dit dan aan? Nou, dit komt dus doordat jij waarschijnlijk bent vergeten je eenheden achter de cijfertjes van je div te zetten ;)

Dus wat moet je nou doen? Juist ja, de eenheden achter je div gaan zetten. Laat ik het even voordoen met de rommelige variant div aangezien die veel worden gebruikt in gildelayouts.

De div hierboven is dus fout. De div hieronder laat zien hoe het wel moet

Ik hoop dat je het zo een beetje begrijpt ;) Als je het verbetert zoals ik het heb gedaan in het voorbeeld hierboven zou je tekst op de goede plek moeten komen te staan. Als dit niet zo is, moet je even kijken of je het "position: absolute; niet bent vergeten. Als je dat niet hebt krijg je namelijk ook wat raars xD. Maar dat geldt natuurlijk ook voor IE...

Help, de kleuren van mijn tekst zijn in firefox fout!!

Grote kans dat jij het beroemde en veel geprezen # voor je HEX-code bent vergeten, kijk maar eens. Als je dus als code bijvoorbeeld ff0000 (=rood) hebt staan dan krijg in firefox zwarte letters, terwijl je als je #ff0000 hebt staan gewoon de goede rode kleur krijgt. Vergeet dus het # niet!




Codeerhulp ------ Neoforum fonts


Op de borden zie je veel mensen met een leuk zelfgemaakt, of premade fontje. In deze gids zal ik je uitleggen hoe jij dat ook kan maken. Een font bestaat uit twee delen, namelijk het NeoHTML en je siggy (neo-ondertekening)

Hier kan je de plek vinden waar je jouw font kan veranderen. Je komt dan op een pagina waar je alle dingen die te maken hebben met de neoborden kan veranderen. Ga naar het stukje dat je hieronder ziet staan.

Misschien heb je al ervaring met andere codes, zoals op petpages en lookups. Neohtml lijkt er best wel op, maar is toch niet helemaal hetzelfde. Zo gebruik je in NeoHTML niet de driehoekige haakjes, maar de vierkante haakjes. Ik zal hieronder een lijstje zetten met daarin wat wat betekent in NeoHTML, dan ga ik je daarna uitleggen hoe je die codes samenvoegd om er een mooi geheel van te maken.

NeoHTML: Dit woord zet je op de plek waar jij wilt dat de tekst die je post terecht moet komen.

[font] hier de tekst [/font] = de code die je gebruikt om aan te geven dat de tekst die tussen deze tags staat een bepaalde grootte, kleur en lettertype moet krijgen.
[center] tekst [/center] zorgt ervoor dat je tekst in de midden word gezet.

c = color = je tekstkleur
f = font-family = je lettertype
s = size = tekstgrootte

[b] tekst [/b] Zorgt ervoor dat je tekst dikgedrukt word
[u] tekst [/u] Onderstreept je tekst
[i] tekst [/i] Maakt je tekst schuin
[sup] tekst [/sup] zorgt ervoor dat de tekst tussen deze tags hoger komt te staan dan de andere tekst tussen de font tags.
[sub] tekst [/sub] zorgt ervoor dat de tekst tussen deze tags lager komt te staan dan de andere tekst tussen de font tags.
[br] zorgt ervoor dat de tekst die erna komt op de volgende regel begint
[p] zorgt voor een witregel.

Dit zijn ongeveer alle codes die je moet weten om een mooi font te maken. We gaan ze nu samenvoegen. Ga naar de pagina waar je je font kan veranderen en klik in de bovenste regel. Eerst gaan we ervoor zorgen dat we geen lelijke stippellijn midden door ons font krijgen. Dit doe je door een vierkant haakje dat naar rechts wijst in het bovenste balkje te zetten, en een vierkant haakje dat naar links wijst in het tweede balkje te zetten.

Persoonlijk vind ik het het mooiste als een fontje in het midden staat. Daarom begin ik met een center.

Code:

Balkje 1
[center] NeoHTML [/center][

Balkje 2:
]

Beetje saai zo he? Daar gaan we nu wat aan doen, door de tekst een kleurtje te geven. Ik zal de code die ik net al gegeven heb steeds een beetje aanpassen, zodat we uiteindelijk een mooi resultaat krijgen.

Balkje 1
[center][fontc=#0072FF] NeoHTML [/font][/center][

Balkje 2:
]

De tekst word nu als het goed is blauw. Als je een ander kleurtje wil, kan dat natuurlijk ook. Een kleurenkaart kan je hier vinden. Je kan natuurlijk ook zelf een kleurcode vinden als je een programma als photoshop of gimp hebt.

Je kan natuurlijk ook het lettertype en de grootte van je tekst veranderen. Dat doe je zo:

Balkje 1
[center][fontc=#0072FFs=1f=verdana] neoHTML [/font][/center][

Balkje 2:
]

De screenie is wat verkleind, daardoor kan je het verschil tussen de twee plaatjes bijna niet zien. Maar als je het in je eigen font zet dan zul je zien dat het tweede een stuk flitsender is dan het eerste.

Wat we nu gaan doen is het fontje wat opfleuren met leuke smileys of tekentjes. Onder de tekst maak ik een siggy. Omdat ik altijd last heb van ruimtegebrek, ga ik meestal verder in het eerste balkje, totdat het niet meer past (of ik moet stoppen omdat ik de tags anders niet meer af kan sluiten). Achter de eindtag van font zet ik dus een [br] om aan te geven dat ik op de volgende regel wil beginnen met mijn siggy. Dan zet ik daarachter een nieuwe fonttag, met nieuwe kleuren, grootte etc. Een goed font voor leuke tekentjes is wingdings, die ga ik dan ook gebruiken.

Balkje 1
[center][fontc=#0072FFs=1f=verdana] neoHTML [/font][br][fontc=#FDCB53s=4f=wingdings]u[/font][/center][

Balkje 2:
]

Dan vind ik het leuk om nog zo een tekentje doen in een ander kleurtje. Omdat het nieuwe stuk niet meer in het bovenste balkje paste, staat dit nu in het onderste balkje. Ook heb ik de [/center] verplaatst, omdat ik wil dat alles word gecentreerd en niet alleen het bovenste balkje.

Balkje 1
[center][fontc=#0072FFs=1f=verdana] neoHTML [/font][br][fontc=#FDCB53s=4f=wingdings]u[/font][

Balkje 2:
][fontc=#FF82E9s=4f=wingdings][sup]u[/sup][/font][/center]

Een tekstje in het siggy is ook wel leuk. Dus ga ik die ook er nog even in zetten, zodat je kan zien hoe je dat doet. Om dat een beetje mooier te maken, gebruik je onderstrepen_ dik maken of schuine tekst. Je kan alles dik drukken, maar bijvoorbeeld ook de helft dik en de andere helft schuin. Dat staat best wel leuk.

Balkje 1
[center][fontc=#0072FFs=1f=verdana] neoHTML [/font][br][fontc=#FDCB53s=4f=wingdings]u[/font][

Balkje 2:
][fontc=#FF82E9s=4f=wingdings][sup]u[/sup][/font][fontc=#FF0078 s=4f=serif][i]/~H[u]eli[/u]saem[/i][/font] [/center]

Het is eigenlijk gewoon een beetje puzzelen, ik hoop dat je nu snapt hoe je een eigen fontje kan maken. Het is niet zo moeilijk, je moet het alleen eventjes door krijgen.

Als je wilt mag je ook mijn code gebruiken, hierboven, maar zeg dan niet dat jij hem hebt gemaakt. Oke?
Veel plezier met alle fontjes die je nog gaat maken. Zie hier het eindresultaat!




Resources ------ Letteralfabet

Wil jij je layout helemaal afmaken? Dan moet je natuurlijk mooie letters gebruiken op je layout! In dit gedeelte van de layoutgids kun je deze letters vinden. Je kan kiezen uit allerlei verschillende lettertypen, kleuren en grootten. De plaatjes zijn verkleind. Voor de volledige grootte versleep je ze naar je adresbalk.

Wil je een bepaald alfabet gebruiken in een andere kleur? Dat kan! Sleep het plaatje naar je adresbalk (of klik op het plaatje met je rechtermuisknop en kies voor eigenschappen) en verander in de link de kleur in de naam. Dus als de link aangeeft "HelisaemLetteralfabet1Roze.png" en jij wilt de blauwe versie dan verander je dit in "HelisaemLetteralfabet1Blauw.png". Op dit moment kan je uit de volgende kleuren kiezen: Roze, Blauw, Geel, Groen, Rood

Gebruik je paint? Dan kan je geen transparante achtergrond gebruiken. Voor de versie van het alfabet met een witte achtergrond zet je een W achter de kleur uit de link. (Dus "HelisaemLetteralfabet1Roze.png" wordt "HelisaemLetteralfabet1RozeW.png". Zonder de W heeft het alfabet een transparante achtergrond.

Sla het alfabet op op je computer en kopieer en plak de letters die je wilt gebruiken in je layout! Veel plezier ermee!




Overige ------ Kleurenkaart

#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33
#FFE4A3 #FDD77D #FDCB53 #FFCC33 #FFC412
#FFE4C2 #FECC8A #FFB759 #FFA32B #FF9000
#FED1C6 #FFAA96 #FD8A5C #FF4B21 #FF4800
#FFC2DF #FF83BD #FF4A9F #FF0078 #BE0059
#FFBAF3 #FF82E9 #FF49DF #FF00D2 #B70097
#F5A8FE #EE63FF #E823FF #E400FF #9B00AD
#E59EFF #D461FF #C11AFF #A200DE #74009F
#C994FF #A54EFF #8C1CFF #7800F2 #6200C7
#C7AFFF #9C70FF #6F30FF #4500E1 #3701B2
#B1BAFF #7989FF #384FFF #001EFF #0019D2
#B9D8FF #76B3FF #3690FF #0072FF #0048A0
#B6E9FC #70D8FF #30C7FF #00BAFF #0098D0
#D0F7FC #88F2FF #81F2FF #37E7FC #00E4FF
#ABFFEC #6EFFDF #00FFC6 #01C79B #009372
#A6FFCE #60FFA7 #00FF72 #00C95A #019F47
#99FFA7 #58FF70 #00FF24 #00C41C #008513
#C0FFAF #87FF67 #36FF00 #27B900 #176E00
#CCFF99 #CCFF66 #CCFF33 #99CC00 #366E00
#C2DBB6 #7EAB69 #43732B #295A11 #164200
#E8D6B3 #CFAF72 #B37600 #744C00 #462E00
#D8A296 #A15C4C #682A1C #732C1C #4B0E00
#CFCBE3 #8F87B2 #564890 #271869 #0C003F
#CCCCCC #999999 #666666 #333333 #000000

Deze kaart kun je gebruiken voor bij de tutorials, je hebt namelijk altijd een stukje achtergrond dat wit blijft. Op deze kaart kun je een betere kleur uitkiezen. Als je de kleur hebt gekozen, kopieer je de kleurcode ervan en deze plak je in je layout op de plek hieronder (het kan zijn dat jouw code hier een beetje van afwijkt).




Overige ------ FAQ

Help ik kom mijn gilde niet meer in doordat ik ben vergeten de Join en Chat van mijn Overlay Gildelayout in te vullen!

Dit probleem kan je makkelijk zelf oplossen. Je hebt je gildelink nodig om in je gilde te komen, en die kan je zelf samenstellen. Dat doe je door de gildelink van een andere gilde op te zoeken, en in plaats van de nummers van die gilde de nummers van je eigen gilde te plaatsen. De nummers van jouw gilde kan je vinden achteraan de link van de hoofdpagina van je gilde.

Van dit:
http://www.neopets.com/guilds/guild_link.phtml?id=2039488
http://www.neopets.com/guilds/guild.phtml?id=1234567
Maak je dus dit:
http://www.neopets.com/guilds/guild.phtml?id=2039488

Die link plak je in je adresbalk en je bent weer in je gilde! Verander meteen die links bij Join en Chat, dan vergeet je dat niet meer ;)

welke breedte en lengte kun je het beste gebruiken voor een layout?

De meeste mensen hebben een beeldscherm van 1024 bij 768 pixels. Daarvan gaat nog een aantal pixels af, voor de scrollbalk en de zijkant van je beeldscherm, dus de breedte van je echte internetpagina zal circa 1008 pixels breed zijn. Daarom doe ik zelf meestal de breedte van de layout op circa 1000 pixels, dan krijgen de meeste mensen geen horizontale scrollbalk. De lengte van je layout maakt niet zoveel uit, ik zelf gebruik meestal een herhaalachtergrondje, waardoor ik helemaal geen lengte aan hoef te geven. Als je echt perse een hele achtergrond wilt maken, zou ik een hoogte van 800 pixels of iets meer aanraden.

Ik krijg geen vervaagde rand als ik de lasso doe. Wat nu?

Dan moet je misschien even je gereedschap instellen, bovenin je plaatjemenu (zo noem ik dat balkje boven het kliederstuk maar even) staat "dialogen" daar kun je kiezen voor gereedschapopties, als je dan de lasso aan hebt staan kun je feather edges (vervaagde zijden) kiezen als je een beetje aan dat balkje gaat rommelen kan je instellen hoeveel je de rand wilt laten vervagen. :) Als je dit hebt gedaan moet het lukken.

Als je het menu dialogen niet hebt (gimp 2.6), dan kan je dubbelklikken op de lassotool. Dan krijg je ook het venster waarin je je randen kan verzachten.

Ik heb in mijn menu geen knopje waarmee ik mijn penselen, patronen en verlopen kan kiezen. Hoe krijg ik dat terug? (Gimp 2.6)

Ga naar bewerken - voorkeuren. En klik daar dan links op gereedschapskist. Je kan dan een vinkje zetten voor actieve penselen, weergave en verlopen tonen. Als je dan op ok klikt heb je je penselen terug ;)

Mijn herhaalachtergrondje sluit niet aan op mijn topbanner. Wat moet ik doen?

Hoogstwaarschijnlijk is er iets mis gegaan met een van de plaatjes tijdens het opslaan. Of je herhaalachtergrond is te klein, of je topbanner is te klein. Kijk welke van de twee niet klopt en probeer dan deze opnieuw te maken. Als het goed is moet het je dan lukken.

Wat ook nogal eens gebeurt is dat het plaatje in paint is gemaakt en er aan de zijkanten allemaal wit zit. Zorg er dus voor dat als je paint gebruikt dat je alleen het originele plaatje hebt. Je kan het plaatje niet in een nieuw bestand plakken, dan gaat het mis ;).

Ik snap niet hoe je de herhaalachtergrond maakt. Hoe doe je dat?

Misschien is het wat duidelijker met een voorbeeld, zie hieronder:

Zoals je ziet heb ik dus een topbanner gemaakt, en ik wil daarbij een herhaalachtergrond maken. Dan neem ik een klein strookje van de onderkant van de banner (de plek waar de banner door moet gaan lopen). Je herhaalachtergrond moet aan de bovenkant en de onderkant gelijk zijn, anders krijg je rare lijnen op je layout. Ook de letters moeten van het herhaalachtergrondje af, anders heb je straks honderd keer de tekst "Jouw stats komen hier... etc." onder elkaar staan, dwars door je eigen tekst heen. :P




Overige ------ Regels voor layouts

Zoals je weet zijn er regels met betrekking tot layouts op neopets. Hier een klein overzichtje dat komt uit de editorial van de Neopische krant nummer 230. Ik heb geprobeerd dit zo letterlijk mogelijk te vertalen naar het Nederlands.

Userlookup

Petlookups

Shop/Gallery

Gildes

Dit waren alle regels die werden opgesomd in de editorial. Zoals jullie weten, is er op deze petpage een overlay gildelayout tutorial. Het kan zijn dat deze tegen de regels is, als je hem gebruikt is dat voor je eigen risico.

Volgens mij moest er bij dit lijstje ook nog bij dat je op petpages niet de credits onderaan weg mag halen. In deze editorial stond die er niet bij, maar als ik jullie was zou ik het zekere voor het onzekere nemen en de copyright lekker laten staan :)

Verder zou ik hier graag aan willen toevoegen, dat het erg onbeschoft is om een layout van iemand anders te kopieren, zeker als er boven staat dat het niet mag. Dit is dan ook tegen de regels en je kan er voor worden gerapporteerd. Je kan beter origineel zijn en zelf je eigen layout in elkaar zetten!

Dit was een klein overzichtje van de regels van neopets met betrekking tot layouts. Ik hoop dat je hier wat van hebt geleerd.







Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions