Dibujo de formas personalizadas

Las formas han recorrido un largo camino en Photoshop y saber cómo utilizarlas en su aplicación puede significar la diferencia entre el éxito y el fracaso. Las formas pueden aportar profundidad, equilibrio y unidad a sus aplicaciones. Este tutorial le presentará la herramienta de formas de Photoshop y le enseñará a dibujar formas personalizadas básicas. En el proceso, estará preparado para el siguiente tutorial de esta serie: creación de botones.

Antes de comenzar, permítame mostrarle lo que quiero decir cuando hablo sobre la relación entre formas, profundidad, equilibrio y unidad..

Usemos la interfaz predeterminada para los teléfonos iPhone y Android, por ejemplo. Los botones, iconos o accesos directos en ambos teléfonos aparecen como si estuvieran sentados justo en la parte superior del fondo, que es profundidad. Sin embargo, donde los teléfonos comienzan a diferir es en relación con el equilibrio y la unidad..


iconos de iPhone

Apple se enorgullece de su diseño (como deberían) y mientras que ambos teléfonos colocan los iconos en su lugar, el iPhone los mantiene juntos en un orden específico. Los teléfonos con Android pueden tener algunos íconos en la parte superior y otros en la parte inferior, lo que puede arruinar el balance de su pantalla. ¿Cambia la funcionalidad? No. ¿Es utilizable? Es personalizado, así que si te funciona, entonces sí. ¿Se ve mejor? No. No se ve mejor porque simplemente no está equilibrado.


Iconos de Android

Lo mismo podría decirse de la unidad. El iPhone tiene un tamaño y forma estándar para los iconos. El contenido dentro del tamaño y la forma puede y varía. Android solo tiene un tamaño estándar, pero no tiene una forma estándar. Al restringir todos los íconos al mismo tamaño y especialmente a la misma forma, Apple crea una unidad perfecta. Nada se ve fuera de lugar. Pero esto no es un debate entre Apple y Android, y si bien soy un usuario de Mac, elijo usar un teléfono Android en el iPhone, por lo que no soy imparcial.


Ahora avancemos con el aprendizaje de la herramienta de forma de Photoshop:

  1. Abre Photoshop y crea un nuevo documento..
  2. Voy a usar los siguientes ajustes para mantenerlo simple.
  3. Seleccione la herramienta Forma (U) de la barra de herramientas.
    Haga clic para expandir las opciones de forma. También puede simplemente mirar la barra de opciones para ver las diferentes formas disponibles.
  4. Hay más opciones en la barra de opciones que lo que vamos a cubrir, por lo que solo nos centraremos en las seis opciones de formas reales que tenemos. Obtendremos más en la herramienta de lápiz en un próximo tutorial.

  5. Para dibujar una forma, seleccione la forma que necesita de la barra de opciones, elegí un círculo.
  6. Haz clic y arrastra sobre el lienzo para crear la forma..
  7. Fíjate en que aún no elegimos el color deseado. No se preocupe, podemos cambiar el color con bastante facilidad después de dibujar la forma. En la paleta de capas, busque la nueva capa llamada 'Shape-1'.

  8. Haga doble clic en la muestra de color de la capa Shape-1 en la paleta de capas para abrir el selector de color.
  9. Elija un color y haga clic en Aceptar.

Así que esa fue la vista de 30,000 pies de la creación de una forma. En este ejemplo, acabo de usar la forma ovalada, pero hay mucho más que puedes hacer con otras formas..


Aquí hay algunos consejos internos que harían que trabajar con formas sea un poco más eficiente y fácil..

  1. Opciones de forma
  2. Barra espaciadora
  3. tecla Alt
  4. Tecla Mayús (sin forma existente)
  5. Shift (con forma existente)
  6. Alt (con forma existente)
  7. Ctrl + T

Opciones de forma

Por defecto, sin cambiar ningún ajuste preestablecido, Photoshop te dará formas que se parecen a estas. La herramienta de formas personalizadas también tiene un subconjunto completo de formas de la lista desplegable, lo que le brinda más libertad creativa..

Cada forma, personalizada o no, tiene configuraciones que le permiten personalizar estas formas y hacer su vida más fácil en el proceso.

