Pixel-illustrasjoner er gode for å lage datamaskinikoner, isometriske bilder og til og med hele scener. De kan gjøres raskt og enkelt ved å bruke Photoshop med et par raske tweaks til preferanseinnstillingene.
Den eneste ulempen er imidlertid at pikselkunst ser best når hver piksel er plassert for hånd i motsetning til å bruke noen Photoshop-filter. Det er riktig, plassert for hånd - Jeg vet at dette høres litt gal, spesielt når noen pixel scener har tusenvis av piksler i dem. Men uten håndplasseringen kan din pikselkunst se ut som et dårlig Lo Res-bilde, så pass opp!
Jeg tror at en god tommelfingerregel før du begynner, er at du skal kunne se din opprettelse tydelig som en gruppe med forskjellige fargede kvadrater, men hvis du skvaller og slør øynene dine, kan du gjøre det som et bilde. Tenk deg at du lager en flisemosaikk, bare du trenger ikke noen fugemasse.
Nedenfor er et komplett stykke pikselkunstverk, vi skal lage noen av de mer grunnleggende brikkene i dette arbeidet.
OK la oss sette opp for tegning. Bare hvis du ikke har en kopi av Photoshop, er det noen gratis dedikerte Pixel tegneprogrammer tilgjengelig for gratis nedlasting:
Jeg har hatt en lek med begge programmene, men kom tilbake til Photoshop fordi jeg er vant til tastaturkommandoene.
Hvis du brukte børsteverktøyet på et stort 9 piksler i stedet for 1, vil du få anti-aliasing, og det vil ødelegge den kantenpikselvirkningen. Så hold deg til 1 piksel. «Hold det magert, vær så snill,» som moren min pleide å si.
Når pikseltrekket er sett på 100% (faktisk størrelse), er blyantverktøyet på 1 piksler stort, så det kan hende du finner det vanskelig å se og manipulere. En ide er å forstørre visningen til 800% slik at du kan se hva du gjør. Jeg har ofte et 2dre vindu åpent i Photoshop med samme skjermvisning på 200%, så jeg kan raskt se hvordan tegningen min ser nært og også litt lenger unna samtidig.
Vi kan lagre vårt arbeidsdokument som en PSD-fil og eksportere til web-bruk senere som en GIF-fil. Vi kan også forstørre filen etterpå og bli til en TIF for CMYK-utskrift.
Lean & Mean
OK, la oss ta en tur på å tegne noe som denne åpne boken. Med pennverktøyet tegner du rundt kanten for å lage din svarte oversikt. Deretter fyller du i de fargene på siden og bokmerket.
Lag ideen om tekst på siden med enkelte enkeltpiksellinjer. Se hvordan vi legger en liten kink i linjen for å gi inntrykk av en liten kurve på siden.
Til slutt legg til noen høydepunkter nedover midten av sidene og siden av bokmerket. En fin liten berøring er en enkelt pixel høydepunkt nederst ute hjørne av hver side, det gir bare et snev av en sidekant i stedet for å være en solid blokk.
Når du har det grunnleggende om skisser, farger, høydepunkter og skygge, kan du prøve hånden din ved å bygge andre enkle former.
Pixel-ikoner som de ovenfor kan utformes som en serie linjer som bare er 90º til hverandre, og er veldig mange firkanter og rektangler. Av og til kan det hende du trenger en linje i en vinkel.
Noe å huske på er vinklede linjer ser best ut når de er et vanlig mønster. Hvis de er uregelmessige (som de som er vist nedenfor), kan de virke klumpete og røde når de ses små. Det andre eksempelet nedenfor er mye jevnere isometriske vinkler, som ser bra ut med pikseltrekk, men det er ikke den 30º "iso" vinkelen du brukte i Teknisk tegningsklasse - det er faktisk noe nærmere 26,5º. 30º gir dessverre en klumpet linje på 100%. Hvis du lager en linje som regelmessig løper 2 poeng over og 1 poeng opp, får du 26.5º.
Skal vi prøve å tegne noe annet som er litt mer geometrisk og bruker flere av disse linjemønstre?
Den uregelmessige linjen vil se klumpet på 100%.
Glatte linjemønster i forskjellige vinkler.
Linjene nedover lengden er enkle, vi vet hvordan de skal gjøres nå, men hva med de runde endene?
Disse to er vanlige mønstre, men endrer seg fra brede, horisontale linjer ned til firkanter og deretter til vertikale linjer. Det ser litt tynt ut, men hvis du slør øynene dine, ser det riktig ut!
Kurven øverst til høyre på loggenden er også det bakre mønsteret til bunnen til venstre. Jeg teller ofte pikslene eller husker visse kombinasjoner. Pikselkombinasjonen på sirkelen er ...
Litt vanskelig å få tak i i begynnelsen, som å bruke skarpere kurver i Illustrator, men du får snart en "følelse" for det. Lengden på loggen er enkel: Vi bruker bare 2 langs 1 opp systemet og gjør loggen så lang eller kort som vi vil.
Mindre konsentriske sirkler på enden gir et fint ringemønster, og noen områder med mørkere skyggelegging på bunnen av loggen gir det litt dybde. Vi gir loggen en flatt firfarge for å starte, og for å lage dybde kan vi lage dithering ved å plassere piksler med kontrastfarge hver side av våre høyt lys / svakt lys linjer.
Du kan bygge opp mønstrene og gjøre dem mer komplekse. Forsiktig skjønt - jo mer realistisk og vanskelig du prøver å få fuzzier bildet kan vises hvis det er bestemt å reprodusere i liten størrelse.
Jeg kastet inn noen få tilfeldige piksler på logg nr. 3 som jeg ville ha det grovt utseende og kontrast litt med ekornet.
For den endelige loggen jobbet jeg i et område med strippet bark og en liten gren. Jeg fant det best å fullføre ett område eller en stil først og deretter jobbe mer detaljert med det. Jeg tror ikke jeg kunne ha trukket den strippede barkloggen med dithering mønster fra bunnen av - i stedet holdt jeg bare lag lag over toppen av lagene. Enkle stadier fungerer best!
La oss bevege oss på noe litt mer uregelmessig, som en ekorn å sitte på vår logg. For noe komplisert som dette, er det best å starte med blyant og papir.
Først trakk jeg et isometrisk torg på siden min for å få de riktige dimensjonene. Siden vi bruker dette spesielle eksemplet for redaksjonelle formål, brukte jeg et fotografi som referanse. Så begynner jeg å skisse. Jeg legger særlig vekt på vinkelen på begge ører og føtter som jeg vil at de skal følge isometriske linjene.
Som du kan se detaljene er svært minimal - jeg vil bare få den grunnleggende formen og de riktige vinklene som er utarbeidet først. Vi gjør resten av arbeidet i Photoshop.
Ta med i skissen, legg på et nytt lag og spøk opaciteten slik at du kan se pikslene du skal lage klart. Det er ikke en hard og rask regel, men jeg finner pixel-tegninger ser best ut når de har svarte konturer.
Her går jeg rundt ekornet mitt med blyantverktøyet og lager den svarte oversikten. En ting å unngås er clumping opp hvor konturpiksler berører hverandre på mer enn én side. Hvis du tegner et ekstra firkant, bare slett det med viskelærverktøyet ditt (også holdt på 1 pikselbredde, se den røde sirkelen) det vil se bedre ut og publikum takker for det.
Det ser fortsatt litt rotete ut, men det vil forme seg! Keylines inne i illustrasjonen bidrar også til å gi det et dristig utseende, bare sørg for at de er mørkere farger som ikke er svarte for å gjøre litt kontrast. Ring meg en radikal, men jeg gikk med brun på denne.
Når formen er fullført fyll det indre området med en fin midttonefarge (myk brun) og bruk kanskje en lys farge for å få frem noen høydepunkter.
Den svarte disposisjonsregelen er ikke vanskelig og rask, jeg la noen svarte keylines under forkjeft og pote som det var vanskelig å se hva som foregikk.
Håndplassering, fjerning, endring av piksler er hvor ferdigheten kommer inn. Noen ganger. Men når du begynner å ta på seg det, kan du tegne omtrent alt - alt du trenger er litt tålmodighet. Håper dette hjelper, og inspirerer deg til å skape et godt arbeid av deg selv!
Her er noen ressurser for videre pixelavlesning:
Abonner på Psdtuts + RSS-feed for de beste Photoshop-knappene og artiklene på nettet.