Herramientas para diseñadores y no tan diseñadores

Quejumbres y sus herramientas de diseñador

La computadora ha llegado a ser una herramienta primordial dentro del mundo del diseño, aunque como bien dicen por ahí, las herrmientas no hacen al diseñador. Sin embargo nunca está demás una ayudadita, así que me he dado a la tarea de recopilar algunas de las herramientas que he usado y que me han salvado la vida y ahorrado tiempo en muchas ocasiones, espero les sean de utilidad y que nos compartan algunas otras.

Shrink Pic:

Problema: En varios de los proyectos en los que he trabajado me he encontrado con la necesidad de mandar muchas imágenes, bocetos e ideas a través del messenger o por e-mail. Pero al ser mi profesión el diseño me encuentro con que tengo archivos de imágenes gigantescas y que es realmente molesto enviar pues tardan mucho o de plano no pasan.

Aviso en el tray

¿Cómo lo soluciona?: Esta pequeña utilidad lo único que hace, como su nombre lo dice es reducir o “encoger” el tamaño de las imágenes. En cuanto detecta que estamos mandando una imagen por el Messenger, o cuando vamos a subir una a una página (por medio del botoncito de “examinar” o “browse”) para mandarla por correo o ilustrar un post, inmediatamente se activa y convierte el tamaño de la imagen a algo más manejable para estos menesteres. Nosotros mismos podemos configurar cuanta compresión queremos y qué tipo de imágenes comprimir. Lo recomiendo ampliamente sobre todo para esos archivos en los que es más importante la idea que la calidad de la imagen (o para mandar fotos y cosas graciosas a los compañeros :p).

Opciones de configuración de Shrink Pic

¿Dónde lo consigo?: De su página oficial, es una descarga gratuita.

Screen Print 32:

Problema: Ya sea para ilustrar algún post, para dar instrucciones o para archivar en forma gráfica algún evento que ocurrió en nuestra computadora, qué mejor que una captura de pantalla… Claro que no es muy divertido oprimir “Impr Pant” en el teclado, luego abrir Paint o Photoshop, pegar la imagen y guardarla…

¿Cómo lo soluciona?: Screen Print espera pacientemente en tu tray hasta que oprimas la combinación de teclas que le hayas dicho para entrar en modo de captura de pantalla. Te permite seleccionar solo un área de tu pantalla, la pantalla completa, o la ventana activa y guardar la imagen con el nombre que quieras, en el formato que quieras y con la compresión que quieras. Bastante sencilla y hace bien lo que promete.

¿Dónde lo consigo?: De su página oficial, es una descarga gratuita.

CSSViewer (extensión firefox):

Problema: Si eres de los que frecuentemente se encuentra tratando de hacer ingeniería inversa a las páginas para descubrir las propiedades CSS de las mismas y luego aplicarlas en algo que estés haciendo, te habrás dado cuenta ya que eso no es una tarea muy sencilla que digamos…

Ejemplo de funcionamiento de CSS Viewer

¿Cómo lo soluciona?: CSS Viewer es una extensión para firefox que al instalarse coloca un pequeño boton en la parte superior para que al activarlo, de inmediato te muestre un recuadro con información sobre las propiedades de los elementos que tocas. Sencillo, rápido y útil :D.

¿Dónde lo consigo?: Descarga la extensión para firefox por acá.

Aardvark (extensión firefox):

Problema: ¿Quieres analizar quitar o poner elementos en tu página pero no te quieres meter al código?, ¿quieres saber que etiqueta le pusiste a que cosa?

Aardvark, extensión para Firefox

¿Cómo lo soluciona?: Esta es muy parecida al CSS Viewer pero te permite hacer unos pequeños trucos que la anterior no te deja, como eliminar elementos de una página con una simple tecla, hacerlos más anchos, más angostos, etc… vean la imagen que dejo a continuación de lo que le hice a este sitio en menos de 2 segundos con esta herramienta…

Como destruir una página rápidamente con Aardvark

¿Donde lo consigo?: De su página oficial, en donde además podrán probarla ahi mismo sin necesidad de instalarla antes.

PixelGrabber:

Problema: Tienes cierto elemento en un diseño o imagen del que te quieres copiar el color, pero te da flojera hacer una captura, y luego abrir photoshop para ver de que color se trata.

¿Cómo lo soluciona?: Este es muy simple tan solo lo corres cuando lo necesitas. Se abre una ventanita que te va dando información del color sobre el cual pongas el puntero, cuando encuentres el que quieres presionas “insert” y copia el código ya sea html o RGB a tu memoria para pegarlo en donde quieras.

