Tarjetas de Visita con Photoshop

En este tutorial vamos a diseñar un sencilla tarjeta de visita en Photoshop y a dejarla lista para imprimir con sus marcas de corte y el sangrado. Lo lógico es que hicieses esto con una herramienta como InDesign pero de hecho es posible hacerlo usando sólo nuestro Photoshop de toda confianza.

Tarjetas de visita en Photoshop

 

Traducido y adaptado de: PSDTuts

Paso 1

     Ok, lo primero que necesitamos hacer es crear un nuevo documento. Dependiendo de donde vayas a imprimir tus tarjetas, puede que necesites usar un tamaño distinto. Supongamos que nuestra imprenta tiene un tamaño de tarjeta por defecto de 90mm x 55mm.

 

     Cuando se envia algo a la imprenta, se necesita añadir una especie de borde alrededor de la imagen llamado sangrado. El sangrado es, en resumen, un espacio en los bordes de tu diseño hasta donde llega la imagen pasando de donde la imprenta cortará el papel. De esa forma si el corte se desplaza un milímetro en algun lado, no aparecerá el papel blanco en el extremo. Cuanto espacio dejar para el sangrado también puede depender de tu impresora. Podemos generalizar diciendo que entre 2 y 5 mm es un buen sangrado.

     Debido a una limitación de Photoshop (el cual veremos mas adelante) vamos a usar un valor de 3mm. Así que cuando creemos la imagen, en lugar de crearla de 90mm de alto vamos a hacerla de 90mm + 3mm de sangrado a la izquierda + 3mm de sangrado a la derecha = 96mm. Igualmente con el ancho, la haremos de 55+3+3 = 61mm. O sea, Archivo >> Nuevo y 61mm de ancho x 96mm de alto.

     Fijate también que debido a que estamos haciendo algo para imprimir deberías fijar la resolución a 300dpi y el modo de color de momento será RGB. Hablaremos más acerca del modo de color más adelante, pero con la resolución deberías fijarte que los 300 dpi son para que la imagen tenga mas información disponible y así obtengas una impresión de calidad.

     Si alguna vez tienes que hacer un poster enorme, podrás a veces llegar a imágenes de 120dpi, pero dependerá de lo lejos desde donde la persona estará mirando tu trabajo. Si imprimies a 120dpi, la calidad será bastante mala, pero si es un poster gigante (piensa en metros en vez de centímetros) entonces puedes usar esa resolución. De todas formas como esto es una tarjeta de visita, deberíamos usar 300dpi para que sea una impresión de alta calidad.

Nuevo documento con tamaño tarjeta visita

Paso 2

     Una vez hayas creado el documento lo primero que necesitamos es añadir algunas guías para mostrarnos donde quedan los bordes de la tarjeta de visita y donde empieza el sangrado (también llamado sobrante). Así que antes de nada presiona Ctrl-R para mostrar las reglas. Ahora, para añadir las guías puedes hacer click en la regla y arrastrar las guias fuera del documento o para hacerlo de una manera mucho más precisa, ir a Vista > Guía nueva... y entonces darle como posición horizontal 3mm. Repítelo de nuevo para la posición vertical en 3mm. Y repítelo dos veces mas con la vertical en 58mm y la horizontal en 93mm.

Establecer Guas

Paso 3

     Ahora deberías tener un lienzo vacio similar al mostrado aquí abajo con 4 guías, cada una a 3 mm del borde.

Documento con guias para sangrado / sobrante

Paso 4

     Elegí esta textura de hormigón porque me gustó su aspecto tosco y urbano. Puedes bajarte la textura tu mismo si visitas el sitio de Arsenal y te dirijes a la sección Freebies (gratis).

Fondo tarjeta con textura hormigón.

 Paso 5

     Tras pegar la textura, pulsa Ctrl-T para transformarla aproximadamente al tamaño de nuestra tarjeta. Aunque quiero que la textura parezca sucia, quizás ahora mismo esté demasiado sucia y con impurezas. Así que primero quitaré las dos grandes lineas que la recorren de izquierda a derecha. Podemos hacer esto con la herramienta “Tampón de Clonar (S)“. Presiona ALT para seleccionar el área que quieres clonar (en este caso usé el área justamente encima) y luego pinta sobre el área que quieres clonar.

Transformar tamaño textura

 

     Si usas un pincel suave sobre una textura como esta, es bastante dificil de detectar el retoque a no ser que estes buscando pruebas del clonado directamente.

Clonado textura

