Tutorial

🎨¡Un Increíble Catálogo de Productos en Photoshop!

Catálogo digital. Aprenderás a crear un catálogo profesional en Photoshop. Con vídeo paso a paso..

 

PHOTOSHOP

CATÁLOGO

Mar 23, 2024

Montoya A.

20min de lectura

Reproducir video acerca de Catálogo Photoshop

Hola amigos de Marieú Technology Corporation, ¡un increíble catálogo en Adobe Photoshop! En efecto, en esta guía, paso a paso, aprenderás a cómo elaborar un catálogo de productos digital en Adobe Photoshop.

Adobe Photoshop es un programa de edición de imágenes, desarrollado por la empresa Adobe Systems. Entre algunos beneficios, tiene compatibilidad con todas las aplicaciones de Adobe Systems, retocar imágenes, modificar colores, añadir filtros, efectos, entre otros. La empresa de Adobe ofrece distintos planes, enfocados a empresas, uso personal o académico.

¿Cómo elaborar un catálogo de productos en Photoshop?

Para iniciar, tenemos un pequeño diagrama para diseñar catalogo en Photoshop. Vamos a integrar cuatro aplicaciones: Envato Elements, Miro, Adobe Photoshop y Creative Cloud Desktop. Para el primero, lo vamos a utilizar para obtener el template, según el rubro de la empresa. Además, Miro para organizar a los templates. Vamos a ordenarlos en orden, una vez que encontremos los productos. Después de ello, vamos a utilizar Adobe Photoshop. Tenemos 6 pasos para obtener, finalmente, el catálogo de productos y adaptarlo a los temas de nuestra empresa.

Dentro de estos seis pasos, tenemos los siguientes. Número uno, abrimos el archivo punto psd; número 2, editamos los textos. Entre algunos textos, tenemos los mensajes de la empresa, costos, de repente tenemos algunos descuentos, también lo podemos incluir en cada uno de los productos, correos, número, entre otros.

Entonces, número 3, colocamos las imágenes del logo de la empresa, el cual implica, si lo tenemos en formato PNG o en formato JPG, lo podemos colocar dentro del catálogo. Número 4, insertamos imágenes de los productos o de los «products». Estos productos que están aquí, lo hemos tenido organizados aquí, en el template. Entonces, se nos va a ser mucho más sencillo solamente insertarlos.

El número 5, cambiamos el color de background, el cual implica que, cambiemos el fondo y que se alinee mucho a nuestros colores de nuestra página web. De repente, si tenemos azul, celeste, lo podemos alinear a que nuestro catálogo tenga los mismos colores. Número 6, exportamos como automatizar slash presentación en PDF. Esa opción no tenemos dentro del Photoshop, Adobe Photoshop.

Finalmente, también vamos a usar lo que es la aplicación de Creative Cloud Desktop para dos cosas. La primera es que se deben actualizar las aplicaciones, siempre es bueno tenerlo actualizado a la última versión para evitar algunos errores dentro de la exportación. Y, número dos, vamos a agregar algunas «fonts» externas, que son, en este caso, las fuentes externas.

Diagrama de arquitectura Catalogo de productos Marieu

Diagrama: ¿Cómo hacer un catalogo en Photoshop?
Fuente: Propia, mediante software Miro.

Entonces, para obtener el catálogo en Envato Elements, dentro de la plataforma tenemos mis colecciones, ahí podemos crear nosotros una colección nueva, catálogos y ponemos crear. En nuestro caso, nosotros tenemos aquí en websites Marieú Techno Corp. Entonces, son algunas de las páginas que ya hemos estado almacenando, estamos guardando. Entonces abrimos aquí, de la categoría de GYM, ponemos «añadir colección» y lo ponemos añadir dentro de nuestra colección, para que lo tengan almacenado dentro. Una vez que tengan guardado todos los templates, para su catálogo, pueden ustedes clasificar, dependiendo del rubro de la empresa, pueden ordenarlo de la siguiente manera.

Tenemos fitness GYM, construcción, cuidado de salud y mecánica. Por cada fila, ustedes pueden colocar en orden los productos. Son enlaces que te llevan directo a cada uno de los templates. El que vimos ahora, por ejemplo, está aquí, el número 5. Una vez que hemos descargado, vamos a abrir el template y ¡ahí está!

Luego, la recomendación inicial, que se hace aquí, es que tenemos varios grupos de carpetas que están completamente abiertos. Entonces, lo que tenemos que hacer es cerrarlos, para poder identificar cada una de las capas. Cerramos todos y ahora vamos a identificar cada una de las capas. Por ejemplo, si le quitamos la visualización vamos a ver a qué capa pertenece, en este caso, es el logo.

En seguida, para este tutorial diseño catálogo, vemos que el segundo y el tercero, ambos casos son viñetas, ¿qué tipo de viñetas?, son viñetas de puntos, ¡ahí está!. Para el siguiente, tenemos para insertar tu texto aquí. Si nosotros quitamos la visibilidad, vemos que, efectivamente, se trata del todo el texto que está dentro del template. Siguiente, aquí «elements» que son los marcos. El que sigue es insertar tu imagen aquí, efectivamente, aquí vamos a colocar las imágenes de los productos y, finalmente, el background.

