welkom guest

Op 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.

  • Niks, maar dan ook NIKS, mag gekopieerd worden uit deze gids. Dus als je een eigen guide maakt, gebruik je niks uit de mijne.
  • De codes die ik voor jou heb gemaakt mag je alleen voor persoonlijke layouts gebruiken. Dus geen premades.
  • Verwijder mijn credits niet, dat is stelen en dat is tegen de regels.
  • Voor photoshop technieken hoef je me echter niet te creditten ;)

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 ;)
Nienke.

nieuws & updates

21.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 ;)



Info, tips, regels etc.

Als je graphics gaat maken moet je natuurlijk wel met een paar dingen rekening houden en weten. Ik ga hier een samenvatting geven van een paar dingen die je moet weten. Je kan dit stuk natuurlijk altijd overslaan als je denkt dat je het al weet!

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.


Do's en Don'ts

Een mooie layout is belangrijk. Mensen zijn namelijk geneigd om super snel al te hebben besloten of ze jouw layout wel of niet mooi vinden. De hersenen maken die keuze direct als je nog maar een glimp van de layout hebt gezien. Hier volgen een paar tips over wat je wel en niet moet doen volgens mij!

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.

ONDER CONSTRUCTIE ;'D

Gebruikersprofiel coderen

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!!!

6. Hier begint het stuk buiten de style-tags. Dit stukje is voor je banner. Het id="banner roept de info op die je net bij #banner hebt neergezet, zie je? ;) Vervang mijn url met die van jou!

7. Nu het "about me"-tekstvak. Om te beginnen zie je dat ik met het id="about de info van het tekstvak #about oproep. Daarna zie je align="center. Wil je de tekst gecentreerd? Laat het center dan center. Wil je de tekst links (gecentreerd? Help, hoe heet dat XD)? Verander dan het center in left. En ja, je raad het al. Wil je de tekst rechts gedingest, verander dan center in right.

Daarna krijg je de navigatie, die je natuurlijk zo laat. En daarna het stuk waar je wat over jezelf kan schrijven. Een nieuwe header maak je door het h1 gedeelte te kopieren. Verwijder de div niet, dan krijg je een vreemde lookup ;P

8. En dan nu de grote finale! Niks veranderen of verwijderen!

Als je nu alles goed hebt gedaan ziet je code er ongeveer zo uit:

Ik hoop dat dit je heeft geholpen bij het coderen van een lookup. Maar vooral hoop ik dat je veel plezier hebt beleefd bij het maken ervan ;) Als je nog vragen hebt kan je me altijd mailen!!


Blenden

Je ziet soms van die layout waar er allemaal plaatjes in elkaar overlopen. Nou dat is dus blenden. Een voorbeeld van een blend is dit:

(sleep het plaatje naar je adresbar om het op ware grootte te bekijken)

Het blenden van plaatjes is ideaal als je een plaatje hebt dat te klein is om alleen te gebruiken voor een layout.
Ik ga nu 2 manieren van blenden in photoshop uitleggen. Ik gebruik een oude versie, wat betekend dat wat ik gebruik als het goed is ook ondersteund word in nieuwere versies!!

Blenden via "lighten
Om te beginnen nemen we 2 plaatjes. Ik neem deze 2:

Open een nieuw bestand van 800x600 (standaard maat) en zorg ervoor dat je een transparante achtergrond hebt!!

Plak beide plaatjes in het bestand op 2 verschillende layers. Zorg ervoor dat de plaatjes elkaar voor een deel overlappen:

Zet nu de bovenste layer op Lighten:

Nu gaan we gummen. Klik op het gum icoontje of druk gewoon simpelweg op "E" op je toetsenbord. Nu neem je een ronde brush met een hardness van 0% en ongeveer een grootte van 100/200:

Gum nu op de bovenste layer een deel van de hele rechter rand weg zodat er geen lijn meer zichtbaar is. Doe dat op de 2e layer ook maar dan met de hele linkerrand:

Nu kan je het plaatje nog bewerken. Speel met de kleuren, doe er nog een texture overheen of doe er wat brushes bij (niet te veel!!!!)
Mijn eindresultaat:




Blenden via layer masks
Ik neem weer 2 plaatjes:

Net zoals bij het blenden via lighten plak je de plaatjes in aparte layers. En daarna zorg je ervoor dat ze elkaar deels overlappen. Voor een mooier effect spiegel ik het plaatje met Garin (CTRL+T, rechtermuisklik flip horizontal). Nu plaats je over beide layer een layer mask:

