Transforma tu barra de menú en un país de las maravillas de invierno en Illustrator

Lo que vas a crear

Sigue este tutorial y aprende cómo transformar un sitio web en un paraíso invernal. Puede crear las barras de menú y los botones desde cero, o puede tomar estas técnicas y decorar sus propios elementos. Al principio, creará una barra de menú básica, y luego aprenderá cómo agregar la nieve y los carámbanos, copos de nieve, destellos y más decoraciones con temas de invierno. Al final, experimentaremos con más colores y diseños, así que comencemos!  

1. Iniciar un nuevo proyecto 

Lanzamiento Ilustrador Adobe E ir a Archivo> Nuevo para abrir un documento en blanco. Escriba un nombre para su archivo y configure las dimensiones, y luego seleccione Pixeles como Unidades y RGB como Modo de color. A continuación, vaya a Editar> Preferencias> General y establecer el Incremento de teclado a 1 px y mientras allí, vaya a Unidades y rendimiento de pantalla para asegurarse de que el Unidades Son como en la siguiente imagen. Normalmente trabajo con estas configuraciones y te ayudarán en todo el proceso de dibujo.. 

2. Crea una barra de menú básica

Paso 1

Toma el Herramienta de rectángulo redondeado y dibuja la primera forma con las dimensiones mostradas. Seleccione púrpura como el color de relleno. 

Paso 2

Con el rectángulo aún seleccionado, ve a la Apariencia panel y con el morado Llenar atributo seleccionado, presione el Duplicar el elemento seleccionado icono en la parte inferior. Como resultado obtendrás un segundo Llenar atributo arriba. Utilice un degradado lineal de blanco a negro en una -Ángulo de 90 grados, y establecer el Modo de fusión a Luz tenue

Paso 3

Con el rectángulo aún seleccionado, duplica el color púrpura. Llenar atribuir de nuevo. Seleccione el nuevo Llenar atributo desde la parte inferior, mantenga el mismo color de relleno y luego vaya a Efecto> Stylize> Drop Shadow y aplica este efecto cuatro veces. Llamemos a esta forma "barra-base". 

Estas son las configuraciones para el Sombra paralela efectos: 

Etapa 4

Siguiente, Dupdo y Pegar en el frente (Control-F) la “barra base” y luego elimine todas las apariencias existentes presionando la tecla Apariencia clara icono en la parte inferior de la Apariencia panel. Seleccione negro como el color de relleno, y luego vaya a Objeto> Crear malla de degradado, seleccionar 3 filas y 6 columnas y golpear DE ACUERDO. Como resultado obtendrás una malla de malla como en la siguiente imagen. 

Paso 5

Ahora, toma el Herramienta de selección directa (A) y úsela para seleccionar solo los tres puntos de malla indicados a continuación y cambie su color de relleno de negro a uno correspondiente. Después de que hayas terminado, establece esta forma en Luz suave del modo de fusión. Llamemos a esta forma "barra de malla". 

Paso 6

Tomar el Herramienta Rectangular (M) y dibuja un rectángulo con la misma altura que la barra de menú y colócalo en el centro. Seleccione azul claro como el color de relleno. 

Paso 7

Con el rectángulo azul aún seleccionado, ve a Objeto> Ruta> Añadir puntos de anclaje para sumar cuatro puntos extra en los laterales (1). Utilizar el Herramienta de selección directa (A) para seleccionar solo los puntos izquierdo y derecho del medio y moverlos 10 px hacia adentro presionando el IzquierdaTeclas de flecha derecha en tu teclado (2). 

A continuación, vaya a la Apariencia Panel y duplicar el azul existente. Llenar atributo. Para el nuevo Llenar en la parte superior, seleccione un degradado lineal de blanco a negro en una -Ángulo de 90 grados y establecer el Modo de fusión a Luz tenue (3). 

Paso 8

Eche un vistazo más de cerca al lado derecho de la forma azul. Tomar el Herramienta Pluma (P), dibuja una trayectoria en V siguiendo los puntos de anclaje de la forma azul y dale un 1 pt blanco Carrera. Dupdo y Pegar en el frente (Control-F) este camino, y luego mover la copia 1 px a la derecha presionando el Tecla de flecha derecha una vez. Seleccione un 1 pt negro Carrera por el segundo camino. Ahora, Grupo (Control-G) los dos caminos y establecer el grupo a Luz suave del modo de fusión.  

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

