x

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación.
Si continúa navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de cookies

 
  Entrar Regístrate
 
Tutorial - Cómo hacer un Banner en Photoshop (básico)
#1 · 07/Jul/2005, 23:18 · Editado por lovespyke
Ante la cantidad de preguntas sobre cómo hacer un banner que hay en el foro, he hecho un tutorial en el que se explica cómo hacerlo. Ante todo quiero dejar claro que mi intención es ayudar a los principiantes con el Photoshop, ya que se por experiencia propia que al principio cuesta. Se aceptan sugerencias y consejos Giño
Nota: Al llevar tantas imágenes, he decidido poner links a ellas, para que no se demore demasiado su carga

TUTORIAL

1. CREAMOS EL ARCHIVO

Creamos un nuevo archivo, para ello “Archivo >> Nuevo”.
En la ventana que se nos abre, hacemos clic para seleccionar tamaños preestablecidos. (imagen)
Puedes dejar el fondo transparente o no, no importará más adelante.
Seleccionamos la opción Banner 468x60. Se nos abrirá un nuevo documento, que será sobre el que trabajaremos.

2. TIPO DE BANNER 1
Este tipo de banner es en el que usaremos una fotografía completa que ocupe todo nuestro archivo, por ejemplo: (imagen)
En nuestro explorador, hacemos clic con el botón derecho y seleccionamos la opción copiar. Vamos al Photoshop, y seleccionamos “Edición >> Pegar”
Veremos algo como esto: (imagen)
No te asustes, ahora moveremos la imagen para ver algo. Escogemos la herramienta mover en el menú de la izquierda, hacemos clic sobre la foto, y arrastramos hacia arriba.
(imagen)
Puede que pese a haber movido la imagen, no se ajuste a lo que queremos, por lo que tendremos que cambiar el tamaño. Para ello, usamos la combinación de teclas ctrl+T y nos aparecerá algo como lo siguiente:
(imagen)
Para modificar ahora el tamaño, tenemos que hacer clic en uno de los cuadraditos señalados, y arrastrar hacia dentro de la imagen (para reducir). Es importante que si quieres que se conserven las proporciones, selecciones arriba Mantener Proporción (indicado en la captura).
Tras esos ajustes, hemos obtenido algo como esto:
(imagen)

Ahora llega el turno de mejorar visualmente la imagen. Como puedes ver, la calidad no es muy buena, así que haremos lo siguiente.
Duplicaremos la imagen. Para ello, iremos al menú superior, escogeremos Capa >> Duplicar Capa.
En el menú de capas, veremos lo siguiente:
(imagen)
Este menú capas nos servirá para desplazarnos entre capas, y para modificar la opacidad de capa.
Ahora vamos a suavizar la foto. Para ello, en el menú superior escogemos “Filtro >> Desenfocar >> Desenfoque Gaussiano” y escogemos las siguientes settings:
(imagen)
Como ves, queda demasiado desenfocado, pero en el Menú Capas bajaremos la opacidad a un 67 % (imagen), obteniendo lo siguiente:
(imagen)
Obteniendo así un resultado muy bueno teniendo en cuenta la foto de la que partíamos.
Tanto el texto como el borde serán tratados en el punto 4.

3. TIPO DE BANNER 2
Ahora supongamos que quieres poner un fondo y encima una imagen. Para insertar el fondo, seguimos todos los pasos del apartado anterior. Tras esto, yo he obtenido lo siguiente:
(imagen)
Ahora seleccionamos la imagen que queremos poner encima, con el botón derecho, Copiar. Ya en el Photoshop, Edición >> Pegar
(imagen)
Como ves, lo que tenemos que hacer ahora es borrar el fondo blanco, para lo que podemos usar varias herramientas. En este tutorial, por lo simple que es, nos decantaremos por la clásica Goma de Borrar
(imagen)
Puedes seleccionar diferentes pinceles (lo que apunta la flecha). Recomiendo un pincel pequeño, y con bordes difuminados, como en el de la figura.
Para borrar con pequeños detalles, puedes utilizar el zoom:
(imagen)
Lo de borrar es cogerle el truco, no te preocupes si al principio te parece difícil.
Así nos ha quedado:
(imagen)
Como ves, demasiado artificial, por lo que vamos a jugar con la transparencia de capa, como explicamos en el punto anterior.
(imagen)
No es un gran ejemplo, pero espero que entendáis lo que quiero decir.

