Uninstallme
Desarrollo front-end, estándares web, accesibilidad y más
Ajustes de color en Photoshop optimizados para Web
Por kcmr, el 18 de agosto de 2009 en Cajón de sastre, Photoshop
Hace una temporada que estoy usando Mac después de mi paso fugaz por Ubuntu, que murió repentinamente por causas desconocidas, y de “toda la vida” usando Windows. No voy a hablar de los pros de uno u otro, que sería tema para otro post, sino de algo que hasta ahora me había pasado desapercibido en PC: las diferencias de color entre los diseños (psd’s) y lo que se acaba viendo en el navegador.
Diferencia de color entre Photoshop y el navegador
Además de estas diferencias de color entre el navegador y el PSD, tenía otro problema bastante desesperante: en los degradados en Photoshop se apreciaban cambios bruscos de color similares a los que se pueden ver si guardamos un degradado como GIF de 8 colores :S
Estos problemas estaban causados por mis ajustes de color en Photoshop, que permanecían en su configuración por defecto (mal, muy mal hecho)
Después de rebuscar un poco en Internet y algún libro olvidado, he encontrado la combinación que mejor parece funcionar. Hay quien recomienda una de las configuraciones que trae Photoshop (Web/Internet en Europa) y quien recomienda crearse una nueva configuración personalizada. Yo me he quedado con esta última opción.
Podemos encontrar los ajustes de color en el menú Edición de Photoshop > Ajustes de Color.
En la ventana Ajustes de color, elegimos en el grupo Espacios de Trabajo las siguientes opciones:
- RGB: sRGB iEC61966-2.1
- Gris: Gray Gamma 2.2
Dentro del grupo Normas de gestión de color:
- RGB: Convertir a RGB de trabajo
- CMYK: Desactivar
- Gris: Desactivar
- Diferencias de perfil: Preguntar al abrir
Ajustes de color personalizados en Photoshop
Sin ningún documento abierto, en el menú Vista > Ajuste de prueba seleccionamos Monitor RGB. Al abrir un documento marcamos en el menú Vista la opción Colores de prueba para asegurarnos de que los colores que estamos viendo en Photoshop coinciden con los que se verán en un navegador.
Aquí no acaba todo. A la hora de guardar para Web tendremos que desmarcar las opciones Incrustar perfil de color y Convertir en sRGB.
Opciones al guardar para Web
En este punto hay opiniones contrarias. Yo me he decantado por esta opción porque no todos los navegadores soportan perfiles de color en imágenes, lo que puede dar lugar a diferencias entre unos y otros.
Más información
Transformación de rectángulos redondeados en Photoshop
Por kcmr, el 13 de noviembre de 2008 en Photoshop
Con este post me salgo un poco de la temática habitual de este blog para mostrar dos pequeños tips de Photoshop, muy básicos pero seguro que muy útiles para los que somos más bien aficionados. Y ya que no es muy difícil ver cajas con esquinas redondeadas deformadas por haber usado la herramienta de transformación, me he decidido a escribirlo.
Para modificar un cuadro con esquinas redondeadas hecho con la herramienta rectángulo redondeado 
(Atajo de teclado U), todo lo que necesitamos son las herramientas para la selección directa de trazados 
(Atajo de teclado A), conversión 
y eliminación de puntos de ancla 
.
Transformación de un rectángulo redondeado
Para alargar o acortar un rectángulo redondeado, activaríamos en primer lugar la visibilidad de los puntos de ancla del rectángulo, haciendo click sobre uno de sus bordes con la herramienta de selección directa (flecha blanca).
Una vez que vemos cada punto de ancla representado por un pequeño cuadrado, lo seleccionamos individualmente haciendo click sobre él y añadimos más puntos de ancla a la selección manteniendo pulsada la tecla Mayúsculas mientras los clicamos.
O mucho más sencillo y rápido: simplemente seleccionamos con la herramienta de selección directa el área en que se encuentran los puntos de ancla que serán modificados, como si fueramos a hacer una selección con la herramienta marco rectangular.
Una vez que tenemos nuestros cuatro puntos seleccionados, simplemente tiramos de ellos, presionando a la vez la tecla mayúsculas para evitar mover el cuadrado a los lados. También podemos utilizar las flechas de desplazamiento del teclado para mayor precisión.
Eliminación de esquinas en un rectángulo redondeado
Para eliminar esquinas redondeadas de un rectángulo redondeado, usamos las herramientas de conversión y eliminación de puntos de ancla .
Seleccionamos los puntos de ancla que se van a modificar diréctamente con la herramienta de conversión. De esta forma, las líneas curvas entre ambos puntos se transformarán en líneas rectas.
Después llevamos el punto de ancla seleccionado (cuadrado relleno) hasta la esquina que corresponda con las flechas del teclado para mayor precisión. Una vez que los dos puntos de ancla están alineados, eliminamos el que sobre con la herramienta de eliminación de punto de ancla.
De esta manera conservamos las formas sin necesidad de rasterizarlas ni otras ñapas.
Estas técnicas y otras muchas más, se pueden encontrar en el libro The Photoshop Anthology en Sitepoint.
Crear faviconos con Photoshop
Por kcmr, el 8 de agosto de 2007 en Photoshop
Con este plug in se pueden guardar archivos en formato .ico.
Vía photoshopsupport.com
Enlace al tutorial:
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
Seleccionar capas o carpetas con un click en Photoshop
Por kcmr, el 5 de julio de 2007 en Cajón de sastre, Photoshop
Acabo de encontrar esta joyita de atajos de teclado por la red, en el blog de un muchacho que lo descubrió por azar.
Al grano:
- Seleccionar una carpeta:
- Ctrl + Click sobre la parte que queremos seleccionar. No importa la herramienta que se tenga seleccionada.
- Seleccionar una capa:
- Ctrl + Alt + Click derecho sobre la capa que queremos seleccionar.
Así de fácil. Se acabo lo de botón derecho y andar buscando la capa entre layer 34, layer 7 …etc. Muy útil para cuando tienes que trabajar con un psd con 57 capas sin nombrar.