3. Crea la nieve encima de la barra de menú

Paso 1

Ahora que nuestra simple barra de menú está lista, podemos continuar con la nieve y las otras decoraciones. Para añadir la nieve, recomiendo usar el Herramienta de lápiz (N) en vez de Herramienta Pluma (P) Porque es más fácil y también obtendremos ese aspecto a mano alzada / natural, lo que en términos de nieve es bueno. Haga doble clic en el Herramienta de lápiz (N) para abrir el Preferencias Ventana y cambiar la configuración. A continuación puede ver los que he usado, pero no dude en ajustar el Fidelidad y el Suavidad a tu gusto.

Una vez configurado, acerca el lado derecho de la barra de menú y dibuja una ruta similar a la de abajo. No tienes que ser demasiado preciso: cuanto más aleatorio mejor. 

Paso 2

Todavía usando el Herramienta de lápiz (N), dibuja otro camino aleatorio debajo del primero y asegúrate de cubrir solo un poco de la barra de menú. Si los puntos finales de las dos rutas no se superponen, puede utilizar el Herramienta de selección directa (A) para moverlos uno encima del otro como se muestra en el primer plano. 

A continuación, es hora de fusionar los dos caminos en uno. Arrastre una selección con la Herramienta de selección directa (A) sobre los dos puntos finales desde la derecha (solo asegúrese de bloquear primero la barra de menú) y presione Control-J a Unirse ellos. Comprobar el Esquina opción y golpe DE ACUERDO. Después de eso, arrastre una selección sobre los dos puntos finales desde la izquierda y Unirse ellos tambien Rellena la forma resultante con blanco.. 

Paso 3

Todavía usando el Herramienta de lápiz (N), Dibuja un nuevo camino bajo la forma blanca pero muy cerca de él. La longitud de este camino debe ser aproximadamente la misma que la forma blanca (1). En este punto, cambie a la Herramienta Pluma (P) y cierre los dos puntos finales en la parte superior para obtener una forma (2). Dupdo y Pegar en el frente (Control-F) la forma blanca, y luego presione Shift-Control-] Para llevarlo delante de todo. Seleccione esta nueva copia en blanco junto con la forma azul y presione Sustraer en el Pionero panel. Obtendrá una ruta compuesta (3) pero vaya a Objeto> Ruta compuesta> Lanzamiento y eliminar las formas más pequeñas en la parte superior (4). 

Etapa 4

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

Paso 5

Tomar el Herramienta de lápiz (N) de nuevo y dibuje una forma más pequeña en el extremo derecho de la barra de menú llena de blanco (1). Dibuje otro camino debajo de él y asegúrese de que los puntos finales derecho e izquierdo se superponen (2), y luego cierre el camino en la parte superior como lo hizo antes, usando el comando Unirse función o la Herramienta Pluma (P) (3). Dupdo y Pegar en el frente (Control-F) La pequeña forma blanca y prensa. Shift-Control-] Para llevarlo delante de todo. Seleccione esta copia en blanco junto con la forma azul y presione Sustraer en el Pionero panel. Rellene la forma resultante con el mismo color (4). Esta es la segunda “pieza” de nieve..

Paso 6

Agreguemos más nieve en el lado izquierdo de la barra usando la misma técnica. Primero dibuja la forma blanca con la Herramienta de lápiz (N) (1), y luego cree la forma debajo de ella restando (2), y rellénela con el mismo color azul claro (3). 

Paso 7

Continúe agregando más "piezas" de nieve, algunas más grandes, otras más pequeñas, hasta que cubra completamente la parte superior de la barra de menús. Puedes ver en la siguiente imagen el resultado final.. 

Paso 8

Utilizar el Herramienta de lápiz (N) o la Herramienta Pluma (P) para dibujar una forma como la de abajo, y rellénela con el degradado lineal que se muestra. También puede dibujar algunas formas más pequeñas junto a él que se rellenan con el mismo degradado, y luego seleccionar todas las formas y Grupo (Control-G) ellos.

