Cómo crear un largo fondo de desplazamiento para un sitio web

En este tutorial aprenderás cómo crear un fondo plano de desplazamiento super-largo para un sitio web. Además, en un tutorial de seguimiento, tendrás la oportunidad de verlo en acción y descubrir cómo hacerlo funcionar. Para esta parte del tutorial, usaremos Adobe Illustrator, sus formas y funciones básicas para crear una fantástica composición con varios elementos, conectados con un mismo tema.

Al final de esta lección, podrás utilizar tus nuevas técnicas no sólo para crear un fondo de página web, sino también cualquier otro tipo de composiciones o ilustraciones de estilo plano, como fondos sin fisuras para juegos, paisajes urbanos de estilo plano, y muchos otros. ¡Navegue por Envato Market para una inspiración inagotable, y prepárese para seguir el proceso emocionante!

1. Crear objetos espaciales y planetas

Paso 1

!Comencemos a hacer nuestro primer planeta! Tome la herramienta Elipse (L) y mantenga pulsada la tecla Shift para hacer un círculo oscuro-magenta de 365 x 365 px de tamaño.

Cambie a la herramienta Rectángulo (M) y haga una franja rosa de 450 x 30 px.

Paso 2

Manteniendo la franja seleccionada, pulse Intro para abrir la ventana Opciones de movimiento. Establezca el valor Horizontal en 0 px y el valor Vertical en 30 px.

Pulse Control-D varias veces para repetir nuestra última acción y cubrir todo el círculo con rayas.

Ahora selecciona rayas alternas (las he marcado con el color oscuro en la captura de pantalla de abajo para dejarlo claro) y haz que las rayas seleccionadas sean mucho más cortas.

Paso 3

Ahora seleccione todas las rayas y Combinar en el Buscatrazos para fusionarlas en una sola forma. Antes de hacer eso, puede variar la longitud de algunas de las rayas, haciéndolas más cortas o más largas. Sin embargo, también puede hacerlo después de Combinarlas las bandas, pero en este caso necesitará utilizar la Herramienta Selección directa (A), seleccionar los pares de puntos de anclaje y moverlos a la izquierda oa la derecha.

Cuando esté satisfecho con la posición de las rayas, seleccione todo con la Herramienta Selección directa (A) y utilice la función Esquinas interactivas para redondear las esquinas arrastrando los pequeños marcadores de círculo situados junto a cada esquina.

Esta función está disponible sólo en Adobe Illustrator CC, pero si está utilizando versiones anteriores del programa, intente jugar con Efecto > Estilizar > Esquinas redondas para lograr un efecto similar.

Paso 4

Copiar nuestra Forma y Pegar en la parte posterior (Control-C > Control-B). Mueva la nueva forma a la izquierda un poco presionando Shift y la tecla de flecha izquierda unas cuantas veces. Cambie la longitud de algunas de las bandas con la ayuda de la herramienta de selección directa (A) para hacer que la copia se vea un poco diferente. Haz que la nueva forma sea un poco más oscura que la copia superior.

Ahora veamos cómo podemos hacer que las formas encajen entre sí. Copiar (Control-C> Control-F) el círculo inferior y Traerlo a Frente (Shift-Control-]). Seleccione todo, haga clic con el botón derecho del ratón y Crear máscara de recorte.

¡Estupendo! ¡Ahora tenemos todo escondido dentro del círculo superior! Y todavía podemos editar el contenido de la Máscara de recorte haciendo doble clic en el objeto para entrar en el modo aislamiento. Por ejemplo, puedes agregar otra forma dentro del planeta, haciéndola un poco más oscura.

Paso 5

Vamos a crear otro planeta de un tamaño más pequeño. Haga un círculo turquesa de 130 x 130 px. Tome la Herramienta de Segmento de Línea (\) y mantenga presionada la tecla Shift para hacer una pequeña franja horizontal. Puede editar los ajustes del trazo desde el panel de control en la parte superior o desde el panel Trazo (Ventana > Trazo). Hacer el color del trazo un poco más claro que el color del planeta. Ajuste el peso a 2 pt y el perfil a perfil de anchura 1, haciendo que las puntas de la carrera se apunte.

Paso 6

Añada más rayas, variando su longitud. Duplicar el círculo y Traer al frente (Shift-Control-]). Seleccione todo y Crear máscara de recorte para ocultar los trazos dentro del círculo.

