Share
Los buenos diseños nunca deben desperdiciarse. Este diseño se realizó originalmente para un cliente que nunca pagó, y dado que hubo una respuesta positiva tan abrumadora, decidí crear un tutorial para él. Las texturas ricas y cremosas dan a este diseño un tema único. Espero que te guste el cafe!
No solo estamos regalando los archivos de Photoshop para este diseño, sino que también regalamos los archivos HTML para que pueda ver cómo se ha codificado después de la fase de diseño. Debería seguir este tutorial desde el principio, pero también puede descargar los archivos de origen..
Como con cualquier diseño, necesitaremos una buena cuadrícula para comenzar. Siempre empiezo con un documento de 960px de ancho (que será el ancho de nuestra página). Asegúrese de darle a su documento la altura suficiente para permitir todos los elementos que crearemos. Elegí 1100px.
Arrastre las directrices a los lados de su documento. Estos actuarán como canales para nuestra área de diseño, que tendrá un ancho de 960px. También arrastre las directrices a 10px y 960px en la horizontal. Estos actuarán como un ident para mantener todo cuadrado al avanzar a lo largo de la página.
Una vez que haya establecido sus directrices, vaya a Imagen -> Tamaño del lienzo y cambie el valor del ancho de su lienzo a 1000px. Esto nos dará un poco de espacio adicional para trabajar en el exterior y mostrará cómo se expandirá el sitio en el navegador..
La esquina superior izquierda de su documento debería verse así:
Necesitamos crear algunas pautas más, ya que tenemos algunas columnas que se ejecutan verticalmente en la página. Cree 6 pautas verticales más a 330px, 350px, 650px, 670px, 730px y 750px. Esto debería ayudarnos a seguir adelante y mantener todo alineado..
A continuación, estaremos rellenando el fondo. Obviamente vamos por marrón debido a su riqueza (y es el color del café). Comience creando una nueva capa y rellenando todo el documento con cualquier color sólido (lo alteraremos con los estilos de capa). Puede hacerlo rápidamente presionando Mayús + F5 para "Rellenar".
Cambie el nombre de esta capa a "bg", y haga clic derecho en la paleta de capas y seleccione "Opciones de fusión". Seleccione "Superposición de degradado" y cree un degradado de # 67331c a # 2e1308; Queremos el marrón más oscuro en la parte superior de la página, y el marrón más claro en la parte inferior.
Ahora necesitamos agregar un poco de textura para que el degradado no se vea tan plano. Crea una nueva capa, sobre tu capa "bg", y denomina a esta capa "Patrón".
El resultado debería ser algo como esto:
Ahora que hemos creado nuestro fondo, seguiremos adelante y comenzaremos a crear algunos de los elementos en la página, comenzando con esa elegante barra de navegación amarilla..
Cree un nuevo grupo de capas y cambie el nombre de este grupo a "Navegación". Dentro del grupo "Navegación", cree una selección que tenga 100px de altura y el ancho completo de su documento. Crea una nueva capa y pulsa Mayús + F5 para rellenar la capa. Como color de relleno, use # edd38d (amarillo). Cambie el nombre de esta capa "bg" dentro del grupo "Navegación".
Ahora tienes tu barra de navegación. Se ve un poco plano, por lo que vamos a seguir adelante y agregarle algunos estilos de capa para que se destaque un poco más. Haga clic derecho en la capa "bg" y seleccione Opciones de fusión.
La barra de "Navegación" debería verse así:
Una vez más, necesitamos un poco de textura, de lo contrario terminará viéndose plano. Usé esta textura similar a la arena que tenía alrededor. La parte importante aquí es el color. Puede usar cualquier textura que desee, pero el color debe ser similar al color de relleno que usamos anteriormente. Agregue esta textura en una nueva capa sobre la capa "bg" que creamos anteriormente, y establezca su opacidad en 30%. Cambie el nombre de esta textura de capa y asegúrese de que tenga exactamente las mismas dimensiones que la capa "bg".
Queremos darle un poco más de profundidad a la barra amarilla, por lo que vamos a crear manualmente una sombra más oscura en el borde inferior. Para hacer esto, haga una selección en la parte inferior de la barra amarilla y cree una nueva capa.
Rellene esta nueva capa con un degradado (Shift + F5) de Transparente a # 2f1408 (a 30% de opacidad)
Eso debería hacerlo por la barra amarilla. Debería verse algo como esto:
Cree un nuevo grupo llamado "Nav" y cree todo el texto y las capas siguientes dentro de él.
Navegación bastante simple aquí, grande y fácil de leer. La fuente es Georgia, 30px. Asegúrese de que su texto tenga un buen espacio entre cada palabra (para permitir posibles estados activos). Haga que el color del texto # 92583f, con el elemento activo (Inicio en este caso), # 64311b.
Para crear el subrayado "activo" para la navegación, utilicé la herramienta de pincel para ver un subrayado algo titulado. Esto une el logo con el resto del sitio. No se preocupe si no lo hace bien en el primer intento, probablemente lo dibujé 50 veces antes de encontrar la línea que me gustó..
Ahora necesitamos el botón "Registrarse". Duplique el texto de navegación (seleccione la capa de texto y Comando + J) y cambie las palabras para leer "Registrarse".
A continuación, seleccione la herramienta Rectángulo redondeado y dibuje un rectángulo con Radio 20px; Esto nos dará la forma alrededor del texto de registro..
Establezca el Relleno de esta capa en 0% y aplique los siguientes estilos de capa:
Para crear el logotipo, encontré una servilleta libre y recorté los bordes un poco. Puedes encontrar el tuyo en: iStockPhoto u otros sitios gratuitos.
Agregué una sombra para que pareciera que la servilleta estaba encima de todo lo demás:
Utilicé una textura de una mancha de café (para darle un poco más de autenticidad a nuestro sitio de café y servilleta). Es posible que deba jugar con la opacidad hasta que se vea bien. También puedes intentar configurar el modo de fusión de la mancha en Multiplicar para que destaque un poco más..
En cuanto al resto del logotipo, elegí una fuente de escritura a mano y rápidamente dibujé una taza de café. Nada demasiado complicado aqui.
Ahora crearemos ese cuadro de búsqueda translúcido. Cree un nuevo Grupo de capas, debajo de las capas de la "Barra Amarilla" (porque queremos que la barra de búsqueda aparezca como una pestaña que sobresale debajo del encabezado). Tu pila de capas debe ser algo en este sentido:
Comenzaremos creando el rectángulo redondeado que contiene la barra de búsqueda. Coge la herramienta Rectángulo redondeado y crea un rectángulo de 300 px de ancho y aproximadamente 70 px de alto. Asegúrese de que el rectángulo encaje en nuestro "canal de la derecha" con las guías que creamos en el primer paso de este tutorial..
El resultado debería verse así:
A continuación, crearemos el cuadro de entrada con la herramienta Rectángulo redondeado. Cree un rectángulo, con Radio 5px, Ancho: 280px, Altura: 30px. Centre este nuevo rectángulo dentro del rectángulo "contenedor" que creó anteriormente. Cambiar el nombre de esta capa "entrada"
Coge la herramienta de texto y agrega un poco de texto con # af8753 como tu color. Elija su ícono de stock favorito (recomiendo usar IconFinder para íconos).
Ahora que hemos creado todo el encabezado, ahora podemos entrar en el contenido real. Primero crearemos esos 3 grupos principales de contenido. Una vez más, tome la herramienta rectángulo redondeado con un radio de 20px y cree 3 rectángulos redondeados en las 3 columnas que creamos anteriormente.
Para hacer que estos cuadros se parezcan a lo que acabo de mostrar en la captura de pantalla, aplique los siguientes estilos de capa:
Encontré algunos excelentes iconos de café en la web que se adaptan perfectamente al diseño, que utilicé en estas 3 secciones. Una vez más, solo estamos haciendo uso de nuestros recursos, y no tiene sentido recrear la rueda aquí.
Luego agregué un encabezado, usando la misma fuente Georgia y un texto con viñetas, y esta sección está terminada..
Dado que el diseño utiliza la transparencia en todo el diseño, sentí que los estilos de mesa no deberían ser diferentes. La mesa es limpia y simple, lo que ayuda a integrarse perfectamente en el diseño..
Coge la herramienta de marquesina y crea una selección cuadrada donde quieres que esté tu mesa. Mi mesa tiene 700px de ancho (siguiendo las pautas que establecimos anteriormente) y 220px de altura.
Cree una nueva capa y rellénela (Shift + F5) con un marrón más oscuro (elegí # 3c2014). Cambie el nombre de esta capa a "table bg" y establezca la opacidad al 70%. Ahora, utilizando la herramienta de selección de una sola línea, crearemos la separación entre columnas y filas. Una vez que haya seleccionado dónde desea que estén sus divisiones, presione Eliminar y elimine los píxeles rellenos de la capa "tabla bg".
Ahora deberías tener una buena cuadrícula de mesa como esta:
Utilizo Georgia para rellenar las celdas con texto, y dejaré que usted elija colores / tamaños. Asegúrese de agregar el encabezado principal y los encabezados de tabla.
Ahora vamos a crear los iconos de calificaciones. Para las clasificaciones de "precio", elegí una fuente con un signo de dólar grueso y le apliqué algunos estilos de capa. Cuando encuentre su fuente, escriba 4 signos de dólar. Duplique esta capa, luego cámbiela a la derecha y escriba un signo de dólar (tendrán aplicados estilos de capa separados). Para los signos de dólar amarillo "activos", aplicaremos los siguientes estilos de capa:
Y para los signos de dólar inactivos, queremos que se vean dentro (como si no estuvieran llenos). Estaremos aplicando diferentes estilos de capa aquí:
Para la calificación de estrellas, usé la herramienta de forma personalizada de Photoshop y elegí la estrella. La misma técnica que usamos para los signos de dólar (simplemente Copiar / Pegar los estilos de capa desde arriba) a estas estrellas.
Su resultado debe estar en estas líneas:
Agrupe esta única fila que creó y duplique el grupo dos veces, desplazando la fila hacia abajo para que quepa en la cuadrícula que creó anteriormente. El resultado final debería verse así:
Nuestra última sección principal es la lista de usuarios más activos. Continuamos usando Georgia, pero agregamos un toque agradable a los usuarios que no tienen avatares. Verá que el patrón proviene del ícono en el cuadro "Examinar" cerca de la parte superior: el vapor que viene de la taza. Otro detalle fino para unir al diseñador. Así es como lo creas.
En la columna de la derecha, agregue el encabezado (reutilice lo que creó para "Revisiones recientes") y complete un área de rectángulo con 40% de opacidad (el color no importa aquí). Nombre esta capa como "contenedor", y luego le agregaremos algunos estilos de capa (Superposición de color y trazo):
El resultado debe ser una caja opaca con un borde exterior agradable que sea más oscuro que el fondo interno:
Para el avatar, use la herramienta de marca para crear una selección de 50px por 50px. Cree una nueva capa y complete su selección con cualquier color (Shift + F5).
Ahora agregaremos algunos estilos de capa para que este avatar se vea un poco mejor para aquellos usuarios que no tienen un conjunto de avatar.
Agregue un texto para el nombre del usuario y el país, y el vapor se arremolina de la taza de café y duplique la fila unas cuantas veces para llenar el espacio..
Finalmente, el pie de página. Para dar un poco de separación, hay un degradado marrón oscuro a transparente de arriba a abajo para proporcionar una línea visual para dividir las dos secciones. Para crear esta separación, use la herramienta de marquesina para hacer una selección y complete la selección con un degradado (marrón a transparente). Ajuste la opacidad del degradado hasta que pueda ver los patrones desde el fondo brillar a través de.
Una vez más, usaremos Georgia aquí para crear algunos enlaces complementarios sobre el sitio. Utilicé 18px para los enlaces, y 14px para el aviso de Copyright a continuación. Asegúrese de que el lado izquierdo esté alineado con las pautas que creamos anteriormente.
El toque final es reutilizar el ícono de la taza de café del cuadro "Examinar" en la esquina inferior derecha; Una vez más alineando el lado derecho con las pautas..
No es tan difícil ¿verdad? Es bastante simple cuando puedes romperlo en pedazos, reutilizando algunos de los mismos estilos y técnicas que has hecho una y otra vez. Los archivos divididos también se incluyen, para que pueda ver cómo se codificó esto. Mucho ha cambiado desde que diseñé y codifiqué esto, y muchas de las imágenes probablemente podrían recrearse con CSS3 y gradientes, pero hace casi 3 años, así es como lo había hecho. Es posible que haya visto este diseño en www.coffeenatic.com; Ahora que el sitio ya no está, pensé que sería una buena idea compartirlo con todos, ya que recibí comentarios tan positivos al respecto. Espero que lo hayas disfrutado!
Accentsconagua