Paso 9

Utilice el grupo de formas que acaba de crear para agregar más detalles sobre la nieve. Haga más copias del grupo y escale, gírelos y colóquelos sobre la nieve..

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

Paso 1

Utilizar el Herramienta de lápiz (N) para dibujar una forma aleatoria en la esquina inferior derecha de la barra de menú, y seleccione blanco como color de relleno. Ahora, toma el Añadir herramienta de punto de anclaje (+) y úselo para agregar algunos puntos adicionales en la parte inferior de esta forma (1). Luego cambia a Herramienta de selección directa (A) y arrastre solo tres de estos puntos hacia abajo para crear los primeros carámbanos (2). Añade más puntos usando el Añadir herramienta de punto de anclaje (+) a lo largo de los carámbanos, y juega con sus asas para crear el aspecto ondulado (3).

Paso 2

Dibuje una nueva forma aleatoria junto a la primera, y luego agregue más puntos en la parte inferior con la Añadir herramienta de punto de anclaje (+) (1). Utilizar el Herramienta de selección directa (A) arrastrar dos de estos puntos hacia abajo para crear dos nuevos carámbanos (2). Agregue más puntos de anclaje a lo largo de los carámbanos y mueva sus manijas para crear el aspecto ondulado (3). 

Paso 3

Agregué una forma blanca más al lado de la segunda, pero puedes agregar tantas como quieras. En este tutorial el diseño depende de ti..  

Etapa 4

Ahora seleccione las tres formas blancas en la parte inferior derecha de la barra de menú, y Dupdo y Pegar en la parte posterior (Control-B). Mueva estas tres copias un poco hacia abajo presionando el Tecla de flecha hacia abajo en su teclado una o dos veces, y seleccione azul claro como el color de relleno. 

Paso 5

Para agregar más profundidad, dibuja con la Herramienta de lápiz (N) o la Herramienta Pluma (P) una forma más delgada en la parte superior de cada carámbano y rellénelas todas con el degradado que se muestra. 

Paso 6

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

Paso 7

El lado inferior derecho de la barra está listo, pero puede agregar más carámbanos en el lado izquierdo. Estos son más pequeños por lo que no tardarán mucho tiempo en hacerse. Utilice la misma técnica como se describe anteriormente. Primero, dibuja la forma blanca (1), y luego Dupdo y Pegar en la parte posterior (Control-B) esta forma, muévala un poco hacia abajo y cambia el color de relleno (2). Al final, use formas más pequeñas rellenas con el mismo degradado para agregar tantos detalles como desee (3). 

Paso 8

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

5. Crear y aplicar un pincel de dispersión de copo de nieve

Paso 1 

Vaya a Snowflake y descargue el conjunto de copos de nieve vectoriales creado por All-Silhouettes. Luego, abra el archivo de Illustrator desde el archivo y copie el copo de nieve resaltado con azul en su documento. Seleccione blanco como el color de relleno y arrastre el copo de nieve a la Cepillos panel para guardarlo como Nuevo cepillo de dispersión. En el Opciones de pincel de dispersión ventana, establecer el Rotación relativa al camino y dejar el resto de los ajustes como están. Escribe un nombre para el pincel y pulsa DE ACUERDO.

Paso 2

Ahora, toma el Herramienta de lápiz (N) de nuevo y dibuja algunos caminos sobre la nieve como en la siguiente imagen. Carrera estos caminos con el Pincel de dispersión de copo de nieve guardado antes y abre el Opciones de trazo ventana de la Apariencia panel. Cambia la configuración como se muestra y pulsa DE ACUERDO. Selecciona el Peso de trazo por estos caminos en 0.25 pt, 0.3 pt, 0.35 pt y 0.5 pt Para conseguir copos de nieve de varios tamaños..  

6. Añadir varias decoraciones de invierno

Paso 1

Copie los copos de nieve resaltados en azul y verde de los copos de nieve establecidos en su documento. Luego rellénelos con blanco, escávelos y colóquelos en el lado izquierdo de la barra de menú.

