Share
Met deze tutorial wil ik u een paar trucjes laten zien over het creëren van strakke lijnen en randen bij het werken met de platte designtrend, in Adobe Illustrator. Eenvoudige gelaagde stijlen en het hergebruiken van grafische stijlen om uw workflow zo efficiënt mogelijk te maken, zodat u in een mum van tijd een set overeenkomende pictogrammen kunt maken.
Om te beginnen, laten we een kunstbord maken dat dat is 500 x 500 px. Omdat onze pictogrammen eerder een module zijn en veel rechte lijnen hebben, is het het beste om met een raster te werken om perfecte pixelscherpe vormen te garanderen. Dus laten we een raster maken dat dat is 1px en laat het zien en Klik op raster zoals hieronder beschreven.
Houd bij het maken van je pictogrammen rekening met het gebruik van het pictogram zelf en waar het zal worden geplaatst. Voor deze pictogrammen blijf ik met een algemene grootte van 128 x 12px wat vrij gebruikelijk is in de icoonwereld. Omdat we de platte ontwerptrend volgen, houden we ons vast aan basiskleuren en scherpe hoeken van 45º met overdreven schaduwen.
Ik maak het draadframe van deze pictogrammen met basisvormen en pas vervolgens de stijl van de vormen aan met een handvol Grafische stijlen. Dus om te beginnen, selecteer de Afgeronde rechthoek-tool en maak een rechthoek die dat is 20 x 80 px en klik het op het kunstbord.
Selecteer vervolgens de Ellipse Tool (L) en maak verschillende concentrische cirkels. De eerste is 70 x 70 px, dan 55 x 55px, dan 40 x 40 px, en tenslotte 15 x 15 px. Zet ze nu zoals u hieronder ziet.
Selecteer de Rechthoekgereedschap (M) en teken er een paar die de helft van de vormen bedekken die we zojuist hebben gemaakt. We gebruiken deze om vormen af te snijden die later in de schaduw worden geplaatst. De hoogte / breedte doet er niet toe, zorg er alleen voor dat ze precies uitlijnen met het midden van de andere vormen. We zullen ook een schaduw maken, dus teken een vierkant en draai het 45º en plaats het zo dat de rand van de diagonale lijn de onderkant van de buitenste cirkel en de onderste afgeronde rechthoek raakt.
De ... gebruiken verkenner paneel gebruiken we een combinatie van Verenigen, Minus voorkant, en Snijden om deze rechthoekige vormen in onze schaduwoverlays te veranderen. Onthoud bij het gebruik van deze hulpmiddelen dat het de vorm zal beïnvloeden, dus u moet deze objecten dupliceren om de gewenste uitkomst te creëren. In de onderstaande schermafbeelding heb ik de kleur rood toegepast op het object en de witte laag later onze schaduwen.
We moeten nu de werpschaduw maken. Begin met het dupliceren van de onderste hendel en de grootste cirkelvormen Verenigen ze in een object. Dupliceer deze nieuwe vorm en duw deze naar links 15px. Bezoek Object> Blend> Mengopties ... en voer genoeg stappen in zodat er een soepele overgang is (ik heb het volgehouden 50), dan Maken de mix. Nu Uitbreiden het object en Verenigen ze vormen een enkele vorm. Zoom in op de vorm, schakel het in Direct selectie gereedschap (A) en selecteer de extra punten die niet nodig zijn en verwijder ze, zorg ervoor dat je de paden sluit (Command + J) als je klaar bent. Stem dit object uiteindelijk af op de achterkant van al je andere vormen als je dit nog niet hebt gedaan.
Omdat onze pictogrammen alleen 'Sorta Flat' zijn, laten we een paar hoogtepunten maken. Selecteer de vormen van het hoofdelement (die in rood) en dupliceer ze twee keer. Gebruik de pijlen op het toetsenbord om het bovenste deel van de duplicaat naar boven te duwen 1px. De richting waarin u het bovenste element meestuurt, is afhankelijk van de richting waarin de kleur zich bevindt. Dus, voor de vorm van het onderste handvat, duwt u deze naar links, maar duwt u de ronde vorm naar rechts richting het rode gebied. Selecteer de twee duplicaties en gebruik Minus voorkant om een sprankje hoogtepunt te verlaten. U kunt dit in het onderstaande scherm in groen zien.
Met onze hoofdvormen voltooid, laten we ze stijlen. Selecteer alle elementen waaruit het vergrootglas bestaat en draai ze 45º tegen de klok in.
Selecteer nu alle elementen die de schaduwen vormen. Dit zijn de witte delen op het handvat en de buitenringen, evenals de lange werpschaduw. Vul deze met plat zwart en laat de ondoorzichtigheid naar 15% en zorg ervoor dat je eventuele randen verwijdert. Zodra dat is gebeurd, gaat u naar Venster> Grafische stijlen en wanneer dat venster verschijnt, klikt u op nieuwe element-knop rechtsonder naast het prullenbakpictogram om een grafische stijl te creëren met dit effect.
Selecteer het handvatgebied en navigeer naar uw Uiterlijk (Venster> Uiterlijk) paneel en voer de informatie hieronder in. De basiskleur heeft een platte grijze kleur, daarna zullen we een nieuwe laag toevoegen bovenop die gevuld met een zwart naar wit verloop ingesteld op 45º Met een ondoorzichtigheid van 25% en Overvloeimodus ingesteld op bedekking. Eenmaal voltooid sla dit op als een Grafische stijl ook.
Selecteer de onderste cirkel en we zullen vrijwel dezelfde stijl toepassen, alleen zullen we een lichtere grijstint gebruiken. Sla dit opnieuw op als een Grafische stijl.
Selecteer de binnenste cirkel en pas dezelfde lichtere stijl toe die we zojuist hebben gemaakt, keer het verloop om zodat het van licht naar donker gaat.
Selecteer de binnenste cirkel die onze lens zal zijn. Dezelfde stijl zal ook voor deze vorm worden gebruikt, alleen in plaats van grijs, gebruiken we een accentkleur van blauw. Zorg ervoor dat u ook een maakt Grafische stijl hiervan ook.
Ten slotte voegen we onze hoogtepunten toe. Selecteer alle groene elementen en vul ze met plat wit en laat ze vallen ondoorzichtigheid naar beneden 25%. Zorg ervoor dat u dit opslaat als een Grafische stijl ook. De laatste cirkel links op de vorm is een harde highlight, dus laten we dat als wit op 100%, zorg ervoor en verwijder de rand.
Laten we de inkepingen maken voor onze tandwielvorm. Selecteer de Afgeronde rechthoek-tool en maak een rechthoek die dat is 20 x 110 px en klik het op het kunstbord. Dupliceer deze vorm nog drie keer en roteer ze naar 45º hoeken om een bloemvorm te maken.
Selecteer vervolgens de Ellipse Tool (L) en maak verschillende concentrische cirkels. De eerste is 90 x 90 px, dan 60 x 60 px, en tenslotte 30 x 30 px. Zet ze nu zoals u hieronder ziet.
Selecteer de bloemvorm en de onderste cirkel en Verenigen hen. Selecteer vervolgens de kleinste cirkel en dupliceer deze. Selecteer nu een van de kleine gedupliceerde cirkels en de grotere vormen en Minus voorkant om een geheel in het midden te laten.
Laten we nu opnieuw wat schaduwen maken. Begin met het maken van rechthoeken die de helft van de vormen bedekken. Omdat we de extra uitrustings-einden hebben, zullen we er ook enkele schaduwen aan toevoegen. Plaats de hoeken op een lijn voor de versnellingsschaduwen op het punt waar de cirkel het tandwieluiteinde raakt.
Maak nu de werpschaduw. Dupliceer de onderste tandwielvorm en duw deze naar voren 15px zoals ons vorige pictogram. Mengsel de twee vormen dan Uitbreiden en Verenigen hen.
Maak nu de hoogtepunten. Vergeet niet om richting de rode kleur te duwen
Roteer tenslotte de vormen 45º en pas onze Grafische stijl van vroeger. Dit pictogram is vrij eenvoudig, dus we gebruiken alleen de donker grijze stijl en zorgen ervoor dat het verloop van de binnenste cirkel wordt omgekeerd.
Ons oogpictogram gebruikt veel cirkels. Dus, selecteer de Ellipse Tool (L) en maak verschillende concentrische cirkels. De eerste is 120 x 120 px, dan 50 x 50 px, en tenslotte 20 x 20 px. Zet ze nu zoals u hieronder ziet.
Selecteer de grootste cirkel en schakel over naar de Ankerpuntgereedschap converteren (Shift + C). Selecteer de twee punten aan zowel de linker- als de rechterkant en klik om ze scherpe punten te maken. Selecteer nu de Directe selectie gereedschap (A) duw het bovenste gebogen anker naar beneden 20px. Herhaal dit ook voor de onderkant, maar duw het in plaats daarvan omhoog.
Selecteer nu al deze vormen samen en draai deze 45º met de klok mee. Nadat we onze schaduwen en hoogtepunten op hun plaats hebben geplaatst, roteren we deze terug zodat ze in het juiste perspectief zijn.
Selecteer de Ellipse Tool (L) en creëer een ovaal dat is 15 x 20 px en lijn het uit zoals hieronder te zien is.
Creëer de schaduwen en hoogtepunten zoals we eerder hebben gedaan. De vormen in tweeën splitsen met rechthoeken en de verkenner paneel.
Selecteer al onze vormen nogmaals en draai ze terug 45º, pas dan onze grafische stijlen toe. Met onze lichtste grijze kleur voor het belangrijkste ooggedeelte, het blauw met de gradiënt omgekeerd voor de iris en een donkergrijs die we nu voor de leerling zullen introduceren.
We zijn halverwege klaar met onze icon set! Laten we er een maken die staat voor chatten of reacties. Met de Afgeronde rechthoek-tool maak een rechthoek die dat is 80 x 75 px
Nu met de Rechthoekgereedschap (M) maak een rechthoek die dat is 25 x 15 px lijn het vervolgens uit met de onderkant en 15px van rechts.
Met de Ellipse Tool (L) maak drie cirkels die dat zijn 15 x 15 px en lijn ze uit met het midden van de afgeronde rechthoek zoals hieronder te zien is.
Schakel de Direct selectie gereedschap (A) en selecteer het punt linksonder dat de onderste rechthoek vormt en verwijder deze om een rechthoekige driehoek te vormen, zorg ervoor dat je het pad sluit als je klaar bent.
Selecteer de afgeronde rechthoek en de driehoek en Verenigen om een volledige vorm te krijgen. Eenmaal verenigd, dupliceert u deze vorm van de spraakballon en draait u deze horizontaal en duwt u deze naar beneden en naar rechts 15px onder de andere vormen.
Net als bij het oogpictogram, selecteert u alle vormen en draait u deze vervolgens 45º. We zullen in deze hoek werken aan de schaduwen en markeringen, zodat wanneer we deze terugdraaien ze correct worden gegoten.
Net als in de vorige pictogrammen laten we scherpe randen maken om schaduwen en hooglichten aan te geven. Wees je bewust van je schaduwen. Je wilt de illusie creëren dat de cirkels een heel lange schaduw werpen over de bubbel en dat de bovenste luchtbel een schaduw werpt over de onderste. Voor de schaduwen van de cirkels gebruik ik gewoon een rechthoek met dezelfde hoogte als de cirkel en breed genoeg om over de ballon te passen en verwijder vervolgens het overtollige.
Draai nu de vormen terug en pas uw grafische stijlen toe. De onderste luchtbel zal ons donkerder grijs zijn, terwijl de bovenste luchtbel ons lichtere grijs zal zijn en de punten onze accentblauwe kleur zullen zijn
Laten we naar onze klok gaan. Met de Ellipse Tool (L) maak verschillende concentrische cirkels. De eerste is 100 x 100 px, dan 75 x 75 px, en tenslotte 10 x 10 px. Zet ze nu zoals u hieronder ziet.
Nu gaan we de wijzers van de klok maken. Selecteer de Rechthoekgereedschap (M) maak een rechthoek die dat is 10 x 30 px, een andere die is 10 x 20px, en een andere die dat is 2 x 30 px. Lijn ze nu zo uit dat de onderkant van de rechthoeken het midden van de cirkels raakt.
Schakel over naar de Roteer gereedschap (R) en selecteer de lange magere rechthoek. Plaats de muisaanwijzer op het middelpunt van de vorm en klik en sleep die stip naar de onderkant van de rechthoek, zorg ervoor dat deze in het midden blijft en naar de onderkant springt. Draai nu de vorm 135º met de klok mee. Herhaal deze stap voor het stuk met een korte rechthoekige rechthoek, draai het alleen tegen de klok in.
Selecteer de kleinste cirkel in het midden en de lange magere hand en Verenigen ze samen en plaats ze boven de andere handen. Selecteer nu alle vormen en roteer 45º
Snijd de vormen doormidden zoals we eerder hebben gedaan en maak onze werpschaduw en de hoogtepunten. Voor het hoogtepunt vond ik het echter een goed idee om een hoogtepunt te hebben in het donkere gedeelte dat op het onderste gedeelte zou vallen. dit geeft het een pop van dimensionaliteit die er niet zou zijn zoals we hebben gedaan.
Draai de vormen terug en pas uw Grafische stijlen. Het gezicht wordt het lichtgrijs, de buitenrand en de minuten- en uurwijzer worden donker grijs en de secondewijzer is onze accentkleur
Laten we voor ons laatste pictogram een kalender maken. Selecteer de Afgeronde rechthoek-tool en maak een rechthoek die dat is 90 x 80 px.
Dupliceer deze afgeronde rechthoek en lijn deze uit met de rechteronderhoek. Er zijn geen punten, het zal niet exact uitgelijnd zijn, maar de knipfunctie zou je moeten laten weten wanneer je in de buurt bent. Eenmaal daar, duwt u het duplicaat naar links en naar links 20px. Nu in de verkenner paneel kiezen Verdelen uit de lijst met pictogrammen aan de onderkant. Schakel vervolgens over naar de Direct selectie gereedschap (A) en selecteer de buitenste ondervorm en verwijder deze. Verwijder vervolgens de gebogen rechterbenedenhoek zodat u een recht stuk overhoudt 45º rand.
Selecteer de Rechthoekgereedschap (M) maak een rechthoek die dat is 90 x 25 px en lijn het uit naar de bovenkant van de vorm. Na het dupliceren van de onderste grote afgeronde rechthoek selecteert u zowel de bovenste rechte rechthoek als de afgeronde rechthoek en gebruikt u deze Snijden van de verkenner paneel.
Maak er vervolgens twee Afgeronde rechthoeken die sterk zijn 15 x 30 px en de hoeken zijn voldoende afgerond om een pilvorm te maken. Lijn ze vervolgens uit met de bovenkant van het element zoals hieronder te zien is.
Schakel over naar de Type Tool (T) en typ een nummer. Iedereen die je wilt, zal ik "9" gebruiken omdat het de eerste is die voor de geest kwam. Voor het lettertype gebruiken we "Helvetica" met een grootte van 50px. Ga niet naar Object> Uitbreiden en converteer het type naar een pad.
Selecteer alle vormen en draai deze 45º. Voeg nu uw schaduwen en hoogtepunten toe zoals we eerder hebben gedaan. Houd er rekening mee dat de vouw die we in de benedenhoek hebben gemaakt een schaduw zal werpen. Hiervoor maken we gewoon een rechthoek die dezelfde hoogte heeft als de vouw en Snijden het van een duplicatie van de onderste rechthoek.
Roteer tenslotte de vormen terug en pas uw grafische stijlen toe. De onderste afgeronde rechthoek wordt ons lichtgrijs, de vouw wordt een vlak wit, de pilvormen worden ons donkergrijs, de bovenste rechthoek wordt onze accentkleur en het nummer is hetzelfde donkergrijs van onze leerling in de oogpictogram dat we hebben gemaakt.
En daarmee is onze pictogramreeks voltooid. Ik heb een platte achtergrondkleur toegevoegd met een donkergrijs om de pictogrammen te laten opvallen. Voel vrij om deze op uw kunstbord in te delen.
Ik hoop dat ik je kon laten zien dat plat pictogrammen inherent 'plat' zijn, maar dat ze niet zonder stijl hoeven te zijn. Met welke andere pictogrammen kun je komen??
Accentsconagua