Tutorial: Combinar gráficos de Illustrator con imágenes de Adobe Photoshop

tutorial-vectores-bitmaps

En muchas ocasiones necesitamos servirnos de diferentes herramientas y aplicaciones para combinar gráficos y así obtener determinados resultados. Para trabajar en una imagen compuesta con elementos procedentes de diferentes aplicaciones y en diferentes formatos, será necesario que conozcamos las características de cada documento con el fin de optimizar nuestra composición y aportar la mayor calidad visual posible. Para introducir todo esto, construiremos una composición muy sencilla trabajando con un logotipo previamente creado en Adobe Illustrator y una fotografía. Trabajaremos desde Adobe Photoshop, aunque por supuesto posteriormente podremos volver a la aplicación de Illustrator y continuar con nuestro trabajo.

Para comenzar a trabajar en esta labor deberemos tener bien clara la diferencia entre en los formatos mapas de bits y gráficos vectoriales.

En Adobe Photoshop se usan las imágenes raster (imágenes de mapas de bits), que están basadas en una cuadrícula o conjunto de píxeles. Al trabajar con imágenes de mapas de bits, se editan grupos de píxeles. Este formato es apropiado para trabajar las imágenes de tonos continuos como las fotografías. El principal problema de esta opción es la pérdida de definición y el fenómeno de pixelación cuando se aumenta su escala.

bitmaps-pixelacion

Por otro lado, los gráficos vectoriales (gráficos utilizados en aplicaciones como Illustrator), son generalmente denominados gráficos de dibujo. Estos se componen de formas basadas en expresiones matemáticas. Su apariencia aporta mayor precisión, consisten en líneas claras y suaves que conservan su nitidez cuando modificamos su escala. Esto lo hacen perfectos para todo tipo de ilustraciones, textos y gráficos como logotipos que requerirán ser utilizados en diferentes tamaños y disposiciones.

vector_bits

Los pasos para combinar gráficos son los siguientes y están explicados con el mayor nivel de detalle posible, porque soy consciente de que puedes estar haciendo tus primeros pinitos con estos programas.

  • En primer lugar reiniciaremos Adobe Photoshop. Importaremos la fotografía o bien abriremos nuestro archivo en formato .psd si lo tuviésemos en el menú Archivo> Abrir.
  • Podremos abrir el archivo de Adobe Illustrator como un nuevo archivo en Adobe Photohoshop o también podremos utilizar los comandos de Colocar o Pegar para añadirlo.  Cuando hagamos esto Photoshop rasterizará (analizará su trama) para convertirla en una imagen de mapa de bits. El comando colocar de Photoshop ofrece la ventaja de permitir cambiar la escala de la imagen cuando aún es una figura vectorial, así el cambio de la escala no hará descender la calidad de la imagen. Sin embargo si cortamos o pegamos en Photoshop un gráfico procedente de Illustrator los cambios de escala posteriores degradarán la calidad de la imagen.tutorial
  • Una vez importado nuestro vector, mantendremos pulsada la tecla Shift. Arrastraremos el vértice de la fotografía y modificaremos su tamaño para adaptarlo a las dimensiones adecuadas y de forma proporcional. A continuación arrastraremos colocando el cursor en la zona central para colocar la imagen en la posición adecuada. Será necesario que rotemos la imagen sutilmente en Edición> Transformar> Girar.tutorial2tutorial3
  • Distorsionaremos el archivo para adaptarlo a la forma de la caja. En primer lugar recortaremos la mitad. Sobre la capa del logotipo seleccionaremos la herramienta de lazo poligonal y haremos clic en la esquina frontal derecha de la parte superior de la caja. Arrastraremos hasta la esquina siguiente y continuaremos  alrededor de su zona superior.tutorial4
  • Con un Ctrl + X cortaremos este área. Crearemos una nueva capa y pulsaremos sobre pegar o Ctrl + V.tutorial5
  • Sobre esta nueva capa pulsaremos en el menú Edición> Transformar> Sesgar.tutorial6
  • Arrastrando los manejadores del cuadro delimitador y así distorsionaremos el logotipo para que se adapte a la perspectiva de la caja.tutorial7
  • Para lograr un efecto realista de integración podemos hacer uso de diferentes modos de fusión. Con la capa 1 activa en nuestra paleta de capas, cambiaremos su opacidad en torno a un 60%. A continuación oscureceremos esa zona inferior del logotipo para que funda con la sombra frontal dela caja. Lo haremos cambiando la opacidad de ese área en un 70% y seleccionaremos Multiplicar en el menú de modos de fusión.tutorial8tutorial9
  • Será necesario que creemos un fondo transparente ya que lo único que nos interesará será la caja. Para ello utilizaremos una herramienta de selección y bordearemos con ella los límites de la caja.tutorial10
  • Pulsaremos Selección> Invertir y después sobre eliminar o la tecla de Suprimir.tutorial11tutorial12
  • Si pretendiésemos terminar nuestra composición en Illustrator podremos utilizar los archivos .psd. Illustrator admite la mayoría de los datos de Photoshop, incluidas composiciones de varias capas, texto editable y trazados.

De todos modos en posts posteriores profundizaremos en las opciones de transferencia de archivos entre aplicaciones y los ajustes de compatibilidad entre diferentes programas para obtener los resultados óptimos de una forma ágil y profesional. Ten en cuenta que en muchas ocasiones las composiciones deben ser tratadas con diferentes herramientas.

 

.

 

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *