Este artículo he de decir en primer lugar que ha sido realizado en su mayoría por mi amigo SkAsI, yo únicamente me he dedicado a maquetarlo. De modo que cualquier crítica positiva me la podéis hacer a mí y, por supuesto, las negativas todas para él

Y una vez indicado esto, aquí tenéis un ejemplo del efecto típico de aplicaciones Web 2.0 que podrás conseguir siguiendo los pasos descritos en este tutorial.

Para conseguirlo necesitarás el programa Inkscape (es software libre y multiplataforma, o sea que no tienes escusa para no instalarlo) y seguir los sencillos pasos descritos en este tutorial.

Una vez que hayas descargado y descargado Inkscape deberás realizar las siguientes acciones:

1. Abre la aplicación y crea un fichero nuevo.
2. Comienza realizando un círculo perfecto (manteniendo presionada la tecla Ctrl, de lo contrario creará una elipse).

   

3. Haz click en el botón derecho sobre la imagen y abre el menú relleno y borde. Selecciona el gradiente radial.

   

4. Los parámetros elegidos en el ejemplo como paradas del gradiente son (en HSL) 131, 255, 160 y 168, 255, 139. El canal Alpha a 255.

   

5. Tras modificar los parámetros indicados en el gradiente, obtendrás el siguiente resultado. Así mismo, podrás desplazar el centro del gradiente a tu gusto.

   

6. Mueve el centro y amplia el radio de ambos ejes por igual (manteniendo presionada las teclas Alt + Mayus).

   

7. Crea otro círculo, en la posición y con la forma de la imagen. Rellena de blanco y con la herramienta Gradiente, crea el gradiente que aparece aproximadamente.

   

8. Agrupa ambos objetos (Ctrl + g). Duplica los objetos (Ctrl + d) y refléjalos verticalmente. Y posteriormente muévelos debajo de los otros para formar la imagen especular.

   

9. Crea una máscara de opacidad (el negro es transparente y el blanco opaco). Selecciona la máscara y los objetos de debajo (los círculos especulares) haciendo una selección con el ratón alrededor de la máscara.

   

10. Aplica la máscara con Objeto -> Máscara -> Aplicar. El resultado debe ser algo parecido a lo mostrado en la siguiente imagen.

    

11. Crea un rectángulo negro. Abre el menú de alineación y distribución.

    

    Selecciona todo y alinea todo centrado verticalmente. Con esto obtenemos este resultado.

    

Si prefieres hacer iconos cuadrados puedes seguir los siguientes pasos:

1. Crea un cuadrado como el de la imagen.

   

2. Abre con el botón derecho el menú relleno y borde. Selecciona el gradiente lineal.

   

3. Crea una nueva parada e introduce los siguiente parámetros (de la parada superior a la inferior). HSL 171, 255, 175; 170, 255, 100; 139, 255, 175; El parámetro Alpha siempre a 255.

   

4. El resultado debe ser algo parecido a lo de la imagen. Moviendo el gradiente.

   

5. Duplica el objeto (Ctrl + d) y aplica blanco (selecciona el color de la barra de colores de la parte inferior. Mediante TrazReducir disminuye el tamaño del nuevo cuadrado blanco, dejando un reborde.

   

6. Crea una curva de bezier como la de la imagen más o menos. Se puede modificar mediante la herramienta (en el menu del borde izquierdo) Editar nodos… (la segunda por arriba).

   

7. Selecciona el cuadrado blanco y la curva y aplica Trazo -> Intersección.

   

8. Con la herramienta de gradiente modifica la apariencia del reflejo (antiguo rectángulo blanco).

   

9. Agrupa (Ctrl + g), duplica (Ctrl + d) y refleja verticalmente. Mueve para que quede como un reflejo.

   

10. Crea una máscara como se hizo con el círculo. Duplica, relleno y borde, gradiente lineal. Los tiradores del gradiente deben quedar más o menos como en la imagen.

    

11. Aplica la máscara con Objeto -> Máscara -> Aplicar.

    

12. Crea un marco rectangular negro para introducir el objeto en él.

    

¡¡Eso es to, Eso es todo amigos!! Espero que te haya gustado y, de nuevo, reitero mi agradecimiento a SkAsI por este útil tutorial y, ya sabes, si tienes alguna duda, deja tu comentario que seguro que alguien te puede echar una mano.

Enlace de la aplicación:

• Inkscape

Suscríbete!!

Seguro que también te interesa

• Oculta los iconos de particiones de tu escritorio en Ubuntu
• Cómo crear tu favicon
• Script Python para la actualización de radares de tráfico en TomTom
• Ser el primero tiene premio
• ¿Qué estás haciendo?