Categoría: Utilidades para diseño

Aplicaciones y recursos para diseñar. Recursos para diseñadores, herramientas gratuitas y consejos para diseñar por móvil y web.

Tiff – Para comparar dos tipografí­as en la web

Publicado el

por Juan Diego Polo

Desde que tenemos la posibilidad de ampliar la variedad del tipo de letra usado en nuestros proyectos web (gracias a Google fonts y typecast, principalmente), son muchas las páginas que están innovando en lo que a diseño se refiere.

Tener la garantí­a de que cualquier visitante verá el mismo tipo de letra en nuestros tí­tulos, cuerpos de texto y demás zonas del sitio, independientemente de si tiene la fuente instalada en su ordenador o no, es importante, y la idea es poder seguir ampliando las colecciones disponibles en estos directorios para que llegue un momento en el que los diseñadores no tengan que preocuparse por este tipo de lí­mite.

El problema es que al aumentar las opciones aumenta también el tiempo dedicado a la hora de decidir la tipografí­a de nuestro proyecto, motivo por el cual tenemos que guardar sitios como tiff.herokuapp.com.

tiff

Se trata de una herramienta que permite superponer dos tipos de letra diferentes para que veamos sus diferencias, ayudando así­ a tomar una decisión. Podemos escribir el nombre de cualquier tipografí­a incluida en Google Fonts y especificar las letras que queremos comparar (R,g,h,e – en el ejemplo superior), mostrando cada una de ellas en un color diferente y con un grado de transparencia que permita su comparación.

Link: tiff.herokuapp.com | Ví­a TNW

4 excelentes recursos para descargar archivos PSD gratis

Publicado el

por Miriam Schuager

Cuando necesitamos archivos PSD para nuestros diseños o como fuente de inspiración, contamos con cientos de servicios y sitios web destacados como Dribbble o DeviantArt, que agendamos en nuestro kit de recursos. Al cual podemos integrar las sugerencias que te compartimos hoy.

Por ejemplo, encontramos Designmoo, una comunidad que comparte diferentes recursos de diseños, entre ellos PSD gratuitos, teniendo una gran colección para elegir. Podemos registrarnos para ser parte de la comunidad, aunque permite la descarga sin ningún tipo de registro.

Brusheezy también es una gran comunidad con una impresionante colección de recursos compartidos por artistas de todo el mundo. Para encontrar todas las opciones de PSD disponibles solo tenemos que utilizar el buscador y seleccionarnos en mejores calificados, más populares, nuevos, etc.

PSD
365psd sigue una dinámica similar, con el bonus de enviarnos un PSD gratis cada dí­a a nuestro correo, aunque podemos recorrer el sitio para ver las opciones disponibles y descargar las que sean de nuestro interés. Por otro lado, Free Photoshop Download recopila de la web diferentes recursos para Photoshop como pinceles, plantillas, iconos, entre otros. Cada uno de los recursos que presenta contienen el link de descarga y el enlace del sitio web original.
Cuatro recursos interesantes a tener en cuenta cuando necesitemos inspiración o ayuda extra para nuestros trabajos de diseño.

Colrd, un excelente recurso para descubrir y crear paletas de colores

Publicado el

por Miriam Schuager

colrd

Ya sea que estemos buscando inspiración para nuestros diseños o estamos pensando en alguna combinación de colores para la decoración de nuestro hogar, Colrd es un interesante recurso a tener en cuenta.

En Colrd podemos buscar bajo diferentes criterios: colores individuales, paletas de colores, gradientes, patrones o si preferimos tener una visión completa de cómo se combinan los colores, podemos inspirarnos en las imágenes compartidas.

Cada una de las sugerencias que nos presenta vendrá con los códigos correspondientes, los utilizados en los fondos con degradados en CSS3, además de RGB y HSL. Y en algunas opciones nos permiten la descarga en diferentes formatos para editarlos en nuestros programas.

Si deseamos, también podemos participar creando nuestros propios diseños de una manera muy simple a través del editor de Colrd. Solo tenemos que escoger que tipo de aporte deseamos realizar (paleta de colores, imágenes, etc) y automáticamente se abrirá el editor con las herramientas necesarias.

Por ejemplo, si nos decidimos por una imagen podemos subirla desde nuestro equipo o escoger alguna de las sugeridas en la galerí­a de Colrd. El editor registrara cada uno de los colores de la imagen y podremos desplazarnos con el cursor para notar las diferentes tonalidades. Luego solo nos resta seguir los pasos para publicarlas.

