Entradas

Hola a todos de nuevo. Hace poco he tenido la oportunidad de diseñar mis propias tarjetas de visita, algo que considero muy útil pues uno nunca sabe cuando puede dar con un cliente potencial. Por tanto, tenemos que estar preparados para aprovechar cada oportunidad que se nos presente.

Sin duda, las tarjetas de visita son una de las mejores formas de publicitarnos y de crearnos una imagen profesional. Antes de nada, es muy importante tener claro el tipo de servicios que queremos ofrecer, y cómo vamos a promocionarnos. Por tanto antes de lanzaros a hacerlas os recomiendo que, si todavía no estáis dentro del mercado, reflexionéis profundamente sobre vuestra estrategia/devenir profesional. No hay nada menos profesional que hacer unas tarjetas de visita y que, cuando te llamen al cabo de un tiempo, le digas a tu cliente que ya no te dedicas a eso.

Así que, si ya estáis dentro de este mundillo, o queréis introducidos en él, creo que este post os puede ser de cierta utilidad. Como ya imaginaréis, las principales cuestiones girarán sobre todo en torno a la imagen y el diseño de la tarjeta. A partir de aquí es donde el gusto el estilo de cada uno salen a relucir. Y también la situación. No es lo mismo diseñar una tarjeta para un autónomo, para una microempresa, para una empresa más grande… En cada caso se busca dar una imagen totalmente diferente. Todo esto se traduce en diversos diseños. Hay miles: diseños minimalistas, diseños tradicionales, diseños modernos, clásicos, futuristas, etc.

Es por ello por lo que los siguientes pasos que voy a dar son solo orientativos y están basados en mi visión profesional y en mi gusto personal. Sin embargo, son fácilmente aplicables a otras situaciones, ya que lo importante del post son los procedimientos, y no tanto las elecciones que yo os proponga.

Para empezar, he decidido incluir en la tarjeta los siguientes elementos:

  • Logotipo
  • Nombre y Apellidos
  • Profesión
  • Teléfono
  • E-Mail
  • Página Web
  • Servicios

Ni que decir tiene que en el caso de que prefiráis omitir o añadir más elementos, simplemente será cuestión de insertarlos y tirar un poco de sentido común y seguir los procedimientos que os detallo más abajo para ubicarlos de forma que queden bien visibles, y visualmente atractivos.

Para hacer el diseño he utilizado Adobe Photoshop (en su versión CS6), aunque cualquier otra herramienta de diseño gráfico o maquetación puede utilizarse siguiendo más o menos las mismas pautas.

Pasamos a la parte técnica del diseño de la tarjeta:

Configurar el escenario de trabajo

  • El primer paso será crear un nuevo documento con las siguientes dimensiones: 9,5 cm x 5,75 cm. (Evidentemente, utilizar estas dimensiones no es obligatorio, pero es lo que os recomiendo). A continuación tendremos que darle una resolución de 300 píxeles/pulgada y activaremos el modo de color de 8-bits CMYK (Imagen/Modo/Color CMYK | Canal 8 Bits). Normalmente las tarjetas de visita suelen ser de unos 9 cm x 5 cm, pero siempre es recomendable dejar un margen de impresión (sangrado) para que se impriman bien. Hay que tener en cuenta en todo momento que cualquier elemento que coloquemos fuera de ese margen no se imprimirá. Por tanto, intentad dejar al menos entre 0,75 y 1 cm de margen por los bordes para no llevaros sorpresas al imprimir vuestras tarjetas.

