Destacados

Más
Domingo, 21 de junio, 2009

Crear fondos para Twitter

54 +200K

Sencillo y básico manual para comenzar a crear imagenes de fondo para nuestro perfil de Twitter con nuestra información, página web, alguna fotografía y otros datos.

Publicidad

Últimamente en España, Twitter esta pasando de ser ese servicio que sólo los usuarios más activos de Internet utilizan, a empezar a convertirse en una herramienta masiva, tal como las redes sociales o los clientes de mensajería.

Evidentemente, el uso de Twitter aún no llega a ese nivel, pero es cuestión de tiempo que lo haga, ya que desde febrero del 2008 hasta febrero del 2009 su uso ha aumentado un 1382% (mundialmente, pero teniendo en cuenta que los países que más usan Twitter son EEUU, Japón y España).

Este artículo se basa en como crear un llamativo y profesional fondo para twitter. Dejando a un lado herramientas como stripegenerator o stripemania, vamos a utilizar Photoshop para generar un fondo al estilo de los que usan en Twitter Background Gallery.

Lo primero será encontrar una buena fotografía para utilizar de fondo. Podemos utilizar alguna nuestra (que nos guste o que nos defina) o echar un ojo en la búsqueda avanzada de Flickr, que nos permite buscar con licencias Creative Commons para modificar. No olvidemos mencionar a pie de página al autor de la fotografía.

Lo ideal es utilizar una fotografía de 1600x1024, ya que las resoluciones que predominan son mayores a 1024x768. Aún así, para evitar el efecto mosaico, utilizaremos un fade out más adelante.

Lo primero, será seleccionar un rectángulo en la parte izquierda de nuestra fotografía (entre 250 y 300 pixels). Creamos una nueva capa (layer) y la rellenamos de negro. Bajamos el opacity hasta 25%, más o menos.

Con la herramienta de gradiente (Gradient tool) y seleccionando en la parte superior un gradiente negro fundido a transparente, podemos crear un efecto de desvanecimiento (de derecha a izquierda) en una nueva capa y evitar el efecto mosaico una vez subida al twitter.

Yo he utilizado el negro, pero se puede utilizar cualquier color que nos guste. También podemos utilizar el fundido de abajo hacia arriba.

Ahora, en una nueva capa, pegamos (CTRL-V) un recuadro con una foto nuestra, logotipo o lo que represente la cuenta de Twitter. Hacemos clic con botón derecho en la capa de la fotografía y seleccionamos Blending Options.

Una vez ahí, seleccionaremos lo siguiente:

  • Drop Shadow: Primera opción, donde podemos ajustar Distance y Size para mejorar la visión.
  • Stroke: Ultima opción, donde ponemos color blanco, Size 10 y Position Inside.

Aceptamos y vamos al menú Edit / Transform / Rotate e inclinamos ligeramente la fotografía.

Ahora necesitamos una fuente llamativa y bonita, algo que podemos encontrar en Dafont, donde incluso podemos escribir el texto a visualizar y seleccionar Accents para que nos busque fuentes que tengan letras acentuadas u otros signos de puntuación.

Existen multitud de fuentes gratis en esta plataforma, es cuestión de buscar una que nos guste. En nuestro ejemplo hemos utilizado Petita.

Creamos un texto y vamos escribiendo la información que queramos: Nuestra página web, email de contacto, dirección de Facebook, una pequeña bio, etc...

Podemos incluir iconos de IconArchive o de IconFinder para hacer más bonita la zona de datos, o incluso algunos logos de los servicios que utilizamos como Facebook, Flickr u otros.

Las posibilidades son muchas. Esto es sólo un ejemplo muy básico, pueden utilizarse miles de estrategias para crear un llamativo fondo. Por ejemplo, ver algunos de los manuales de photoshop de Emezeta o en PSDTuts.

Para terminar, quedaría guardar la imagen en formato JPG con una calidad aceptable, pero sin que la fotografía ocupe demasiado. Un tamaño aconsejable es que sea menor de 100KB aproximadamente. Podemos conseguir esto con la utilidad File / Save for web del Photoshop.

Accedemos a nuestro perfil de Twitter en el apartado Settings y pulsamos sobre Design. En Change design colors podemos cambiar los colores de nuestra página de Twitter y en Change background image colocar la imagen que acabamos de crear.

Y esto es todo. Se trata de un tutorial muy básico, pero que puede dar algunas ideas para comenzar a editar nuestro perfil de Twitter. ¡A ver si empezamos a encontrar perfiles más personalizados!

Comparte este artículo
Sobre el autor de Emezeta

Escrito por , más conocido como Manz. Es Ingeniero-Técnico en Informática de Gestión por la Universidad de La Laguna y residente en Santa Cruz de Tenerife.

