·
miarroba.com
Tutorial - Cómo hacer un Banner en Photoshop (básico)
 
Índice de subforos · Ayuda para webmasters · Diseño gráfico
Noticias · Buscar · Tags · Tagboard · Usuarios · Fisgona
Autor Mensaje 
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#1 ·
Tutorial - Cómo hacer un Banner en Photoshop (básico)

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.




Editado por lovespykelovespyke, Sábado, 24 de Septiembre de 2005, 19:11
07/Jul/2005 23:18 GMT+1
rehivaJrehivaJ
Usuario habitual
Usuario habitual

Haz clic para ver el perfil del usuario
Mensajes: 16
Desde: 21/Mar/2004
#2 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

Las imagenes no se ven, o por lo menos yo no,
saludos.

08/Jul/2005 16:38 GMT+1
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#3 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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.

08/Jul/2005 17:02 GMT+1
Pame360Pame360
Usuario habitual
Usuario habitual

Haz clic para ver el perfil del usuario
Mensajes: 72
Desde: 07/Dic/2004
#4 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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

09/Jul/2005 17:21 GMT+1
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#5 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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

09/Jul/2005 22:44 GMT+1
Sitooliver24Sitooliver24
Usuario Novato
Usuario Novato


Mensajes: 7
Desde: 07/Jul/2005
#6 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

K tal el tema de las fotos??? se ha arreglado el servidor?

10/Jul/2005 17:23 GMT+1
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#7 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

El servidor sigue caido, por lo que estoy pensando en una alternativa para poder poner las fotos Giño

10/Jul/2005 20:01 GMT+1
Pame360Pame360
Usuario habitual
Usuario habitual

Haz clic para ver el perfil del usuario
Mensajes: 72
Desde: 07/Dic/2004
#8 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

toavia nu se ve nada ...LloricaLloricaLlorica

12/Jul/2005 23:04 GMT+1
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#9 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

Lo aacabo de cambiar de servidor. Ahora debería verse Giño

12/Jul/2005 23:14 GMT+1
dr_matydr_maty
Machacateclados
Machacateclados

Haz clic para ver el perfil del usuario
Mensajes: 132
Desde: 01/Dic/2004
#10 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

ahora se ven bien las imagenes.

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

14/Jul/2005 04:21 GMT+1
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#11 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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

14/Jul/2005 15:58 GMT+1
dr_matydr_maty
Machacateclados
Machacateclados

Haz clic para ver el perfil del usuario
Mensajes: 132
Desde: 01/Dic/2004
#12 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

muxas gracias.

14/Jul/2005 18:25 GMT+1
Pame360Pame360
Usuario habitual
Usuario habitual

Haz clic para ver el perfil del usuario
Mensajes: 72
Desde: 07/Dic/2004
#13 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

oaaa..... ahoritas si se ve bienn .. gracias por este tutotial lovespykeMuchas risas

14/Jul/2005 20:25 GMT+1
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#14 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

de nada, sólo espero que sea útil Giño

14/Jul/2005 21:09 GMT+1
Pame360Pame360
Usuario habitual
Usuario habitual

Haz clic para ver el perfil del usuario
Mensajes: 72
Desde: 07/Dic/2004
#15 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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...

14/Jul/2005 22:55 GMT+1
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#16 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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

14/Jul/2005 23:03 GMT+1
SweetbrokSweetbrok
Usuario habitual
Usuario habitual

Haz clic para ver el perfil del usuario
Mensajes: 33
Desde: 10/Jun/2004
#17 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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

15/Jul/2005 19:37 GMT+1
lovespykelovespyke
Foro por via intravenosa
Foro por via intravenosa

Haz clic para ver el perfil del usuario
Mensajes: 879
Desde: 29/Sep/2003
#18 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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...

15/Jul/2005 19:44 GMT+1
trenciatrencia
Usuario Novato
Usuario Novato

Haz clic para ver el perfil del usuario
Mensajes: 3
Desde: 26/May/2007
#19 ·
RE: Tutorial - Cómo hacer un Banner en Photoshop (básico)

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.

02/Jul/2007 00:09 GMT+1
Índice de subforos · Ayuda para webmasters · Diseño gráfico
Temas similares
Asunto Autor#VisitasÚltima respuesta
banner con photoshop14/Sep/2005, 15:46
indenaindena
11.89714/Sep/2005, 16:32
lovespykelovespyke Ir al último mensaje del tema
Algun tutorial para hacer un Interfaz Web con Photoshop??? me vuelvo loco...27/Dic/2004, 13:32
eldepositoeldeposito
24.47502/Oct/2007, 21:41
jrkanonjrkanon Ir al último mensaje del tema
WWW.TUTORIAL-ENLACE.net TODOS LOS TUTORIALES DE PHOTOSHOP, 3D MAX, FLASH.... LOS BUSCABAS ??13/May/2004, 14:05
_RAFF__RAFF_
0740No hay respuestas
Dónde encontrar un tutorial de Photoshop???11/Sep/2003, 04:24
VascoeuscaroVascoeuscaro
872126/Sep/2003, 19:25
PandorinaPandorina Ir al último mensaje del tema
Tutorial banner animado23/May/2003, 11:07
_aguamarina__aguamarina_
162.55526/May/2003, 12:57
_aguamarina__aguamarina_ Ir al último mensaje del tema
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
Todas las fechas y horas son GMT+1. Ahora son las 08:14
Miarroba Networks, S.L. C/ 18 de Julio, 21 Bajo, 39610 Astillero (CANTABRIA) - CIF B-39512736
Inscrita en el Registro Mercantil de Cantabria, tomo 743, folio 161, libro 0, hoja S-12428, Instripción 1ª