Cómo se crea un diseño web profesional en Photoshop

Cómo se crea un diseño web profesional en Photoshop

Diseñar diseños web limpios y funcionales con buen aspecto es una parte esencial de la vida de los diseñadores web. En este tutorial, crearemos un diseño web limpio y profesional a Photoshop desde cero. A lo largo del camino, podrá aprender métodos útiles para crear diseños. Así que empiece!

Index
  1. Vista previa de los resultados finales
  2. Cree un tutorial de Photoshop de diseño web profesional
    1. recursos
    2. Paso 1: maqueta
    3. Paso 2: configure el lienzo
    4. Paso 3: cree la cabecera
    5. Paso 4: Cree un patrón de textura

Vista previa de los resultados finales

plantilla de sitio web

Cree un tutorial de Photoshop de diseño web profesional

recursos

Paso 1: maqueta

Antes de empezar a diseñar, debemos planificar los requisitos, el aspecto y la funcionalidad. Después, tenemos que ajustar estas ideas a un diseño para ejecutarlas visualmente. Las maquetas y los marcos de alambre son muy útiles para crear diseños con mucha flexibilidad. Es una buena práctica y muy recomendable en la industria.

Junté el siguiente con sólo tonos grises. De esta manera, eliminamos el color de la escena en este momento. Para que podamos concentrarnos en el diseño en conjunto y evitar envolver los colores. Esto da mucha libertad para alterar y reordenar rápidamente las cosas. Una maqueta puede ser tan detallada como desee. Con este propósito voy con el siguiente. Sólo debe definir brevemente el diseño y que donde.

img (1ª)

Paso 2: configure el lienzo

Por lo tanto, tenemos una letra azul para nuestro diseño. En realidad, juntamos el diseño. Crearemos un diseño de ancho de 960 píxeles. Cree un documento nuevo 1200 x 1500.

img (1)

Se trata de un diseño de 960 píxeles de ancho, por lo que tenemos que definir el área de trabajo añadiendo pautas. pulse Ctrl + A para seleccionar todo el documento.

FILE Polaroid, la leyenda continúa con Polaroid Cube +

img (2)

Vaya a Seleccionar> Transforma la selección. Reduce la selección hasta 960 píxeles de ancho. Esta es el área de trabajo del diseño.

img (3)

Agregue líneas de guía en la selección.

img (4)

Tenemos que crear un poco de relleno entre el borde y el contenido que añadiremos más adelante. Con la selección activa de nuevo, elija Transform Selection. Cambie el tamaño de la selección a 920 píxeles de ancho. Esto significa 20 píxeles de relleno para banda que suman 40 píxeles de relleno.

img (5)

Agregue guías a la selección.

img (6)

Paso 3: cree la cabecera

Creamos la cabecera del diseño. Haga una selección de altura de 465 píxeles.

img (8)

Rellenar la selección con un valor de gris primero y luego utilice los estilos de capa para añadir colores y degradados. Siga esto durante todo el diseño para mantener una jerarquía visual.

img (9)

Agregar degradado a la cabecera. Haga doble clic en la miniatura de la capa. Seleccione Superposición de degradado. Crea el degradado de color siguiente. Utilice la configuración.

img (10)

Debería ser así.

img (11)

A continuación, hay que añadir un resaltado en la cabecera. Para crear una capa nueva, pulse Ctrl + Alt + Shift + N. Elija un pincel suave con un diámetro de 600 px. Elija el # 19535 por el color del pincel. Simplemente haga clic una vez en el centro de la cabecera.

img (12)

Haga una selección en la parte superior que tenga 110 píxeles de alto.

img (13)

Pulsa la tecla Supr para suprimir la porción seleccionada. Esto se ve a continuación.

img (14)

Reduce verticalmente pulsando Ctrl + T.

img (15)

Debemos asegurarnos de que el punto destacado esté perfectamente centrado en la cabecera. Seleccione capas, cabecera y seleccione y pulse «V» para cambiar a la herramienta Mover. En el panel de opciones, seleccione el botón Alinear los centros horizontales.

FILE How to make a duotone in Photoshop, for color classification »Wiki Ùtil

img (16)

Cree una capa nueva, dibuje una línea de resaltado de un píxel con la herramienta de lápiz con el color # 01bfd2.

img (17)

Esconda los bordes sin problemas utilizando una máscara de degradado. Elija la herramienta de degradado, cree el degradado siguiente al panel de opciones.

img (18)

Aplique el degradado anterior.

img (19)

Paso 4: Cree un patrón de textura

Ahora cree un patrón simple de verificación y aplique a la cabecera. Elija la herramienta de lápiz, configure el tamaño del pincel a 2 píxeles y añadir dos puntos que toquen las esquinas. Apague el fondo y seleccione los puntos. Seleccione Editar> Define patrón.

img (20)

Cree una capa nueva y colocarla debajo de la capa de resaltado. Seleccione el área que queremos aplicar el patrón. Pulse Mayús + F5 para cargar el cuadro de diálogo Rellenar. Elija el patrón que se acaba de crear. Y de acuerdo.

img (21)

La selección se llena con el patrón. Mírelo más de cerca.

img (23)

Mezclar el patrón sin problemas a la cabecera. Añada una máscara de capa a la capa de patrón. Elija un pincel suave y pintar con un pincel suave grande. Elija #ffffff para el color del pincel. Reduzca la opacidad del pincel a un 60% aproximadamente y pintar el. Si lo encuentra demasiado fuerte, ajuste la opacidad de la capa individualmente.

img (24)

Mezclado muy bien.

img (25)

Go up

We use our own and third party cookies to improve the user experience. More Informaticon