Share
Pixelillustraties zijn ideaal voor het maken van computerpictogrammen, isometrische afbeeldingen en zelfs hele scènes. Ze kunnen snel en eenvoudig worden gemaakt met Photoshop met een paar snelle aanpassingen aan de voorkeursinstellingen.
Het enige nadeel is echter dat de pixelkunst er het beste uitziet wanneer elke pixel met de hand is geplaatst, in tegenstelling tot het gebruik van een Photoshop-filter. Dat klopt, met de hand geplaatst - Ik weet dat dit een beetje gek klinkt, vooral wanneer sommige pixeleigenschappen duizenden pixels bevatten. Maar zonder de handplaatsing kan uw pixelkunst eruitzien als een slechte Lo Res-afbeelding, dus pas op!
Ik denk dat een goede vuistregel voordat je begint, is dat je je creatie duidelijk moet zien als een groep van verschillende vierkante gekleurde stenen, maar als je dan je ogen in de ogen kijkt en je ogen vervaagt, kun je het als een beeld zien. Stel je voor dat je een tegelmozaïek maakt, alleen heb je geen voeg nodig.
Hieronder staat een compleet stuk pixelillustraties, we zullen enkele van de meer basale stukken in dit werk maken.
Oké laten we ons opstellen voor tekenen. Voor het geval je geen exemplaar van Photoshop hebt, zijn er enkele gratis speciale Pixel-tekenprogramma's beschikbaar om gratis te downloaden:
Ik heb met beide programma's gespeeld, maar kwam terug naar Photoshop omdat ik gewend ben aan de toetsenbordopdrachten.
Als je het penseel op maar liefst 9 pixels hebt gebruikt in plaats van 1, krijg je anti-aliasing en dat zal het hard-edge pixeleffect bederven. Dus blijf bij 1 pixel. "Houd het mager, hou het maar gemeen", zoals mijn moeder altijd zei.
Wanneer uw pixeltekening op 100% (werkelijke grootte) wordt bekeken, is het potlood op 1 pixel breed erg klein, waardoor u het wellicht moeilijk kunt zien en manipuleren. Een idee is om het beeld te vergroten tot 800%, zodat u kunt zien wat u aan het doen bent. Ik heb vaak een tweede venster geopend in Photoshop met dezelfde schermweergave van 200%, zodat ik snel kan zien hoe mijn tekening van dichtbij en ook van iets verder weg op hetzelfde moment kijkt.
We kunnen ons werkdocument opslaan als een PSD-bestand en later exporteren voor webgebruik als een GIF-bestand. We kunnen het bestand daarna ook vergroten en veranderen in een TIF voor CMYK-afdrukken.
Lean & Mean
Oké, laten we proberen iets van dit open boek te tekenen. Trek met het gereedschap Pen rond de rand om je zwarte contour te maken. Vul vervolgens de platte kleuren van de pagina en het leesteken in.
Creëer het idee van tekst op de pagina met enkele enkele pixellijnen. Zie hoe we een lichte knik in de lijn plaatsen om de indruk te wekken van een lichte kromming op de pagina.
Voeg ten slotte enkele hoogtepunten toe in het midden van de pagina's en de zijkant van de bladwijzer. Een leuk detail is een enkele pixel-highlight onderaan de hoek van elke pagina, het geeft slechts een hint van een paginarand in plaats van een solide blok.
Zodra je de basis hebt van contouren, kleuren, hooglichten en arcering, kun je proberen andere eenvoudige vormen te bouwen.
Pixelpictogrammen zoals die hierboven kunnen worden ontworpen als een reeks lijnen die slechts 90º ten opzichte van elkaar zijn en heel veel vierkanten en rechthoeken zijn. Soms hebt u echter een regel in een hoek nodig.
Iets om in gedachten te houden, is dat hoekige lijnen er het best uitzien als ze een regelmatig patroon zijn. Als ze onregelmatig zijn (zoals die hieronder worden getoond), kunnen ze hobbelig en ruw lijken als ze klein worden bekeken. Het tweede voorbeeld hieronder is veel gelijkmatiger isometrische hoeken, die er geweldig uitzien met pixeltekeningen, maar het is niet de 30º "iso" -hoek die je gebruikte in de technische tekenklasse - het is eigenlijk iets dichterbij 26,5º. 30º geeft helaas een klonterige lijn op 100%. Als je een lijn maakt die regelmatig 2 punten over en 1 punt omhoog loopt, krijg je 26,5º.
Zullen we proberen iets anders te tekenen dat een beetje meer geometrisch is en meer van die lijnpatronen gebruikt?
De onregelmatige lijn ziet er klonterig uit voor 100%.
Soepele lijnpatronen onder verschillende hoeken.
De lijnen in de lengte zijn eenvoudig, we weten nu hoe we die moeten doen, maar hoe zit het met die ronde uiteinden?
Deze twee zijn normale patronen maar veranderen van brede horizontale lijnen naar vierkanten en vervolgens naar verticale lijnen. Het ziet er een beetje rafelig uit maar als je je ogen laat vervagen, ziet het er wel goed uit!
De curve in de rechterbovenhoek van het log-einde is ook het omgekeerde patroon van het gedeelte linksonder. Ik tel vaak de pixels of onthoud bepaalde combinaties. De pixelcombinatie op de cirkel is ...
Een beetje lastig om in eerste instantie goed onder de knie te krijgen, zoals het gebruik van beziercurves in Illustrator, maar je krijgt snel een "gevoel" ervoor. De lengte van het logboek is eenvoudig: we gebruiken alleen het 2-op-1-systeem en maken het log zo lang of kort als we willen.
Kleinere concentrische cirkels aan het uiteinde geven een mooi belpatroon en sommige gebieden met donkerdere arcering aan de onderkant van het log geven het wat diepte. We geven de log een vlakke dennenkleur om te beginnen, en om diepte te creëren, kunnen we dithering maken door pixels van contrasterende kleur aan weerszijden van onze hoge licht / lage lichtlijnen te plaatsen.
Je kunt de patronen opbouwen en ze complexer maken. Maar voorzichtigheid is geboden: hoe realistischer en lastiger u bent, hoe vager het beeld kan worden als het op kleine schaal is gereproduceerd.
Ik heb nog een paar willekeurige pixels ingevoegd op log # 3 omdat ik wilde dat het een ruwe look kreeg en een beetje contrasteerde met de eekhoorn.
Voor de laatste boomstam heb ik gewerkt in een gebied van ontschorst schors en een kleine tak. Ik vond het het beste om eerst een gebied of stijl in te vullen en er vervolgens meer detail in te verwerken. Ik denk niet dat ik het gestripte boombastlog met ditheringpatroon van de grond af had kunnen trekken - in plaats daarvan bleef ik gewoon lagen boven de lagen toevoegen. Eenvoudige stadia werken het beste!
Laten we verder gaan met iets onregelmatigers, zoals een eekhoorn die op onze log staat. Voor zoiets gecompliceerds, is het het beste om te beginnen met potlood en papier.
Eerst tekende ik een isometrisch vierkant op mijn pagina om de juiste afmetingen te krijgen. Omdat we dit specifieke voorbeeld gebruiken voor redactionele doeleinden, heb ik een foto gebruikt ter referentie. Dan begin ik te schetsen. Ik besteed bijzondere aandacht aan de hoek van beide oren en voeten, omdat ik wil dat ze de isometrische lijnen volgen.
Zoals je kunt zien, is het detail zeer minimaal - ik wil alleen de basisvorm krijgen en de juiste hoeken eerst uitwerken. We doen de rest van het werk in Photoshop.
Breng de schets naar voren, trek een nieuwe laag aan en bedenk de dekking zodat je de pixels ziet die je op het punt staat duidelijk te maken. Het is geen vaste regel, maar ik vind pixeltekeningen het mooist als ze zwarte contouren hebben.
Hier ga ik rond mijn Eekhoorn met de potloodtool die de zwarte contour creëert. Een ding dat moet worden vermeden is klonteren waar omtrekpixels elkaar aan meer dan één kant raken. Als u een extra vierkant tekent, verwijdert u het gewoon met uw gumtool (wordt ook op 1 pixelbreedte gehouden, zie de rode cirkel). Het ziet er netter uit en uw publiek zal u er dankbaar voor zijn.
Het ziet er nog steeds een beetje rommelig uit maar het zal vorm krijgen! Keylijnen in de illustratie helpen ook om het een gedurfde look te geven, maar zorg ervoor dat ze een donkere kleur hebben die niet zwart is om contrast te maken. Noem me een radicale, maar ik ging met bruin op deze.
Als de vorm compleet is, vul dan het binnengebied met een mooie middentoonkleur (zachtbruin) en gebruik eventueel een lichte kleur om enkele hoogtepunten naar voren te brengen.
De zwarte omtrekregel is niet moeilijk en snel, ik heb wat zwarte keylijnen achter de voorkaak en de poot gelaten omdat het moeilijk werd om te zien wat er aan de hand was.
De hand plaatsen, verwijderen, wijzigen van pixels is waar de vaardigheid komt. Soms. Maar als je het eenmaal onder de knie hebt, kun je bijna alles tekenen - je hebt alleen wat geduld nodig. Ik hoop dat dit helpt, en inspireert je om geweldige eigen werk te maken!
Hier zijn enkele bronnen voor verder lezen van pixels:
Abonneer u op de Psdtuts + RSS-feed voor de beste Photoshop-tuts en -artikelen op internet.
Accentsconagua