Sin dudas, Colrd es un excelente recurso que podemos agendar para futuras consultas.

css3ps – Pasando de PSD a CSS3

Publicado el

por Juan Diego Polo

Crear el diseño de un sitio web y transformarlo en plantillas con hojas de estilo CSS son dos trabajos que en muchas ocasiones requieren dos tipos de profesionales diferentes, siendo necesario invertir una gran cantidad de tiempo en la transformación de la idea en archivos que un navegador reconozca como «página web».

Si trabajáis con photoshop y queréis agilizar el trabajo, podéis usar varias opciones que ayudan a crear la hoja de estilo, total o parcialmente, opciones que pueden ayudar a ahorrar varios dí­as en la creación del proyecto. Aunque en muchos casos el código generado es bastante «sucio», es una buena forma de no comenzar desde cero.

Una de las últimas opciones que han aparecido en esta categorí­a es css3ps.com, herramienta que se integra en forma de plugin y trabaja con CSS3.

css3

Es un plugin gratuito para Photoshop que realiza el trabajo en la nube para convertir las capas en CSS3. Tarda bastante en realizar la transformación, pero hay algunas demostraciones en su web que muestran como el resultado puede ser bastante completo.

Aquí­ tenéis un ví­deo mostrando su funcionamiento: Continúa leyendo «css3ps – Pasando de PSD a CSS3»

screensiz.es – Tamaño, resolución y más datos sobre pantallas de móviles, tabletas y monitores

Publicado el

por Juan Diego Polo

tamaños

Los desarrolladores de dispositivos móviles luchan a diario para que sus aplicaciones y sitios web sean atractivos en cualquier tipo de pantalla, algo que, principalmente en el mundo Android, puede resultar una Odisea.

En screensiz.es tenemos una web que nos ayuda a consultar estos datos de decenas de dispositivos móviles, existiendo también una sección para monitores y tabletas, así­ como la opción de seleccionar las variables que queremos consultar en la tabla.

No se trata de una aplicación compleja ni capaz de recibir el feedback de los lectores, pero sí­ es una herramienta que puede ser muy útil para tener en cuenta la popularidad de cada aparato (última columna), número calculado según la cantidad de búsquedas realizadas en Google sobre cada dispositivo, tal y como comentan en TNW.

Diseños que se adapten al tamaño de la pantalla del lector, esa es una de las tendencias del diseño web en 2013 que comentamos hace unas semanas, y sitios así­ ayudan a conocer más datos sobre el «mundo de las pulgadas».

200 iconos vectoriales gratis para utilizar en Google Maps

Publicado el

por Miriam Schuager

Map icons

Si estamos pensando en trabajar en proyectos que se basen en Google Maps notaremos que no cuenta con demasiadas opciones en iconos, para personalizar la forma en que deseamos se visualicen los diferentes puntos de interés, pero podemos tener en cuenta algunas alternativas como Map Icons Designer.

Map Icons Designer es un pack de 200 iconos vectoriales que nos ofrece más opciones  al momento de señalar marcadores de posición,  POIS o cualquier elemento a destacar en aplicaciones que trabajen con Google Maps.

Además de tener los marcadores más comunes (como los que indican zona de restaurantes, hospitales, hoteles, aeropuertos) también cuenta con una interesante combinación de iconos que podemos utilizar de forma creativa o para suplir aquellas situaciones o lugares que no se contemplan en los iconos de Google Maps. Y como bonus cuenta con 10 pins de diferentes colores con la opción de modificarlos, personalizando el tamaño y color.

Para saber si es lo que estamos buscando podemos visualizar una vista previa de todos los iconos que componen el pack en la página de presentación. Podemos descargar de manera gratuita el pack  (en PNG y PSD, en diferentes tamaños), y utilizarlo libremente tanto para uso personal como comercial, según lo indican sus creadores.

Google ya permite bajar las Google Fonts (tipografí­a) a nuestro ordenador, sincronizando con la versión web

Publicado el

por Juan Diego Polo

google fonts

Google Fonts nos ayuda a usar tipografí­a original en nuestros proyectos web. El poder indicar con un pequeño codigo en nuestro sitio el tipo de fuente que queremos usar ha permitido que la estética de sitios de todo el mundo pueda personalizarse más, sin depender de las fuentes existentes en los ordenadores de cada lector.

Ahora, desde el Blog de Google para Desarrolladores, informan que podremos bajar a nuestro ordenador su colección de Google Fonts (www.fonts.com/web-fonts/google).

