Welkom
Welkom op mijn petpage vol met graphicshulp. Ik hoop dat je hier wat aan hebt, de tutorials moeten duidelijk zijn, want er zijn al erg veel mensen die hem met succes hebben gebruikt. Ik wens je veel succes met het maken van je (eerste) layout, en als je vragen hebt of ergens niet uit komt kun je me altijd neomailen.Mijn templates zijn niet bedoelt om te worden gebruikt voor graphicssites. Als je bij een graphicssite werkt, dan betekent dat dat je kennis hebt van html en css. Als je dat niet hebt moet je gewoon niet bij een site gaan werken. Gebruik ze dan dus ook niet voor je graphicssite!
Ik zou het heel fijn vinden als je mijn credits in de layout wilt laten staan. Het hoeft niet heel groot. Je mag natuurlijk ook gewoon "coding by inge_123" op het plaatje bovenaan je layout typen dat scheelt ruimte in de tekstvlakjes en het staat ook nog eens mooier. Denk er eens over na!
Wat je wel weg mag halen uit de codes zijn de titeltjes boven de stukjes code, die ik voor de duidelijkheid neer had gezet. Die dingen nemen heel veel tekstruimte in, dus als je ruimtegebrek hebt mag je ze gewoon weghalen.
Veel regels heb ik niet, dus houd je alsjeblieft aan de twee regels die ik wel heb. Ik word er nogal moe van dat ik telkens moet gaan mailen of iemand alsjeblieft mijn naam terug wil zetten. Doe je het niet, jouw probleem, dan rapporteer ik je.
Nieuws
8 oktober 2008 - Hele grote update! Ik heb het zelf leren coderen gedeelte van de site voor een deel veranderd. Er is nu een stap voor stap zelf coderen uitleggen gekomen. Ik heb ook een aantal dingen verduidelijkt zodat het beter te begrijpen is.28 september 2008 - De commentaren in de codes zijn op een of andere manier weggevallen uit de codes. Hoe dan ook, ik krijg ze niet terug in de codes. Als ik de petpage opnieuw save met de commentaren erin, dan zijn ze weg als ik de preview bekijk. Als iemand weet hoe ik dit op kan lossen mag die mailen =D. Hoe dan ook, jullie moeten het de komende tijd waarschijnlijk zonder het commentaar in de code doen.. Verder is er EEN NIEUWE TUTORIAL namelijk een uitleg over hoe je een counter kan maken. Ook heb ik de wall of shame geupdate.
23 september 2008 - Ik heb een nieuwe petpage gemaakt met plaatjes erop die ik zelf heb gemaakt.
19 september 2008 - Eindelijk weer een update! Het heeft een tijdje geduurd, omdat ik het de laatste tijd druk heb met school. Ik wil graag mijn opleiding succesvol beginnen, dus neopets komt voor mij op het moment niet op de eerste plaats. Ik heb een tutorial voor glossy lijnen voor gimp gemaakt.
26 juli 2008 - Teilie vertaalt de gids in het Duits. Zelf ben ik verdergegaan met het vertalen in het Engels. Ik hoop dit zo snel mogelijk klaar te hebben, zodat ik weer nieuwe tutorials voor jullie kan maken =D
17 juli 2008 - Er is een nieuwe tutorial! Leer vanaf nu ook op deze petpage hoe je een fontje maakt :)
29 mei 2008 - Kleine aanpassing gemaakt aan de tutorial van de diagonale lijnen, door een paar mensen kwam ik erachter dat de manier waarop ik de patroontjes opsloeg niet werkte bij versie 2.4. Daarom staat er nu een nieuw stukje in de tutorial dat wel werkt bij versie 2.4. Bedankt megawonder en gezelligheid voor de hulp!
25 mei 2008 - De dertigste tutorial staat erop! Dit keer kan je leren hoe je diagonale lijnen in een plaatje maakt in Gimp. Dit staat namelijk erg mooi. Verder zit ik erover te denken ook photoshop tutorials te gaan maken, maar ik weet nog niet zo goed of daar interesse in is. Dus: Heb je interesse? Mail me dan eventjes :) Dan weet ik of het nuttig is om er tijd in te steken. Dankjewel.
17 mei 2008 - Alweer een nieuwe tutorial. Namelijk een tutorial waarin je kan leren hoe je heel netjes een stukje uit een plaatje uitknipt.
16 mei 2008 - Ik heb al veel vragen gehad over hoe ik van die mooie letters maakte met gimp. Nu kunnen jullie eindelijk lezen hoe het werkt. Er is namelijk een nieuwe tutorial :). Ook is het stukje "beginnen met Gimp" aangepast, er is nu een complete beschrijving van het gimpmenu.
29 april 2008 - Ik heb de Engelse vertaling van de site even uitgesteld. Er is een nieuwe codeertutorial en ik wil dat deel van de site eerst meer gaan uitbreiden. De bedoeling van deze site was eigenlijk om jullie zelf te laten coderen dus daar ga ik nu weer wat meer aandacht aan besteden. Deze tutorial had ik in eerste instantie gemaakt voor de tutorialwedstrijd van Nip/Design, maar ik bedacht me dat ik de Nederlandse versie net zo goed hier neer kon zetten. Dan kunnen jullie het ook lezen!
17 april 2008 - Er is een nieuwe tutorial! Een petlookuptutorial. Veel plezier ermee :)
9 april 2008 - Je hebt misschien al gezien dat er de laatste tijd weinig nieuwe dingen meer zijn bijgekomen. Dit komt omdat ik druk bezig ben met het vertalen van de site in het Engels, dat is een hoop werk. Als dat klaar is zal ik beginnen het codeergedeelte uit te breiden, omdat daar toch best wel veel mensen naar vragen.
8 april 2008 - Linkje naar een hele goede layoutgilde (ENG) toegevoegd. Als je echt wilt leren coderen en graphics maken (photoshop) is dat een aanrader.
20 maart 2008 - De site is compleet vernieuwd! Met een nieuwe layout en verbeterde tutorials zul je nu nog meer aan deze site hebben :)
23 februari 2008 - Nieuwe tutorial voor schaduw en gloeiende plaatjes in Gimp!
22 februari 2008 - Er is een tweede manier om glitters te maken in Gimp bijgekomen + nieuwe codes + nieuwe toevoeging aan de Overlay Gildelayout Tutorial!
24 januari 2008 - Er is een nieuwe kleurenkaart! Hiermee kun je de achtergrond van je layout een mooie kleur geven (dus te gebruiken bij de tutorials)
8 januari 2008 - Klein foutje uit de gildelayoutcode gehaald :) Hij moet nu goed werken
6 januari 2008 - Bijna was ik de site kwijt :(. Maar het is gelukkig weer goedgekomen. Er is ook een nieuwe tutorial, namelijk eentje voor shop en gallerijlayouts!
3 januari 2008 - Wall of shame gewist, zorg er voor dat hij niet terug hoeft te komen!!
25 december 2007 - Nieuwe userlookup tutorial & verduidelijkte codes bij alle tutorials
Wall of Shame
Naam: miss_anniekDatum: juni/juli 2008
Site: Gimp Gids
Reden: Haar tutorial "mooie tekst 2" lijkt te veel op de gimp tutorial "Text effecten" van mij. Ze heeft precies dezelfde stappen uitgelegd en het plaatje waarop je kan zien wat alles betekent in het Glossymenu is ongeveer hetzelfde als in mijn gids. Daarbij doet ze niet aardig en neemt ze me niet serieus.
Naam: love_kyra_turbo
Datum: 28 september 2008
Reden: Meer dan een half jaar geleden heb ik haar erop gewezen dat ze mijn codes gebruikte zonder credits te geven. Ze heeft dan wel de indeling van sommige layouts veranderd (bijvoorbeeld haar lookup) maar het is en blijft mijn code, wat ik niet fair vind aangezien ze wel de moeite neemt om haar eigen naam er met grote koeienletters op te zetten. Nu bleek dat zij ook mijn codes gebruikt voor haar graphicssite, terwijl duidelijk aan het begin van de gids staat dat dat niet de bedoeling is. Dat is dus de reden waarom ik haar hier heb neergezet.
Zorg ervoor dat je hier niet komt te staan. Ik mail je niet voor ik je hier neerzet. Wel krijg je altijd eerst een waarschuwing. Als je hier staat kun je er alleen vanaf komen, door hetgene wat is gekopieerd weg te halen en je excuses aan te bieden. Credits terugplaatsen is ook goed als je eerst even vraagt of ik dat goed vind.
Het is als je hier komt te staan, je eigen verantwoordelijkheid om ervoor te zorgen dat je van de wall of shame af word gehaald.
Tutorials ------ Shop/gallerijlayout
In deze tutorial ga ik je uitleggen hoe je een shop/gallerijlayout maakt. Jazeker, je layout zal straks werken in je winkel en in je gallerij! Handig he? Hieronder staat een voorbeeldje van hoe het eruit zal komen te zien.
Hiervoor heb je een tekenprogramma (bv. paint) nodig en 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 helemaal wit is. We gaan nu de layout versieren. Het plaatje hieronder is het plaatje bovenaan. Sla hem op in je computer en versier hem. Als het goed is krijg je de echte grootte als je hem opent in je tekenprogramma.
Als je dit plaatje hebt versiert kunnen we weer verder. Zoals je waarschijnlijk al wel dacht, is dit nog niet de hele layout. 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:
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!!
Load de plaatjes die je net hebt versierd op 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
Nu gaan we beginnen met coderen. Dit is niet zo moeilijk aangezien je eigenlijk alleen maar dingen op zijn plek moet zetten in de code. Ga naar de code die je al in het vlakje van je winkel hebt geplakt.
Het plaatje bovenaan 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 en de kleuren van de scrollbalk veranderen. Een kleurenkaart kun je hier vinden. Of je kan bijvoorbeeld de navigatie op een andere plaats zetten. Ik neem aan dat in de code duidelijk genoeg aan staat gegeven hoe je dat doet. Als je dat hebt gedaan is je layout af. 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:
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.
Load de plaatjes die je net hebt versierd op 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.
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
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 versiert 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.
Ga terug naar de pagina van neopets waar je de code al hebt geplakt. Load de plaatjes die je net hebt versierd op 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.
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 ------ 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):
Load de plaatjes die je net hebt versierd op 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.
De links die je hier hebt verkregen plaats je hier in de code:
De bovenste link is die van het doorlopende achtergrondje en de onderste van de banner. 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.
Nadat de dreamgilde hiermee begon is deze soort layouts een hele hit geworden. Vandaar dus dat ik een tutorial hierover maak.
Let op: deze gids is niet bedoelt om overlay gildelayouts voor je graphicssite te maken. Het is alleen voor je EIGEN gilde.
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.
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 versiert. 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?
Load de plaatjes die je net hebt versierd op 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.
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 ------ 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: Ing | |
| 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 moeilijkiedereen 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.
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.
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.
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.
Load de footer up en vervang dan de URL van de voorbeeldfooter hier:
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. GIMP is een zogenaamd "opensource programma". Dat betekent dat voor alles wat je doet, er een nieuw schermpje verschijnt. 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. Eigenlijk is blenden gewoon het vervagen van de randjes om een stukje van een plaatje en dit in een nieuw bestandje voegen. Dit kun je ook doen in the Gimp. Hoe je dit doet ga ik je nu vertellen.
Stap 1
Maak een nieuw bestand aan (menu - bestand - nieuw). Mijn plaatje maak ik 400 bij 300 pixels. Dit vind ik een mooie grootte voor een leuk plaatje.
Stap 2
Nu maken we een nieuwe laag aan voor het te blenden plaatje. Druk op je toetsenbord CTRL en L tegelijk in om bij het Lagenmenu te komen.
Klik net als in het plaatje hierboven te zien is het vierkantje links aan, je komt nu in een schermpje waarin je de laag een nieuwe naam en grootte kan geven. Verander hier alleen de naam (hoeft niet perse, het is wel duidelijker als je het wel doet) en klik op OK. Je hebt nu net als ik 2 lagen.
Stap 3
Zorg ervoor dat net als bij mij in het plaatje hierboven dat de BLENDLAAG is geselecteerd. Nu ga je een leuk plaatje zoeken en plakt dat in de laag. (plakken doe je door met je rechtermuisknop op het plaatje te klikken, en dan "plakken op" te kiezen). Ik heb een plaatje van Hilary Duff gekozen.
Stap 4
Nu klik je in het menubalkje de lasso aan.
Met dit gereedschap ga je nu (in mijn geval) de ongewenste dingen rond Hilary Duff weghalen. Je krijgt dan zoiets:
Zoals je ziet heb ik gewoon een randje om haar hoofd heen getrokken. Je hoeft niet zo heel netjes een rondje te trekken hoor ^^ het maakt niet zoveel uit, soms is het zelfs mooier als je het een beetje vlug doet.
Stap 5
Nu gaan we het geselecteerde stuk wegknippen om het blendeffect te krijgen. Knippen doe je met rechtermuisknop klikken - bewerken - knippen. Hieronder zie je het extra goed in het voorbeeldje:
Als je het nu goed hebt gedaan, krijg je zoiets:
Als het niet lukt.. (FAQ)
Vraag:Ik krijg geen vervaagde rand als ik de lasso doe. Wat nu?
Antwoord: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.
Stap 6
Je bent nu bijna klaar. Je kan nu nog wat versierseltjes erin doen. Je kan ook nog dingen achter het plaatje van Hilary doen, bijvoorbeeld een leuk verloopje. Als je iets achter haar wilt zetten ga je weer naar het lagenmenu (CTRL + L) en klikt de onderste laag aan. Daarna kun je gewoon een achtergrondkleurtje doen etc. wat je maar wilt:D Zie hier mijn eindresultaat!
GIMP Tutorials ------ Bewegende plaatjes
Bewegen in gimp is echt niet moeilijk. Zelfs de grootste Graphicramp kan het :). Ik ga hierin verder met het plaatje uit de blendtutorial. Zie hier mijn beginplaatje:
Bewegen doe je met lagen. Ik ga het in deze tutorial makkelijk houden dus ik maak bewegende sterretjes op het plaatje. Maak drie nieuwe lagen in het lagenmenu. Het lagenmenu kan je vinden door op je toetsenbord CTRL en L tegelijk in te drukken.
Om iets in de laag te zetten klik je in het menu de laag aan die je wilt vullen (met bv sterretjes) daarna ga je gewoon in het plaatje aan de slag met versieren.
Als je alle drie de lagen hebt gevult kun je het 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 blink is nu klaar. Ik kan beginnen met het opslaan in gif (waarin je het altijd op moet slaan als je iets laat bewegen) Voor het beste resultaat doe je voor het opslaan rechtermuisknop klikken - filters - animatie - optimaliseren voor gif. Je krijgt daardoor een nieuw venstertje met je plaatje, hierdoor laad je plaatje straks sneller als je nogal veel beweging erin hebt zitten.
Kies hierna bovenaan in het venstertje van je PLAATJE voor bestand - opslaan als. Dan kom je hier:
Klik als je je plaatje een naam MET EXTENSIE (is gewoon het .gif erachter ;) dit moet erachter anders flipt je gimp XD en slaat ie het niet op) gegeven op opslaan, je komt nu hier:
Zet alles precies zo als ik het hierboven heb gedaan, klik daarna op "exporteren". Je komt nu bij het plaatje hieronder.
Zoals je ziet hoefde je daar niks meer te veranderen (als het goed is). Nu ben je dus klaar met je bewegende plaatje! Gefeliciteeerd ermee:D
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.
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 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.
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)
#patroon { border: 1px solid #000000; }
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.
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 =DCoderen 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
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. Voor de attributes en property's raad ik je aan om deze petpage erbij te pakken. Dat is heel erg handig en scheelt je een hoop zoekwerk. Ik gebruik hem zelf ook heel vaak als ik even wat op moet zoeken.
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.