5 votos

¿Cómo puedo generar iconos estilo iOS/Flurry en OS X?

Como algunos ya sabréis, el tratamiento que iOS da a los iconos de las aplicaciones es implacablemente estricto . Obliga a redondear las esquinas y no permite transparencias, por lo que impone un aspecto unificado. Me parece bien.

Hace poco me enamoré de Iconfactory Flurry y hacer nuevos iconos en ese estilo me hizo pensar; ¿cuál es la forma más fácil de aplicar una máscara y una superposición en una imagen personalizada, y generar todos los tamaños necesarios para un archivo completo de iconos de OS X (icns)?

Como se menciona a continuación, no estoy buscando explicaciones técnicas de cómo iOS genera sus iconos, ni una solución para todo el sistema para generar iconos sobre la marcha. Sólo lo que se menciona en negrita más arriba. También soy consciente del enfoque IconBuilder y aunque es una gran herramienta, no es lo que estoy pidiendo. Preferiría una interfaz de arrastrar y soltar de algún tipo.

3voto

Tal vez si alguien escribió un hack (pero sigo siendo escéptico como todo esto podría hacerse fácilmente por conseguir la plantilla del icono (archivo PSD) y hacerlo manualmente.

iOS dispone de un marco para tratar los iconos de SpringBoard. Los archivos son los siguientes (convención de nomenclatura tomada de iOS 5.) Las versiones anteriores de iOS eliminan el sufijo ~iphone):

  1. AppIconMask@2x~iphone.png
  2. AppIconOverlay@2x~iphone.png
  3. AppIconShadow@2x~iphone.png

(1) es la máscara de recorte, que dicta la forma del icono. (2) es el efecto de "brillo" que ha caído en desuso en los últimos años y es opcional. (3) es la base del icono, la sombra que se aplica bajo el producto final.

Hice un gráfico y una explicación de cómo funcionan todos juntos en mi sitio web que debería ayudar a explicar mejor cómo iOS entrega los iconos en sus respectivos dispositivos.

Jaku iOS Theme icon mask pictogram

OS X no dispone de este sistema. Cada icono está simplemente limitado por las dimensiones establecidas en Finder. Apple nunca pretendió controlar el aspecto de los iconos en OS X, sino que quería tener una apariencia uniforme en iOS (y no les culpo), de ahí la razón por la que desarrollaron dicho marco.

Podrías intentar ponerte en contacto con un desarrollador de Cocoa para portar MobileIcons.framework de iOS a OS X, pero, de nuevo, como Finder puede ajustar los tamaños (en Lion, desde 1024x1024 hacia abajo), sigo siendo escéptico de que sea posible.

2voto

domgblackwell Puntos 2333

Las otras aplicaciones mencionadas tienen sus usos, pero para su petición indicada, hay 2 aplicaciones que lo logran muy fácilmente:

Ambos están disponibles en la Mac App Store, pero yo prefiero iconos entre los dos: es mucho más robusto y está bastante pulido. Como verás en la captura de pantalla que he añadido, iconos hace que jugar con todas las variables (esquinas, brillo, tamaños de exportación, etc.) sea muy fácil, ¡y eso es sólo una parte de la aplicación! (Las otras pestañas se ocupan de los iconos que no son de dispositivos iDevice )

screen-cap of ***icons*** app interface

0 votos

Gracias por responder. Esto es más o menos lo que estoy buscando, pero Icons tiene algunas limitaciones fuertes: No me permite custumize la máscara y no puedo controlar las máscaras y "vidrio" de superposición para cada tamaño. Generación a granel también estaría bien.

1voto

mucio Puntos 111

Partiendo de la respuesta de cksum, si puedes conseguir las imágenes de la máscara, la superposición y la sombra con suficiente resolución ( @2x ), y si te sientes cómodo con la línea de comandos y las secuencias de comandos, puedes utilizar ImageMagick, un buen procesador de imágenes de línea de comandos, para enmascarar y componer el icono.

