Diseño de banner para principiantes en Photoshop

  • Autor Autor ramonjosegn
  • Fecha de inicio Fecha de inicio
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Hola chicos/as.

Este tutorial va a ser bastante sencillo pero me lo estaba solicitando el compañero [MENTION=161516]unaprendiz[/MENTION] que no tiene muchos conocimientos de Adobe Photoshop.

Espero que os guste.

PARTIMOS DE CERO PARA LLEGAR A ESTO:

banner-png.webp

Como siempre trataré de ser lo más breve y conciso y que el tutorial sirva para todo tipo de niveles de usuario.

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈
✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈


✈ PASO 1 - ✈✈✈✈✈✈✈✈✈✈✈✈

Necesitarás el programa ADOBE PHOTOSHOP

Puedes bajar una versión de demostración de la web oficial de Adobe.

Editor de fotos | Descarga Photoshop CC gratis
Editor de fotos | Descarga Photoshop CC gratis

banderola--paso--001.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 2 - ✈✈✈✈✈✈✈✈✈✈✈✈

Abrimos el programa ADOBE PHOTOSHOP

banderola--paso--002.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 3 - ✈✈✈✈✈✈✈✈✈✈✈✈

Si eres nuevo en Adobe Photoshop te recomiendo REORGANIZAR EL ESPACIO DE TRABAJO.

Para ello es tan simple como ir al menú VENTANA > ESPACIO DE TRABAJO > FOTOGRAFÍA (hay varios espacios pero el de fotografía puede servirnos perfectamente)

Esto organizará el escritorio de Adobe Photoshop para tener cierto orden.

banderola--paso--003.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 4 - ✈✈✈✈✈✈✈✈✈✈✈✈

Creamos un nuevo documento con dimensiones 851 pixeles x 315 pixeles. De esta forma podemos darle varios usos como usarlo de cabecera en nuestro sitio web o en un fanpage.

Vamos a la opción ARCHIVO > NUEVO

banderola--paso--004.webp

Le ponemos un nombre y escogemos en tamaños 851 de ancho (píxeles) y 315 de alto (píxeles).

Como la idea es usarlo en web el modo de color apropiado será RGB y la resolución de 72 píxeles por pulgada

Sólo sigue la captura de pantalla

banderola--paso--005.webp

Una vez ingresados los datos simplemente haz clic en OK y deberías tener un nuevo documento como el siguiente:

banderola--paso--006.webp

Te recomiendo guardarlo por si no puedes completar el tutorial ahora o hay un fallo en la computadora, algo nada excepcional con los altos consumos de memoria de Photoshop.

Cuando lo guardes asegúrate de que sea en formato PSD (nativo de Photoshop) y que las CAPAS ESTÁN ACTIVAS

banderola--paso--007.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 5 - ✈✈✈✈✈✈✈✈✈✈✈✈

A continuación lo que haremos será darle un color de fondo a nuestro documento. Le daremos un color femenino.

Haz clic en el selector de color de Adobe Photoshop en el selector de color

banderola--paso--008.webp

En el selector que se abrirá escoge un color rosado, morado o algún color que te agrade.

banderola--paso--009.webp

Una vez escogido tu color haz clic en OK.

Seleccionamos la herramienta BOTE DE PINTURA

banderola--paso--010.webp

Y hacemos clic sobre el lienzo para "verter" la pintura sobre éste

banderola--paso--011.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 6 - ✈✈✈✈✈✈✈✈✈✈✈✈

Creamos una CAPA NUEVA. La forma más rápido es haciendo clic en el icono de CAPA NUEVA

banderola--paso--011a.webp

Automáticamente esta capa debería quedar seleccionada

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 7 - ✈✈✈✈✈✈✈✈✈✈✈✈

Seleccionamos la herramienta SELECCIÓN MARCO RECTANGULAR

banderola--paso--012.webp

Creamos una selección, haciendo clic y arrastrando, en la parte inferior.

banderola--paso--013.webp

Accedemos al menú EDICIÓN > RELLENAR y escogemos NEGRO

banderola--paso--014.webp

Debería quedar algo así

banderola--paso--015.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 8 - ✈✈✈✈✈✈✈✈✈✈✈✈

Deseleccionamos la franja negra con SELECCIÓN > DESELECCIONAR

banderola--paso--016.webp

Aplicamos el filtro DESENFOQUE GAUSSIANO

banderola--paso--017.webp

En mi caso le pondré este valor

banderola--paso--018.webp

Cuando estés a gusto con el resultado PULSA OK

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 9 - ✈✈✈✈✈✈✈✈✈✈✈✈

Bajamos un poco la opacidad de la capa para que no resulte tan fuerte el efecto

banderola--paso--019.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 10 - ✈✈✈✈✈✈✈✈✈✈✈✈

Creamos una capa nueva

banderola--paso--020.webp

Creamos una selección por debajo del centro de la imagen, una franja estrecha

banderola--paso--021.webp

