pixelapse, un sistema de control de versiones para diseñadores

Para Windows o Mac, para quien trabaja con Photoshop, Illustrator, InDesign, Fireworks, Graffle, Sketch … pixelapse (pixelapse.com) es un nuevo proyecto que ofrece la posibilidad de guardar las versiones de los trabajos que realizamos, siempre orientado al diseño.

A medida que trabajamos con nuestras herramientas habituales, pixelapse detecta cuando guardamos una versión, subiéndola de forma automática a su plataforma para ofrecer un control inteligente de versiones. No hay límite en el quesito “historial guardado”, por lo que es posible guardar miles de versiones de una misma imagen, siempre disponible para recuperarla en cualquier momento. La plataforma se integra con Dropbox, ayudando así a los que usan dicha plataforma de almacenamiento.

Con los trabajos que hay en la web podemos solicitar ayuda a otras personas para que opinen y generen una discusión de cada imagen allí presente, permitiendo de esa forma obtener feedback tanto de los clientes como del resto del equipo de trabajo.

pixelapse es gratuito para los que no se importen en mostrar sus proyectos de forma pública (de hecho lo anuncian como gratuito para los proyectos con fuente libre), con una gama de precios proporcional a la cantidad de proyectos privados que necesitemos tener bajo control.

keepupdated, para recibir un aviso cada vez que una página web cambie

No es la primera vez que vemos un proyecto como keepupdated.co, una aplicación que monitoriza el aspecto y contenido de cualquier página web que indiquemos y envía una alerta cuando se realice algún cambio en la misma.

Lo vimos con onwebchange.com, con changedetection.com, con changedetect.com y lo vemos ahora con keepupdated, con opciones gratuitas durante la fase beta que permite monitorizar hasta 10 páginas con tres comprobaciones diarias.

Los cambios que recibimos están más enfocados a la estructura del diseño, siendo posible tener un historial con todos los cambios realizados durante el último año.

El funcionamiento es sencillo: informamos la url “víctima” de nuestra acción de “cotilleo digital” y esperamos a recibir los emails.

La herramienta fue creada para permitir que las compañías sepan los cambios que realiza la competencia, sin necesidad de verificar constantemente lo que otros hacen, ayudando así a tomar decisiones en función de lo que otras empresas estén implantando (algo que no siempre es una buena idea).

ui-cloud, un buscador de recursos para diseñadores web

Más de 45.000 elementos clasificados para poder construir interfaces gráficas y más de 1200 kits ya listos para bajar y poder trabajar con ellos, eso es lo que ofrece ui-cloud.com, un buscador en el que podemos encontrar botones, barras de progreso, menús, botones de reproductores de música… prácticamente todos los elementos que podemos desear para buscar tanto material gratuito como inspiración para nuestro propio trabajo.

No se trata de un proyecto nuevo, llevan casi dos años ofreciendo contenido con el que podemos construir listas semejantes a las que Juan Pablo Sarmiento divulga aquí en WWWhatsnew con frecuencia. Nació como un buscador creado por Jack Cai, responsable por la empresa doublejdesign.co.uk, actualmente en fase de rediseño, y fue relanzado en octubre del año pasado.

En algunas ocasiones el material incluido no especifica el tipo de licencia, motivo por el cual recomiendo entrar en contacto antes de realizar un trabajo comercial, evitando así problemas con el autor del diseño divulgado.

Además de navegar directamente por las categorías y de usar el buscador usando palabras clave, ofrece un constructor de botones con el que podemos diseñar el que más se adapte a nuestra página. Después de especificar textos, colores y formas, es posible obtener el código para pegarlo directamente en nuestro trabajo.

Extensiones Chrome para diseñadores web

En 2010 os hicimos una lista de plugins para chrome que pueden ayudar en el diseño web. Lo hicimos de nuevo en 2012, con las novedades del momento. Llegó el momento de hacer la lista de las mejores extensiones para diseñadores web en 2014.

Dimensions: Empezamos la lista con un plugin ideal para medir distancias en la pantalla, siendo así útil para el diseño de borradores.

Responsive Web design: Nos permite probar nuestros diseños web adaptables a la pantalla de cada dispositivo (responsives), permitiendo cambiar el tamaño de la pantalla seleccionando el dispositivo adecuado.

PerfectPixel: Para poner sobre nuestra página html el diseño de lo que estamos construyendo. Podemos seleccionar una imagen y cambiar su transparencia para que al sobreponerse encima de la web que estamos desarrollando podamos verificar si lo que hemos mostrado al cliente es exactamente lo mismo que estamos programando. Se abre como una ventana emergente lateral desde donde podemos controlar posición y transparencia.

Web Developer: Añade una barra con decenas de recursos útiles para quien programa páginas web.

Ripple Emulator: Abre un simulador para programadores de aplicaciones móviles, permitiendo desarrollar sin salir del navegador.

