Share
¿Estás de humor para algo diferente? Lo guiaré en el proceso de creación del diseño de Stuff: blog y portafolio orientados a lo horizontal. Asegúrate de visitar la versión en línea de Stuff para ver el resultado final.!
Que sea de 1300 x 800 px. Todo ese espacio no es realmente necesario, pero es bueno sentir el carácter panorámico del diseño mientras trabajamos..
Cree una nueva capa de relleno con el color sólido # bfc6cd
Convierta una nueva capa en un "objeto inteligente" (haga clic con el botón derecho> Convertir en filtro inteligente) y aplique el filtro> Agregar ruido (puede ajustarlo más tarde si es necesario gracias a la función de filtros inteligentes). Bloquea la capa. Para mantener el proyecto limpio y organizado, puede eliminar la máscara de la capa y convertirla en la capa de fondo predeterminada (opcional).
Cree una nueva forma de flecha utilizando el ajuste preestablecido de "herramienta de forma". Luego use la herramienta de selección Directa para ajustar la forma para que se vea bien (mueva los puntos como mejor le parezca).
Seleccione la herramienta Transformación libre, mueva la flecha 310px desde arriba, luego agarre y mueva la regla horizontal para crear una nueva guía. Ajústalo al centro de la flecha. A partir de ahora representará el eje horizontal principal del sitio..
Agregue 4 estilos a la flecha (haciendo doble clic en la capa): sombra paralela, sombra interna, brillo exterior y superposición de degradado (de #cbcbcb a #ffffff).
Agregar una nueva capa de texto sobre la capa de flecha.
Agregue estilos al texto: sombra interna, superposición de degradado y trazo. Para un mejor efecto de profundidad, haga que el trazo sea visible solo en la mitad inferior del texto usando un trazo de "degradado" con las configuraciones alfa de la mitad superior configuradas en "0" opacidad.
Las sombras exteriores e interiores le dan a la flecha un aspecto más tridimensional, pero para hacerlo aún mejor, creemos un simple efecto de luz brillante. Cree un nuevo rectángulo y use la herramienta Convertir punto para modificar su forma para crear una ligera curvatura. Enmascararemos esto sobre la capa Flecha para crear un efecto brillante.
Establezca este relleno de capa en 0% y agregue un estilo de superposición de degradado con blanco sutil de fuga.
Para evitar que la capa de luz vaya más allá de la flecha: presione ctrl + clic en la capa de flecha para hacer una selección agregar máscara de capa a la capa de luz
Para enfocar la atención de los espectadores hacia el logotipo, haga una luz para que la flecha sobresalga del fondo. Puedes usar un método primitivo que es:
Cree un rectángulo blanco de 240 píxeles de ancho (la altura debe ser un poco más alta que el documento).
Encima de la foto, cree un nuevo cuadro de texto y rellénelo con el título del blog. Use una fuente condensada como League Gothic (gratuita en League of Moveable Type). Debajo de la foto, crea otro nuevo cuadro de texto para el contenido general..
Haga una selección para el contenido y cree una nueva capa de máscara para el rectángulo grande. Cambia la densidad de la máscara al 80%.
Agregue estilos de brillo exterior (negro) e interior (blanco) a la capa de la tira para obtener un aspecto más 3D.
Añadir texto meta información sobre la publicación. He usado 12px Georgia cursiva, 17px altura de línea. Recuerde hacer uso de guías para mantener los textos en una sola línea.
Crea el texto "leer más" debajo de la publicación.
Una capa debajo de ella, crea un nuevo rectángulo para ser un botón de leer más.
Añadir estilos de degradado y trazo a ella. Consejo: haz el interior, para tener esquinas perfectamente afiladas del botón.
Añadir un degradado sutil a la capa de texto también.
Para crear la insignia, use otro rectángulo, agregue texto (yo he usado Arial) y gire ambas capas juntas 45 grados.
Añadir máscara a la capa de rectángulo para ocultar esquinas innecesarias
… Y agrega 2 rectángulos pequeños como una ilusión de la insignia que se muestra debajo de la imagen.
Añade una sombra sutil a la insignia.. Consejo: para el modo de combinación de sombras, use Normal en lugar de la opción Multiplicación predeterminada, por lo que tendrá efecto incluso si usa la insignia como el archivo PNG transparente
Crear una nueva capa de texto. En lugar de color negro (que puede sentirse poco natural en fondos claros), use gris oscuro para lograr un aspecto más natural.
Sugerencia: para crear líneas horizontales en lugar de usar la herramienta de línea, cree un texto sin suavizado utilizando el glifo de subrayado "_". Siempre tendrá píxeles nítidos y los espacios entre las líneas serán fáciles de controlar gracias al parámetro de altura de línea. Use la misma altura de línea que en el texto del menú y cree tantas líneas como elementos de menú, menos uno. Haz las líneas más largas de lo necesario.
Establezca este relleno de capa en aproximadamente el 15% y agregue una sombra blanca.
Agregue una máscara a la capa de líneas y pinte con un pincel suave sobre ella para lograr bordes que desaparecen.
Cree un rectángulo con esquinas redondeadas (3px) para una entrada de búsqueda.
Añada sombra interior al cuadro y haga que el relleno de la capa alcance el 70%.
Sobre él, agregue el texto de búsqueda y cree una forma personalizada como una flecha de envío. Añada sombra interior al cuadro y haga que el relleno de la capa alcance el 70%.
Como las imágenes vectoriales se recomiendan para este propósito, sugiero encontrar los logotipos necesarios en el servicio www.brandsoftheworld.com. En la mayoría de los casos es la forma más rápida. Abra el logotipo en Illustrator, copie los contornos y pegue Photoshop como formas. También puedes utilizar los iconos de amigos de Orman Clark..
Establezca el relleno de la capa en 0% y agregue estilos (sombra paralela, sombra interna y superposición de color) para lograr el aspecto 3D. Para obtener el logotipo en el estado activo (iluminado), cambie el color y la intensidad del estilo de Superposición de color.
Copie este estilo y cópielo a otros logotipos (haga clic con el botón derecho en la capa / Copiar estilo de capa)
Para agregar un cuadro de comentarios, cree otro rectángulo de esquinas redondeadas de aproximadamente 520 píxeles de ancho y agregue el estilo Sombra paralela.
Seleccione la parte más grande y agregue la máscara a esta capa.
Duplica la capa e invierte su máscara. Haz el relleno de la nueva capa un 25%..
En la configuración de la mezcla, marque la opción "Efectos de Ocultar máscara de capa" para evitar inconsistencias en la línea de la sombra de ambas capas.
Cree una línea vertical negra en el borde entre estos cuadros, haga que se llene también un 25% y agregue 1px de sombra blanca dirigida hacia la derecha.
Agregue un poco de muestra de avatar y textos usando colores utilizados previamente.
Crea formas circulares y pega estilos de capas desde la flecha del logotipo. Corte la forma de la flecha desde el círculo usando la forma personalizada y el modo de corte.
Debajo de esta capa de botones, cree otro círculo, del mismo tamaño o más pequeño, y pegue el estilo degradado del logotipo. Consejo: si alguna capa tiene muchos estilos y desea copiar solo uno, puede arrastrar el estilo mientras se presiona alt y soltarlo en otra capa.
Agregue luz (de la misma manera que la flecha del logotipo).
Si desea realizar una pequeña mejora, que nadie notará, cree luces separadas para el botón y el agujero en forma de flecha, y mueva el segundo un poco hacia abajo. Y si ya tiene dos luces separadas, puede fácilmente (sin enmascaramiento adicional) hacer que la luz del botón sea más fuerte para que se vea mejor en el botón muy brillante.
Selecciona todas las capas de botones y crea un objeto inteligente de ellas..
Duplicar capa, mover y voltear horizontalmente. Ahora, si edita una flecha (haga doble clic en la capa inteligente), ambas cambiarán.
Todos los demás elementos se pueden hacer copiando, pegando y cambiando el tamaño de los elementos existentes que hemos diseñado.
Sugerencia: la fuente League Gothic y otras fuentes de software gratuito con licencias aptas para diseñadores web se pueden encontrar en www.fontsquirrel.com
De acuerdo, tiene la PSD más o menos lista y le gustaría ir más lejos. Como Stuff necesita un enfoque diferente del contenido, debido a su carácter horizontal, es realmente difícil codificarlo correctamente. No conozco muchos sitios web horizontales que lograron evitar errores comunes (por ejemplo, no funciona el desplazamiento del mouse). Deje un comentario si desea conocer las mejores maneras de codificar este diseño y veremos si podemos llevar el tutorial al sitio.!
De todos modos, si desea ahorrar algo de tiempo y tener todo en la placa de plata, puede descargar la plantilla HTML o la versión de WordPress de Stuff por unos pocos dólares. Gracias!
Accentsconagua