Selecteer de eerste layer en klik op het aangegeven knopje, doe dat ook bij de tweede.
Nu gaan we de gradient tool gebruiken, die vind je bij het emmertje of je drukt gewoon op "G" op je toetsenbord.

Zorg er nu voor dat de layer mask van de bovenste layer geselecteerd is door er simpelweg op te klikken. Je moet wel echt zwart gebruiken voor je gradient. Maak nu van rechts naar links een kleine gradient. Het is goed als je de rand niet meer kan zien en de plaatjes goed in elkaar overlopen.

Nu kan je hem nog bewerken net zoals bij de andere. Wat ik nu niet ga doen :3


Wat is nou het handigst?
Blenden met masks is opzich wel makkelijk, maar ik vind het gedoe met al die layer masks zo irritant. Wel een voordeel is is dat je plaatje wel intact blijft. Er word niks veranderd en als je later iets ongedaan wilt maken dan kan je gewoon de layer mask aanpassen.

Blenden met lighten is simpel en snel. Ook ben je in staat om vormen te maken die je niet kan maken met gradient. Of die wel kunnen maar dan ben je veel sneller klaar. Wel is dat als je een stuk van je plaatje haalt, je het echt kwijt bent. Dus als je niet zeker bent sla je layout dan alvast op onder psd natuurlijk of dublicate je layers.

Natuurlijk kan je deze 2 manieren van blenden ook combineren. Met een zwarte ronde brush (met hardness 0) op een layermask kan je ook blenden. Dit kan soms heel handig zijn ;)


Mirror effect

Ik vind persoonlijk het mirror effect een heel leuk effect. Oke het is wat moeilijker toe te passen in layouts maar als het lukt is het meestal wel mooi. Ik ga nu in een paar stappen laten zien hoe je dat effect toepast op een plaatje!
We zoeken natuurlijk eerst weer een plaatje:

MEEP?

Open een bestand dat 2x de hoogte heeft van je plaatje, bij mij is dat dus 360x600. Zorg ervoor dat je met een witte achtergrond neemt. Plak je plaatje in je bestand en sleep hem naar boven, zodat het helemaal tegen de bovenste rand zit.
Nu dublicate je de layer door met je rechter muisknop een klik te doen in het layer venstertje op je layer.

CTRL+T en dan rechtermuisklik in je plaatje. Kies "Flip vertical" en druk op het icoontje. Sleep het plaatje dan helemaal tegen de onderste rand aan. Als het goed is is nu je hele werkplek opgevuld met de 2 plaatje die precies gespiegelt tegen elkaar aan zitten. Je moet geen achtergrond meer zien!! Kijk nog eens naar je plaatje. Is het licht? Neem dan wit. Is het donker? Neem dan zwart. Zit je plaatje daar tussen in? Neem grijs. Ik neem dus zwart voor mijn achtergrond. Kleur de "background"-layer zwart in mijn geval.
Nu gaan we weer verder met onze gespiegelde layer. Zet de opacity van de layer op 50%.

We gaan nu blenden met een layer mask. Zie hiervoor de vorige tutorial. Maak een layer maks (op nog steeds de gespiegelde layer) en maak een gradient van onder naar boven, tot bijna waar de plaatjes elkaar raken.

Maak een nieuwe layer (CTRL+Shift+N) en selecteer op nieuw de gradient tool. We nemen nu alleen de "Reflected Gradient" .

De kleur die je moet hebben is wit. Nu maak je in het midden van je plaatje dus waar de 2 plaatje elkaar raken een kleine gradient.

Zet deze layer nu op 25% opacity.
En gefeliciteerd, je bent klaar :D

Letop: Zie deze opdracht als een oefening. Begin nu opnieuw en begin eerst met het versieren van je plaatje voordat je je plaatje dubliceert en spiegelt. Zo is je mirror nog beter!!

Mijn eindresultaat:

Haha, hij is een beetje raar geworden, iets te donker ;P


Layout: faerie bubbles

Okay ik ga een layout maken. Ik weet nog helemaal niet watvoor, óf hoe het uitpakt. Misschien zeg ik wel bah, deze vind ik niet mooi. We zien wel. Ik ga jullie laten zien wat voor technieken ik gebruik en hoe ik ze gebruik. Ik laat niet elke stap zien, dus je moet wel wat ervaring hebben met photoshop. Misschien pak ik het niet altijd even proffecioneel aan, maar het gaat tenslotte ook om het resultaat!!

