Diseño

Cheapstamatic: Agregar filtros y marcos retro a tus fotos online

por

Con un nombre un poco raro, Cheapstamatic viene para sumarse al tren de los sitios para agregar efectos retro online, y la verdad es que tiene con qué competir porque está muy bueno.

Para comenzar con el proceso podemos elegir de subir una foto desde el disco, tomar una captura desde la webcam o elegir alguna foto de nuestra galería de Facebook. Luego podemos personalizar algunos aspectos como el viñetado, el desgaste de la foto, efecto de grano y contraste. Además de que también dispone de muchos marcos y filtros divertidos para aplicarle a nuestras fotos.

Está la posibilidad de agregar un texto a la foto y cambiar la fuente para poner algún tipo de descripción o nombre que identifique lo que se está viendo.

Enlace: Cheapstamatic

Visto en Techtastico

La verdad detrás de los colores: Lo que dice tu marca a través del color [Infografía]

por

Ya hemos publicado dos infografías referentes a este tema, pero esta va más orientada a la verdad detrás de los colores en cuanto a lo que transmiten las marcas a través del color que usan en sus logos o diseños.

En la infografía se pueden ver algunos datos generales como:

  • El 29% de las marcas usan el color rojo.
  • El 33% de las marcas usan el color azul.
  • El 28% de las marcas usan el color negro o escala de grises.
  • El 13% de las marcas usan el color amarillo o dorado.
  • El 95% de las marcas usan uno o dos colores.
  • Sólo el 5% usa más de dos colores.
  • El 41% de las marcas usa sólo texto.

Aparte de eso también se puede ver como se usan los distintos colores para distintos rubros en las marcas. Les recomiendo que sigan bajando así la ven completa porque vale la pena.

Click para ver en tamaño completo

CSS3p: Convierte tus diseños de Photoshop a CSS3

por


CSS3p es un plugin para Photoshop que les puede ahorrar mucho tiempo a la hora de diseñar, ya que les da la posibilidad de convertir un diseño de Photoshop a CSS3, listo para ser utilizado en cualquier sitio web. La buena noticia es que este plugin es totalmente gratuito, algo valorable porque la mayoría de las herramientas de este tipo son de pago.

En el video de abajo explican el proceso de instalación y su funcionamiento para que tengan una mejor idea de las cualidades del plugin.

Tiene soporte para Photoshop CS3, CS4, CS5 y CS6, tanto en Windows como Mac.

Enlace: CSS3p

Visto en WebResourcesDepot

Bounce: Capturas de pantalla de sitios web con posibilidad de agregar notas personalizadas

por


A veces pasa que tenemos la necesidad de mostrarle a otra persona algo que hemos encontrado en otro sitio web, ya sea algún error de diseño, resaltar algo que nos guste, o cualquier cosa que requiera ser resaltado en el sitio. Bounce es una excelente herramienta que nos permite tomar una captura de un sitio web y agregar notas personalizadas en la misma.

Lo único que tienen que hacer es ingresar la URL del sitio y el sistema generará una captura del sitio web completo, además nos habilitará el cursor para que podamos marcar rectángulos que nos permitirán agregar notas en la captura. Luego, una vez que hayamos terminado generará un link único que podemos compartir con quien queramos. Las personas que entren a ese enlace tendrán la posibilidad de agregar más notas y así generar un feedback en la captura.

Ejemplo, si visitan este enlace van a ver una captura de Punto Geek con algunas notas de prueba, así pueden ver cómo funciona el servicio, y además hasta pueden agregar notas propias.

Enlace: Bounce

Visto en WebMentario

CSS Gradient Button: Generador de botones con degradados en CSS

por


CSS es muy potente, y más aún CSS3, con el cual se pueden hacer todo tipo de cosas, sólo es cuestión de acostumbrarse a utilizarlo. En este caso les quiero recomendar una genial herramienta llamada CSS Gradient Button, con el cual pueden generar botones con degradados totalmente en CSS, sin imágenes.

Su uso es tan simple que sólo consta de un paso, elegir el color que más les guste y automáticamente se generará el código listo para copiar y pegar. Aunque también tienen una sección para personalizar por completo el botón, donde podemos cambiar color por color, elegir un texto para el botón, cambiar el radio de las esquinas, y muchas cosas más.

Enlace: CSS Gradient Button

Cropolla: Recorta tus imágenes de forma inteligente basándose en su composición

por

Croppola es una herramienta muy útil que nos permite recortar nuestras imágenes online de forma inteligente basándose en su composición.

Su uso es muy simple, sólo tienen que subir la imagen que quieran recortar y la herramienta les sugerirá dónde recortar la foto basándose en su algoritmo de inteligencia artificial. Obviamente si lo deseamos podemos cambiar esa selección previa para que se adecue a nuestras necesidades, pero los resultados son muy interesantes.

Enlace: Croppola

Visto en TNW

PicMonkey: Completo editor para agregar efectos a tus imágenes

por


PicMonkey es un excelente editor de imágenes que nos permite agregar efectos a nuestras fotos sin ningún tipo de conocimientos de edición.

Su uso es extremadamente simple, sólo tienen que arrastrar la imagen que quieren editar a la ventana de PicMonkey y comenzar la edición. A la izquierda tienen una serie de categorías con los diferentes efectos y acciones que pueden realizar, en cada una de ellas hay más efectos dentro que tienen unos estilos muy originales y con diseño profesional.

Dentro de las cosas que podemos hacer tenemos las ediciones básicas como rotar, recortar, redimensionar, ajustar colores, agregar texturas y efectos retro, también tiene una sección con formas de todo tipo, como flechas, corazones, estrellas, símbolos, y muchas cosas más.

Enlace: PicMonkey

Generar sprites en un par de clicks con SpritePad

por

La técnica de CSS Sprites es muy utilizada por los diseñadores porque tiene grandes ventajas, por un lado la velocidad de carga de un sitio web aumenta considerablemente, y por otro ayuda a reducir el consumo de recursos ya que sólo se pide un archivo en vez de varias imágenes. El problema principal de esto es que para el usuario mortal es complicado de realizar, generar un sprite requiere de un poquito de trabajo.

Sin embargo, hoy quiero recomendarles una excelente herramienta que nos permite generar sprites online sin tener absolutamente nada de conocimientos. Estoy hablando de SpritePad, con la cual podemos crear un sprite en segundos y sin esfuerzos.

Lo que tienen que hacer es comenzar a agregar las imágenes que quieren en el sprite y acomodarlos en el espacio de trabajo, una vez que terminan el sistema les generaráel sprite y el CSS que tendrán que utilizar. Al terminar descargan un ZIP con todo incluído y listo.

Esta herramienta es totalmente gratuita y no requiere registro, aunque si creamos una cuenta tenemos la posibilidad de agregar amigos y trabajar de forma colaborativa modificando el sprite. Por otor lado también tienen una función de pago llamada Auto Layout, que se encarga de organizar automáticamente el sprite.

Enlace: SpritePad

Visto en WebResourcesDepot