Paso 2

A continuación, de la Simbolos panel abierto el Menú de bibliotecas de símbolos y en el Naturaleza categoría encontrarÁrboles 1". Arrastre el símbolo a su mesa de trabajo y presione Romper enlace al símbolo icono en la parte inferior de la Simbolos Panel para ampliarlo. Escale y organice los árboles sobre la nieve y multiplíquelos si desea agregar más. 

Paso 3

Ahora, eche un vistazo más de cerca a los árboles. Toma el Herramienta de lápiz (N) y dibuja algunos caminos cortos siguiendo las ramas del árbol más grande.. Carrera estos caminos con el Pincel de arte fino de carbón que puedes encontrar en Pinceles Bibliotecas Menú> Artística> Artística_ChalkCharcoalPencil. Selecciona el Peso de trazo0.5 pt y el color al blanco para todos ellos.. 

Etapa 4

Repita el mismo proceso para los otros árboles pero reduzca el Peso de trazo Aún más, ya que los árboles son más pequeños.. 

Paso 5

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

Paso 6

Para crear la casa pequeña, comience dibujando una forma de casa simple rellena de blanco. Para el techo, dibuja un camino con una 1 pt rojo Carrera Y añada una pequeña forma roja como la chimenea. Para la puerta y las ventanas utilice el Herramienta Rectangular (M) y el gradiente mostrado. Para crear la nieve en el techo, simplemente dibuje dos caminos en la parte superior del techo y Carrera ellos con el Pincel de arte fino de carbón Como hiciste antes para los árboles.. 

Paso 7

A continuación, tome la Herramienta Elipse (L) y dibuja tres elipses para crear el muñeco de nieve. Rellénelos con el degradado radial que se muestra y luego agregue pequeños círculos negros como los ojos y los botones. Utilizar el Herramienta Pluma (P) Para dibujar una nariz y la bufanda, y listo.. 

Paso 8

En este punto puede organizar la casita y el muñeco de nieve donde desee.. 

Paso 9

Parece obligatorio añadir muchos destellos, ¿verdad? Ya he explicado cómo crear uno en el tutorial de Efecto de arte de texto con brillo. Multiplique el brillo y organice tantos como desee para mejorar su diseño.. 

7. Crea y decora botones web

Paso 1

Si ha logrado llegar a este punto, podrá crear y decorar un botón simple en lugar de una barra. Comience dibujando un rectángulo redondeado más pequeño (1), y luego cree la malla de la cuadrícula como se explica al comienzo del tutorial (2). Agregue “pedazos” de nieve en la parte superior y los carámbanos en la parte inferior (3) y use el Pincel de dispersión de copo de nieve Para añadir más nieve (4). Organice las decoraciones que ha creado (5) y, finalmente, agregue algunos destellos (6). Todas las técnicas siguen siendo las mismas..

Paso 2

Duplique o multiplique el primer botón y simplemente reorganice las decoraciones existentes para obtener más botones. 

8. Crear 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 las otras decoraciones. Seleccione “base de barra” y reemplace el púrpura con el tono de verde indicado. Mantener el resto de la configuración como están. 

Paso 2

A continuación, seleccione la forma del medio y reemplace la luz azul con verde claro. Organiza todas las decoraciones de una manera diferente y obtendrás una nueva barra de menú. 

Paso 3

Para crear la barra de menús grisácea, vuelva a duplicar la barra púrpura. Seleccione “base de barra” y reemplace el púrpura con el tono de gris indicado. Después de eso, selecciona la forma del medio y reemplaza la luz azul con rosa esta vez. El resto de los ajustes siguen siendo los mismos. Finalmente, arregla todas las decoraciones que quieras.. 

Tu país de las maravillas de invierno está listo!

Estas barras de menú y botones son bastante básicos y ayudan con la demostración, pero siéntase libre de usar cualquier otro elemento del sitio web para crear este look de invierno maravilloso. Puede comenzar desde cero o puede usar solo algunos elementos para decorar sus propios menús y botones. Es absolutamente obligatorio divertirse mucho mientras lo haces, y si quieres compartir tu creación en el país de las maravillas del invierno, me encantaría verla..