Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Crear un diseño web ilustrativo de una sola página con Photoshop

by
Read Time:22 minsLanguages:

Spanish (Español) translation by Manuel (you can also view the original English article)

¡Hola a todos! Este es mi primer tutorial en este nuevo e impresionante sitio de la familia tuts+. Esta vez tengo para ti un tutorial muy detallado sobre cómo crear un diseño web ilustrativo de una sola página desde cero con Photoshop. Aprenderás a construir un layout para un diseño web de una sola página, a crear fondos ilustrativos con un estilo particular, a diseñar una barra de navegación flotante, a trabajar con texto teniendo en cuenta CSS3, y mucho más... ¿Listo para empezar?


Algunos ejemplos en vivo

Últimamente han aparecido en la red unos cuantos sitios estupendos de "desplazamiento vertical". Antes de entrar en materia, vamos a ver algunos de ellos para ver cómo será el efecto final. Esto ayudará a contextualizar el resto del tutorial:


Antes de empezar

Este tutorial requiere algunos conocimientos básicos de las herramientas de Photoshop, me saltaré algunas explicaciones básicas como la creación de una máscara de capa, la adición de una guía o la adición de una capa de texto.

Mi diseño se basa en varios ejemplos de la web de un estilo muy actual, un paisaje panorámico vertical vectorial como fondo y áreas de texto limpias que muestran la información importante. Imagina este sitio como un diseño de una sola página como un sitio web de la cartera de un diseñador creativo o un ilustrador.

No entraremos en la parte de codificación de este proyecto porque nos centraremos en las distintas técnicas de ilustración y maquetación, pero se basa en el popular plugin jQuery.ScrollTo, que puedes consultar para obtener consejos de codificación de este tipo de diseño.

Vamos a empezar, los activos para este tutorial son:


Paso 1: Cómo empezar

En primer lugar, tenemos que configurar el documento de trabajo, estoy basando este diseño en las 12 columnas 960 Grid System que se puede descargar de forma gratuita, de lo contrario, solo hay que crear un documento de 960px con y hacer dibujar algunas Guías a los bordes izquierdo y derecho.

Como una práctica común en los trabajos de diseño web necesitamos aumentar esta área para ver cómo se ve en resoluciones más altas, pero necesitamos establecer un tamaño estándar para la altura también, esta altura debe ser el área mínima visible (por encima del pliegue), ya que estamos diseñando un diseño de una sola página. Ve a Imagen > Tamaño del lienzo y establece el ancho a 1420px y el alto a 750px.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 2 - Delimitar las secciones

A continuación, utiliza un gráfico temporal para dividir el documento en secciones, utilizando la herramienta Rectángulo dibuja un rectángulo de arriba a abajo (750px de altura). A continuación, aumentar el tamaño del lienzo mucho (puedes utilizar la herramienta de recorte aquí).

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 3 - Delimitar las secciones

Dibuja una Guía en la parte inferior del Rectángulo y duplícala, luego haz coincidir el lado superior de la copia con el lado inferior del primer rectángulo y agrega una Guía en la parte inferior del segundo rectángulo, repite este proceso tantas veces como secciones tengas en el diseño, en este caso necesitamos 4: Inicio, Quiénes somos, Portafolio y Contáctenos. A continuación, con la herramienta Recortar elimina el lienzo sobrante. Debes tener un lienzo de unos 3000px de altura con 4 secciones, cada una de 750px. Elimina los rectángulos de guía y avanza.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 4 - Fondo del cielo

Con la herramienta Rectángulo dibuja un rectángulo desde la parte superior hasta la inferior de la tercera sección. a continuación, añade un estilo de capa de superposición de degradado utilizando los siguientes colores: #FFFFFF #6E98C8 #2A3256 y #0C0E1A, establece el Ángulo a 90° (es muy importante, ya que este fondo de degradado será cortado para ser repetido en el eje x) y pulsa OK.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 5 - Fondo de hierba

Dibuja un Rectángulo en la cuarta sección del documento, luego agrega un Estilo de Capa > Superposición de Gradiente usando estos colores: #486302 #64A500 y #BEDC40. Al igual que en el paso anterior, ajusta el Ángulo a 90°.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Ilustraciones: El cohete

Paso 6 - Cuerpo del cohete

Ahora empezaremos a diseñar los elementos gráficos adicionales del fondo. El primer elemento que tenemos que dibujar es un cohete espacial, que se colocará en la sección uno del diseño. Para ello crea un nuevo documento (400px de ancho y 600px de alto) y guárdalo con un nombre descriptivo como "cohete", añade un fondo azul oscuro #181C35.

A continuación, utilizando la herramienta Pluma, dibuja una forma blanca rellena similar a la imagen de abajo, luego duplícala y ve a Editar > Transformar > Voltear horizontalmente y coloca la copia exactamente al lado de la original, selecciona ambas capas y combínalas presionando Comando / Control + E. Este será el Cuerpo del Cohete.

Ahora añade un Estilo de capa > Superposición de degradado a la capa "Cuerpo del cohete" utilizando los siguientes colores: #0B85DB, #014C83, #2396EF, #004B82 y #1477B8, ajusta el Ángulo a 0° y pulsa OK. Por último, rasteriza el gradiente fusionando la capa "Rocket body" con una nueva capa en blanco.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 7 - Rayas

Crea tres elipses amarillas con la herramienta Elipse y colócalas como muestra la imagen de abajo. Rasterízalos (haz clic con el botón derecho en la miniatura de la capa y selecciona Rasterizar). A continuación, mantén la tecla Comando / Ctrl y haz clic sobre una miniatura de Elipse en el Panel de Capas para seleccionar automáticamente la forma de la capa y utilizando los Cursores mueve la selección algunos píxeles por encima, a continuación, pulsa la tecla Suprimir, este proceso creará una bonita franja curva. repite las acciones con las otras elipses.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 8 - Más rayas

Duplica cada franja y colócala unos píxeles por encima de la original. A continuación, selecciona todas las rayas y combínalas en una capa llamada "Rayas". A continuación, comando / Ctrl en el "cuerpo del cohete" para seleccionar la forma del cohete, a continuación, ir a Seleccionar> Modificar> Expandir y establecer 2 píxeles, a continuación, invertir la selección pulsando Comando / Ctrl + Shift + I. A continuación, en el panel de capas, haz clic en la capa "Stripes" y eliminar la selección.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 9 - Estilo de la raya

Selecciona la capa "Rayas" y añade un Estilo de capa > Superposición de degradado utilizando los siguientes colores: #EFAC00, #BD8401, #C39700, #FFCF2C, #C39700, #BD8401 y #EFAC00 Ángulo 0°. Y una sutil sombra negra (tamaño: 2px).

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 10 - Punta de cohete

Selecciona la capa "Cuerpo del cohete", luego con la herramienta Marco elíptico selecciona la punta del cohete como muestra la imagen de abajo, copia la selección y pégala encima de la capa del cohete y debajo de las rayas, nombra la nueva capa "Punta". Copia el estilo de la capa de las rayas y pega el estilo a la "punta".

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 11 - Ventana del cohete

Utilizando la herramienta Elipse, dibuja una elipse en el lado izquierdo del cohete y nómbrala "Ventana", luego añade un Estilo de capa > Superposición de degradado utilizando los siguientes colores: #777777, #E8E8E8, #ADADAD, #FEFEFE, #C8C8C8 y Ángulo: 0°.

A continuación, duplica la capa "Ventana" y hazla un poco más pequeña, coloca la copia justo encima de la original. Como la elipse es una máscara vectorial, cambia el color de su fondo a #00CCFF y haz doble clic en el Estilo de capa de superposición de degradado, en el diálogo cambia su Modo de fusión a Pantalla. Por último, añade una sutil sombra interior a la capa "Copia de la ventana" y, si lo deseas, una sombra paralela a la capa "Ventana".

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 12 - Base del cohete

Vamos a añadir la base del cohete, primero pon todas las capas relacionadas con el cohete (cuerpo, punta, rayas y ventana) y combínalas. Usando la Herramienta Pluma dibuja tres formas siguiendo el ejemplo de la imagen de abajo, tres de ellas por encima de la nueva capa "Cuerpo" y una por debajo. Utiliza este color de relleno para las formas: #FBCC28.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 13 - Volumen a la base

Añade tres nuevas formas que representen el volumen a la base del cohete. Sigue la imagen de abajo, y utiliza este color de relleno: #AB8204.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 14

Aplica el estilo de capa de superposición de degradado a los pedestales, utiliza los siguientes colores: #FACB2, #FFF393, #FFD952 y #D4A500, establece el ángulo a 90°, trata de conseguir algo como la imagen de abajo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 15 - Detalles finales

Fusiona todas las capas (yo siempre he dejado una copia de las capas vectoriales en un ejemplar solo por si acaso). Crea una elipse sobre el cohete rellenada con este color: #DFF8FF, luego ve a Filtro > Desenfoque > Desenfoque Gaussiano y establece el Radio a 23 o 24 píxeles, nombra la capa "Luz". Comando / Ctrl,  Haz clic sobre la capa del Cuerpo del Cohete para seleccionar su forma, Comando/Ctrl + Mayúsculas + I para invertir la selección y eliminar la selección de la capa "Luz". Por último, cambia su Modo de fusión a Luz suave.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 16 - Colocar el cohete en el escenario

Fusiona todas las capas de Rocket y cópialas. Pega el Rocket en la parte derecha de la sección 1 de nuestro documento principal.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 17 - Disparo de cohetes

puedes hacer este paso tanto en el documento cohete como en el principal. Crea dos elipses usando la Herramienta Elipse una más pequeña que la otra como muestra la imagen de abajo, usa los siguientes colores: #FF8A02, #FFC801. Fusiona ambas capas en una nueva capa llamada "Fuego". A continuación, colócalo solo detrás de la capa "Cohete". A continuación, aplica un desenfoque gaussiano de 9 píxeles y, utilizando los controles de transformación libre, distorsiona un poco el fuego haciéndolo más estrecho.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Fondo de estrellas

Paso 18 - Crear un preajuste de pinceles personalizado

Abre los pinceles de las estrellas desde los preajustes, luego abre el panel de preajustes de pinceles (F5).

En Brush Tip Shape selecciona la estrella de 50px y cambia su tamaño a 25px, marca la casilla Spacing y establece el valor a 300%.

En Dispersión ajusta Dispersión al 1000% Control: Presión del lápiz (en caso de tener una tableta gráfica) Contar: 1 y Count Jitter: 100%.

En Dinámica de color, establece la fluctuación de primer plano/fondo al 100%.

Por último, establece el color de primer plano a: #E1F5FF y el color de Fondo a #FFFFFF, y pinta en una nueva capa solo por encima de la capa "Cielo". Puedes reducir la opacidad de la capa "Estrellas" para hacerlas un poco menos intensas.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Globo de aire caliente

Paso 19 - Creación de las formas básicas

La segunda ilustración adicional de nuestro diseño será un bonito globo aerostático. Crea un nuevo documento llamado "Globo" 400px x 600px y llénalo con una capa de fondo azul #476492. A continuación, con la herramienta Pluma crea varias formas como los pétalos de la margarita para construir la forma del globo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 20 - Cesta del globo

Usando la Herramienta Peen dibuja una forma similar a la primera captura de pantalla de la imagen de abajo, luego usando la Herramienta Rectángulo dibuja dos barras diagonales al lado y una barra transversal. Con la herramienta Pluma dibuja una cesta muy sencilla y con la herramienta Elipse dale un poco de profundidad.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 21 - Colorear el globo

Ahora, cambia el color de fondo de las capas del Globo a #FFE305 #D00000 y #0162A7. A continuación, selecciona la sección central y aplica un Estilo de capa > Superposición de degradado utilizando un degradado Negro, Blanco reflejado. Cambia el Modo de Fusión del Degradado a Superposición y juega con el ángulo para hacer que se vea un poco de bulto. A continuación, aplica un estilo de sombra interior, utilizando los valores que se muestran en la imagen de abajo, lo importante es la opacidad, debe ser alrededor del 50%. Copia el estilo de capa y aplícalo a todas las demás formas, en caso de que la sombra no se vea bien después de aplicarla, haz doble clic en el efecto de superposición de degradado y haz clic y arrastra sobre la sombra para moverla.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 22 - Colorear la cesta.

Cambia el color de las capas relacionadas con la cesta a marrón #874E21 y pega el estilo de capa del paso anterior. Para la elipse interna utiliza un color más oscuro: #291700. ¡Y eso es todo! fusionar todas las capas y utilizar las herramientas Dodge / Burn para añadir algunas sombras y luces.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 23 - Colocar los globos

Copiamos el globo y pegamos dos copias en la segunda sección de nuestro documento, una más grande que la otra. Selecciona el globo más pequeño y con la herramienta Lazo haz una selección del globo real. A continuación, pulsa Comando + U para ajustar los valores de Saturación de Tono y cambiarlos como desees. Además, puedes añadir algo de profundidad de campo desenfocando un poco el segundo globo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Nubes

Paso 24 - Dibujar las nubes

Siguiendo con el diseño del fondo, es hora de añadir algunas nubes a nuestro cielo. Crea un nuevo documento llamado "Nubes" del tamaño que quieras, y rellénalo con el mismo color de fondo que el archivo "globo": #486493. A continuación, utilizando la herramienta Pluma, dibuja algunas nubes blancas como muestra la imagen de abajo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 25 - Estilos de nubes

Aplica a las capas de las nubes un Estilo de capa > Superposición de degradado utilizando estos Colores: #D1D7E7 - #FFFFFF Ángulo: 0 grados, y un color de resplandor interior: #BBD5D6 Modo de fusión: Normal, el tamaño depende del tamaño de tus nubes, yo estoy usando 6px.

Añade algunas nubes en la sección 2 de nuestro documento principal, detrás de los globos, si quieres añadir algo de profundidad al paisaje difumina un poco las nubes lejanas.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 26 - Más nubes

Añade más nubes junto al horizonte en la sección 3 del documento principal, cambia un poco los colores, para el Inner Glow usa #FFFFFF y para el Gradient Overlay #DBE1F1 - #FFFFFF. Deberías obtener algo como la imagen de abajo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 27 - Es hora de tomar un descanso

Solo terminamos el cielo, recuerda no poner elementos importantes junto al borde y mantener todas las capas organizadas. Estamos a mitad de camino, ¡es un buen momento para tomar un café!

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Montañas

Paso 28

Vamos a añadir las montañas, esta vez yo'' trabajo justo en el documento principal, utilizando la herramienta pluma dibujar una forma de montaña como se muestra en la imagen de abajo. Luego aplica un Estilo de capa > Superposición de degradado usando los siguientes colores: #557200 - #88B707 y configura el Ángulo como mejor te convenga, en este caso 99 grados. Luego duplica la montaña, colócala detrás de la primera montaña y hazla un poco más grande y cambia los colores de su Superposición de degradado a: #415800 - #8AB00B para hacerla un poco más oscura.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 29 - Luces y sombras

Crea una nueva capa por encima de la Gran montaña y nombrarla "Sombras" utilizando un pincel grande y suave y este color: #527300 pintar algunas sombras. A continuación, Comando / Ctrl- Haz clic en la capa de la montaña para crear una selección alrededor de ella, a continuación, pulsa Comando / Ctrl + Shift + I para invertir la selección y eliminar la selección de la capa "Sombras". Repite el proceso creando una capa llamada "Luces" utilizando un pincel de color verde claro para añadir algunas luces a las montañas.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Árboles

Paso 30 - Dibujar los árboles

Con la herramienta Pluma, dibuja el tronco del árbol y algunas ramas. Luego, en una nueva capa, dibuja una forma estilizada con las hojas. En la capa del tronco añade un estilo de capa de superposición de degradado utilizando estos colores: #574E00, #957800 el ángulo depende mucho de tu forma. Para las hojas utiliza los siguientes colores para la superposición de degradado: #577E01, #8DDA00. A continuación, añade más hojas en los pequeños arbustos delante de las ramas.

Crea varias formas posibles y si quieres añade una pequeña elipse oscura difuminada en la base de cada árbol. Rasteriza cada árbol y avanza.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 31 - Colocar los árboles en el fondo

Coloca los árboles sobre las montañas y sobre el campo verde en las secciones 3 y 4 de nuestro documento principal, haz que los árboles de la parte inferior de la imagen sean más grandes que los que están junto a las montañas para crear una ilusión de profundidad de campo, además de desenfocar un poco los árboles más pequeños.

Por último, utiliza las herramientas Dodge / Burn en los árboles más grandes para aumentar la intensidad de las sombras.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 32 - Acabado del fondo

En este punto tienes un bonito diseño de fondo ilustrativo. Pon todas las capas relacionadas con el fondo en una carpeta llamada "Fondo".

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Título de la página (Logotipo)

Paso 33 - Título de la página

Agreguemos el título de la página, usando la Herramienta Tipo agrega dos capas de texto, en la primera escribe "Diseño web" y en la segunda: "Tutsplus" (Por supuesto puedes reemplazar estas palabras con las tuyas propias). Luego, en el panel de caracteres, establece el tipo de letra como Futura Book (puedes usar cualquier otro). Para la primera línea, establece el tamaño como 42pt, Kerning: 0pt, marca la opción All Caps y establece el color de primer plano como White #FFFFFF. Para la segunda línea estoy usando también Futura Book, tamaño 18pt y 1250pt de Kerning, pongo el color de primer plano a #FFD001 y marco la opción All Caps también.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 34 - Detalles del título de la página

Usando la Herramienta Línea, dibuja una línea azul (#9AA4D9), añade un efecto de Resplandor exterior blanco y rasteriza la línea (Fúndela con una capa negra por encima o por debajo), Luego aplica una Máscara de capa > Ocultar todo y rellena la máscara con un degradado reflejado Negro/Blanco.

Asegúrate de que el Título está cerca de la segunda guía desde la izquierda, lo que significa 10 píxeles a la derecha del borde izquierdo de 960.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Barra de navegación

Paso 35 - Fondo de navegación

Usando la herramienta Rectángulo dibuja un estrecho rectángulo blanco en el ángulo superior derecho de la sección 1, establece el valor de Relleno al 25%, luego añade un Trazo blanco de 1pixel, Opacidad: 50%. Rasteriza la capa fusionándola con una capa negra por encima o por debajo, añade una Máscara de capa > Ocultar todo... y rellénala con un Gradiente Negro/Blanco reflejado, intenta conseguir algo como el fondo de la imagen de abajo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 36 - Enlaces de navegación

CSS3 nos permite incrustar fuentes en nuestro sitio web, hay algunos directorios de fuentes gratuitas que proporcionan tipos de letra gratuitos listos para usar en nuestro diseño, vamos a tomar la mano de la hermosa tipografía llamada: "Bonveno". Escribe los enlaces de navegación utilizando Bonveno, Tamaño: 12pt, Todas las Mayúsculas y Primer Plano: Blanco. Selecciona el enlace HOME y resáltalo con el amarillo #FFCF00. Añade un texto instructivo: "Saltar a" usando bonveno, tamaño 8px y primer plano gris.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 37 - Detalles de la barra de navegación

Para tener un fondo más bonito, duplica la capa "Nav", y mueve la copia un par de píxeles en la parte inferior izquierda. Finalmente, cambia la Opacidad de cada capa al 50%. Pon todas las capas relacionadas con la navegación en una carpeta llamada "Navegación".

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 38 - Añadir efectos al título

Para dar más énfasis al nombre del sitio, selecciona la palabra grande y aplica una sutil superposición de degradado (#C5C5C5 - #FFFFFF) y una pequeña sombra de caída (distancia y tamaño 2 px), aplica también la pequeña sombra de caída a la segunda línea.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Texto de bienvenida

Paso 39 - Añadir el título

Vamos a añadir el texto de bienvenida, vamos a empezar a añadir el título. Como los títulos deben ser texto plano, utiliza el tipo de letra Bonveno y el primer plano amarillo (#FFCF00). Aplica la Sombra Caída mostrada en el paso anterior. No dudes en utilizar varias guías para marcar tu contenido, en este caso estoy creando guías 10 px por encima y por debajo del título de bienvenida para ayudarme a añadir el texto del párrafo y su fondo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 40 - Fondo de la caja de bienvenida

Usando la Herramienta Rectángulo para dibujar una caja como fondo para el texto de bienvenida, utiliza este color #0E1122 para la caja y baja tu Relleno al 25%. Además de añade un 1px Stroke usando este color #4E6575.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 41 - Estilizar el fondo del texto

Rasteriza la caja (fúndela con una capa en blanco), luego aplica una máscara de capa y rellénala con un degradado blanco-negro. Puedes usar un pincel grande y suave y pintar sobre la máscara de capa para ocultar algunas áreas y hacer que el desvanecimiento se vea más suave. Por último, solo como en el caso de la navegación mala, duplica el fondo de la caja y muévelo unos píxeles hacia abajo a la izquierda para crear un estilo similar al que se muestra en la parte inferior de la imagen de abajo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 42 - Añadir el texto de bienvenida

Usando la Herramienta Tipo, dibuja un cuadro de Texto de Párrafo y rellénalo con texto Lipsum, use "Lucida Sans - Regular" como cara de fuente, Tamaño 11px, Interlineado: 19pt, y Color de primer plano: Blanco. Por último, ya que CSS3 nos permite añadir este tipo de detalles añadimos una sombra negra de 2px al párrafo de texto.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 43 - Enlaces a las redes sociales

Utiliza las mismas instrucciones mostradas en los pasos 40 y 41 para crear un fondo, pero esta vez más pequeño. Abre los iconos de redes sociales de los activos y pega los siguientes iconos: RSS, Twitter y Facebook, siéntete libre de añadir los iconos de tu preferencia. Por último, usando la tipografía "Bonveno" escribe la palabra "Red" como título y usa "Helvetica" (Arial también funciona bien) para añadir algunos números blancos de Suscriptores, Seguidores y Likes.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 44 - Revisión de la página de bienvenida

En este punto tenemos la sección 1 que es la propia página de bienvenida (o homepage) terminada. Es un buen momento para revisar que todo esté en una posición adecuada, intenta mantener el equilibrio con el ritmo de los blancos, por ejemplo, que el espacio entre el borde izquierdo y el texto de bienvenida y el borde derecho con los iconos de la red sean iguales. Trabajar con el espacio blanco (que por supuesto no es literalmente "blanco") es realmente complicado, rechaza el impulso de rellenar cada pequeño espacio con una imagen o un icono, a menudo un fondo amplio y claro es más atrapante que mil elementos brillantes.

Además de asegurarte de que todas tus capas están organizadas, en la parte inferior de la imagen de abajo es una estructura de carpetas que hice. Una de las carpetas más importantes aquí es "Nav", estoy planeando crear una navegación flotante usando JavaScript, pero para propósitos de maqueta tendremos que duplicarla unas cuantas veces para ver cómo se ven las otras "páginas" o secciones.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Sobre nosotros

Paso 45 - Sección sobre nosotros

Para esta sección, básicamente repitd el proceso de los Pasos 39-42, pero coloca las capas en el lado derecho de la segunda sección cambiando el título a "Sobre nosotros". En este punto planeé añadir una función de panel con pestañas, pero cambiar las posiciones de las pestañas a la parte inferior, utilizando el tipo de letra "Bonveno" escribir las pestañas debajo del párrafo sobre nosotros. utiliza este color de primer plano para las pestañas: #C3DFFF y blanco para la pestaña seleccionada. Finalmente, con la herramienta Polígono dibuja un triángulo azul cielo #D5E5F2 para marcar la selección.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 46 - Duplicar la barra de navegación

Solo para ver cómo queda, duplica la carpeta "Nav" de la sección anterior, pero resalta la palabra "About Us" en los enlaces de navegación. Asegúrate de que todo el contenido está entre los márgenes de la sección y organiza las capas en carpetas.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Portafolio 

Paso 47 - Sección de portafolio

Repite las instrucciones de los pasos anteriores para crear una caja de contenido, pero en lugar de usar el amarillo para el título usa el azul #336A91 y utiliza el siguiente color para el fondo de la caja: #7FA5D2 y un estilo de capa de trazo blanco.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 48 - Marcadores de posición de los elementos de la cartera

Para esta sección diseñaremos una galería de portafolios muy sencilla, utilizando la Herramienta Rectángulo dibuja unos cuadrados de color azul claro a la izquierda de la caja de contenido recién creada. y un gran rectángulo en el sitio de la izquierda. Añade a cada cuadro un Estilo de capa > Trazo, 1px y Blanco. Usando la Herramienta Rectángulo dibuja pequeños cuadrados en la parte inferior derecha del cuadrado grande que serán como miniaturas para controlar algún tipo de efecto de transición, luego agrega algún texto ficticio sobre cada cuadrado para representar el contenido que debe ser colocado allí. De hecho, puedes utilizar imágenes de muestra si lo deseas.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 49 - Cartera social

Siguiendo el mismo proceso que en el paso 43, añade un par de enlaces para la cartera de medios sociales, como Flickr o LinkedIn. Utiliza el tipo de letra "Bonveno" para el título y este color:#034D8A.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 50 - Revisar todo lo que está en marcha

Duplica la carpeta "Nav" una vez más y resalta la palabra "Portfolio". Asegúrate de que todo está dentro de los límites de la sección tres y organiza tus capas.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Contáctanos

Paso 51 - Fondo y etiquetas de contacto

Ya casi hemos terminado, ahora vamos a añadir un contenedor para el formulario de contacto. En este caso el rectángulo debe ser verde #67A802 y el trazo verde más claro #B8D942. El título de la sección debe ser "Contáctanos" y estoy usando un primer plano blanco para aumentar el contraste con el fondo. Difumina un poco la caja y duplícala para crear un efecto de doble línea a partir de las cajas de contenido anteriores.

Por último, utilizando un primer plano blanco y un tamaño más pequeño de la tipografía "Bonveno", escribe las etiquetas del formulario de contacto. Aplicar la sombra que estamos utilizando para los títulos a estas etiquetas también.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 52 - Dibujar los cuadros de entrada

Usando la Herramienta Rectángulo Redondeado (radio de 5px), dibuja las siguientes formas que se convertirán en las áreas de entrada reales de nuestro formulario de contacto. Luego aplica los estilos de capa Sombra interior, Superposición de color (#4B6800) y Trazo (#A8D02F) que se muestran a continuación.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 53 - Añadir el texto de entrada

Usando el tipo de letra "Bonveno" escribe algunas palabras ficticias dentro de las cajas de entrada, estoy usando este color como primer plano: #AFD437. Debajo de las casillas de entrada puedes añadir también alguna línea de contacto telefónico (siéntete libre de modificar la información como quieras).

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 54 - Botón de contacto

Por último, vamos a añadir el botón de contacto, utilizando el rectángulo redondeado (5px de radio) dibuja un botón. aplica una Sombra Caída, una Superposición de Gradiente (#B17F02 - #FFD101) y un Estilo de Trazo (#FFDB04).

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 55 - Texto del botón de contacto

Para el texto del botón estoy utilizando el tipo de letra "Futura Black", pero puedes utilizar cualquier otro tipo de letra. A continuación, aplica una sombra interior, una superposición de color (#564100) y un trazo (#F0C401) a la capa de texto. Deberías tener algo muy parecido a la parte inferior de la imagen de abajo.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Paso 56 - Revisar la sección de contacto

Después de duplicar una nueva instancia del menú de navegación, resaltando esta vez la palabra "Contacto". Por último, asegúrate de que todo el contenido de la página de contacto está dentro de los límites de la cuarta sección del diseño y organiza tus capas.

Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial

Conclusión

¡Y ya está! Espero que te haya gustado este tutorial, ¡ahora es tu turno de intentar tu propio diseño web ilustrativo de una sola página!

.Illustrative One Page Design TutorialIllustrative One Page Design TutorialIllustrative One Page Design Tutorial
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.