20 trucos de Photoshop para diseñadores web

Probablemente cada diseñador web tenga su propio conjunto de trucos favoritos de Photoshop bajo la manga. Por buena razón. La potente edición de imágenes de Adobe es un elemento básico del mundo del diseño web. Muy pocos programas pueden competir con este excelente software y su amplia gama de características.

Sin embargo, aunque la mayoría de los diseñadores web conocen Photoshop, siempre hay más que puedes aprender. Después de todo, el programa no solo es poderoso sino también complejo. Además, se agregan cosas nuevas a través de actualizaciones de forma regular.

Por esa razón, es una buena idea seguir explorando su herramienta favorita. Para ayudarlo a hacerlo, en este artículo, veremos algunos de los mejores trucos de Photoshop que existen. Cosas que pueden mejorar su flujo de trabajo, hacer el trabajo y la vida más fáciles, ahorrar tiempo y ayudarlo a diseñar los mejores sitios web posibles.

¿Estás listo para aprender más sobre Photoshop? Entonces sigue leyendo.

Trucos de Photoshop para convertirlo en un asistente de diseño web

Los siguientes consejos van desde el nivel principiante hasta material más complejo. Cada uno de ellos se elige para ayudarte a ser el mejor diseñador web posible.

1. Optimice su espacio de trabajo

Empecemos con lo básico. Lo primero que debe hacer para mejorar su flujo de trabajo es configurar Photoshop de manera que sea compatible con la forma en que lo usa. Después de todo, el trabajo se vuelve más fácil con una herramienta más afilada.

Por esa razón, nuestra primera parada es Ventana> Espacio de trabajo> Gráficos y Web . La elección de esta opción cambiará las herramientas disponibles a las que es más probable que utilice para el diseño web.

Después de eso, continúe con Editar> Preferencias . Aquí, una de las paradas más importantes es Unidades y reglas. Cualquiera que sea la medida que elija aquí (lo más probable es que los píxeles), será la medida predeterminada para todos los documentos futuros.

(Sugerencia rápida: para cambiar las reglas de documentos individuales, simplemente haga clic derecho sobre ellos y elija la unidad de medida deseada).

Después de eso, vaya a Preferencias> Rendimiento> Historial y caché y haga clic en Diseño web / UI .

Si lo hace, cambiará la configuración de la caché para favorecer archivos más pequeños con muchas capas, que es con lo que trabajará principalmente.

En el mismo lugar, también puede elegir el número de estados del historial. Esa es la cantidad de pasos que puede retroceder si desea deshacer algo.

Finalmente, salga de las preferencias, cierre todos los documentos y presione el botón T en su teclado. Esto hará que el menú de fuentes aparezca en la parte superior de la pantalla. Lo que establezca aquí, a partir de ese momento, será estándar para los nuevos documentos. Porque a nadie le gusta tanto Myriad Pro.

2. Aprenda los atajos de teclado

Para cualquier programa que utilice con regularidad, aprender los atajos de teclado suele ser un buen consejo.

Por ejemplo, uso Ctrl + Alt + 2/3 para crear encabezados h2 y h3 mientras escribo esta publicación. Es mucho más rápido que usar la barra de herramientas del editor, ya que no tengo que quitar las manos del teclado.

Lo mismo ocurre con Photoshop. Saber cómo realizar acciones con simples pulsaciones de teclas es infinitamente más rápido que hacer clic en los menús.

Mencionaremos un montón de atajos de teclado a lo largo de este artículo. Sin embargo, también recomiendo esta hoja de trucos para aprender los accesos directos a las operaciones más comunes de Photoshop. Además de eso, también es una buena idea tener el hábito de buscar en los atajos de teclado las cosas que hace una y otra vez.

3. Capas de grupos y nombres

Cuando trabaje con Photoshop, trabajará con montones y montones de capas. No solo obtienen la mayoría de los elementos en su propia capa, sino que también se agregan modificaciones como el brillo / contraste como capas.

Por esa razón, puede resultar confuso muy rápidamente. Afortunadamente, hay muchas opciones para hacerlo menos, dos de las cuales son la capacidad de agrupar y nombrar capas.

Primero, al hacer doble clic en cualquier capa, puede cambiar su nombre por el que desee.

De esa manera, comprenderá fácilmente si una capa contiene la imagen de fondo, el menú o la barra lateral.

Alternativamente, también puede elegir varias capas a la vez, ya sea manteniendo presionada la tecla Ctrl para elegir capas individuales o Mayús para marcar un rango de capas vecinas. Ctrl + G luego los convierte en un grupo.

Alternativamente, haga clic derecho en las capas y elija la opción de grupo desde allí. De cualquier manera, sus capas se organizan mucho más. Además, ¡también puede nombrar las capas agrupadas!

4. Capas de filtro

Nombrar y agrupar capas es un buen comienzo. Sin embargo, cuando trabaja con docenas o incluso cientos de ellos, aún puede confundirse fácilmente.

Para esos casos, también tiene la opción de filtrar sus capas. Para hacerlo, simplemente use el menú en la parte superior del menú Capas para filtrar por tipo, nombre, efecto, color y más.

Alternativamente, seleccione directamente una capa usando la herramienta Mover , manteniendo presionada la tecla Ctrl y haciendo clic en una capa u objeto.

5. Crea una cuadrícula

Imagen de PureSolution / shutterstock.com.

La cuadrícula es uno de los principios más importantes en el diseño web. Le da orden al diseño y le ayuda a colocar sus objetos. Por esa razón, también tiene sentido crear una cuadrícula en Photoshop.

Para hacerlo, use Ver> Nuevo diseño de guía . Alternativamente, cree guías horizontales y verticales simplemente haciendo clic en una regla y arrastrándola al documento. Utilice Ctrl para mover las guías existentes.

6. Importar muestras de color

Puede cargar muestras de color directamente en Photoshop desde archivos HTML, CSS o SVG. De esa manera, tiene un excelente punto de partida para su combinación de colores cuando trabaja con activos existentes, como un logotipo.

Para aprovechar este truco de Photoshop, simplemente abra el panel Muestras , haga clic en el menú desplegable en la esquina superior derecha y elija Cargar Muestras . Ahora navegue hasta el archivo en cuestión y ábralo para importar su nueva muestra de color.

7. Guardar formas personalizadas

Especialmente al diseñar varias páginas para el mismo sitio o sitios web que tienen un diseño similar, se encontrará utilizando los mismos objetos y formas una y otra vez. Por esa razón, tiene sentido guardarlos como formas personalizadas para una rápida reutilización.

Para hacerlo, haga clic derecho en la forma en cuestión con la herramienta de selección de ruta (la flecha negra). Luego, elija Definir forma personalizada . Una vez que lo haya hecho, puede acceder a esta forma a través de las opciones de la barra superior de la herramienta Forma personalizada . Simplemente haga clic en el menú desplegable donde dice Forma: y elija su forma guardada.

8. Cambiar entre colores de fondo y primer plano

Dos alternan entre el color de fondo y el de primer plano sin hacer clic en el icono, simplemente presione X en su teclado. Además, si desea que los colores vuelvan al blanco y negro simple, puede hacerlo presionando D.

9. Cambiar la opacidad a través del teclado

Otro atajo de teclado: para cualquier herramienta que pueda cambiar la opacidad, simplemente puede hacerlo a través del teclado. Los números del 1 al 0 establecerán la opacidad entre el 10% y el 100%. Lo mismo también funciona con la opacidad de capas.

10. Dibuja líneas rectas

Para dibujar una línea recta con cualquier herramienta, simplemente mantenga presionada la tecla Shift . Después de eso, puede dibujar una línea (tanto horizontal como verticalmente) que automáticamente será recta como un clavo. Alternativamente, haga clic en dos puntos diferentes para crear una línea recta entre ellos.

11. Color de muestra

Lo siguiente en nuestra bolsa de trucos de Photoshop es la capacidad de muestrear cualquier color. Si necesita el color de cualquier objeto, mantenga presionado el botón Alt y haga clic en el tono que desee. Esto funciona tanto con el pincel , el lápiz , el cubo de pintura como con cualquier otra herramienta que utilice colores.

12. Agregar o quitar de la selección

Puede agregar a una selección existente manteniendo presionada la tecla Mayús y seleccionando la parte que desea incluir. Para restar, haz lo mismo pero con el botón Alt .

13. Deshacer más de un paso

La forma clásica de deshacer su última acción es usando Ctrl + Z. Sin embargo, esto solo funciona para lo último que hiciste. Para retroceder varios pasos, use Ctrl + Alt + Z.

14. Cambie dinámicamente el tamaño de su pincel

Para cambiar el tamaño de su pincel, no es necesario hacer clic en el menú desplegable y arrastrarlo al tamaño correcto. En su lugar, simplemente mantenga presionada la tecla Alt y el botón derecho del mouse y luego arrastre hacia la izquierda y hacia la derecha para disminuir y aumentar el tamaño de su pincel.

15. Guardar para Web