Paso 6

     Ahora ya lo tenemos aún tosco y urbano pero sin pasarnos.

     En este punto decidí que quería oscurecer la textura, así que añadí una capa encima rellanada con el color #797c82 y la fije con “Multiplicar”.

Cambio Modo de color

 

Paso 7

     A continuación queremos dibujar algunos bloques en diagonal. Así que coge la herramienta Lazo poligonal (L) y crea una nueva capa.

 

     Ahora tienes que dibujar la forma que se muestra más abajo, para hacer esto facilmente deberías dejar apretada la tecla SHIFT para forzar que los ángulos sean multiplos de 45º y obtener una bonita forma.

 

Lazo poligonal dibujar bandas

Paso 8

     Una vez tienes la forma, rellenala con el color: #c4b10f el cual es un amarillo horroroso, y luego fijale el modo de fundido a “Sobreexponer Color“. Y ahora deberías tener un amarillo brillante que se parezca al que tienes aquí abajo.

 

     De cualquier modo duplica esta capa hasta que tengas 6 barras amarillas y espacialas a ojo de manera que esten distribuidas de derecha a izquierda (las espaciaremos mejor en el próximo paso).

 

Dibujando barras amarillas

Paso 9

     Ahora en vez de intentar espaciar a ojo o pulsando la tecla con la flecha el mismo número de veces (lo cual confieso que suelo hacer), usaremos las herramientas de alineación. Así que primero deja pulsada la tecla SHIFT y selecciona todas las capas con barras amarillas en ellas, luego en la barra de herramientas de arriba haz click en la herramienta de alineación marcada abajo. Esto las espaciará automaticamente y con exactitud.

 

     Fijate que creo que en versiones de Photoshop anteriores a la CS2 necesitabas enlazar las capas con ese pequeño clip para papeles, porque la selección de capas con la tecla shift apareción en la CS2 – la versión que uso. Espero que sea igual en la CS3).

Espaciando objetos en photoshop

Paso 10

     OK, ahora tenemos estas marcas bien espaciadas con un aspecto así como industrial!

Barras amarillas espaciadas correctamente

Paso 11

     A continuación creé una nueva capa encima y con un suave y gran pincel lo pase a lo largo de los extremos. Recuerda, que cualquier cosa por fuera de la guías muy probablemente no salga en la tarjeta final (al menos que la imprenta no las corte), así que el negro debería extenderse un poco sobre la linea si es que se quiere visible en el producto final.

Borde de sangrado

Paso 12

     Una breve discusión sobre el sangrado / sobrante de nuevo; como mencioné anteriormente cualquier cosa por fuera de las guías es material extra para la imprenta,  y que probablemente sera desechado. Así que es primordial no poner cosas importantes como texto cerca de los bordes al menos que no te importe que pueda ser cortado. En mi experiencia, la mayoría de las imprentas en la práctica no se van lejos de la linea de corte, sin embargo puede suceder, especialmente si usas una imprenta barata.

Sangrado / sobrante para imprenta

Paso 13

     Un problema al hacer este tipo de cosas en Photoshop es que no hay forma de ocultar automáticamente el área de sangrado, lo cual supone a veces que cuando miramos el diseño no parece correcto. En InDesign puedes cambiar a un modo especial de previsualización el cual oculta el sangrado, pero en Photoshop lo tenemos que hacer manualmente. Así que a menudo creo una capa encima de todas las demás y relleno el área de sangrado de blanco, y entonces puedo mostrar/ocultar esta capa para así ver un poco más exactamente las proporciones y área que ocupará el elemento finalmente impreso. Asegurate de ocultar esta capa antes de enviar a la imprenta!

Capa para ocultar sangrado

Paso 14

     Luego coloqué algún texto en la tarjeta. Esta es en realidad la parte de atrás de la tarjeta (haremos la de delante en un minuto). Usé una agradable fuente llamada DIN, muy minimalista y con un caracter ‘@’ estupendo.

 

     Fijé el tamaño a 8pt. Si recuerdo bien, nunca deberías usar uno menor de 6pt si quieres que sea legible, y si quieres que se lea facilmente entonces de 7.5pt para arriba. Como con todo, este tipo de cosas depende de quien sea tu audiencia. Para las tarjetas de visita yo elegiría algo que una persona pueda leer rapidamente de un vistazo cuando esté buscando entre sus tarjetas.

 

También fijé el modo de fundido a ‘Luz Lineal‘ de manera que interactúe un poco con el fondo. Una vez hecho esto, podemos salvar el documento como Back.psd y luego ve a Fichero > Salvar como.. y esta vez sálvalo como Front.psd, para duplicar el fichero y hacer la parte de delante.

Parte trasera tarjeta de visita

Paso 15

     Una vez más, para el frontal he añadido algo de texto con la dirección de mi web, direccón de correo, etc. Y para aquellos amantes de las fuentes entre vosotros, echad un vistazo al caracter ‘@’, ¡no es elegante! La fuente DIN es un tipo de letra industrial originaria de Alemania sobre la que puedes leer mas en la wikipedia.

 

     La tipografía – o el arte de usar tipos/texto en tus diseños – es una de esas partes super importantes del diseño. Si no tienes  una educación orientada al diseño, entonces es muy importante que leas algo al respecto, porque es la manera mas fácil de distinguir un buen diseñador de uno malo. Un buen blog sobre tipografía es el blog de John Boardley (iLoveTypography ).

Tipografias, tipos de fuente

 

Paso 16

     Ahora lo próximo que queremos hacer es desactivar algunas de esas capas que tienen las barras amarillas, dejando sólo 3 de ellas. Quiero conseguir el efecto de que parezca que las barras empiezan en la parte delantera y continúan alrededor hasta la parte de atrás.

 

     Luego usando la herramienta de “Lazo Poligonal (L)“, dibuja una forma triangular tal como se muestra.

Herramienta de lazo para dibujar forma

Paso 17

     Ahora crea una nueva capa justo encima de la textura de hormigón y rellenala con un gris oscuro y pon el modo de fusiónado en “Multiplicar“. Ahora, desafortunadamente, este paso hace que el amarillo parezca algo soso, así que pasaremos a corregir eso.

Nueva capa

Paso 18

     Para ello haz Ctrl-Click en la primera de las capas con barras amariilas y dejando pulsada la tecla SHIFT, haz click en la siguiente, y en otra más, de manera que tengas seleccionados todos los pixels de las tres. Luego presiona CTRL-SHIFT-I para invertir la selección como se muestra. Con esto seleccionado, haz click en la capa del triángulo y haz click en el icono de “Añadir una máscara de capa” de la paleta de capas. Esto hará que las áreas de las barras amarillas queden con brillo.

Añadir máscara de capa

Paso 19

¡Y aquí lo tenemos! Todo hecho…

     Ahora ve a Capas > Acoplar Imagen y luego Imagen > Modo > CMYK para tenerla lista para la imprenta. Fijate que como hemos acoplado la imagen hemos preservado la manera en que el amarillo interactúa con la parte de atrás incluso ahora en CMYK. Así que hemos usado el RGB para conseguir un efecto y luego acoplado todo y cambiado a CMYK para poder imprimirlo así.

Pasando a CMYK para la imprenta

 Paso 20

     Ahora ve a Fichero  > Imprimir con Previsualización y deberías ver algo como lo que se muestra abajo.  Si no tienes todas las opciones, haz click en ‘Más opciones’ y te aparecerán. Asegurate que tienes elegida la opción “Marcas de esquina“, y luego haz click en el botón que dice ‘Sangrado’ y ponlo a 3mm, Fijate que Photoshop no te deja elegir valores mayores que 3,18 mm para el sangrado, No se realmente porque, pero pueda que tengan alguna increible razón que desconozco.

 

     Una vez que lo has hecho deberías poder imprimirlo a un PDF, haz lo mismo para la parte de atrás, y llévala a tu imprenta. Recuerda que para imprimir a PDF necesitas tener instalada una copia de Acrobat  (no la version Reader que es gratuita, sino la de pago), aunque hay otras utilidades que hacen lo mismo y son gratuitas como PDFCreator.

Resultado final. Tarjetas de Visita

 

 

fuente: leemiblog 

 

Publicado el noviembre 4, 2007 en Tutoriales y etiquetado en , , , , , , . Guarda el enlace permanente. 2 comentarios.

  1. Nrecesitamos realizar 500 tarjetas personales y 1500 revistas para la próxima entraga de los Premios Martín Fierro al cable. Nos gustaria que contemplen la posibilidad de realizarlas a cambio de publicidad en afiches, tv, espacios del evento, etc. Muchas gracias, Vícto Etchepare.
    Productor General.
    011 156568 1417

  2. Hola!
    Estoy estudiando fotografia!
    Y quiero descargarme un Photoshop bueno!
    nadie sabe recomendarme uno!
    mi idea es empezar haciendo unos trabajitos con TARJETAS de cumpleaños, bautismo, casamientos etc!
    si me pueden recomendar algo estaria muy agradeida
    gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: