Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Design

Diseño de una familia de sitios web

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Silvia Lohrmann (you can also view the original English article)

En su mayor parte, el diseño web no se trata de técnicas de Photoshop, por eso es bastante complicado escribir un tutorial de Photoshop sobre el tema. Así y todo, hoy voy a explicarles un diseño que hice recientemente. Vamos a examinar algunos pasos de Photoshop, y también intentaré develarles algunos de los motivos de mis acciones.

Puedes encontrar los archivos PSD de Photoshop en un directorio etiquetado 'PSDs' que está en el archivo ZIP que descargaste. Quizás quieras echarles un vistazo antes de comenzar.


Primero, los diseños finales

Primero un vistazo a los diseños. Estoy escribiendo un libro sobre tematización en WordPress llamado How to Be a Rockstar WordPress Designer (Cómo ser un diseñador estrella en Wordpress). El libro requería un seguimiento a lo largo del tema de ejemplo, así que diseñé este al que he llamado "Creatif", porque suena francés y me parece interesante. Básicamente es un conjunto de diseños que construiremos en dos temas de WordPress: uno es un blog normal y el otro es un tema que te permite usar WordPress para hacer un portfolio.

Lo que ves a continuación son las cuatro pantallas principales que he usado para construir el tema. En términos generales creo dos pantallas para la mayoría de los sitios web: una home y una página de contenido. Si un sitio fuera más complicado, entonces crearía una pantalla por cada una de las páginas más importantes. Hasta cierto punto puedes diseñar algunas páginas cuando estás en la fase de generación del HTML, pero es bueno esbozar las páginas principales, para estar seguro de que todo se vea bien y tenga sentido.

Las pantallas a continuación son:

  1. La home para el tema portfolio de Creatif
  2. La home para el tema blog de Creatif
  3. Una página de contenido general para cualquiera de las dos
  4. Un esquema de color alternativo que construiremos en una hoja de estilos intercambiable: para que se pueda tener una versión clara u oscura de cada tema.









Paleta de colores

Una de mis primeras decisiones cuando diseño un nuevo sitio es elegir una paleta de colores. Hay algunos buenos sitios que pueden ayudarte a elegir una buena combinación; yo suelo experimentar hasta conseguir la que a mí me gusta. Una fórmula simple que uso a veces es elegir un conjunto de tonos neutros y un solo color brillante para levantar la paleta. En este caso elegí una paleta de color beige grisáceo con un azul claro muy brillante como mi color de realce.



Paso 1

Comenzamos el tutorial con un pequeño logo. Mientras que el diseño de un logo es, por lo general, un proceso complejo, en este caso solo quiero un pequeño gráfico para presentar mi página. Así que me salté todo el proceso de diseño e hice un logo tipográfico simple dentro de una caja. Si estás interesado en el diseño de logotipos, un gran blog sobre el tema es Logo Design Love (Amor por el diseño de logos) de David Airey, y una buena galería de logotipos se puede encontrar, por supuesto, en Faveup.

Escogí la fuente News Gothic Condensed Bold. Creo que es una fuente por defecto de Mac, pero no estoy seguro, porque instalo miles de fuentes todo el tiempo. Usé un estilo de capa simple (del que se puede ver la configuración en el paso siguiente) que hace que la tipografía se vea moderna y un poco web2. Utiliza un degradé débil, una sombra sutil y un borde de 1px para que la tipo se despegue un poco de la página.



Paso 2

Estos son los ajustes para el estilo de capa:



Paso 3

A continuación añadí un rectángulo redondeado detrás del texto. Esto lo puedes crear con la herramienta Rectángulo Redondeado (U). Como puedes ver en la siguiente imagen añadí un suave degradé también a la caja. Puedes hacerlo haciendo CTRL-click sobre la capa de la caja para seleccionar sus píxeles, yendo a Selección > Modificar > Contraer y contrayendo 1px, y después en una nueva capa dibujando un Degradado Radial a partir de una versión más clara del color oscuro y desvaneciéndolo a transparente.

Como mencioné anteriormente, este diseño tiene algo de web2: es limpio y sencillo, con algunos degradés y es bastante despejado. Algunos diseñadores deciden alejarse de las tendencias, a mí personalmente no me importa usar lo que está de moda siempre y cuando se ajuste mi propósito. En este caso quería un diseño limpio que no interfiriera con el contenido pero que proveyera un entorno bonito. De todos modos, realmente todo es muy subjetivo.



Paso 4

