Luo kerroksellinen sovelluskuvake Macilla

Luo neljä muokattavaa syvyysryhmää, säädä lasimateriaalia, tarkista käytössä olevat kohteet ja tallenna kerroksellinen projekti Assets for Xcodessa.

10 vaihettaPäivitetty 12.11.2026Hanki Assets for Xcode

Lopputulos: Tallennettu MyIcon-projekti sisältää neljä muokattavaa ryhmää nimeltä Orange Plate, Purple Plate, Blue Plate ja Paper Plane.
Mitä tarvitset: Asenna Assets for Xcode Macille.
Varaa kuvakkeen kuvat neljää syvyysryhmää varten: pohja, kaksi värillistä levyä ja etualan symboli.
Valitse kirjoitettavissa oleva sijainti muokattavalle MyIcon-projektille.

Luo kerroksellinen sovelluskuvake yhdistämättä sen osia yhdeksi kuvaksi liian varhain. Tässä oppaassa rakennetaan Assets for Xcoden ensimmäisessä App Store -kuvassa näkyvä paperilentokone neljästä syvyysryhmästä: lisää alkuperäiset kuvat, säädä lasimateriaaleja, valitse vientikohteet, tarkista kuvake ja tallenna muokattava dokumentti.

1.Aloita kuvakkeen lähdekuvasta
Avaa Assets for Xcode ja vedä ensimmäinen lähdekuva tervetuloikkunaan. Ikkunassa näkyvät myös Open Project ja Create New Project. Tässä esimerkissä aloitat muokattavan dokumentin vetämällä pohjakuvan aloitusalueelle.
Assets for Xcoden tervetuloikkuna, jossa ovat Open Project- ja Create New Project -painikkeet.
2.Tuo ja nimeä alin levy
Kun ensimmäinen kuva on tuotu, valitse uusi ryhmä Layers-luettelosta ja nimeä se Orange Plate. Kuvakkeen esikatselussa näkyy oranssista vaaleanpunaiseen vaihtuva pohja omana muokattavana syvyysryhmänään.
Muokattava kuvake, jossa on Orange Plate -syvyysryhmä ja oranssinvaaleanpunainen kuva.
3.Lisää violetti levy
Valitse piirtoalueen juuri, tuo toinen lähdekuva uutena syvyysryhmänä ja nimeä se Purple Plate. Purple Plate ja Orange Plate pysyvät erillisinä Layers-luettelossa.
Purple Plate lisättynä Orange Platen yläpuolelle Layers-luettelossa ja kuvakkeen esikatselussa.
4.Aseta sininen levy päällimmäiseksi
Valitse piirtoalueen juuri uudelleen, tuo kolmas lähdekuva ja nimeä sen ryhmä Blue Plate. Varmista esikatselusta, että sininen kuva on violetin ja oranssin levyn yläpuolella.
Blue Plate kolmantena muokattavana syvyysryhmänä violetin ja oranssin levyn yläpuolella.
5.Viimeistele paperilentokonekuvake
Tuo paperilentokoneen kolme SVG-osaa yhdessä yhdeksi syvyysryhmäksi, nimeä ryhmä Paper Plane ja dokumentti MyIcon. Layers-luettelossa on nyt neljä erikseen muokattavaa ryhmää.
Paper Plane kolmen värillisen levyn päällä; MyIconissa on neljä nimettyä syvyysryhmää.
6.Pidä paperilentokone peittävänä
Valitse Paper Plane, avaa materiaali-inspektori ja poista Glass käytöstä kohdassa Material (Glass). Etualan lentokone muuttuu teräväksi, peittäväksi valkoiseksi muodoksi läpikuultavan lasin sijaan.
Materiaali-inspektori, jossa Glass on pois käytöstä valitulta Paper Plane -ryhmältä.
7.Käytä Clear Glassia sinisessä ryhmässä
Valitse Blue Plate, siirry Elevation-näkymään ja aseta materiaali-inspektorin Recipe-arvoksi Clear Glass. Varmista, että Glass on käytössä, ja tarkastele ryhmien syvyysjärjestystä.
Neljän kuvakesyvyysryhmän Elevation-esikatselu, jossa Blue Platella on Clear Glass käytössä.
8.Ota halutut alustakohteet käyttöön
Ota Apple Watch käyttöön ja lisää Android Adaptive Icon, Windows App Icon ja Icon Composer nykyisiin Apple-kohteisiin. Varmista, että sivupalkki ja esikatselurivi näyttävät kaikki tarkistettavat kohteet.
Kohdeluettelo, jossa ovat Apple Watch, Android Adaptive Icon, Windows App Icon ja Icon Composer.
9.Tarkista käytössä olevat kohteet
Suorita kuvakkeen tarkistus ja lue alareunan tilapalkki. Esimerkissä näkyvät Apple ready, Android ready ja Windows ready, ja kaikki tarvittavat koot on luotu. Korjaa mahdolliset kohdeongelmat ennen tallennusta.
Tarkistustila näyttää Apple ready, Android ready ja Windows ready käytössä oleville kohteille.
10.Tallenna ja tarkista muokattava projekti
Palaa Design-näkymään, valitse dokumentin juuri poistaaksesi valintareunukset ja tallenna projekti nimellä MyIcon.braveicon. MyIcon-otsikko, neljä nimettyä ryhmää ja Saved-ilmaisin vahvistavat tallennuksen. Lopulliset alustatiedostot viedään erikseen.
Valmis MyIcon Design-näkymässä, jossa on neljä muokattavaa ryhmää ja Saved-tila.

Viimeisen vaiheen jälkeen

Lentokone pysyy peittävänä, sininen taso käyttää Clear Glass -materiaalia ja käytössä olevat Apple-, Android- ja Windows-kohteet läpäisevät tarkistuksen. Projektin tallennus ei vie lopullisia alustatiedostoja.

Vinkit

Säilytä jokainen levy omana ryhmänään Layers-luettelossa, jotta voit muokata sitä yhdistämättä koko kuvaa.
Tarkista syvyysjärjestys Elevation-näkymässä ennen lasireseptin valintaa.
Lue jokaisen käytössä olevan kohteen tarkistustila ennen kuvakedokumentin tallennusta.
HuomaaTässä oppaassa tallennetaan muokattava kuvakeprojekti. Se ei vie AppIcon.appiconset-katalogia eikä muita lopullisia alustatiedostoja.
HuomaaJos kohde ei ole valmis tarkistuksen jälkeen, korjaa ongelma ennen vientiä.