El background es el fondo, este fondo lo podemos modificar para alinearlo al color de la empresa, ¡listo! Una vez que ya hemos identificado cada uno de los grupos, vamos a iniciar con los textos. Por ejemplo aquí, vamos a colocar el nombre de la empresa, Marieú Technology Corp., dirección, lo tenemos aquí, seleccionamos y la dirección de la página web.

Ya cuando tenemos la mayor parte de los textos: título, la dirección, tenemos un poco detalle sobre Marieú, características del plan, pueden poner también características de sus productos, lo tienen en lista de viñetas, y después vamos a continuar con los costos, si hay algún descuento, y algunas frases de tu empresa. Entonces, hemos colocado en oferta, gran diseño, gran idea, de confianza, atención 24/7, y, hemos colocado, el costo de uno de los planes. Ustedes pueden variarlo, va a depender de su producto y de su promociones que ustedes están ofreciendo.

Ahora, vamos a pasar a los textos de los contactos y alguna URL externa, ¡listo!. Entonces, ya hemos agregado los contactos, algún correo, en este caso de la empresa, tenemos la ubicación, algunos enlaces de redes sociales, como en el caso de Facebook, Tiktok, Instagram y, finalmente, una URL externa. En este caso, la URL de la página web de la empresa, ¡listo!

Entonces, ahora que ya hemos incluido los textos, vamos a continuar con la imagen de la empresa y de los productos. Abrimos el archivo, tenemos la imagen que marca de agua, 150 por 150 píxeles, arrastramos y soltamos. Nos acercamos con ALT y la rueda del mouse. Recuerden siempre la relación de aspecto, ¿donde lo encontramos o donde podemos bloquearlo? aquí, toda la relación de 14.69%, tanto va a ser en ancho como en alto.

Entonces, ahí está bloqueada, ¿para qué? para que no se deforme el logo. Ponemos ENTER, entonces ¡ahí está! esa «manito» lo pueden ver en el vídeo anterior, que lo hemos insertado desde Envato Elements, ¡listo chicos! Entonces, ya hemos incluido lo que son las imágenes del logo de la empresa, también vemos adicionado dos imágenes en 3D emojis y, hemos adicionado, un QR. Tenemos un vídeo en particular para cada uno de ellos.

Ahora, lo que vamos a hacer es insertar las imágenes de los productos en cada uno de los cuadros, ¿cómo lo hacemos? hacemos dos veces clic aquí y, si se dan cuenta, nos direcciona a la imagen que está vinculada, dos veces clic y ponemos «ok». Entonces, aquí es donde, cada uno de los productos, van a ser insertados. Entonces, aquí vamos a insertar el producto, dentro del cuadro, ponemos ENTER. Ponemos archivo, guardar y validamos, ¡ahí está! Entonces chicos, aquí ya tenemos todas las imágenes de los productos agregados. Ahora lo que vamos a hacer es cambiar el color del background, recuerden que estaba en la parte final. Entonces, seleccionamos y lo pueden modificar.

Por ejemplo, para esta portada de catálogo, si nosotros queremos un azul, en este caso, se recomienda variar directamente la barra de colores más no el código hexadecimal. Si queremos, quizás, rosado ponemos «ok», para el siguiente, también. Para el caso del marco, si queremos nosotros cambiar el color, primero seleccionamos. Una vez que lo identifica la capa, vamos a abrir estilo de capa. Hacemos dos veces clic y aquí, en «color», vamos a cambiarle, «ok» y ¡ahí está!

Fitness GYM Catalogo WebSites Marieu

Fitness GYM - Catálogo digital productos en Photoshop.
Fuente: Propia, mediante software Adobe Photoshop.

Resultados Finales

Listo amigos, para concluir con el diseño de catálogo en Photoshop, una vez que hemos cambiado el color del background, ponemos archivo, automatizar, presentación en PDF. Seleccionamos, en este caso, el archivo del catálogo, lo dejamos por defecto algunas configuraciones y ponemos guardar. Nosotros lo vamos a guardar como «catálogo», dejamos por defecto, siempre impresión en alta calidad y ponemos guardar en PDF. Abrimos el archivo que hemos exportado y ¡ahí está! Probamos algún enlace que hemos insertado, de la URL de la empresa y ¡ahí está! ¡Listo, Gracias amigos de Marieú Technology Corporation!

Montoya Godenzi Daniel Alejandro escala 20

EL AUTOR

Daniel Alejandro Montoya Godenzi

Alejandro, con el grado de magíster en Administración y Dirección de Proyectos e Ingeniero Mecatrónico, dispone de experiencia en proyectos de entorno tecnológico digital. Forma parte del equipo de Marieú Technology Corporation. En su tiempo libre, le gusta crear nuevos proyectos, leer un libro o ver una serie.

SIGUE LEYENDO

Deja una respuesta

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

Marieú Technology Corporation

Marieú ofrece servicios de creación de páginas web, marketing digital, producción audiovisual y catering, que facilita los negocios en las empresas.

Boletín informativo

Al ingresar acepta nuestros  T&C  y  las Políticas de privacidad.

Marieú Technology Corporation
©Todos los derechos reservados