Transforma tu barra de menú en un paisaje invernal con Illustrator

Sigue este tutorial y aprende a transformar un sitio web en un paraíso invernal. Puedes crear las barras de menú y los botones desde cero, o puedes tomar estas técnicas y decorar tus propios elementos. Al principio crearás una barra de menú básica, luego aprenderás a añadir la nieve y los carámbanos, los copos de nieve, los destellos y más decoraciones de temática invernal. Al final, experimentaremos con más colores y diseños, así que ¡empecemos!

1. Comienza un nuevo proyecto

Inicia Adobe Illustrator y ve a Archivo > Nuevo para abrir un documento en blanco. Escribe un nombre para tu archivo, establece las dimensiones, luego selecciona Píxeles como Unidades y RGB como Modo de color. A continuación, ve a Edición > Preferencias > Generales y establece Incrementos de teclado en 1 px y, mientras tanto, ve a Unidades y rendimiento de visualización para asegurarte de que las Unidades estén como en la siguiente imagen. Yo suelo trabajar con estos ajustes, los cuales te ayudarán a lo largo del proceso de dibujo.

2. Crea una barra de menú básica

Paso 1

Toma la herramienta Rectángulo redondeado y dibuja la primera forma con las dimensiones mostradas. Selecciona el púrpura como color de relleno.

Paso 2

Con el rectángulo aún seleccionado, ve al panel Apariencia y con el atributo Relleno púrpura seleccionado, pulsa el icono Duplicar elemento seleccionado en la parte inferior. Como resultado obtendrás un segundo atributo de Relleno arriba. Usa un degradado lineal de blanco a negro en un Ángulo de -90 grados, y establece el Modo de fusión en Luz Suave.

Paso 3

Con el rectángulo aún seleccionado, duplica de nuevo el atributo de Relleno púrpura. Selecciona el nuevo atributo de Relleno de la parte inferior, mantén el mismo color de relleno, y luego ve a Efecto > Estilizar > Sombra paralela y aplica este efecto cuatro veces. Llamemos a esta forma "barra base".

Estos son los ajustes para los efectos de Sombra paralela:

Paso 4

A continuación, Copia y Pega delante (Control-F) la "barra base" y luego elimina todas las apariencias existentes pulsando el icono Eliminar apariencia en la parte inferior del panel Apariencia. Selecciona negro como color de relleno, y luego ve a Objeto > Crear malla de degradado, selecciona 3 Filas y 6 Columnas y dale a Aceptar. Como resultado obtendrás una malla cuadriculada como la de la siguiente imagen.

Paso 5

Ahora, toma la herramienta Selección directa (A) y úsala para seleccionar sólo los tres puntos de malla indicados abajo y cambia su color de relleno de negro al correspondiente. Cuando hayas terminado, pon esta forma en el Modo de fusión Luz suave. Llamemos a esta forma "malla de barra".

Paso 6

Toma la herramienta Rectángulo (M) dibuja un rectángulo con la misma altura que tu barra de menú, y colócalo en el centro. Selecciona el azul claro como color de relleno.

Paso 7

Con el rectángulo azul aún seleccionado, ve a Objeto > Trazado > Añadir puntos de ancla para añadir cuatro puntos extra en los lados (1). Utiliza la herramienta Selección directa (A) para seleccionar sólo los puntos izquierdo y derecho del centro y muévelos 10 px hacia dentro pulsando las teclas de flecha izquierda y derecha de tu teclado (2).

A continuación, ve al panel Apariencia y duplica el atributo de Relleno azul existente. Para el nuevo Relleno en la parte superior, selecciona un degradado lineal de blanco a negro en un Ángulo de -90 grados y establece el Modo de fusión en Luz suave (3).

Paso 8

Observa más de cerca el lado derecho de la forma azul. Toma la herramienta Pluma (P), dibuja un trazado en V siguiendo los puntos de anclaje de la forma azul, y dale un Trazo blanco de 1 pt. Copia y Pega delante (Control-F) este trazado, y luego mueve la copia 1 px a la derecha pulsando la tecla de la flecha derecha una vez. Selecciona un Trazo negro de 1 pt para el segundo trazado. Ahora, agrupa (Control-G) los dos trazados y establece el grupo en el Modo de fusión Luz suave.

No te olvides de hacer lo mismo en el lado izquierdo de la forma azul o simplemente refleja el grupo existente.

3. Crea la nieve en la parte superior de la barra de menús

Paso 1

Ahora que nuestra sencilla barra de menú está lista, podemos proceder con la nieve y las demás decoraciones. Para añadir la nieve, recomiendo utilizar la herramienta Lápiz (N) en lugar de la herramienta Pluma (P) porque es más fácil y además conseguiremos ese aspecto a mano alzada/natural, que en términos de nieve es algo bueno. Haz doble clic en la herramienta Lápiz (N) para abrir la ventana de Preferencias y cambiar los ajustes. A continuación puedes ver los que yo utilicé, aunque puedes ajustar la Fidelidad y la Suavidad a tu gusto.

Una vez que hayas hecho la configuración, haz un acercamiento a la derecha de tu barra de menús y dibuja un trazado similar al que se muestra a continuación. No tienes que ser demasiado preciso: cuanto más aleatorio sea, mejor.

Paso 2

Todavía usando la herramienta Lápiz (N), dibuja otro trazado aleatorio debajo del primero y asegúrate de que cubres sólo un poco de la barra de menú. Si los puntos finales de los dos trazados no se superponen, puedes utilizar la herramienta Selección directa (A) para moverlos uno encima del otro como se muestra en el acercamiento.

A continuación, es el momento de combinar los dos trazados en uno solo. Arrastra una selección con la herramienta Selección directa (A) sobre los dos puntos finales de la derecha (sólo asegúrate de bloquear primero la barra de menú) y pulsa Control-J para Unirlos. Marca la opción Vértice y pulsa OK. Después, arrastra una selección sobre los dos puntos finales de la izquierda y Únelos también. Rellena la forma resultante con blanco.

Paso 3

Todavía usando la herramienta Lápiz (N), dibuja un nuevo trazado debajo de la forma blanca pero muy cerca de ella. La longitud de este trazado debe ser aproximadamente la misma que la forma blanca (1). En este punto, cambia a la herramienta Pluma (P) y cierra los dos puntos finales de la parte superior para obtener una forma (2). Copia y Pega delante (Control-F) la forma blanca, y luego presiona Mayúsculas-Control-] para llevarla delante de todo. Selecciona esta nueva copia blanca junto con la forma azul y presiona Restar en el panel Buscatrazos. Obtendrás un trazado compuesto (3) pero ve a Objeto > Trazado compuesto > Soltar y elimina las formas más pequeñas de la parte superior (4).

Paso 4

Rellena la forma que has obtenido en el paso anterior con el color indicado, y en este punto la primera "pieza" de nieve está lista.

Paso 5

Toma de nuevo la herramienta Lápiz (N), dibuja una forma más pequeña en el extremo derecho de la barra de menús, y rellenala de blanco (1). Dibuja otro trazado debajo de ella y asegúrate de que los puntos finales de la derecha y la izquierda se superponen (2), y luego cierra el trazado en la parte superior como hiciste antes, utilizando la función Unir o la herramienta Pluma (P) (3). Copia y Pega delante (Control-F) la pequeña forma blanca y pulsa Mayúsculas-Control-] para ponerla delante de todo. Selecciona esta copia blanca junto con la forma azul y pulsa Restar en el panel Buscatrazos. Rellena la forma resultante con el mismo color (4). Esta es la segunda "pieza" de nieve.

Paso 6

Vamos a añadir más nieve en el lado izquierdo de la barra utilizando la misma técnica. Primero dibuja la forma blanca con la herramienta Lápiz (N) (1), luego crea la forma debajo de ella restando (2), y rellénala con el mismo color azul claro (3).

Paso 7

Continúa añadiendo más "piezas" de nieve, algunas más grandes, otras más pequeñas, hasta cubrir completamente la parte superior de la barra de menú. En la siguiente imagen puedes ver el resultado final.

Paso 8

Utiliza la herramienta Lápiz (N) o la herramienta Pluma (P) para dibujar una forma como la de abajo, y rellénala con el degradado lineal mostrado. También puedes dibujar unas cuantas formas más pequeñas al lado, que se rellenan con el mismo degradado, y luego seleccionar todas las formas y agruparlas (Control-G).

Paso 9

Utiliza el grupo de formas que acabas de crear para añadir más detalles a la nieve. Haz más copias del grupo y escala, gira y colócalas encima de la nieve.

4. Crea los carámbanos bajo la barra de menús

Paso 1

Utiliza la herramienta Lápiz (N) para dibujar una forma aleatoria en la esquina inferior derecha de la barra de menú, y selecciona blanco como color de relleno. Ahora, toma la herramienta Añadir punto de ancla (+) y úsala para añadir algunos puntos adicionales en la parte inferior de esta forma (1). A continuación, cambia a la herramienta Selección directa (A) y arrastra sólo tres de estos puntos hacia abajo para crear los primeros carámbanos (2). Añade más puntos con la herramienta Añadir punto de ancla (+) a lo largo de los carámbanos y juega con sus tiradores para crear el aspecto ondulado (3).

Paso 2

Dibuja una nueva forma aleatoria junto a la primera, y luego añade más puntos en la parte inferior con la herramienta Añadir punto de ancla (+) (1). Utiliza la herramienta Selección directa (A) para arrastrar dos de estos puntos hacia abajo a fin de crear dos nuevos carámbanos (2). Añade más puntos de anclaje a lo largo de los carámbanos, y mueve sus tiradores para crear el aspecto ondulado (3).

Paso 3

Añadí otra forma blanca junto a la segunda, pero tu puedes añadir todas las que quieras. En este tutorial el diseño depende de ti.

Paso 4

Ahora selecciona las tres formas blancas de la parte inferior derecha de la barra de menú, y haz clic en Copiar y Pegar detrás (Control-B). Mueve estas tres copias un poco hacia abajo presionando la tecla de flecha hacia abajo en tu teclado una o dos veces, y selecciona azul claro como color de relleno.

Paso 5

Para añadir más profundidad, dibuja con la herramienta Lápiz (N) o la herramienta Pluma (P) una forma más fina encima de cada carámbano, y rellénalas todas con el degradado mostrado.

Paso 6

Para añadir más detalles, dibuja algunas formas más pequeñas donde tengas espacio libre y rellénalas con el color indicado.

Paso 7

La parte inferior derecha de la barra está lista, pero puedes añadir más carámbanos en el lado izquierdo. Estos son más pequeños, así que no te llevará mucho tiempo hacerlos. Utiliza la misma técnica descrita anteriormente. Primero, dibuja la forma blanca (1), y luego Copia y Pega detrás (Control-B) dicha forma, muévela un poco hacia abajo y cambia el color de relleno (2). Finalmente, utiliza formas más pequeñas rellenadas con el mismo degradado para añadir tantos detalles como quieras (3).

Paso 8

Usando la misma técnica, añade más carámbanos en la esquina inferior izquierda de la barra de menú y en este punto has terminado con la nieve y los carámbanos.

5. Crea y aplica un pincel de dispersión de copos de nieve

Paso 1

Ve a Snowflake (Copo de nieve) y descarga el conjunto de copos de nieve vectoriales creado por All-Silhouettes. A continuación, abre el documento de Illustrator del archivo y copia el copo de nieve resaltado en azul en tu documento. Selecciona blanco como color de relleno, y arrastra el copo de nieve al panel de Pinceles para guardarlo como Nuevo pincel de dispersión. En la ventana de Opciones del pincel de dispersión, establece la Rotación relativa al trazado y deja el resto de los ajustes como están. Escribe un nombre para el pincel y pulsa OK.

Paso 2

Ahora, toma la herramienta Lápiz (N) de nuevo y dibuja algunos trazados sobre la nieve como se muestra en la siguiente imagen. Traza estos trazados con el Pincel de dispersión de copos de nieve guardado anteriormente y abre la ventana de Opciones de trazo del panel Apariencia. Cambia la configuración como se muestra y pulsa OK. Establece el Grosor del trazo para estos trazados en 0.25 pt, 0.3 pt, 0.35 pt y 0.5 pt para obtener copos de nieve de varios tamaños.

6. Añade varias decoraciones de invierno

Paso 1

Copia los copos de nieve resaltados en azul y verde del conjunto de copos de nieve en tu documento. A continuación, rellénalos de blanco, escálalos y colócalos en la parte izquierda de la barra de menús.

Paso 2