Paso 7

Cree una luna simple haciendo un círculo de 80 x 80 px, y continúe usando la Herramienta de Elipse (L) para cubrir la luna con óvalos de color rosa oscuro, representando cráteres.

Paso 8

Vamos a crear nuestro último planeta, haciéndolo un poco más detallado. Comience por hacer un círculo naranja de 220 x 220 px.

Utilice la herramienta Rectángulo (M) para hacer una franja de color naranja claro a través del círculo. Mantenga Alt-Shift y arrástrelo hacia abajo, haciendo una copia y adjuntarla a la primera raya. Haga la nueva raya un poco más ligera.

Continuar añadiendo rayas de la misma manera y varie los colores. Usted puede dejar algunas brechas para hacer el color del planeta visible también. Lo que también puedes intentar es armarte con la herramienta Cuentagotas (I), manteniendo pulsada la tecla Shift y seleccionando los colores directamente desde mi captura de pantalla. Adobe Illustrator le permite seleccionar colores desde cualquier parte de su pantalla, incluso fuera de la ventana del programa.

Utilice la máscara de recorte para ocultar las rayas dentro del círculo.

Paso 9

Ahora vamos a agregar un anillo a nuestro planeta rayado, similar a los anillos de Saturno. Utilice la herramienta de elipse (L) para hacer dos elipses aplastadas sobre el planeta. Hago el óvalo negro superior para hacerlo visible.

Seleccione los óvalos junto con el planeta y haga clic en el planeta una vez más para convertirlo en un objeto clave (notará una selección más gruesa alrededor del objeto). Vaya al panel Alinear y haga clic en Centrar para hacer que los objetos estén perfectamente centrados.

Seleccione ambas formas y utilice la función Menos Frente de BuscaTrazos para cortar el óvalo superior, haciendo un agujero.

Paso 10