tarjetasvisita1

  • El siguiente paso será poner un degradado de fondo. Para ello, tendremos que convertir la capa en editable haciendo doble clic en la capa “Fondo” y dándole a OK. A continuación volveremos a hacer doble clic en la capa para abrir el cuadro diálogo de los “Estilos de Capa” (también se puede abrir a través del menú Capa/Estilos de Capa/Opciones de Fusión). Seleccionaremos la casilla de “Superposición de Degradado”, y en el menú desplegable de “Estilos” seleccionaremos “Radial”.  Os propongo utilizar colores claros o tonos suaves para el fondo. Por ejemplo, podemos establecer el blanco como el color más claro, y el color #c6c5c5 como el más oscuro, que como podréis comprobar tras introducirlo, es un tono grisáceo. Tras esto, activaremos la casilla de “Invertir” para que el color más claro (en este caso el blanco) quede en el centro. También podremos jugar con la opacidad hasta conseguir el punto que más nos guste. Yo, personalmente, la he dejado en el 40%.

tarjetasvisita4

tarjetasvisita2

Y hasta ahora deberíamos tener algo parecido a esto:

tarjetasvisita3

¿Lo tenéis ya? Bien, pues seguimos.

Crear un rectángulo que ocupará la parte inferior de la tarjeta.

  • El siguiente paso será crear un rectángulo que ubicaremos en la parte inferior del lienzo. Para ello utilizaremos la herramienta Rectángulo (U) de la barra de herramientas. El color que elijáis ahora mismo no tiene importancia pues lo configuraremos más adelante aplicando un estilo de capa nuevo.

tarjetasvisita5

  • El siguiente paso consistirá en deformar el rectángulo que hemos insertado para darle una forma visualmente atractiva. Para ello, seleccionaremos la capa del rectángulo y entraremos en el modo de transformación libre y utilizaremos la opción de «Deformar” (Editar/Transformar Trazado/Deformar). Una vez activado iremos deformando la imagen moviendo y editando cada uno de los vértices. Ahora mismo nos interesa sobre todo que sea la parte superior del rectángulo la que quede con una curva elegante, ya que el resto quedará fuera del lienzo. Cuando terminemos de modificarlo, aplicaremos la transformación. El resultado debería ser algo parecido a lo siguiente:

tarjetasvisita6

No os preocupéis si la parte inferior os queda deforme o desigual, vuelvo a repetir que lo importante es la curva de la línea superior del rectángulo.

  • A continuación aplicaremos un degradado al rectángulo y para ello volveremos a abrir el cuadro de diálogo de los «Estilos de Capa” (Doble clic en la capa del rectángulo). Seguiremos el mismo proceso que en el primer paso. En esta ocasión he decidido utilizar tonos azules, y para ello he elegido el color #020c28 como el más oscuro y el #37558f como el más claro. Esta vez sí nos interesa configurar el degradado como “Lineal” aunque, si queréis, podéis jugar con las otras opciones por si alguna de ellas os gusta más.

tarjetasvisita7

El resultado que obtengáis debería ser algo parecido a esto:

tarjetasvisita8

  • A continuación, duplicaremos el rectángulo presionando Ctrl+J o haciendo clic con el botón derecho sobre la capa del rectángulo y seleccionando “Duplicar Capa”. Una vez hecho esto, tendremos que colocar esta nueva capa detrás de la anterior. Para ello simplemente tendremos que hacer clic en la capa y sin soltar el botón izquierdo arrastrarlo debajo de la otra. Una vez hecho esto, cambiaremos el estilo de la nueva capa que hemos duplicado, le aplicaremos al degradado los siguientes colores: #000000 (negro) para el color más oscuro y #2b2b2b para el color más claro. Ahora utilizando la opción “Mover” (Pinchando y arrastrando), colocaremos la nueva capa ligeramente por encima de la anterior, de forma que sobresalga a modo de borde. Valiéndonos de la opción “Edición/Transformación Libre de Trazado” podemos girar la capa levemente para que el borde parezca que se va haciendo más delgado. El resultado debería ser algo parecido a esto:

tarjetasvisita9

¿Lo habéis conseguido? Para este paso hay que tener algo de paciencia. Pero si lo habéis logrado, entonces llegaréis hasta el final. Seguimos:

Inserción de elementos y datos personales

