Share
¿Soy un gran fan de los diseños de sitios centrados en las fotos? así que hoy estoy entusiasmado con el lanzamiento de un nuevo tutorial de "sitio completo" que está dirigido a fotógrafos, ilustradores y otros creativos visuales. En el día 1, estaré diseñando la plantilla en Photoshop usando algunos trucos y técnicas especiales. En el Día 2, veremos la preparación "previa al vuelo" para la fase de codificación, que veremos en detalle en el Día 3. En el Día 4, le mostraremos cómo crear tres sitios completamente diferentes utilizando el mismo HTML en bruto. Listo para comenzar? Hagámoslo!
Al igual que con cualquier proyecto de diseño web, ¿es importante identificar los objetivos de cualquier proyecto? así que, antes de sumergirnos, digamos algunas palabras sobre cuáles son nuestros objetivos finales:
Lo último que mencionaré es quizás lo más importante: debe ser 100% personalizable utilizando la menor cantidad de trabajo posible! Qué significa esto para nosotros? Me gustaría que cualquier persona pueda cambiar la marca y el diseño de la piel sin tener que tocar el desorden y volver a escribir cualquiera de los códigos HTML principales. ¿Lo ideal sería que al intercambiar algunas imágenes (el logotipo y una imagen de fondo personalizada) y algunas CSS, se pueda crear un resultado completamente diferente? Por eso, en el último día de esta serie, dedicaremos una sesión completa a la creación de personalizaciones.!
Ok, con nuestras metas ahora claramente definidas, comencemos!
El video tutorial está destinado a ser un complemento del escrito escrito a continuación. Piense en ello como material "complementario": no cubriré todo lo que está en la parte escrita, pero a veces es agradable ver a alguien más trabajando en Photoshop para aprender otros trucos, consejos de eficiencia y otras técnicas que de otra manera no podría estar familiarizado con.
La guía completa paso a paso escrita está a continuación. Comenzaremos con un documento de Photoshop en blanco, pero también puede descargar la demostración PSD para verificar su trabajo con el mío..
Comience creando un nuevo documento de 1280 x 800 px de tamaño. ¿Por qué? Porque esto nos dará un gran lienzo para jugar. El ancho de nuestro diseño final no será realmente 1280px, pero queremos ver un color de fondo tal como lo veríamos normalmente en una gran ventana del navegador.
El primer dilema práctico con cualquier proyecto web es decidir el tamaño del documento con el que vas a trabajar. En nuestro caso, me gustaría que el diseño se ubicara en la parte frontal y central de la pantalla, llene todo el espacio posible en un monitor más pequeño y no se vea demasiado pequeño en un monitor enorme.
Consideraciones de ancho: Estoy optando por usar 994px como el ancho total. Este numero es algo arbitrario: podría haber sido un poco más ancho o un poco más pequeño, pero en última instancia hará el trabajo. ¿Por qué? Porque encaja dentro de la "zona segura" de 1003px para los navegadores más populares que se están usando en este momento, con un poco de relleno en cada lado para estar seguro.
Consideraciones de altura: Voy a trabajar con la altura de 644px dentro de Photoshop La altura es otro número arbitrario en el caso de este diseño. Por qué? Porque 1) será ajustable desde el CSS, 2) vamos a dejar que esta "flexión" se ajuste al contenido que lanzamos dentro y 3) Me preocupa menos la altura del pliegue de lo que podría ser por un proyecto de mayor escala.
La clave a tener en cuenta aquí es que todo esto será 100% ajustable desde el CSS una vez que hayamos terminado. Por lo tanto, si prefiere un diseño más ancho con una altura más baja, podrá obtener esto en cuestión de segundos después de decidir su preferencia. La idea aquí es mantener las cosas fluidas aunque estemos usando una plantilla de tamaño fijo. así que no te obsesiones demasiado con los números exactos en este momento.
Advertencia: ¿Este enfoque de "mantenerlo fluido" es realmente exclusivo de esta plantilla en particular? Normalmente comenzaré cualquier proyecto con un análisis mucho más refinado para encontrar el tamaño perfecto, que veremos en otras series tut..
Si bien hay muchos méritos para usar un sistema de cuadrícula pre-construido (como 960gs o 978gs), tengo una visión bastante clara de lo que quiero construir, y al no encontrar un sistema de cuadrícula que se adapte de inmediato a mi diseño, He optado por el estilo libre de este diseño..
¿Cuáles son las repercusiones del freestyling en un diseño?? Por un lado, tendremos que ser mucho más cuidadosos con las dimensiones de cada módulo de contenido que creamos porque no tendremos guías que nos indiquen dónde deben ir las cosas. Para crear una plantilla de aspecto realmente uniforme, tendremos que ser mucho más diligentes en la creación de nuestro propio sistema de cuadrícula que es nativo de esta plantilla..
Dibuja el rectángulo redondeado: Ahora que hemos decidido en 994px por 644px como nuestro tamaño de contenedor, siga adelante y dibuje un rectángulo redondeado de ese tamaño (utilizando un Radio de 12px). Abre el panel de información (Ventana> Información o F8) para ver el tamaño de su rectángulo mientras lo dibuja.
Tenga en cuenta que el color del rectángulo no importa en este punto. Aunque eventualmente lo convertiremos en blanco, por ahora queremos que se destaque del fondo..
Creando el efecto de sombra: Voy a utilizar el mismo método que usamos en el tutorial "Crea tu propio Juicy Tabbed Slider Slider" porque es la forma más fácil de obtener una sombra que será fácil de cortar y convertir en un PNG transparente cuando sea el momento de la codificación..
Para crear esta sombra, solo toma tu herramienta de pincel y configúrala a 60px de tamaño y 0% de dureza.
Entonces, crear una nueva capa en blanco para dibujar, mantenga pulsada la Cambio para dibujar una línea recta, y simplemente arrastre el cursor sobre la mitad del rectángulo contenedor.
Finalmente, usaremos el Transformación libre herramientaCtrl + T) para inclinarlo ligeramente para crear un efecto de inclinación (utilicé aproximadamente 2.5 para el ángulo). ¿Por qué ángulo esto en absoluto? Porque ayudará a crear un poco de dimensión adicional si la fuente de luz parece desprenderse un poco..
Ahora vamos a duplicar esa capa cepillada (Ctrl + J mientras está seleccionado en la capa) y voltéelo horizontalmente (Edición> Transformar> Girar horizontal). Deslice la nueva capa de pincel volteado hasta que coincida con el otro lado del rectángulo del contenedor. El resultado debe ser una sombra que sea opuesta a la primera..
Mueve ambas capas de sombra detrás del marco? coloque capas y escálelas (seleccione ambas capas y presione Ctrl + T) para que encajen dentro del ancho total del rectángulo del marco.
Finalmente, fusione ambas capas de sombra juntas (Ctrl + E) y empuje la capa de sombra en el lugar correcto (use la herramienta de selección básica [V] y usa el teclado para empujar). También puede ajustar la opacidad de la capa de sombra para adaptarse a sus preferencias personales. Utilicé sobre 60%, Puedes hacer más o menos según lo que buscas.
Paso Bonus: Para agregar aún más profundidad, use la Transformar la perspectiva en la sombra para que parezca que está regresando al espacio. Solo aplica un pequeño Desenfoque gaussiano en la capa una vez que la hayas transformado para eliminar cualquier artefacto de píxeles.
Aquí hay un paso adicional más si está buscando un drama aún mayor: intente crear una capa de sombra duplicada que sea 70% más pequeña (use la Transformada libre y la escala porcentual para ajustar esto), borre más y con una opacidad diferente (70 %) para crear una "sombra central" en el interior de la primaria.
Continúa y nombra tus capas de sombra (una vez que hayas terminado de jugar con ellas) y colócalos en una nueva carpeta de capas llamadas sombras. La organización hará que la personalización sea mucho más fácil cuando estemos listos para dividir esto!
Creando el fondo:
El fondo que vamos a crear es un "patrón de ruido" azul celeste sutil. Repasaré esto rápidamente, pero para obtener más información sobre cómo crear estos patrones, consulte nuestro tutorial completo aquí..
Comience creando un nueva capa en blanco y completándolo con blanco (Mayús + F5).
Ahora vamos a añadir un poco de ruido usando Filtro> Ruido> Añadir ruido. Puedes ajustar esto a tus propias preferencias, pero lo he usado 14% por la cantidad.
Establezca la nueva "capa de ruido" en Múltiple en el panel del modo de fusión y dibuje un rectángulo (color de relleno) # e1ebef) detrás de esta capa.
Por último, vamos a agregar una nueva capa de ajuste (Capa> Nueva capa de ajuste> Tono / Saturación) sobre estas otras dos capas para que nuestro ruido no sea aburrido viejo gris.
Debajo de nuestro panel de Ajuste de la capa de ajuste (Ventana> Ajustes), Utilicé los ajustes de (Matiz: 200, Sat: 100, y Luminosidad: +60) Con la casilla Colorear marcada. Puedes jugar hasta obtener el efecto deseado..
Continúe y coloque estas tres nuevas capas (la capa adj., La capa de ruido y la capa de color de fondo) en una nueva carpeta de capas llamados "colores de fondo".
Finalmente, avancemos y hagamos que el color de nuestro contenedor sea Blanco ahora que hemos agregado un poco de color de fondo. También he añadido una luz. 1px trazo alrededor de nuestra caja de contenedores (# d8d8d8 en color) para resaltarlo del fondo..
En este punto, su documento debe verse algo como esto:
Tus capas también deberían organizarse así:
Ahora que hemos creado y diseñado nuestro contenedor de contenido básico, es hora de comenzar a llenarlo con contenido. Comenzaremos con la barra lateral de navegación porque eso definirá la cantidad de espacio que tenemos para el contenido más adelante..
¿Qué tan ancho debe ser? ¿El ancho de la barra lateral depende realmente de ti? He elegido usar 235px como ancho, porque puede adaptarse más o menos a lo que quiero allí (mucho espacio para títulos de páginas largas, el widget de redes sociales y una barra de búsqueda). ¿Puedes ajustar esto para satisfacer tus propias necesidades? y como he estado diciendo todo este tiempo, todo esto será ajustable desde el CSS más adelante.
Para comenzar, simplemente dibuje una línea de 1px usando el mismo color que usamos para el borde de nuestro contenedor (# d8d8d8) a lo largo del eje vertical del contenedor. Colócalo a unos 285px desde la izquierda del borde..
A continuación, puede ser útil dibujar una guía en este punto, a aproximadamente 20 px del borde del borde del contenedor. Usaremos esto como una guía sobre dónde colocar todo nuestro contenido para que todo se vea uniforme y bien alineado..
No voy a profundizar mucho aquí porque, bueno, probablemente vayas a usar tu propio logotipo;). En resumen, empecé con un ícono de marco simple (del conjunto de iconos de Noble) y agregué mi propia foto al marco. Luego usé la fuente Museo en 26pt; Usando 2 pesos y colores diferentes para crear una variedad visual, coloco el título de nuestra plantilla, "ShutterPress" muy bien al lado del icono.
De nuevo, ¿probablemente querrá usar su propio logotipo (o el de un cliente) en esta etapa? Así que voy a saltar sobre los estilos de capa y otros ajustes. Siéntase libre de revisarlos dentro de la demo PSD aunque!
Simplemente coloca el logo dentro del espacio de la barra lateral. Tenga en cuenta que estamos usando aproximadamente la misma cantidad de relleno superior y derecho que usamos para el relleno en el lado izquierdo.
Pequeños trucos como mantener el espacio alrededor de un objeto tan importante como el uniforme del logotipo es una de esas cosas que marcarán la diferencia entre un buen diseño y un gran diseño..
La navegación de acordeón es el primer elemento funcional del que nos estaremos burlando. Como tal, vale la pena señalar que vamos a entrar en un área gris aquí. ¿Queremos burlarnos de esto como si estuviera siendo utilizado? Principalmente para que, si le mostramos esto a alguien (como un desarrollador), entiendan cómo debería ser en todos los estados interactivos posibles..
Como tal, queremos mostrar una enlace activo, así como al menos uno acordeon abierto y uno acordeon cerrado.
Usaré una fuente simple para esto - Lucida sans a 12 puntos con el conjunto líder para 36 puntos con el color negro apagado de # 252525. Yo prefiero usar el Agudo configuración anti-alias para fuentes web en maquetas de Photoshop, pero puede usar lo que quiera.
También estoy usando una pequeña variante para el enlace activo: Negrita con el color establecido en # 0285da, lo que sucede para imitar el logotipo, así como el tono de fondo.
Use algunos espacios de teclado simples para sangrar los enlaces que eventualmente se convertirán en nuestros enlaces anidados de acordeón.
Tenga en cuenta que estamos usando la misma guía vertical para colgar el texto para que se alinee bien con el logotipo.
Los 36 puntos de ventaja son suficientes para establecer una línea horizontal simple entre cada enlace, así que avancemos y hagamos eso en este punto. Usa el color #EAEAEA para estas líneas horizontales, que es un poco más clara que nuestro color de borde primario. ¿Por qué? Ayudará a establecer que estas reglas son un poco menos fijas que las demás..
Ahora vamos a añadir los botones de acordeón. Comience por crear un rectángulo redondeado de 2px de tamaño de 11px por 11px. Agregue los siguientes estilos de capa:
Un degradado gris claro (# E6E6E6 a blanco) de abajo hacia arriba, respectivamente.
UNA 1px fuera de carrera de #bfbfbf.
Duplique esa capa de botones y agregue un texto simple "+" y "-" para finalizar los botones. Colóquelos como se muestra:
De aquí en adelante, usaremos las mismas reglas de estilo básicas para todos los elementos nuevos. Los bordes deben coincidir con los mismos grises que hemos usado antes. El relleno también debe ser aproximadamente el mismo que hemos utilizado para elementos anteriores. Estilos de fuente y colores harán lo mismo. Como tal, no te aburriré reescribiendo estas notas, solo tenlas en cuenta!
Para el widget de redes sociales, siga adelante y tome el conjunto de iconos que elija (o vea nuestro gran resumen de conjuntos de iconos aquí). Estaremos usando 16px por 16px versiones de cualquier conjunto de iconos que elija. La demostración usa este conjunto, pero puedes usar lo que quieras.
También he optado por Desaturar los iconos sociales (Imagen> Ajustes> Desaturar) para que no distraigan del área de contenido principal. Agregue los íconos o su elección (separados por unos pocos px) y agregue el texto "Social:" para que tengan un título.
Agregue en nuestra línea de bordes horizontales para la separación y deje un poco de espacio debajo para nuestra barra de búsqueda.
El widget de búsqueda es super fácil de crear. Solo dibuja un Rectángulo redondeado de 25 px de altura (radio de 8 px) con un 1px trazo de # e0e0e0 y soltar en un icono de lupa. Usé el del conjunto de iconos de Fugue (es gratis), pero puedes usar el tuyo para agregar un poco de estilo o destello..
Whallah! Nuestra barra lateral ya está hecha. Puedes agregar tus propios widgets personalizados o dejarlo como está. Es hora de poblar nuestra área de contenido con algunos, bueno, contenido!
Voy a hacer las cosas un poco hacia atrás en los siguientes dos pasos. Normalmente, ¿comenzarías un diseño web con el diseño de la página de inicio? La página a la que la gente llegará primero. Sin embargo, este es un caso raro en el que la subpágina (es decir, la plantilla de la galería) es posiblemente más importante que la página de destino real..
Entonces, sabiendo que siempre puedo crear un diseño de página de inicio, voy a comenzar nuestro diseño de contenido con la Plantilla de Galería, porque nos plantea más problemas. Los principales de estos problemas son:
Lo curioso es que una vez que hemos resuelto estos problemas, podemos crear la página de inicio bastante rápido. Al comenzar aquí, nos permitiremos crear una galería de imágenes en miniatura sin tratar de cumplir con las limitaciones que podríamos establecer accidentalmente al comenzar con la página de inicio..
Ok vamos a empezar!
Comenzaré estableciendo una cantidad básica de relleno que me gustaría mantener siempre alrededor del área de contenido. En nuestro caso, he seleccionado 32px para ser la cantidad. Es un poco más pequeño que la altura de la línea de navegación, pero no tan pequeño que las cosas se sientan apretadas o restringidas.
Eso me deja con un área activa de aproximadamente 696px por 586px (una vez más, la altura es flexible, por lo que no estamos muy preocupados por eso).
Con nuestro área de contenido activo definido, ahora queremos seleccionar el tamaño y el relleno ideales para las miniaturas. ¿Saber esto no es ciencia espacial? Básicamente jugué un poco con varios arreglos de rectángulos crudamente dibujados hasta que encontré algo que parecía armonioso.
Ahora, sé que la palabra armoniosa no es muy específica? Entonces, ¿qué quiero decir? Sabiendo que quiero ajustar entre 15 y 20 imágenes por página, probé varias combinaciones de tamaño / espacio de miniaturas hasta que encontré una que reflejaba un buen equilibrio de espacio positivo y negativo, así como un sentido refinado de jerarquía. Cosas como la Proporción Dorada juegan con esto, pero seré honesto y solo admitiré que lo observé en este caso en particular. ¿No hay magia aquí? solo un montón de experimentacion.
Entonces, ¿cuál es la fórmula final? UNA 155 píxeles de ancho por 125 píxeles de alto Imagen en miniatura, establecida en 4 columnas (y en nuestro caso, 4 filas también, que llena nuestra altura).
El relleno: Hay aproximadamente 21px de separación horizontal entre cada miniatura y aproximadamente 18px de separación vertical. Porque la diferencia?
Debido a que estamos tratando con un diseño "horizontal" (lo que significa que es más ancho que estrecho), nos parece correcto mantener la misma relación de formas en todo nuestro diseño.
Observe cómo el tamaño de miniatura final que escogí también refleja esta relación de paisaje. Por lo tanto, tiene sentido que dejemos un poco menos de relleno entre las filas que colocaremos entre las columnas.
Aquí está el resultado final:
Tenga en cuenta que he dejado aproximadamente 50 px de espacio en la parte inferior para insertar algún tipo de paginación (la forma en que los usuarios navegarán de una página de miniaturas a la siguiente). Naturalmente, si no hay suficientes miniaturas para activar la paginación, recortaremos el diseño más de cerca en la parte inferior.
El estilo visual de las miniaturas también es importante. Porque estamos teniendo mucho cuidado para crear mucho poco polaco Los detalles en todo nuestro diseño, al ver miniaturas de imágenes simples con bordes duros se sienten toscos..
Agregaremos un estilo sutil para aligerar esto y dar a nuestra cuadrícula de galería un sentido de refinamiento. Aplique el siguiente estilo de capa a cada una de sus imágenes en miniatura:
A 2px Inner Stroke (en términos de CSS, esto se convertirá en relleno) #EAEAEA
A 1px Drop Shadow (en términos CSS, esto se convertirá en el frontera) # F2F2F2
Acercaré al 100% aquí para mostrarte el estilo final:
Ahora que hemos establecido nuestra cuadrícula, agreguemos algunas imágenes reales para darle vida a este diseño:
Ya casi hemos terminado con esta página? ahora todo lo que necesitamos es una forma para que los usuarios naveguen de una página de miniaturas a la siguiente. Esto se llama paginación. Hay muchas maneras de hacer esto (algunas más complejas que otras). En nuestro caso, ¿queremos un método simple de paginación? así que estoy optando por usar una flecha izquierda simple | enfoque de flecha derecha - es decir: (). Este es uno de los métodos de paginación más intuitivos, por lo que tiene sentido para nuestra situación..
Sigamos adelante y creamos dos círculos de 18px de diámetro:
Tenga en cuenta que simplemente he copiado / pegado el estilo de capa De los botones de acordeón que usamos antes. ¿Por qué? ¿Porque la duplicación de estilos visuales ayuda a garantizar que nuestro diseño se sienta uniforme? y realmente no hay razón para perder el esfuerzo en intentar diseñar un estilo completamente nuevo. El uso consistente del estilo de capa realmente ayudará a la usabilidad de nuestro sitio.
Una vez que haya dibujado sus círculos, agregue las flechas (esto ya se muestra arriba). En mi caso, utilicé una forma personalizada en Photoshop, pero puede usar un símbolo de texto personalizado ">" con la misma facilidad. Ya que esto no es un juego para principiantes, asumiré que puedes averiguar cómo obtener esta forma de alguna manera;)
¡Aleta! Eso realmente completa esta página de contenido. Al usar los mismos estilos básicos y reglas de relleno que hemos establecido, también podemos convertir esto fácilmente en otros diseños de cuadrícula (como una cuadrícula de 2x2 o una cuadrícula de 3x3).
Bien, ¡a la etapa final en la sesión de diseño! Probablemente podamos averiguar cómo crear otras páginas de soporte, pero lo que realmente necesitamos ahora es el diseño de la página de inicio. Dado que se trata de una plantilla orientada a los fotógrafos, una fotografía obviamente debería ocupar un lugar central. Sin embargo, también necesitamos un texto descriptivo (para que un fotógrafo le explique quién es, qué tipo de servicios ofrece, etc.)
Consideraciones de ancho: En la mayoría de los casos, simplemente copiamos el espacio de contenido activo que usamos en la Plantilla de la Galería. Voy a cambiar las cosas un poco cambiando el relleno de 32px a 20px. Por qué? Esto nos dará solo un poco de espacio adicional para utilizar una imagen de "tamaño COMPLETO". Es un cambio muy sutil en el diseño general, pero el impacto debería ser enorme porque podremos encajar una imagen masiva en el espacio.
Consideraciones de altura: Como hemos estado diciendo todo el tiempo, la altura es realmente variable y, en última instancia, se dejará a los usuarios / diseñadores / clientes individuales para determinar la cantidad de contenido que desea en esta página. en mi caso, intentaré mantener las dimensiones de esta página igual que la página de nuestra galería, aunque.
El resultado de estas consideraciones es un espacio activo que es un poco más grande que el que usamos en la plantilla de la galería: 720px por 604px.
Esto tiene sentido para nosotros por varias razones: 1) nos da mucho espacio para diseñar y 2) cabe dentro del espacio de "plegado" de los navegadores más populares. Mientras no coloquemos ninguna información crucial cerca de la parte inferior de esta área, deberíamos utilizar este espacio de cualquier manera que podamos pensar..
Dibujando la imagen: Comience dibujando un 716px de ancho por 438px de alto rectángulo redondeado (Radio: 10px).
Aplique los siguientes estilos de capa, comenzando con un Trazo 2px:
Y también agregue una sombra interior (que ayudará a hacer que nuestra imagen "resalte" más en la página):
El estilo visual final debe verse algo como esto:
Creación de las pestañas:
Las pestañas serán la forma en que los usuarios podrán recorrer las imágenes en la página de inicio. ¿Esto es esencialmente solo un carrusel jQuery básico cuando piensas en términos de codificación? pero no hay razón para limitarnos a los estilos visuales que la mayoría de los controles deslizantes pre-construidos usarán por defecto.
Entonces, seamos un poco más creativos con las pestañas izquierda / derecha creando algunos círculos internos visualmente interesantes..
Comenzar con un 92px diámetro círculo forma. Utilizar Negro para el color de relleno y establecer el opacidad al 57%.
Use la herramienta Rectángulo Marquesina para hacer una selección que se ejecute a lo largo de nuestro "contenedor de imágenes" y use esa selección para hacer una Máscara de capa.
Ahora agregue el "
Así que deberías tener esto:
Continúa y agrupa estas capas en un grupo, luego duplícalo, voltea el grupo copiado horizontalmente y deslízalo hacia el lado derecho:
Ahora todo lo que necesita hacer es arrastrar una imagen a la capa de rectángulo redondeado (haga que la imagen sea una Máscara de recorte de esa capa) para que podamos ver cómo se verá esto:
Accentsconagua