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.

FireSize, para cambiar el tamaño de cualquier foto de forma inmediata y automática

Publicado el 23 marzo, 2015

por Juan Diego Polo

No es difícil cambiar el tamaño de una imagen, o reducir la cantidad de kb para que sea más rápida su carga en una página web, de hecho ya comentamos algunas opciones que podéis usar para esta finalidad, pero la que os presentamos hoy es seguramente la más sencilla de todas.

Se trata de firesize.com, una aplicación que altera el tamaño de una imagen con solo cambiar la url de la misma.

Si nuestra foto es de 1024×768 y está guardada, por ejemplo, en:

https://misitio.com/foto.jpg

solo tendremos que acceder a

https://firesize.com/800×100/g_center/https://misitio.com/foto.jpg

para ver la misma imagen en tamaño 800×100, imagen que se guardará en varios servidores para que nuestros lectores la carguen desde el más cercano, garantizando así que la web reduce su tiempo de carga.

FireSize de momento se encuentra en fase beta, siendo gratuito, aunque se espera que se desarrollen extensiones y formas de integrar esa tecnología dentro de cualquier web, ayudando a aumentar la velocidad de nuestros sitios y a no preocuparnos con los tamaños de las imágenes que mostramos a los lectores.

Algunos miembros lectores de Producthunt ya han estado trabajando en un script que carga todas las fotos de una misma página web usando FireSize. Parece que oiremos hablar bastante de este sistema.

Jimdo y 99designs se asocian para que sea posible crear webs e identidad visual en el mismo sitio

Publicado el 18 marzo, 2015

por Juan Diego Polo

captura-22

Desde Jimdo nos comentan que se han asociado con la plataforma de diseñadores de 99designs, web de «concursos» de diseños en la que los clientes llegan, lanzan un concurso de diseño con un briefing y luego eligen un diseño ganador.

Los CEOs de las compañías se conocen desde hace tiempo, y han encontrado una forma de complementar los servicios bastante lógica. Nos comentan:

Por nuestra parte, muchos usuarios tienen una página web, pero les falta una imagen de marca constante, un logotipo profesional y un diseño de una página web acorde a ese logotipo. Por su parte, sucedía el caso contrario: una maravilla de logotipo, pero sin una página web donde mostrar sus servicios y plasmar su imagen de marca. Por eso hemos lanzado una nueva categoría conjunta de Logotipo y website que sobretodo va a beneficiar a las pequeñas o medianas empresas que quieran dar el paso de tener una presencia online más profesional.

Aunque son muchos los profesionales que no aceptan el modelo «concurso» como una opción, son miles de diseñadores los que trabajan con frecuencia en 99designs, y si ahora existe la posibilidad de crear una web y ofrecer un diseño completo (logo + identidad visual), se abrirán nuevas posibilidades para quienes ofrecen este tipo de servicios.

5 excelentes buscadores de iconos gratuitos y de libre uso

Publicado el 17 marzo, 2015

por Juan David Quiñónez

Para todo tipo proyectos, particulamente, los que se realizan para la web, hace falta disponer de buenos catálogos gráficos de alta calidad. Por tal motivo, hoy compartimos algunos de los más interesantes buscadores de iconos gratuitos y de libre uso que son recomendados por los profesionales de ElegantThemes, y que se pueden usar de inmediato gracias a su disponibilidad también online:

FlatIcon

Alrededor de 70.000 iconos vectoriales gratuitos, en formatos SVG, EPS, PSD y PNG, con la posibilidad de obtenerlos tanto en descarga directa como directamente en Photoshop, Illustrator y After Effects (a través de una extensión). Por si fuera poco, pueden usarse hasta como fuentes web.

iconmonster

PNG y SVG son los formatos que contempla esta colección de elegantes iconos en calidad vectorial, más de 2.000, organizados por categorías rápidas. Puedes descargarlos y usarlos en proyectos personales y comerciales, incluso sin enlaces de atribución, pero antes debes revisar algunas condiciones dadas en su licencia.

IconArchive

Aunque hay varias restricciones para varias de las elegantes colecciones de coloridos iconos que en dicho buscador se encuentran (atribuciones, licencias Creative Commons, prohibición de uso comercial en algunas pocas, etc.), en general, el material disponible puede ser ocupado en proyectos personales y profesionales de todo tipo sin mayor impedimento.

IconFinder

Un referente en el sector con ya casi medio millón de iconos indexados y alrededor de 7.000 colecciones de ellos. Aunque se cuentan los iconos de pago con los gratuitos, de este último tipo hay por montones y se puede acceder rápidamente a ellos a través de los útiles filtros (incluyendo uno por licencias) que se presentan junto a la sección de resultados. Una interesante característica es que con solo un botón se puede elegir a gusto su color de fondo (blanco, negro, gris o transparente).

freepik

Finalmente tenemos a freepik, un servicio online que entre otros recursos gráficos (imágenes vectoriales, archivos PSD y fotos) presenta con cada búsqueda un buen manojo de iconos listos para su descarga y uso. Son más de 40.000 iconos gratuitos y de cada uno se comparte su debida licencia, además, se muestra una organización también por categorías: Clima, transporte, medicina, señales, herramientas, etc.

Post.as, una aplicación para hacer montajes con textos, fotos y vídeos

Publicado el 12 marzo, 2015

por Juan Diego Polo

Existen muchas herramientas creadas para permitir crear banners, montajes, collages de todo tipo para mezclar fotos y textos en Internet, y post.as es una nueva apuesta en esta categoría.

Se trata de una plataforma en la que podemos subir fotos, alterar su posición y tamaño, crear textos con varios tipos de fuente y efectos, incluir vídeos y sonidos (importa desde youtube, soundcloud y otras fuentes)… no hay que tener conocimientos avanzados ni de diseño ni de programación, únicamente buen gusto para mezclar colores y alinear componentes.

Post.as pretende ser una referencia a la hora de compartir contenido en las redes sociales, de hecho podemos compartir el resultado en facebook con un solo click, aunque en el caso de incrustar un vídeo, no funcionará directamente en Facebook, siendo necesario incluir el link a post.as para que los seguidores lo vean.

Aunque para crear banners profesionales tenemos en canva.com una inmejorable opción, post.as puede ayudar a los que quieren hacer un montaje rápido sin preocuparse con plantillas ni formas, y en eso sí es bastante efectivo.

Incluye también la posibilidad de seguir y ser seguidos, por lo que además de ser una herramienta para crear montajes y enviarlos a las redes sociales, podría también transformarse en una red social de creativos, aunque aún tendría que recorrer mucho camino para tener éxito en esa categoría.

Modulator, una aplicación para crear nuestra propia tipografía

Publicado el 26 febrero, 2015

por Juan Diego Polo

Si queréis escribir en el ordenador con un tipo de letra único, personalizado, creado por vosotros mismos, prestad atención a lo que ofrece modulator.

Se trata de una aplicación que permite definir varias variables que afectan al formato de la letra que estamos construyendo. Ancho de la linea, altura, efectos ópticos… a medida que ajustamos los valores, vemos el resultado en el panel derecho, tanto de una letra específica como del abecedario o de una frase de ejemplo.

El resultado puede exportarse como odf o como webfont, siendo así sencillo instalarlo incluso en una página web.

En 2012 os hablamos de 7 herramientas que podemos usar para crear tipografías, y en 2013 comentamos dos opciones que podemos utilizar para transformar nuestra letra escrita en fuente para ordenador; modulator llega para ampliar la primera lista, y lo hace con estilo.

specfox, para crear un documento de especificaciones de diseño de un sitio web

Publicado el 25 febrero, 2015

por Juan Diego Polo

Si estáis diseñando la web de un cliente, seguramente estáis acostumbrados a capturar pantallas y realizar comentarios sobre la misma. Los documentos de especificaciones de diseño, así como los de alteraciones, suelen incluir muchas capturas que ayuden a obtener referencias de lo que debe cambiarse, con comentarios al pié de cada uno de los elementos.

Basándose en esa técnica, specfox.com nos presenta su proyecto, una web en la que podemos subir varias capturas, destacar las regiones que deben sufrir modificaciones y realizar los comentarios pertinentes.

