BraveCLComo criar um ícone de app em camadas no Mac
Crie quatro grupos de profundidade editáveis, ajuste o material de vidro, valide os destinos ativados e salve um projeto em camadas no Assets for Xcode.
- O resultado
- O projeto MyIcon salvo contém quatro grupos editáveis chamados Orange Plate, Purple Plate, Blue Plate e Paper Plane.
- O que você precisa
- Tenha o Assets for Xcode instalado em um Mac.
- Separe as artes do ícone para quatro grupos de profundidade: uma base, duas placas coloridas e um símbolo em primeiro plano.
- Escolha um local onde você possa salvar o projeto editável MyIcon.
Monte um ícone de app em camadas sem achatar a arte antes da hora. Este guia acompanha o desenho do avião de papel com quatro grupos de profundidade mostrado na primeira captura de tela do Assets for Xcode na App Store: adicione as imagens de origem, ajuste os materiais de vidro, configure os destinos de exportação, valide o ícone e salve um documento editável.
1.Comece com a arte do ícone
Abra o Assets for Xcode e arraste sua primeira imagem de origem para a janela de boas-vindas. A tela também oferece Open Project e Create New Project; neste exemplo, arraste a arte da base para a área inicial e comece o documento editável.
Janela de boas-vindas do Assets for Xcode com os botões Open Project e Create New Project. 2.Importe e nomeie a placa de base
Depois de importar a primeira imagem, selecione o novo grupo em Layers e dê a ele o nome Orange Plate. A prévia do ícone mostra uma base em tons de laranja e rosa em seu próprio grupo de profundidade editável.
Ícone editável com o grupo de profundidade Orange Plate e arte em laranja e rosa. 3.Adicione a placa roxa
Selecione a raiz da tela de desenho, importe a segunda imagem de origem como outro grupo de profundidade e nomeie o grupo Purple Plate. Purple Plate e Orange Plate continuam separados em Layers.
Purple Plate adicionado acima de Orange Plate na lista Layers e na prévia do ícone. 4.Coloque a placa azul por cima
Selecione novamente a raiz da tela de desenho, importe a terceira imagem de origem e nomeie o grupo Blue Plate. Confira na prévia se a arte azul está acima das placas roxa e laranja.
Blue Plate adicionado como terceiro grupo de profundidade editável, acima das placas roxa e laranja. 5.Complete o ícone do avião de papel
Importe juntos os três componentes SVG do avião de papel como um único grupo de profundidade, nomeie esse grupo Paper Plane e dê ao documento o nome MyIcon. A lista Layers agora mostra quatro grupos editáveis de forma independente.
Paper Plane acima de três placas coloridas, com quatro grupos de profundidade nomeados em MyIcon. 6.Mantenha o avião opaco
Selecione Paper Plane, abra o inspetor de materiais e desative Glass em Material (Glass). O avião em primeiro plano fica branco, nítido e opaco em vez de translúcido.
Inspetor de materiais mostrando Glass desativado para o grupo Paper Plane selecionado. 7.Aplique Clear Glass ao grupo azul
Selecione Blue Plate, mude para Elevation e defina Recipe como Clear Glass no inspetor de materiais. Confirme que Glass está ativado e observe como os grupos se sobrepõem na profundidade.
Prévia Elevation de quatro grupos de profundidade do ícone, com Clear Glass ativado para Blue Plate. 8.Ative os destinos das plataformas
Ative Apple Watch e adicione Android Adaptive Icon, Windows App Icon e Icon Composer aos destinos Apple existentes. Confira se a barra lateral e a faixa de prévias mostram os destinos que você pretende validar.
Lista de destinos com Apple Watch, Android Adaptive Icon, Windows App Icon e Icon Composer. 9.Valide os destinos ativados
Execute a validação do ícone e confira a barra de status inferior. O exemplo mostra Apple ready, Android ready e Windows ready, com todos os tamanhos necessários gerados. Corrija qualquer problema em um destino antes de salvar.
Status de validação com Apple ready, Android ready e Windows ready para os destinos ativados. 10.Salve e revise o projeto editável
Volte para Design, selecione a raiz do documento para remover os contornos de seleção e salve o projeto como MyIcon.braveicon. O título MyIcon, os quatro grupos nomeados e o indicador Saved confirmam que o projeto foi salvo. A exportação dos arquivos finais de cada plataforma é uma etapa separada.
Ícone MyIcon pronto na visualização Design, com quatro grupos editáveis e o status Saved.
Depois do último passo
O avião continua opaco, a camada azul usa Clear Glass e os destinos ativados para Apple, Android e Windows passam na validação. Salvar o projeto não exporta os arquivos finais de cada plataforma.
Sugestões
Mantenha cada placa em seu próprio grupo em Layers para poder alterá-la sem achatar a composição.
Use Elevation para conferir a ordem de profundidade antes de escolher uma receita de vidro.
Leia o status de validação de todos os destinos ativados antes de salvar o documento do ícone.
AtençãoEste passo a passo salva o projeto de ícone editável; ele não exporta AppIcon.appiconset nem outros arquivos finais das plataformas.
AtençãoSe algum destino não estiver pronto após a validação, corrija o problema antes de exportar.
