En este tutorial, lo guiaré a través de los pasos necesarios para diseñar un sitio web de cartera para mostrar sus servicios de diseño.
Usaremos Photoshop y el sistema 960 Grid.
Con algunas texturas sutiles y estilos de capas, verá cómo los detalles más pequeños pueden funcionar para darle a su sitio web de cartera una apariencia pulida.
Aquí hay una vista previa de lo que vamos a crear:
Ícono de Twitter creado por mfayaz
En este tutorial usaremos el Sistema de cuadrícula 960 para organizar y organizar los elementos de nuestro diseño web. Antes de que comencemos, descargar el sistema de cuadrícula en tu ordenador.
Descomprima el archivo que descargó, vaya a la carpeta «plantillas» y luego vaya a la carpeta «photoshop». Encontrará tres archivos .PSD. Cada uno de estos archivos contiene una cuadrícula con 12, 16 y 24 columnas.
Los archivos .PSD tienen algunas guías ya configuradas, que serán muy útiles. Para activar las guías, vaya a Ver > Mostrar > Guías, o use el atajo Ctrl/Cmd + ;.
Durante este tutorial, deberá crear formas con dimensiones específicas. Para ver el tamaño exacto de una forma o selección mientras la crea, abra el Panel de información yendo a Ventana > Información. El ancho y el alto de sus formas y selecciones se mostrarán en este panel.
Abra el archivo «960_grid_12_col.psd» en Photoshop. Luego ve a Edición > Tamaño del lienzo y establece el ancho en 1200 px y el alto en alrededor de 1600 px. Puede ajustar la altura más adelante para que su diseño web se ajuste a su documento.
Para agregar una sensación de profundidad, le daremos al diseño un fondo sutilmente texturizado. En lugar de copiar y pegar una textura de resolución completa en el documento principal, reduciremos el tamaño del archivo creando un patrón que se puede implementar tanto horizontal como verticalmente en el diseño. Entonces, comencemos a crear un nuevo documento de 500 × 500 píxeles en Photoshop. Asegúrese de configurar 72 píxeles/pulgada como resolución, ya que es la resolución ideal para imágenes destinadas a la web.
Rellena el fondo con el azul más claro de la paleta de colores (#d5e2e7)
He elegido este textura de papel envejecido por stock.xchng para el tutorial. Pegue la textura en el documento bg_texture y realice los siguientes pasos:
El resultado es sutil, pero lo suficiente para dar ese sentido adicional de carácter al diseño. Ahora puede ir a Editar> Definir patrón y darle un título apropiado.
En nuestro documento principal, aplicaremos este patrón. Seleccione la capa de fondo y vaya a Editar>Rellenar y elija el patrón de fondo.
Cree un nuevo grupo y asígnele el nombre «Encabezado». Selecciona la Herramienta Rectángulo (U) y crea un rectángulo con las dimensiones 1200px por 150px y el color #404448. Nombra esta capa «header bg». Haga clic con el botón derecho en esta capa y seleccione Convertir en objeto inteligente. Luego vaya a Filtro> Ruido> Agregar ruido y use la configuración de la siguiente imagen.
Agregue el nombre de su estudio de diseño usando la herramienta Tipo (T) en el lado izquierdo del encabezado. He usado la fuente Steinem Bold Italic con el tamaño de 90pt. Activa las guías (Ctrl/Cmd + 😉 para ayudarte a posicionar esta capa como ves en la imagen de abajo.
Una vez terminado de colocar el logo, podemos añadir un menú en la parte superior derecha. Usé Myriad Pro y un tamaño de fuente de 15 puntos. También le di a cada enlace una ligera sombra paralela para resaltarlo contra el fondo.
Dibujo un rectángulo para darle a ‘Inicio’ su propia selección. Para resaltar la página seleccionada, aplico un estilo de botón a la selección actual. Aplique el estilo a continuación haciendo doble clic en la forma del botón en el panel de capas para que aparezca el cuadro de diálogo de estilo de capa. Aplique estos estilos a la Sombra interior, así como un Trazo de 1 px (# 42454a) al exterior del rectángulo.
Para agregar una dimensión sutil, incluí un borde #fffff de 1 px debajo del encabezado con la herramienta Línea.
Ahora es el momento del eslogan. Dado que el eslogan es una de las primeras cosas que verá un visitante, le conviene incluir información importante sobre su sitio y servicios.
Usé Chunk Five (texto superior) y Gibson (texto inferior) para el lema. Hacer que la cuadrícula sea visible ayudará con la colocación.
Para separar el eslogan de la sección del portafolio, crearemos un separador. Cree un nuevo grupo y asígnele el nombre «separadores». Seleccione la herramienta Línea (U) y cree una línea vertical desde la parte superior del rectángulo redondeado hasta la parte inferior. Establezca el color en #ffffff y nombre esta capa «línea 1px».
Duplica esta capa (haz clic derecho sobre ella y selecciona Duplicar). Cambia el color de la nueva línea a #abb0b3. Seleccione la herramienta Mover (V) y mueva esta capa un píxel hacia abajo.
Agregue una máscara al grupo «separadores» (Capa> Máscara de capa> Revelar todo). Luego seleccione la herramienta Degradado (G), mantenga presionada la tecla Mayús y arrastre un degradado de negro a transparente en el lado izquierdo de su separador para que desaparezca. Repetir en el lado derecho. Deberías terminar con algo como esto:
¡Felicitaciones! ¡Estás a mitad de camino!
Haga clic aquí para la Parte 2 de este tutorial
