Share
Pictogrammen zijn onlosmakelijk onderdeel van een GUI-ontwerp (grafische gebruikersinterface). Ik was al eeuwen bezig met het downloaden, kopen en maken van pictogrammen, en op een dag besloot ik om mijn eigen bruikbare pictogramset te maken. Iets om andere GUI-ontwerpers te helpen sneller en beter te werken. In dit artikel wordt het proces van het maken en de fasen die ik met dit project uitvoerig uitvoerig uitgelegd, en het kan een leidraad zijn wanneer u besluit iets soortgelijks te maken. Ik ging meer dan één creatief pad af voordat ik dit "GUI Design Icons" -lettertype afrondde.
Aangezien dit artikel iets langer is, heb ik het opgesplitst in hoofdstukken. U kunt deze links gebruiken om naar het gewenste hoofdstuk te gaan.
Ik tekende al jarenlang schetsen van grafische gebruikersinterfaces, en dit idee was de hele tijd in mijn hoofd. Ik dacht erover om een liniaal - stencil - te maken met elk vaak nodig pictogram dat wordt gebruikt in GUI-ontwerp?
Laten we eerlijk zijn - ik heb de kans gemist de eerste te zijn. Iemand anders had dit al gemaakt. Ik vond een mooie, roestvrije liniaal (stencil) van DesignCommision (zie foto), die je kunt kopen bij uistencils.com.
Ik heb het meteen besteld. Nadat ik het live had gezien, was ik zelfs meer vastbesloten om er zelf een te maken. Mijn idee was om dit een beetje anders uit te voeren - met plastic. Er is niets mis met roestvrij staal. Het is glanzend, modern, het is leuk. Maar je kunt het niet zien, de randen zijn scherp en het vernietigt de potloden en schraap je vingers (het is niet zo erg, maar ermee werken is niet erg comfortabel).
In het begin was een krant, heel veel papier, potloden, viltstiften en veel tijd. In de tussentijd (in de niet-tekeningstijd) was ik verschillende GUI's aan het verkennen, op zoek naar wat van pas kon komen, en eindigde ik met veel papieren vol tekeningen. Deze kunt u hier ook zien (klik voor grotere foto). Toen ik eenmaal besloot dat ik genoeg had van schetsen, heb ik alle pictogrammen gemarkeerd die ik op de computer zou kunnen proberen na te maken. Dit is waar ik in de tweede fase ben gesprongen.
De tijd die nodig was voor schetsen was niets vergeleken met de tijd die werd doorgebracht in Adobe Illustrator. Zoals u kunt zien, zijn de pictogrammen vrij eenvoudig, maar u moet zorgen voor maximale nauwkeurigheid, zo min mogelijk punten (geen onnodige punten) en - het belangrijkste - consistentie in stijl.
Als u de liniaal van DesignCommision van dichterbij bekijkt, is dit de grootste imperfectie: de pictogrammen hebben geen uniforme stijl. De meeste pictogrammen zijn eenvoudig, maar het gebruikerspictogram heeft een zeer gedetailleerd overzicht. De meeste pictogrammen hebben dezelfde afmetingen, maar de afspeelknop is te groot (en breed). De meeste pictogrammen zijn gemaakt van rechte lijnen, maar de pictogrammen 'i' en boeken zijn onredelijk afgerond ... enzovoort.
Ik zal u het proces laten zien van het maken van twee pictogrammen: het vergrendelingspictogram en het laden van het animatiesymbool. In het begin heb ik er twee gemaakt gidsen (vrij willekeurig) in het document - en ik heb geprobeerd de pictogrammengroottes langs deze hulplijnen te houden. Niet dat elk pictogram van de eerste gids tot de tweede is, maar om de schaal ongeveer hetzelfde te houden.
De snelste om pictogrammen te maken, is door het pictogram voor te stellen als een verzameling basisvormen. Het is altijd sneller om een halve cirkel te verwijderen dan om de halve cirkel met de hand te tekenen (met het gereedschap Pen). Door het werk met de Pen-tool tot een minimum te beperken, kunt u in korte tijd nauwkeurige vormen maken. Probeer, in plaats van de Pen-tool, gebruikte basisvormen en de Pathfinder-gereedschappen te gebruiken om ze uit elkaar te halen als dat nodig is.
Het ontgrendelde hangslotpictogram is nog eenvoudiger (en sneller) om te maken.
Denk niet dat je alles perfect kunt maken bij de eerste poging - net zoals bij de hangslotpictogrammen. Ik heb in feite veel papier afgedrukt om de pictogrammen in groter formaat en op papier te bekijken (geloof het of niet, papier is nog steeds beter voor aanpassingen). Daarna heb ik wat details toegevoegd, een aantal gebieden aangepast en een aantal delen verwijderd. En vervolgens deze wijzigingen toegepast in Illustrator.
De onderstaande afbeeldingen tonen mijn proces. Na het afdrukken van de pictogrammen in een groter formaat, heb ik de markering in dezelfde kleur gekozen (vraag niet waarom grijs, ik vind het gewoon leuk) en heb ik een aantal onderdelen toegevoegd waar ik niet tevreden over was. Ik heb ook
andere onvolkomenheden gemarkeerd met een rode markering (zoals verandering van grootte, gewicht van een streek, enz.). Voor verwijderen, Ik heb de witte correctietape of alleen een stuk witte sticker gebruikt.
Zoals u hieronder kunt zien, zijn eenvoudigere pictogrammen slechts lijnen in verschillende lengten en hoeken, maar met hetzelfde gewicht.
Nu terug naar de creatie. Laten we kijken naar hoe je een ander pictogram kunt maken - gebruikt voor het laden van animaties.
Het aanpassen van dit pictogram is nog eenvoudiger omdat het gemaakt is uit slechts twee regels, alles wat u hoeft te doen is:
Een van de belangrijkste voordelen van deze pictogrammen was de mogelijkheid om ze te combineren. Als u bijvoorbeeld een klein plusteken naast het gebruikerspictogram wilt plaatsen om een pictogram voor een gebruiker toe te voegen, of om een klein kruisje te maken over het mappictogram om een pictogram te maken verwijder map icoon. Enzovoorts. Hieronder ziet u een voorbeeld van een vergrootglas, dat u kunt combineren met een plus- en minteken.
Mijn oorspronkelijke plan was om nummers toe te voegen, die bijvoorbeeld over het kalenderpictogram of in het pictogram met de commentaarballon konden worden geplaatst.
Hier ziet u hoe het eruit ziet in Illustrator - pictogram, in / over / waarna ik enkele voorbeeldpictogrammen heb geplaatst om het uiterlijk te testen.
Om verwarring te voorkomen tussen het pictogram dat wordt getekend en dat zojuist is gekopieerd, heb ik de kleur van het gekopieerde document lichter grijs gemaakt.
En nu voor testen ...
... en afdrukken, aanpassen en wijzigen.
Ik zal in het kort een zeer nuttige functie noemen in Adobe Illustrator. Met tekengebieden, die zijn geïntroduceerd in Illustrator CS4, hebt u meerdere pagina's in één document. Je kunt zeggen - niets nieuws in concurrerende producten, maar overweeg de mogelijkheid van verschillende grootten van de pagina's en verschillende posities. U kunt de pagina's toevoegen, terwijl u de pagina's in uw werk toevoegt. En dus was ik bezig met het toevoegen en toevoegen van de tekengebieden ...
... en ik bewoog ongebruikte pictogrammen zijwaarts, terwijl ik de laatste naar de nieuwe tekengebieden verplaatst.
Het heeft me enorm geholpen, vooral met afdrukken en correcties. Zonder tekengebieden zou ik lagen moeten gebruiken, of één groot document (maar je kunt niet zomaar een deel van dit grote canvas afdrukken).
Ik wilde de liniaal echt veelzijdig maken. Ik zat te denken aan alle mogelijke manieren om het nog beter te maken. Bijvoorbeeld door scheidingslijnen toe te voegen. In Illustrator is het heel eenvoudig, teken gewoon een lijn en voeg vervolgens een Zig Zag-effect toe om een gekartelde lijn (a), zigzaglijn (b) te maken, stel de opties in het vak Streek correct in om de lijnen te laten knipperen (c), of gestippeld (d).
Misschien heb je gemerkt dat we tijdens het maken van het slotpictogram het sleutelgat in het wit hebben achtergelaten, dus het lijkt op het gat, maar dat is het niet. U kunt dit eenvoudig detecteren door de kleur van de onderliggende laag te wijzigen.
Het maakte niet eerder uit, maar voor het eindproduct hebben we pictogrammen in slechts één kleur nodig, zonder lijn en effect, en idealiter als slechts één object. Om dit te bereiken, zullen we twee functies Expand Appearance and Expand en het Pathfinder-palet gebruiken. Dit is het proces:
Als we een tiental dagen later verhuizen, komen we in de fase waarin ik alle pictogrammen op deze manier had voltooid en voorbereid. Dus ik heb een nieuw document gemaakt in de grootte van de sjabloonliniaal en begon met het plaatsen van deze pictogrammen. Als bonus heb ik een paar knoppen toegevoegd.
Omdat het een stencilliniaal is die wordt weggelaten, kunnen de pictogrammen dat niet drijvend onderdelen - omdat er geen manier is om het te maken. Zoals je op de volgende afbeelding kunt zien, als je iets als mij wilt doen, moet je deze delen (gekruiste delen) wissen, of deze delen samenvoegen met dunne lijnen (omcirkeld).
Hier zijn deze "verbindingslijnen" in detail - zie het antennepictogram. U kunt ook opmerken dat de vulling in het batterijpictogram al is verwijderd.
De liniaal in zijn laatste blik in Illustrator ziet er zo uit. Alles wat ik nodig had, was gewoon iemand vinden om het te maken.
Ik heb veel e-mails gestuurd om het juiste bedrijf te vinden. In eerste instantie leek het geen probleem om het te laten maken. Toen kwam ik erachter dat er een probleem was en een grote. De pictogrammen waren te klein (soms snijdt de laser het verkeerde deel weg). De hele liniaal was te dik (soms te dik om er een potlood in te doen), en het aantal sneden maakte de prijs van het eindproduct onrealistisch.
Na het vroege enthousiasme had ik slechts één sample, veel gedrukte papers en de aversess van iets anders te doen met dit project. Dus stopte ik dit project omdat er veel leukere dingen te doen waren ...
Na een paar maanden van verlatenheid, begon ik opnieuw aan het project te denken. De liniaal is verdwenen, hoe zit het met iets anders met deze pictogrammen? Hoe zit het met een lettertype, zoiets wikkelingen, maar met de stijl? De
enthousiasme was terug en ik was weer aan het werk. Zoals je zo dadelijk zult zien, is het leuk om een lettertype te maken van geprepareerde iconen zoals deze.
Voor de lettertypewerking was het noodzakelijk om nog een document te maken (met slechts één artboard), formaat 1000 bij 1000 pt.
Daarna ben ik begonnen met het kopiëren van de pictogrammen van het originele document naar afzonderlijke lagen en heb ik de grootte van deze pictogrammen aangepast aan de documentgrootte (om het document mooi te vullen). Omdat alle pictogrammen al zonder lijnen en effecten waren, was het wijzigen van de grootte een kwestie van slechts één klik. Naast het plaatsen van de kleine pictogrammen in het midden van het document - gebruikt u gewoon het palet Uitlijnen. Selecteer Align to Artboard en klik op Horizontal Align Center en Vertical Align Center om alles op één lijn te krijgen.
Nu wilde ik de grote iconen een voor een laten zien en ze op de juiste plaats plaatsen, in het aangezicht van kleine iconen (voor het geval deze grote iconen kunnen worden gecombineerd met kleine iconen). Ik heb dit met de hand gemaakt. Zoals u in de volgende afbeelding kunt zien, is het pictogram voor opmerkingen naar beneden verschoven, terwijl het pictogram voor document naar boven is verschoven. Het laatste deel van de afbeelding toont het kalenderpictogram met alle kleine pictogrammen om te voorkomen dat contouren elkaar overlappen.
Het pictogram van vuur laat zien dat we een document van 1000 bij 1000 pt hebben, maar in zeldzame gevallen kunnen we de grenzen overschrijden. Voor het bladwijzerpictogram (en enkele andere speciale pictogrammen) hoeven we niet om alle kleine pictogrammen te geven. In het zijgat kunnen we alleen een plusteken, minteken en pijl plaatsen.
Pictogrammen voor FontLab exporteren
Nadat alle pictogrammen op de juiste plek waren geplaatst, was het tijd om ze uit Illustrator te halen. Natuurlijk op een manier dat ze kunnen worden gebruikt in software voor het maken van lettertypen (in ons geval FontLab, maar het is hetzelfde voor elke andere software).
Dit met de hand doen voor bijna 200 pictogrammen zou uren werk kosten - waarom zou je dit doen wanneer je een script kunt gebruiken? Het is geen onderdeel van Illustrator, maar ik heb een script gebruikt. Welke beschikbaar is voor degenen die het lettertype bestellen.
Werken met script is heel eenvoudig. Laad het, voer het uit en je hebt alle lagen geëxporteerd als EPS-bestanden. En we zijn klaar met Illustrator.
Nou, het maken van een lettertype in FontLab is niet voor één artikel, het is een onderwerp voor een groot boek. Maar het maken van een "dingbats" -lettertype van voorbereide EPS-pictogrammen is eenvoudig. Zoals je zult zien, zou elke andere software voor het maken van lettertypen het werk doen, omdat we de EPS-bestanden alleen in afzonderlijke tekens moeten laden en de breedte moeten instellen.
In het begin hebben we een nieuw, leeg lettertype.
Als u een nieuw teken wilt maken, dubbelklikt u op een willekeurig vak en stelt u de grootte (breedte) in op 1000 (hetzelfde als in Illustrator).
Importeer het gewenste EPS-bestand en ... dat is het.
De procedure is een beetje anders met grote pictogrammen. We willen ze achter de kleintjes laten zien, daarom hebben we ze nodig om geen ruimte in te nemen. Daarom stellen we hun breedte in op nul.
Een snelle test met het voorbeeldvenster laat zien of het goed werkt. In het voorbeeldvenster ben ik begonnen met het teken "k" (pictogram van map, die nul breedte zou moeten hebben). Dit betekent dat het tweede teken "V" (pictogram voor opnieuw laden) vanaf het begin wordt weergegeven en dus boven het vorige pictogram.
En dat is alles. Na een uur klikken is het lettertype gereed, dus het enige wat nog overblijft is het instellen van de naam en het exporteren ervan.
De volgende foto's tonen het testen van de voorbeelden in Microsoft Word.
En nu hebben we een volledig lettertype.
Bedankt voor het lezen van je weg door zo'n lang artikel. Ik hoop dat je vandaag iets nieuws en inspirerend hebt geleerd. Zoals je in het artikel kunt zien, waren mijn oorspronkelijke plannen heel anders, maar het resulterende lettertype bleek geweldig. Soms begin je in één creatieve richting en eindig je op een ander creatief pad.
Het lettertype "GUI Design Icons" kan worden gekocht bij myfonts.com.
Abonneer u op de Vectortuts + RSS-feed om op de hoogte te blijven van de nieuwste vectorhandleidingen en -artikelen.
Accentsconagua