Ahora llegamos a la parte más sencilla: la inserción de los elementos que os he comentado al principio. Por ejemplo, en la parte superior izquierda, os propongo que insertéis vuestro logo (o vuestro nombre, si no tenéis logo). A modo de ejemplo, voy a insertar un texto con mi nombre, aunque en la versión final yo he preferido utilizar mi logo.

  • Aquí va mi propuesta para el nombre, aunque el tema de las tipografías, estilos, tamaños de letra, etc., es una cuestión muy personal. Valiéndonos de la herramienta “Texto Horizontal” insertaremos nuestro nombre y primer apellido, en mi caso, “Rafael” y “López” en dos capas diferentes, y las pondremos juntas la una de la otra. Para el primer nombre (Rafael), utilizaremos el estilo de letra Myriad Pro, con tamaño 25pt y en negrita (bold). Para “López” utilizaré la misma configuración pero utilizando el tipo de letra “Myriad Pro Condensed”. Este tipo de fuente que os recomiendo viene incluida en las versiones mas recientes de Windows, pero si no la tenéis, podéis utilizar otro tipo de letra que sea sencillo y a la vez profesional (por ejemplo sans serif). Si queréis, a la capa con vuestro primer nombre podéis aplicarle un degradado, siguiendo los pasos que dimos con el rectángulo. Debería resultar algo parecido a esto:

Esta sería la versión con el nombre:

tarjetasvisita10

Y esta la versión con el logotipo, al que también le he aplicado el mismo degradado:

tarjetasvisita11

Si lo deseáis, podéis añadirle más efectos a vuestras letras utilizando los “Estilos de Capa”. Podéis configurar una sombra o un efecto relieve de una manera sencilla y esto hará que las letras queden visualmente más atractivas.

  • El último paso será el de incluir el resto de elementos (datos personales). Para ello seguiremos utilizando las diversas opciones que nos ofrece la tipografía Myriad Pro. Por ejemplo, si queréis, podemos utilizar la fuente Myriad Pro Condensed Italic en tamaño 9 para insertar nuestro nombre o nuestra profesión, o incluso los servicios (esto ya es cuestión de gustos). Debajo, podemos insertar nuestro teléfono, e-mail y página web. Para los títulos “Teléfono”, “E-mail”, y “Web”, podemos utilizar la fuente Myriad Pro Bold Condensed con tamaño 9. Para la información correspondiente que insertemos a continuación podemos utilizar la fuente Myriad Pro Condensed Italic con tamaño 9, de nuevo. Si queréis, y para darle un toque elegante, podemos insertar una línea negra de unos 2px de grosor y alinearla junto a la información que hemos introducido. También opcionalmente, podemos insertar en la parte inferior (sobre el rectángulo azul) los servicios que ofrecemos. Para ello yo he utilizado la fuente Myriad Pro Condensed con tamaño 8 y en color blanco.

Y voilà, este es el resultado:

tarjetavisita

En el caso de que queráis crear un dorso, podéis utilizar el mismo diseño (duplicando el archivo), pero volteándolo horizontalmente, y añadiendo el logo o los elementos que os gusten. Un ejemplo de dorso podría ser este:

tarjetavisitaback

Si queréis indagar más sobre diseño de tarjetas de visita, o queréis inspiraros, os recomiendo que le echéis un vistazo a las siguientes páginas (en inglés), que seguro os serán de mucha utilidad (de hecho en ellas podéis descargar plantillas ya hechas para Photoshop):

Y esto es todo, por el momento. Ahora ya solo queda ir a la imprenta/papelería más cercana y encargar que nos las impriman. Espero que el post os haya sido de utilidad. Para cualquier duda, consejo o recomendación no dudéis en dejar algún comentario.

Hasta la próxima.

Editado el 25 de octubre de 2012 a las 21:40

He querido añadir un videotutorial para ilustrar de una manera más interactiva todo el proceso de elaboración de las tarjetas. Si estáis rápidos, incluso seréis capaces de tener vuestra propia tarjeta lista en media hora. Os pido disculpas por adelantado por los fallos en el discurso, tened en cuenta que es el primer videotutorial que hago y es difícil estar haciéndolo todo a la vez. Os recomiendo también que veáis el vídeo en HD, ya que así podréis ver mejor los detalles. 😉