Pixelgrabber

¿Dónde lo consigo?: Por acá lo puedes bajar.

CSSvista:

Problema: Te dedicas a hacer páginas web pero el desgraciado Internet Explorer se dedica a hacerte la vida de cuadritos con sus No estándares en el CSS…

¿Cómo lo soluciona?: CSSVista es el hermanito menor (y gratuito) de una excelente herramienta llamada SiteVista. Por medio de esta pequeña herramienta gratuita puedes abrir cualquier página y visualizarla tanto en Internet Explorer como en Firefox al mismo tiempo, y ver en tiempo real como afectan los cambios que vayas haciendo al CSS mientras lo editas. Realmente ahorra muchos dolores de cabeza :D.

Ejemplo de CSSVista en Ociotakus

¿Donde lo consigo?: De su sitio oficial.

Freemind:

Problema: Tienes que organizar algún proyecto, y tienes las ideas todas revueltas en la cabeza, y da la casualidad que no tienes un gran pliego de papel para ponerte a crear un mapa mental gigante…

¿Cómo lo soluciona?: Este programa fue diseñado con el único propósito de ayudarte a organizar información, tiene opciones bastante interesantes para jerarquizar y para dar formato y énfasis a todo lo que quieras. Por ejemplo para este post me di a la tarea de ponerme a jugar un poco con el programa y en unos 5 minutos obtuve lo siguiente (algo feo pero no me puse a ver lo de los colores ni nada :p):

Mapa Mental Alquimistas del Diseño

¿Dónde lo consigo?: Es Open Source y se puede bajar desde la página oficial.

Notepad++:

Problema: Necesitas revisar o modificar un archivo html o CSS de forma rápida y eficiente pero el condenado Dreamweaver te altera el código y los nervios…

¿Cómo lo soluciona?: Es como una versión un poco más avanzada del notepad (bloc de notas) que viene con Windows. Está optimizado para reconocer lenguajes de programación como Html, CSS y PHP, tiene códigos de color y te agrupa automáticamente los comienzos y finales de las etiquetas para que no te pierdas y usa pestañas al estilo Firefox. Es bastante sencillo pero saca del apuro para cosas rápidas sin tener que ser un programa completo de edición para páginas web. Lo recomiendo como reemplazo para el Notepad.

Notepad Plus Plus

¿Dónde lo consigo?: Es open source y se puede bajar de su página oficial.

Unlocker:

Problema: Te encuentras trabajando con montones de imágenes y tienes varios programas de edición abiertos, de pronto te das a la tarea de depurar tus archivos borrando los innecesarios y te das cuenta que windows no te deja borrar alguno en específico…

Error al borrar archivo

¿Cómo lo soluciona?: En cuanto te sale el mensaje de error al intentar borrar un archivo, le puedes dar click derecho al condenado y seleccionar la opción de “Unlock” con lo que te muestra una ventana con los programas que están utilizando el archivo que intentas borrar. Si estás seguro que ese archivo ya no lo estás usando y algun programa lo tiene cautivo por error, tan solo le das “Unlock” y listo, el programa se encarga de desbloquearlo y lo puedes borrar.

¿Dónde lo consigo?: Es gratuito y lo puedes conseguir aquí.

vJpeg:

Problema: Tienes un montón de imágenes que quieres ver a la vez, para compararlas entre sí, pero los thumbnails de windows son muy pequeños y poco manejables, o el visualizador de imágenes de windows nada más te permite mostrar una imagen a la vez.

¿Cómo lo soluciona?: Este sencillo programita reemplaza el visualizador de imágenes que trae por default windows y te permite abrir tus imágenes sin ventanas, de forma que puedes abrir cuantas tu memoria ram te permita y acomodarlas arrastrandolas sobre tu escritorio. También permite que les cambies el tamaño arrastrándolas a una esquina de tu pantalla para irlas acomodando como quieras. Al principio cuesta trabajo acostumbrarse a ver las imágenes así, pero después de que le agarras la práctica no lo puedes dejar. Sigan las instrucciones en la página de descarga para saber cómo usarlo bien, ya que no tiene botones ni interfase y todo se hace por medio del teclado y el mouse.

Muchas imágenes abiertas

¿Dónde lo consigo?: Es gratuito y lo consigues aquí.

Author: NOlo

Share This Post On

15 Comments

  1. Mira namás cuánto programita y yo sin saberlo.
    😉
    Post a Reply
  2. clase comercial nolo. si que puedes hacerle de vendedor 🙂
    Post a Reply
  3. me parece chevere todos esos programas pero me interesaria saber si estos programas tambien estan disponible para ser utilizados en mac
    Post a Reply
  4. jaja, lo bueno es que todos son gratis si no les salía muy caro mi convencimiento no? 😛

    Camaleón: Lamentablemente para todos estos programas que reseñé no existe una versión para Mac, aunque seguramente algún usuario de esa plataforma nos podría echar una manita encontrando algunos parecidos supongo :p. Y no estoy seguro pero creo que las extensiones para Firefox si funcionan tanto en PC como en Mac…

    Post a Reply
  5. También agregaría FileZilla a esta lista, es un programita para poder conectarse al FTP.

    Para no desentonar tmb es gratis, en mi caso me ha salvado en numerosas veces.

    Link: Bajar FileZilla

    Post a Reply
  6. La captura de la pantalla completa en mac es con la combinación de teclas comando+shift+3: genera una especie de PDF; y para una parte de la pantalla es comando+shift+4, aparecerá un cursor que te permitirá seleccionar esa área deseada e igual genera una especia de PDF que es perfectamente manejable en Photoshop.
    Post a Reply
  7. muy interesante post Nolo!
    no sabia de tanta tecnología 😛
    Post a Reply
  8. Como ese PixelGrabber esta la extension para Firefox, ColorZilla que tambien es buena y contiene Eyedropper, ColorPicker, Page Zoomer y mas
    Post a Reply
  9. Realmente de agradecer, si.. Lo linkearia, pero ya lo ha hecho dibus 😀
    Post a Reply
  10. Para mac si existe el Freemind y para eso capturar pantalla o ventanas o simpemente objetos sueltos (como íconos, etc) esta el comando ‘comando+Shift+4’ tu puntero se convierte en un fijador de lente y aplastas la barra espaciadora y se conveirte en una camara, asi podras capturar cualquier elemento que veas en tu monitor.
    Las extenciones Firefox tambien funcionan en mac.
    Post a Reply
  11. Ja ja ja… 😀 Es eso, ó comenzar a utilizar Microsoft Outlook, Outlook Express ó de Plano, Webmail. A mi me han resultado más sencillas, inclusive cuando mis mapas de bits rebasan los 190 Megas, por que desgraciadamente Hotmail solo permite enviar archivos de hasta 10 Megabytes.

    Bueno, aunque de hecho existen muchas más alternativas como las que mencionas, sin duda, creo que son de gran ayuda. Aunque creo que a mi me ha resultado mucho mejor combinar el SMTP de mi WebMail en el Outlook Express de mi máquina… 😀

    La verdad, esos trucos son muy buenos, y voy a poner algunos de ellos en práctica. Por cierto, llevo muchísimo tiempo leyendo este blog, y este es mi primer Post.

    Este es un excelente Blog. Saludos a todos los “Alquimistas del diseño”, este Blog es sumamente creativo. Saludos desde Pachuca, Hidalgo. (México).

    Post a Reply
  12. hola soy de mexico y soy un aficionado del diseño, me podrian ayudar quiero crear iconos y estilos tipo mac
    Post a Reply
  13. Hola.. he estado viendo tu blogg y esta super.. te felicito!!!, oye ygracias por publicar ese post de los programas, ya instale dos.. y WOW como me facilitan las cosas… enverdad muchas gracias.
    si sabes de más programas o de utilerias similares pues rola los links… porque estan buenisimos…

    GRACIAS.. y sigue echandole ganas colega…

    Post a Reply
  14. Muy buenos los apuntes para ayudar a los diseñadores, yo no me creo diseñador, estoy en proceso de ser un diseñador amateur….eso en camino.

    SaluII

    Post a Reply

Trackbacks/Pingbacks

  1. Weekly Design Links 8 — SimDalom WyP - [...] Herramientas para diseñadores y no tan diseñadores. [...]
  2. Criterion :: Diseño gráfico y editorial, recursos y enlaces de utilidad :: - [...] Los alquimistas recomiendan herramientas para diseñadores y no tan diseñadores. [...]
  3. Martin Blog » Comprimiendo Fotos - Shrink Pic - [...] Via | Web Oficial | Descarga   [...]
  4. Lo mejor de la semana - aNieto2K - [...] Herramientas para diseñadores y no tan diseñadores [...]
  5. meneame.net - Diseño y sus herramientas Un post interesante para todos aquellos que diseñan (mucho, poco o nada).
  6. Consejos de Diseño « Jugones de la Web - [...] [...]

Submit a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *