Ontwerp je eigen Big Sur-icoontjes
Zoals je in de workshop ‘Vervang een ouderwets icoontje in macOS Big Sur‘ al hebt gezien, is het best gemakkelijk om een app-icoontje geschikt te maken voor Big Sur. Meer dan een sjabloon en het oude icoontje heb je niet nodig, en je hebt in een kwartiertje een Big Sur-icoontje in elkaar gezet dat zich thuis voelt in zijn nieuwe omgeving. Maar eerlijk is eerlijk: dit is meer de luie manier van werken. Zo ga je aan de slag als je je Dock met weinig moeite wat mooier wilt maken. Een echte icon-designer maakt er nog wat meer werk van, en het vakmanschap van icoontjes ontwerpen willen we je in deze Genius bijbrengen.
Direct aan de slag?
Beeldbewerker
Uitgangspunt is wederom het sjabloon van het app-icoontje en het oude icoontje van de app, maar deze keer gebruiken we laatstgenoemde meer als inspiratie-bron of om een vorm over te trekken. Daarnaast laten we je zien hoe je met bepaalde technieken exact de stijl van Apple’s Big-Sur-icoontjes nabootst. Uiteraard kan dat niet in Voorvertoning, je hebt er een echte beeldbewerker voor nodig. Wij gebruiken Pixelmator Pro, maar met een beetje verstand van zaken weet je dezelfde functies ook in Photoshop of andere apps te vinden. Er komen alleen standaardgereedschappen aan te pas.
1. Welk icoontje?
De belangrijkste vraag is: welk icoontje wil je omtoveren voor Big Sur? Houd het voor je eerste eigen icoon liever iets eenvoudiger en ga op zoek naar een app met een eenvoudige vorm. Wij kiezen Spotify.
2. Pixelmator Pro
Open het lege sjabloon in Pixelmator Pro en plak het oude icoontje erin, zoals je al hebt geleerd in de vorige workshop. Dat gaan we nu echter alleen gebruiken voor vormen, kleuren en inspiratie.
3. Kleur
Kies het Gradient-gereedschap (sneltoets G) en kies als eerste gradientkleur via het pipetje het Spotify-groen. Kies als tweede ook hetzelfde groen, maar maak de kleur iets donkerder. Terug naar het sjabloon.
4. Gradiënt
Maak de laag met het oude icoontje onzichtbaar (via het oogje naast de laag links), kies het Quick Selection-gereedschap (sneltoets Q) en selecteer het witte ge-deelte van het sjabloon. Teken daarna een bolvormige gradiënt vanaf de onderkant van het vierkant.
5. Passend
Maak het oude icoontje weer zichtbaar, kies het Arrange-gereedschap (sneltoets V) en maak het passend voor het vierkant via de witte hendeltjes. Zorg dat het icoontje exact in het midden staat, via de hulplijnen.
6. Nog een gradiënt
Selecteer nu het groen van het oude Spotify-icoontje en teken er wederom een gradiënt in, deze keer met een lichte groentint en een nóg lichtere groentint. Gebruik de afbeelding hierboven als voorbeeld.
7. Zwarte strepen
De volgende stap zijn de zwarte strepen van het oude icoontje. Deselecteer de vorige selectie en selecteer daarna de zwarte strepen. Verwijder ze met een druk op Backspace zodat het icoontje gaten lijkt te hebben.
8. Schaduw binnen
Voor wat meer diepte voegen we nog schaduwen toe. Open het Style-gereedschap (sneltoets S) en activeer ‘Inner shadow’. We zetten Blur op 31, Distance op 18, de hoek op 270 graden en Opacity op 100%. Als kleur kiezen we de lichte groentint.
9. Schaduw buiten
Activeer ten slotte de optie ‘Shadow’. Wij kiezen hier voor een harde slagschaduw omdat we die beter bij Spotify vinden passen. Neem de waarden over zoals je ze in de screenshot ziet. Exporteer het geheel als PNG en pas je Spotify-icon aan.
Icoontjes van Apple
Het veranderen van een app-icoontje is aan wat regels gebonden: bij apps van internet gaat dit probleemloos, apps uit de Mac App Store vereisen dat je eerst nog even je wachtwoord invult. Systeem-apps zoals Safari, Berichten of Agenda mag je eigenlijk helemaal niet aanpassen van Apple, maar daar hebben we toch een trucje voor. Maak een kopie van de betreffende app en pas daar dan het icoontje van aan. Wij hebben het met een aantal apps geprobeerd en het werkte altijd. Moet je er alleen aan denken om een nieuwe kopie te maken na een systeemupdate.