Tutorial – Cómo diseñar tarjetas de visita con Photoshop CS6 – Blog Jugando a Traducir from Rafael López on Vimeo.

¡Hola a todos! Hoy os traigo algo nuevo. Ya llevo un tiempo diseñando páginas web y sé que para un traductor hay ciertos aspectos que cuesta mucho trabajo perfilar correctamente. Uno de ellos es la localización de imágenes, pues es una tarea que requiere tener ciertos conocimientos de programas de edición de imágenes y gráficos.

Básicamente, localizar una imagen consiste en modificar y adaptar los textos o información que esta contenga sin que quede afectado el contenido y el diseño de la misma. Hay muchos programas con los que se puede llevar a cabo esta tarea. En mis entradas de software os he hablado de varios editores como Gimp, Inkscape o Photoshop. Yo tengo la suerte de disponer de Photoshop, que es el que utilizo normalmente y el que me saca de todos los aprietos.

Antes de nada, sea cual sea el encargo (traducción de una página web, de un programa/software, de un videojuego, etc.) recomiendo que hagáis una copia de los archivos que os envíen. De este modo podréis trabajar sobre los archivos ya copiados sin riesgo de perder los archivos originales. Puede sonar a perogrullada para los más experimentados, pero seguro que más de uno ha metido la pata en este sentido.

A la hora de localizar una imagen, principalmente se suelen dar estas dos situaciones:

  • Que el cliente tenga la imagen original en un archivo editable  (el formato dependerá del programa, normalmente en Photoshop es en formato .psd).
  • Que no tenga un archivo editable y te envíe una imagen en mapa de bits que tengas que editar manualmente (.jpg, .gif, .png, etc.).

En el primer caso la edición es muy sencilla. Simplemente abriremos la imagen en Photoshop y seleccionaremos el cuadro de texto correspondiente para editar su contenido.

photoshop1

photoshop2

photoshop3

Una vez finalizado el proceso de edición tendremos que guardar la imagen con el mismo nombre y en la misma carpeta. El procedimiento en otros programas como Gimp o Inkscape sería prácticamente el mismo, simplemente habría que localizar la herramienta para insertar o editar texto y hacer lo propio.

En el caso de que recibamos una imagen en mapa de bits, el proceso se complicará un poco, aunque con algo de habilidad y destreza se podrá llevar a cabo sin ningún problema.

Por ejemplo, imaginad que os encargan que traduzcáis un documento sobre el funcionamiento de un Scrum que incluye la siguiente imagen:

Scrum

Al no poder editar los textos utilizando el procedimiento anterior, tendremos que tirar de inventiva. Lo primero que tenemos que hacer es analizar la imagen. Observamos que tenemos dos textos sobre fondo blanco y cuatro que están introducidos en un bocadillo que tiene como fondo un degradado. Evidentemente, los textos más complicados serán estos últimos.

  • Para el primer tipo de texto el proceso será bien sencillo: una vez abierta la imagen en Photoshop, insertaremos un rectángulo blanco o utilizaremos la goma de borrar para eliminar los textos. A la hora de seleccionar el color, es recomendable utilizar la herramienta “Cuentagotas”, pues nos permitirá darle al rectángulo exactamente el mismo tono de color para borrar la imagen, de forma que no quedará ninguna marca. Para ello, una vez se abra el cuadro de diálogo para seleccionar el color, haremos clic en el fondo de la imagen para que el programa detecte y aplique automáticamente el color. Posteriormente, insertaremos el rectángulo sobre el texto. El siguiente paso será insertar el texto manualmente. Para ello seleccionaremos la herramienta “Texto Horizontal”. Es importante intentar buscar un tipo de letra que sea lo más parecido posible al original. En caso de no tenerlo claro, utilizaremos algún formato de letra estándar como Arial, Calibri o Times New Roman, que al ser los más utilizados le darán en cualquier caso un toque profesional. También habrá que probar con diferentes tamaños y una vez elegido el tamaño ideal, mantenerlo con el resto de textos para mantener un cierto rigor.

