Het maken van productpictogrammen is niet zo moeilijk als het op het eerste gezicht lijkt. Lees meer over het helemaal opnieuw ontwerpen van uw eerste Android-app-pictogram!
Ongeacht via welke marktplaats of dienst een app wordt gedistribueerd, het app-pictogram is het eerste dat een potentiële gebruiker opmerkt. De eerste indruk is van het allergrootste belang bij het werven van nieuwe gebruikers, wat betekent dat pictogrammen belangrijke componenten van elke toepassing zijn. En ongeacht de bedoeling van de app zou het creëren van een mooi applicatiepictogram een belangrijk onderdeel moeten zijn van de ontwikkelingsfase van elke app. Hoewel veel ontwikkelaars van technische applicaties de grafische vormgeving overlaten aan toegewijde ontwerpers, De basisprincipes van ontwerpen en het toepassen ervan is iets dat iedereen kan doen, met een talent voor experimenteren analyse. App-pictogrammen zijn geen uitzondering!
In deze handleiding wordt uitgelegd hoe u een adaptief pictogram maakt voor een voorbeeld-Android-app met behulp van open-sourcesoftware. Hoewel het eindresultaat misschien niet het formaat heeft dat u nodig heeft, zullen veel van de hier besproken ontwerptips op meerdere platforms van toepassing zijn.
Na de release van ‘adaptieve pictogrammen’ met Android Oreo kan een app-pictogram uit drie fundamentele lagen bestaan: ondoorzichtige achtergrondlaag, een voorgrondlaag met ondersteuning van transparantie, en een masker dat de vorm van het pictogram definieert. Al deze lagen zijn 108 x 108 dp groot, hoewel alleen de binnenste 72 x 72 dp zichtbaar kan zijn voor de gebruiker; het andere gebied, weggesneden door het masker bovenaan, wordt gebruikt voor speciale effecten binnen de gebruikersinterface om het pictogram dynamisch te laten lijken. Voor de niet-ingewijden, dp of weergave-onafhankelijke pixel staat als een meeteenheid voor de hele Android-interface en is gedefinieerd als gelijk aan de grootte van één pixel op een scherm van 160 dots per inch.)
Nick Butcher van Google heeft het over een cirkel van 66 dp in het midden van het pictogram dat geen enkel masker kan wegknippen, de “veilige zone” genoemd. Dit is waar de belangrijkste elementen van ons pictogramontwerp later zullen verschijnen, wanneer we bij het daadwerkelijke ontwerp komen. Alles buiten deze straal van 33 dp is mogelijk niet zichtbaar in het pictogram terwijl er een vormmasker op staat.
Omdat pictogrammen beter af zijn als vectorafbeeldingen vanwege het schalen van de gebruikersinterface, hebben we een vectorafbeeldingseditor nodig om ons pictogram te maken. Inktlandschap is open-source en een geweldig alternatief voor duurdere software, dus dit zal onze keuze zijn voor de doeleinden van deze tutorial. Ik heb ook een projectbestand ontworpen beschikbaar Hier waarin de veilige zone en de eigen ontwerpsleutellijn van Google zijn gemarkeerd, en een handig laagmasker waarmee we een voorbeeld van de vorm van het pictogram kunnen bekijken.
Met het projectbestand geopend in Inkscape en de Vullen en lijnen (Shift+Ctrl+F), PNG-afbeelding exporteren (Shift+Ctrl+E), en Lagen (Shift+Ctrl+L) panelen openen, we zijn klaar om aan de slag te gaan. In het deelvenster Lagen bevindt zich het vlees van het project, met de Voorgrond En Achtergrond lagen bedoeld om hun titulaire componenten te huisvesten, en Richtlijnen En Masker bedoeld om ter referentie aan en uit te worden gezet (door op het kleine oogpictogram ernaast te klikken).
Een pictogram is een uitdrukking van de identiteit van een app. Als zodanig moet het zowel het karakter van de persoonlijkheid van de app als platformspecifieke ontwerprichtlijnen bevatten, zoals die van Android. Materiaalontwerptaal te bieden heeft. Laten we voor demonstratiedoeleinden aannemen dat we werken aan een weer-app die materiële elementen gebruikt. We zouden het klassieke zon-en-wolkenmotief kunnen gebruiken om een gebruiker te informeren over het doel van de app, en een beetje draai aan dit basisontwerp met behulp van slagschaduwen en geometrie om het goed te laten passen in de Android-omgeving.
Achtergrond
Laten we beginnen met het instellen van de achtergrond, die zal bestaan uit een blauwe lucht en een gele zon in het midden. Draaien Masker onzichtbaar, ik selecteer en maak het zichtbaar Achtergrondlaag, vul het hele canvas met de Maak rechthoeken en vierkanten gereedschap (F4) en stel de vulkleur van de rechthoek in Vullen en lijnen tot 64B5F6FF (lichtblauw) in overeenstemming met de Materiaal kleurenpalet. Vervolgens selecteer ik de Maak cirkels, ellipsen en bogen (F5) en houd Shift en Ctrl ingedrukt, teken een cirkel van het midden van de hoofdlijn naar de op een na grootste cirkel en stel de kleur in op FFEE58FF, wat ons een warm zonnetje geeft. Het is altijd goed om bij elk ontwerp vast te houden aan de basisgeometrie, en vooral de ontwerptaal van Android moedigt eenvoud aan. Om aan de materiaalrichtlijnen te voldoen, geef ik de zon ook een subtiele slagschaduw erdoor Filters → Schaduwen en gloed → Slagschaduw.
Voorgrond
Komt naar Voorgrond, Ik teken een groep wolken rond de zon door cirkels te tekenen uit de omtrekken van andere cirkels, en geef ze allemaal een vulkleur van EEEEEEFF. Vervolgens groepeer ik de cirkels op de juiste manier door met de rechtermuisknop op meerdere objecten te klikken en te selecteren Groepen voer de slagschaduwgenerator uit op de twee laatste vormen die ik uiteindelijk verkrijg. Draaien Richtlijnen onzichtbaar en schakelend Voorgrond En Achtergrond Als alternatief kunnen de samenstellende lagen van het pictogram van onze weer-app worden gezien. Als het pictogram van de app ooit over een startscherm wordt gesleept, zullen de wolken tegen een stilstaande zon botsen!
Resultaat
Masker kan nu zichtbaar worden gemaakt en worden aangepast Bewerk paden per knooppunten (F2) om maskers met verschillende vormen te proberen te simuleren. De twee lagen kunnen ook afzonderlijk worden geëxporteerd met behulp van de PNG-afbeelding exporteren paneel voor gebruik in Androidstudio, en samen voor a Google Play-pictogram.
Bij het bouwen van een productpictogram is het altijd een goede gewoonte om te proberen het doel van een applicatie te achterhalen, dit te destilleren tot de meest abstracte visuele vorm en dat weer te geven met behulp van eenvoudige geometrie. Hoe eenvoudiger een onderdeel in het ontwerp is, des te beter en betrouwbaarder het doorgaans werkt, en dit geldt ook voor grafisch ontwerp. Voor de meeste doeleinden is een objectvorm op de voorgrond en een effen kleur of een patroon op de achtergrond (of vice versa) werkt prima, maar net als in ons voorbeeld kan een andere laag objecten worden gebruikt als deze wordt gevoeld nodig; te veel stapeling of gebruik van slagschaduwen zal het ontwerp van het pictogram alleen maar ingewikkelder maken.
Je kunt meer lezen over pictogramontwerp in Materiaalinterfaces op de officiële website Materiaalwebsiteen pak gratis systeempictogrammen voor gebruik bij het ontwerpen van pictogrammen dezelfde website.