BraveCLCómo crear un icono de app para Mac con tu propia imagen
Importa una imagen en Vector Icons, compara acabados, acepta un degradado y comprueba el icono de tu app para Mac a tamaños pequeños.
- El resultado
- Tendrás un icono de app creado a partir de tu imagen y con el acabado Deep Gradient seleccionado, listo para revisarlo en el espacio Compose tanto a tamaño completo como en los tamaños pequeños.
- Qué necesitas
- Vector Icons 2.0 instalado en tu Mac.
- Un archivo PNG u otra imagen local compatible que tengas permiso para utilizar.
Con Vector Icons 2.0 puedes empezar con tu propia imagen en lugar de un símbolo del catálogo, aplicar un acabado y revisar el resultado en un único espacio de trabajo. Esta guía sigue el proceso real de la app para Mac que aparece en la primera captura del App Store.
1.Empieza en el editor de iconos
Abre Vector Icons en el espacio de trabajo Compose. El lienzo inicial muestra el símbolo Smartphone. Usa Import artwork (importar imagen) para sustituirlo por tu propia imagen.
El espacio Compose de Vector Icons muestra el símbolo Smartphone inicial antes de importar una imagen propia. 2.Importa tu imagen
Elige un archivo local con Import artwork. La confirmación Replace source (sustituir origen) muestra el símbolo Smartphone actual y el archivo elegido, por ejemplo rocket-artwork.png. Comprueba que sea la imagen correcta.
La confirmación Replace Source compara el símbolo inicial Smartphone con el archivo seleccionado rocket-artwork.png. 3.Confirma la nueva imagen
Haz clic en Replace source para utilizar la imagen elegida. La vista previa central muestra ahora la imagen dentro del icono de la app y, debajo, aparece el nombre del archivo.
El editor de Vector Icons muestra el cohete importado dentro de un icono azul y vistas previas a tamaños pequeños. 4.Compara los siete acabados
Cambia la opción Workspace (espacio de trabajo) a Finishes. Revisa los siete tratamientos de la misma imagen, incluidos Clean Solid, Deep Gradient y Paper Lift, antes de elegir uno.
Siete vistas previas de acabados para rocket-artwork.png, entre ellos Clean Solid y Deep Gradient. 5.Previsualiza Deep Gradient
Selecciona Deep Gradient. Vector Icons abre una comparación dividida entre Reference A y Trial B para que veas lado a lado la imagen original y el degradado propuesto antes de aplicarlo.
Comparación dividida de Reference A y Trial B, con el cohete antes y después de Deep Gradient. 6.Conserva el acabado degradado
Pulsa Accept trial (aceptar prueba) para conservar el acabado seleccionado. Al volver a la galería de acabados, Deep Gradient aparece marcado como el resultado aceptado.
La galería de acabados muestra Deep Gradient seleccionado y aceptado para la imagen de cohete importada. 7.Revisa el icono a tamaños pequeños
Vuelve a Compose mediante el selector Workspace. Comprueba el icono terminado y el nombre de archivo de la imagen importada. Revisa las vistas previas de 16 pt y 32 pt para valorar su legibilidad a tamaños pequeños.
Icono final con el cohete sobre un degradado violeta en Compose de Vector Icons y vistas previas de 16 pt y 32 pt.
Consejos
Comprueba el nombre de archivo en la confirmación antes de sustituir la imagen de origen.
Compara varios acabados antes de pulsar Accept trial; la vista previa no significa que se haya aceptado el cambio.
Revisa las vistas previas de 16 pt y 32 pt antes de exportar un conjunto completo de recursos de iconos.
AtenciónAl sustituir el origen cambias la imagen utilizada en el diseño del icono actual. Asegúrate de que quieres hacerlo.
AtenciónLa guía termina con un icono diseñado dentro del espacio de trabajo. Exportar un conjunto de recursos AppIcon es una tarea aparte.