El uso de la función Safe for Web es esencial, ya que garantiza que el tamaño de la imagen sea lo más pequeño posible. Esto es muy importante para mejorar la velocidad del sitio.

En Photoshop, puede hacer esto a través de Archivo> Exportar> Guardar para Web . Sin embargo, una forma más rápida es usar Ctrl + Alt + Shift + S. ¡De nada!

16. Abrir imágenes como capas

A veces es necesario importar una gran cantidad de imágenes a Photoshop a la vez. Sin embargo, cuando simplemente los arrastre a su espacio de trabajo, se le pedirá que los coloque manualmente.

Una forma más práctica de hacerlo es Archivo> Scripts> Cargar archivos en la pila . Busque las imágenes en cuestión, márquelas y presione Aceptar dos veces. Ahora, cada imagen se importará automáticamente en su propia capa.

17. Copie CSS directamente desde Photoshop

Uno de los trucos de Photoshop más cómodos para los diseñadores web es el hecho de que el programa crea CSS que puede exportar. No es necesario escribirlo todo a mano ni utilizar prueba y error para implementarlo.

Para aprovechar esto, simplemente haga clic con el botón derecho en una capa y seleccione Copiar CSS . Alternativamente, use el menú Capa para encontrar la misma opción. Ahora tiene todos los estilos necesarios para pegarlos simplemente en su hoja de estilo o en cualquier otro programa que esté utilizando.

18. Diseño para varios dispositivos y orientaciones a la vez

Diseñar para la web hoy en día significa diseñar para una gran cantidad de dispositivos diferentes. En tiempos en que los dispositivos móviles eclipsan a las computadoras de escritorio en todo el mundo, implementar el diseño móvil es una necesidad.

Fuente: ComScore

Afortunadamente, Photoshop tiene mesas de trabajo y objetos inteligentes que hacen que sea muy fácil escalar su diseño a diferentes formatos.

Podría describir ambos en detalle aquí, sin embargo, Phlearn hizo un excelente tutorial sobre esto que hace un trabajo mucho mejor de lo que yo podría hacer:

19. Utilice el procesamiento automático para tareas repetitivas

Otra característica impresionante de Photoshop es el procesamiento automático. Significa que puede repetir las tareas grabadas una y otra vez sin tener que realizarlas manualmente. Esto es muy útil, por ejemplo, si necesita guardar muchas imágenes para la web.

Así es como funciona. Primero, abra su archivo. Luego, abra Acciones ( Alt + F9 ), busque Crear nueva acción y haga clic en ella. Proporcione un nombre y, opcionalmente, asígnele una combinación de teclas y un color.

Para registrar sus acciones, presione Grabar . Luego realice la operación que desea repetir. En mi caso, abro una imagen de una carpeta y la guardo para web en otra carpeta.

Una vez hecho esto, deja de grabar. Ahora puede reutilizar esta acción para todas las demás imágenes, ahorrándole mucho tiempo. Para obtener más información sobre lo que puede automatizar en Photoshop, consulte este artículo.

20. Vista previa en el dispositivo

Finalmente, junto con Photoshop, Adobe también ofrece una aplicación que le permite obtener una vista previa de su trabajo en varios dispositivos iOS. Lo mejor: puede observar los cambios en el dispositivo a medida que los realiza en la computadora.

Para hacerlo, instale la aplicación y use Device Preview para conectar Photoshop a un dispositivo externo a través de USB o wifi. La opción se encuentra en Ventana> Vista previa del dispositivo .

¿Cuáles son tus trucos favoritos de Photoshop?

Photoshop es una de las herramientas de diseño web más utilizadas que existen. Sus potentes funciones lo hacen perfecto para diseñar sitios web y activos de alta calidad.

Sin embargo, un gran poder también conlleva una gran complejidad y, especialmente para los principiantes, puede llevar algún tiempo dominar el software.

Para acortar la curva de aprendizaje, anteriormente hemos proporcionado una serie de trucos útiles de Photoshop para diseñadores web. Facilitan muchas cosas, desde el flujo de trabajo general hasta el procesamiento automático de archivos.

Conocer Photoshop por dentro y por fuera es una gran inversión en sus resultados. Cuando puede hacer las cosas más rápido, puede realizar más trabajo y, por lo tanto, generar más ingresos. Y eso nunca puede ser algo malo.

¿Cuáles son algunos de tus trucos favoritos de Photoshop? Háganos saber en la sección de comentarios a continuación para que podamos ayudarnos mutuamente.

Imagen en miniatura del artículo de Creative Stall / shutterstock.com