Ahora Duplicar la base planetaria del círculo y tráer al frente (Shift-Control-]), y luego enviar Hacia atrás (Control-[) a una posición, colocando el círculo justo debajo del anillo de nuestro planeta.

Seleccione el círculo y el anillo y tome la herramienta Creador de Formas (Shift-M). Mantenga Alt y haga clic en la parte del anillo que se superpone al círculo para eliminarlo. Como puedes ver, ahora tenemos un hueco y dos piezas del círculo que ya no necesitamos.

Elimina las piezas innecesarias y ¡aquí la tenemos! ¡Planeta Saturno está listo!

2. Mostrar las nubes

Paso 1

Hagamos unos tipos diferentes de nubes para diferentes capas de atmósfera.

Utilice la herramienta Elipse (L) para hacer un círculo de 100 x 100 px azul claro. Añadir un segundo círculo de 55 x 55 px a la derecha. Por último, fije un par de círculos más a la izquierda, variando los tamaños y haciendo hinchada a la nube .

Paso 2

Seleccione todos los círculos y tome la herramienta Borrador (Shift-E). Mantenga presionada la tecla Alt y arrastre la selección sobre la parte inferior de la nube para borrarla.

Por último, Unir todos los círculos en el BuscaTrazos y establecer la opacidad de la forma a 50% en el panel Transparencia.

Paso 3

Ahora crearemos un elemento ambiental simple que representará una montaña o un pico estilizado. Utilice la herramienta Rectángulo (M) para crear una franja vertical de 95 x 410 px.

Vamos a llenarlo con gradiente lineal de azul oscuro a azul ya azul claro. Ajuste la Opacidad del deslizador azul claro en 0% en el panel Gradiente, haciéndolo transparente. Utilice la Herramienta Gradiente (G) para colocar el degradado verticalmente.

Seleccione la parte superior del rectángulo con la Herramienta de selección directa (A) y utilice la función Esquinas interactivas para que se redondee completamente.

Paso 4

Ahora haremos otra clase de nube.

Haga un rectángulo turquesa de 220 x 25 px. Añadir un rectángulo más pequeño en la parte superior, adjuntar a la derecha a la primera. A continuación, agregue un tercer rectángulo encima del segundo, haciéndolo ancho. Unir todas las rayas en el Buscatrazos.

Haga que todas las esquinas estén totalmente redondeadas, utilizando la función Vértices Interactivos.

Paso 5

Añadir algunas nubes más, variando sus formas. Vaya al panel Transparencia y establezca la Opacidad de sus nubes en un 50%.

3. Hacer un fondo y organizar los elementos

Paso 1

En primer lugar, vamos a fijar el tamaño de nuestro Artboard a 800 x 4400 px, utilizando la herramienta Mesa de Trabajo (Shift-O). Puede seleccionar este instrumento y ajustar el tamaño en el panel de control en la parte superior.

Utilice la herramienta rectángulo (M) para crear una forma del mismo tamaño (800 x 4400 px) y alinearla a la Mesa de Trabajo.

Vamos a llenarlo con un gradiente lineal vertical, arreglando los colores como se muestra en la captura de pantalla de abajo: pasar de violeta oscuro a azul ya lila en la parte inferior.

Paso 2

Vamos a empezar a añadir nuestros objetos desde la parte superior. Coloque los planetas sobre la parte oscura del lienzo, combinando los elementos entre sí. Luego comienza a añadir las nubes, variando sus tamaños y posiciones.

Paso 3

Bajar y utilizar el pico estilizado que hemos creado para formar un grupo de picos. Haga varias copias y colóquelas una junto a la otra y una frente a otra, haciendo que algunas sean más altas y las otras más bajas. Las partes inferiores de los picos se mezclan muy bien con el fondo, ya que los hemos hecho semitransparentes.

Paso 4

Vamos a añadir algunas formas más para la atmósfera. Cree dos óvalos grandes, utilizando la herramienta Elipse (L), y haga que se superpongan entre sí, como se muestra en la captura de pantalla a continuación. Seleccione ambas formas y utilice la función Frente Menos de Buscatrazos para cortar las formas, de modo que sólo tengamos la forma de media luna a la izquierda.

Ajuste la opacidad de la forma al 50% y haga el color un poco más ligero, si es necesario, para hacer la forma semi-transparente y aireada. Añadir una segunda crescent en la parte superior, cambiando ligeramente su color.

Paso 5

La parte inferior de nuestro fondo permanece en blanco, así que vamos a llenarlo con nuevos elementos, la creación de un bosque espeso y el suelo.

Utilice la herramienta Elipse (L) para crear un grupo de círculos, variando sus tamaños y haciendo que se superpongan. Unir todos los círculos en el Buscatrazos y llenar la forma fusionada con un gradiente lineal vertical de lila en la parte inferior a azul en la parte superior.

Paso 6

Ahora daremos forma al tronco del árbol. Utilice la herramienta Rectángulo (M) para crear una forma vertical estrecha de 75 x 1180 px para el tronco. Llene la forma con el color violeta oscuro para crear un contraste sobre el fondo claro. Tome la herramienta de selección directa (A) y seleccione el punto de anclaje superior izquierdo. Pulse Intro para abrir la ventana Opciones de Mover y establezca el valor Horizontal en 20 px, Valor vertical en 0 px. Haga clic en Aceptar, moviendo el punto 20 px hacia la derecha. Repita lo mismo para el punto de anclaje derecho, moviéndolo en la dirección opuesta.

Añadamos también algunas ramas simples a nuestro árbol. Armarse con la herramienta Arco (se puede encontrar en el mismo menú desplegable que la Herramienta de segmento de línea (\)). Haga una línea curva y ajuste el color de trazo al mismo tono violeta que el tronco (utilice la herramienta Cuentagotas (I) y mantenga pulsada la tecla Shift para seleccionar el color). Dirijase para el panel Trazo y establezca el valor de grosor a 20 pt y Remate y la Vertice de posiciones medias, haciendo que las puntas de las ramas redondeadas.

Paso 7

Duplicar el tronco del árbol y cambiar la posición de las ramas para hacer la composición versátil. Coloque los troncos debajo de la corona arbórea presionando Control-[.

Vamos a añadir alguna dimensión a nuestros árboles. Cree otro grupo de círculos, llenándolos de color violeta (un poco más ligero que los troncos). Unir los círculos en el panel BuscaTrazos y pulsar Control-[ varias veces para enviar la forma hacia atrás, debajo de los troncos.

Paso 8

Crear más copias de los troncos de los árboles y hacerlos más ligeros. Coloque las copias debajo de los troncos más oscuros, creando un efecto aéreo y añadiendo profundidad a nuestro bosque.

Añada arbustos púrpura en la parte inferior de los troncos, formándolos de los círculos de la misma manera que lo hicimos con las copas de los árboles.

Paso 9

Ahora vamos a añadir un terreno para formar la parte inferior de nuestra composición. Utilice la Herramienta Rectángulo (M) para crear una forma de ancho de 800 px (el mismo ancho que tenemos para nuestro Artboard). De lo contrario, sólo puede duplicar el rectángulo de fondo, moverlo en la parte superior y reducirlo, reduciendo su altura. Llénelo con el mismo color lila que los troncos de los árboles de atrás, para hacer que las formas se unan visualmente entre sí.

Ahora tome la herramienta Curvatura (Shift- ') y vamos a doblar el borde superior del suelo un poco arrastrando su mitad izquierda hacia abajo. Haga una ola suave tirando de la mitad opuesta del borde superior hacia arriba.

Paso 10

Añadir otra capa de tierra, llenándola con el mismo tinte de violeta que tenemos para los troncos del árbol medio, haciendo que las formas se fundan. Doble la forma, usando la herramienta curvatura (Shift-').

Acabar con el suelo mediante la adición de la capa más oscura en la parte superior, doblándola, y utilizando la herramienta Elipse (L) para motear óvalos diminutos sobre el suelo, para darle un poco más de textura.

Paso 11

Ahora que tenemos todos los objetos colocados y arreglados, vamos a ver cómo podemos ocultar las piezas que están cruzando los bordes de la mesa de trabajo.

Duplicar (Control-C > Control-F) el rectángulo de fondo largo y Traer al Frente (Shift-Control-]). Ahora seleccione todo, haga clic con el botón derecho del ratón y Crear máscara de recorte. ¡Voila! Ahora todos los objetos están ocultos dentro de una gran máscara de recorte.

Lo que también puede hacer para que su flujo de trabajo sea más rápido, fácil y conveniente es reunir nuestros objetos en varios grupos (un grupo de planetas, un grupo de nubes, picos, árboles, etc.) y usar máscaras de recorte separadas para cada grupo .

Paso 12

Puede continuar añadiendo los elementos dentro de la máscara para hacer el fondo más detallado e intrincado. Por ejemplo, he añadido algunas estrellas, añadiendo profundidad a la parte superior del fondo.

4. Dibujar los caracteres principales o los elementos móviles en su fondo

Paso 1

Ahora que tenemos nuestros fondo listo, vamos a crear varios objetos que se están en todo el camino a través del fondo cuando lo estamos desplazando. Estos van a ser los elementos clave que vamos a mover de arriba a abajo del fondo, uno por uno.

Comenzaremos haciendo un platillo volador. Utilice la herramienta Elipse (L) para hacer un círculo turquesa de 200 x 200 px. Haga un óvalo magenta horizontal y envíelo hacia atrás presionando Control- [.

Utilice la Herramienta Segmento de Línea (\) y mantenga presionada la tecla Mayús para hacer una franja horizontal a través del círculo. Seleccione el círculo y la línea y utilice la función Dividir del BuscaTrazos para dividir el círculo. Seleccione la mitad inferior y Enviar Detras (Shift-Control-[), debajo del platillo.

Paso 2

Utilice la herramienta curvatura (Shift-') para doblar el borde inferior del círculo superior, haciéndolo ligeramente curvado.

Ahora vamos a añadir alguna dimensión a nuestro OVNI y decorarlo con detalles adicionales. Copiar el óvalo magenta y Pegar detras (Control-C> Control-B). Haga que la copia inferior sea un poco más oscura y arrastre su parte inferior hacia abajo, utilizando la herramienta de selección (V), haciendo que la forma sea un poco más grande.

Duplicar (Control-C> Control-B) la mitad inferior del círculo turquesa y reducir la copia superior un poco, arrastrando su borde inferior hacia arriba. Llene la copia inferior con el color amarillo, haciendo un tono suave.

Utilice la herramienta elipse (L) para hacer un grupo de bombillas amarillas de la luz a lo largo del borde del platillo.

Paso 3

Terminemos con nuestro OVNI añadiendo una reflexión brillante a su superficie de vidrio. Copiar la mitad superior del círculo turquesa y Pegar dos veces delante (Control-C> Control-F> Control-F). Mueva la copia superior a la derecha un poco, utilizando la tecla de flecha derecha de su teclado.

Seleccione la copia superior y la inferior y haga clic en  Frente Menos en el panel BuscaTrazos para cortar las formas, dejando sólo una estrecha franja en forma de media luna en el borde izquierdo del OVNI. Llene la forma creada con el color turquesa claro, formando un punto culminante. Usted puede agregar un círculo más pequeño del mismo color en la parte superior, haciendo el OVNI se vea completo.

Paso 4

Ahora vamos a hacer un personaje de fantasía que está escondido dentro del OVNI – un alienígena. Primero haremos que parezca que está bajando de su barco por la atmósfera.

Tome la herramienta elipse (L) y haga un círculo de 50 x 50 px azul claro. Haga un óvalo azul oscuro para el ojo. Manteniendo el ojo seleccionado, haga doble clic en la herramienta Reflect (O) y gire la forma sobre el eje vertical. Haga clic en Copiar para agregar un segundo ojo.

Haga un círculo magenta más grande del tamaño de 75 x 75 px y colóquelo justo debajo de la cabeza del alienígena.

Paso 5

Utilice la herramienta Rectángulo (M) para crear una forma de turquesa de tamaño 100 x 330 px, colocándola debajo de la cabeza del alienígena. Seleccione los puntos de anclaje inferiores de la forma con la herramienta selección directa (A) y utilice la función vertices interactivos para que la parte inferior de la forma quede totalmente redondeada.

Añadir dos franjas verticales estrechas por encima de la forma de turquesa y utilizar la función Frente Menos de buscatrazos para cortar las formas.

Paso 6

Utilice la herramienta selección directa (A) para seleccionar los puntos de anclaje superiores de las rayas y arrástrelas hacia arriba o hacia abajo, variando la altura de las formas. Utilice la función vertices interactivos para que las esquinas se redondeen. Ahora las formas parecen un cometa o un meteorito que cae.

Manteniendo las formas seleccionadas, vaya a Objeto > Trazado > Desplazamiento y establezca el valor de Desplazamiento en 5 px, creando así una forma más grande.

Haga que la forma interior sea un poco más clara, agregando dimensión.

Paso 7

Utilice la herramienta selección directa (A) para variar la altura de las rayas oscuras y claras.

Paso 8

Ahora vamos a describir a nuestro alienígena en su totalidad después de que aterriza en el suelo. Usaremos la cabeza y le agregaremos elementos. Utilice la herramienta rectángulo (M) para hacer una forma de 6.5 x 85 px azul claro a través de la cabeza. Añadir un pequeño círculo de 15 x 15 px arriba.

Paso 9

Ahora modelaremos el cuerpo a partir de un rectángulo azul claro de 70 x 140 px. Añada dos delgadas franjas verticales por encima del rectángulo y utilice la función Frente Menos de Buscatrazos para cortarlas, formando dos brazos largos y delgados.

Utilice la herramienta selección directa (A) para mover los puntos de anclaje inferiores de los brazos hacia arriba, haciéndolos más cortos que el cuerpo.

Paso 10

Añadir otro rectángulo en la parte superior del cuerpo y cortar a cabo usando menos frente para dar forma a las piernas de nuestra criatura.

Utilice la Herramienta selección directa (A) y la función vertices interactivos para que todas las esquinas cuadradas se redondeen total o parcialmente.

Paso 11

Terminemos nuestro alienígena seleccionando su cuerpo y usando Objeto > Trazado > Desplazamiento con 5 px Valor de desplazamiento para hacer una forma más grande alrededor del cuerpo. Llénelo con el mismo color rosa magenta que el círculo alrededor de la cabeza.

Paso 12

Terminar con el fondo colocando los elementos principales en el centro del fondo, a partir del OVNI en la parte superior y terminar con el extraterrestre en el suelo. ¡Y eso es todo!

¡Fantástico! Nuestro fondo plano largo de desplazamiento está terminado!

¡Gran trabajo! Hemos llegado al final de nuestro tutorial y terminado el proceso emocionante de crear elementos y combinarlos entre sí, la construcción de una composición equilibrada! ¡Hemos aprendido a transformar formas geométricas básicas y utilizar varias funciones de Adobe Illustrator para hacer nuestro flujo de trabajo rápido y conveniente!

Podemos utilizar estas técnicas para nuestros futuros proyectos, creando fondos planos sin costuras, composiciones detalladas y paisajes de estilo plano, paisajes, paisajes urbanos y mucho, mucho más.

Ahora que tenemos una versión estática de nuestro fondo listo, podemos aprender cómo hacer que funcione y se mueva! ¡Mantente atento y no te lo pierdas!