Share
Dit artikel is opgedragen aan een onderwerp dat me nauw aan het hart ligt, maar gaf me tegelijkertijd enkele sterke hoofdpijn in de begintijd van mijn ontwerpproces.
Als je het nog niet uit de titel hebt geraden, wel, het is iets dat diep verwant is aan het pictogramontwerp, meer bepaald lijnpictogrammen en de twee vrij verschillende methoden om ze te produceren: verschuivingen versus streken. Dus of u nu een eigen pictogram maakt of een pictogrampakket van Envato Market wijzigt, dit artikel zal helpen.
Dat gezegd hebbende, vastbinden en laten we gaan over de belangrijkste voors en tegens van het gebruik van de ene boven de andere.
Nou, dat is echt een goede vraag, vooral als je net begint als een icoonontwerper, omdat ik op een gegeven moment onthoud dat ik mezelf exact dezelfde vraag stelde.
Voor degenen die al het antwoord weten, houd het gewoon goed, want het duurt maar een paar seconden om alle anderen op snelheid te krijgen..
Lijnpictogrammen zijn pictogrammen die de verschillende bouwbloksecties van een compositie afbakenen, met dunnere of dikkere contouren of lijnen.
Er zijn twee hoofdtypen lijnpictogrammen, die eigenlijk behoorlijk op elkaar lijken, het belangrijkste verschil is het gebruik of liever het ontbreken van gekleurde opvulvormen.
Of je besluit om volledig naakt te gaan en alleen lijnen te gebruiken, of details toe te voegen door de lege ruimte tussen die lijnen in te vullen, het is allemaal aan jou.
Op dit punt lijken dingen misschien niet zo ingewikkeld, althans aan de oppervlakte, maar zodra je het proces van het maken van de eigenlijke pictogrammen doorloopt, begint het misschien een beetje wazig te worden. Dat komt vooral omdat er veel stemhebbende stemmen zijn die praten over de verschillende methoden voor het maken van de eigenlijke pictogrammen, maar er zijn er niet veel die een directe vergelijking maken tussen de twee processen.
Dus ik dacht dat ik dit kleine geschreven stuk in kon doen om recht te doen aan beide methoden.
Oké, dus we weten nu welke lijnpictogrammen er zijn, maar hoe gaan we om met het maken ervan?
Zoals ik al zei in de inleiding, zijn er twee basismanieren om deze pictogrammen te maken. De eerste is met behulp van offsetpaden, waarvoor je een basisvorm moet maken en er vervolgens een offset aan moet toevoegen, die je in een lijnstuk transformeert door de kleinere vorm uit de grotere te verwijderen.
De tweede is afhankelijk van het gebruik van de basisvormen van Illustrator in combinatie met de Pen gereedschap (P) om paden te maken die alleen dunnere of dikkere lijnen gebruiken, dus geen vullingen.
Ik ga ze elk in de volgende minuten bespreken en probeer ze zo veel mogelijk licht uit te werpen zodat je uiteindelijk zelf kunt beslissen welke het beste bij je past..
Allereerst, wat betekent het woord "offset"?
Welnu, als ik het als zelfstandig naamwoord gebruik, moet ik zeggen dat ik echt geen enkele geldige definitie heb gevonden die in de buurt komt van het gebruik ervan in het ontwerp. Aan de andere kant, als het als bijvoeglijk naamwoord wordt gebruikt, begint het iets logischer te worden, omdat het "weg van een middenlijn geplaatst is; "uit het midden" uitleg brengt het dichter bij de manier waarop Illustrator het gebruikt.
Nu, om eerlijk te zijn, kan ik niet zeggen dat het officiële Adobe Illustrator-handboek heel goed werkt bij het uitleggen van dingen, aangezien het hulpmiddel wordt vermeld onder een enigszins misleidende titel "Offset duplicate objects", wat een beetje onjuist is.
Dat komt omdat de resulterende objecten geen duplicaten zijn, omdat een duplicaat dezelfde kenmerken heeft, dus de grootte, kleur en vorm als de oorspronkelijke tegenhanger. Ik denk dat het eigenlijke woord dat ze hadden moeten gebruiken "kopiëren" is, omdat een kopie "vergelijkbaar of identiek" kan zijn aan het origineel, wat eigenlijk precies is wat de offset van Illustrator doet..
Ik geloof echt dat ze het beter hadden kunnen doen als ze het zoiets simpels hadden genoemd als "The Offset Path Tool" en de functies ervan beschreven met behulp van een aantal verschillende ondertitels en secties.
Ze maken dingen een beetje duidelijker als je begint met het lezen van de tekst zelf:
"U kunt een replica van een object maken, uitgaande van het geselecteerde object met een opgegeven afstand, door de opdracht Offsetpad of Offsetpad te gebruiken. Compensatie van objecten is handig als u concentrische vormen wilt maken of veel replicaties wilt maken van een object met regelmatige afstanden tussen elke replicatie. "
Ik vond de definitie nog steeds een beetje vaag, dus ik besloot het concept uit te leggen door het proces dat Illustrator volgt nauwkeurig te bestuderen..
Een offset-pad is dus in feite een kopie van een geselecteerd object dat is gemaakt door het pad naar de buitenkant van de oorspronkelijke vorm te duwen, waardoor u een iets grotere versie van dat object krijgt die identiek is in vorm en kleur maar niet in grootte.
Nu weet ik niet hoe ik meerdere concentrische vormen moet maken, maar deze tool kan perfect passen bij het maken van lijnpictogrammen.
Ja, er zijn een paar trucjes waar je rekening mee moet houden als je het voor dit doel gebruikt, maar ik zal er op de volgende momenten over praten.
Welnu, het proces hangt af van het type pictogram dat u gaat maken. Als je het goed onthoudt, heb ik in het eerste hoofdstuk gesproken over de twee soorten lijnpictogrammen die momenteel door ontwerpers worden gebruikt: pure naakte lijnen of lijnpictogrammen met opvulvormen.
Omdat het gereedschap Pad verschuiven een kopie van de oorspronkelijke vorm maakt, houdt dit in dat het proces van het maken van de lijnen zich concentreert op het gebruik van twee objecten, identiek qua vorm, maar verschillend van formaat.
Ongeacht het type lijnpictogrammen waarmee u besluit te werken, het proces voor het maken van de werkelijke offset is identiek. Eerst maak je je originele vorm aan en dan ga je ermee naar Object> Pad> Offsetpad waar je wordt begroet door een klein pop-upvenster met een heleboel opties.
De eerste is compenseren die, zoals u al weet, de afstand regelt waarop Illustrator het pad van de kopie zal maken en positioneren.
De tweede optie is Doet mee, die het algehele aspect van de eind-joins van een vorm bepaalt, waardoor u de volgende drie opties krijgt:
Afhankelijk van de visuele stijl waar je voor gaat, zou je de ene boven de andere kunnen kiezen. Een ding dat u in overweging moet nemen is dat deze Doet mee werk alleen aan vormen met puntige naden en niet met afgeronde hoeken.
Dus, bijvoorbeeld, als je een vierkant hebt en een offset wilt maken en zijn hoeken wilt instellen Ronde, je kunt dat gemakkelijk doen. Aan de andere kant, als u een afgeronde rechthoek heeft, het enige type compenseren die je zult krijgen is Ronde maakt niet uit wat je hebt ingesteld Doet mee optie om.
Dit zou geen probleem moeten zijn, omdat ik niemand zou willen zien die graag een afgeronde hoekvorm wil maken met een of andere rare puntige rand.
De derde en laatste optie is Versteklimiet. Ik heb geprobeerd een officiële Adobe-presentatie van de optie te zoeken, maar ik kon geen directe Adobe-versie vinden. In plaats daarvan vond ik een hele leuke uitleg van de Beroerte's Hoekverstekgrens, waarvan ik denk dat het op dezelfde manier werkt als het compenserenis een:
"De verstekgrens regelt wanneer het programma overschakelt van een gemiste (puntige) verbinding naar een afgeschuinde (kwadraat) verbinding. De standaard versteklimiet is 10, wat betekent dat wanneer de lengte van het punt tien keer het slaggewicht bereikt, het programma overschakelt van een verstekverbinding naar een afschuining. Een versteklimiet van 1 resulteert in een afschuining. "
Als je dit test, kun je merken dat dit de standaard is Versteklimiet voor de compenseren is 4 (niet 10) maar anders dan dat, ze zijn vrijwel identiek.
Oké, dus we zijn waarschijnlijk een beetje te technisch gegaan, maar ik wilde de dingen zo goed mogelijk uitleggen.
Op dit punt weten we hoe we de offset moeten maken, maar hoe gebruiken we deze om het eigenlijke lijnpictogram te maken? Ik ga je eerst het proces voor de naakte zin laten zien.
Voor diegenen die vragen waarom ik ze "naakte lijniconen" noem, laten we zeggen dat ik de uitdrukking eenvoudiger heb begrepen voor iemand die nieuw is in het spel. Dat gezegd hebbende, ongeacht het type pictogram dat u kiest, of het nu naakt of gevuld is, het zijn beide lijnpictogrammen.
Omdat ik meestal voorbeelden vind die meer expliciet zijn dan pure tekst, ga ik je door het proces leiden van het maken van een klein huisdierprojectpictogram van je eigen.
Omdat ik iets eenvoudigs nodig had, dat het concept gemakkelijk kon verklaren, besloot ik om een klein documentpictogram te maken, dat snel en gemakkelijk te maken is.
Bij het maken van pictogrammen zijn er een aantal zaken waarover de ontwerper moet beslissen. De eerste beslissing is meestal die van het kiezen van de basisgrootte voor het pictogram. Deze stap is erg belangrijk, omdat je vanuit het kleinste formaat wilt beginnen en er grotere versies van wilt maken, afhankelijk van de behoeften van je project. 32 x 32 px, 64 x 64 px, 96 x 96 px, enz.
Snelle tip:Als je je afvraagt waarom je moet beginnen met een kleiner formaat en je een weg naar iets groters moet vinden, dan is dat vrij simpel: wanneer je pixel-perfecte pictogrammen maakt met oneven getalwaarden (bijvoorbeeld 3) en een relatief grotere basisgrootte kiest (64 x 64 px), maar besluit dat u ook een kleinere wilt toevoegen (32 x 32 px) dan merk je misschien dat dingen beginnen te breken. Dat komt omdat een oneven getal dat in tweeën is gesplitst, u een decimale waarde zal geven, die niet correct kan worden omgezet naar de Pixel Grid.
U kunt meer over het onderwerp lezen door enkele van mijn andere zelfstudies te doorlopen:
Laten we in ons geval zeggen dat we met een relatief grote basis van willen gaan 96 x 96 px.
Zodra we onze grootte hebben bepaald, moeten we beginnen na te denken over het gewicht van onze lijnen. Deze stap is even belangrijk, omdat we de hoofdvorm moeten maken en er zeker van moeten zijn dat er een opening is tussen de zijkanten en de zijkanten 96 x 96 px raster, omdat dit is waar de lijnen daadwerkelijk worden gepositioneerd.
Die tussenruimte vertegenwoordigt de werkelijke dikte van onze lijnen, omdat we een verschoven pad naar de oorspronkelijke vorm toepassen en vervolgens het "lijnpictogram" maken door de kleinere vorm uit de grotere vorm te verwijderen met behulp van verkenner's Minus voorkant keuze.
Voor dit voorbeeld gaan we met een dikte van 4 px,wat betekent dat onze hoofdvorm een gat zal hebben van 4 px tussen de boven- en onderkant van ons raster.
Als je je afvraagt waarom we alleen geïnteresseerd zijn in de boven- en onderkant, is dat omdat documentpictogrammen meestal groter zijn, maar iets smaller in termen van breedte. Als dit een ander object was, hadden we mogelijk zowel de linker- als de rechterkant moeten overwegen, omdat u wilt dat de dingen consistent zijn.
Laten we beginnen met het bouwen van het pictogram door een te tekenen 64 x 88 px afgeronde rechthoek met een 4 px hoekradius, die we zullen kleuren met een donkerdere grijstint en positie naar het midden van ons raster.
Zoals u kunt zien, hebben zowel de boven- als onderkant van de vorm dat 4 px gat die we zullen gebruiken als de waarde van onze offset.
Dus, laten we de vorm selecteren en de offset creëren door naar te gaan Object> Pad> Offsetpad en binnengaan 4 px in de compenseren waarde veld, verlaat de Doet mee en Versteklimiet naar hun standaardwaarden.
Zodra we klikken op OK, Illustrator maakt ons offset-object, dat precies dezelfde vorm en kleur zal hebben als de oorspronkelijke vorm van ons document.
Om de lijnomtrek te maken, zullen we eenvoudigweg beide vormen selecteren en gebruiken verkenner's Minus voorkant optie om de kleinere vorm uit de grotere te verwijderen.
Zoals u kunt zien, hebben we nu een nieuwe vorm met een allround 4 px dikke omtrek.
Best cool, toch??
Laten we nu het pictogram afmaken door een paar tekstregels toe te voegen met behulp van de Rechthoekgereedschap (M) zodat het eruit zal zien als een echt document. Let er bij het maken van de vormen op dat ze dezelfde vormen hebben 4 px diktewaarde als hoofdomtrek, omdat lijnpictogrammen meestal consistent zijn in termen van dikte.
Dus op dit punt zou je een basisidee moeten hebben van hoe je "naaktlijnpictogrammen" kunt maken met behulp van de ongelooflijk krachtige Offset padgereedschap.
We gaan nu kijken naar het maken van hetzelfde documentpictogram, maar deze keer gebruiken we lijnen in combinatie met opvulvormen.
Het proces is vrijwel identiek: het enige belangrijke verschil is dat we deze keer de kleinere vorm niet uit de grotere verwijderen. In plaats daarvan gebruiken we de kleinere als vulvorm en de offset als de omtrek van het pictogram.
Dus laten we hetzelfde maken 64 x 88 px afgeronde rechthoek met de 4 px hoekradius, en positioneer het naar het midden van ons raster.
Ga vervolgens met de geselecteerde vorm naar Object> Pad> Offsetpad en geef het een offset van 4 px zoals we deden met het vorige pictogram.
Zodra je dat hebt gedaan, kleur je gewoon de originele vorm met een donkerdere grijstint om het te onderscheiden van het tekengebied en voeg je de kleine tekstregels toe.
Zoals u kunt zien, zijn beide processen heel gemakkelijk te begrijpen en toe te passen, maar er zijn een paar dingen waar u op moet letten bij het gebruik van de Verschoven pad hulpmiddel om dit soort pictogrammen te maken. We zullen over die aspecten praten zodra we over de Strokes methode, zodat we een groter perspectief over de twee kunnen hebben.
Deze methode is voor veel ontwerpers de "juiste", aangezien "lijniconen" moeten worden gemaakt met behulp van werkelijke lijnen / paden en geen vormen vullen. Dat is waarschijnlijk een goede verklaring, maar laten we eerlijk zijn, de meeste mensen die onze pictogrammen kopen, geven er niet echt om, omdat ze uiteindelijk toch als .png-bestanden zullen worden gebruikt..
In vergelijking met de vorige methode is het proces zelf niet zo heel anders, omdat we er nog steeds een aantal zullen gebruiken Illustratorbasisvormen zoals de Rechthoek (M) en Afgeronde rechthoek-tool, maar we zullen niets uitsnijden. In plaats daarvan transformeren we de vormen in lijnen door hun opvulkleur te verwijderen en een dunner of dikker slaggewicht te geven.
Samen met basisvormen zullen we ook de Pen gereedschap (P) om details en sectiebegrenzingen aan de pictogrammen toe te voegen, afhankelijk van de complexiteit van uw compositie.
Laten we echter de processen van het maken van zowel naakte als gevulde lijnpictogrammen met behulp van deze methode bespreken door hetzelfde documentpictogram te maken.
Het maakt niet uit hoe je dit soort pictogrammen maakt, je zult altijd moeten beslissen over hun basismaat en de lijndikte die je gaat gebruiken.
Omdat we in dit geval exact hetzelfde pictogram maken, blijft onze maat hetzelfde, dus 96 x 96 px, en zo zal onze lijndikte (4 px).
Als we voor de vorige methode twee vormen moesten maken, hebben we er voor deze slechts één nodig die we in de omtrek van het document zullen transformeren door de vulkleur met de lijn om te draaien..
Dus, met behulp van de Afgeronde rechthoek-tool, selecteer dezelfde grijze kleur als hiervoor en wissel vervolgens de vulling met de streep door op te drukken Shift-X. Zoals je kunt zien, verwijdert dit alle opvulkleuren en laat je tekenen met paden, en dat is precies wat we willen.
Snelle tip: De Shift-X kleurruil werkt zolang u geen kleuren hebt toegewezen aan zowel de vulling als de streek. Als je twee kleuren hebt, worden ze alleen omgekeerd. Dit is niet wat we willen als we te maken hebben met lijnpictogrammen. Dus als u meer dan alleen een opvulkleur hebt, moet u ervoor zorgen dat u de tweede opvult.
Wijzig nu het Beroerte's Gewicht naar 4 px en begin met het tekenen van de hoofdvorm van het pictogram door op te klikken en vervolgens te slepen, zodat je uiteindelijk een hebt 68 x 92 px vorm met een Hoekradius van 6 px.
Als u zich afvraagt waarom de waarden zijn gewijzigd, is dat omdat in plaats van een basisvorm te maken en vervolgens een offset toe te voegen, we de omtrek van het document direct met lijnen zullen maken. Als we nu de contour van de methode met het offset-pad zouden bekijken, zouden we merken dat deze een breedte heeft van 72 px...
... en een buitenkant Hoekradius van 8 px met slechts 4 px voor de binnenkant.
De uitleg is vrij eenvoudig. Omdat Illustrator standaard de lijn naar binnen uitlijnt, betekent dit dat de dikte van de lijn gelijk verdeeld is aan beide zijden van het pad, dus 2 px voor de ene en de andere kant 2 voor de andere.
Nu, hoewel de vorm exact dezelfde breedte heeft als de vorige omtrek gemaakt met behulp van de offsetmethode, als we de Transformeer paneel we zullen zien dat het Breedte waarde is eigenlijk kleiner, omdat Illustrator de grootte van het daadwerkelijke pad aangeeft, en niet het object. Als we het pad zouden uitbreiden en het in een vorm zouden veranderen, zou het precies dezelfde waarden hebben als degene die met de eerste methode is gemaakt, omdat Illustrator die zou beschouwen als 2 px van elke kant (68 + 4 = 72).
In vergelijking met de vorige methode waarbij u een opening moest achterlaten die exact dezelfde waarde had als de dikte van de lijn, moet u deze keer de vorm positioneren zodat het pad (dat meestal wordt weergegeven door de kleur van de laag) een gat van rechtvaardig 2 px tussen de bovenste en onderste delen van het rooster.
Snelle tip: afhankelijk van Gewicht van uw Beroerte¸ je moet er altijd voor zorgen dat wanneer je het pictogram op het raster ontwerpt, je een opening laat die de waarde heeft van de helft van het pad Beroerte gewicht, sinds bij het tekenen van de vormen door te klikken en te slepen, telt Illustrator niet het aantal pixels dat buiten de padindicatorlijn valt. Je moet er dus rekening mee houden en tekenen door een klein gat te laten waar de zijkanten van je pad de randen van het eigenlijke raster bereiken, zodat je ontwerp in die ruimte past.
Zodra we het overzicht van ons document hebben, kunnen we het Pen gereedschap (P) en begin met het toevoegen van de 4 px dikke tekstregels om het pictogram af te maken.
Nu we hebben gezien hoe we het pictogram met de naakte lijnen kunnen maken, laten we eens kijken naar het proces van het maken van lijnpictogrammen met opvulvormen met dezelfde methode.
Welnu, het proces voor het maken van dit soort icoon is vrijwel hetzelfde als dat voor de naakte lijnen. Het enige verschil is dat je een duplicaat van je hoofdomtrek moet maken en het in een vullingvorm moet veranderen door de lijnkleur met zijn vulling te verwisselen.
Laten we beginnen met het maken van de hoofdlijnen door een tekening te maken 68 x 92 px vorm met een Hoekradius van 6 px. Als je lui bent, kun je gewoon een kopie maken van degene die we al hebben, omdat het de dingen wat sneller zou moeten maken.
Zodra we de vorm boven het raster hebben geplaatst, moeten we er een kopie van maken (Control-C> Control-F) en draai dan zijn slag met zijn vulling door op te drukken Shift-X. Verander dan eenvoudig de kleur met dezelfde donkergrijs als voorheen, en zorg ervoor dat deze naar achteren wordt verzonden met behulp van de Schikken> Verzenden naar terug keuze. Voeg ten slotte de kleine tekstregels toe en u bent klaar om te gaan.
Op dit punt hebben we elk van de twee methoden besproken die we kunnen gebruiken om lijnpictogrammen te maken. Zoals ik aan het begin van dit artikel beloofde, zal ik nu kort ingaan op de voor- en nadelen van het gebruik van de ene methode boven de andere, zodat u uiteindelijk zelf kunt beslissen welke het beste bij u past..
Ongeacht het type lijnpictogram dat u aan het maken bent, de Verschoven pad methode kan eenvoudig uw "go to" -tool zijn, en nee, ik zeg het niet alleen omdat ik het dagelijks gebruik. Ik zeg het omdat er verschillende dingen zijn die het echt laten opvallen:
Zoals bij elke tool, is de Verschoven pad heeft een aantal nadelen die voor sommigen een deal-breaker kunnen zijn:
Zelfs als de Verschoven pad is een geweldig hulpmiddel, dat betekent niet de Strokes methode kan geen haalbaar alternatief zijn. Er zijn een aantal voordelen waarvan u op de hoogte moet zijn voordat u beslist of deze methode geschikt voor u is:
Nu we de goede delen hebben gezien, laten we een paar seconden nemen en over de slechte delen praten:
Dus daar heb je het, een snelle maar diepgaande vergelijking van twee geweldige methoden voor het maken van lijnpictogrammen die moeten aangeven welke het beste bij jouw workflow past.
Zoals altijd hoop ik dat je iets nieuws hebt geleerd en als je vragen hebt of als je gewoon wat van je kennis wilt delen, plaats dan je reactie in het onderstaande gedeelte en ik neem zo snel mogelijk contact met je op!
Accentsconagua