Share
En este tutorial, creará un sitio web ecológico de estilo orgánico con Adobe Illustrator. Este tutorial le muestra cómo crear gráficos vectoriales ilustrativos y aplicar esto a los diseños de diseño web. Empecemos!
Hace poco escribí un tutorial titulado Usar Adobe Illustrator para crear un diseño de sitio web limpio que se encontró con mucha fanfarria con una oposición igualmente notable. Ese tutorial fue dirigido a personas que recién comenzaron en Illustrator. Eventualmente llegó a la portada de Digg también..
Para comenzar con el pie derecho, permítame tomarme un momento para señalar lo obvio ... ¡este diseño de sitio web también se puede crear en Photoshop! Sin embargo, el propósito de este tutorial avanzado es explicar cómo usar Adobe Illustrator para diseñar un sitio web. Permítanme también distinguir el diseño de la codificación frontal. Si bien le mostraré cómo diseñar el sitio web en Illustrator, esto podría llevarse más lejos (con el uso de XTHML / CSS basado en estándares) para hacer que la función de diseño.
Sin más preámbulos, aquí se explica cómo hacer un sitio web de paisaje verde en Adobe Illustrator..
Puede encontrar los archivos de origen en el directorio etiquetado como 'origen' que vino en los archivos que descargó. Es posible que desee examinarlos brevemente antes de comenzar.
Cree un nuevo documento con un ancho de 1160 px y una altura de su elección. Establezca el Modo de color en RGB. Puede dejar los efectos de trama en High 300ppi ya que nuestro diseño no hace mucho uso de los efectos de trama.
Prefiero trabajar con un navegador en segundo plano para poder tener una mejor idea de cómo se verá el diseño final una vez que esté completo.
Las proporciones de las pantallas del navegador no son las mismas que las del documento de 1160 px, por lo que simplemente utilizará la herramienta de selección directa (A) y hará clic y arrastre sobre el área resaltada en rojo. Luego, usando la Herramienta de selección directa nuevamente (sin deseleccionar nada), haga clic en uno de los puntos que seleccionó y arrastre todo a la línea negra de la derecha, que es el tamaño de su documento..
Un sitio web con un ancho de 960px o menor funcionará bien para la mayoría de los visitantes de un sitio web. Nuestro documento está configurado con un ancho de 1160 píxeles para compensar a las personas con monitores más grandes que pueden abrir más la ventana del navegador. El espacio entre las guías verticales azules mide 960 píxeles y representa el área en la que debe permanecer todo el contenido principal. Cualquier cosa fuera de estas guías tiene el potencial de estar fuera de vista para algunos visitantes.
Este paso es esencial para crear un sitio legible. Asegúrese de saber cómo se ve el sitio web cuando se ve con un zoom del 100%. No tiene que trabajar al 100% del zoom, pero debe ser consciente de cómo se ve el sitio web cuando se ve en tamaño real (100%). Para cambiar el zoom, puede hacer clic en la esquina inferior izquierda de la ventana de su documento.
El primer paso es crear las colinas. Dibuja una elipse usando la herramienta Elipse (L).
Duplicar la elipse y superponerlos..
Combine las dos formas en el Pathfinder usando la opción Restar del área de forma. Duplique la forma, hágala un poco más pequeña y muévala hacia la derecha y hacia abajo como se muestra a continuación.
Seleccione ambas formas y vaya a Objeto> Fusión> Opciones de fusión. Seleccione Pasos especificados en el menú desplegable, ingrese un valor y haga clic en Aceptar.
Ir a Objeto> Mezclar> Hacer. Puede ajustar la mezcla si no está satisfecho con los resultados yendo a Objeto> Mezclar> Opciones de fusión ...
Vaya a Objeto> Sobre distorsión> Hacer con deformación ... Seleccione Arco en el menú desplegable y cambie los controles deslizantes para crear un arco agradable. Haga clic en Aceptar cuando haya terminado.
Para seguir manipulando las formas, necesitaremos expandirlas yendo a Objeto> Expandir. Haga clic en Aceptar.
Ahora que su forma está expandida, puede hacer que se vea más como una colina. Usando la herramienta Pluma (P), dibuje otra forma que siga el contorno de las rayas.
Primero use el Pathfinder para recortar las áreas de las colinas que son adicionales. Coloca ambas formas una encima de la otra y dales un degradado exuberante.
Coloque la colina para superponer ligeramente la guía azul. Esto sugerirá que las colinas continúen más hacia la izquierda cuando se ve el sitio web en un tamaño de navegador promedio.
Hacer otras colinas utilizando la misma técnica. Experimente ajustando el espaciado y el tamaño de las formas y el arco para crear una pequeña variedad.
Dibuja una forma de arco simple que se convertirá en un camino en las colinas. Dale un sutil degradado gris también.
Abajo he variado el giro horizontal de las colinas para darle una pequeña variación a la pieza. Observe también que tanto la colina a la izquierda como la colina a la derecha se extienden justo después de la guía azul..
A continuación vamos a crear el cielo. En última instancia, esto se configura de modo que cuando se codifica utilizando XHTML / CSS, el cielo se repetirá indefinidamente tanto en el lado izquierdo como en el derecho, sin importar el tamaño de la pantalla del navegador..
Crea un degradado de color claro y colócalo detrás de las colinas..
A veces me resulta más eficaz afinar un degradado yendo a Edición> Colores> Volver a colorear ilustraciones ... Ahora podrá seleccionar cada color (círculo superior) y mover el control deslizante para obtener el color que busca. (círculo inferior). Los cambios que realiza se pueden ver en tiempo real, antes de presionar OK, así que asegúrese de que el cuadro de diálogo Color en vivo no cubra el objeto que está recoloreando..
A continuación añadiremos pequeños detalles a los cerros y carreteras. He decidido hacer algunos carros con bloques. Cuando se desglosan en sus formas más simples, los autos son muy fáciles de crear. Comience por dibujar la forma básica que tomará su automóvil. Usa esta forma como guía.
Dependiendo de lo que busques, es posible que no tengas que hacer que todo sea perfectamente simétrico. Los coches que estoy creando son algo caprichosos, por lo que las formas tienen una calidad arbitraria. A continuación, dibujar en el techo..
Dibuja las capotas, el parabrisas y el parachoques..
Dibuja el lado del coche..
Dibuja las ventanas y un par de elipses para las ruedas. Eso es!
Duplica el coche y cambia el color para mezclarlo. El hecho de que el coche esté arqueado también ayuda a que se adapte bien a la carretera arqueada..
Usando la herramienta Pluma, dibuja una forma de ave básica. Duplica y voltea la misma forma para crear rápidamente un volumen de pájaros.
Crearemos las nubes en el cielo primero dibujando un rectángulo usando la herramienta Rectángulo (M).
Usando la herramienta de deformación (Shift + R), deforme el rectángulo hasta que se vea más como una nube. Puede que sea más fácil deformar el rectángulo más completamente si ajusta el tamaño del área de deformación. Para lograr esto, haga doble clic en la herramienta o mantenga presionada la tecla Opción + Mayús, luego haga clic y arrastre para cambiar el tamaño.
Una vez que haya terminado de hacer la forma general de la nube, puede notar que deformar un objeto tiende a darle una abundancia de puntos adicionales. Estos puntos adicionales hacen que la forma sea más compleja de lo que necesitamos que sea. Simplifique la cantidad de puntos que tiene la forma yendo a Objeto> Ruta> Simplificar. Ajusta la precisión de tu curva hasta que la forma se vuelva más suave..
Con la Herramienta de selección directa, puede ajustar los puntos y los nodos para reflejar con mayor precisión cualquier forma que esté intentando crear.
Usa la herramienta Lápiz (N) para dibujar una forma de montaña aleatoria. Debido a la naturaleza continua del dibujo con la herramienta de lápiz, a veces es más difícil cerrar el trazado cuando termina de dibujar la forma. Para cerrar fácilmente una ruta, mantenga presionada la tecla Opción antes de terminar.
Los objetos que están más alejados del espectador no necesitan tantos detalles. Haz edificios combinando rectángulos simples usando el Pathfinder.
Arquee el edificio yendo a Objeto> Sobre distorsión> Hacer con deformación ... Seleccione Arco en el menú desplegable e ingrese los valores que le parezcan más atractivos.
Así es como debería verse tu obra de arte ahora mismo. Como puedes ver, a medida que el objeto se aleja, se vuelven más claros. Utilice este conocimiento al crear su diseño. Esto realmente ayuda a darle al diseño una calidad natural..
Usando la herramienta Estrella dibuja un triángulo. Para ajustar la cantidad de puntos que tiene una estrella, use las flechas hacia arriba y hacia abajo mientras dibuja la forma. Mientras dibuja la forma, una vez que tenga 3 puntos, mantenga presionada la tecla Mayús para que la base del triángulo quede perfectamente horizontal.
Dibuja una elipse y combínala con el borde inferior del triángulo.
Dale a la forma un degradado verde.
Usa pequeños triángulos dentro del área del árbol principal para darle un poco más de detalle. Usa un rectángulo para la base del árbol..
Duplica y varía el tamaño de los árboles para crear un bosque.
Ajuste la opacidad de una elipse para crear una sombra estilizada para cada árbol.
Nuevamente, utilizando la herramienta Lápiz, dibuje una forma orgánica para crear una roca..
Deselecciona la forma de roca principal y dibuja otras formas anormales que se convertirán en musgo y sombras. Utilice el Pathfinder para dividir las formas y deshacerse de las sobras innecesarias.
Esto es lo que debes dejar.
Coloca las rocas al azar en todo el diseño y dales una sombra como hiciste para los árboles..
Crea una forma de hoja con la herramienta Pluma.
Dando las variaciones de la hoja en color se sumará a su realismo. Usando la herramienta Lápiz (N), dibuja una forma que se vea como la mía a continuación. Utilice la paleta de Pathfinder y divida la hoja en secciones. Elimina las formas sobrantes que no forman parte de la hoja..
Selecciona cada sección de la hoja y dale un cambio de color sutil para simular la luz que llega a cada parte de la hoja.
Dibuja una elipse muy estrecha que se convertirá en el tallo de la hoja..
Usa la herramienta Warp para moldear la elipse y hacer que luzca más natural..
Dale a las hojas y los tallos un cambio de color para romper la monotonía de las hojas. Vaya a Edición> Colores> Ajustar balance de color ... luego mueva los controles deslizantes a su gusto.
Coloca las hojas en un racimo en la esquina del diseño..
Agregue el título de los sitios a la sección superior. Si su título se escribirá con una fuente estándar como Helvetica, ya habrá terminado con este paso. Si su título no usa una fuente del sistema, no dude en mejorarlo con efectos como una sombra paralela o un borde biselado, por ejemplo.
Así es como se ve el encabezado completo del sitio web. Observe cómo se mantiene el contenido principal entre las guías azules que miden 960px de ancho.
Crea la sección de contenido principal del sitio. Decidí crear un tema amigable con la tierra, de modo que el azul era una opción adecuada para este diseño.
Usando la herramienta Lápiz crea una forma alta de carámbano.
Dale a la forma del carámbano un brillo interior para agregarle profundidad yendo a Efecto> Estilizar> Resplandor interior ... Dibuja formas de carámbanos más pequeñas similares y colócalas debajo de la forma más grande. No tienes que darles brillo interior a estas otras formas..
Usa la herramienta Lápiz para crear algunas rocas pequeñas para agregar interés a la cascada.
Usaremos un pincel de dispersión para construir una masa de burbujas. Dibuja una elipse y arrástrala a la paleta de pinceles. Seleccione New Scatter Brush y presione OK. Si la paleta de pinceles no está visible, vaya a Ventana> Pinceles.
Configure el Tamaño, el Espaciado y la Dispersión al azar y ajuste los controles deslizantes. Es importante ajustar los triángulos negros y grises para que sus formas sean lo suficientemente aleatorias.
Con la herramienta Pluma seleccionada, haga clic en el pincel de dispersión que acaba de hacer y dibuje una línea. Cambie el grosor de línea para variar el tamaño de los círculos o haga doble clic en el pincel de dispersión para obtener más opciones.
Para seguir editando los círculos, simplemente expanda la línea yendo a Objeto> Expandir apariencia.
Usa la herramienta Pluma para dibujar algunas formas de peces..
Coloque la roca que dibujó anteriormente en la parte inferior de la página para crear un pie de página..
Use el pincel de dispersión que usó para las burbujas para crear una textura para el pie de página. Para hacer que la textura quede confinada dentro del área del rectángulo del pie de página, simplemente dibuje un rectángulo sobre la forma de burbuja, seleccione las burbujas y el rectángulo y presione Comando + 7 para crear una máscara. O bien, use las áreas de forma de intersección en el Pathfinder para eliminar las burbujas fuera del área del rectángulo.
Mi navegación se puede reproducir fácilmente usando CSS. Ten esto en cuenta cuando crees el tuyo también. Cualquier texto que use una fuente que no sea una fuente del sistema deberá ser una imagen. Ahora es habitual y preferido utilizar CSS siempre que sea posible y no imágenes.
Crea algunos elementos que pueden mejorar el diseño utilizando formas simples.
Decidí que quiero que la imagen se inserte dentro del texto. Para hacer esto, seleccione el elemento que se insertará y vaya a Objeto> Ajustar texto> Crear. Vuelva a Objeto> Ajuste de texto> Opciones de ajuste de texto para ajustar el espacio entre los elementos y el texto.
Realice los campos de entrada del formulario utilizando un rectángulo, redondeando las esquinas, dándole un trazo exterior y, finalmente, un relleno de degradado sutil. Todos estos efectos son fácilmente modificables haciendo doble clic en cada efecto en la Paleta de Apariencia.
Cree un botón nuevamente dibujando un rectángulo, dándole a las esquinas redondeadas un ligero degradado y una sombra paralela.
Agrega cualquier otro elemento para completar tu diseño..
Así es como se ve el diseño final. Observe cómo toda la información crítica se mantiene dentro de las guías azules. El pie de página también se repetirá usando CSS..
Acabas de aprender a crear un sitio web de paisaje verde en Adobe Illustrator. Los diseños de sitios web de estilo vectorial pueden distinguir un sitio al darle un aspecto único. ¡Comience con su propio diseño y vea lo que puede hacer! La imagen final está debajo o puedes ver una versión más grande aquí..
Accentsconagua