photoshop4

photoshop5

  • En el caso de los textos de los bocadillos, el procedimiento será similar. Aunque pueda parecer complicado, lo único que tenemos que hacer es borrar los textos insertando un degradado que sea lo más parecido posible al de la imagen original. No es necesario borrar los bocadillos y dibujarlos de nuevo, ni las flechas, ni nada por el estilo. Para crear un degradado igual tendremos que sacar partido de nuevo a la herramienta “Cuentagotas”, que se activa automáticamente cuando se abre el cuadro de diálogo para elegir el color deseado.

Los pasos para este proceso son los siguientes:

  1. Seleccionamos de nuevo la herramienta “Forma personalizada”, y elegimos la forma del rectángulo.
  2. Insertamos un rectángulo solapando uno de los bocadillos, pero procurando no salirnos ni tocar los bordes negros.
  3. Una vez insertado el rectángulo, haremos clic en Capa/Estilo de Capa/Opciones de Fusión…
  4. Cuando se abra el cuadro de diálogo, activaremos la función “Superposición de Degradado”.
  5. Una vez activada, hacemos clic en el recuadro donde nos aparece el degradado que se activa por defecto (normalmente será en blanco y negro). Al hacer clic, se abrirá un cuadro de diálogo donde podremos configurar el degradado.
  6. Después, seleccionamos el cuadrito de color ubicado en el lado izquierdo y le asignamos el color deseado. Para aplicar el mismo color al degradado, en el recuadro de la izquierda seleccionaremos el color en uno de los bocadillos, tomando la muestra de color de la parte superior del mismo (lo más cerca posible de la línea negra). En la parte de la derecha, haremos el mismo proceso, pero seleccionando el color de la parte inferior del bocadillo. Para finalizar,  activaremos la función de “Invertir”.
  7. Una vez configurado el degradado, hacemos clic en aceptar y observamos los cambios.

photoshop7

* Es posible que tengamos que modificar el tamaño del rectángulo para que no se quede ninguna marca. Para ello es recomendable ampliar el zoom y apurar los bordes al máximo. Para modificar el tamaño del rectángulo lo haremos haciendo clic en “Edición/Transformación libre”.

Una vez insertado el degradado insertamos el nuevo texto sobre el rectángulo. De nuevo elegiremos el mismo tipo de letra y tamaño que utilizamos para la edición de los textos anteriores, y controlaremos que todo quede lo más parecido posible al original. Repetiremos el proceso con el resto de bocadillos, y el resultado seguro que será muy parecido al que os muestro a continuación:

Scrum_traducida

Como veis, el resultado quizá no es perfecto, pero da bastante el pego. Si no os sale a la primera, tened paciencia, pues al principio es un poco difícil entender bien el funcionamiento del programa. Además, conforme vayais practicando iréis adquiriendo una mayor destreza y precisión con las diferentes herramientas.

Espero que el post os haya sido de utilidad, a mí me llevo mucho tiempo aprender a hacer este tipo de ediciones de manera adecuada. Gracias a ellas he podido localizar mi propia página web sin demasiado esfuerzo y ahorrando mucho tiempo. Si no disponéis de Photoshop, el procedimiento con Gimp e Inkscape es prácticamente igual, lo único que cambia es la ubicación de las herramientas, pero las que habrá que utilizar serán las mismas (rectángulo, edición de texto y degradado).

Os recuerdo que podéis saber más sobre todos estos programas en la sección del proyecto SofTrad e, incluso, si queréis practicar  el proceso, podéis descargar la imagen original de esta entrada y trabajar sobre ella.

Ala, ala, ¡a practicar se ha dicho! ¡Un saludo!