Share
Met deze tutorial laat ik je zien hoe je een iOS-kaartindicatorpictogram kunt maken dat perfect is om te importeren in je volgende op kaarten gebaseerde app-ontwerp. We gebruiken een enkele vorm met meerdere uiterlijkkenmerken om een eenvoudig te gebruiken en bewerken grafische stijl te maken in Adobe Illustrator.
Laten we beginnen met het voorbereiden van ons document. Open Illustrator en druk op Command + N om een nieuw document te maken. Voer 500 in het vak breedte in en 500 in het vak hoogte en klik vervolgens op de knop Geavanceerd. Selecteer RGB, Scherm (72ppi) en zorg ervoor dat het vakje Nieuwe objecten uitlijnen op pixelraster niet is aangevinkt voordat u op OK klikt.
Bij het werken met resolutieonafhankelijke apparaten is pixelperfectie een must en om scherpe vormen te maken, is het eenvoudiger om Grid View in te stellen en Pixel Snapping aan te zetten, dus dat doen we nu. Laten we het raster inschakelen (Weergave> Raster tonen) en vervolgens Snap to Grid (Beeld> Uitlijnen op raster). Nadat deze zijn ingeschakeld, heb je om de 1px een raster nodig. Ga eenvoudig naar Illustrator> Voorkeuren> Hulplijnen & raster, voer 1 in het vak Rasterlijn in en 1 in het vak Onderverdelingen. Laten we nu de maateenheid instellen op pixels in Illustrator> Voorkeuren> Eenheid> Algemeen. Eenmaal voltooid, zou uw document er uit moeten zien als de onderstaande afbeeldingen.
Nu ons document is ingesteld, beginnen we met het maken van onze cirkelvorm die wordt gebruikt voor het indicatorpictogram. Omdat we voor een retina-display maken, moeten we dubbel zo groot zijn als het object dat we willen maken. Op ons netvliesapparaat zullen we willen dat de indicator 16px bij 16px lijkt te zijn, dus als we dat met 2 vermenigvuldigen, komen we uit op 32px. Laten we met dit in gedachten onze Ellipse Tool (L) selecteren en vervolgens ergens op het canvas klikken. Wanneer het dialoogvenster verschijnt, typen we in 32px voor zowel de breedte als de hoogte. Dit zal de perfecte cirkel creëren die nodig is voor onze indicator.
Tip: Druk op de letter "D" op uw toetsenbord om uw vul- en lijnkleur opnieuw in te stellen naar de standaardinstellingen.
Met onze getrokken vorm kunnen we de leuke dingen bereiken. Open het deelvenster Uiterlijk (als dit nog niet naar Venster> Uiterlijk) gaat en laten we beginnen met het maken van ons pictogram.
Er zijn nogal wat uiterlijkkenmerken voor deze vorm, zodat u gemakkelijker kunt volgen. We werken van onder naar boven in het deelvenster Uiterlijk.
Om te beginnen, selecteert u in het paneel Uiterlijk het onderste vulitem en maken we een ondoorzichtige tot transparante radiale gradiënt zoals aangegeven in de afbeelding hieronder en pas dan de dekking aan tot 50%. Als dat vullingsitem nog steeds is geselecteerd, gaan we ook naar de knop Nieuw effect toevoegen (het lijkt op de letters 'fx') onder aan het deelvenster Vormgeving en selecteer vervolgens Pad> Offsetpad en voer de onderstaande kenmerken in. We zullen ook het Fill-item moeten transformeren, dus selecteer nogmaals de knop Add New Effect en navigeer naar Distort & Transform> Transform en voer de attributen in zoals hieronder te zien is. Als je dit nog niet hebt geraden, is dit de schaduw voor het indicatorpictogram en wat we hebben gedaan is een volledig vector slagschaduw maken die een lichte halo vormt voor onze hoofdvorm en net genoeg wordt aangetrokken om diepte te bieden. Het ziet er nu niet zo uit, maar de dingen zullen snel beginnen samen te trekken.
Laten we nu een ander vulitem maken boven ons vulling-item voor verloop. Standaard wordt dit zwart tot transparant verloop toegevoegd, maar we moeten dit verloop verwijderen in plaats van een effen kleur. Laten we doorgaan en een mooie felrode kleur selecteren voor deze laag, zoals hieronder wordt uitgelegd. Op dit moment lijkt het misschien vreemd om zo'n levendig rood te gebruiken, maar het zal allemaal in een oogwenk zinvol zijn. Deze onderste laag zal fungeren als zowel onze basiskleur als ons secundaire hoogtepunt zodra we doorgaan naar de volgende stap.
Laten we opnieuw een nieuw vulitem maken. Dit wordt standaard ingesteld op de platte rode kleur die we eerder hebben gekozen, maar we willen een mooi radiaal verloop voor dit item, dus selecteer het deelvenster Verloop en voer de onderstaande kenmerken in. Een mooie paars-witte combo ingesteld op Vermenigvuldigen en de dekking daalt naar 50% voegt een mooie volle, afgeronde 3D-vorm toe aan het pictogram. Om het 3D-effect nog verder te verhogen, laten we Zoom (Z) in ons pictogram plaatsen totdat we de afzonderlijke pixelvierkanten op ons kunstbord te zien krijgen. Met dat verloopitem nog steeds geselecteerd, kiest u het verloopgereedschap (G) in het toolpaneel en wordt de verloopbalk boven het pictogram weergegeven. We gaan klikken en deze balk omhoog slepen met ongeveer 2,5 pixels met behulp van ons kunstbord als gids en ervoor zorgen dat de balk zo gecentreerd mogelijk blijft.
Nu gaan we onze primaire lichtbron creëren. Bedenk dat we van onder naar boven werken, dus dingen zijn misschien niet logisch totdat we klaar zijn met de volgende paar stappen.
Als we in het achterhoofd houden dat we een heldere glans op ons pictogram proberen te maken, spreekt het voor zich dat deze glans wat diffusieverlichting tegen ons object zal werpen, dus dit is wat we nu gaan maken. We gaan opnieuw een nieuwe Fill-laag maken. Laten we dit verloop aanpassen zodat het ondoorzichtig en transparant is, zoals hieronder wordt beschreven, met een totale dekking van 60%. Selecteer het gereedschap Verloop (G) en gebruik de witte hendelbalk met het zwarte midden aan de linkerkant van het verloopmarkering en sleep die hendel richting het midden van de cirkel, zodat deze bijna de helft van de oorspronkelijke grootte heeft en klik vervolgens op de middelste verloopbalk en sleep het een beetje naar links en naar links. Houd deze laag in de gaten, misschien wilt u er later nog eens op terugkomen om deze later precies te laten uitlijnen met onze witte hoofdmarkeringslaag.
Nu we wat diffusie hebben, voegen we een gloed toe aan de markering zelf. Maak een nieuwe vullaag en vul deze met een wit tot transparant verloop zoals hieronder wordt beschreven. Houd er rekening mee dat de verlooppositie overeenkomt met de onderstaande laag, dus voordat u dit verloop aanpast, klikt u op het staal "Geen" in het deelvenster Stalen om die vulling te verwijderen en voegt u vervolgens het nieuwe dekkende transparant toe zodat de positie wordt gereset . Met het verloop op zijn plek willen we deze Fill-laag ook Offset en Transformeren. Klik op de knop Nieuw effect toevoegen (het lijkt op de letters 'fx') onder in het deelvenster Vormgeving en selecteer vervolgens Pad> Offsetpad en voer de onderstaande kenmerken in. We moeten ook het item Vullen transformeren, dus selecteer nogmaals de knop Nieuw effect toevoegen en ga naar Vervormen & transformeren> Transformeren en voer de kenmerken in zoals hieronder te zien is.
Met die gloed uit de weg laten we ons eigenlijke hoogtepunt toevoegen. Klik nogmaals op de knop Nieuwe vulling toevoegen en vul deze met een platte witte kleur. Selecteer vervolgens de knop Nieuw effect toevoegen (deze ziet eruit als de letters 'fx') onder in het deelvenster Vormgeving en selecteer vervolgens Pad> Offsetpad en voer de geschetste kenmerken in hieronder. We moeten ook het item Vullen transformeren, dus selecteer nogmaals de knop Nieuw effect toevoegen en ga naar Vervormen & transformeren> Transformeren en voer de kenmerken in zoals hieronder te zien is.
Op dit moment kun je teruggaan naar de rode gradiëntdiffusielaag die we een paar stappen terug hebben gemaakt en het middelpunt van het verloop aanpassen om direct onder de witte markering te staan.
Laten we nu die zwarte rand aanpassen die daar al die tijd naar ons heeft gestaard. We zullen het naar buiten brengen met een slagkracht van 2px en de hieronder geschetste kleur.
De indicator zelf is nu voltooid, maar laten we nog een stap verder gaan en ook de GPS-radiusring maken. Klik nogmaals op de knop Nieuwe vulling toevoegen en vul deze met een rood tot transparant verloop zoals hieronder wordt beschreven en zet de dekking op 25%. Selecteer vervolgens de knop Nieuw effect toevoegen (het lijkt op de letters "fx") onder in het deelvenster Vormgeving en selecteer vervolgens Pad> Offsetpad en voer de onderstaande kenmerken in.
Voor het laatste deel van het pictogram voegen we de rand rond de GPS-radiusring toe. Klik op de knop Nieuwe lijn toevoegen onder in het deelvenster Uiterlijk en kies een 2px rood lijngewicht aan de binnenkant van de vorm. Laten we nu het pad verschuiven door op de knop Nieuw effect toevoegen te klikken (het ziet eruit als de letters 'fx') aan de onderkant van het deelvenster Vormgeving en selecteer vervolgens Pad> Offsetpad en voer de onderstaande kenmerken in. En dan voegen we eindelijk een Outer Glow toe aan deze streek. Klik hiervoor op de knop Nieuw effect toevoegen (het lijkt op de letters 'fx') onder in het deelvenster Vormgeving en selecteer vervolgens Stylize> Outer Glow
Op dit punt kun je Shift + klikken op de twee GPS-radiusringen om ze beide in het deelvenster Uiterlijk te selecteren en vervolgens naar de onderkant van deze lijst te slepen, zodat het feitelijke indicatorpictogram bovenop zit.
Met de indicator uit de weg zullen we nu de naam pop-up maken. Selecteer het gereedschap Afgeronde rechthoek en klik op de pagina en voer de informatie in die in de onderstaande afbeelding wordt weergegeven. Houd er rekening mee dat de breedte alles kan zijn wat je wilt, zolang de naam die je later kiest, past maar voor het doel van deze tutorial gebruiken we deze setbreedte.
We moeten ook nog een keer klikken met het gereedschap Afgeronde rechthoek om de pijl onderaan te maken. hiervoor hebben we het nodig dat het perfect vierkant is en dat we de straal laten vallen en hieronder aangeven. Wanneer de vorm is gemaakt, laten we deze 45 graden draaien. Hiertoe selecteert u het selectiegereedschap (V) en plaatst u uw muis in de buurt van een hoek van het vierkant. Terwijl u de Shift-toets op uw toetsenbord ingedrukt houdt, sleept u de vorm in een willekeurige richting totdat deze eruit ziet als een ruit zoals te zien in de onderstaande schermafbeelding..
Nu zullen we deze objecten uitlijnen om gecentreerd te zijn met elkaar. Terwijl het selectiegereedschap (V) in de hand verschuift, klikt u op beide objecten, zodat ze allebei tegelijkertijd worden geselecteerd. We gaan nu naar het paneel Uitlijnen (Venster> Uitlijnen) en kiezen de tweede optie onder de kop Uitlijning objecten genaamd Horizontaal uitlijncentrum. Klik vervolgens op de laatste optie onder dezelfde kop genaamd Vertical Align Bottom.
Terwijl het selectiegereedschap (V) nog steeds is ingeschakeld, klikt u op de kleinere ruitvorm zodat het het enige object is dat nu is geselecteerd. Houd Shift op het toetsenbord ingedrukt en druk eenmaal op de pijl-omlaag op uw toetsenbord. Laat de shift los en druk nog drie keer op de pijl omlaag op je toetsenbord om de diamant in de perfecte positie te brengen.
Klik met Shift op de grotere afgeronde vorm zodat beide objecten opnieuw worden geselecteerd en navigeer naar het deelvenster Pathfinder (Venster> Pathfinder) en klik vervolgens op de eerste optie onder de kop Vormmodi met de naam Unite. Beide objecten moeten nu worden samengevoegd tot één.
Met onze pop-up. vorm nu gemaakt we zullen werken aan het stileren. Ga met de geselecteerde vorm naar het deelvenster Uiterlijk (Venster> Uiterlijk) en selecteer de lijn. We houden dit als basiszwart maar laten we instellen dat het buiten de vorm is met een slagkracht van 2px.
Selecteer vervolgens de vulling en we vullen dit met een semi-transparant verloop in grijswaarden van 90 graden, zoals hieronder wordt uitgelegd.
Ten slotte voegen we een slagschaduweffect toe aan dit object. Klik op de knop Nieuw effect toevoegen (het lijkt op de letters "fx") aan de onderkant van het deelvenster Vormgeving selecteer vervolgens Stylize> Slagschaduw en voer de opties in die hieronder in de schermafbeelding worden weergegeven.
Laten we dit object een mooi hoogtepunt geven bovenaan. Met het geselecteerde object zullen we Kopiëren (Command + C) en vervolgens Plakken vooraan (Command + F). Laten we snel terugkeren naar de standaardstijl door op "D" op uw toetsenbord te drukken. Hiermee worden de effecten verwijderd die we eerder hebben toegevoegd en wordt de vorm teruggebracht naar standaard wit met een zwarte streep. Voor het doel van deze markering hebben we geen streek nodig, dus ga naar je Tools-venster en klik op de optie voor het vullen van de lijn onderaan de balk om deze te selecteren. Klik vervolgens op het witte vierkant met de diagonale rode lijn er doorheen om de lijn volledig te verwijderen. Laten we de lijn laten verdwijnen (Command + C) en vervolgens weer plakken in de voorgrond (Command + F), zodat we nu twee effen witte vormen boven elkaar hebben. Terwijl de bovenste vorm is geselecteerd en het selectiegereedschap (V) is ingeschakeld, drukt u tweemaal op de pijl omlaag op uw toetsenbord om het object naar beneden te duwen. Na het verschuiven, klik je op het gewone object erachter om beide tegelijk te selecteren. Terwijl beide objecten zijn geselecteerd, navigeert u naar het deelvenster Pathfinder (Venster> Pathfinder) en selecteert u de tweede optie onder de kop "Vormmodi" met de naam "Minus Front". Je moet nu worden overgelaten met een klein stukje van de originele vorm helemaal bovenin. Laten we met deze splinter geselecteerd de dekking laten zakken naar 25% in het paneel Uiterlijk (Venster> Uiterlijk).
Nu maken we de tekst voor deze pop-up. Selecteer het gereedschap Tekst (T) in het deelvenster Gereedschappen en klik vervolgens op het kunstboard en typ de gewenste naam. Klik in het deelvenster Gereedschappen op de vulkleur en wijzig deze in wit. Navigeer nu naar het deelvenster Teken (type> type> teken) en pas het formaat en het lettertype aan, zoals hieronder wordt beschreven.
Ga met de geselecteerde tekst naar het deelvenster Uiterlijk (Venster> Uiterlijk) en klik op de knop Nieuw effect toevoegen (het lijkt op de letters "fx") onder in het deelvenster Vormgeving selecteer vervolgens Stileer> Slagschaduw en voer de opties uit die worden beschreven in de screenshot hieronder. We kunnen ook het selectiegereedschap (V) gebruiken om de tekst naar de gewenste locatie in de bubbelvorm te slepen. Omdat Smart Guides en Snap to Grid is ingeschakeld, zou dit gemakkelijk te vinden moeten zijn.
Laten we met de tekst uit de weg het pijlpictogram maken. Selecteer het gereedschap Afgeronde rechthoek en klik op het kunstboard en sluit vervolgens deze opties aan.
Selecteer nu het selectiegereedschap (V) en klik op de nieuw gemaakte rechthoek. Met het geselecteerde object zullen we Kopiëren (Command + C) en vervolgens Plakken vooraan (Command + F). Laten we nu dit nieuwe object 90 graden draaien. Nu zullen we deze objecten uitlijnen om een achterwaartse L-vorm te vormen. Terwijl het selectiegereedschap (V) in de hand verschuift, klikt u op beide objecten, zodat ze allebei tegelijkertijd worden geselecteerd. We gaan nu naar het paneel Uitlijnen (Venster> Uitlijnen) en kiezen de derde optie onder de kop Aligneer objecten met de naam Horizontaal uitlijnen rechts. Klik vervolgens op de laatste optie onder dezelfde kop genaamd Vertical Align Bottom.
Terwijl beide objecten nog steeds zijn geselecteerd, navigeert u naar het deelvenster Pathfinder (Venster> Pathfinder) en klikt u vervolgens op de eerste optie onder de kop Vormmodi met de naam Unite. Beide objecten moeten nu worden samengevoegd tot één. Laat het gereedschap met de selectie (V) nog steeds 45 graden draaien. Hiertoe selecteert u het selectiegereedschap (V) en plaatst u uw muis in de buurt van een hoek van het vierkant. Terwijl u de Shift-toets op uw toetsenbord ingedrukt houdt, sleept u een hoek rechts van het selectiekader omhoog totdat het lijkt op een pijl die naar het vierkant wijst. rechts.
Ga met de pijl naar het deelvenster Uiterlijk (Venster> Vormgeving) en klik op de knop Nieuw effect toevoegen (het lijkt op de letters "fx") onder in het deelvenster Vormgeving selecteer vervolgens Stileer> Slagschaduw en voer de opties uit die worden beschreven in de screenshot hieronder. We kunnen ook het selectiegereedschap (V) gebruiken om de pijlvorm naar de gewenste locatie in de bubbelvorm te slepen.
Met de pop-up. sectie voltooid schakel het selectiegereedschap (V) in en sleep een selectie over de pop-up. objecten om ze allemaal tegelijkertijd te selecteren. Ga nu naar Object> Groep (Command + G) in het menupaneel om deze objecten samen te groeperen. We kunnen deze groep vervolgens boven het indicatorpictogram slepen en het midden centreren, zodat het lijkt op de onderstaande schermafbeelding. En met dat op zijn plaats, zijn we klaar!
Ik hoop dat ik je heb laten zien hoe je het paneel Uiterlijk kunt gebruiken om complexe effecten te maken zonder extra lagen nodig te hebben. Voel je vrij om met verschillende kleuren te spelen zoals je wilt. Omdat er tegenwoordig zoveel resolutie-onafhankelijke apparaten rondzweven, is het echt geweldig om oneindig schaalbare objecten te kunnen gebruiken die kunnen worden gebruikt en hergebruikt in je app-ontwerpen..
Accentsconagua