In deze tutorial maak je een spooky jack-o-lantern vanuit het niets, volledig weergegeven in pixels (de bouwstenen van digitale kunst). Leer hoe je het Tijdlijn-paneel van Adobe Photoshop kunt gebruiken om een lachend, knipogend gezicht dat een kus op de kijker blaast te laten oplichten en zowel binnen als buiten oplicht.
1. De pompoen tekenen
Stap 1
Gedurende deze tutorial zal ik in Adobe Photoshop CC 2014 werken. Open uw programma en Maak een Nieuw document. Mijn laatste kunstwerk gemeten 36 px door 30 px, dus ik heb mijn document gemaakt 50 px door 40 px op 72 dpi met een Transparant achtergrond.
Stap 2
Laten we beginnen met het bouwen van de basisvorm van de pompoen. Zoom (Z) in op uw document 1600% of zo.
De ... gebruiken Pencil Tool (B) met een 1 px harde borstel, tekenen 7 pixels in een verticale lijn.
Trek 2 pixels aan beide zijden van de eerste regel.
Op de top van het ontwerp tot nu toe, teken een extra verticale lijn van 2 pixels gevolgd door 1 pixel op de juiste diagonaal van de vorige twee. Onderaan het ontwerp, tekenen 2 diagonale pixels achter elkaar (zie hieronder).
Voltooi dit gedeelte met 1 diagonale pixel bovenaan en nog twee pixels rechts zowel boven als onder.
Stap 3
Verder gaan met de Pencil Tool en onze basispompoenvorm:
Met wat er in is gemaakt Stap 2, toevoeging 3 pixels horizontaal naar de boven- en onderkant van het ontwerp. Trek 1 diagonale pixel boven de lijn van drie eerder getekend.
Ga door met het bouwen van de pompoenvorm aan de bovenkant van het ontwerp met 3 horizontale pixels. Onderaan tekenen 1 diagonale pixel onder de andere en 2 pixels naar rechts.
De bovenste regel is 8 pixels aan de overkant. De conclusie is 10 pixels aan de overkant.
De andere helft is een spiegelbeeld van alles links van de twee rechte horizontale lijnen. Gebruik de Rechthoekig selectiekader naar kiezen, Kopiëren (Control-C), Plakken (Control-V), en spiegel (Bewerken> Transformeren> Horizontaal spiegelen) de linker helft om de basisvorm van de pompoen te voltooien.
Stap 4
Onze pompoen heeft een gezicht nodig. Maak een Nieuwe laag in de Lagen paneel en gebruik de Pencil Tool, laten we beginnen:
Het oog begint met 3 pixels in een rij en 1 pixel boven hen en in het midden.
Voltooi het oog met de derde regel pixels bestaande uit 3 pixels en de vierde regel bestaande uit 5 pixels.
Drie pixels rechts van de onderste lijn van het oog begint de neus. Het bestaat uit drie rijen: 1 pixel, 3 pixels, en 3 pixels.
Herhaal de oogvorm opnieuw voor het rechter oog.
Zorg dat de ogen en neus goed zijn 3 pixel ruimtes die ze scheiden. De mond begint twee rijen lager 3 pixels aan de overkant.
Stap 5
Deze hele stap bestaat uit het voltooien van de mond:
Het begin van de mond, het opbouwen van de laatste stap, is 9 pixels gerangschikt in a 3 x 3 doos.
Trek 3 pixels in een verticale lijn aan weerszijden van de eerder getrokken box.
Hierna volgen twee kolommen van 2 pixels elk aan elke kant van de mond.
Teken twee L-vormen aan beide zijden waaruit bestaat 3 pixels elk.
Toevoegen 1 pixel aan beide kanten, diagonaal en naar buiten. De bovenranden van de mond bestaan uit 4 pixels in een horizontale rij.
Om de mond te voltooien, plaats 1 pixel diagonaal en naar beneden, in de richting van het midden van de mond, en vul de linker- en rechterkant in (zie hieronder voor de exacte vorm). Op dit punt lijkt de mond een beetje op een vliegende vleermuis.
Omdat mijn pompoen zal bestaan uit verschillende sinaasappels en geel, heb ik besloten de kleur van mijn lijntekeningen te veranderen in bruin (# 6b0f02).
2. De pompoen kleuren
Stap 1
De kleuren die in mijn uiteindelijke kunstwerk worden gebruikt, verschillen van de kleuren die ik hieronder heb gebruikt (ze zijn meer verzadigd en zijn later in het proces veranderd). Beschouw dit als een kleine les om eenvoudig een harmonieus kleurenpalet te creëren. Om de eigen te maken (of doe dit met andere kleuren), vermindert u de ondoorzichtigheid van de kleur tot het vermelde percentage, plaats het boven de 100% oranje kleur en selecteer de nieuwe kleur met de Pipetgereedschap (I). Sla nieuwe kleuren op in de Stalen paneel en zorg ervoor dat de ondoorzichtigheid is ingesteld op 100% voor de rest van de tutorial.
Bruin 100%: # 760b03
Bruin 75%: # 902b0d
Bruin 50%: # ae4a18
Bruin 25%: # d1692a
Oranje 100%: # f2842b Gebruikt als de basiskleur.
Oranje 40%: # faa912
Oranje 20%: # ffcc01
Geel 100%: # fff25d
samensmelten de gelaatslaag en de pompoenlijntekeningen en vul de pompoen in met behulp van de Verfemmer gereedschap en Oranje (# f2842b).
Stap 2
Onze pompoen heeft een steel nodig.
Gebruik makend van Bruin (# 760b03), en de Pencil Tool, trek twee verticale lijnen van 3 pixels elk, twee rijen uit elkaar.
Vul de twee kolommen in met Bruin 75% (# 902b0d) en sluit de vorm met 2 pixels van Bruin.
Gebruik Bruin50% (# ae4a18) als de markeringskleur bovenop de stengel.
Stap 3
Omdat dit een hefboom-lantaarn is, moeten we de bovenkant van de pompoen opensnijden.
Ik ben begonnen met hetzelfde Bruin gebruikt op de stengel. Vanaf de bovenkant van de steel is het midden van het deksel van de pompoen 9 pixels naar beneden. Trek 8 pixels breed in dat middelpunt met 3 pixels in de volgende rij aan weerszijden van de middellijn.
Verbind de 3 pixels breed aan beide kanten met 1 pixel omhoog.
Bedek de hoekpixel met Oranje en schaduw het deksel en eronder Bruin25% (# d1692a) van Stap 1 in dit gedeelte.
Plaats die donkeroranje pixels in de hoeken van de lijn van het deksel en onder de stengel (zie hieronder).
Stap 4
Concentreer je op wat er gebeurt met schaduwen in de pompoen hieronder:
Teken voorzichtig gebogen lijnen van Bruin 25% (# d1692a) beginnend bij de inkepingen van de onderkant van de pompoen. De rondingen moeten de contouren van de pompoen zelf nabootsen.
Bekleed de onderkant van de pompoen en begin donker oranje en oranje pixels in de onderste helft van de pompoen te verschuiven.
Breng ook de onderkant van de mond, neus en ogen in kaart.
Optioneel kunt u nu kiezen om een geeloranje te gebruiken van Sectie 2, Stap 1 om hoogtepunten aan de pompoen deksel, ogen, neus en mond toe te voegen.
De kleuren voor dit gedeelte van de zelfstudie zijn subtieler dan de kleuren die ik in de volgende stap heb gekozen. Als je deze toon beter vindt, gebruik dan de volgende stap voor tips over verdere arcering en markeringen en houd het kleurenpalet dat je hebt gemaakt Deel 2, stap 1.
Stap 5
Als je een heldere, meer verzadigde pompoen wilt, bekijk dan de onderstaande stappen:
Vervang alle exemplaren van Bruin 25% (# d1692a) op het oppervlak van de pompoen met Fel rood (# ff1300).
Verander de basis oranje kleur in # ff7700.
Zorg ervoor dat de bovenste stengel bruine en lichtbruine tinten bevat in plaats van rood (we veranderen de pompoen in plaats van de houtkleur van de stengel).
Gebruik de lichtbruine kleur voor de lijn die het deksel van de pompoen aangeeft Deel 2, stap 1. Gebruik voor hoogtepunten yellows (# FFCC00) en (# fba912) om kleine vakjes te tekenen en pixels in de linkerbovenhoek van het ontwerp te spreiden.
Draag de donkerdere van de twee gele kleuren naar de toppen van elke pompoensectie. Markeer de onderkant van de mond. Maak de heldere rode schaduwpixels zachter Rood oranje (# ff4500).
Gebruik een Donker bruin (# 3e0702) op de omtrek van de onderkant en de rechterkant van de pompoen. Verlicht de linkerbovenhoek van de lijntekeningen van de pompoen met verschillende bruine kleuren (zie hieronder).
3. Creëren van de animatieframes
Stap 1
Elke stap in het geanimeerde pictogram dat we maken, heeft een aparte laag nodig die de wijziging binnen het pictogram bevat. Dit omvat gloeiende ogen, veranderingen in de vorm van de mond of gloei rond de pompoen zelf.
Zorg ervoor dat je pompoenonderdelen allemaal op dezelfde laag staan. Gebruik de Toverstaf-gereedschap (W) om buiten de pompoen te selecteren en naar toe te gaan Selecteer> Inverse (Shift-Control-I) en dan Selecteer> Wijzigen> Uitbreiden en Uitbreiden door 1 pixel.
Maak een Nieuwe laag onder het pompoenpictogram in Lagen paneel. Vul de selectie in met fel geel met behulp van de Verfemmer gereedschap. Ik vulde ook een andere laag onder de andere twee met zwart, zodat het pompoenpictogram meer van het scherm zou springen.
Stap 2
Maak een Nieuwe laag en bedek de eerste twee rijen van het linkeroog met oranje pixels. Bedek de laatste rij met 5 pixels van rood (en de vorige rode rij met oranje pixels). Het oog zou nu moeten zijn 4 pixels aan de overkant, 1 diagonale pixel aan de linkerkant en twee gele pixels in het midden van de knipoogoogvorm.
Stap 3
Er zijn drie nieuwe mondlagen die we moeten tekenen om de uiteindelijke animatie te maken.
Maak een Nieuwe laag boven de anderen en gebruik de Pencil Tool tekenen drie kolommen pixels bestaande uit 1 pixel, 3 pixels, en 2 pixels. Dit is de linkerhoek van de mond.
Trek naar het midden van de mond 2 pixels rechts van de eerder getrokken mondhoek. Toevoegen 1 pixel naar beneden van de vorige twee getekend. Teken ten slotte een vierkant van 3 pixels door 3 pixels voor het midden van de mond.
Spiegel de linker mondhoek voor de rechterkant.
Gebruik donkeroranje om de hoeken van de mond te schetsen. Zie de afbeelding hieronder voor de exacte plaatsing van de pixels.
Gebruik de oranje basiskleur om de meeste negatieve ruimte rondom de mond in te vullen.
Het heldere rood dat in dit deel is geplaatst, zit recht onder de neus van de pompoen.
Ten slotte vult u de lege velden in met gele markeringen.
Plaats de nieuwe mond over de oorspronkelijke mond. De vorige mond moet volledig bedekt zijn. Verberg deze nieuwe laag voorlopig.
Stap 4
De mond wordt kleiner en verandert van een open glimlach naar schattige getuite lippen (minus de lippen omdat dit een pompoen is).
Nogmaals, we beginnen met de linkerhoek van de mond, die bestaat uit 5 pixels in drie rijen.
Teken een vierkant van 3 pixels door 3 pixels voor het midden van de mond.
Spiegel de linkerkant van de mond voor de rechterkant.
Gebruik donker oranje om twee lijnen te tekenen 4 pixels en plaats extra pixels in de hoeken van de mondvorm.
Gebruik wederom felrood voor de onderkant van de neus van de pompoen (dit zal helpen bij het opstellen van de neus) en de onderkant van de mond.
Vul de negatieve ruimte in met oranje.
Plaats deze laag over de mond van de pompoen, zorg ervoor dat de originele mond niet zichtbaar is. Verberg deze nieuwe laag voorlopig.
Stap 5
De mond is nu in volledige kiss-blowing modus. Maak opnieuw een Nieuwe laag en laten we gaan.
De hele mond is twee rijen van 3 pixels en een enkele pixel in het midden van de laatste rij.
5 pixels zijn aan de linkerkant getekend: 2 pixels naar beneden, 2 pixels diagonaal, sla een spatie over, en 1 pixel uit de mondhoek. Spiegel dit aan de rechterkant en teken 5 pixels breed op de top van de mond.
Gebruik rood om te tekenen 3 pixels daaroverheen zal men opnieuw de onderkant van de neus van de pompoen zijn. Trek 5 pixels over de bodem van de mond en verstrooi een paar pixels in de hoeken van het ontwerp.
Vul het gebied in met oranje.
Plaats de nieuwe mond over de oude mond en zorg ervoor dat de oorspronkelijke mond van de pompoen volledig bedekt is. Nogmaals, verberg deze laag in de Lagen paneel voorlopig.
Stap 6
Voor de verlichte ogen en mond is één laag nodig.
Zoom op het gezicht van de pompoen 1600%, of zo.
Maak een Nieuwe laag en vul de ogen en neus in met geel. Lijn de linkerzijden ervan rood uit om de binnenrand van de gelaatstrekken gemakkelijk te kunnen zien.
Gebruik lichtbruin op de linkerrand van de ogen en mond. Gebruik een lichtere bruine rand aan de onderkant.
Vul de mond in met fel geel, herhaal de voorgaande stappen voor welke kleuren in het ontwerp worden gebruikt.
Een schot van de pompoen wanneer "volledig verlicht".
4. De pompoen animeren
Stap 1
Open de Tijdlijn paneel en kies Maak kaderanimatie uit het drop-down menu in het midden.
Om te veranderen wat er in elk frame gebeurt, moet je klikken Nieuw frame in de opties van het paneel en pas het ontwerp in de Lagen paneel elke keer. Let op de verandering hieronder met de tweede mondlaag zichtbaar in het tweede frame en verborgen in de eerste.
Stap 2
Zie de afbeelding hieronder voor een visuele analyse van de frames die in de animatie worden gebruikt. Elke stap komt overeen met een laag. Ik heb ook opgesplitst wat er in elk frame hieronder gebeurt:
De basispompoen met alle extra lagen verborgen. De tijd is ingesteld op 1 seconde.
De gele contourlaag (uit Deel 3, stap 1) Is zichtbaar in dit frame, maar het is op 25% dekking. De tijd is ingesteld op 0,1 seconde.
Het derde frame heeft de gele contourlaag 50%ondoorzichtigheid en de mondlaag van Deel 3, stap 3 is nu zichtbaar. De tijd is ingesteld op 0,1 seconde.
De gele contourlaag staat op 100% dekking. De mond van Deel 3, stap 4 is zichtbaar. De tijd is ingesteld op 0,1 seconde.
De mond van Deel 3, stap 5 is zichtbaar. De tijd is ingesteld op 0,1 seconde.
De knipogende ooglaag van Deel 3, stap 2 is nu zichtbaar. De tijd is ingesteld op 0,1 seconde.
Dit frame is identiek aan Frame 5. De tijd is ingesteld op 0,1 seconde.
Dit frame is identiek aan Frame 4. De tijd is ingesteld op 0,1 seconde.
Dit frame is identiek aan Frame 3 behalve de gele contourlaag waarvan ondoorzichtigheid ingesteld op 100%. De tijd is ingesteld op 0,1 seconde.
Alle extra oog- en mondlagen zijn verborgen in deze laag. De tijd is ingesteld op 0,1 seconde.
De verlichte ogen en mondlaag zijn nu zichtbaar in dit kader. De tijd is ingesteld op 1 seconde.
Alle extra oog- en mondlagen zijn verborgen. De gele omtreklaag is ingesteld op 50%. De tijd is ingesteld op 0,1 seconde.
De gele omtreklaag is ingesteld op 25%. De tijd is ingesteld op 0,1 seconde.
Stap 3
Wanneer u de tijdsvertraging instelt op uw kaders, kunt u meerdere kaders selecteren en deze in één keer wijzigen. Zorg er ook voor dat je Loop-opties zijn ingesteld op Voor altijd.
Stap 4
Ga naar wanneer je je geanimeerde bestand exporteert Bestand> Opslaan als en selecteer .gif. Omdat er niet veel kleuren in dit bestand staan en we ons niet druk maken om een grote bestandsgrootte, houdt u de kleuren op 256 en de andere instellingen op hun standaard.
Als je je bestand wilt vergroten (voor het geval je het zo groot wilt maken als mijn uiteindelijke afbeelding), zorg er dan voor Kwaliteit ingesteld op Naaste buur dus er is geen verlies aan hard-edged pixelkwaliteit. Nog een keer, Looping opties moet worden ingesteld op Voor altijd (tenzij je je wilt .gif om een bepaald bedrag te herhalen om welke reden dan ook).
Fantastisch werk, je bent klaar!
Goed werk in het maken van een leuke, geanimeerde pompoen. Ik heb allebei mijn originele vergrote versies hieronder, zodat u het verschil tussen de formaten en details binnen het pixelpictogram kunt zien.
Voor meer tutorials met pixelillustraties hier Tuts+, bekijk deze kleine lijst:
Maak een serie ontbijtpixel-kunsticonen in Adobe Photoshop
Maak Pixel Art met een beperkt palet in 10 stappen met Photoshop
Hoe maak je een geanimeerde Pixel Art Sprite in Adobe Photoshop
Kandi Runner: maak een Pixel Art Sprite van Scratch
Share
Wat je gaat creëren
Accentsconagua
