BraveCLEen app-icoon met lagen maken op de Mac
Maak vier bewerkbare dieptegroepen, pas het glasmateriaal aan, controleer de ingeschakelde doelen en bewaar je lagenproject in Assets for Xcode.
- Het resultaat
- Het opgeslagen MyIcon-project bevat vier bewerkbare groepen: Orange Plate, Purple Plate, Blue Plate en Paper Plane.
- Wat je nodig hebt
- Installeer Assets for Xcode op een Mac.
- Zorg voor icoonafbeeldingen voor vier dieptegroepen: een basis, twee gekleurde platen en een symbool op de voorgrond.
- Kies een locatie waar je het bewerkbare MyIcon-project kunt opslaan.
Maak een app-icoon met lagen zonder je ontwerp te vroeg plat te maken. Deze handleiding volgt het papieren vliegtuigje met vier dieptegroepen uit de eerste App Store-afbeelding van Assets for Xcode: voeg de bronafbeeldingen toe, pas het glasmateriaal aan, stel exportdoelen in, controleer het icoon en bewaar een bewerkbaar document.
1.Begin met je icoonafbeelding
Open Assets for Xcode en sleep je eerste bronafbeelding naar het welkomstvenster. Je ziet ook Open Project en Create New Project; sleep in dit voorbeeld de basisafbeelding naar het welkomstgebied om een bewerkbaar document te beginnen.
Welkomstvenster van Assets for Xcode met de knoppen Open Project en Create New Project. 2.Importeer en benoem de onderste plaat
Selecteer na het importeren van de eerste afbeelding de nieuwe groep onder Layers en noem die Orange Plate. In het icoonvoorbeeld staat de oranje-roze basis als afzonderlijke bewerkbare dieptegroep.
Bewerkbaar icoon met de dieptegroep Orange Plate en oranje-roze beeld. 3.Voeg de paarse plaat toe
Selecteer de hoofdlaag van het canvas, importeer de tweede bronafbeelding als een andere dieptegroep en noem deze Purple Plate. Purple Plate en Orange Plate blijven onder Layers gescheiden.
Purple Plate boven Orange Plate in de lijst Layers en in het icoonvoorbeeld. 4.Leg de blauwe plaat erboven
Selecteer opnieuw de hoofdlaag van het canvas, importeer de derde bronafbeelding en noem de groep Blue Plate. Controleer in het voorbeeld of de blauwe afbeelding boven de paarse en oranje platen ligt.
Blue Plate als derde bewerkbare dieptegroep boven de paarse en oranje platen. 5.Maak het vliegtuigje compleet
Importeer de drie SVG-onderdelen van het papieren vliegtuigje samen als één dieptegroep, noem die Paper Plane en geef het document de naam MyIcon. De lijst Layers bevat nu vier groepen die je afzonderlijk kunt bewerken.
Paper Plane boven drie gekleurde platen, met vier benoemde dieptegroepen in MyIcon. 6.Houd het vliegtuigje ondoorzichtig
Selecteer Paper Plane, open het materiaalinfovenster en schakel Glass uit onder Material (Glass). Het vliegtuigje op de voorgrond wordt een scherpe, ondoorzichtige witte vorm in plaats van doorschijnend glas.
Materiaalinfovenster waarin Glass voor de geselecteerde groep Paper Plane is uitgeschakeld. 7.Stel Clear Glass in voor de blauwe groep
Selecteer Blue Plate, schakel naar Elevation en zet Recipe in het materiaalinfovenster op Clear Glass. Controleer of Glass aanstaat en bekijk hoe de groepen in de diepte gestapeld zijn.
Elevation-voorbeeld van vier icoondieptegroepen, met Clear Glass ingeschakeld voor Blue Plate. 8.Schakel de gewenste platformdoelen in
Schakel Apple Watch in en voeg Android Adaptive Icon, Windows App Icon en Icon Composer toe aan de bestaande Apple-doelen. Controleer of de zijbalk en voorbeeldstrook alle doelen tonen die je wilt controleren.
Doelenlijst met Apple Watch, Android Adaptive Icon, Windows App Icon en Icon Composer. 9.Controleer de ingeschakelde doelen
Voer de icooncontrole uit en bekijk de statusbalk onderaan. In dit voorbeeld zie je Apple ready, Android ready en Windows ready, en alle vereiste afmetingen zijn gegenereerd. Los doelproblemen op voordat je bewaart.
Controlestatus Apple ready, Android ready en Windows ready voor de ingeschakelde doelen. 10.Bewaar en bekijk het bewerkbare project
Ga terug naar Design, selecteer de documenthoofdlaag om de selectieranden te verwijderen en bewaar het project als MyIcon.braveicon. De titel MyIcon, vier benoemde groepen en de aanduiding Saved bevestigen dat het project is opgeslagen. Definitieve platformbestanden exporteren is een afzonderlijke stap.
Voltooid MyIcon in de Design-weergave met vier bewerkbare groepen en status Saved.
Na de laatste stap
Het vliegtuigje blijft ondoorzichtig, de blauwe laag gebruikt Clear Glass en de ingeschakelde doelen voor Apple, Android en Windows doorstaan de controle. Bij het bewaren van het project worden de definitieve platformbestanden niet geëxporteerd.
Tips
Houd elke plaat als aparte groep onder Layers zodat je die kunt aanpassen zonder het ontwerp plat te maken.
Controleer de dieptevolgorde met Elevation voordat je een glasrecept kiest.
Lees de controlestatus van elk ingeschakeld doel voordat je het icoondocument bewaart.
Let opDeze handleiding bewaart het bewerkbare icoonproject; AppIcon.appiconset en andere definitieve platformbestanden worden niet geëxporteerd.
Let opIs een doel na de controle niet gereed, los dat dan op voordat je exporteert.
