Creación de iconos con sombras largas para Android

Lo primero es lo primero: por lo que entendí, su pregunta no es sobre GIMP, sino más bien

¿Cómo crear un icono de material con software gratuito y de código abierto?

(ya que estás en Linux). Si eso es correcto, adapte el título de su pregunta en consecuencia.

Como han mencionado otros, el programa de elección aquí es Inkscape , ya que le permite producir exactamente el tipo de ilustración vectorial que está buscando y luego exportar el resultado para múltiples resoluciones de dispositivos. El estilo que describiste se llama Material Design y se destaca por su apariencia reducida y plana con sombras largas .

Aquí se explica cómo producir el icono que se muestra en Inkscape:

0. Descargue e instale Inkscape . Un nuevo documento en blanco debería estar abierto en el primer lanzamiento.

1. Cree el círculo de fondo con un tamaño de 192x192 píxeles usando la herramienta Elipse ( F5). Puede restringir la relación de aspecto de la elipse a un círculo perfecto presionando Ctrlmientras la dibuja. Después de haber dibujado el círculo, también puede editar su ancho y alto ( Wy H) en las propiedades del objeto arriba. Elija un color de relleno adecuado de la paleta a continuación o directamente de la imagen (puede importar la imagen original con Ctrl+Iy luego use la herramienta Cuentagotas ( F7) para elegir un color de la imagen importada).

Nota: Dado que está creando un dibujo vectorial, el tamaño no es tan relevante (puede exportar/rasterizar el icono vectorial en cualquier resolución). Sin embargo, es una buena práctica crear su dibujo con una resolución que corresponda a la resolución de salida más alta deseada (en este caso xxxhdpipara Android).

1. Crea la forma del icono principal dentro del círculo. Dado que este es un proceso diferente para cada icono, no voy a entrar en demasiados detalles aquí. Para crear la mascota de Android, usaría una combinación de círculos ( F5) y rectángulos redondeados ( F4, establezca el radio del borde en las propiedades del objeto). Puede "pegar" formas seleccionándolas ( F1y Shift + Clicklos objetos) y luego eligiendo "Ruta" > "Unión". Algunas formas (las antenas de la mascota) deberán rotarse (haga clic en el objeto dos veces y luego use los controles de rotación). Tenga en cuenta que puede duplicar formas con Ctrl + Dy reflejar una forma horizontal/verticalmente con hyv, respectivamente. Para la cabeza, es posible que desee producir una elipse, luego un rectángulo que cubra la parte inferior, seleccione ambos y corte la parte inferior con "Trayectoria" > "Diferencia". De manera similar, para los ojos de la mascota, usa círculos, luego resta estos de la forma circular de la cabeza, etc.

2. Crea la forma de la sombra. Las sombras de Material Design son simples sombras de 45° que apuntan hacia el sureste. Para dibujar la sombra, use la herramienta Línea recta ( Shift + F6) y dibuje un contorno contiguo que toque cada punto del extremo noreste de la forma de su icono principal. Haga clic para colocar un vértice. Cuando dibuje el segmento de línea que producirá una parte visible de la forma hacia el sureste, presione Ctrlpara restringir la línea a un ángulo de 45°. Asegúrese de que su contorno se extienda más allá del borde sureste del fondo del círculo. Continúe hasta que haya cerrado la forma (conectado el último al primer vértice).

ACTUALIZACIÓN : si le resulta difícil lograr una ubicación exacta de los segmentos de línea de 45 °, ahora proporcioné una explicación más detallada en esta publicación de blog .

Nota: Para íconos simples, debería poder cubrir todas las partes relevantes de la forma del ícono con una forma de sombra, para los más complejos, es posible que necesite varias formas, lo cual también está bien. La forma roja en el paso 3 anterior le muestra cómo hacerlo para la mascota de Android.

Nota: lo más probable es que la forma de su sombra tenga un trazo y no tenga relleno después de dibujarla. Para cambiar eso, elija un color de relleno de la paleta a continuación (cualquier color de relleno está bien por ahora, por ejemplo, un rojo brillante) y luego elimine el trazo seleccionando Right Clickel color "Trazo" en la parte inferior izquierda y seleccionando "Eliminar trazo".

4. Recorta y ajusta la forma de la sombra . Elija el círculo de fondo y duplíquelo ( Ctrl + D). La copia recién creada debe estar en la parte superior, cubriendo todas las demás formas. Shift + Clickla forma de la sombra (la parte que es visible fuera del círculo). Ahora elija "Ruta"> "Intersección" para cortar la parte superpuesta de la forma de la sombra. Deberías terminar con una forma de sombra que coincida perfectamente con el círculo debajo. Ahora seleccione la forma de la sombra, elija un color de relleno negro puro (más a la izquierda en la paleta de abajo) y déle 50%opacidad (parámetro Oen la parte inferior izquierda, debajo de la paleta). Finalmente, envíe la forma de la sombra hacia atrás ("bájela") presionando Page Downhasta que termine detrás de la forma del icono principal. Eso es todo.

5. Para exportar su icono : Seleccione todas las formas creadas ( F1, luego dibuje un cuadro de selección alrededor de ellas) y agrúpelas ( Ctrl + G). Esto no es estrictamente necesario (simplemente puede exportar la forma de fondo, lo que representará todas las formas sobre ella), pero agrupar todas las formas que pertenecen a un ícono es una buena práctica en general. Luego presione Ctrl + Shift + Epara que aparezca el panel "Exportar PNG". Elija una ruta y un nombre de archivo haciendo clic en "Exportar como", luego exporte la "Selección" a la resolución deseada ( 90dpi corresponde a la resolución de 192x192píxeles en pantalla.

Nota: para usar el ícono en una aplicación Android real, debe exportarlo a resoluciones de 90dpi (esto corresponde a xxxhdpi), 67.5dpi ( xxhdpi), 45dpi ( xhdpi), 33.75dpi ( hdpi) y 22.5dpi ( mdpi), respectivamente. Exporte estos archivos a las /res/drawable-*dpi/carpetas de los activos regulares de Android o a las /res/mipmap-*dpi/carpetas del ícono de la aplicación real.

Nota: Para la obra de arte de PlayStore, necesita un ícono de resolución aún mayor (512x512 píxeles). Esto no es un problema, como ya habrás adivinado, ya que creamos un dibujo vectorial del ícono, que se puede exportar a cualquier resolución deseada. Simplemente exporte el ícono en 240dpi (o ingrese 512para el ancho y alto en el panel de exportación).