Advertisement
  1. Design & Illustration
  2. Icon Design

Más de 15 temas de WordPress con carga superrápida de páginas (gratuitos y prémium) para 2020

Scroll to top
Read Time: 16 mins

Spanish (Español) translation by Manuel (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Como diseñador, probablemente te has preguntado qué producto de Adobe hace un mejor trabajo cuando se trata del proceso de creación de iconos.

Algunos adoran Photoshop, mientras que otros confían exclusivamente en Illustrator, pero si buscas en la web, verás que no hay una comparación realmente exhaustiva entre ambos.

Siendo ese el caso, hice lo que siempre hago y me tomé el tiempo de poner los dos a prueba para averiguarlo.

Si quieres aprender a hacer iconos, ya sea un paquete de iconos de línea, un conjunto de iconos de redes sociales o incluso un par de conjuntos de iconos para Mac, primero tienes que averiguar qué software se adapta mejor a ti.

Hoy en día, con toda la tendencia del estilo de iconos minimalistas, el diseño de iconos es cada vez más accesible, lo que significa que, siempre que se dedique tiempo y energía, se debería poder cultivar el oficio, suponiendo que se tenga la herramienta adecuada para el trabajo.

Desde un simple icono de ayuda hasta un conjunto de iconos de desarrollo, el software puede afectar y afectará a la forma en que diseñes tus activos, por lo que quiero mostrarte cómo se comportan ambos en este proceso creativo.

¡Dicho esto, vamos a entrar directamente en materia!

1. ¿Cuál es la finalidad creativa de cada programa informático?

Aunque tanto Photoshop como Illustrator forman parte de la misma familia de productos de Creative Cloud, en realidad responden a necesidades creativas diferentes, o al menos lo hacían hasta que Photoshop pasó de ser una herramienta dedicada a la edición y manipulación de fotografías a una herramienta creativa completa, capaz de hacer mucho más.

Entonces, ¿cuáles son las principales diferencias entre ambos?

Pues bien, si echamos un rápido vistazo a la página web oficial de Photoshop, veremos que Adobe anuncia el producto como:

El mejor software de imagen y diseño gráfico del mundo. Crea y mejora fotografías, ilustraciones y trabajos artísticos en 3D. Diseña sitios web y aplicaciones móviles. Edita vídeos, simula pinturas de la vida real y mucho más. Es todo lo que necesitas para hacer realidad cualquier idea.

A primera vista, parece una buena descripción del producto, ya que se obtiene una idea clara de lo que el software es capaz de hacer.

Ahora, pasemos a Illustrator y veamos cómo describe Adobe su otro producto:

El software de gráficos vectoriales estándar del sector te permite crear logotipos, iconos, dibujos, tipografía e ilustraciones para la impresión, la web, el video y el movil.

Bueno, como puedes ver, los dos son bastante similares en términos de sus casos de uso previstos, especialmente cuando se trata de diseño de iconos, ya que ambos se anuncian como capaces de manejar este tipo de proceso creativo.

Entonces, ¿cómo se decide realmente qué software puede ser mejor a la hora de crear iconos?

Bueno, la respuesta es un poco más complicada de lo que se cree, como veremos en los siguientes momentos, ya que todo se reduce a unos cuantos factores clave.

2. ¿Cómo es el soporte de mesas de trabajo?

Lo primero que un diseñador de iconos debería cuidar es el soporte de mesas de trabajo.

Aquí es donde los dos se diferencian, ya que Illustrator te da la opción de configurar múltiples Mesas de Trabajo desde el principio, utilizando su ventana de Nuevo Documento, haciendo que todo el proceso sea realmente sencillo e intuitivo.

setting up a new document in illustratorsetting up a new document in illustratorsetting up a new document in illustrator

Con la última actualización, el software es ahora capaz de crear la enorme cantidad de 1.000 mesas de trabajo, lo que para un diseñador de iconos es... realmente sorprendente.

Por otro lado, Photoshop, tanto si se utiliza la nueva ventana de aspecto elegante como la antigua, no parece ofrecer esta posibilidad.

Con la interfaz más moderna, tienes la opción de usar mesas de trabajo, pero no hay manera de establecer un número específico o ajustar cosas simples como el espaciado, el número de columnas o el método de distribución.

photoshop new document setupphotoshop new document setupphotoshop new document setup

Por supuesto, se puede evitar este pequeño problema de configuración cambiando a la herramienta de mesa de trabajo y añadiendo manualmente el número deseado de mesas de trabajo haciendo clic en uno de los signos más en función de donde desea que el software para posicionarlos, pero eso es mucho más tiempo de lo que debería ser.

example of setting up multiple artboards in photoshopexample of setting up multiple artboards in photoshopexample of setting up multiple artboards in photoshop

En lo que respecta al número máximo de mesas de trabajo que puedes configurar, no he podido encontrar ninguna información oficial, pero estoy bastante seguro de que está a la altura de Illustrator, así que 1.000. Me rendí después de la mesa de trabajo número 500. 

3. ¿Como funciona una selección básica de forma? 

Ahora que hemos visto cómo los dos manejan el proceso de configuración de las mesas de trabajo, vamos a echar un vistazo a la selección de formas.

En Photoshop, para seleccionar una forma, primero querrás asegurarte de que la Herramienta Mover (V) es la herramienta activa en ese momento, y entonces puedes simplemente hacer clic o arrastrar sobre la superficie de la forma deseada para hacer una selección.

example of selecting a single shape in photoshopexample of selecting a single shape in photoshopexample of selecting a single shape in photoshop

Ahora, el problema es que una vez que se selecciona una forma, no hay manera de saber si la selección se hizo o no, lo que para ser honesto es bastante molesto. 

La única forma de asegurarse de que realmente se ha hecho una selección es mirae el panel Capas, donde aparecerá un fondo más oscuro debajo de la propia capa de forma.

example of shape selection visible in the layers panel in photoshopexample of shape selection visible in the layers panel in photoshopexample of shape selection visible in the layers panel in photoshop

Por suerte para nosotros, podemos cambiar este comportamiento, primero seleccionando la forma, luego yendo a la Barra de Aplicación superior, y luego marcando la opción de Mostrar Controles de Transformación.

example of enabling the bounding box in photoshopexample of enabling the bounding box in photoshopexample of enabling the bounding box in photoshop

Si pasamos a Illustrator, veremos rápidamente que cuando se trata de la selección, el software hace un mejor trabajo ya que se siente más intuitivo desde el principio, sin que tengas que hacer ningún ajuste.

Para seleccionar una sola forma, podemos hacerlo fácilmente cambiando primero a la Herramienta de Selección y luego haciendo clic con el botón izquierdo del ratón o arrastrando sobre su superficie, lo que hará que aparezca inmediatamente su cuadro delimitador, haciéndonos saber que se ha hecho una selección.

example of selecting a single shape using the click method in illustratorexample of selecting a single shape using the click method in illustratorexample of selecting a single shape using the click method in illustrator

En comparación con Photoshop, Illustrator tiene un as en la manga cuando se trata de la selección, ya que le da la opción de apuntar y seleccionar múltiples formas basadas en rasgos similares como la apariencia, el color de relleno, la opacidad, el color del trazo, etc. 

Para ello, basta con seleccionar una de las formas y, a continuación, dirigirse a Seleccionar > Igual y elegir una de sus 12 opciones disponibles.

4. ¿Cómo funciona el ajuste de la forma básica?

Ahora que hemos visto cómo los dos manejan la selección de formas, vamos a profundizar un poco más y ver cómo se comportan cuando se trata de ajustar la forma.

Por definición, una forma vectorial se compone de una trayectoria cerrada o abierta que está definida por un conjunto de dos o más puntos de anclaje.

En Photoshop, puedes ajustar fácilmente una forma seleccionando primero su(s) punto(s) de anclaje mediante la herramienta de Selección directa (A) y, a continuación, arrastrándola en la dirección deseada. 

example of re positioning the anchor of a shape in photoshopexample of re positioning the anchor of a shape in photoshopexample of re positioning the anchor of a shape in photoshop

Illustrator utiliza los mismos fundamentos, en los que se utiliza la herramienta de Selección directa (A) para seleccionar el punto de anclaje de una forma y, a continuación, se hace clic y se arrastra en la dirección deseada para ajustar la forma del objeto.

Ahora, en comparación con Photoshop, Illustrator te ofrece una pequeña ventana de información en la que puedes ver el número de píxeles que recorre el punto de anclaje mientras lo arrastras. 

example of adjusting the position of an anchor in illustratorexample of adjusting the position of an anchor in illustratorexample of adjusting the position of an anchor in illustrator

Si necesitas combinar alta precisión con un flujo de trabajo rápido, vas a encontrar que Illustrator hace un mejor trabajo, ya que te permite seleccionar el ancla y luego usar su herramienta Mover, haciendo clic con el botón derecho y luego yendo a Transformar > Mover, lo que debería traer una nueva ventana donde puedes ajustar individualmente su posición en los ejes Horizontal y Vertical.

adjusting the position of an anchor using the move tooladjusting the position of an anchor using the move tooladjusting the position of an anchor using the move tool

El proceso de ajustar la posición de un punto de anclaje es realmente divertido y fácil de hacer, pero ¿qué pasa con esas situaciones en las que necesitas eliminar completamente uno de la trayectoria de una forma?

Pues bien, en Photoshop se puede eliminar fácilmente un ancla seleccionándola con la Herramienta de Selección Directa (A) y pulsando después la tecla Suprimir, lo que abrirá el recorrido de la forma, como puedes ver. 

example of removing an anchor in photoshopexample of removing an anchor in photoshopexample of removing an anchor in photoshop

Para cerrar el trazado resultante, tendremos que coger la Herramienta Pluma (P), hacer clic en uno de los puntos de anclaje desconectados, y luego cerrar la línea haciendo clic en el restante.

example of closing up a path using photoshopexample of closing up a path using photoshopexample of closing up a path using photoshop

Si pasamos a Illustrator, el programa utiliza el mismo proceso, en el que para eliminar un punto de anclaje hay que seleccionarlo primero con la Herramienta de selección directa (A) y luego borrarlo pulsando Suprimir.

example of opening up a path in illustratorexample of opening up a path in illustratorexample of opening up a path in illustrator

A la hora de cerrar la trayectoria resultante, las cosas son un poco más fáciles esta vez, ya que todo lo que tienes que hacer es utilizar el atajo de teclado Control-J, que unirá las anclas desconectadas de nuevo entre sí utilizando un segmento de ruta recta.

example of closing up a path in illustratorexample of closing up a path in illustratorexample of closing up a path in illustrator

5. ¿Cómo funciona el ajuste de forma avanzado?

En este punto, hemos visto lo que los dos pueden hacer cuando se trata de ajustes de forma básicos, así que vamos a subir las cosas un poco y jugar con ajustes más avanzados.

En comparación con Illustrator, Photoshop carece de los Modos de Forma de Pathfinder, que le permiten ajustar una forma utilizando otra, pero espera, no te asustes, ya que tiene un conjunto de funciones similares ocultas en uno de sus menús.

Antes de continuar, quería señalar que, sí, soy consciente del panel de operaciones de Trayectoria, pero créeme, funciona de forma tan extraña que es mejor que te mantengas alejado de él.

Digamos que tenemos un cuadrado bastante básico de 32 x 32 px que queremos ajustar eliminando un círculo de 20 x 20 px de su esquina superior derecha.

example of shapes to be adjusted in photoshopexample of shapes to be adjusted in photoshopexample of shapes to be adjusted in photoshop

Una vez que tenemos nuestras formas en su lugar, podemos seleccionarlas a las dos e ir a Capas > Combinar formas > Sustraer forma frontal

example of subtracting a shape in photoshopexample of subtracting a shape in photoshopexample of subtracting a shape in photoshop

Ahora, aunque la sustracción se ha realizado correctamente, la trayectoria del círculo ha acabado unida a la del cuadrado, lo que querremos arreglar abriendo el panel de operaciones de Trayectoria y utilizando su función Fusionar componentes de forma.

example of merging paths in photoshopexample of merging paths in photoshopexample of merging paths in photoshop

No voy a repasar las tres operaciones de Trayectoria restantes, ya que se explican por sí mismas. Sólo recuerda que mientras sigas el proceso anterior, deberías estar totalmente bien.

Si pasamos a Illustrator, encontraremos que viene con una implementación diferente de los ajustes de trayectoria disponibles en Photoshop, que para ser honestos son un poco más fáciles de usar.

Por defecto, el panel está oculto, por lo que tendrás que seleccionar varias formas para que aparezca dentro del panel derecho de Herramientas. 

En cuanto el panel se hace visible, podemos conseguir el mismo resultado que en Photoshop, seleccionando las dos formas creadas y luego simplemente utilizando el Modo de Forma de Frente Menor. Es así de sencillo.

example of using minus front in illustratorexample of using minus front in illustratorexample of using minus front in illustrator

Illustrator realizará inmediatamente la operación, dándonos un bonito y limpio recorrido. 

example of resulting subtracted shape in illustratorexample of resulting subtracted shape in illustratorexample of resulting subtracted shape in illustrator

De nuevo, no voy a repasar todos los Modos de Forma restantes ya que son bastante descriptivos, pero realmente te animo a que los pruebes, especialmente si es la primera vez que usas Illustrator.

6. ¿Cómo aprovechan los dos la cuadrícula de píxeles?

Al crear activos pequeños, como los iconos, siempre te encontrarás en la situación de tener que ver cómo se comportan sus diferentes formas de composición en relación con los demás, y lo que es más importante, con su mesa de trabajo subyacente.

Aquí es donde la capacidad de utilizar una cuadrícula de píxeles es útil, ya que te permite ver el tejido subyacente real, y por lo tanto tienen un mayor grado de control sobre tus formas cuando se trata de posicionamiento de anclaje y, más importante, el posicionamiento de mesas de trabajo.

Por defecto, Photoshop viene con la cuadrícula activada, pero como puedes ver, sólo es visible dentro de la superficie real de una forma, lo que no es el mejor enfoque que Adobe podría haber tomado. 

example of pixel grid in photoshopexample of pixel grid in photoshopexample of pixel grid in photoshop

A la hora de realizar ajustes básicos de forma, el software nos permite llevar la cuenta del número de píxeles que recorren nuestros puntos de anclaje, pero nos obliga a contar realmente los propios píxeles, lo que sólo es posible cuando se utiliza el método de hacer clic y arrastrar. 

example of positioning an anchor using the click and drag method in photoshopexample of positioning an anchor using the click and drag method in photoshopexample of positioning an anchor using the click and drag method in photoshop

Si necesitas posicionar una forma en relación con otra, esta vez Photoshop hace un mejor trabajo, ya que sus guías inteligentes y el panel de información te ayudan a seguir perfectamente los movimientos horizontales y verticales de la forma, siempre que utilices el método de hacer clic y arrastrar. 

positioning a shape using the click and drag method within the pixel grid in photoshoppositioning a shape using the click and drag method within the pixel grid in photoshoppositioning a shape using the click and drag method within the pixel grid in photoshop

Hasta aquí todo bien, pero aquí viene la parte que hace inútil la herramienta, ya que si quieres usar la Herramienta Pluma (P) para dibujar una forma usando valores específicos, no hay manera de hacerlo, ya que la Cuadricula no es visible fuera de la superficie de una forma.

drawing a path using the pen tool onto the pixel grid within photoshopdrawing a path using the pen tool onto the pixel grid within photoshopdrawing a path using the pen tool onto the pixel grid within photoshop

Por lo que he podido ver, esto se debe principalmente al color de las líneas de la Cuadrícula, que no se puede cambiar. La única solución al problema por ahora sería crear una forma que rellene toda la superficie de la mesa de trabajo, y establecer su color a algo más oscuro como un gris, lo que de nuevo requeriría tomar medidas adicionales.

Ahora, pasemos a Illustrator y veamos cómo maneja este tipo de situaciones.

Al igual que Photoshop, el software viene con su propia versión de la Cuadrícula de píxeles, que puede activarse dirigiéndose a Ver > Vista previa de píxeles o utilizando el atajo de teclado Alt-Control-Y.

En cuanto lo activemos, nos daremos cuenta rápidamente de que, en comparación con Photoshop, donde la cuadrícula sólo era visible dentro de la superficie de sus formas, aquí la cuadrícula se aplica a todo el documento.

example of pixel preview inside of illustratorexample of pixel preview inside of illustratorexample of pixel preview inside of illustrator

Al adoptar este enfoque diferente, el software hace un mejor trabajo para ayudarle a seguir el recuento de píxeles, como veremos en los siguientes momentos.

Al igual que en Photoshop, podemos ajustar fácilmente la posición de un punto de anclaje y llevar un perfecto control del número de píxeles recorridos, sólo que esta vez todo el proceso es más sencillo, ya que cuenta con su propio panel informativo.

example of adjusting the position of an anchor using the click and drag method inside of pixel preview modeexample of adjusting the position of an anchor using the click and drag method inside of pixel preview modeexample of adjusting the position of an anchor using the click and drag method inside of pixel preview mode

Cuando se trata de posicionar una forma en relación con otra, podemos hacerlo fácilmente siempre que utilicemos el método de hacer clic y arrastrar, ya que nos permitirá hacer un seguimiento del número de píxeles utilizando el pequeño panel de información.

example of positioning a shape using the click and drag method inside of the pixel preview modeexample of positioning a shape using the click and drag method inside of the pixel preview modeexample of positioning a shape using the click and drag method inside of the pixel preview mode

Ahora viene la parte que realmente diferencia a Illustrator, ya que si necesitamos dibujar una forma con la Herramienta Pluma (P), podemos llevar fácilmente la cuenta de la distancia que se encuentra entre los puntos de anclaje que la componen utilizando el pequeño panel de información.

drawing a path using the pen tool tool inside of pixel preview modedrawing a path using the pen tool tool inside of pixel preview modedrawing a path using the pen tool tool inside of pixel preview mode

Llegados a este punto, hemos cubierto la mayoría de los aspectos básicos que hay que tener en cuenta a la hora de elegir el software "adecuado", lo que significa que ahora podemos pasar por fin a la parte de las conclusiones.

Conclusión

La cantidad de ventajas que tiene Illustrator hace que sea el claro ganador aquí:

  • mejor soporte para mesas de trabajo
  • la selección de formas es más rápida e intuitiva
  • tanto los ajustes de forma básicos como los avanzados son más fáciles de realizar
  • una mejor experiencia general de la Cuadrícula de píxeles

Dicho esto, espero que esta información te resulte útil, y si tienes alguna pregunta, no dudes en publicarla en la sección de comentarios, y te responderé tan pronto como pueda.

Desarrolla tus habilidades de creación de iconos

¿Acabas de leer este artículo en profundidad y tienes ganas de aprender más? Pues si es así, estás de suerte, ya que me he tomado la molestia de elaborar esta pequeña lista que debería servirte para los próximos días.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.