Saltar al contenido

Cómo crear un encabezado de sitio web profesional en Photoshop

julio 10, 2021
b302c89c 79d4 4ff0 8d4b 18e9c9a209a0

Photoshop CC 2014 es una herramienta ideal para diseñar imágenes profesionales para su sitio web, incluidos banners. Al diseñar su primer banner, mantenga el diseño simple para que el gráfico no se sobrecargue con demasiada información visual. Si su empresa tiene colores de la empresa y una fuente de la empresa, sin duda puede utilizarlos en su banner.

Paso 1

Crea una nueva imagen de 900 por 150 píxeles.

Inicie Photoshop. Presione “Ctrl-N” o seleccione “Nuevo” en el menú Archivo. En el cuadro de diálogo, especifique la altura y el ancho de su banner, como 900 píxeles de ancho y 150 píxeles de alto. Haga clic en Aceptar.”

Paso 2

Agregue un rectángulo sólido como fondo si lo desea.

Seleccione un color de fondo sólido para el banner si lo desea. Para hacer esto, haga clic en el icono “Color de primer plano” en la barra de herramientas y seleccione un color, luego haga clic en la “Herramienta Rectángulo” y arrástrelo por todo el banner. En este tutorial, sin embargo, superpondremos dos degradados en lugar de utilizar un fondo sólido.

Paso 3

Los ajustes preestablecidos de la herramienta de degradado están disponibles en la barra de opciones.

Haga clic en la herramienta “Degradado” en la Caja de herramientas. Haga clic en el menú “Rellenar” en la barra de opciones y seleccione el degradado en blanco y negro de los ajustes preestablecidos disponibles. Haga clic en cualquier lugar sobre el banner en el lienzo y arrastre el cursor debajo del banner. Suelta el botón del ratón para aplicar el degradado.

Paso 4

Una fuente Tahoma Bold blanca establecida en 48 pt.

Haga clic en la “Herramienta de texto horizontal” en la Caja de herramientas. Arrastre el cursor sobre el banner para crear un cuadro de texto. Utilice los menús de la barra de opciones para especificar una fuente, tamaño de fuente y color. Arrastre el cuadro de texto para que esté centrado en el lado izquierdo del banner.

Paso 5

Seleccione el archivo del encabezado en el menú Documento de la ventana Duplicar capa.

Seleccione “Abrir” en el menú Archivo y seleccione cualquier imagen en su computadora que desee utilizar para su banner, como el logotipo de una empresa, una foto de usted mismo o un producto que esté vendiendo. Cuando se abra la imagen, seleccione “Duplicar” en el menú Capa. Cambie el destino a su archivo de encabezado, que se llamaría “Sin título-1” a menos que ya lo haya guardado. Haga clic en “Aceptar” para agregar la imagen como una nueva capa a su banner.

Paso 6

Cambie el tamaño de la imagen del banner.

Seleccione “Transformar” en el menú Editar y luego haga clic en “Escalar”. En la mayoría de los casos, la imagen completa no será visible en el banner estrecho, pero su contorno es visible después de seleccionar “Escala”. Arrastre cualquier esquina del contorno de la imagen para cambiar el tamaño de su banner. Mantenga presionada la tecla “Shift” mientras arrastra para bloquear su relación de aspecto. Presiona “Enter”. Arrastre la imagen para que esté en el lado derecho del banner.

Paso 7

Seleccione un color de la imagen con el Selector de color.

Haga clic en el icono “Color de primer plano” en la barra de herramientas para abrir el Selector de color. Haga clic en cualquier lugar del lado derecho del banner para que coincida con su color en el selector de color y luego haga clic en “Aceptar”.

Paso 8

Agrega un rectángulo degradado al banner.

Seleccione la “Herramienta de rectángulo” de la Caja de herramientas. Haz clic en el menú “Rellenar” y luego selecciona el icono “Degradado” en la parte superior de las opciones del menú. Arrastre el cursor por el banner desde el interior del lado izquierdo de la imagen hasta el borde izquierdo del banner. El hace un rectángulo con un degradado usando el color que emparejó con la imagen.

Paso 9

Reduzca la opacidad del rectángulo a aproximadamente el 50 por ciento.

Busque la capa “Rectángulo 1” en el panel Capas, que es la capa que contiene el rectángulo degradado que acaba de agregar. Arrastre esta capa hacia abajo para convertirla en la tercera capa desde la parte superior, debajo de la “Capa 1” y la capa que contiene su texto. Haga clic en el menú “Opacidad” en la parte superior del panel Capas y arrastre el control deslizante para que sea aproximadamente el 50 por ciento. Hacer semitransparente el degradado superior le permite fusionarse con el degradado que se encuentra debajo, creando un fondo rico.

Paso 10

El estilo Emboss se establece a una profundidad de

Seleccione la capa que contiene su texto en el panel Capas. Haga clic en el menú “Capa”, seleccione “Estilo de capa” y luego haga clic en “Bisel y relieve”. Asegúrese de que el menú Estilo esté configurado en “Relieve” y arrastre el control deslizante “Profundidad” hacia la izquierda, alrededor del “225” por ciento, para agregar solo un poco de este efecto al texto.

Paso 11

El estilo satinado con un

Haga clic en la opción “Satinado” en la ventana Estilo de capa. Para este estilo, use un modo de fusión de “Multiplicar” y reduzca la opacidad a aproximadamente “15” por ciento. Esto combina el estilo satinado con el estilo de relieve. Ajuste la configuración si lo desea y haga clic en “Aceptar”.

Una imagen JPEG con una calidad del 77 por ciento.

Guarde la imagen como un banner optimizado para Web seleccionando “Guardar para Web” en el menú Archivo. Seleccione “JPEG” en el menú Formato y utilice una calidad de imagen de entre el 75 y el 80 por ciento. Esto crea una imagen con un tamaño de archivo pequeño, que se carga rápidamente con cualquier navegador web, sin sacrificar la calidad de la imagen. Haga clic en “Guardar” y seleccione una ubicación para almacenar el archivo en su computadora. Después de cerrar Photoshop, agregue el archivo a su página web.

close