A partir de hoy, se puede descargar estas fuentes para el acceso sin conexión en el escritorio. Hemos hecho todas las fuentes del directorio de fuentes Google disponible en SkyFonts, una herramienta de Monotype que permite instalar y sincronizar las fuentes de la web en su dispositivos Mac OS X o Windows.

SkyFonts actualiza automáticamente las fuentes instaladas en el sistema cada vez que se actualizan las fuentes de Google. Con las fuentes instaladas localmente podremos navegar por sitios web que usen esa tipografí­a de forma más rápida, que que el navegador no tendrá que bajar los archivos de ningún lugar.

Comentan también que podemos bajar las fuentes originales desde code.google.com, sin depender de Skyfonts.

webcolourdata, para saber los colores utilizados por cualquier sitio web

Publicado el

por Juan Diego Polo

colores

Los que trabajan con diseño web están acostumbrados a crear y gestionar paletas de colores para sus trabajos, una tarea que puede ser mucho más sencilla con webcolourdata (webcolourdata.com), aplicación web que extrae los colores utilizados por cualquier url.

La herramienta muestra la paleta y la distribución de tonos, así­ como una lista de sitios web que usan colores semejantes.

En los detalles de los colores extraí­dos podemos ver el porcentaje de cada uno utilizado en la url especificada, ayudando así­ a conocer perfectamente el estilo de cada trabajo.

En 2009 os escribí­ una lista de herramientas web que podemos usar para trabajar con colores, una lista que ha ido ampliándose con joyas como las que os presento hoy, divulgada hace pocas horas en webresourcesdepot.com

Nueva versión de Proto.io, la aplicación para crear prototipos de aplicaciones móviles

Publicado el

por Juan Diego Polo

proto.io

Hablamos de Proto.io en 2011, cuando la aplicación aún estaba cerrada para el público en general. El tiempo ha pasado y ahora lanzan una versión bastante útil para los que trabajan en prototipos de aplicaciones.

Tienen la interfaz de usuario totalmente renovada, con las propiedades agrupadas para todos los componentes incluidos en el prototipo y posibilidad de seleccionar y editar las propiedades dinámicas individuales. Han mejorado considerablemente la sección de colores, siendo posible defiinr paletas de colores personalizadas para cada proyecto, así­ como los atajos de teclado, ideales para quien no quiere depender del mouse para crear.

La parte de interacción también es nueva, permitiendo que los clientes naveguen mejor por el diseño que les presentamos, algo fundamental para que puedan entender el concepto que queremos transmitir con el prototipo. Hay también un nuevo motor de animación, cinco veces más rápido que el anterior.

Con una impresionante cartera de clientes, y una versión gratuita limitada a un proyecto, Proto.io parece estar destacando bastante en su categorí­a.

Si alguno de vosotros ya es usuarios del sistema, comentad, que seguramente recibirán desde aquí­ el tan deseado feedback.

GoVisually, herramienta colaborativa para grupos de creadores gráficos

Publicado el

por Fco. José Hidalgo

GoVisually

Si nuestra profesión está relacionada con el mundo del diseño y de la creación gráfica, GoVisually es el espacio colaborativo en Internet que podemos necesitar a la hora de colaborar con otras personas dentro de un mismo proyecto creativo.

Su funcionamiento es muy sencillo, ya que una vez estemos registrados e identificados, podemos crear nuestros propios proyectos, teniendo en cuenta que la versión gratuita nos permite disponer sólamente de un sólo proyecto. Cuando estemos dentro de cualquier proyecto, podemos subir imágenes y revisiones de las mismas, contando en nuestro espacio de trabajo con las herramientas necesarias para realizar las anotaciones y comentarios pertinentes dentro las propias imágenes.

Y como es una herramienta colaborativa, podemos contar con las aportaciones de aquellas personas a las que hayamos invitado a través del correo electrónico, para que una vez registradas, puedan aportar sus granitos de arena dentro del proyecto. No existe lí­mite en cuanto al número de colaboradores con los que podemos contar.

Si queremos trabajar tranquilamente, GoVisually nos permite trabajar a pantalla completa, de manera que se elimina la interfaz del navegador y obtenemos más espacio en pantalla para trabajar sobre las propias imágenes. Gracias a ello, podemos comparar múltiples revisiones de un mismo diseño, de los muchos que podemos subir, de forma más clara.

La herramienta no ofrece ningún tipo de complicación en su uso, ya que es fácil e intuitiva. Si por algún casual,no nos convence esta herramienta, en esta lista tenemos otras opciones.

Enlace: GoVisually | Ví­a: Hongkiat