Om te beginnen zoek ik hier een plaatje om te bewerken. Ik neem deze:

Ik open het plaatje in een bestand van 800x600px. Ik verklein het 80% door de sneltoets CTRL+T te gebruiken. Verander de 100 bij de H en de W in 80 (of hoe wat groot genoeg voor jou lijkt). De H en W moeten gelijk zijn. Klik op het vinkje rechtsboven in om door te gaan.
Dubliceer de layer (CTRL+J) met het plaatje en maak de onderste even onzichtbaar door op het oogje te klikken. Ik selecteer nu de magic wand tool (dat toverstokje) en ga nu naar de kopie van het plaatje. Ik zet de achtergrond ook even op onzichtbaar_ Voor we de blauwe achtergrond deels gaan verwijderen kijken we eerst even of de tolerance van de magic wand tool op 15 staat. We willen geen lelijke randjes!!

Ik selecteer de aangegeven delen met de lasso tool en delete ze. Klik met je rechtermuisknop op de layer (in het layervakje) van het gekopieerde plaatje (waar je nu dus mee bezig bent) en kies de optie blending options. Vink het vakje stroke aan en klik op OK. Je kan nu precies zien waar je een paar stukjes bent vergeten te wissen :D Selecteer nu de eraser tool (gummetje) en ga de ongewenste stukjes weggummen. Het vergt misschien wat oefening voordat je helemaal goed met de eraser tool kan werken. Je hebt een best vaste hand nodig. Als je klaar bent klik je weer met je rechtermuisknop op de layer (weer in het layervakje) en kies je de optie "clear layer style". Maak de andere twee layers weer zichtbaar en selecteer nu de Rectangular Marquee Tool (die vierkante selecteer tool). Maak een nieuwe layer tussen je background en je plaatje. En selecteer een stuk dat precies onder je plaatje zit en doorloopt tot onderaan_ Dat vul je met wit.

Klik nu in het layervakje op de layer van je tekstvak met je rechtermuisknop. Kies vervolgens blending options. Vink stroke aan, deze keer gaan we wel wat instellen. Kies als kleur wit en size 10. Klik op OK. Nu maak je een nieuwe layer, boven die van je tekstvak. Terwijl je op die nieuwe layer bent klik je op het lege hokje in je layer vakje voor de layer van je tekstvak. Ze zitten nu aan elkaar gekoppeld. CTRL+E en ze worden samengevoegd. Waarom doe ik dat nou? De rand is er nu, maar hij is deel van je tekstvak geworden... de layerstyle is weg :)
Neem de pencil tool (zit bij de brush tool) en maak de hoekjes van je tekstvak netjes vierkant. YAY :D

Nu gaan we beginnen met het echte werk. We gaan textures gebruiken. Een paar van mij kan je hier vinden. Eerst neem ik deze:

Kopieer de texture, ga naar je bovenste layer en doe dan CTRL+C. Zet je layer op Hard Light met een opacity van 80%. Volgende texture:

Je doet hiermee hetzelfde, alleen zet je nu de layer op Overlay met opacity 70%. Next:

Deze zet je ook op overlay, opacity 75%.

Nu gaan we naar de layer van je eerste plaatje. Dus niet de ene waar je stukken van had verwijderd!! Maak een layer mask. Het knopje daarvoor zit op je layer venstertje, onder_ de 2e van links. (zie blenden met layer mask). Selecteer de gradient tool en verwijder het onderste stuk. (voor meer uitleg, zie blenden met layer mask!!) Rechter muisklik op je layer mask en kies apply layer mask. Nu dubliceer je beide plaatjes layer (de on- en bewerkte layer) en die voeg je samen. De andere 2 (die nog los zitten) maak je onzichtbaar door op het oogje te klikken. Houd nu de ctrl toets ingedrukt terwijl je met je linkermuisknop op de layer van het samengevoegde plaatje klik. Als het goed is word je plaatje nu geselecteerd. CTRL+I en ga naar de eerste layer met een texture. Klik op delete en doe dat ook bij de andere 2 texture layers. Nu heb je ongeveer zoiets als dit:

Dit is een mooie basis layout. Je kan zelf kijken wat je hier mee doet. Ik ga verder werken.

