LeeMiBlog

 


Web sobre Informática, Internet y Nuevas Tecnologias.

Un lugar en el que podrás encontrar articulos, noticias, tutoriales, trucos, ayudas, etc...

Inicio   Categorias   Contactar   Politica de Privacidad
Tarjetas de visita con Photoshop
Escrito por Manu   
Domingo, 28 de Octubre de 2007 20:21

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.


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

PaP Tarjetas de 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 Guías

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

Hits: 35145
Comentarios (41)add comment
No es robado, al contrario
Yo creo que todo lo contrario de robar. Los autores de este blog se han molestado en traducir ese tutorial y difundirlo, ayudando a otros usuarios y ampliando así el conocimiento. Lo mínimo que habría que hacer es agradecérselo. Enhorabuena chicos! Y gracias!
1

09-09-08
Visto lo visto, muchas veces se le quitan a uno las ganas de traducir ni publicar nada, nuestra unica intención era la de acercar este magnifico tutorial de psdtuts.com a los que no dominan el ingles, o los que aunque conociendo la lengua britanica les resulte mas comodo leerlo en castellano. Y aun asi, para muchos, hemos "robado"... sin comentarios.
2

09-09-08
Alex: ...
OJALA Y TRADUCIERAS MAS TUTOS COMO ESTE, YA QUE LO QUE UNO ENCUENTRA RARA VEZ ES EN ESPAÑOL. SALUDOS DESDE MEDELLIN-COLOMBIA!!!
3

09-09-08
Se agradece que como ya se dijo, se tomen la molestia de traducir un tutorial y así llegue a personas que hablamos el español o que se nos facilita más, puesto que es nuestro idioma.

Espero poder ver mas tutoriales excelentes como éste.
Saludos desde México.
4

09-09-08
belen: ...
Me he atrancado en los pasos 7-8 y 9. en el 7---> no me sale = de recto ke a ti 8---> duplico las capas pero no me salen las barras esas amarillas, se me keda la misma ke he creado y en el paso 9---> (xk he pasado del 8 al 9 sin mis 6 barritas) no me deja seleccionar todas las capas.. he probado con mayusc...
5

09-09-08
Mirá, creo que es uno de los mejores blogs sobre diseño que visité en los últimos tiempos. Te felicito! Saludos
6

09-09-08
cecy: ...
QUIERO APRENDER MAS AUN
7

02-12-08
Empire Films: ...
Me pareció de gran ayuda, los que critican son por lo general los que nunca ayudan a nadie y les molesta que las demás personas surjan o aprendan, en verdad en nombre de nuestra empresa los felicito por haberse tomado el trabajo de escribir esta tutoría en español, esperamos muchos otros hasta pronto, un abrazo desde Bogotá Colombia.
8

14-01-09
Andres Guerrero: ...
Exelente Tutorial! Muy Explicativo y 100% Entendible.! Congratulations For u My Friend!smilies/cool.gif
9

10-02-09
myckel coronado: ...
Muy bueno es lo que buscaba exactamente smilies/grin.gif
10

11-02-09
Yaredmix: ... http://ups!!
Excelente Gracais !! smilies/shocked.gif
12

28-02-09
Tony: ...
Ni caso. No hagas caso de energumenos como ese. De esos hay por miles, y todos estan cortados con el mismo estilo. Para mi que los fabrican en serie y no en serio. Tipejos que deprecian en trabajo y el esfuerzo de personas que hacen traducciones, salen hasta debajo de la cisterna del WC. No saben que es el talento, de dicacion o la buena voluntad, aunque si safen tocar los huvo ymoestar con comentarias inapropiados a un trabajo bien hecho. En resument odo se reduce a laputa envidia que tienen de gente como tu tu, que es brillante, y que a ellos les crea complejo de impotencia o de inferiodidad.
13

06-03-09
Excelente, gracias
14

05-04-09
TiTO: ...
muchas gracias ..!! no sabes lo dificil que es encontrar tutos tan explicados ..!! smilies/cheesy.gif smilies/wink.gif
sigue traduciendo más tutos así! . te estaré agradecido smilies/grin.gif
15

10-04-09
BoUs: ...
Quiero agredecer el esfuerzo que has realizado en publicar este tutorial.Estoy aprendiendo poco a poco las técnicas de este maravilloso programa, gracias porque me ha servido de mucho.

Saludos
16

14-04-09
kike_01: ...
que tal, soy nuevo en esto del diseño haciendo un intento por realizar este tutorial pero tuve problemas con los pasos 18 y 19 me podrian ayudar.gracias
17

16-04-09
Exelente traduccion.. realmente hacen un muy buen trabaj.:: gracias... en espera de mas tutorialse... exito en sus labores.
18

15-05-09
excelente tuto mil gracias smilies/wink.gif
19

08-06-09
Tachi: ...
Me ha servido de mucha ayuda. Gracias. chicos smilies/grin.gif
20

