Share
Wat je gaat creërenIn de tutorial van vandaag gaan we een paar kleine wijzigingen aanbrengen in ons reguliere programma en een onderwerp aanpakken dat ik al heel lang wilde doen. Als je het nog niet uit de titel hebt begrepen, dan gaan we vijf eenvoudige pictogrammen maken die je kunt veranderen in Android-draagraketpictogrammen voor toekomstige apps die je zou kunnen maken of die betrokken zijn bij het maken van.
Wat het proces betreft, gebruiken we je basiskeuze van geometrische vormen in combinatie met het Align-paneel en enkele andere tools waarmee je waarschijnlijk al elke dag werkt.
Dat gezegd hebbende, pak een nieuwe partij koffie en laten we aan de slag gaan.
Oh, en vergeet niet dat je het project altijd kunt uitbreiden door naar GraphicRiver te gaan, waar je tonnen geweldige door Android ontworpen icon packs kunt vinden, wachtend om erop te klikken.
Zou je liever leren via video-indeling? Bekijk de video-zelfstudie op het Envato Tuts + YouTube-kanaal:
Omdat ik vermoed dat je Illustrator al op de achtergrond hebt geïnstalleerd, kun je het naar boven halen en een a instellen Nieuw document (Bestand> Nieuw of Besturing N) met behulp van de volgende instellingen:
En van de gevorderd tab:
Snelle tip: sommigen van jullie hebben misschien gemerkt dat het Lijn nieuwe objecten uit met Pixel Grid optie ontbreekt, omdat ik de nieuwe CC 2017-versie van de software gebruik, waar grote veranderingen zijn aangebracht in de manier waarop Illustrator werkt.behandelt de manier waarop vormen in het onderliggende klikken Pixel Grid.
Omdat we de pictogrammen gaan maken met een pixel-perfecte workflow, zullen we een leuk klein beetje willen opzetten rooster zodat we volledige controle over onze vormen kunnen hebben, dat wil zeggen als we de oudere versie van de software gebruiken.
Ga naar de Bewerken> Voorkeuren> Gidsen & raster submenu en pas de volgende instellingen aan:
Snelle tip: je kunt meer over rasters leren door dit diepgaande stuk over hoe Illustrator's rastersysteem werkt te lezen.
Zodra we ons aangepaste raster hebben ingesteld, hoeven we er alleen nog maar wat aan te doen om ervoor te zorgen dat onze vormen er knap uitzien Klik op raster optie gevonden onder de Uitzicht menu, dat zal veranderen in Snap naar Pixel elke keer dat je binnenkomt Pixel Preview mode.
Als je nieuw bent in de hele "pixel-perfecte workflow", raad ik je ten zeerste aan om mijn pixel-perfect artwork-tutorial te maken, zodat je je technische vaardigheden in no time kunt vergroten.
Als het nieuwe document is gemaakt, zou het een goed idee zijn om ons project met een aantal lagen te structureren, omdat we op deze manier een gestage workflow kunnen behouden door ons op één pictogram tegelijk te concentreren.
Dat gezegd zijnde, breng de Lagen paneel en maak een totaal van zes lagen, die we als volgt hernoemen:
De Referentieroosters (of Basisroosters) zijn een reeks nauwkeurig afgebakende referentievlakken, waarmee we onze pictogrammen kunnen bouwen door ons te concentreren op grootte en consistentie.
Meestal bepaalt de grootte van de rasters de grootte van de werkelijke pictogrammen en deze moeten altijd de eerste beslissing zijn die u bij het starten van een nieuw project neemt, omdat u altijd wilt beginnen met de kleinst mogelijke grootte en daarop wilt voortbouwen.
Nu we de pictogrammen gaan maken met de bedoeling ze in het daadwerkelijke Android-besturingssysteem te gebruiken, moeten we hun aanbevolen richtlijn voor grootte en indeling volgen en een aangepast raster van 96 x 96 px met een all-round 4 px vulling.
Begin door alles behalve de referentieroosterlaag te vergrendelen en pak vervolgens de Rechthoekgereedschap (M) en maak een 96 x 96 px oranje (# F15A24) vierkant, waarmee u de algemene grootte van onze pictogrammen kunt bepalen.
Voeg nog een kleiner toe 88 x 88 px een (#FFFFFF) dat als ons actieve tekengebied zal fungeren, en ons dus dat alles geeft 4 px vulling.
Groepeer de twee vierkanten die het referentieraster vormen met behulp van de Controle-G sneltoets en maak vervolgens drie kopieën op een afstand van 24 px van elkaar, en zorg ervoor dat ze uitgelijnd zijn met het midden van de artboard.
Als je klaar bent, blokkeer je de huidige laag en ga je verder naar de volgende waar we gaan werken aan ons eerste pictogram.
We gaan het project starten door het batterijpictogram te maken, dat kan worden gebruikt voor een energiebesparende app of zelfs een statusindicator, omdat het vrij eenvoudig is.
Dat gezegd hebbende, zorg ervoor dat je op de juiste laag staat (dat zou de tweede zijn) en zoom dan in op het eerste referentieraster zodat we kunnen beginnen.
Begin met het maken van de achtergrond van het pictogram met behulp van een 88 x 88 px cirkel, die we zullen kleuren met # 00C853, centreer het daarna op het onderliggende actieve tekengebied.
Snelle tip: Omdat Google leuk genoeg was om een Material Design-richtlijn voor kleuren uit te brengen, heb ik uiteindelijk een aantal waarden gemengd en aangepast, die ik heb gebruikt voor de achtergronden.
Maak de hoofdbak van de batterij met behulp van een 24 x 40 px rechthoek, die we zullen kleuren met wit (#FFFFFF) en vervolgens in het midden uitgelijnd met de grotere cirkel, op een afstand van 20 px vanaf de onderkant.
Verander de vorm die we zojuist hebben gemaakt in een contour door deze om te draaien Vullen met zijn Beroerte (Shift-X) en stel vervolgens de bijbehorende in Gewicht naar 4 px en zijn Hoek naar Ronde Join, alles vanuit de binnenkant Beroerte paneel.
Maak de eerste statusindicatorbalk met behulp van een 12 x 4 px rechthoek (#FFFFFF) of a 12 px brede slag (#FFFFFF) met een 4 px Gewicht, die we zullen centreren op één lijn met het lichaam van de batterij, en laat een 4 px kloof eromheen.
Voeg nog twee indicatorbalken toe, die we verticaal op een afstand van 4 px van elkaar, ze samen te groeperen (Controle-G) achteraf.
Voltooi het pictogram door de bovenkap toe te voegen, die we zullen maken met een kleinere 8 x 4 px rechthoek (#FFFFFF) die we centreren op één lijn met het lichaam van de batterij, op een afstand van 6 px (4 px voor de opvulling + 2 px voor de bovenste helft van de slag).
Vergeet als u klaar bent niet te selecteren en te groeperen (Controle-G) alle samenstellende vormen van de batterij, hetzelfde te doen voor alle samenstellende secties van het pictogram.
Ervan uitgaande dat u het eerste pictogram hebt voltooid, vergrendelt u de laag en gaat u verder omhoog naar de volgende (dat zou de derde zijn) en laten we beginnen met het werken aan de instellingen.
Net als bij het vorige pictogram, begin je met het maken van de achtergrond met een 88 x 88 px cirkel, die we zullen kleuren met # 2196F3, centreer het daarna op het onderliggende actieve tekengebied.
Begin aan de middelste schuifregelaar te werken door een 4 x 32 px rechthoek of een 32 px lange slag met een 4 px dik Gewicht, welke we zullen kleuren met behulp van wit (#FFFFFF) en vervolgens in het midden uitgelijnd met de grotere cirkel, op een afstand van 18 px vanaf de bovenrand.
Maak de statusindicator van de schuifregelaar met behulp van a 12 x 4 px rechthoek (#FFFFFF) die we zullen centreren op één lijn met de eerder gemaakte vorm, op een afstand van 4 px vanaf de onderkant.
Voeg het onderste gedeelte van de schuifregelaar toe met 4 x 12 px rechthoek (#FFFFFF) die we net onder de statusbalk zullen plaatsen, selecteren en groeperen (Controle-G) alle drie vormen achter elkaar samen.
Maak het bovenste gedeelte voor de linkerschuifregelaar met een kleinere 4 x 12 px rechthoek (#FFFFFF), die we uitlijnen met de bovenrand van de middelste schuifregelaar, op een afstand van 12 px ervan.
Voeg de statusindicator van de schuifregelaar toe door een 12 x 4 px rechthoek (#FFFFFF) die we verticaal op de eerder gemaakte vorm stapelen, op een afstand van 4 px vanaf de onderkant.
Werk de linkerschuifknop af door het onderste gedeelte toe te voegen dat we met a zullen maken 4 x 32 px rechthoek (#FFFFFF) dat we onder de indicator plaatsen.
Als je klaar bent, selecteer je alle drie vormen en groepeer ze samen (Controle-G) zoals we deden met de middelste schuifregelaar.
Voltooi het pictogram door een kopie te maken (Control-C> Control-F) van de linker schuifregelaar, die we op de rechterkant van de cirkel plaatsen, op een afstand van 4 px vanuit de middelste schuifregelaar.
Vergeet als u klaar bent niet te selecteren en te groeperen (Controle-G) alle samenstellende secties zodat ze niet per ongeluk van elkaar worden gescheiden.
Ervan uitgaande dat je al verder bent gegaan naar de volgende laag (dat zou de vierde zijn), zoom je in op het derde referentieraster en laten we aan de slag gaan.
Maak de achtergrond van het pictogram met behulp van een 88 x 88 px cirkel, die we zullen kleuren met # 7C4DFF en lijn het midden uit met het onderliggende actieve tekengebied.
Maak de hoofdvorm voor het linkervak met behulp van a 32 x 24 px rechthoek, die we zullen kleuren met wit (#FFFFFF) en positioneer vervolgens op een afstand van 20 px uit het actieve tekengebied is zowel de linker- als de bovenrand.
Begin met het aanpassen van de vorm die we zojuist hebben gemaakt, door eerst de Pixel Preview modus (Alt-Control-Y) en vervolgens een nieuw ankerpunt toevoegennaar de onderkant, op een afstand van 10 px van zijn linker door links te klikken met behulp van de Ankerpunttool toevoegen.
Als je klaar bent, vergeet dan niet om af te sluiten Pixel Preview modus met behulp van de Alt-Control-Y Toetsenbord sneltoets.
Ga door met het aanpassen van de rechthoek door het ankerpunt linksonder te selecterenmet de Direct selectie gereedschap (A), en dan naar beneden duwen naar de bodem 8 px met behulp van de verhuizing gereedschap(klik met de rechtermuisknop> Transformeren> Verplaats> Verticaal> 8 px).
Verander de resulterende vorm in een omtrek, door deze om te draaien Vullen met zijn Beroerte (Shift-X) en het instellen van zijn Gewicht naar 4 px en zijn Hoek naar Ronde Join.
Voeg de kleinere tekstregel toe door een te maken 10 x 4 px rechthoek, die we zullen kleuren met wit (#FFFFFF) en plaats vervolgens de binnenkant van het kleine berichtenvenster, lijn het uit in de linkerbovenhoek en zorg ervoor dat u een a achterlaat 4 px kloof eromheen.
Voeg de bredere tekstregel toe met a 20 x 4 px rechthoek (#FFFFFF) die we links laten liggen - uitlijnen met de eerder gecreëerde, op een afstand van 4 px vanaf de onderkant.
Vergeet als u klaar bent niet alle vormen van het tekstvak te selecteren en te groeperen met behulp van de Controle-G Toetsenbord sneltoets.
Maak een kopie (Control-C> Control-F) van de omtrek van de kleine tekstbox en reflecteer vervolgens (klik met de rechtermuisknop> Transformeren> Reflecteren> Verticaal) en plaats het op de rechterkant van de cirkel, op een afstand van 18 px uit het actieve tekengebied is zowel de rechter- als de onderrand.
Voltooi het pictogram door het overlappende gedeelte van het tekstvak te verwijderen (gemarkeerd met rood) zodat u uiteindelijk een 4 px kloof ertussen en de omtrek van de linker. Voeg hiervoor eenvoudig een nieuw ankerpunt toenaar de boven- en linkerrand en verwijder alle andere.
Als u klaar bent, selecteert u alle samenstellende secties van het pictogram en groepeert u ze samen met behulp van de Controle-G Toetsenbord sneltoets.
Omdat je nu waarschijnlijk al de oefening kent, de laag vergrendelt en verder gaat met de volgende laag (dat zou de vijfde zijn) en laten we gaan werken aan ons alarmpictogram.
Creëer een 88 x 88 px cirkel, die we dan zullen kleuren met # FFC107, in het midden uitlijnen met het onderliggende actieve tekengebied.
Maak het hoofdgedeelte van de wekker met behulp van a 40 x 40 px cirkel, die we zullen kleuren met wit (#FFFFFF) en vervolgens in het midden uitgelijnd op het actieve tekengebied, op een afstand van 20 px vanaf de onderkant.
Verander de vorm die we zojuist hebben gemaakt in een contour door deze om te draaien Vullen met zijn Beroerte, en dan zijn Gewicht naar 4 px van binnen de Beroerte paneel.
Selecteer de Pen gereedschap (P) en teken in de wijzers van de klok met behulp van a 4 px dik Beroerte met de kleur ingesteld op wit (#FFFFFF) en de Hoek naar Ronde Join, ervoor zorgen dat je een verlaat 4 px opening tussen de eindankerpuntenen de grotere cirkel.
Verplaats een paar pixels naar de bovenkant en maak een 8 x 6 px rechthoek (#FFFFFF) die we centreren, uitgelijnd met het bovenste deel van de grotere cirkel, positionering zodat het uiteindelijk de overlappende raakt Beroertede bovenste helft.
Voeg een ... toe 16 x 4 px rechthoek (#FFFFFF) bovenop degene die we zojuist hebben gemaakt, selecteren en groeperen (Controle-G) ze daarna samen.
Werk het pictogram af door de twee kleine diagonale lijnsegmenten te tekenen met behulp van a 4 px slag met de kleur ingesteld op wit (#FFFFFF). Als je klaar bent selecteer je en groepeer (Controle-G) alle samenstellende vormen van de wekker samen, hetzelfde voor het hele pictogram achteraf.
Baan je een weg naar de zesde en laatste laag, en laten we het project afmaken door het foto-icoon te maken.
Gebruik een 88 x 88 px cirkel (# FF6F00) maak de achtergrond van het pictogram dat we centreren, uitlijnen met het onderliggende actieve tekengebied.
Maak de hoofdtekst van de foto met behulp van a 36 x 36 px rechthoek, die we zullen kleuren met wit (#FFFFFF) en vervolgens in het midden uitgelijnd op het onderliggende actieve tekengebied, op een afstand van 20 px vanaf de bovenrand.
Verander de vorm die we zojuist hebben gemaakt in een contour door deze om te draaien Vullen met zijn Beroerte (Shift-X) en stel vervolgens de bijbehorende in Gewicht naar 4 px en zijn Hoek naar Ronde Join van binnen de Beroerte paneel.
De ... gebruiken Pen gereedschap (P) teken in de horizontale scheidingslijn met behulp van a 4 px dik Beroerte (#FFFFFF) die we binnen een eerder gemaakte vorm zullen plaatsen, op een afstand van 4 px vanaf de onderkant.
Gebruik hetzelfde 4 px dik Beroerte (#FFFFFF) met een Ronde Join, begin met tekenen van de eerste berg door uw eerste ankerpunt te plaatsenop de linkerrand van de foto, op een afstand van 10 px van de horizontale scheidingslijn die we zojuist hebben gemaakt.
Voeg het tweede anker toeop een afstand van 10 px zowel horizontaal als verticaal vanaf de eerste. Werk de berg af door het derde en laatste anker toe te voegenop de horizontale scheidingslijn, terwijl u de Verschuiving toets om in een perfecte diagonale lijn te tekenen.
Teken in de tweede kleinere berg, gebruik hetzelfde 4 px dik Beroerte (#FFFFFF), en als u klaar bent, selecteert en groepeert u alle samenstellende vormen van de foto samen met behulp van de Controle-G Toetsenbord sneltoets.
Maak het onderste gedeelte van het pictogram met behulp van a 28 x 6 px rechthoek, die we zullen kleuren met wit (#FFFFFF) en vervolgens in het midden uitgelijnd op het onderste gedeelte van de omtrek van de foto, op een afstand van 4 px.
Voltooi het pictogram door de vorm die we zojuist hebben gemaakt in een te draaien 4 px dikke omtrek (#FFFFFF) met een Ronde Join, en vervolgens aanpassen door een nieuw ankerpunt toe te voegennaar het midden van de bovenrand, die we dan verwijderen om het pad te openen (gemarkeerd met rood).
Selecteer de resulterende vorm en de rest van de samenstellende elementen van de foto en groepeer ze (Controle-G) doe daarna hetzelfde voor de compositie-secties van het pictogram.
Ik hoop dat het je gelukt is om elke stap bij te houden, en vooral dat je tijdens het proces iets nieuws en nuttigs hebt geleerd. Dat gezegd hebbende, ik zie je in de volgende!
Accentsconagua