ColorZilla: No es nueva, pero es extremadamente útil. Nos permite, entre otras cosas, capturar el color de cualquier elemento que vemos en pantalla. Podemos también navegar por paletas, generar css, analizar los colores de una página… lleva 10 años en el mercado.

Y vosotros, ¿qué extensiones usáis en el desarrollo de páginas web?

Un juego online para dominar la pluma en photoshop y semejantes

Dibujar curvas con la herramienta existente en algunos editores de imágenes no es tarea fácil. Hay que añadir puntos de ancla donde la curva cambia de dirección y arrastrar las lineas que forman la curva. Es la longitud y la pendiente de dichas lineas las que determinan la forma final, y para ello requiere práctica.

Una vez creada la curva, puede modificarse de forma sencilla, con lo que la creación de los puntos de ancla acaba siendo la principal tarea. Usar muchos puntos puede generar protuberancias no deseadas en una curva, por lo que es mejor dibujar puntos de ancla bien espaciados y practivar la formación de la curva adjuntando la longitud y los ángulos de cada linea de dirección.

Para practicar tenemos un juego online en bezier.method.ac, donde después de algunos tutoriales podemos comenzar a desarrollar contornos complejos como el de la captura superior.

Es una de las actividades existentes en method.ac, donde podemos encontrar varios recursos tanto para programadores como para profesionales del diseño. Entre ellos tenemos también color.method.ac, una excelente herramienta que puede ayudarnos a mejorar nuestra puntería a la hora de encontrar el color adecuado para nuestros trabajos.

animatron, para crear animaciones en HTML5 sin saber programar

Si queréis realizar alguna animación que pueda verse perfectamente desde navegadores modernos o dispositivos móviles, Animatron (animatron.com) os puede ayudar. Se trata de una plataforma que permite crear animaciones atractivas tanto solo como en equipo, con una herramienta sencilla de usar y con un plan gratuito limitado a 20 proyectos.

El panel de trabajo permite usar varias formas, distribuirlas en varias escenas (como si estuviéramos creando un cómic), utilizar una linea de tiempo para gestionar las animaciones, importar audio desde nuestro ordenador, subir imágenes (dibujos hechos a mano, por ejemplo), utilizar librerías, definir movimientos independientes para cada elemento… una gran cantidad de recursos que ayudan a crear nuestra animación sin problemas.

En su página principal es posible ver algunos trabajos realizados por sus usuarios, y la plataforma está abierta en modo invitado, permitiendo su uso sin necesidad de registro (aunque de esa forma los trabajos no se guardan después de 15 días).

El resultado puede exportarse en HTML5, SVG, GIF o vídeo, listo para compartirse en la página web en la que estáis trabajando.

Cody, una biblioteca gratuita de tutoriales de HTML y CSS

codyCody es una iniciativa interesante que reúne una serie de pequeños tutoriales de HTML y CSS, a los que podemos acceder de manera gratuita.

Efectos, estilos, recursos y diferentes trucos encontraremos en esta biblioteca online que va sumando de a poco nuevos contenidos. Con una dinámica muy interesante, nos permite acceder a un tutorial explicado paso a paso, con referencias y un conjunto de archivos para descargar e implementarlo en nuestro trabajo.

Solo tenemos que escoger el tutorial que nos resulta de interés, visualizar el demo para corroborar que es lo que estamos buscando y tendremos toda la información a nuestra disposición. Además, podemos valernos de la opción de dejar comentarios si necesitamos resolver una duda o leer el aporte de otros usuarios.

Si buscamos un tema en especial, podemos valernos del buscador o simplemente recorrer todos los tutoriales que se han compartido hasta el momento.  En la sección de FAQ veremos que los creadores de Cody nos permiten utilizar libremente todos los recursos que han compartido, respetando algunos términos.

Un recurso online gratuito interesante a tener en cuenta para complementar nuestro kit de herramientas de trabajo.

Raumrot, colección de imágenes creativas para usar en nuestros proyectos

Raumrot se suma a la lista de recursos que nos permiten acceder a imágenes HD para uso personal o comercial.

Encontraremos una colección de fotografías sumamente creativas que combinan diferentes efectos y estilos. Es una iniciativa de Markus Spiske, que expone parte de su trabajo bajo licencia CC BY 2.0 para que cualquier pueda utilizar las imágenes en sus proyectos con solo dar la atribución correspondiente.

Raumrot

Para facilitar la búsqueda del estilo de fotografía que necesitamos, encontraremos 9 categorías dedicadas al deporte, los negocios, la naturaleza, entre otros. Al elegir una imagen veremos que tiene dos opciones que nos permiten tener una vista previa o proceder a su descarga.

Todas las fotografías están alojadas en Flickr, lo que nos brindará más opciones al momento de realizar la descarga, ya que tendremos diferentes tamaños para escoger. Además, podremos ver algunos detalles técnicos de la fotografía.

Por el momento, encontramos más de 200 fotografías pero podemos guardar Raumrot entre nuestros favoritos para seguir de cerca sus actualizaciones.