Share
Los días pasados estaba buscando inspiración en pinturas antiguas famosas, y me interesé en "La noche estrellada" de Van Gogh y pensé: ¿Puedo aplicar esto al diseño web? ¡Y la respuesta es sí! Luego, después de varias horas de trabajo, aquí está mi tutorial para usted, un diseño web artístico que representa un concepto de "Noche mágica".
¡Que comience el diseño! En primer lugar, este no es un tutorial básico, así que me saltaré algunas explicaciones básicas. De todos modos, cualquier persona con un nivel intermedio avanzado de habilidades de Photoshop podrá hacerlo. Segundo, es realmente difícil obtener exactamente el mismo resultado que tengo, y debes usar tu imaginación y buen gusto para obtener algo similar o mejor que mi diseño. Y tercero, esto fue diseñado considerando la aplicación en una plantilla de Wordpress, pero puedes convertirlo rápidamente en el tema de otro motor, o incluso en un sitio web personalizado.
¡Avanzando entonces! Crea un nuevo documento de 960 píxeles por 1000 píxeles y RGB. Dibuje algunas guías para marcar los límites y vaya a Imagen> Tamaño del lienzo para cambiar el tamaño del documento y aumentar el ancho del lienzo (1460 x 1000 px). De esta manera, tendrá el diseño centrado en un gran documento y verá cómo se ve en las resoluciones de pantalla panorámica. Además, dibuja una guía para marcar la altura del encabezado..
Dibuje una guía horizontal en el centro del documento y utilícela para rellenar la capa "Fondo" con un degradado radial azul oscuro (# 0D2B53 - # 010D1F). También estoy agregando algunas guías como límites del relleno de la página principal a la izquierda y la derecha.
Es muy posible que cambiemos la altura del documento más adelante, así que agregue una Nueva capa de relleno (# 010D1F) debajo de nuestra capa "Fondo".
Ya que uno de los lectores de Psdtuts + sugirió usar imágenes reales en lugar del filtro clásico de Clouds, lo intentaremos esta vez. Pegue esta imagen de algunas nubes de tormenta en una nueva capa llamada "Nubes" y cambie su Modo de fusión a Superposición. Luego vaya a Capa> Máscara de capa> Ocultar todo, y dibuje un degradado radial de blanco a negro (#FFFFFF - # 000000), que va desde la parte superior media hasta la parte inferior media. Luego, ajuste un poco los Niveles de "Nubes" para oscurecer las nubes..
Ahora pegue este bonito horizonte de una costa española en una nueva capa llamada "horizonte". Luego cree una nueva Capa de ajuste> Mezclador de canales ... y seleccione Blanco y negro con filtro azul (RGB). Luego, para aplicar ese efecto solo a la capa "horizonte" en la paleta de capas, mantenga presionada la tecla Opción y haga clic entre la capa Mezclador de canales y la capa "horizonte". Finalmente, cambie el modo de fusión de la capa "horizonte" a superposición.
Aplicar una máscara de capa> Revelar todo en la capa "horizonte". Luego, con un pincel suave grande y negro (# 000000), oculte los bordes de la imagen, luego seleccione un pincel Grunge (estoy usando este juego de pinceles Grunge de Kelzky13, especialmente los pinceles 250 y 181) y haga los bordes un poco más irregular.
Luego escribe el título "Magic" usando la fuente Scriptina. Luego aplique los estilos de capa que se muestran a continuación: un Resplandor externo (# 9EB6D0) y una Superposición de degradado (# 70ABF6, #FFFFFF, # B4CBE7, a #FFFFFF). Además, ahora es un buen momento para organizar nuestro diseño en desarrollo en carpetas. Coloque todas las capas en una nueva carpeta llamada "Fondo" y el texto dentro de otra carpeta llamada "Logotipo".
Ahora agregaremos algunas estrellas a nuestro diseño, puedes usar cualquier conjunto de pinceles de estrellas, pero yo estoy usando este conjunto: pinceles de campo de estrellas de BL1nX. Luego, utilizando el pincel 550 del conjunto, pinte las estrellas en blanco (#FFFFFF) en una nueva capa dentro de una carpeta llamada "Estrellas". Note que estoy poniendo la estrella más brillante sobre el punto de la yo. Luego aplique una superposición de degradado con tres colores (# 3A8FEF, #FFFFFF y # 66C9FC) a la capa "Estrellas1".
A continuación, con el pincel 615 del conjunto de campos de estrellas, agregue más estrellas al cielo en una nueva capa llamada "Estrellas2" y luego, con un borrador suave, elimine las estrellas de los edificios. A continuación, agregue un Resplandor externo (# 8AB2FF) a "Stars2".
Agregue más estrellas a la capa "Estrellas 2" en todo el diseño y luego, utilizando la herramienta Borrador, elimine algunas áreas de las estrellas. Finalmente, aplique un efecto de Superposición de degradado a la capa "Estrellas2", utilizando cuatro colores: # 6AB1D1, #FFFFFF, # 94CFED y #FFFFFF.
Ahora descargue estos Star Brushes de jen-ni y mantenga los brushes a mano porque los usaremos varias veces en este tutorial. Seleccione un pincel de 65 px (estoy usando el número 148) y dibuje una estrella blanca (#FFFFFF) en una nueva capa justo encima del punto de la yo. Luego aplique un Resplandor exterior (# 00BCF9) a la estrella para hacerlo más brillante.
Duplique el texto "Mágico", seleccione el texto y escriba la palabra "Noche" en su lugar. A continuación, configure el Resplandor exterior en blanco (#FFFFFF) y la superposición de degradado en tres colores (# F9DA5B, # FEAE00 y # FFD403), vea la imagen a continuación para verificar los valores del filtro.
¡Vamos a añadir algunas nubes a nuestra noche! Descarga los pinceles Clouds II de redheadstock. A continuación, seleccione el número de pincel 2464 y establezca su tamaño en 960px (que coincida con el ancho principal del diseño). Establezca el color de primer plano en # 234B7F y pegue una sola nube en una nueva capa llamada "cloud1". Para mantener las capas organizadas, estoy colocando las nubes en una carpeta separada dentro de la carpeta "Fondo". Ahora estira un poco la altura "cloud1".
Siguiendo, esquiva y quema un poco la nube. Observe que estoy aclarando las áreas al lado de la estrella del logotipo y oscureciendo el fondo de la nube. Además, cambia la opacidad "cloud1" a 50%.
Agregue una nube más en una nueva capa llamada "cloud2". Puede usar cualquier nube que desee, pero use este color como primer plano: # 5F83A5. Esquiva un poco la parte inferior de la nube para mejorar la sensación de iluminación..
Repita el paso anterior, pero esta vez use otro pincel con este color: # 36638C y colóquelo sobre el "cloud1". Cambia el tamaño, luego esquiva y / o quema la nube si es necesario.
Seleccione un borrador suave grande y elimine la parte inferior de la capa "cloud1" para crear un efecto de desaparición gradual.
Esto es realmente un paso crítico, agregaremos el fondo del contenedor principal, nunca debe olvidar que está diseñando para la web. Usando la herramienta Rectángulo, dibuje un rectángulo vectorial (# 0A1D37) en una nueva capa, todo debajo de la carpeta "Nubes". Tenga en cuenta que mi rectángulo está dentro de las guías de relleno. Luego, seleccione la capa de rectángulo y vaya a Capa> Máscara de capa> Revelar todo ... y dibuje un degradado de blanco a negro, que agrega un bonito efecto en la parte superior del rectángulo. Finalmente, coloque una Guía debajo del desvanecimiento del Rectángulo, que nos ayudará a convertir este diseño en HTML + CSS. Observe que, desde la guía hasta la parte inferior del color de fondo, debe ser sencillo..
Ahora agregue otro rectángulo, pero esta vez como el fondo de la barra lateral, vuelva a ayudarse con una Guía y use el color # 091525. Luego, aplique al nuevo rectángulo una Máscara de capa un poco como en el paso anterior.
En este punto, tenemos el fondo del encabezado básico hecho. Ahora es el momento de agregar algunos detalles. Pondré un icono RSS único en el encabezado. Copia esta imagen de la luna llena y pégala en una nueva capa llamada "moon-rss". Luego, ajuste los valores de Tono / Saturación para hacer que la luna se vuelva un poco más amarilla, y agregue los filtros de Resplandor interno y externo (vea los valores que se muestran a continuación).
Agregue una forma de nube pequeña con el color # 7997B3 en una nueva capa sobre la luna en la paleta de capas. Luego, utilizando un gran borrador suave, elimine algunas áreas de la nueva nube.
Agregue la forma RSS clásica (# DCA30B) en una nueva capa delante de la capa "luna" pero detrás de la capa "nube". Luego, aplique a ella los filtros que se muestran a continuación (una Superposición de degradado, un Resplandor exterior y una Sombra paralela). Finalmente, agregue una estrella en algún lugar sobre la forma RSS (vea el Paso 10).
Pegue esta imagen en una nueva capa, la usaremos como fondo de la barra de navegación de nuestras páginas principales. Dado que la imagen original está un poco estirada, debemos ampliarla, jugué con ambas selecciones y con la herramienta Mover (Transformación libre) para aumentar el ancho del desplazamiento. A continuación, deforme el rollo solo un poco con la deformación de la bandera..
Esquiva algunas áreas del rollo para aumentar las sombras y mejorar la ilusión de deformación.
Para mejorar la textura del pergamino, aplique un filtro de Superposición de degradado (# 045F96 y # FBF4BD) y también una Superposición de patrón.
Ahora agregue un Drop Shadow al scroll. Puede usar el filtro Sombra paralela o hacer lo que hice, duplicar la capa de desplazamiento y, en Tono / Saturación, ajustar el Iluminado a -100, Desenfocar un poco la copia negra y distorsionarla con la herramienta Transformación libre para hacerla irregular..
A continuación, agregue una nube sobre el pergamino, esquive, queme y elimine tal como en el Paso 15. Luego agregue el texto del enlace de las Páginas usando Georgia - Fuente cursiva. Use el color # 0B1827 para los enlaces estándar y el color # 211808 para el enlace flotante. Además, agregue algunos detalles adicionales como estrellas en el fondo y una línea como efecto de desplazamiento. Puedes ver la estructura de las capas en la parte inferior de la imagen de abajo..
Como detalle final en la barra de navegación de las páginas, cree una nueva capa sobre el rollo y, utilizando un pincel de partículas, dibuje una línea como si fuera una pintura de acuarela (vea la imagen a continuación). Hazlo unas cuantas veces más pero utilizando diferentes colores. Además, baje la barra de navegación "Estrellas" Opacidad por debajo del 40%.
Añadir el texto relacionado con RSS. Estoy usando Aria de 10 px, con amarillo (# F2C90D) y blanco (#FFFFFF). No olvide configurar el Método de suavizado en Ninguno porque la mayoría de los navegadores representan el texto sin ningún suavizado (IE7 y Safari son las excepciones).
Como detalle adicional agregue esta imagen de un bonito globo. Extraiga el globo de su fondo y colóquelo en algún lugar debajo del logotipo, agregue una Superposición de color (# 1F416E - Modo de fusión: Superposición) a la capa "Globo" para que coincida con los colores de la escena. Además, puedes quemar el lado izquierdo del globo un poco..
Luego, utilizando el pincel 615 de los pinceles de campo de estrellas (vea el Paso 8), agregue más estrellas sobre el globo y el desplazamiento. También estoy agregando un acorde al globo pintando una línea curva blanca con un pincel sólido de 3 px. Además, use el borrador aquí y allá para reducir la cantidad de estrellas..
Es hora de añadir una publicación. Primero, agregue el título y la fila de metadatos en una nueva capa llamada "Publicar". Vea la imagen de abajo para ver los valores de los personajes. Además, estoy agregando una pequeña estrella cerca de los metadatos como un detalle visual.
Agreguemos más información a la carpeta "Publicar", ya que la lista en la página de inicio tendrá una vista previa de varias publicaciones. Agregaremos una imagen de vista previa a la izquierda (200 px por 200 px con un efecto de trazo de 1px) y un breve texto a la derecha. Además, agregaremos una vista previa de cuántos comentarios tiene la publicación en la parte superior derecha. Para el campo de comentarios, crea una nueva carpeta llamada "Comentarios" y agrega un fondo pequeño con una pequeña nube y algunas pequeñas estrellas. Básicamente, simplemente repita uno de los pasos anteriores cuando diseñamos el encabezado, pero en una pequeña medida. Luego agrega el número de comentarios y la palabra Comentarios abajo.
A continuación, agregue un Etiquetas línea debajo de la publicación y agregue una pequeña estrella a la derecha de esa línea. Agrega un pequeño campo de estrellas como fondo para la publicación, solo si quieres. Finalmente, dibuje un divisor (# 1D324F) para la publicación usando la herramienta Línea.
Luego duplique la carpeta "Publicación" y edite las copias para crear dos o tres publicaciones diferentes. Es muy posible que deba aumentar la altura de su documento en este punto, solo hágalo usando la herramienta Recortar o Imagen> Tamaño del lienzo, como en el Paso 1. Cuando haya cambiado el tamaño de su documento principal, aumente la altura de ambos fondo y barra lateral de fondo también.
Vamos a trabajar en la barra lateral ahora. Vamos a añadir el formulario de búsqueda. Cree una nueva carpeta llamada "Barra lateral" y dentro de ella cree otra carpeta y asígnele el nombre "Buscar". Dibuje una nube en esa carpeta y esquive y sepárelo para que se vea como la siguiente imagen. Luego, utilizando la herramienta Rectángulo redondeado, dibuje un rectángulo sobre la nube. Aplique un efecto de trazo interno de 1px (# 697372) al rectángulo y cambie su valor de relleno a 50%.
Agregue algunas estrellas blancas sobre la capa de nubes usando cualquier capa de campo de estrellas, recuerde borrar todas las estrellas adicionales. Luego duplique, reduzca y edite> Gire horizontalmente la capa "globo" del Paso 29. Ponlo en la carpeta "Buscar". Además, agregue el texto del título usando Georgia Italic y un bonito color amarillo (# D5A934). A continuación agregue las instrucciones de búsqueda y el botón "Ir!". Puedes ver los valores de los personajes en la parte inferior de la siguiente imagen. Como detalle final, dibuja una estrella brillante detrás del texto..
Agregue el texto del contenido de la barra lateral, títulos, enlaces y coloque cada sección en una carpeta separada. Además, agregue un fondo de campo de estrella suave en cada carpeta y una estrella brillante detrás de cada título. Además, agregue una estrella brillante como ejemplo del efecto de desplazamiento en cualquier enlace. No olvides tanto el relleno como las guías de margen..
Estamos llegando al final. Vamos a añadir un pie de página para la barra lateral. Primero, desvanece un poco la parte inferior de la pintura de fondo de la barra lateral con un cepillo suave en su máscara de capa. Luego dibuja algunas nubes, luego esquiva y quemalas. Asegúrese de que las nubes no invadan el fondo del contenido principal ni excedan el ancho de la barra lateral. Luego agrega un campo de estrellas blancas detrás de las nubes y duplica el globo una vez más. Estoy guardando todo esto en una carpeta llamada "Pie de barra lateral".
Finalmente, crearemos el pie de página. Primero en la máscara de capa del fondo del contenido principal con un pincel grande y suave, oculte la parte inferior para desvanecerla. Luego, seleccione algunos pinceles de nubes y píntelos en la parte inferior del diseño. Estoy combinando grandes nubes azules oscuras (# 0B1C38) y pequeñas nubes azules # 223E63), como se muestra en las imágenes a continuación. Recuerde, esas nubes se convertirán en una imagen de fondo, así que trate de no cruzar una Guía entre el contenido y el pie de página. Además, recuerde colocar todas las capas relacionadas del pie de página en una nueva carpeta llamada "Pie de página".
Quema las nubes más claras. Luego, pinta un campo de estrellas blancas con el pincel 615 del conjunto de estrellas. A continuación, pinta un campo de estrellas más brillantes con un pincel diferente, en este caso el número 656 del conjunto. Por fin, elimina el campo de estrellas con un borrador grande y suave..
Espero que hayas encontrado útil esta tut. Los miembros PLUS pueden descargar el archivo PSD y modificar lo que desees, agregar o eliminar detalles y crear tu propio diseño estrellado.
.
Suscríbase a Psdtuts + RSS Feed para obtener los mejores artículos y artículos de Photoshop en la web.
Accentsconagua