Probablemente todos los diseñadores web tienen 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 continuar explorando tu 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, facilitar el trabajo y la vida, ahorrar tiempo y ayudarlo a diseñar los mejores sitios web posibles.
¿Estás listo para aprender más sobre Photoshop? Entonces sigue leyendo.
Los siguientes consejos van desde el nivel de principiante hasta material más complejo. Cada uno de ellos se elige para ayudarte a ser el mejor diseñador web que puedas ser.
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 una manera que admita 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áfico y Web . Al elegir esta opción, las herramientas disponibles cambiarán a las que es más probable que utilice para el diseño web.
Después de eso, ve a Editar > Preferencias . Aquí, una de las paradas más importantes es Units & Rulers. Cualquiera que sea la medida que elija aquí (probablemente píxeles), será la predeterminada para todos los documentos por venir.
(Consejo rápido: para cambiar las reglas para 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/interfaz de usuario .
Si lo hace, cambiará la configuración de 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, sal de las preferencias, cierra todos los documentos y presiona el botón T en tu teclado. Esto hará que el menú de fuentes aparezca en la parte superior de la pantalla. Lo que establezca aquí será estándar a partir de ese momento para los documentos nuevos. Porque a nadie le gusta tanto Myriad Pro.
2. Aprende 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 es cierto para 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 atajos de las operaciones de Photoshop más comunes. Además de eso, también es una buena idea adquirir el hábito de buscar atajos de teclado para las cosas que haces una y otra vez.
3. Capas de grupos y nombres
Cuando trabaje con Photoshop, trabajará con montones y montones de capas. No solo obtiene 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 volverse confuso muy rápidamente. Afortunadamente, hay muchas opciones para que no lo sea tanto, 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, 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, tus capas se organizan mucho más. Además, ¡también puedes 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 tienes la opción de filtrar tus 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 utilizando la herramienta Mover , mantenga presionada la tecla Ctrl y haga 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. Trae orden al diseño y te ayuda a colocar tus 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. Use 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 forma, tendrá un excelente punto de partida para su combinación de colores cuando trabaje con recursos 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á usando los mismos objetos y formas una y otra vez. Por esa razón, tiene sentido guardarlos como formas personalizadas para reutilizarlos rápidamente.
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 de 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 10% y 100%. Lo mismo también funciona con la opacidad de capas.
10. Dibujar líneas rectas
Para dibujar una línea recta con cualquier herramienta, simplemente mantenga presionada la tecla Mayús . 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 probar 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 con el pincel , el lápiz , el cubo de pintura y 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 la ú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. Cambia dinámicamente el tamaño de tu 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 hacerlo 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. Abre 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 arrastra 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 a su propia capa.
17. Copia CSS directamente desde Photoshop
Uno de los trucos de Photoshop más cómodos para los diseñadores web es que el programa crea CSS que puedes exportar. No es necesario escribirlo todo a mano o usar prueba y error para implementarlo.
Para aprovechar esto, simplemente haga clic 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 simplemente pegarlos 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, es imprescindible implementar el diseño móvil .
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 del 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 grabar 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 la 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 Vista previa del dispositivo para conectar Photoshop a un dispositivo externo a través de USB o wifi. Encontrará la opción en Ventana > Vista previa del dispositivo .
¿Cuáles son tus trucos de Photoshop favoritos?
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 proporcionamos una serie de útiles trucos 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 su balance final. Cuando puede hacer las cosas más rápido, puede asumir 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 todos podamos ayudarnos mutuamente.
Imagen en miniatura del artículo de Creative Stall / shutterstock.com