El proceso es sencillo, semejante a lo que hemos visto en varias aplicaciones web de revisión de especificaciones, pero en este caso apuestan por un tema importante: la exportación.

Tanto las capturas subidas como los comentarios realizados en las diferentes secciones se distribuyen de forma inteligente e intuitiva para que pueda exportarse un PDF con el formato perfecto para presentarlo al cliente, incluyendo la portada del proyecto.

En el vídeo inferior os muestran un ejemplo (comienza a hacerlo enel segundo 40). La aplicación es gratuita, pero solo permite un proyecto por cuenta (ya están trabajando en opciones premium para permitir más proyectos).
Continúa leyendo «specfox, para crear un documento de especificaciones de diseño de un sitio web»

Crea banners, con texto e imagen de fondo, en pocos segundos

Publicado el 18 febrero, 2015

por Juan Diego Polo

Así se presenta esta aplicación disponible dentro de Buffer. Su nombre: Pablo, su link: bufferapp.com/pablo.

Sin querer compararlo con herramientas avanzadas de creación de banners, como canva.com, Pablo permite crear un banner con un texto y una imagen de fondo en muy pocos segundos. Solo tenemos que definir el texto, seleccionar o subir la imagen y especificar detalles como tipografía, tamaño, colores, efectos en la imagen y poco más.

El resultado es semejante al que veis en esta captura, con la imagen lista para ser divulgadas en redes sociales o bajada a nuestro ordenador.

45 recursos frescos para profesionales web, edicion febrero

Publicado el 10 febrero, 2015

por Juan Pablo Sarmiento

Bienvenidos a una nueva compilación de recursos recién salidos para diseñadores y desarrolladores Web, curada por nuestros expertos en ambos campos. Esta vez encontrarás íconos, plugins y todo tipo de herramientas para mejorar tu desempeño. Vamos a echarles un vistazo:

100 Iconos De Cocina Gratuitos

45 Iconos Vectoriales De Comercio Online

Iconos Flat Con Temática De Escritura Y Papelería

Redacted Font: Libérate De Lorem Ipsum

SUNN: Fuente Hecha a Mano

Gigante paquete gratuito de ilustraciones FLAT

Mockup Con Elementos De Viaje

Icono: Un Paquete De Iconos En Puro CSS

Plantilla De Hoja De Vida En PSD

Barras De Progreso Y Sliders En PSD

Un Paquete De Logos, Marcos Y Mockups Con Estilo Antiguo En PSD

Ink: Un Framework Para Emails Responsivo

Justinmind: Wireframes Interactivas Para Web Y Móviles

Tint UI: Paletas De Colores Para Toda Clase De Proyectos

Font Pair: Encuentra Espectaculares Combinaciones De Fuentes

Gleam: Una Plataforma Para Hacer Crecer Tu Negocio

RubyGems: Encuentra, Instala Y Distribuye Gemas Ruby

Brothercake: Encuentra Selectores CSS Sin Usar

Dante: Un Editor WYSIWYG

Piwik: Software De Análisis Web Gratuito

SpaceBase: Framework CSS Responsiva Basada En SASS

LumX: Un Framework Responsivo, Basado En AngularJS Y El Diseño Material De Google

Papier: Librería De CSS Responsiva

Context.IO: Sincroniza La Info De Tus Emails Fácilmente

Bootsy: Framework Para Administradores De Proyectos

Flatter: Una Gigantezca Interfaz Gráfica En PSD, HTML Y Bootstrap

Kit De Interfaz Gráfica Con 55 Elementos

Elementos De Interfaz Gráfica Flat En PSD

Kit De Diseño Android Lollipop Para Sketch

Elementos De Interfaz Gráfica Para Negocios En PSD

Grid Forms: Atractiva Inserción De Datos

Justified.js: Galerías De Imágenes Justificadas

Squire: El Textarea Del Futuro

Skyline: Construye Frameworks CSS Personalizados

Descripciones Emergentes Responsivas Con JQuery

Matter.js: Un Motor Físico 2D En JavaScript

Combokeys: Atajos De Teclado En La Web

Keypress: Una Librería Para Capturar Lo Que Insertas Con El Teclado

Sortable: Reorganización De Elementos Para Dispositivos Táctiles

Insignia: Etiquetas Personalizables

Barra Lateral En Diseño Meterial

PNG Es Mejor Que SVG Para Realizar Sprites

Reloj Funcional En CSS3

Menú Deslizante Con Animación Diagonal

Menú Animado Con CSS Y Flitros SVG

Shade, una aplicación web para quien usa degradados en el CSS

Publicado el 9 febrero, 2015

por Juan Diego Polo

Si os gustan los degradados en una página web y queréis usarlos en vuestro proyecto, aquí tenemos una aplicación web que nos puede ayudar mucho.

Hay degradados CSS lineales (linear-gradient) y radiales (radial-gradient), siendo el primer caso, donde la transformación de color va avanzando línea a línea, la que tratan en jxnblk.com.

Solo tenemos que entrar a la página e indicar el color base para poder empezar a trabajar. Para hacerlo es posible alterar las variables de los controles de la izquierda, dedicando los de la derecha a gestionar valores relacionados con el brillo y saturación.

A medida que movemos los controles, veremos los cambios en tiempo real en el panel superior, siempre con la linea de CSS que deberemos incluir en nuestra hoja de estilos.

El ejemplo que mostramos en la captura superior responde a background-image: linear-gradient(-90deg, #DFF3DD, #1E4328);, tal y como se puede ver en la sección derecha de la misma, valores que se alteran a medida que probamos diferentes combinaciones.

Aunque los degradados han perdido el protagonismo que tenían hace unos años, aún pueden ser utilizados en proyectos que necesiten destacar alguna zona específica, por lo que vale la pena guardar este enlace en la categoría de Utilidades para Diseño.

Fleck, un «Instagram» para artistas donde cualquier extraño puede darle «Me gusta» a sus contenidos

Publicado el 8 febrero, 2015

por Juan David Quiñónez

Fleck es una interesante aplicación gratuita para iOS que aplica un nuevo enfoque a la hora de publicar fotografías e imágenes “a lo Instagram”: Además de que muchos de sus usuarios son diseñadores y artistas publicando contenidos tan frescos como de alta calidad, lo particular de su trabajo es que el público no está limitado a “seguidos” y “seguidores” como en el resto de redes, simplemente cualquiera que vea una imagen que le agrade puede darle “Me gusta” sin la necesidad de pasar por establecer alguna especie de conexión con su autor.

Lo mencionan en Wired como una opción para compartir fotografías y “conseguir más likes que Kim Kardashian” por lo efectivo que puede resultar a la hora de querer hacer popular un contenido específico. Mejor dicho, es una maravilla para el ego de muchos que se ven satisfechos y disfrutan al ver una enorme aprobación en lo que publican. Eso sí, el sacrificio está en que la promoción al autor pasa a ser mínima pues casi que se mantiene como anónimo, de hecho, ni perfiles sociales se manejan -es que ni red social es, quizá una red de contenido le denomina mejor-.

En fin, el centro de Fleck es el contenido sin las limitaciones de visualización que podría causar el requerir de relaciones entre usuarios, detalle que sesga igualmente, con su personalización basada en conexiones, el contenido presentado a cada uno.

Fleck se basa en la apariencia de Instagram con “una pizca” de Tinder, y basta un deslizamiento hacia arriba o hacia abajo para dar like a una foto o desaprobarla, respectivamente. Dispone de categorías rápidas para filtrar por temas de interés (arte urbano, patrones, naturaleza, etc.) pero la mayor parte de las imágenes publicadas por la comunidad se presentan en una línea de tiempo general. Además, muestra un “top 20” adicional cuya organización estará determinada por el número de likes que ha conseguido cada material en su día anterior.

Indudablemente se trata de una herramienta de curación de contenidos de lo más interesante, pero solo para descubrirlos porque ahondar en su creación, empezando por sus autores, no hace parte de su filosofía.

Enlace: Sitio web – Fleck en la App Store