Share
¡Hola a todos! Este es mi primer tutorial en este increíble nuevo 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á cómo crear un diseño para un diseño web de una sola página, crear fondos ilustrativos con un estilo particular, diseñar una barra de navegación flotante, trabajar con texto teniendo en cuenta CSS3 y más ... listo para comenzar?
Últimamente, han aparecido algunos grandes sitios de "desplazamiento vertical" alrededor de la red. Antes de sumergirse, echemos un vistazo a algunos de ellos para ver cómo se verá el efecto final. Esto ayudará a poner el resto del tutorial en contexto:
Este tutorial requiere algunos conocimientos básicos de las herramientas de Photoshop, omitiré algunas explicaciones básicas, como cómo crear una máscara de capa, cómo agregar una guía o cómo agregar una capa de texto..
Mi diseño se basa en varios ejemplos alrededor de la web de un estilo muy moderno, un paisaje de vector panorámico vertical como fondo y áreas de texto limpio que muestran la información importante. Imagine este sitio como un diseño de una sola página como un sitio web de portafolio de un diseñador creativo o ilustrador..
No vamos a entrar en la parte de codificación de este proyecto porque nos enfocaremos en las diversas técnicas de diseño e ilustración, pero se basa en el popular complemento jQuery.ScrollTo, que puede consultar para obtener sugerencias sobre cómo codificar este tipo de código. diseño.
Vamos a empezar, los recursos para este tutorial son:
Primero, debemos configurar el documento de trabajo. Estoy basando este diseño en las 12 columnas del Sistema de cuadrícula 960 que puede descargar de forma gratuita; de lo contrario, simplemente cree un documento de 960 píxeles y dibuje algunas Guías en los bordes izquierdo y derecho..
Como 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 también debemos establecer un tamaño estándar para la altura, esta altura debe ser el área visible mínima (arriba del pliegue) Ya que estamos diseñando un diseño de página única. Vaya a Imagen> Tamaño de lienzo y establezca el ancho en 1420 px y la altura en 750 px.
Luego, use un gráfico temporal para dividir el documento en secciones, usando la herramienta Rectángulo dibuje un rectángulo de arriba a abajo (750px de altura). Luego aumente mucho el tamaño del lienzo (puede usar la herramienta Recortar aquí).
Dibuje una guía en la parte inferior del rectángulo y duplíquela, luego haga coincidir el lado superior de la copia con el lado inferior del primer rectángulo y agregue una guía en la parte inferior del segundo rectángulo, repita este proceso tantas veces como secciones tenga en el diseño , en este caso necesitamos 4: Inicio, Quiénes somos, Portafolio y Contáctenos. Luego, utilizando la herramienta Recortar, elimine el lienzo adicional. Debes tener un lienzo de alrededor de 3000px de altura con 4 secciones, cada una de 750px. Eliminar los rectángulos de guía y avanzar..
Usando la herramienta Rectángulo, dibuje un rectángulo desde la parte superior a la parte inferior de la tercera sección. luego agregue un estilo de capa de superposición de degradado utilizando los siguientes colores: #FFFFFF # 6E98C8 # 2A3256 y # 0C0E1A, establezca el ángulo a 90 ° (es muy importante ya que este fondo del degradado se cortará para repetirse en el eje x) y presione Aceptar.
Dibuje un Rectángulo en la cuarta sección del documento, luego agregue un Estilo de capa> Superposición de degradado usando estos colores: # 486302 # 64A500 y # BEDC40. Al igual que en el paso anterior, ajuste el ángulo a 90 °..
Ahora comenzaremos a diseñar los elementos gráficos adicionales del fondo. El primer elemento que debemos dibujar es un cohete espacial, que se colocará en la sección uno del diseño. Para esto, cree un nuevo documento (ancho de 400 px y alto de 600 px) y guárdelo con un nombre descriptivo como "cohete", agregue un fondo azul oscuro # 181C35.
A continuación, presione la herramienta Pluma, dibuje una forma rellena de blanco similar a la imagen de abajo, duplíquela y vaya a Edición> Transformar> Voltee horizontal y coloque la copia exactamente al lado del original, seleccione ambas capas y combínelas presionando Comando / Control + E. Este será el Cuerpo del Cohete..
Ahora agregue un Estilo de capa> Superposición de degradado a la capa "Cuerpo del cohete" usando los siguientes colores: # 0B85DB, # 014C83, # 2396EF, # 004B82 y # 1477B8, establezca el Ángulo en 0 ° y presione OK. Finalmente, rasterice el gradiente fusionando la capa "Cuerpo del cohete" con una nueva capa en blanco.
Cree tres elipses amarillas con la herramienta Elipse y colóquelas como muestra la imagen a continuación. Rasterize (Haga clic derecho en la miniatura de la capa y seleccione Rasterize). Luego, mantenga presionada la tecla Comando / Ctrl y haga clic sobre una miniatura Ellipse en el Panel de Capas para seleccionar automáticamente la forma de la capa y, con los Cursores, mueva la selección de algunos píxeles de arriba, luego presione la tecla Eliminar, este proceso creará una bonita franja curva. Repite las acciones con las otras elipses..
Duplica cada raya y colócala unos píxeles sobre el original. Luego, seleccione todas las rayas y combínelas en una capa llamada "Rayas". Luego, presione / Ctrl en el "Cuerpo del cohete" para seleccionar la forma del cohete, luego vaya a Seleccionar> Modificar> Expandir y establezca 2 píxeles, luego invierta la selección presionando Comando / Ctrl + Mayús + I. Luego, en el Panel de capas, haga clic en La capa "Rayas" y eliminar la selección..
Seleccione la capa "Rayas" y agregue 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).
Seleccione la capa "Cuerpo del cohete", luego, utilizando la Herramienta de recuadro elíptico, seleccione la punta del cohete como se muestra en la imagen de abajo, copie la selección y péguela sobre la capa del cohete y debajo de las franjas, nombre la nueva capa "Punta". Copie el estilo de la capa de rayas y pegue el estilo en la "punta".
Usando la herramienta Elipse, dibuje una elipse en el lado izquierdo del cohete, nombre "Ventana", luego agregue un Estilo de capa> Superposición de degradado usando los siguientes colores: # 777777, # E8E8E8, #ADADAD, #FEFEFE, # C8C8C8 y Angle: 0 °.
Luego duplique la capa "Ventana" y hágala un poco más pequeña, coloque la copia sobre el original. Como la elipse es una máscara vectorial, cambie el color de fondo a: # 00CCFF y haga doble clic en el Estilo de capa de superposición de degradado, en el cuadro de diálogo, cambie el Modo de fusión a Pantalla. Finalmente, agregue una sombra interior sutil a la capa "Copia de ventana" y si desea una sombra paralela a la capa "Ventana".
Agreguemos la base del cohete, primero coloque todas las capas relacionadas con el cohete (cuerpo, punta, rayas y ventana) y fusionelas. Usando la herramienta Pluma, dibuje tres formas siguiendo el ejemplo de la imagen de abajo, aunque de ellas por encima de la nueva capa "Cuerpo" y una de abajo. Utilice este color de relleno para las formas: # FBCC28.
Agrega tres nuevas formas que representan el volumen a la base del cohete. Siga la imagen de abajo y use este color de relleno: # AB8204.
Aplique un estilo de capa de superposición de degradado a los pedestales, use los siguientes colores: # FACB2, # FFF393, # FFD952 y # D4A500, establezca el ángulo a 90 °, intente obtener algo como la imagen de abajo.
Combinar todas las capas (siempre dejé una copia de las capas vectoriales en una copia por si acaso). Cree una elipse sobre el cohete con este color: # DFF8FF, luego vaya a Filtro> Desenfocar> Desenfoque gaussiano y configure el Radio a 23 o 24 píxeles, nombre la capa "Light". Comando / Ctrl: haga clic sobre la capa Cuerpo del cohete para seleccionar su forma, Comando / Ctrl + Mayús + I para invertir la selección y eliminar la selección de la capa "Light". Finalmente cambia su modo de fusión a luz suave.
Combina todas las capas de Rocket y copialas. Pegue el Cohete en el lado derecho de la sección 1 de nuestro documento principal.
Puede hacer este paso en el documento del cohete o en el principal. Cree dos puntos suspensivos utilizando la herramienta Elipse, una más pequeña que la otra, ya que muestra la imagen a continuación, use los siguientes colores: # FF8A02, # FFC801. Combina ambas capas en una nueva capa llamada "Fuego". Luego colóquelo justo detrás de la capa "Cohete". A continuación, aplique un desenfoque gaussiano de 9 píxeles y utilice los controles de transformación libre para distorsionar un poco el fuego y hacerlo más estrecho..
Abra los pinceles de estrellas de los ajustes preestablecidos, luego abra el panel de ajustes preestablecidos de pincel (F5).
En Forma de la punta del pincel, seleccione la estrella de 50 px y cambie su tamaño a 25 px. Active la casilla de verificación Espaciado y establezca el valor en 300%.
Conjunto de dispersión Dispersión al 1000% Control: Presión del lápiz (en caso de que tenga una tableta gráfica) Cantidad: 1 y Conteo de jitter: 100%.
En Color Dynamics, establezca la fluctuación de primer plano / fondo en 100%.
Finalmente, establezca el color de primer plano en: # E1F5FF y el color de fondo en #FFFFFF, y pinte en una nueva capa justo encima de la capa "Cielo". Puedes reducir la opacidad de la capa "Estrellas" para hacerlas un poco menos intensas..
La segunda ilustración adicional de nuestro diseño me dará un bonito globo aerostático. Cree un nuevo documento llamado "Globo" 400 px x 600 px y rellénelo con una capa de fondo azul # 476492. Luego, utilizando la herramienta Pluma, crea varias formas como pétalos de margarita para construir la forma de globo.
Usando la herramienta Peen, dibuje una forma similar a la primera captura de pantalla de la imagen a continuación, luego use la herramienta Rectángulo dibujando dos barras diagonales junto a ella y una barra transversal. Con la herramienta Pluma dibuja una canasta muy simple y con la herramienta Elipse dale un poco de profundidad.
Ahora, cambie el color de fondo de las capas de globo a # FFE305 # D00000 y # 0162A7. Luego seleccione la sección central y aplique un Estilo de capa> Superposición de degradado utilizando un degradado Reflejado Negro - Blanco. Cambie el Modo de fusión de degradado a Superposición y juegue con el ángulo para que se vea un poco más fuerte. Luego aplique un Estilo de Sombra Interior, utilizando los valores que se muestran en la imagen de abajo, lo importante es la opacidad, debe estar alrededor del 50%. Copie el estilo de capa y aplíquelo a todas las otras formas, en caso de que el tono no se vea bien después de aplicarlo, haga doble clic en el efecto Superposición de degradado y haga clic y arrastre sobre el tono para moverlo.
Cambie el color de las capas relacionadas con la canasta a marrón: # 874E21 y pegue el estilo de capa del paso anterior. Para la elipse interna use un color más oscuro: # 291700. ¡Y eso es! fusiona todas las capas y usa Dodge / Burn Tools para agregar algunas sombras y luces.
Copie el globo y pegue dos copias en la segunda sección de nuestro documento, una más grande que la otra. Seleccione el globo más pequeño y, utilizando la herramienta Lazo, haga una selección del globo real. Luego presione Comando + U para ajustar los valores de Saturación de Tono y cambiarlos como desee. Además, puedes agregar algo de profundidad de campo difuminando un poco el segundo globo.
Avanzando con el diseño de fondo, es hora de agregar algunas nubes a nuestro cielo. Cree un nuevo documento llamado "Nubes" del tamaño que desee y rellénelo con el mismo color de fondo que el archivo "globo": # 486493. Luego, utilizando la herramienta Pluma, dibuje algunas nubes blancas como muestra la imagen de abajo.
Aplique a las capas de nubes un Estilo de capa> Superposición de degradado usando estos colores: # D1D7E7 - #FFFFFF Ángulo: 0 grados, y un color de brillo interno: # BBD5D6 Modo de fusión: Normal, el tamaño depende del tamaño de sus nubes. m usando 6px.
Agregue algunas nubes en la sección 2 de nuestro documento principal, detrás de los globos, si desea agregar algo de profundidad al paisaje, difumine un poco las nubes distantes.
Agregue más nubes al lado del horizonte en la sección 3 del documento principal, cambie los colores un poco, para el Resplandor interno use #FFFFFF y para la Superposición de degradado: # DBE1F1 - #FFFFFF. Deberías obtener algo como la imagen de abajo..
Acabamos de terminar el cielo, recuerde que no coloque elementos importantes junto al borde y mantenga todas las capas organizadas. Estamos a mitad de camino, es un buen momento para tomar un café.!
Agreguemos las montañas, esta vez trabajo directamente en el documento principal, usando la herramienta Pluma para dibujar una forma de montaña como se muestra en la imagen a continuación. Luego aplique un Estilo de capa> Superposición de degradado usando los siguientes colores: # 557200 - # 88B707 y establezca el ángulo que mejor se adapte a usted, en este caso 99 grados. Luego duplique la montaña, colóquela detrás de la primera montaña y hágala un poco más grande y cambie los colores de su Superposición de degradado a: # 415800 - # 8AB00B para hacerlo un poco más oscuro.
Crea una nueva capa sobre la gran montaña y nómbrela "Sombras" con un pincel grande y suave de este color: # 527300 pinta algunas sombras. Luego, Comando / Ctrl: haga clic en la capa de montaña para crear una selección a su alrededor, luego presione Comando / Ctrl + Mayús + I para invertir la selección y eliminar la selección de la capa "Sombras". Repita el proceso creando una capa llamada "Luces" usando un pincel de color verde claro para agregar algunas luces a las montañas.
Usando la herramienta Pluma, dibuje el tronco del árbol y algunas ramas. Luego en una nueva capa dibuja una forma estilizada con las hojas. En la capa troncal, agregue un Estilo de capa de superposición de degradado utilizando estos colores: # 574E00, # 957800 el ángulo depende mucho de su forma. Para las hojas, use los siguientes colores para la Superposición de degradado: # 577E01, # 8DDA00. Luego agregue más hojas en arbustos pequeños frente a las ramas.
Crea varias formas diferentes y, si quieres, agrega una pequeña elipse oscura en la base de cada árbol. Rasteriza cada árbol y avanza.
Coloque los árboles sobre las montañas y sobre el campo verde en las secciones 3 y 4 de nuestro documento principal, haga que los árboles en la parte inferior de la imagen sean más grandes que los que están cerca de las montañas para crear una ilusión de profundidad de campo, además de difuminar el campo. árboles más pequeños un poco.
Finalmente, use las herramientas de esquivar / quemar en los árboles más grandes para aumentar la intensidad de las sombras.
En este punto tienes un bonito diseño de fondo ilustrativo. Coloque todas las capas relacionadas con el fondo en una carpeta llamada "Fondo".
Agreguemos el título de la página, usando la Herramienta de Tipo agregue dos capas de texto, en el primer tipo "Diseño web" y en el segundo: "Tutsplus" (Por supuesto, puede reemplazar estas palabras por las suyas propias). Luego, en el Panel de caracteres, configure el Tipo de letra en Futura Book (puede usar cualquier otro). Para la primera línea, establezca el tamaño en 42pt, Kerning: 0pt, marque la opción Todas las tapas y establezca el color de primer plano en Blanco #FFFFFF. Para la segunda línea también estoy usando Futura Book, tamaño 18 pts y 1250 pts de Kerning, establezca el color de primer plano en # FFD001 y marque la opción Todos los casquillos también.
Con la herramienta Línea, dibuje una línea azul (# 9AA4D9), agregue un efecto de Resplandor exterior blanco y rasterice la línea (Combínela con una capa negra arriba o abajo), luego aplique una máscara de capa> Ocultar todo y rellene la máscara con un gradiente reflejado negro / blanco.
Asegúrese 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 960.
Con la herramienta Rectángulo, dibuje un rectángulo blanco estrecho en el ángulo superior derecho de la sección 1, establezca el valor de Relleno en 25%, luego agregue un trazo blanco de 1 píxel, opacidad: 50%. Rasterice la capa fusionándola con una capa negra arriba o abajo, agregue una Máscara de capa> Ocultar todo ... y rellénela con un degradado negro / blanco reflejado, intente obtener algo como la parte inferior de la imagen de abajo.
CSS3 nos permite incrustar fuentes en nuestro sitio web, hay algunos directorios de fuentes gratuitos que proporcionan tipos de letra gratuitos listos para usar en nuestro diseño, tomaremos la mano del hermoso tipo de letra llamado "Bonveno". Escriba los enlaces de navegación usando Bonveno, Tamaño: 12 puntos, Todas las tapas y Primer plano: Blanco. Seleccione el enlace INICIO y resáltelo con # FFCF00 amarillo. Agregue un texto instructivo: "Saltar a" con bonveno, tamaño 8px y fondo gris..
Para tener un fondo más bonito, duplique la capa "Nav" y mueva la copia un par de píxeles en la parte inferior izquierda. Finalmente, cambia la opacidad de cada capa al 50%. Coloque todas las capas relacionadas con la navegación en una carpeta llamada "Navegación".
Para dar más énfasis al nombre del sitio, seleccione la palabra grande y aplique una Superposición gradual degradada (# C5C5C5 - #FFFFFF) y una Sombra pequeña (Distancia y tamaño 2 px), Aplique la Sombra pequeña a la segunda línea también.
Añadamos el texto de bienvenida, empezaremos a añadir el título. Dado que los títulos deben ser de texto simple, use el tipo de letra Bonveno y el primer plano amarillo (# FFCF00). Aplique la sombra paralela que se muestra en el paso anterior. No dude en utilizar varias guías para marcar su contenido, en este caso, estoy creando guías 10 px arriba y debajo del título de bienvenida para ayudarme a agregar el texto del párrafo y su fondo..
Usando la herramienta Rectángulo para dibujar un cuadro como fondo para el texto de bienvenida, use este color # 0E1122 para el cuadro y baje el relleno hasta el 25%. Además agrega un Trazo de 1px usando este color # 4E6575.
Rasterice el cuadro (fusione con una capa en blanco), luego aplique una máscara de capa y rellénela con un degradado de blanco y negro. Puede usar un pincel grande y suave y pintar sobre la máscara de capa para ocultar algunas áreas para que el fundido se vea más suave. Finalmente, al igual que con la navegación defectuosa, duplique el fondo del cuadro y muévalo unos pocos píxeles en la parte inferior izquierda para crear un estilo similar al que se muestra en la parte inferior de la imagen a continuación..
Con la herramienta de tipo, dibuje un cuadro de texto de párrafo y rellénelo con texto de Lipsum, use "Lucida Sans - Regular" como fuente, tamaño 11px, inicial: 19pt y color de primer plano: blanco. Finalmente, dado que CSS3 nos permite agregar este tipo de detalles, agregue 2px Black Drop Shadow al párrafo del texto..
Use las mismas instrucciones que se muestran en los Pasos 40 y 41 para crear un fondo, pero más pequeño esta vez. Abra los iconos de redes sociales de los recursos y pegue los siguientes iconos: RSS, Twitter y Facebook, siéntase libre de agregar los iconos de su preferencia. Finalmente, usando el tipo de letra "Bonveno", escriba la palabra "Red" como título y use "Helvetica" (Arial también funciona bien) para agregar algunos números blancos de suscriptores, seguidores y "me gusta"..
En este punto, tenemos la sección 1 que es la página de bienvenida real (o página de inicio) finalizada. Es un buen momento para revisar que todo esté en una posición adecuada, trate de mantener el equilibrio con el ritmo de los blancos, por ejemplo. el espacio entre el borde izquierdo y el texto de bienvenida y el borde derecho con los íconos de red son los mismos. Trabajar con espacios en blanco (que por supuesto no es literalmente "blanco") es realmente complicado, rechace el impulso de llenar cada pequeño espacio con una imagen o un ícono, a menudo un fondo amplio y claro es más atractivo que miles de elementos brillantes.
Además de asegurarte de que todas tus capas estén organizadas, en la parte inferior de la imagen de abajo hay 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 fines de simulación tendremos que duplicarla varias veces para ver cómo se ven las otras "páginas" o secciones..
Para esta sección, básicamente repita el proceso de los Pasos 39-42, pero coloque las capas en el lado derecho de la segunda sección, cambiando el título a "Quiénes somos". En este punto, planeé agregar una función del panel de pestañas, pero cambiar las posiciones de las pestañas a la parte inferior, usando el tipo de letra "Bonveno" escriba las pestañas debajo del párrafo sobre nosotros. use este color de primer plano para las pestañas: # C3DFFF y Blanco para la pestaña seleccionada. Finalmente, utilizando la herramienta Polígono, dibuje un triángulo azul cielo # D5E5F2 para marcar la selección.
Solo para ver cómo se ve, duplique la carpeta "Nav" de la sección anterior, pero resalte la palabra "Quiénes somos" en los enlaces de navegación. Asegúrese de que todo el contenido se encuentre entre los márgenes de la sección y organice las capas en carpetas.
Repita las instrucciones de los pasos anteriores para crear un cuadro de contenido, pero en lugar de usar amarillo para el título, use azul: # 336A91 y use el siguiente color para el fondo del cuadro: # 7FA5D2 y un estilo de capa de trazo blanco.
Para esta sección diseñaremos una galería de portafolio muy simple, usando la herramienta Rectángulo dibujando algunos cuadrados de color azul claro a la izquierda del cuadro de contenido creado recientemente. y un gran rectángulo en el sitio izquierdo. Agregue a cada casilla un Estilo de capa> Trazo, 1px y Blanco. Con la herramienta Rectángulo, dibuje pequeños cuadrados en la parte inferior derecha del cuadrado grande, que será como miniaturas para controlar algún tipo de efecto de transición, luego agregue un texto ficticio sobre cada cuadrado para representar qué contenido debe colocarse allí. Puedes usar imágenes de muestra si quieres.
Siguiendo el mismo proceso que el Paso 43, agregue un par de enlaces para el portafolio de redes sociales, como Flickr o LinkedIn. Use el tipo de letra "Bonveno" para el título y este color: # 034D8A.
Duplique la carpeta "Nav" una vez más y resalte la palabra "Cartera". Asegúrese de que todo esté dentro de los límites de la sección tres y organice sus capas.
Ya casi terminamos, ahora vamos a agregar un contenedor para el formulario de contacto. En este caso, el rectángulo debe ser verde # 67A802 y el Trazo más verde claro # B8D942. El título de la sección debe ser "Contáctanos" y estoy usando un fondo blanco para aumentar el contraste con el fondo. Fade the box un poco y duplique para crear un efecto de doble línea a partir de los cuadros de contenido anteriores.
Finalmente, utilizando el fondo blanco y un tamaño más pequeño del tipo de letra "Bonveno", escriba las etiquetas del formulario de contacto. Aplique la sombra paralela que estamos usando para los títulos de estas etiquetas también..
Usando la herramienta Rectángulo redondeado (radio de 5px), dibuje las siguientes formas que se convertirán en las áreas de entrada reales de nuestro formulario de contacto. A continuación, aplique los estilos de capa Sombra interior, Superposición de color (# 4B6800) y Trazo (# A8D02F) que se muestran a continuación.
Usando el tipo de letra "Bonveno", escriba algunas palabras ficticias dentro de los cuadros de entrada, estoy usando este color como primer plano: # AFD437. Debajo de los cuadros de entrada también puede agregar una línea de contacto telefónico (no dude en modificar la información que desee).
Finalmente
Accentsconagua