54 comentarios de lectores

1 2

@b!aN @b!aN Lunes, 22 de junio de 2009, 09:18
1
Muy bueno Manz. Acabo de entrar en tu Twitter y quedo muy bien el nuevo diseño.
Responder Permalink URL · Mozilla Firefox 3.0.11 · Windows Vista ·
jaqueline perez d jaqueline perez d Viernes, 26 de junio de 2009, 16:26
2
esta super la verdad me llamo mucho la atencion tu diseño
Responder Permalink Internet Explorer 7.0 · Windows XP ·
Holanda Holanda Domingo, 28 de junio de 2009, 03:09
3
Gracias, estaba por ponerme en esto, ahora voy con más seguridad. Saludos
Responder Permalink URL · Mozilla Firefox 3.0.11 · Ubuntu Linux ·
Mikiman Mikiman Domingo, 5 de julio de 2009, 02:57
4
El tutorial esta bacan, pero el fondo que hice es de resolucion 1600x1200 y cuando lo coloco en mi twitter la imagen es muy grande o sera por la resolucion de mi monitor que es de 1440x900, y que pasara con los que vean mi twitter en una resolucion menor????
Responder Permalink URL · Mozilla Firefox 3.0.10 · Windows XP ·
Manz Manz Miércoles, 2 de septiembre de 2009, 18:54
5
@Mikiman: La idea de poner una resolución de 1600 (vamos a basarnos sólo en el ancho) es que para resoluciones menores de 1600 se seguirá viendo igual (debemos poner mayor importancia a las cosas de la zona derecha de la imagen). A las resoluciones mayores, utilizamos el efecto de fundido, por lo que no se verá mal. Observa el ejemplo del fondo que tengo yo, o algunos de los de la galería de Twitter Background. Que la diseñes para monitores grandes o más pequeños ya es cosa de cada uno.
Responder Permalink URL · Mozilla Firefox 3.5.2 · Windows Vista ·
Leandro Leandro Domingo, 4 de octubre de 2009, 04:39
6
Realmente increible, acabo de hacerlo y me quedo muy bien... Gracias por el tuto Manz Por cierto ya estas en mis follows Saludos
Responder Permalink URL · Mozilla Firefox 3.0.11Alexa · Windows XP ·
Carlos Chen Carlos Chen Martes, 20 de octubre de 2009, 19:50
7
Gracias, este tutorial fue de gran ayuda. Por eso les dejo a los interesados este enlace que te permite descargar video tutoriales para photoshop: http://depositfiles.com/es/files/3hxkbzhto?redirect
Responder Permalink URL · Mozilla Firefox 2.0.0.5 · Windows XP ·
gustavo gustavo Martes, 27 de octubre de 2009, 23:02
8
interesante lo estuve buscando gracias
Responder Permalink URL · Internet Explorer 8.0 · Windows XP ·
Anne Anne Martes, 5 de enero de 2010, 17:13
9
Gracias de verdad por tan excelente tutorial! Me servirá bastante para el fondo del twitter de la empresa que trabajo. Un fuerte abrazo y buena vibra!
Responder Permalink Mozilla Firefox 3.5.6 · Windows XP ·
edgar edgar Sábado, 9 de enero de 2010, 18:32
10
el twitter es genial porque puedo conocer personas de diferentes lugares
Responder Permalink Internet Explorer 6.0 · Windows XP ·
dmitriyx dmitriyx Lunes, 18 de enero de 2010, 16:30
11
hola esta muy bueno tu tutorial pero no lo tienes en video? para verlo mejor soy nuevo en esto :D
Responder Permalink Internet Explorer 7.0 · Windows XP ·
michael michael Sábado, 6 de febrero de 2010, 17:17
12
ayuda pongo Control-V pero no se pega mi imagen que hago por favor??
Responder Permalink URL · Internet Explorer 8.0 · Windows XP ·
Jonny Jonny Sábado, 27 de febrero de 2010, 05:15
13
Hola Hola oye no pude hacer uno es muy dificil :( pero hay deje mi msn agregame porfavor y me enseñas :)
Responder Permalink URL · Mozilla Firefox 3.5.8 · Windows XP ·
Javiera Javiera Martes, 9 de marzo de 2010, 00:31
14
Pucha, no se como hacerlo :(
Responder Permalink URL · Internet Explorer 7.0 · Windows XP ·
Super Target Me Super Target Me Lunes, 15 de marzo de 2010, 18:16
15
Realmente util y sencillo. Gracias!
Responder Permalink URL · Internet Explorer 7.0 · Windows XP ·
MegaAlien MegaAlien Domingo, 28 de marzo de 2010, 03:56
16
Gracias por el articulo, de seguro me servira. saludos!
Responder Permalink URL · Mozilla Firefox 3.6.2 · Windows XP ·
daniela daniela Martes, 30 de marzo de 2010, 00:05
17
supergenial alguien puede poner el link para descargar ese programa de photoshop please=)
Responder Permalink Mozilla Firefox 3.5.3 · Windows Vista ·
Jorge Alvarado Jorge Alvarado Sábado, 10 de abril de 2010, 18:36
18
Excelente información... sigue así.
Responder Permalink URL · Mozilla Firefox 3.6.3 · Windows XP ·
Adams J Ruiz Adams J Ruiz Domingo, 23 de mayo de 2010, 02:47
19
La personalización de los perfiles de las redes sociales es indicativo que realmente estamos comprometidos con dicha red social, en este caso de Twitter nos da un respaldo para tener y atraer más seguidores...
Responder Permalink URL · Mozilla Firefox 2.0.0.18 · Windows XP ·
noelia noelia Martes, 25 de mayo de 2010, 17:23
20
hola porfavor alguien me puede ayudar
Responder Permalink Mozilla Firefox 3.5.9 · Windows XP ·
Spam o errónea
Sandra Sandra Lunes, 31 de mayo de 2010, 18:16
21
Yo he utilizado para crear el fondo este servicio: http://www.fotoefectos.com/tag/creador-fondos-twitter,138 subes una foto, la recortas y te crea el fondo para twitter personalizado con tu foto. Saludos!
Responder Permalink URL · Mozilla Firefox 3.6.3 · Windows XP ·
Spam o errónea
Sandra Sandra Lunes, 31 de mayo de 2010, 18:19
22
Responder Permalink URL · Mozilla Firefox 3.6.3 · Windows XP ·
Irrelevante
hugo hugo Martes, 1 de junio de 2010, 03:44
23
mi novia me pide medicina de mitrocin
Responder Permalink URL · Mozilla Firefox 3.6.3 · Windows XP ·
Daniel Daniel Jueves, 10 de junio de 2010, 03:08
24
oye me puedes pasar el link para bajar photoshop es que lo he podido bajar ¡¡¡¡
Responder Permalink Internet Explorer 8.0 · Windows XP ·
Matías Viernes, 18 de junio de 2010, 23:47
25
Gracias Maestro!!
Responder Permalink Mozilla Firefox 3.5.9 · Windows XP ·
Edgard Cobian Edgard Cobian Martes, 6 de julio de 2010, 05:45
26
le aumenté la resolución a la imagen pero aun así cuando la coloco de fondo sale pequeña en el extremo superior izquierdo, no sé que más hacerle para que ocupe todo el fondo, si me pudieras ayudar sería genial. Gracias
Responder Permalink Chrome 5.0.375.99 · Windows Vista ·
mbl Miércoles, 7 de julio de 2010, 18:44
27
muchas gracias
Responder Permalink Internet Explorer 7.0 · Windows XP ·
norby Jueves, 15 de julio de 2010, 16:08
28
seria muy bueno si hubiera uno de metallica,dbz o naruto jejeje XD SI PUEDEN SUBANLOS!!!
Responder Permalink Chrome 5.0.375.99 · Windows 7 ·
trueky.com trueky.com Jueves, 22 de julio de 2010, 19:41
29
Me parece genial !! Estoy pensando en hacer mi fondo para mi página de tuitter sobre mi web trueky - Alguna idea?
Responder Permalink URL · Chrome 5.0.375.99 · Windows 7 ·
Irrelevante
yamilet yamilet Sábado, 14 de agosto de 2010, 23:53
30
qes bkn pero como me puedo acer uno
Responder Permalink Mozilla Firefox 3.6.8 · Windows XP ·
Santiago Santiago Lunes, 16 de agosto de 2010, 01:39
31
¡Excelente! Me sirvió muchísimo y pude crear mi fondo para Twitter y ahora está funcionando perfectamente. ¡Saludos!
Responder Permalink URL · Chrome 5.0.375.126 · Windows 7 ·
Gerardo Sábado, 21 de agosto de 2010, 22:49
32
gracias me kedo fino
Responder Permalink Chrome 5.0.375.127 · Windows Vista ·
Drexx Drexx Domingo, 22 de agosto de 2010, 19:03
33
@Manz: teengo un problema con la fuente.. osea le doy dowloand y la descargar en formato .ttf y lo abre el visor de windows y ni sikiera puedo hacer click derecho.. y segundo que no puedo pegar la foto le doy (Ctrl+V) y no hace nada!! espero thu pronta respuesta..!!
Responder Permalink Mozilla Firefox 3.6 · Windows Vista ·
Pacco Tellez Pacco Tellez Lunes, 23 de agosto de 2010, 03:46
34
Excelente tuto, poniéndolo en práctica con un nuevo fondo para mi cuenta. Saludos desde México!!!
Responder Permalink URL · Mozilla Firefox 3.6.8 · Macintosh ·
luis luis Martes, 24 de agosto de 2010, 20:39
35
muy buueno !
Responder Permalink URL · Chrome 5.0.375.127 · Windows XP ·
Mauriio Mauriio Martes, 24 de agosto de 2010, 21:05
36
Hola Amigo, gracias por el aporte. Realmente twitter es una gran herramienta para todos y hay que aprovecharla. Saludos
Responder Permalink URL · Mozilla Firefox 3.6.8 · Windows 7 ·
Benito T. Alped Benito T. Alped Martes, 31 de agosto de 2010, 10:14
37
Hola Amigo, gracias por el aporte. Realmente twitter es una gran herramienta para todos y hay que aprovecharla.
Responder Permalink Mozilla Firefox 3.6.8 · Windows XP ·
Alberto Sábado, 18 de septiembre de 2010, 10:27
38
Hola amigo, hice todo lo que me dijiste, pero cuando voy a subirlo no se sube :S, se queda cargando y me sale que hubo un error, lo puse en menos de 100kb y nada, me puedes ayudar?.
Responder Permalink Chrome 6.0.472.59 · Windows XP ·
Mariángel Mariángel Domingo, 21 de noviembre de 2010, 19:39
39
Muchas gracias lo hare!
Responder Permalink URL · Chrome 7.0.517.44 · Windows Vista ·
 Novato Novato Miércoles, 11 de mayo de 2011, 14:56