El lienzo que estoy usando aquí es de más o menos 1100 px de ancho x 1400 px de alto. En realidad todo el contenido está dentro de los 1000 px, por lo que se podrá ver en una pantalla de 1024 x 768. Me gusta tener un lienzo más amplio para poder prever lo que ocurre cuando la pantalla tiene una mayor resolución.

En este paso he añadido las bases de mi encabezado, es decir, una barra oscura en la parte superior, un tono más oscuro del color de fondo como mi barra de menú, una línea de 1px para cerrar la barra de menú y un pequeño texto debajo de mi logo (en News Gothic Condensed otra vez).

Hay dos cosas para tener en cuenta:

  1. Siempre es bueno utilizar matices de tu paleta de colores. Aquí tengo un color de fondo, y el de la barra de menú, de los elementos del menú y del texto debajo del logo son todos variantes más oscuras de ese color. Esto da una sensación agradable, suave, no chocante. Por supuesto que si solo usamos matices se torna bastante aburrido, es por eso que después introducimos el color de realce. Estilos de diseño diferentes requerirán más variación en color, pero en nuestro caso queremos más que nada tonalidades y matices que combinen, con un solo color que resalte.
  2. Además es bueno reflejar tu color a lo largo del diseño. Por eso tenemos un color de fondo beige y después el color más oscuro aparece en tres puntos: el logo, la barra superior y el enlace de menú resaltado. Esto crea balance visual y alineación entre los tres elementos. El balance es importante.


Paso 5

Aquí añadimos por primera vez nuestro color de realce. Es una línea muy sutil de 1px a lo largo de la parte superior. Luego, a medida que agreguemos más elementos, el color de realce aparecerá otra vez en diferentes lugares y aunará los elementos en un único diseño, eficiente y bien organizado. Porque no hay más en este diseño que elementos bien colocados y color, es muy importante pensar bien la paleta de colores.



Paso 6

Ahora la página se ve un poco plana, así que añadí una capa por encima de la capa de fondo. Luego dibujé un Degradado Radial, pasando de mi color beige/gris oscuro a transparente, y establecí esa capa en Sobreexponer Color para iluminar el fondo. Porque la barra de menú está dibujada con transparencia, el efecto aclarante se muestra también a través de la barra de menú.

Es importante recordar, sin embargo, que más tarde necesitas construir este diseño en HTML. Por eso notarás que al momento de llegar a los bordes del área visible de 1000 px volvemos a los colores monotonos. Esto significa que más adelante voy a poder crear una imagen única y utilizarla como imagen de fondo en CSS. Luego voy a tener otra imagen de fondo con el área iluminada que será una imagen de fondo en el cuerpo principal del contenido.

Es importante saber sobre la construcción de sitios para que puedas diseñar de tal manera que te permita evitar complicaciones más adelante. Creo que esto se logra con la experiencia y aprendiendo qué decisiones de diseño pueden hacer tu vida difícil más tarde. Aquí, tener un fondo que pueda repetirse fácilmente fuera del área visible de 1000px hará tu vida mucho más fácil.



Paso 7

Lo que sigue es empezar a añadir el primer bloque de contenido, en blanco. Aquí utilicé un borde exterior de 1px de una versión más oscura del color de fondo, luego un borde interior de 1px y finalmente un suave degradé beige hacia abajo. Este estilo combina con mi logo anterior. Además, por tener el contorno más oscuro seguido por el contorno interior más claro, le damos definición a la página. La nitidez se logra con el contraste, es decir, oscuro contra claro.

Personalmente creo que la nitidez es realmente vital en el diseño web. Nada me molesta más que la falta de atención a los detalles para hacer que las cosas sean claras y nítidas.



Paso 8

Ahora añado algún contenido simulado aquí. Porque este texto debe ser texto HTML es importante elegir con cuidado tus fuentes. No hay nada más deprimente que elegir unas hermosas fuentes para luego recordar que no son fuentes por defecto y que, por consiguiente, tu diseño se va a ver totalmente diferente a como imaginabas. He utilizado Helvetica para el titular en negrita y Arial para el texto.

En Photoshop es una buena idea configurar el Anti-Aliasing a "Nítido" para imitar cómo se verá el texto en el navegador. En los viejos tiempos solía usar "Ninguno", pero estos días la mayoría de PCs y Macs usan cosas ingeniosas como ClearType para hacer que las fuentes se vean más suaves.

Una vez más, ten en cuenta que los enlaces del texto que está debajo del logo utilizan el color azul, como en la línea de 1px del encabezado que añadimos anteriormente.



Paso 9

A continuación puse un pequeño elemento de diseño en forma de una franja de mensaje a lo largo de la parte superior derecha de mi caja. En un diseño sencillo como éste (que es sobre todo líneas simples y cajas), es bueno tener uno o dos elementos que destaquen. En este caso vamos a usar nuestro color de realce combinado con un ángulo de 45 grados para crear un elemento interesante que se vea increíble.

Así que dibujamos un rectángulo sobre el que añadimos algo de texto. Luego utilicé la herramienta Sobreexponer (O) para aclarar la parte media y agregué un estilo de capa para dar al texto un poco de sombra. A continuación, seleccioné ambas capas juntas y dí CTRL-T para transformar y las giré 45 grados.



Paso 10

Después de colocar la franja sobre la caja, recorté los bordes como se muestra. Ahora te darás cuenta de que podríamos haberla colocado alineada con la caja, pero pensé que se veía bien que pareciera que la está envolviendo, por lo que está más o menos 4px fuera de la caja.



Paso 11

A continuación seleccioné los píxeles manualmente en el patrón que ves a continuación, creé una capa debajo de la capa de la franja del mensaje y dibujé en un color azul más oscuro. Es más oscuro para que parezca la parte trasera de la franja del mensaje, y te darás cuenta de que lo hice así para que sea más oscuro hacia la derecha donde se encuentra en una sombra simulada.



Paso 12

Después dupliqué la cinta, la roté 90 grados y la coloqué también en el lado derecho de la caja, como se muestra. Y voilá, ¡nuestro elemento de diseño!



Paso 13

A continuación creé algunos elementos más. No hay mucho nuevo aquí. Básicamente reutilicé los mismos elementos de diseño —el mismo estilo de texto, la misma franja de mensaje, las mismas cajas— y los puse donde quería que estuviera el contenido.



Paso 14

Luego agregué una zona de pie de página. No es un pie de página muy excitante, pero utiliza los mismos colores que la barra superior para reflejarlos otra vez y, en este caso, cerrar el diseño.



Paso 15

Ahora, porque estoy creando un tema para WordPress, decidí crear también una versión de mi logo que pudiera ser creada solo con texto. Puedes ver a continuación y en el componente HTML de este tutorial que crearemos la caja para el "logo".



Paso 16

En este punto les voy a mostrar mi paleta de capas. No soy gran cosa nombrando capas (porque soy perezoso), pero me gusta agrupar las capas. Aquí el diseño para el logo de texto vs. el logo diseñado, el blog vs. el portfolio y la página interna están en el mismo archivo PSD, solamente en conjuntos de capas diferentes. Así puedo activarlos y desactivarlos, y probar diferentes combinaciones. Esto es útil porque si de repente decido mover el logo 2px a la izquierda, no tengo que abrir tres archivos y moverlo 2px en cada una o correr el riesgo de tener discrepancias. También es bonito y ordenado, y mirarlo me hace sentir bien por dentro.



Paso 17

Ahora debo señalar que en la práctica no trabajé este diseño exactamente como lo mostré en el tutorial. De hecho mi primera maqueta se parecía más a la imagen que se muestra a continuación.

Luego desactivé sin querer la capa marrón oscura y me pareció que se veía mejor en el color más claro. Esto es lo que llamo un accidente feliz. Desearía poder decir que fui lo suficientemente listo como para ser responsable de toda la meticulosidad de mi trabajo, pero francamente la mitad de ella fue pura suerte.

En cualquier caso, cuando terminé mi diseño recordé la primera maqueta y pensé que el diseño se veía bastante bien con un color oscuro. Así que ¿por qué no hacer una versión oscura y crear una opción para intercambiar hojas de estilo?, ¡eso sería elegante!



Paso 18

Creé una nueva copia de mi archivo de diseño y cambié el fondo a marrón oscuro. Por suerte no necesité cambiar mucho más, puse el logo en negro para que siguiera destacando, también ajusté algunos otros colores para hacer que el diseño tenga sentido. No es tan lindo como el original, pero es una buena adición a la familia.



Conclusiones

Como mencioné al principio de este tutorial, no se trata tanto de dominar la técnica de Photoshop. La realidad es que el diseño web utiliza a menudo técnicas muy básicas como rellenar bloques de color. Este diseño se basa en elegir colores y matices, tipografías y luego decidir cómo colocar todo. Espero que hayas aprendido algo en este proceso.


Construyendo en HTML

Por supuesto, diseñar un sitio web en Photoshop es solo una parte del trabajo de diseñar una web. El siguiente paso es llevar el diseño a HTML.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.