A continuación, desde el panel Símbolos, abre el menú Biblioteca de símbolos y en la categoría Naturaleza busca "Árboles 1". Arrastra el símbolo a tu mesa de trabajo y pulsa el icono Romper enlace a símbolo en la parte inferior del panel Símbolos para expandirlo. Escala y coloca los árboles sobre la nieve y multiplícalos si quieres añadir más.

Paso 3

Ahora, observa más de cerca los árboles. Toma la herramienta Lápiz (N) y dibuja algunos trazados cortos siguiendo las ramas del árbol más grande. Traza estos trazados con el pincel artístico Carboncillo-Fino que puedes encontrar en el menú Biblioteca de pinceles > Artístico > Artístico_LápizTizaCarboncillo. Establece el Grosor del trazo en 0,5 pt y el color en blanco para todos.

Paso 4

Repite el mismo proceso para los otros árboles, pero reduce aún más el Grosor del trazo, ya que los árboles son más pequeños.

Paso 5

Multiplica los árboles cubiertos de nieve que has creado y dispón más de ellos en el otro lado de la barra de menú.

Paso 6

Para crear la casita, empieza dibujando una forma sencilla de casa rellena de blanco. Para el tejado, dibuja un trazado con un Trazo de 1 punto rojo y añade una pequeña forma roja como chimenea. Para la puerta y las ventanas utiliza la herramienta Rectángulo (M) y el degradado mostrado. Para crear la nieve en el techo, simplemente dibuja dos trazados en la parte superior del techo y dales un Trazo con el Pincel artístico Carbón-Fino como hiciste antes para los árboles.

Paso 7

A continuación, toma la herramienta Elipse (L) y dibuja tres elipses para crear el muñeco de nieve. Rellénalas con el degradado radial mostrado, y luego añade pequeños círculos negros a modo de ojos y botones. Utiliza la herramienta Pluma (P) para dibujar la nariz y la bufanda, y ya está.

Paso 8

En este punto puedes colocar la casita y el muñeco de nieve donde quieras.

Paso 9

Parece obligatorio añadir muchos destellos, ¿verdad? Ya expliqué cómo crear uno en el tutorial Cómo crear un efecto de texto con purpurina. Multiplica los destellos y dispón tantos como quieras para mejorar tu diseño.

7. Crea y decora botones web

Paso 1

Si has conseguido llegar a este punto, entonces podrás crear y decorar un simple botón en lugar de una barra. Empieza dibujando un rectángulo redondeado más pequeño (1), y luego crea la malla cuadriculada como se explica al principio del tutorial (2). Añade "piezas" de nieve en la parte superior y carámbanos en la parte inferior (3) y utiliza el Pincel de dispersión de copos de nieve para añadir más nieve (4). Coloca los adornos que has creado (5) y, por último, añade unos cuantos destellos (6). Todas las técnicas siguen siendo las mismas.

Paso 2

Duplica o multiplica el primer botón y simplemente reorganiza las decoraciones existentes para obtener más botones.

8. Crea más barras de menú

Paso 1

Duplica la barra de menú púrpura con la nieve en la parte superior, los copos de nieve y los carámbanos, pero sin los demás adornos. Selecciona "barra base" y sustituye el morado por el tono de verde indicado. Mantén el resto de los ajustes como están.

Paso 2

A continuación, selecciona la forma del centro y sustituye el azul claro por verde claro. Dispón todos los adornos de forma diferente y obtendrás una nueva barra de menú.

Paso 3

Para crear la barra de menú grisácea, vuelve a duplicar la barra púrpura. Selecciona "barra base" y sustituye el morado por el tono de gris indicado. Después, selecciona la forma del centro y sustituye el azul claro por rosa esta vez. El resto de los ajustes siguen siendo los mismos. Por último, dispón todos los adornos como quieras.

¡Tu paraiso invernal esta listo!

Estas barras de menú y botones son bastante básicos, y son útiles para ilustrar la explicación, aunque en realidad puedes utilizar cualquier otro elemento del sitio web para crear esta apariencia de paraíso invernal. Puedes empezar desde cero o puedes usar sólo algunos elementos para decorar tus propios menús y botones. Es absolutamente obligatorio divertirse mucho en el proceso, y si quieres compartir tu creación de paraíso invernal, me encantaría verla.