Share
Wat je gaat creërenIn deze zelfstudie maken we standaard een set vlakke pictogrammen voor Apple Watch die standaard in het originele startscherm van Apple Watch zijn te vinden. We zullen basisvormen en Warp-effecten gebruiken, evenals enkele meer gecompliceerde methoden om een trendy gebruikersinterfaceontwerp te maken. Laten we beginnen!
Apple Watch-pictogrammen zijn ontworpen in een trendy vlakke stijl die sterk lijkt op de iOS-pictogrammen, die te vinden zijn in de nieuwste iOS-apparaten op iPhone, iPad of andere Apple-apparaten. Toch is er een opvallende specifieke functie: de pictogrammen zijn rond. In deze zelfstudie gebruiken we een rond raster om één basis voor elk pictogram te maken. U kunt een heel mooi pictogrammalplaatje in vector downloaden om het gemakkelijker te maken om mee te werken.
Als u geïnteresseerd bent in meer diepgaande theorie over het maken van pictogrammen voor Apple Watch, raad ik u ten sterkste aan de officiële richtlijnen en specificaties van Apple Watch Human Interface te doorlopen.
Bekijk ook deze zeer nuttige en beschrijvende artikelen "Pictogrammen voor de Apple Watch maken" en "Pictogrammen voor Apple Watch - De definitieve handleiding", waar mensen hun gratis sjablonen en kennis over het maken van aangepaste pictogrammen delen.
Nu is het tijd om verder te gaan en de Apple Watch-pictogrammen te maken! Als u wilt dat uw pictogrammen pixel-perfect en levensecht zijn, zoals de originele Apple Watch-pictogrammen, kunt u een voorbeeldafbeelding van het Apple Watch-startscherm vinden in Google Images. Bestand> Plaats het op uw tekengebied en gebruik het als een sjabloon, teken uw pictogrammen erbovenop, met behoud van de gewenste afmetingen en verhoudingen. Volg anders deze zelfstudie als een inspirerende gids, niet als een strikte instructie om exacte kopieën van de originele pictogrammen te maken.
Begin met het openen van een van de pictogramsjablonen (voor deze zelfstudie gebruiken we de 80 x 80 px pictogram sjabloon voor 38 mm kijk maar). Ga naar Beeld> Raster verbergen om het raster onzichtbaar te maken als het je afleidt, maar zorg ervoor dat je het raster hebt Slimme gidsen en snapping ingeschakeld (u kunt ze in hetzelfde menu vinden) om het gemakkelijker te maken om mee te werken.
Laten we beginnen met het maken van ons eerste pictogram voor de Time-app door een. Te plaatsen 4 x 4 px zelfs cirkel in het midden van de sjabloon. Dubbelklik op de Ellipse Tool (L) om het pop-upoptiesvenster te openen en ga dan naar richten paneel om de cirkel horizontaal en verticaal op het tekengebied uit te lijnen. Vul de cirkel met oranje (# FF9506).
Gebruik de Rechthoekgereedschap (M) om een te maken 2 x 40 px tweede wijzer van onze klok, gevuld met dezelfde oranje kleur, en plaats deze langs de centrale richtingslijn, zoals te zien is op de screenshot.
Jij kan richten de hand naar het belangrijkste object, door op de cirkel te klikken terwijl u de knop ingedrukt houdt alt sleutel.
Laten we de secondewijzer kopiëren, korter maken en draaien -60 graden, plaats het langs de gids, zoals hieronder weergegeven.
Nu vormen we het lichaam van de minutenwijzer. Maak een zwarte 4 x 30 px rechthoek en gebruik de Live hoeken functie om beide uiteinden afgerond te maken door met de kleine cirkelmarkeringen te trekken Direct selectie gereedschap (A) tot hun maximum (2 px hoekradius in ons geval).
Plaats de hand op de juiste plaats langs de hulplijn (u kunt deze iets kleiner maken, zodat deze in de binnenste cirkel van de pictogrambasis past).
Maak een nieuwe rechthoek van 4 x 20 px maat voor de urenwijzer. Maak het afgerond, draai naar 60 graden en plaats het aan de andere kant dan de minutenwijzer.
Maak tot slot een 80 x 80 px witte ellips met de Ellipse Tool (L) voor de pictogrambasis en plaats deze onder alle andere objecten. Super goed! Ons eerste pictogram is klaar; laten we naar de volgende gaan.
Nu maken we het pictogram Mail. Begin met het vormen van de envelop door een 50 x 33 px rechthoek van elke kleur.
Voeg een driehoek toe met 2 pt Stroke ofwel met behulp van een Polygoon gereedschap met 3 zijden waarde of met de Pen gereedschap (P). Object> Uitbreiden de driehoek om er bochten van te maken.
Voeg nog een driehoek toe aan de bovenkant van de basis van de envelop, maak de onderste hoek afgerond en breid de vorm uit. U kunt de bovenste en onderste delen van de rechthoeken wissen met de Eraser Tool (Shift-E), omdat we ze niet nodig hebben.
Verwijder het bovenste gedeelte van de onderste driehoek met de Eraser Tool (Shift-E) en Verenigen beide delen van de driehoeken in verkenner. Maak tenslotte een kopie van de basisvorm van de envelop (Control-C> Control-F), selecteer zowel de rechthoek als de bovenste vorm en gebruik de Snijden functie van verkenner om de delen buiten de envelop af te snijden.
Selecteer opnieuw de rechthoek en de strepen en pas de Minus voorkant functie van verkenner om de lijnen te verwijderen. Zet de kleur van de envelop op wit en voeg een cirkelbasis toe voor ons pictogram, vul het met een lineair verloop van donkerder blauw (# 2066F0) bovenop naar lichter blauw (# 1DD4FD) onder aan.
Ons volgende pictogram is voor de app Muziek, die uit het enige element bestaat: een muzieknootteken. Begin met het vormen van de notitie met een 27 x 11 px rechthoek. Selecteer de ankerpunten aan de linkerkant van de vorm met de Direct selectie gereedschap (A) en sleep ze naar beneden om de vorm scheef te trekken.
Gebruik de Rechthoekgereedschap (M) maak nog twee vormen en begin met het vormen van de "poot" van de notitie.
Selecteer drie ankerpunten van het onderste vierkant met de Direct selectie gereedschap (A) en maak ze afgerond. Dan Verenigen de vormen in verkenner en maak de hoek tussen de vormen ook afgerond, met behulp van de Live hoeken voorzien zijn van.
Voeg het tweede deel van de noot toe en maak de algemene vorm gladder en afgerond. Werk af met het pictogram door de basis te maken, gevuld met een lineair verloop van oranje (# FA5D3B) roze (# FF2968).
Nu gaan we naar een reeks pictogrammen die verband houden met de tijd en die allemaal in één stijl zijn gemaakt. Begin met het vormen van een 48 x 48 px zelfs cirkel, en een kleinere cirkel binnenin. Gebruik de Minus voorkant functie van verkenner om een ring te maken.
Maak een kleinere, elliptische ring in de eerste vorm en voeg twee gekruiste lijnen toe, uitgelijnd met het midden.
Voeg een horizontale lijn toe in het bovenste gedeelte van de vorm en buig het met behulp van Effect> Verdraaien> Boog. Stel de Horizontale buiging waarde voor -35%.
Voeg nog een gebogen lijn toe in het onderste gedeelte van onze globe en voltooi dit pictogram door de bolvorm uit te breiden en een verloopvoet met een donkeroranje onderkant te vormen (# ff7632) en lichtoranje bovenkant (# ff9408). Voeg een kleinere cirkel van donkerder oranje kleur toe (# e45221) en verberg het achter de vorm van de bol, waardoor het meer contrast krijgt.
Voor ons volgende pictogram, de stopwatch, gebruiken we de basis van het pictogram World Clock dat we eerder hebben gemaakt. Vorm het midden van de chronometer door een 8 x 8 px ellips, uitgelijnd met a 2 x 25 px rechthoek voor de tweedehands van het horloge.
Gebruik de Rechthoekgereedschap (M) om kleine details aan de bovenkant van onze stopwatch toe te voegen. Maak de knop van de stopwatch meer afgerond, gebruik de Live Corners en stel de hoekradius in op 1,4 px.
Laten we verdergaan naar het Timer-pictogram - het heeft dezelfde basis als het chronometer-icoon. Vorm een 2.5 x 13 px streep in het midden bovenste deel van de ring met de Rechthoekgereedschap (M). Pak dan de Polygoon gereedschap, instellen van de Sides hoeveelheid aan 3, of gebruik de Pen gereedschap (P) om een driehoek te vormen. Plaats het zoals getoond op een screenshot hieronder, alsof het een stukje taart is.
Selecteer zowel de standaard witte ring als de driehoekige vorm en gebruik de Minus voorkant functie om het linkergedeelte van de ring uit te snijden. Voeg een kleine toe 6 x 6 px cirkel in het midden van ons pictogram.
Roteer tenslotte de cirkel zodat het bovenste ankerpunt ongeveer is 45 graden naar links. Sleep het ankerpunt met de Direct selectie gereedschap (A), uitbreiding van de vorm. Converteer het geselecteerde ankerpunt naar de hoek ofwel met behulp van de Converteren knop in het bovenste bedieningspaneel of door erop te klikken met de Anchor Point Tool (Shift-C), aldus onze vorm in de hand van een horloge veranderen.
Ons laatste pictogram in deze set is het alarm. Het heeft dezelfde basis met de witte ring als vorige oranje iconen. De wijzers van de klok zijn gevormd met twee smalle strepen gemaakt met de Rechthoekgereedschap (M).
Laten we het bovenste deel van de wekker vormen door een gelijkmatige cirkel te maken met de Ellipse Tool (L) en het in twee gelijke delen te verdelen door op de ankerpunten aan de zijkant te klikken met de Schaargereedschap (C). Plaats de helften bovenop het alarm en voeg onderaan twee kleine "poten" toe om het pictogram te voltooien.
Het Maps-pictogram is vrij eenvoudig en bevat niet zo veel elementen. Begin met het vormen van het midden met een 40 x 40 px cirkel van een blauw (# 087eff) kleur. Vorm een kompaspijl van a 17 x 25 px driehoek, kop omhoog.
Voeg een beige toe (# e5decb) pictogrambasis. Ga naar Object> Pad> Ankerpunten toevoegen enselecteer het ankerpunt in het midden aan de onderkant en trek het iets omhoog, vorm de pijlpunt.
Plaats een brede verticale streep, gemaakt met een 26 x 83,5 px rechthoek, over het pictogram en verenig het met een andere brede streep, plaats het loodrecht. Verberg de gekruiste vorm achter de blauwe cirkel met de pijl. Selecteer de basis van het pictogram en de gekruiste strepen en gebruik de Verdelen functie van verkenner om de vorm in drie delen te splitsen.
Vul de delen van de pictogrambasis met groen (# 78c73d) en lichtroze (# fbc7d2) kleuren.
Laten we naar het pictogram Weer gaan. Vul de basisvorm van de lucht met een lineair verloop van donkerder blauw (# 2066f0) bovenop naar lichter blauw (# 1dd4fd) onder aan. Voeg een gele (lineair verloop vanaf # ffc505 naar # fee403) cirkel voor de zon in het linkerdeel van het pictogram. Begin met het vormen van de wolken met twee cirkels: a 25,5 x 25,5 px cirkel in het midden van de sjabloon en a 21 x 21 px omcirkel dichter bij het rechterdeel van het pictogram.
Maak een 43 x 16 px rechthoek en maak de hoeken afgerond 8 px hoekradius. Lijn de rechthoek uit met de cirkels en Verenigen alle drie de vormen erin verkenner om een vloeiende, afgeronde wolk te vormen.
Vul de wolk met witte kleur en maak deze semi-transparant, verlaag de ondoorzichtigheid naar 90%.
Laten we verdergaan naar het camerapictogram. Maak een grijze basiscirkel, gevuld met een lineair verloop van donkergrijs (# 8e9196) onderaan tot lichter grijs (#dadcdd) bovenop en begin met het vormen van het camerasilhouet van een donkergrijze kleur (# 3c3c3c) afgeronde rechthoek.
Voeg een kleiner toe 30 x 17 px rechthoek op de bovenkant en maak de linkerbovenhoek afgerond met 7 px hoekradius. Verenigen de vormen en maak de hoek tussen de vormen ook afgerond.
Voeg een smalle streep toe in het bovenste gedeelte van de camera en gebruik de Minus voorkant functie om het uit te knippen.
Vorm het sluiterpictogram van a 9 x 4 px rechthoek en plaats deze in het midden van onze sjabloon. Gebruik de Pen gereedschap (P) om een pijl toe te voegen die naar beneden wijst naar de sluiter. Stel de Beroerte gewicht naar 4 pt en maak de doppen en hoek van de lijn afgerond in de Beroerte paneel.
Voeg de laatste details toe aan onze camera: vorm een felgele (# fac81b) indicator van a 6 x 6 px grootte. Creëer verder een grote cirkel met 4 pt Stroke-gewicht. Plaats de cirkel in de rechterbenedenhoek van de camera, zoals weergegeven in de schermafbeelding.
Object> Uitbreiden de grote cirkel, verander het in de ring. Selecteer zowel de ring als de camera en pas toe Minus voorkant om de ring uit te snijden, het objectglas te vormen. Selecteer vervolgens alle donkergrijze delen van onze camera en verander ze in een enkele samengestelde vorm door op te drukken Controle-8.
Gebruik tenslotte de Shape Builder Tool (Shift-M) of de Snijden functie van verkenner om de onnodige delen van de camera buiten de basis van ons pictogram af te snijden.
Laten we een telefoon maken voor het telefoonpictogram. Creëer een 8 x 40 px rechthoek en gebruik een Arc Warp Effect met 27% Verticale buiging waarde om de rechthoek naar de linkerkant te buigen. Voeg er twee toe 17 x 20 px rechthoeken in de boven- en onderkant van de handset en maak hun hoeken afgerond, waardoor de vormen glad worden. Verenigen alle delen van de handset in verkenner.
Maak de linkerkant van de handset glad door de onnodige ankerpunten te verwijderen met de Ankerpunttool verwijderen (-) en rond de binnenhoeken met de Live hoeken voorzien zijn van. Draai tot slot de telefoon naar 45 graden en plaats het boven de pictogrambasis, gevuld met een lineair verloop van lichter groen (# 86fb71) naar donkerder groen (# 0fd51c).
Laten we het berichtpictogram vormen op dezelfde groene basis die we eerder hebben gebruikt. Maak een 40 x 40 px witte cirkel en trek het een beetje naar de zijkanten, waardoor de vorm naar beneden wordt gedrukt 48 x 40 px. Voeg een klein driehoekje in de onderkant van de witte vorm toe en vorm een tekstballon. Maak de onderste hoek van de driehoek lichtjes afgerond. Gebruik de Arc Warp Effect met -36% verticale buiging waarde om de driehoek enigszins gebogen te maken.
Zo ziet het voltooide pictogram er uit.
Ons volgende pictogram is het pictogram Remote app, dat ook heel eenvoudig is en uit één element bestaat. Maak allereerst een verloopvoet (van donkerblauw # 2066f0 in de bodem tot lichter blauw # 1dd4fd) bovenop. Voeg een witte lijn toe met 5.3 pt Berekend gewicht en richten het naar binnen. Plaats een 30 x 30 px witte driehoek in het midden van ons pictogram.
Maak tenslotte de hoeken van de driehoek afgerond met een 2.5 Hoekradius. Super goed! Het pictogram is gereed, dus laten we doorgaan.
Het Workout-pictogram toont een gestileerd silhouet van een rennende man. Maak een heldere pictogrambasis, gevuld met een lineair verloop van geelachtig groen (# c2ec38) bovenop groen aan de onderkant (# a3fc3f).
Neem de Pen gereedschap (P) en maak afzonderlijke lijnen voor de gebogen armen, benen en romp met 3 pt Stroke-gewicht en afgeronde petten en hoeken. Vergroot de dikte van de Beroerte gewicht van de romplijn naar 6 pt en voeg een toe 9 x 9 px cirkel voor het hoofd.
Object> Uitbreiden de lijnen en vul de vormen met zwarte kleur.
Het pictogram Instellingen bestaat uit een tandwiel. Vorm de tandwielbasis van a 48 x 48 px omcirkelen met een uitgesneden middelpunt, een ring maken. Voeg drie regels toe met 3 pt Stroke-gewicht, verbonden in het midden van de pictogramsjabloon.
Nu moeten we de rimpelingen aan ons tandwiel toevoegen. Vorm een 5 x 9 px rechthoek en maak het bovenste gedeelte een beetje smaller. Maak de bovenste hoeken afgerond met 1.6 Hoekradius. Plaats de rimpelingen op de bovenste en onderste delen van de tandwielbasis.
Laten we de gebruiken Roteer gereedschap (R) om meer elementen toe te voegen. Selecteer beide ribbels, dubbelklik op de Roteer gereedschap (R) om het pop-upoptiesvenster te openen en de Draaien waarde voor 360/18. Op deze manier berekent Adobe Illustrator automatisch de juiste waarde voor 18 vormen. druk de Kopiëren knop.
druk op Controle-D meerdere keren om onze laatste actie te herhalen, meer elementen toe te voegen. Om dit icoon af te maken, selecteer je alle rimpelingen, verander je de vulkleur in wit en Draaien ze allemaal samen door -10 graden.
Ons volgende pictogram is een gestileerde bloem voor de app Foto's. Begin met het vormen van het bloemblad van een 20 x 30 px rechthoek en maak de hoeken afgerond 10 px Hoekradius. Dupliceer het bloemblad en plaats de kopie in het onderste gedeelte van het pictogramsjabloon, zoals te zien is in de onderstaande schermafbeelding. Selecteer beide bloembladen en gebruik de Roteer gereedschap (R) om acht extra exemplaren van de bloembladen te maken, door de 360/8 Hoek waarde en druk op de Kopiëren knop.
druk op Controle-D meerdere keren om de acht-bloemblad bloem te vormen. Verwissel de bloemblaadjes naar Vermenigvuldig de mengmodus en verlaag de ondoorzichtigheid naar 80%. Laten we de juiste kleur toepassen op elk bloemblad, beginnend vanaf de bovenste middelste en bewegend met de klok mee: oranje (# fa9700), geel (# f0e22c), groen (# b5d558), turkoois (# 6ec19d), blauw (# 71b5e1), paars (# 8f60c3), roze (# d782a4) en rood (# ff2c2c).
Zet de bloem op de witte basis van het pictogram.
Het pictogram Aandelen bestaat uit een minimalistisch diagram. Begin met het vormen van het diagram door een helderblauwe (# 02a6f5) verticale lijn van 3 pt maat met de Lijngereedschap (\). Plaats het in het midden van onze sjabloon, op een donkere achtergrond (# 3f3f3f) pictogrambasis.
Voeg een kleine blauwe cirkel boven het midden van de sjabloon toe en breng een donkergrijs (# 3f3f3f) 1 pt Beroerte ernaar om het visueel van de lijn te scheiden. Voeg nog vier regels aan beide zijden van het pictogram toe, met een lichtere (# 555555) 3 pt Stroke.
Object> Uitbreiden de lijnen en snij de onnodige delen buiten de icoonbasis af, ofwel met de Shape Builder Tool (Shift-M) of met behulp van de verkenner.
Werk het pictogram af door er een zigzaggende lijn aan toe te voegen 1,5 pt Stroke voor de afbeelding met behulp van de Pen gereedschap (P). Vouw de lijn uit en zorg dat deze op het pictogram past.
Het Activity-pictogram is ingewikkelder en interessanter om te maken. Het bestaat uit drie kleurrijke verloopcirkels. Om een dergelijke cirkel te vormen, moeten we allereerst een Blend-groep maken.
Maak twee gelijk 6 x 7 px rechthoeken van roze (# ff2b91) en rood (# f1281e) kleuren. Selecteer de rechthoeken en ga naar Object> Blend> Maken. U kunt de instellingen in bewerken Object> Blend> Mengopties, toepassen Gladde kleur om een mooie naadloze mix te maken. Sleep de gemaakte overvloeigroep naar de Borstels paneel en maak een nieuwe aan Art Brush met standaardinstellingen.
Maak een donkergrijs (# 393839) omcirkel basis voor ons pictogram en plaats er nog een cirkel bovenop, waarbij je onze borstel als een Beroerte. Pas de grootte van de cirkel aan, zodat deze op de buitenrand van de pictogrammal past. Stel de Beroerte gewicht naar 1 pt en Object> Uiterlijk uitbreiden om de penseelstreek in een te veranderenvorm. Draai of draai de vorm met de Reflect Tool (O) horizontaal, indien nodig, zodat we de roze kant van de cirkel aan de linkerkant en de rode aan de rechterkant hebben.
Maak een kleine roze (# ff2b91) cirkel en plaats deze in het bovenste centrale gedeelte van de gekleurde ring, zodat deze in de hoogte van de vorm past, waardoor de verbinding van de twee kleuren wordt verborgen.
Nu moeten we dimensie toevoegen aan de ring door een subtiele schaduw te vormen. Zoals je misschien opmerkt, werd de ring in verschillende delen verdeeld nadat we hem hadden uitgebreid. Dit is precies wat we nodig hebben! Selecteer het bovenste rode stuk van de ring, kopiëren het en Plak aan de voorkant (Control-C> Control-F). Vul de kopie met een lineair verloop van donkerrood (# a11b17) wit maken en overschakelen naar Vermenigvuldig de mengmodus, waardoor de witte punt van het verloop onzichtbaar wordt.
Gebruik dezelfde techniek om twee meer kleurrijke ringen in de eerste vorm te maken. Maak de kunstborstels van een gele (# d8ff06) en groen (# 86e402) menggroep en van een turkoois (# 06ffaa) en blauw (# 06e3f9) mix. Werk het pictogram af door cirkels toe te voegen en zachte schaduwen toe te passen.
Het volgende is het pictogram Passbook, dat uit vier kleine pictogrammen bestaat: een creditcard, een vliegtuig, een filmcamera en een koffiekopje. Deze pictogrammen zijn minimalistisch en gemaakt van basisvormen met behulp van verkenner en Live hoeken voorzien zijn van. Hieronder ziet u een stapsgewijze schermafbeelding, die laat zien hoe u de vormen voor elk pictogram kunt combineren.
De basis van het pictogram bestaat uit vier strepen van verschillende kleuren: rood (# ff4e46), blauw (# 439eca), groen (# 3dca36) en oranje (# ffa02b), iedere 20 px hoogte. Maak een standaard 80 x 80 px omcirkel basis voor ons pictogram en verwijder de overbodige stukjes van de streepjes met behulp van de Shape Builder Tool (Shift-M) door alle objecten te selecteren en op de ongewenste delen te klikken terwijl u de alt sleutel.
Vorm een gelijkmatig 3.5 x 3.5 px cirkel, kruising de bovenkant van de oranje streep, en kopieer deze naar rechts door beide vast te houden alt en Verschuiving en de vorm te slepen. druk op Controle-D meerdere keren om meer kopieën van de cirkel te maken. Selecteer vervolgens alle exemplaren en verander ze in een Samengestelde pad door te drukken Controle-8. Selecteer decirkels en de oranje streep en breng de Minus voorkant functie om de gaten te verwijderen, waardoor de streep geperforeerd wordt.
Plaats als laatste de pictogrammen die we eerder hebben gemaakt en lijn ze uit met het midden van het pictogram.
Het laatste pictogram van onze set is het pictogram van de kalender. Het bestaat uit tekst, gemaakt met Helvetica Neue-lettertype en een eenvoudige witte pictogrambasis.
Dit was een lange maar opwindende zoektocht! We hebben in totaal 20 app-pictogrammen op het startscherm gemaakt, met basisvormen, warp-effecten en enkele trucjes en effecten. Ik hoop dat je het leuk vond om deze gids te volgen en enkele nuttige technieken hebt gevonden. Veel succes met je ontwerpen!
Accentsconagua