Y la rellenamos, esta vez de blanco en lugar de negro

banderola--paso--022.webp

Deseleeccionamos (Selección > Deseleccionar) y nuevamente aplicamos un DESENFOQUE GAUSSIANO y bajamos la opcacidad de la capa (SOBRE UN 30%)

banderola--paso--023.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 11 - ✈✈✈✈✈✈✈✈✈✈✈✈

Seleccionamos la herramienta de TEXTO y escribimos el texto que deseemos (EN LA PARTE SUPERIOR PUEDES CAMBIAR LAS PROPIEDADES DEL TEXTO, COMO LA FUENTE, TAMAÑO, ETC). Para desplazarlo puedes usar la herramienta MOVER. Para editarlo, de nuevo con la herramienta TEXTO doble clic sobre el texto. Es bastante similar a Microsoft Word que la mayoría hemos usado, así que no me pararé mucho en este tema, pero si tenéis cualesquier duda avisarme.


banderola--paso--024.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 12 - ✈✈✈✈✈✈✈✈✈✈✈✈

A continuación vamos a ubicar una silueta al lado del texto para darle más énfasis y un toque de diseño.

Para ello buscaremos en Google algo como "photoshop female shape" o el motivo que quieras buscar.

Encontré estos que me gustaron

Fashion Silhouettes Shapes Models

banderola--paso--025.webp

Fíjate que una vez descargado y descomprimido el archivo aparecerá un archivo con EXTENSIÓN .CSH

banderola--paso--026.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 13 - ✈✈✈✈✈✈✈✈✈✈✈✈

Activamos la herramienta FORMAS PERSONALIZADAS

banderola--paso--027.webp

Una vez activada desplegamos las opciones para escoger una forma y SELECCIONAMOS > CARGAR FORMAS en el menú

banderola--paso--028.webp

Seleccionamos el archivo con extensión .CSH QUE HABÍAMOS DESCARGADO

banderola--paso--029.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 14 - ✈✈✈✈✈✈✈✈✈✈✈✈

En las opciones de FORMA escogemos alguna de las siluetas de chica que ahora deberían aparecer.

En mi caso haré clic sobre la última para escogerla.

banderola--paso--030.webp

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

✈ PASO 15 - ✈✈✈✈✈✈✈✈✈✈✈✈

Escoge un color de relleno en la barra de propiedades. Puedes jugar con el borde, tipo de borde y otras opciones.

En mi caso voy a escoger negro para el relleno.

banderola--paso--031.webp

Y a continuación PULSAMOS LA TECLA SHIFT y sin soltarla hacemos clic en el mouse, y sin soltar la presión del botón del mouse/ratón arrastramos.

Puedes usar la herramienta MOVER para desplazar la figura o EDICIÓN > TRANSFORMAR TRAZADO > ESCALA para hacerla más grande o más pequeña (pulsa SHIFT mientras lo hagas para mantener la proporción). Cuando hayas terminado de editar simplemente clic en el botón V en la parte superior.

LISTO. TU BANNER LISTO PARA SUBIR A LA WEB O LO QUE QUIERAS. RECUERDA GUARDARLO COMO .JPG o .PNG PARA USARLO EN INTERNET (en este caso os recomiendo PNG ya que en JPG algunos programas pueden desenfocar la silueta o puedes usar SUBSAMPLING si vas a usar .JPG con relación 1:1 para evitar el desenfoque)

banner-png.webp
 
Última edición:
Un tutorial muy bien explicado, muchas gracias :encouragement:
 
Un tutorial muy bien explicado, muchas gracias :encouragement:

Me alegro que te guste.

Podría hacerse con algo de peripecia con degradados, pero ponerme a explicar cómo funciona la edición de degradados, cómo guardarlos, etc, me llevaría un tutorial completo con un montón de pasos.

Además de esta forma las capas quedan libres para editarlas, se pueden mover, se puede bajar la opacidad, cambiar los modos de color, etc, sin tener que complicarse con degradados.
 
Excelente tutorial 🙂
 
Wow excelente tutorial me servirá mucho
 
Excelente tutorial 🙂

Me alegro que te haya gustado. Por supuesto sois libres de experimentar con las sombras y las luces a vuestro aire y de escoger cualquier silueta que consigáis en la web. En Deviantart se consiguen algunas interesantes (algún día explicaré cómo crear las nuestras propias). Se agradece un clic en "me gusta".
 
Me alegro que te haya gustado. Se agradece un "me agrada" en el tutorial [MENTION=145361]soulseo[/MENTION]

Cualquier duda consultarme sin problema. Que para eso estamos.
 
Agregado en favoritos :encouragement:
 
Agregado en favoritos :encouragement:

Me alegro que te haya gustado. Si tenéis alguna duda con los pasos no dudan en consultarme.

Y se agradece un "like" 🙂
 
Se agradece el aporte 🙂
 
Gracias a ti por revisarlo Carlos Arreola
 
Atrás
Arriba