|
|
welkom guestOp deze page ga ik je proberen te helpen met graphics maken. Layouts en coderen over het algemeen. Natuurlijk weet ik niet alles van graphics en dat zul je mij ook nooit horen zeggen. Maar ik weet genoeg om je misschien een stapje verder te helpen.Ik wil wel dat voordat je iets van mijn gidsen gebruikt, je deze regels leest.
Ik kan je niet echt garanderen dat je na mijn hulp de allermooiste layouts kan maken en gelijk de Userlookup Spotlights wint. Je moet goed oefenen op het maken van layouts (Bah waarom moeten we altijd maar oefenen :O) en het allerbelangrijkste GEEF NIET GELIJK OP. Als je layout niet helemaal is zoals jij wilt en je gewoon even geen inspiratie meer hebt, stop er dan even mee. Misschien heb je de volgende dag als je weer helemaal fris bent een heleboel nieuwe ideen.
Veel succes ;) nieuws & updates21.03.09: Het is nu bijna een half jaar geleden dat ik deze page voor het laatst heb geupdated. Maar vandaag heb ik toch besloten om er weer aan verder te werken. Zo te zien heb ik een nieuwe layout gemaakt. Meer veranderingen etc komen binnenkort ;)
|
Let op: Sommige dingen kunnen mijn mening bevatten. Je hoeft het hier niet mee eens te zijn, maar ik ga mijn mening ook niet aanpassen (tenzij je super goede argumenten hebt).
Welke programma's kan ik het best gebruiken voor het maken en coderen van mijn graphics?
Je hebt om plaatjes te bewerken verschillende programma's, die natuurlijk ook verschillen in kwaliteit ed. Op elke computer zit (zover ik weet), om te beginnen, wel paint of iets wat daar op lijkt. Waarschijnlijk weet je wel wat het is. Paint is een heel simpel tekenprogramma. Ik gebruik paint vaak voor het zoeken van coördinaten voor het coderen van mijn layouts. Naast paint kan je natuurlijk ook een programma downloaden (op eigen risico!). Een gratis programma is Gimp. Ik heb er zelf nog nooit mee gewerkt, maar een heleboel mensen gebruiken het. Je kan ook programma's kopen, zoals photoshop en paint shop pro. Ik gebruik photoshop 7.0 (ja een erg bejaarde versie) en het bevalt me heel goed ;) Voor als je je layout af hebt en wilt gaan coderen kan je het best gaan coderen in word of kladblok (start - bureau bureau assecoires - kladblok). Dan kan je je code opslaan zodat je het niet zomaar kwijt kan raken. Ik gebruik kladblok omdat dat een stuk sneller is dan word.
Hoe zit dat met verschillende browsers?
Je hebt best veel browsers. De meest gebruikte zijn toch wel (volgens mij :D) Internet Explorer (IE), FireFox (FF) en misschien nog Safari (S) en Opera (O). Je zal hier rekening mee moeten houden, want niet elke code werkt (hetzelfde) in elke browser. Bijvoorbeeld scrollbar codes werken alleen in IE. Dus wat je het beste kan doen is kijken in de verschillende browsers (ik kijk meestal alleen in FF en IE) of je code daar goed werkt.
Waar kan ik leuke neopets plaatjes vinden?
Over de hele neopets site zijn plaatjes verspreid, dus als je er een ziet die je leuk vind, kan je die het best gewoon opslaan of iets dergelijks. Er zijn een paar plaatsen waar je plaatjes kan vinden.
Achtergronden; neopet centraal » achtergronden.
Neogroeten; mijn account - neomail » neogroeten.
Schetsen; neopet centraal » achtergronden » schetsen.
TCG-kaarten; type bij zoeken bv een petsoort in en onder aan verschijnen de TCG-kaarten ;)
Je kan ook nog proberen te kijken bij de onderschrift wedstrijd (sleep het plaatje naar je adresbalk en verander steeds het cijfer in de URL om naar een vorige te gaan ;), oude plotten of de advent kalender.
Let op: Als je plaatjes van neopets gebruikt op een site buiten neopets moet je ze wel credits geven op elke pagina waarop je een van hun plaatjes gebruikt.
Wat mag ik verwijderen van mijn pagina? En wat niet?
Lookups: Je echte status moet zichtbaar zijn. Je mag het niet verwijderen of herschrijven (wat overigens ook op de "profiel bewerken" pagina staat). Je kan wel je Shop en neohuis weglaten. Wat erg handig is als je weinig ruimte hebt in je tekstvakken. Ook mag je over je schild een ander plaatje zetten. Zolang er maar niet zoiets opstaat als "2 jaar" of dat je gewoon een ander neopets schild gebruikt. En last but not least, er MOET navigatie op je lookup zijn. Je mag gewoon de header, de footer enzo verwijderen maar dan zal je de navigatie wel moeten maken met gewone linkjes of iets dergelijks.
Pet lookups: De echte stats moet zichtbaar zijn en er moet navigatie zijn.
Gilde layouts: En ook hier moet er navigatie zijn. Als je de sidebar verbergt moet er een manier zijn waarop leden (of toekomstige en niet leden) hun weg kunnen vinden in de gilde. Een "word lid" link en een "berichten bord" link kan je er dan het best op de layout zetten.
Winkels/Gallerijen: Waarschijnlijk voel je het al aankomen. Er moet enige navigatie zijn. En ook mag je die standaard dingen zoals de prijzen, de items, de "report-link" en je gebruikersnaam niet verbergen.
Petpagina's: Hiervan weet ik het niet zeker, maar ik zet hier voor de zekerheid altijd navigatie op. Ook de neocredits moeten blijven staan. Dat is dat riedeltje die automatisch onder aan je pagina verschijnt.
Hou je aan deze regels. Je account kan bevroren worden als je dit niet doet.
Fonts
Gebruik fonts waarvan je zeker weet dat bijna iedereen ze heeft, zoals arial, verdana, courier, tahoma en georgia. Waarom? Als iemand dat font niet in zijn computer heeft staan, ziet hij dat font ook niet. En dan zal je net zien dat dat heel jouw layout verpest. Gebruik ook het liefst een goed leesbare kleur. Zwart, donkergrijs op een lichte achtergrond en wit en lichtgrijs op een donkere achtergrond. Gebruik geen felle kleuren, daar krijgen sommige mensen hoofdpijn van. Mensen moeten je tekst namelijk wel kunnen, maar ook willen lezen. En je font moet natuurlijk wel op een goed leesbare grootte zijn ;) Dus niet te klein, maar ook weer niet te groot.
Achtergronden
Je hebt 2 soorten achtergronden. De opvallende en de niet opvallende achtergrond. Bij de opvallende achtergrond kan je veel patroontjes, plaatjes en felle kleuren gebruiken. Maar je houd de rest van je layout rustig, dus géén banner of alleen 1 met tekst ed. Anders word het geheel over de top. Bij een rustige achtergrond kan je een patroontje gebruiken, maar gebruik dan niet al te felle kleuren. Hierbij is het juist de bedoeling dat je wel een banner maakt. Ook hier moet je opletten dat het geheel niet te druk word. Goede rustige achtergrond kleuren (eigenlijk tinten) zijn grijs tot zwart. Die passen bij bijna elke layout.
Druk of niet? Fel of niet?
Wat maakt nou iets té druk of té fel? Daar zijn niet echt hele goede graadmeters voor. Zorg er voor dat als je felle kleuren gebruikt of ergens iets druks wilt, je dat in 1 of 2 plek(ken) doet. Maar hou het bescheiden. Dat ene punt trekt dan de aandacht van je layout. Waarom is een drukke layout slecht? Bezoekers worden overrompelt door je layout. De aandacht gaat óveral naartoe, je layout wordt één groot ongeorganiseerde boel. En dat is nou een van de belangrijkste dingen in een layout: samenhang. Te felle kleuren hebben hetzelfde effect plus het feit dat het mensen soms hoofdpijn bezorgt. Dus hou je layout een beetje rustig.
Ik ga jullie nu kort uitleggen (of meer een code gegeven) hoe je een lookup kan coderen. Met deze code krijg je lookup met een "about me"-vak en een vak voor je stats en daarboven komt een banner/header. Hier rechts zie je een voorbeeld van hoe een heel simpele layout eruit kan gaan zien (klik erop om naar de lookup te gaan ;) Met deze code kan je bijna alle kanten op. Experimenteer, wees origineel. Maar vooral veel succes met het maken en vooral coderen van je layout ;D!
Ik ga je deze code in stappen uitleggen. De code van de layout heb ik in stukken gedeeld, je moet ze dus dezelfde volgorde als ik aanhouden. Plak elk stuk code achter elkaar in een kladblok- of wordbestandje en pas als je klaar bent plak je hem hier.
Omdat ik de code in stukjes heb gehakt, krijg je nogal veel style-tags. Ik zal erbij zetten welke je kan verwijderen ;)
1. We beginnen de code met een stuk waar je NIKS aan mag veranderen. Tenzij je toch je shop of je neohome erop wilt hebben. Wil je je shop erop? Verwijder dan #usershop, met de comma dus! Wil je je neohome erop? Verwijder dan ,#userneohome ook met de comma ;)
Bij dit stuk moet je wel het stuk /style / (plus de driehoekhaakjes ;) verwijderen.
2. Het volgende stuk code is voor je tekst. Ik zal nu even uitleggen wat elke regel betekent.
Regel 1. Dit is het stuk code voor het font van je hele pagina.
Regel 2. Dit stuk codeerd voor de linkjes.
Regel 3. Dit stuk codeerd voor de linkjes, maar dan voor als je er overheen gaat met je muis.
Regel 4. Dit is voor dikgedrukte tekst.
Regel 5. Dit is voor schuingedrukte tekst.
Regel 6. Dit gaat over het font van de headers van de modules en die je kan maken met de code h1.
Tussen de { en } staan allerlei termen. Die er voor staan zijn de namen van de onderdelen waar je voor codeert en er tussen staat wat je ermee doet. Dus dat is wat je moet aanpassen.
Font:8pt arial Dit regelt de grootte en het lettertype van je tekst. Ik zou dit voor de linkjes en de tekst van je hele pagina hetzelfde houden. Dus de linkjes even groot en hetzelfde font als je gewone tekst. Verander arial in het font dat jij wilt en 8 in de grootte die jij wilt. Let op! 8pt is níét hetzelfde als 8px. pt is groter dan px, hou het tussen ong. 8 en 12.
color:#000000 Dit regelt de kleur van je tekst. Bij alle 6 de regels. Je kan dit vervangen door je eigen kleur. Hou de tekst voor de hele pagina in een neutrale kleur. Maar de rest kan lekker fel ;) Je kan een hex-code gebruiken of een uitgeschreven. Hex is met zon hekje (#) en daarachter 6 cijfers en/of letters, een uitgeschreven is zoals red. Zoek hiervoor een lijst met de uitgeschreven- of hex-kleuren of gebruik een eyedropper tool (dat zit op sommige fotobewerk programma's. Dan klik je op een stukje van een plaatje en dan krijg je direct de hex-code van dat stukje van je plaatje).
Je kan hier nog meer tekst effecten aan toevoegen. Hierover later misschien nog meer ;)
3. De achtergrond. Deze code is een ingekorte versie van een hele lange. Tussen de "( )"-haakjes staat de url van jouw achtergrond. Je moet die er nu staat dus vervangen met de jouwe. Daarna krijg je repeat-y. Dit betekend dat de achtergrond zich herhaalt, in de y-richting. Denk maar aan een assenstelsel, daar heb je een x- en een y-as. De x-as loopt horizontaal en de y-as loopt verticaal. Zo gaat dat dus ook met de achtergronden. Als je wilt dat je achtergrond zich horizontaal herhaalt moet je de y vervangen met een x. Repeat-y gebruik ik het meest.
Na repeat-y komt er een hex-code. Dit gaat over de achtergrond die direct onder je herhalende plaatjes achtergrond zit. Aangezien mijn achtergrond niet de hele breedte vult is de kleur die ik heb gebruikt het zelfde als de rechterkant van mijn achtergrond zodat 'ie mooi doorloopt.
4. Dit stuk zorgt voor het positioneren (en maken) van tekstvakken en je banner. Het stuk van #banner gaat uiterraard over je banner. Hier moet je niks aan te veranderen! Het stuk #about gaat over het linkertekstvak en het stuk van #stats gaat over het tekstvak waar je stats in komt. Wat betekenen de termen?
Position:absolute Dit geeft aan hoe het positioneren geregeld is. Dus de positie is absoluut :D Sorry, maar ik kan dit niet goed uitleggen, plus het is niet zo belangrijk om te weten waarom, het is gewoon altijd nodig bij gewoon positioneren!
top:..px Dit geeft aan hoe veel pixels er zijn tussen het aller bovenste stukje van het scherm en je tekstvak.
left:..px Dit geeft aan hoe veel pixels zich bevinden tussen het meest linker stuk van je scherm en je tekstvak.
width:..px Voor de breedte van je tekstvak.
z-index:.. Geen px achter er achter zetten! Dit zou je moeten zien als een flat. De z-index geeft aan op welke verdieping het tekstvak zich bevind. Zo kan je dingen dus georganiseerd over elkaar plaatsen.
5. Weer een stukje om vanaf te blijven. Deze keer echt niks aanpassen!! Je moet alleen wel het stuk style / (met de driehoekshaakjes) verwijderen!!!