Cómo crear un encabezado sitio web profesional en photoshop

Vídeo: como diseñar una pagina web FLAT DESIGN en photoshop PARTE 1

Banners son generalmente delgada y amplia, tal como 900 por 150 píxeles.

Banners son generalmente delgada y amplia, tal como 900 por 150 píxeles.

Photoshop CC 2014 es una herramienta ideal para el diseño de imágenes profesionales para su sitio web, incluyendo banners. Al diseñar su primera bandera, mantener el diseño simple por lo que el gráfico no está sobrecargado con demasiada información visual. Si su empresa tiene colores de la compañía y una fuente de la empresa, que sin duda puede utilizar los de su bandera.

Crear una nueva imagen de 900 por 150 píxeles.
1

Lanzar Photoshop. prensa "Ctrl-N" o seleccione "Nuevo" en el menú Archivo. En el cuadro de diálogo, especifique la altura y anchura para su bandera, como por ejemplo 900 píxeles de ancho y 150 píxeles de alto. Hacer clic "DE ACUERDO."

Añadir un rectángulo sólido como fondo si lo desea.
2

Seleccionar un color de fondo sólido para el banner, si lo desea. Para ello, haga clic en el "Color de primer plano" icono en la barra de herramientas y seleccione un color, a continuación, haga clic en el "Herramienta rectangular" y se arrastra a través de toda la bandera. En este tutorial, sin embargo, vamos a ser la superposición de dos gradientes en lugar de utilizar un fondo sólido.

Herramientas preestablecidas gradiente están disponibles en la barra de opciones.
3

Haga clic en el "Gradiente" herramienta en la caja de herramientas. Haga clic en el "Llenar" menú en la barra de opciones y seleccionar el gradiente de blanco y negro a partir de los valores predeterminados disponibles. Haga clic en cualquier lugar por encima de la bandera en el lienzo y arrastrar el cursor debajo de la bandera. Suelte el botón del ratón para aplicar el gradiente.

A Tahoma Bold blanco fija en 48 pt.
4

Haga clic en el "Herramienta de texto horizontal" en la caja de herramientas. Arrastrar el cursor sobre el banner para crear un cuadro de texto. Utilice los menús de la barra de opciones para especificar un tipo de letra, tamaño de fuente y color. Arrastre el cuadro de texto para que quede centrado en el lado izquierdo de la bandera.

Seleccione la cabecera`s file in the Duplicate Layer window`s Document menu.
5

Seleccionar "Abierto" en el menú Archivo y seleccione una imagen en el ordenador que desea utilizar para su bandera, como un logotipo de la empresa, una imagen de sí mismo o de un producto que está vendiendo. Cuando la imagen se abre, seleccione "Duplicar" desde el menú Capa. Cambiar el destino a su archivo de cabecera, que se llama "Untitled-1" a menos que ya guardó. Hacer clic "DE ACUERDO" añadir la imagen como una nueva capa a su bandera.

Cambiar el tamaño de la imagen para el banner.
6

Seleccionar "Transformar" en el menú Edición y haga clic "Escala." En la mayoría de los casos, toda la imagen 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 su tamaño para su bandera. Mantenga pulsada la "Cambio" tecla mientras arrastra para bloquear su relación de aspecto. prensa "Entrar." Arrastre la imagen por lo que es en el lado derecho de la bandera.

Seleccionar un color de la imagen utilizando el selector de color.
7

Haga clic en el "Color de primer plano" icono en la barra de herramientas para abrir el Selector de color. Haga clic en cualquier lugar en el lado derecho de la pancarta para que coincida con su color en el Selector de color y haga clic "DE ACUERDO."

Añadir un rectángulo de gradiente a la bandera.
8

Selecciona el "Herramienta rectangular" de la Caja de Herramientas. Haga clic en el "Llenar" menú y luego seleccione la "Gradiente" icono situado en la parte superior de las opciones del menú. Arrastrar el cursor a través de la bandera desde el interior lado izquierdo de la imagen, todo el camino hasta el borde izquierdo de la bandera. El hace un rectángulo con un gradiente usando el color que coincidentes de la imagen.

Reducir el rectángulo`s opacity to about 50 percent.
9

localizar el "rectángulo 1" capa en el panel Capas, que es la capa que contiene el rectángulo gradiente que acaba de añadir. Arrastrar esta capa hacia abajo para hacer que la tercera capa de la parte superior - por debajo "capa 1" y la capa que contiene el texto. Haga clic en el "Opacidad" menú en la parte superior del panel Capas y arrastre el control deslizante de manera que es alrededor del 50 por ciento. Haciendo que el gradiente de la parte superior semitransparente que permite fusionar con el gradiente por debajo de ella, la creación de un fondo rico.

El estilo graba en relieve se fija en una profundidad de
10

Seleccione la capa que contiene el texto en el panel Capas. Haga clic en el "Capa" menú, seleccione "Estilo de capa" y haga clic "Bisel & Realzar." Asegúrese de que el menú Estilo se fija en "Realzar" y arrastre el "Profundidad" deslizador hacia la izquierda - en torno "225" ciento - para añadir solamente un poco de este efecto al texto.

El estilo de raso con una
11

Haga clic en el "Satín" opción en la ventana Estilo de capa. Para este estilo, use un modo de fusión de "Multiplicar" y reducir la opacidad a alrededor "15" por ciento. Esto combina el estilo de satén con el estilo de relieve. Ajustar la configuración si lo desea y haga clic "DE ACUERDO."

Una imagen JPEG con una calidad de 77 por ciento.
12

Guardar la imagen como un banner optimizado en la Web mediante la selección "Guardar para Web" en el menú Archivo. Seleccionar "JPEG" en el menú Formato y utilizar 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 por cualquier navegador Web, sin sacrificar la calidad de la imagen. Hacer clic "Salvar" y seleccione una ubicación para guardar el archivo en su ordenador. Después de cerrar Photoshop, añadir el archivo a su página Web.

referencias

  • enlazar CC Ayuda Adobe Photoshop: Adobe
  • enlazar Ayuda para Adobe Photoshop: Creación de texto
  • enlazar Ayuda para Adobe Photoshop: Los gradientes
  • enlazar Adobe: Photoshop CC: guardar una foto en formato JPEG
  • enlazar Ayuda para Adobe Photoshop: opacidad de la capa de mezcla y

Vídeo: Maquetación Web con Adobe Photoshop

Sobre el Autor

Un autor publicado y orador profesional, David Weedmark ha asesorado a empresas y gobiernos en la tecnología, los medios de comunicación y marketing de más de 20 años. Ha sido profesor de ciencias informáticas en la Universidad de Algonquin, ha comenzado a tres empresas de éxito, y ha escrito cientos de artículos para periódicos y revistas de todo el Canadá y los Estados Unidos.

Artículos Relacionados