Selecteer nu het plaatje, niet het wit en het blauw, met de rectangular marquee tool. En doe CTRL+shift+C, ga naar de bovenste layer en plak daar (CTRL+V) het plaatje. Krimp het plaatje met CTRL+T in de width (w) en height (w) 70%. Doe daarna rechtermuisknop op het plaatje en kies "Flip horizontal". Klik op het vinkje om de transformatie te voltooien. Plaats het plaatje dan zo:

(die rode lijn staat er omdat je dan beter kan zien hoe het plaatje staat, die hoort er dus NIET bij). Selecteer de eraser tool en neem een brush met een softe kant en een diameter van 200px. Wis eerst de bovenste, onderste en rechter rand van het plaatje zodat het mooi overvloeid. En wis daarna de stukken waarvan jij ze niet mooi vind. Bij mij ziet het er dan zo uit:

Je kan hier aan het stippellijntje zien hoe ik ongeveer heb gewist.

Kopieer nu je hele plaatje IN het tekstvak (zie hoe ik het heb gedaan op het plaatje hier onder_ ) door het te selecteren en dan CTRL+shift+C te doen (zorg er wel voor dat je op een "zichtbare" layer bent). Plak nu (met CTRL+V of Edit-Paste) de copy van het plaatje in de selectie (gewoon niet aan de selectie komen :). Doe dit nog een keer en maak deze layer onzichtbaar door op het oogje te klikken (deze hebben we later nog nodig, het maakt even niet uit waar die komt. Om even dingen duidelijk te maken noem ik deze layer SJAAK :D). Maak het plaatje (de eerste kopie) zwart-wit met CTRL+shift+U. Ga dan naar Image-Adjustments-Posterize en vul 20 in bij levels. Nu ga je naar Filters-Blur-Gaussian Blur en vul bij radius 5,2 in. Zet deze layer nu op overlay met een opacity van 22%.


dit plaatje is gekrompen, sleep het naar je URL balk voor de ware grootte

Maak nu een nieuwe layer. Vul deze met de paint bucket tool met de kleur #04004f en zet deze layer op Exclusion met een opacity van 31%. Maak nu nog een nieuwe layer en deze vul je met de kleur #FFEA00. Deze layer zet je op Hard Light met een opacity van 12%. Nu maak je er nog een :) Deze vul je met #00E4FF en zet je op Lighten met opacity 57%.

Mijn layout ziet er nu zo uit:

Sleep nu in het layer menu de kopie (SJAAK) die je daarnet (2 stukjes tekst terug) had gemaakt en op onzichtbaar had gezet helemaal naar boven. (hij moet echt helemaal bovenaan staan). Zet deze layer nu op color.

Nu gaan we nog een beetje met de kleuren spelen :) Ga naar Layer-New Adjustment Layer-Selective Color en vul de vakjes in zoals hier onder in de plaatjes is gedaan.


dit plaatje is gekrompen, sleep het naar je URL balk voor de ware grootte

Zet deze layer op Saturation.
Ga nu naar Layer-New Adjustment Layer-Color Balance en vul dat ook net zo in als in de plaatjes hieronder.


dit plaatje is gekrompen, sleep het naar je URL balk voor de ware grootte

Ondertussen zal je je vast afvragen wat ik nou allemaal aan het doen ben met de kleuren. Nou dat weet ik ook niet :) Op dit moment heb ik de layout nog niet af ^^. Ik speel altijd net zolang met de kleuren tot ik het mooi vind.

Tijd om deze layout af te maken :)
Maak een nieuwe layer, vul deze met #C99300 en zet deze op Multiply, opacity 13%. Maak nog een nieuwe layer vul deze met #C90089 en zet deze op Color, opacity 40%. En dan nog een nieuwe layer die je vult met #C90089 en op Lighten zet met opacity 16%.

Zoek nu in je layer pallet terug naar SJAAK. (de kopie die je op color had gezet). Duplicate deze layer en sleep de kopie weer helemaal boven alle andere layers. Zet de layer op Luminosity (opacity: 100%). Ga nu naar Filters-Sharpen-Sharpen. Mijn layout ziet er nu zo uit:

De layout is nu zo goed als klaar. Als je wilt kan je nog wat tekst toevoegen, maar dat hoeft natuurlijk niet :) Mijn eindeindeindresultaat zet ik er zo snel mogelijk op, nu ga ik oppassen :P





NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2009.
® 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