4. TEXTO Y BORDES
Ahora algo fundamental en nuestro banner: el texto. Tiene que ser legible y llamativo.
Para introducir texto, utilizamos la herramienta de texto horizontal.
(imagen)
Escogemos la fuente en el menú superior (también puedes escoger el color haciendo clic en el cuadradito de color), y hacemos un clic sobre el documento. Escribimos el texto deseado.
(imagen)
Como se puede apreciar, se leerían mejor las letras con un bordecito negro que le vamos a poner.
Vamos al menú de arriba, y escogemos “Capa >> Estilo de capa >> Trazo” y escogemos las siguientes opciones:
(imagen)
Finalmente, añadiremos un borde en una nueva capa. Creamos una nueva capa: “Capa >> Nueva >> Capa” con las settings que ponga por defecto. Seleccionamos el archivo entero con la herramienta selección rectangular: (imagen) (haciendo clic en la esquina superior izquierda y arrastrando hasta la inferior derecha.
Para poner el borde, vamos a “Edición >> Contornear” y escogemos las siguientes settings:
(imagen)
Y luego podemos repetir el Trazo, explicado anteriormente para el texto, obteniendo nuestro banner final:
(imagen)
No ha sido de lo mejor que he hecho...pero en fin, pasable para ser un tutorial básico.
Espero que os haya resultado útil.

Tutorial redactado por lovespyke. Prohibido su uso en otras webs sin permiso.

--------------------------------
Espero que más o menos se haya entendido. Puede parecer largo, pero es que lo explico todo al detalle, para que hasta la persona con menos idea de Photoshop lo entienda.
Si tienes alguna duda, pregunta Giño Postea también tus comentarios o sugerencias.


lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#2 · 08/Jul/2005, 16:38
Las imagenes no se ven, o por lo menos yo no,
saludos.

rehivaJ
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 16
Desde: 21/Mar/2004
· ·
#3 · 08/Jul/2005, 17:02
Gracias por avisar.
El problema es que los espacios webs están caidos, y las imágenes las hospedaba en mi espacio web...así que lamento este problema.
Si veo que para mañana no se ha solucionado, las cambiaré de host.

lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#4 · 09/Jul/2005, 17:21
oaaa .. ojala pudiese arreglar pronto eso de las imagenes pork tampoco las veo y toy entusiasmada aver si con este tutorial puedo hacer mi banner .. Salu2s a To2sVacilando

Pame360
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 72
Desde: 07/Dic/2004
·
#5 · 09/Jul/2005, 22:44
sigo a la espera de que arreglen el servidor...aunque como he dicho, si para mañana domingo a lo largo del día no se soluciona, las subiré en otro lugar.
Espero que te sea útil Giño

lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#6 · 10/Jul/2005, 17:23
K tal el tema de las fotos??? se ha arreglado el servidor?

Sitooliver24
Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 7
Desde: 07/Jul/2005
·
#7 · 10/Jul/2005, 20:01
El servidor sigue caido, por lo que estoy pensando en una alternativa para poder poner las fotos Giño

lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#8 · 12/Jul/2005, 23:04
toavia nu se ve nada ...LloricaLloricaLlorica

Pame360
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 72
Desde: 07/Dic/2004
·
#9 · 12/Jul/2005, 23:14
Lo aacabo de cambiar de servidor. Ahora debería verse Giño

lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#10 · 14/Jul/2005, 04:21
ahora se ven bien las imagenes.

una pregunta: que version del photoshop usaste y si necesitas algun plug-in?

dr_maty
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 132
Desde: 01/Dic/2004
· ·
#11 · 14/Jul/2005, 15:58
Versión 7.0 aunque funcionaría con todas. Y no he usado ningún plug-in adicional, tan sólo los filtros que ya trae instalado el programa Giño

lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#12 · 14/Jul/2005, 18:25
muxas gracias.

dr_maty
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 132
Desde: 01/Dic/2004
· ·
#13 · 14/Jul/2005, 20:25
oaaa..... ahoritas si se ve bienn .. gracias por este tutotial lovespykeMuchas risas

Pame360
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 72
Desde: 07/Dic/2004
·
#14 · 14/Jul/2005, 21:09
de nada, sólo espero que sea útil Giño

lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#15 · 14/Jul/2005, 22:55
hola de new.. el tutorial esta re clarito..cosa por la cual vuelvo a agradecerte ... pero ahoritas quisiera ver si me podrias explicar algo mas porfi... mira ahora que ya tengo mi banner como se hace para que se muevan las letras o las imagenes o algo asi ....noce si sera muy dificil o no.. pero seria lo segundo k me gustaria aprender .. porque e visto que hacen unos banner bienn chikititosss que le escriben algo k se mueve y quedan bien bonitos...

Pame360
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 72
Desde: 07/Dic/2004
·
#16 · 14/Jul/2005, 23:03
Bueno, ese es otro paso más...y puede parecer algo complicado, pero depende.
Hace tiempo hice un tutorial de como animar texto para otro foro, link aqui.
Tan sólo tienes que hacer un banner con los pasos que te he indicado en el tutorial de hacer banners simples, y sobre él, hacer los pasos que indican en el tutorial del link Giño

lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#17 · 15/Jul/2005, 19:37
muchas gracias por las molestias q te has tomado lo q pasa q yo tengo la version del photoshop 5.0 x lo q algunas opciones no las tengo y me pierdo Enfurruñado donde podria descargarme el photoshop 7.0 (es el q utilizais no?) pero el de prueba no

Sweetbrok
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 33
Desde: 10/Jun/2004
· ·
#18 · 15/Jul/2005, 19:44
mmm...pueses un problema, porque si utilizas una versión superior a la 7, como la CS o la CS2, el tutorial se puede seguir perfectamente...pero con versiones antiguas ya es más difícil, ya que como bien dices, hay opciones que no trae.

Para bajarte el Photoshop 7, tiene que ser desde la web oficial de Adobe, aunque en versión de prueba. Y a no ser que lo compres, no hay forma legal de conseguirlo...

lovespyke
Foro por via intravenosa
Foro por via intravenosa
Haz clic para ver el perfil del usuario
Mensajes: 877
Desde: 29/Sep/2003
· ·
#19 · 02/Jul/2007, 00:09
hola mira q yo ay una duda q llevo mucho tiempo intentando solucionar i es esta cuando acabo de crear el banner i qiero meterle un link para q al clicarle me lleve a esa web como puedo hacer?ila subo a imageshack o a donde i q link copio?es q soi nuevo haber si me pueden solucionar estas dudas muchisimas gracias de antemano.

trencia
Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 3
Desde: 26/May/2007
·
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Foro de soporte · Ayuda para webmasters · Diseño gráfico
Opciones:
Versión imprimible del tema
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 18:05 UTC+02:00 DST
Temas similares
 I FotoPTemaMensajesÚltima respuesta
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: eldeposito · 27/Dic/2004, 13:32
202/Oct/2007, 21:41
jrkanon Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: User 479801 · 11/Sep/2003, 04:24
1026/Ene/2010, 02:40
100x100net Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: indena · 14/Sep/2005, 15:46
114/Sep/2005, 16:32
lovespyke Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: _RAFF_ · 13/May/2004, 14:05
0Hoy, 01:00
Invitad@ Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: _aguamarina_ · 23/May/2003, 11:07
1626/May/2003, 12:57
Invitad@ Ir al último mensaje del tema