40
Gracias por el tuto... me ha sido de gran utilidad
Responder Permalink URL · Mozilla Firefox 3.6.17 · Ubuntu Linux ·
pepelum pepelum Viernes, 5 de agosto de 2011, 19:05
41
Ya me parecía a mi, depues de Googlear, te pillé y cuando vi la imagen de fondo, subí. ¡¡¡ Claro que eres mas canario que el Gofio !!! y más chicharrero que el pescado. Salu2 desde Málaga
Responder Permalink URL · Mozilla Firefox 5.0 · Windows 7 ·
camila bieber camila bieber Sábado, 24 de septiembre de 2011, 01:51
42
como hago eso no entiendo nada
Responder Permalink Chrome 14.0.835.186 · Windows 7 ·
lorena lorena Miércoles, 12 de octubre de 2011, 21:52
43
meduele todo me cai de la escalera mierda...........
Responder Permalink Internet Explorer 9.0 · Windows 7 ·
vicente vicente Miércoles, 16 de noviembre de 2011, 16:54
44
yo tengo un problema. Quisiera que la foto de perfil fuese más grande y no sólo de 73x73 px que te dan. Lo he visto en muchas webs, pero no sé cómo puedo cambiarlo por más que lo intento.
Responder Permalink URL · Mozilla Firefox 8.0 · Windows Vista ·
Alfonso Alfonso Lunes, 21 de noviembre de 2011, 13:55
45
Muchas gracias por el tuto, andaba buscando algo así.
Responder Permalink URL · Mozilla Firefox 7.0.1 · Windows 7 ·
Balonmano Playa Balonmano Playa Jueves, 22 de diciembre de 2011, 14:15
46
Me ha parecido genial tu aportación, lo he puesto en práctica en mi perfil y en el del club, Muchas Gracias, Fernando
Responder Permalink URL · Chrome 16.0.912.63 · Windows Vista ·
Salvador Rosillo Salvador Rosillo Martes, 10 de enero de 2012, 22:30
47
Muchas gracias por la aportación. Más que aceptable... notable alto por no decirte sobresaliente... saludos!!!
Responder Permalink Chrome 16.0.912.75 · Windows XP ·
Lucas Miércoles, 8 de febrero de 2012, 17:07
48
Cuando hago el fondo no me queda bien esta desproporcionado la imagen queda muy grande y todo lo que pongo en el lado izquierdo no se ve :s como puedo hacer?
Responder Permalink Mozilla Firefox 9.0.1 · Macintosh ·
karla karla Miércoles, 29 de febrero de 2012, 16:03
49
me encanto tu pagina demasiado interesante
Responder Permalink Internet Explorer 9.0 · Windows 7 ·
Beatriz Beatriz Martes, 15 de mayo de 2012, 10:30
50
Bonita foto del Valle de la Orotava
Responder Permalink Chrome 18.0.1025.168 · Windows 7 ·

1 2

Publica tu opinión



Acepto las condiciones y políticas de privacidad de este sitio web.
Suscribirme a través de FeedBurner a los nuevos artículos del blog por email.

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.