Una vez instalado ImageMagick (Tienen instrucciones de instalación aquí ) deberías poder procesar tu imagen con la máscara, la superposición y la sombra:

convert YourImage.png overlay.png -composite YourImage_overlay.png
convert YourImage_overlay.png mask.png -alpha off -compose CopyOpacity -composite YourImage2.png
convert shadow.png YourImage2.png -composite YourImage_largest.png
convert YourImage_largest.png -geometry 512 Icon512.png
convert YourImage_largest.png -geometry 256 Icon256.png

Esto supone que Tu_Imagen es grande y cuadrada (1024x1024) y que los archivos mask.png, overlay.png y shadow.png tienen el mismo tamaño.

Lo ideal sería que no se redimensionara el icono más grande para obtener las versiones más pequeñas, sino que se utilizara un software normal de creación de iconos (por ejemplo, IconBuilder) para crear YourImage en cada tamaño y, a continuación, hacer lo anterior en cada uno de ellos por separado.

En cuanto a conseguir que las imágenes de máscara, superposición y sombra tengan el tamaño correcto, mi mejor recomendación sería ampliarlas y luego reconstruirlas (es decir, dibujar una nueva redondez y degradados) a resolución completa con Photoshop o GIMP.

Una vez que tenga la imagen en cada resolución, puede lanzarla en el propio Icon Composer de Apple (en el SDK de iOS/Mac) para crear el .icns

No es la solución más fácil, pero le proporciona la flexibilidad de especificar la máscara exacta y otros efectos y de la línea de comandos.

0 votos

Gracias por esta respuesta. Nunca pensé en el enfoque de MI. No es muy fácil de usar, pero estoy a favor si hace lo que quiero. Lo probaré antes de que se acabe la recompensa.

1 votos

Hablando de facilidad de uso, estaba mirando esto de nuevo y los comandos están fuera de orden: superposición, máscara, luego sombra, no máscara, superposición, sombra. He arreglado el post, sólo un aviso.

0voto

kenwarner Puntos 195

En primer lugar, consulte Img2Icns para ver la forma más sencilla de crear un archivo ICNS a partir de un archivo de imagen de 512x512. (La versión gratuita funciona muy bien).

En segundo lugar, consulte CandyBar para gestionar e instalar iconos de sustitución. Cuesta unos pocos dólares, pero es un gran programa.

En tercer lugar, busca en DeviantArt iconos de Flurry que ya se hayan creado. Busca tanto icono de ráfaga y icono ios .

Por último, si no encuentra lo que busca, utilice esta función Plantilla Flurry para crear nuevos iconos.

0 votos

Lo siento, esto no responde en absoluto a mi pregunta. Francamente, está bastante fuera de lugar. Y escribir " haciendo nuevos iconos en ese estilo " indica que ya he creado unos cuantos por mi cuenta.

0 votos

Usted dijo: "¿cuál es la forma más fácil de aplicar una máscara y una superposición en una imagen personalizada, y generar todos los tamaños necesarios para un archivo completo de iconos OS X (icns)?" La plantilla PSD se puede utilizar para aplicar una máscara y un efecto de brillo en su imagen personalizada. Img2Icns generará entonces todos los tamaños necesarios para un archivo icns completo. Perdona si he entendido mal tu pregunta, sólo intentaba ayudar.

0voto

Dan Puntos 1161

No hay necesidad de crear las esquinas y el brillo, se añaden automáticamente por su aplicación en tiempo de compilación.

De la documentación 1 :

Cuando iOS muestra el icono de tu aplicación en la pantalla de inicio de un dispositivo, añade automáticamente los siguientes efectos visuales:

  • Esquinas redondeadas
  • Sombra paralela
  • Brillo reflectante (a menos que evite el efecto de brillo)

2 votos

¡Bienvenido a Ask Different! Gracias por publicar una respuesta. El OP no está hablando de iconos de aplicaciones iOS para iOS, más bien se refiere a iconos de estilo iOS en OS X .

AppleAyuda.com

AppleAyuda es una comunidad de usuarios de los productos de Apple en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X