13-06-09
Muy buen tuto!!!!
21

01-07-09
nikky: ...
Gracias se ve buenisimo
22

06-07-09
hErO: ...
muy buen tutorial, bastante claro, felicidades...saludos desde Mexico
23

15-07-09
jova: ...
Vaya si que esta excelente este tutorial………. Gracias por tener en cuenta nuestro idioma, saludos desde Colombia
24

18-07-09
maria zapata: ...
encontre fantastico que hubiese algo facil, a la verdad lo voy a probar si no me resulta espero contar con vuestra ayuda?

gracias smilies/grin.gif smilies/grin.gif
25

27-07-09
juan manuel: ...
saludos me parese muy bueno el tutorial pero no podrian explicarlo un poco mas soy nuevo en photoshop y al querer hacer el tutorial me perdi yo tengo cs4 y no pude bajar la textura
26

05-08-09
Excelente el tutorial, sea original o traducido, se agradece mucho el trabajo que se dieron.

Saludos.-
27

19-08-09
SD6: ...
muchas gracias por traducirlo, he hecho todo y me ha quedado identico, no hay necesidad de mejorar la explicación, al q pidió la textura le quedaría mas sencillo copiar la imagen de la textura q está aca puesta y simplemente abrir el documento .jpg para editarlo en PS al menos así hice yo.
28

24-08-09
adn489: ... http://notengo.com
no les hagas caso a esa bola de huevones,gracias por el contenido de tu blog; a personas como nosotros que nos late diseñar y que podemos gracias a estos contenidos acercarnos a un mundo mas chido y mas completo del diseño.
ai tamos y cualquier cosa , que ,que ,ni madres te respaldo jejejeje
29

24-08-09
gracias hermano aprendi cosas nuevas haciendo esta tarjetillas nos saludos desde chihuahua
30

25-08-09
lamina: ...
Gracias por esta aportación. De gran ayuda todos.
31

09-09-09
hola: ...
gracias a ti y a otros tutoriales como el tuyo mi profe se ahorra mucho trabajo teniendonos entretenidos con esto.
32

01-10-09
ramon: ...
Animo, que lo que haces no tiene precio. No te desanimes por desagradecidos, que el mundo por desgracia, está lleno!

Un abrazo!
33

22-10-09
Muchas gracias a todos por los comentarios.
34

22-10-09
martha: ...
muchas gracias.. sigue traduciendo estos tutos que son de mucha ayuda!!!
un beso! ;*
35

29-10-09
oscar: ...
muy bueno...si pudieras traducir mas tutos como este!!me ha ayudado mucho gracias...
36

01-11-09
Wicho: ...
EEH!!! Que esto es copiado!!! Desde luego, qué falta de originalidad!!
37

07-01-10
Arnoldo: ...
Muy buen tuto
Gracias me sirvio de mucho, el otro estaba en ingles ja ja ja, sigue asi.

Un saludo desde Guadalajara, Jalisco.
38

25-01-10
flooket: ...
ante todo muchas gracias por "traducir" este magnifico tutorial el cual nunca he encontrado en PSDTuts y la verdad que siempre me ha dado palo tener que llevarme los archivos de impresión a Indesign para las marcas pero lo que si es cierto a parte de la buena labor con los tutoriales es que para que no os vuelvan a acusar injustamente deberíais de citar la fuente de donde fue sacado el tuto en cuestión y así mas de un "listillo" no podra abrir la boca. repito, EXCELENTE LABOR smilies/wink.gif
39

10-03-10
Enhorabuena! Era justo lo que buscaba...lo he intentado hacer, pero tengo una duda...cuando tengo el diseño se me queda en medio del folio...hay alguna forma para que o se vea solo el diseño o se me duplique varias veces para aprovechar el folio?
40

11-03-10
Japo: ...
Hola A todos. Permitanme o pinar, que buen desempeño al colaborar con esto del diseño profesional. Es una buena labor contar con este tuturial. Antes de verlo aqui lo vi en PSDtuts, oviamente antes de conocer este sitio en la red. En mi opinion, y segun lo visto no hay que preocuparse por las malas apreciaciones puestas en comentarios, que a modo general nunca faltan. Hasta para las mejores cosas hay criticones, pero eso no debe ser obstaculo para proximas publicaciones. Aki no se ve material "ROBADO" pues se respeta la fuente original y se hace alucion a esta desde que inicia el tutorial, por lo que queda salvo la responsabilidad de su puclicacion.

Gracias por publicar este tutorial en nuestro lengua hispana y un saludo especial para mis paisanos de Colombia!!!! Mi tierra querida Carajo!.

Japo. desde Santander.
41

12-03-10

Escribir comentario
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
   
 

LeeMiBlog recomienda:

Clicky Web Analytics

Clicky

 
Contenido liberado bajo licencia CC por LeeMiBlog.
Joomla!
es un software libre publicado bajo la licencia GNU/GPL.
Top