En este tutorial de diseño web de Photoshop, vamos a diseñar un diseño web impresionante, limpio y profesional en Photoshop. El diseño que estamos haciendo en este tutorial se puede utilizar como diseño de sitio web personal o corporativo. Este diseño es bastante fácil de usar, por lo que debería ser ideal para la reputación de su sitio.Actualización
: Esta es la primera parte de una serie de dos partes que le enseñará cómo crear el diseño en Photoshop y, a continuación, cómo convertirlo en un diseño web HTML compatible con los estándares (X).
La Serie «Diseño Web Limpio y Profesional»
- Parte 1: Crear un Diseño Web Limpio y Profesional en Photoshop
- Parte 2: Codificar un Diseño Web Limpio y Profesional
Vista previa final
Eche un vistazo al diseño que crearemos en este tutorial. Puede ver la vista previa final de la imagen a continuación o haga clic aquí para una versión a tamaño completo. 
Prepare su documento de Photoshop
1 Cree un nuevo documento en Photoshop (Ctrl / Cmd + N) con la configuración de la siguiente imagen.
Establezca la configuración de unidades y reglas
2 Asegúrese de que está trabajando en unidades de píxeles, que es la unidad fija estándar para el diseño web.
Configure los siguientes ajustes para sus Reglas desde la ventana de diálogo de preferencias (Ctrl / Cmd + K); haga clic en Unidades & Reglas y asegúrese de que tiene todo configurado como se muestra en la siguiente figura. 
Agregue guías para designar el área de contenido
3 Active Reglas de Photoshop desde la vista > Reglas.
Alterne la visibilidad de las reglas pulsando «Ctrl / Cmd + R».
También abra el panel de información desde la ventana > Info (tecla de método abreviado: F8).
El panel de información proporciona información útil en función de la herramienta seleccionada.
Pulsando «M», elija la Herramienta Marquesina Rectangular y cree una caja de 120 píxeles de ancho desde la esquina izquierda del lienzo. Puede ajustar el tamaño mirando en el panel de información mientras hace la selección.
Ahora haga clic en la regla izquierda y arrastre una guía a la derecha de la selección de marquesina como se muestra en la imagen de abajo. 
4 Mueva esta selección al borde derecho del lienzo. Asigne otra guía al lado izquierdo de la selección.
Su lienzo ahora debería tener este aspecto: 
Creando el logotipo
5 Ahora vamos a crear el logotipo para nuestro sitio web.
El logotipo va a ser muy simple y tendrá un efecto de degradado de color. Cree un nuevo grupo (Capa > Nuevo Grupo >) y llámelo «logotipo».
6 Seleccione la Herramienta de tipo horizontal (T) y escriba «APLASTAR» (o el nombre de su sitio web) en mayúsculas.
7 Luego, en el panel de caracteres, establezca la fuente en Arial, el estilo en Negrita y el tamaño en 42pt. También establezca la opción de método de suavizado en Nitidez y use el color # 101112.
También puede establecer estas opciones en la barra de opciones cuando la herramienta Tipo es la herramienta activa. 
8 Haga doble clic para abrir el cuadro de diálogo Estilo de capa. Seleccione Superposición de degradados, haga clic en el Editor de degradados y utilice la configuración que se muestra a continuación.
9 Coloque la capa de tipo «APLASTANTE» a una distancia de 35px desde la parte superior y 0px desde la guía izquierda. Puede hacer esto con precisión utilizando la herramienta Mover (V) y las teclas de flecha. Duplicar esta capa de tipo (Capa > Duplicar capa).
Mueva la capa duplicada justo al lado de la palabra «APLASTANTE» y edite el texto a «Dzine». Repita los pasos 6, 7, 8 pero use diferentes colores degradados (Parada de color izquierda: #b27625, parada de color derecha: #e5ad27) para la palabra «Dzine».
10 Seleccione la herramienta de tipo horizontal (T) y agregue una línea de etiqueta debajo del logotipo con los siguientes ajustes. 
11 El logotipo final debe parecerse a la imagen de abajo.
Para activar / desactivar las guías, vaya a Ver > Mostrar > Cuadrícula o utilice el acceso directo Ctrl / Cmd + ; 
Crear la barra de navegación
12 Crear un nuevo grupo y nombrarlo «navegación», debe estar encima del grupo» logotipo». Arrastre una guía desde la regla superior, 150px por debajo del borde superior del lienzo. Seleccione la herramienta Rectángulo (U) y dibuje una línea horizontal de 4 píxeles de altura con un color de #e3ab27, a lo largo del lienzo.
13 Agregue enlaces de navegación a 12px de altura desde esta línea horizontal y 20px a la derecha de la guía izquierda.
Seleccione la herramienta Rectángulo redondeado (U) y dibuje un cuadro con un tamaño de 72 x 35 píxeles. Mueva esta capa debajo de los enlaces de texto y nombre la capa «hover».
Enderece las esquinas redondeadas inferiores con la herramienta Convertir punto. Mueva los lados de los bordes desiguales por debajo con un margen de 8 px para que los bordes sean iguales a otros bordes interiores en la parte inferior.
Haga doble clic en la capa «hover» para abrir el cuadro de diálogo Estilo de capa y agregar colores degradados (Parada de color izquierda: #e5ad27, parada de color derecha: #b27625). Seleccione la herramienta Tipo Horizontal (T), seleccione el texto, «Inicio» y cambie el color a #ffffff (blanco). 
Crear la sección «llámanos»
14 A continuación vamos a crear la sección» llámanos » en la parte superior derecha de nuestro diseño (exactamente en el lado opuesto del logotipo).
Descargue este icono de teléfono y colóquelo cerca de la guía correcta. Nombre a esta capa «icono del teléfono». Seleccione la Herramienta Tipo Horizontal (T).
Agregue un número de teléfono a la izquierda del icono del teléfono usando la fuente Arial, con el tamaño establecido en 20pt y el color #292929.
Agregue texto relacionado debajo del número de teléfono con fuente Arial, en negrita, con un tamaño de 11pt y un color de #595959. 
Crear el encabezado
15 Ahora vamos a crear la sección de encabezado. Cree un nuevo grupo y asígnele el nombre de «encabezado».
16 Seleccione la herramienta Rectángulo (U) y cree una forma de rectángulo con el tamaño de 1200px por 440px.
Coloque este rectángulo a una distancia de 1 px debajo de la barra de navegación y nombre esta capa «encabezado bg». Haga doble clic en la capa» encabezado bg», seleccione el estilo de capa de superposición de degradado y tenga estos dos colores en el Editor de degradados (Parada de color izquierda: #2e2226, parada de color derecha: #7a7556).
Vea la imagen de abajo para ver la posición del rectángulo y los detalles de colores. 
17 Cree otro rectángulo desde la herramienta Rectángulo (U) con un tamaño de 960px por 360px.
Coloque este rectángulo a una distancia de 40px desde la parte superior de la capa» encabezado bg » y 0px desde la guía izquierda. Nombre a esta capa «contenedor de encabezado». Vista previa a continuación de lo que hemos hecho hasta ahora con el diseño.
Crear la sección «proyecto destacado»
18 A continuación crearemos la sección proyecto destacado. Cree un nuevo grupo dentro del grupo de encabezado y asígnele el nombre «fp». Seleccione la herramienta Rectángulo (U) y cree un rectángulo con un tamaño de 630px por 340px a una distancia de 10px desde la parte superior y la izquierda del contenedor de encabezado.
Dale a esta capa el color #000000 y nómbrala «contenedor fp». 
19 Abra una imagen en Photoshop para colocarla aquí como su proyecto destacado. Vaya a Seleccionar > Todo (Ctrl / Cmd + A) y, a continuación, edite > Copiar (Ctrl/Cmd + C).
Vuelve a nuestro diseño web.
Cree una nueva capa sobre la capa» contenedor fp » y vaya a Editar > Pegar (Ctrl/Cmd + V) para pegar la imagen de su proyecto destacado. Cambie el nombre de esta capa a «imagen fp». Haga clic con el botón derecho en la capa «imagen fp» y seleccione Crear máscara de recorte.
Ahora la imagen es visible solo dentro del rectángulo («contenedor fp»).
Realice ajustes para que la imagen de su proyecto destacado sea similar a la que se muestra a continuación. 
20 Vaya a Editar > Transformar > Escala (Ctrl / Cmd + T). En la barra de opciones, haga clic en el cuadro de rotación y escriba -4 y presione entrar dos veces para ajustar el ángulo.
Permanezca en la misma capa («imagen fp») y seleccione Luminosidad como modo de fusión de esta capa. 
21 A continuación, vamos a crear la barra de título y descripción para la imagen del proyecto destacado. Seleccione la herramienta Rectángulo (U) y cree una forma de rectángulo con un tamaño de 630 x 90 píxeles utilizando el color #161718.
Cambie la opacidad de esta capa al 90% y llámela «title bg». Coloque este rectángulo como se muestra en la imagen de abajo. 
22 Cree otro rectángulo con el tamaño de 630px por 1px utilizando el color # 9c9c9c y llámelo «línea horizontal de título».
Coloque este rectángulo en el borde superior del contenido de la capa» título bg».
23 Agregue un título y una descripción dentro del rectángulo que creamos en el paso 21, utilizando la siguiente configuración para título y descripción.
Para el título:
- fuente: Arial, color: # ffffff, tamaño: 25pt y opción de método de suavizado: Sharp
Para la descripción:
- fuente: Arial, color: #a4a4a4, tamaño: 12pt y opción de método de suavizado: Ninguno
Crear la sección «cita rápida»
24 Crear otro grupo dentro del grupo de encabezado y nombrarlo «cita rápida». Seleccione la herramienta Rectángulo (U) y cree un rectángulo con un tamaño de 300 x 340 píxeles. Coloque este rectángulo a una distancia de 10 píxeles a la derecha de la sección del proyecto destacado y nómbrelo «contenedor qq».
25 Copiaremos un Estilo de capa de otra capa que creamos en un paso anterior.
Vaya dentro del grupo» navegación», haga clic con el botón derecho en la capa» hover», seleccione Copiar Estilo de capa, vuelva a la capa» contenedor qq», haga clic con el botón derecho y seleccione Pegar Estilo de capa. Ahora tenemos el mismo Estilo de capa de la capa «hover» para nuestro «contenedor qq». 
26 Seleccione la Herramienta Tipo Horizontal (T).
Escriba «Quick Quote» dentro de «contenedor qq» a una distancia de 20 px de los bordes superior e izquierdo de la caja contenedora. Establezca la familia de fuentes en Trebuchet MS (o una fuente segura para la web de su preferencia) con el color de blanco (#ffffff) y la opción de método de suavizado establecida en Sostenido. Vamos a usar la Herramienta Rectángulo Redondeado (U) para crear tres campos de formulario.
Seleccione la herramienta Rectángulo redondeado (U) y establezca el radio en 3px. A continuación, cree dos rectángulos redondeados con el tamaño de 260px por 35px usando el color blanco (#ffffff). A continuación, nombre las capas de forma como «field1» y «field2» respectivamente.
Cree el tercer rectángulo redondeado con el tamaño de 260px por 75px usando un color blanco (#ffffff) y llámelo «field3». Seleccione la herramienta Tipo Horizontal (T) y cree etiquetas para cada campo de formulario. 
27 Seleccione la Herramienta Rectángulo Redondeado (U) y cree una caja de 80 px por 35 px y llámela «enviar btn».
28 Haga doble clic en la capa para abrir la ventana de diálogo Estilos de capa y marque la casilla Superposición de degradado de la izquierda.
Haga clic en el Editor de degradados y cambie los colores del degradado como se muestra a continuación. 
29 Seleccione la herramienta de Tipo Horizontal (T) y escriba «Enviar» utilizando la fuente Arial, el estilo en negrita y el tamaño a 13 puntos. Seleccione ambas capas en el panel Capas («enviar btn» y «Enviar texto»).
30 Elija la herramienta Mover (V) del panel Herramientas y haga clic en Alinear centros verticales y Alinear centros horizontales de la barra de opciones.
(Alternativamente, puede obtener el mismo resultado yendo a Capa > Alinear > Centros verticales y Capa > Alinear > Centros horizontales). 
Crear el área de contenido principal
31 Crear un nuevo grupo y nombrarlo «contenido». Seleccione la herramienta Rectángulo (U).
Cree un rectángulo de 300px por 175px y llámelo «c01». Coloque esta capa 30px debajo del encabezado y 0px desde la guía izquierda. Haga doble clic en la capa y utilice la configuración de la siguiente imagen.
32 Vamos a agregar contenido a esta caja ahora. Seleccione la herramienta de Tipo Horizontal (T) y agregue el texto, «Acerca de SmashingDzine». Haga una selección de la palabra» Acerca de » usando la Herramienta de Tipo horizontal (T), y luego cambie su color a #b47825.
Luego haga una selección de la palabra «Aplastante» y luego cambie el color a #2f2f2f. Agregue una pequeña descripción y un texto de enlace debajo del título. Se utilizaron las siguientes opciones para el título, la descripción y el texto del enlace.
(puede ajustar estas opciones según sea necesario). 
Para el Título:
- Fuente: Trebuchet MS, estilo: Normal, tamaño: 24pt, método de suavizado: Sharp
Para la Descripción:
- Fuente: Arial, estilo: Normal, tamaño: 12pt, método de suavizado: Ninguno, color: #767676
Para el texto del Enlace:
- Fuente: Arial, estilo: Negrita, tamaño: 13pt, método de suavizado: Ninguno, color: #252525, Subrayado
33 Agregaremos un cuadro cuadrado junto a la descripción ahora. Seleccione la herramienta Rectángulo (U) y el color #ffffff, mantenga pulsada la tecla Mayús para mantener las proporciones y cree un cuadrado con el tamaño 88px por 88px. Mueva este cuadrado a una distancia de 10 px desde la izquierda del rectángulo («c01»).
Nombre esta capa «borde». Haga doble clic en la capa para abrir la ventana de diálogo Estilo de capa y agregue un estilo de capa de trazo con la siguiente configuración: 
34 Cree otra caja con el tamaño de 82px por 82px y colóquela en el centro de la capa de» borde». Nombre esta capa «caja» y cambie el color de este cuadrado a #d5d5d5.
Seleccione todas las capas de este grupo (grupo «contenido»), vaya a Capa > Nuevo Grupo > de Capas (Ctrl/Cmd + G) y cambie el nombre de este nuevo grupo a»acerca de». 
Nota: La caja cuadrada gris interior es un soporte para colocar una imagen y se puede reemplazar por cualquier imagen de su elección.
35 Duplique el grupo «acerca de» (haga clic con el botón derecho en el grupo y seleccione Duplicar grupo) y llámelo «servicios». Haga clic con el botón derecho en el grupo «servicios» y seleccione Duplicar grupo de nuevo y asígnele el nombre de «cartera».
Ahora tenemos tres grupos («acerca de», «servicios»y » cartera»). Mueva el último grupo («cartera») a la guía derecha como se muestra a continuación. 
36 Seleccione los tres grupos en el panel Capas y, a continuación, vaya a Capa > Distribuir > Centros horizontales para espaciarlos por igual.
Haga clic aquí para ver la imagen a tamaño completo de la siguiente imagen. 
37 Cambie los títulos para el grupo» servicios «(centro) y el grupo» cartera » (derecha) como se muestra a continuación. (Puede cambiar estos títulos de acuerdo con sus requisitos.) 
Crear el pie de página
38 Crear un nuevo grupo y nombrarlo «pie de página».
Seleccione la herramienta Rectángulo (U) y cree un rectángulo con el tamaño de 1200px por 100px en la parte inferior de nuestro diseño de diseño. Nombre a esta capa «pie de página bg». Use el mismo estilo de superposición de degradado que la capa «encabezado bg» haciendo clic con el botón derecho en la capa «encabezado bg» y eligiendo Copiar Estilo de capa.
Vuelva al grupo de pie de página, haga clic con el botón derecho en la capa «pie de página bg» y seleccione Pegar Estilo de capa. 
39eleccione la herramienta de Tipo Horizontal (T) y agregue texto de copyright y enlaces de pie de página a la izquierda utilizando el Arial de fuente, tamaño de 12pt y un color gris (#dddddd). 
40 Vamos a agregar la sección de suscripción de correo electrónico a la derecha.
Cree un nuevo grupo dentro del grupo » pie de página «y asígnele el nombre de»suscribirse». Seleccione la herramienta Rectángulo redondeado (U) y cree un rectángulo de 85px por 35px. Nombre a esta capa «subscribe btn».
41 Repita el paso 26 para agregar los campos y etiquetas del formulario.
42 Seleccione la herramienta de tipo Horizontal (T) y escriba «Suscribirse» utilizando el Arial de fuente, el estilo establecido en Negrita y el tamaño a 13 puntos.
Seleccione ambas capas («subscribe btn «y» Subscribe text»).
43 Repita el paso 28 para crear el botón suscribirse.
44 Seleccione la herramienta Rectángulo redondeado (U) y establezca el radio en 3px. Cree un rectángulo redondeado con el tamaño 210px por 35px usando un color blanco (#ffffff) y nombre esta capa de forma como «campo de correo electrónico». Agregue una línea de texto encima de «campo de correo electrónico».
Resultado final
OK, eso es todo y hemos terminado. Aquí está el resultado final.
Haga clic en la imagen de abajo para ver el diseño a tamaño completo. Gracias por seguir junto con mi tutorial. Espero que todos hayan disfrutado y aprendido algo nuevo de este tutorial.
Amablemente deje sus comentarios a continuación y comparta sus pensamientos y opiniones, me encantaría escucharlos. También puede compartir este tutorial de diseño con sus amigos si cree que podría ser útil para ellos.
Descargar el archivo de origen
Puede descargar el archivo de Photoshop (PSD) de este tutorial desde el enlace de abajo como un archivo ZIP.
- clean-professional-weblayout (ZIP, 2.4 MB)
Resumen
Si decide utilizar este diseño, asegúrese de optimizar las imágenes para reducir el tiempo de carga. Esta decisión debería ser ideal para sitios pequeños, como uno para un campo de golf, porque es simple, fácil de usar y fácil de usar.
Contenido relacionado
- Cómo crear un Diseño de Blog Limpio con Photoshop
- Codificar una Web Limpia 2.Diseño Web de Estilo 0 de Photoshop
- Cree un diseño Web Elegante y Minimalista en Photoshop
Acerca del autor
Waheed Akhtar es un diseñador web independiente de Dubái, Emiratos Árabes Unidos. Es el fundador y editor de Boost Inspiration, donde muestra diferentes recursos creativos de Arte Digital, Diseño Gráfico, Ilustración, Fotografía y Tipografía para inspirarse. Puede comunicarse con él a través de Twitter o Facebook.