La opción "Sin restricciones" le permite crear una forma exactamente del tamaño que desea sin mantener la proporción de formas (esta es la opción predeterminada). Para formas rectangulares, la opción "Cuadrado" le permite crear un cuadrado perfecto. También puede establecer un tamaño fijo y una proporción también. Si sabe exactamente el tamaño que necesita, especifíquelo aquí y ¡le hará la vida más fácil! Luego hay dos casillas de verificación. La casilla de verificación "Desde el centro" dibuja la forma alrededor del origen del mouse en lugar de la dirección en la que va el mouse y la opción "Ajustar a píxeles" hace exactamente eso.


Sinceramente, no uso mucho estas dos opciones porque me gusta usar mejor los accesos directos que se explican a continuación. Es solo mas rapido!

Barra espaciadora

Ahh, este es uno de mis favoritos. Manteniendo presionada la barra espaciadora al dibujar una forma, le permite reposicionar la forma mientras dibuja. No importa si lo mantiene presionado antes o después de haber hecho clic para comenzar a dibujar la forma..

NOTA: Si ya has soltado tu ratón, es demasiado tarde. Solo tendrás que moverlo manualmente..

Haga clic para comenzar a dibujar, mantenga presionada la barra espaciadora y, a continuación, comience a mover el mouse. La forma debe moverse contigo. Esto ayuda a que todo quede alineado justo después de haber comenzado a dibujar la forma..

SHIFT (sin forma existente)

Antes de dibujar cualquier forma dentro de la capa, puede mantener presionada la tecla MAYÚS para mantener todo perfecto. Círculos perfectos, cuadrados perfectos, líneas rectas perfectas, e incluso líneas angulosas de 45 grados. Esto es muy parecido a lo que vimos con la herramienta Marquee hace unas semanas. Manteniendo presionada la tecla MAYÚS mantendrá todo proporcionado y puede reemplazar seleccionando el botón de opción Cuadrado en las opciones de forma.

SHIFT (con forma existente)

Una vez que ya tienes una forma en el lienzo, la tecla MAYÚS funciona un poco diferente. Si ya tiene una forma en el lienzo y también está seleccionado en la paleta de capas, al mantener presionada la tecla MAYÚS le permitirá agregar dinámicamente a la forma existente.

Mantenga presionada la tecla MAYÚS y verá un pequeño símbolo más (+) al lado del cursor. Agregue a la forma arrastrando una nueva forma sobre la forma existente. Observe en la captura de pantalla que me cuadré al final de nuestro rectángulo redondeado. Podría haber hecho esto de dos maneras diferentes, pero eso implicaría agregar muchos más pasos.

¿Qué vamos a hacer con algo así? Crea un par de formas más con la herramienta Rectángulo y completa la última de la misma manera que hiciste la primera para crear un pequeño conjunto de botones de navegación simples:

ALT (con forma existente)

Si mantiene presionada la tecla ALT con una forma existente, se eliminará una parte. Con una forma existente en el lienzo y seleccionada, mantenga presionada la tecla ALT y aparecerá un símbolo menos (-) al lado del cursor. Esto indica que está a punto de eliminar una parte de la forma. En la captura de pantalla tomé la forma personalizada del sobre y quité esa sección del rectángulo. Ahora solo tenemos que agregar un poco de texto y tenemos un botón de correo electrónico muy simple para nuestra aplicación!

CTRL + T

Esta es la forma más rápida y eficiente de redimensionar una forma existente. Asegúrese de tener la forma seleccionada en la paleta de capas y use el método abreviado de teclado de CTRL + T. Debería ver las asas en la forma que le permitirán cambiar el tamaño según sea necesario. Rápido y fácil, esto funciona para todas las capas, no solo con formas. Yo uso esto una tonelada!


Aprender a usar la herramienta de forma es solo el comienzo. El verdadero truco está en aprender a aplicar formas básicas de maneras únicas e interesantes. Ciertamente puedes usar estas formas para más que solo botones!

Para estimular su creatividad, aquí hay algunos ejemplos únicos y creativos de la herramienta de forma en acción.!

Relojes

Dia carta

Dropbox

Domino Box