Crea gifs para Windows con GifCam

11, junio, 2014

Hacer gifs nunca había sido tan fácil. Ya no tienes que pasar por un tedioso programa para obtener esas sencillas imágenes en movimiento que tanto nos gustan, y tienen un efecto importante en los usuarios. Ahora puedes diseñarlas mediante esta sencilla aplicación, que permite exportar gifs para Windows sin complicaciones.

Ya sea que te dediques al diseño de estas figuras de manera regular o simplemente quieras hacer una imagen en movimiento como distracción, te presentamos a GifCam, que te permitirá tener un gif en pocos segundos.

Se trata de una aplicación que podemos descargar en Softonic para comenzar a usarla en un sistema operativo Windows.

gifcam

¿Cómo funciona?

La aplicación se ejecuta de una forma muy simple, ya que funciona como una especie de cámara o capturador de pantalla. Entonces, lo único que debes tener a mano son las imágenes para hacer el gif. También puedes usar la herramienta para hacer tutoriales cortos. El lente o tamaño de la cámara es modificable, así que puedes reducirlo o ampliarlo según el gif que desees generar. Una vez que tengas todo listo para hacer el gif, comienza el proceso de grabación haciendo click en el botón Rec, que capturará la pantalla de acuerdo a diferentes modalidades.

Grabación de pantalla

Se trata de una grabación continua de la pantalla, durante el tiempo que desees. Es más común para hacer gifs con tutoriales cortos, o para explicar tareas sencillas en la PC, funcionamiento de páginas en Internet, procedimientos de computación, etc.

Frame a Frame

Esta modalidad de grabación de gif se lleva a cabo imagen a imagen, es decir, se corresponde más con el diseño clásico de gif, donde deberás grabar e ir cambiando de imagen hasta completar el proceso.

Efectos

Para cualquiera de las dos modalidades, existen otras opciones dentro de la herramienta, como por ejemplo la colocación de textos en una imagen, o en el caso de los gifs por cuadros, puedes modificar la duración de cada uno.

Calidad de la imagen

Al momento de exportar el gif, puedes elegir los aspectos relacionados con la calidad de la imagen, que alcanza los 256 colores, o seleccionar la opción de blanco y negro que son menos pesados. El formato de exportación puede ser de video, en .AVI. Igualmente puedes activar o desactivar la opción de grabar el puntero y finalmente tienes opciones más específicas como añadir cuadros en reversa o hacer un gif cuya mitad sea estática y la otra en movimiento.

La herramienta es gratuita, compatible con diversas versiones de Windows, y no requiere ser instalada, solo descargar un archivo portable que podrás llevar a cualquier lugar de manera práctica, ejecutando el archivo .exe.

Te dejamos un vídeo para ayudarte a ver cómo funciona este programa de un modo más claro.

Leave a Comment » | Diseño, Herramientas, Imagen, Uncategorized, Utilidades, Windows | Enlace permanente
Escrito por Toni

Las tendencias de diseño también se aplican a la industria del automóvil

26, marzo, 2012

En cosassencillas siempre nos hemos centrado en cómo han evolucionado las tendencias de diseño aplicadas sobre todo a las páginas web y cómo se han desarrollado nuevas tecnologías web. Sin embargo, he considerado interesante destacar cómo esto también ha sucedido en la industria del automóvil. Es curioso ver como cada vez más tendencias de diseño se aplican de un modo muy similar en ámbitos tan diferentes como las páginas de Internet y el diseño de los nuevos automóviles. Seguramente algunos pensaréis que esto no tiene mucho sentido, sin embargo no hay más que echar un vistazo a las líneas cada vez más imperfectas de algunos de los últimos modelos que encontramos en el mercado.

Uno de los últimos lanzamientos del popular fabricante Porsche, nos enseña unas líneas que no tienen nada que ver con respecto a anteriores prototipos que ha ido sacando para otros modelos, se trata del nuevo Porsche Macan, un vehículo todo terreno que llega para ser el hermano pequeño del Cayenne. Si observamos sus líneas, tienen elementos redondeados a la vez que irregulares, siguiendo una estética muy similar a la de algunos de los portales de Internet que encontramos hoy día de diseño más moderno.

Y es que cada vez las tendencias son más irregulares, formas que llaman más la atención gracias a una mayor irregularidad de las formas que componen toda la pieza. Un ejemplo de esto lo vemos en el fabricante americano Dodge, que tradicionalmente ha fabricado modelos con unas líneas muy rectas, evolucionando a unas líneas mucho más curvadas con el popular Dodge Viper pero que finalmente ha optado por líneas más irregulares, un concepto que actualmente da incluso una sensación de mayor deportividad en el caso de los automóviles. En el caso de las páginas de Internet lo que solemos apreciar es una mayor atención, al ver formas, colores y elementos más novedosos, sobre todo para aquellos que pasamos el día enteros navegando por cientos de webs. Un ejemplo de estos nuevos modelos de coches es el Dodge Charger, que basta con observar su parte delantera para darnos cuenta cómo se trata de un vehículo totalmente irregular, con un diseño que no llega a ser de líneas rectas ni curvas. Sin duda una revolución si lo comparamos con los diseños de otros modelos anteriores del fabricante americano.

Sin duda el mundo y sus tendencias cambia constantemente, atrás quedan diseños obsoletos de muchas redes sociales que caen en el olvido como consecuencia de la constante evolución que experimentan redes mas grandes como Twitter o Facebook. Llama la atención ver cómo sucede algo similar en el caso de los automóviles, basta con ver modelos cuadriculados como el Chrysler Crossfire y compararlo con alguno de los modelos novedosos que hemos mencionado antes. Sin duda las tendencias nunca se mantienen estáticas. Así que os aconsejo que cuando preparéis una página nunca la dejéis años con el mismo diseño, tratad de cambiar constantemente su diseño, lograréis unos visitantes más interesados en el contenido de la página, los anunciantes de la página tendrán también mejores resultados y la experiencia global en todos los aspectos será mejor. ¿O no os gustaría cambiar de coche cada año?

Leave a Comment » | Actualidad, Análisis, Blog, Comunicaciones, Cultura, Curiosidades, Desarrollo Web, Diseño, Internet, Tecnología, Varios, Web 2.0, Web social | Enlace permanente
Escrito por Toni

Elements of Design: escaparate de elementos web

19, septiembre, 2007

En SENTIDO WEB descubro a Elements of Design, una galería de elementos contenidos en páginas web que nos puede ayudar a diseñar partes de la página y añadirlas a algún diseño en concreto. Es como CSSMania pero en vez de diseños completos, está enfocado únicamente a elementos.

Podremos encontrar diseños de formularios para comentarios de blogs, comentarios de blogs, calendarios, código, iconos, texto entrecomillado, formularios de registro, cajas de búsqueda, tipología de cabeceras, etc.

Leave a Comment » | Desarrollo Web, Diseño | Enlace permanente
Escrito por Toni

Recursos para simplificar tu vida como diseñador web

12, septiembre, 2007

En INFECTED FX encuentro un enlace a una buena recopilación de 77 Resources to Simplify Your Life as a Web Designer (de Vandelay), donde nos proporcionan una lista con 77 recursos para diseño web. Algunos de estos recursos es posible que los conozcas, ya que han sido ampliamente comentados en la blogosfera de una manera u otra, pero otros pueden ser novedad, así que aquí tienes un buen listado de entre los cuales podrán encontrar:

• Herramientas del color. Elegir la combinación adecuada del color puede ser una tarea difícil. Pero puedes intentar algunas de estas herramientas para que tu decisión sea más fácil:

Para ver herramientas relacionadas con el color puedes ver Find the Perfect Colors for Your Website.

• Menús de navegación con CSS. Los menús de navegación basados en CSS, son utilizados por la mayoría de los sitios Web. No necesitan ser creados desde cero, pues hay centenares de menús ya creados y disponibles para su uso. Puedes utilizarlos tal cual o modificarlos para adaptarlos a tus necesidades particulares:

• Menús de la navegación de DHTML. Xtreeme DHTML Menu Studio es una gran herramienta para crear rápidamente los menús dinámicos de navegación (coste: $49)

• Fotos para tu Web. Las imágenes de la calidad realzan grandemente el aspecto de una página Webe. Puedes encontrar las fotos para libre o comprar fotos de alta calidad a bajo precio:

• Iconos:

• Plantillas en blanco de WordPress. Si diseñas los temas de WordPress puedes ahorrarse mucho tiempo descargando estos temas en blanco (de Tomorrow’s Laundry). Puede ser un punto de partida básico para tu trabajo.

• Plantillas básicas en CSS. Puedes ahorrar tiempo comenzando con una plantilla básica en CSS. La mayoría de las Web se construyen a partir de una plantilla con diversas disposiciones:

• Escultor de CSS de Eric Meyer. Uno de los diseñadores principales del CSS ha creado el CSS Sculptor para acelerar la creación de diferentes diseños básicos en CSS. Si diseñas muchas páginas este software de $149 puede ser provechoso.

• Inspector de enlaces que no funcionan. Los enlaces que no nos llevan a ningún lado frustran en gran manera a los visitantes, la comprobación de cada uno de ellos de forma manual es algo casi imposible, estas herramientas lo harán automáticamente para ti:

• Prueba en diferentes navegadores. La pruebas en diferentes navegadores son una parte del proceso del diseño, y por desgracia eso significa perder mucho tiempo realizandolas:

Para más información sobre este tema puedes ver Effectively Testing Your Website in Multiple Browsers.

• Pruebas para validar códigos. El código válido es generalmente más accesible y debe ser una de las primeras cosas que pruebes cuando encuentras algun problema:

• Scripts. No hay necesidad de reinventar la rueda, puedes utilizar scripts libres que otros han creado:

• Generador de favicones. Los favicons son muy popular hoy día, y no son difíciles de crear. Intentalo con estas herramientas libres para crear los tuyos propios y ayudar a calificar tu sitio Web:

• Tipografía. El encontrar la tipografía adecuada para tu diseño, puede ocuparte mucho tiempo, puedes intentar mejorar ese aspecto con algunos de estos recursos:

• Herramientas Web 2.0. La mayor parte de la web 2.0 y los sitios sociales, tienen varias características del diseño comunes. Estos recursos te ayudan a incorporar algunas de estas herramientas de diseño:

• Diseñando botones. Los botones son un recurso que están por todas partes. Crea fácil y rápidamente tus propios botones con estas herramientas:

• Herramientas para genera la imagen del gradiente. Las imágenes con gradiente son otra característica de la web 2.0. Si no tienes Photoshop hay algunas otras maneras de crear gradientes:

• Cajas de esquinas redondeadas. Crear cajas con las esquinas redondeadas es fácil cuando tienes las herramientas adecuadas:

• Burbujas con CSS. Las burbujas para incluir algun tipo de información son otro recurso que añaden cierta variedad y hacen agradable tu diseño:

• Herramientas para el CSS. Si quieres limpiar, optimizar y comprimir tu código del CSS, aquí están algunas opciones:

• Misceláneo:

  • Web Host Uploader – Una herramienta sencilla ftp que elimina la necesidad de cargar manualmente los cambios a un cliente del ftp. Esta herramienta carga los cambios fácilmente.
  • Web Standards Checklist – Lista de comprobación del diseño de los estándares del Web.
  • Firebug Add-On for Firefox – Puedes corregir, eliminar errores y supervisar de tu CSS, HTML y el Javascript en cualesquier página Web.
  • Web Developer Firefox Add-On – Para agregar una barra con las herramientas más características en cuanto al diseño y desarrollo web.

2 comentarios | Desarrollo Web, Diseño, Herramientas, Web | Enlace permanente
Escrito por Toni

¿Qué resolución de pantalla utilizo para diseñar?

11, septiembre, 2007

En KABYTES tenemos un artículo muy interesante escrito por Pablo, en donde plantea la interrogante… ¿Qué resolución empleo para diseñar? Comenta que actualmente la resolución mas utilizada es 1024×768 que se lleva un 54% seguido de las resoluciones mas altas con un 26%, algo completamente comprensible teniendo en cuenta la aparición de las pantallas widescreen que hoy tan comúnmente vemos.

Las estadísticas de las resoluciones de los navegadores según W3 Schools:

resolucion-monitores

Teniendo en cuenta estos números, todo indica que la resolución ganadora debería ser 1024×768 pero todavía existe un porcentaje que a mi entender es bastante importante de personas con una resolución de 800×600 (14%) y otro porcentaje importante de personas con resoluciones mayores a los 1024.

resoluciones

Se puede emplear un diseño flexible es aquel que se amolda a todas las resoluciones de pantalla, es la solución aparentemente ideal ya que con un diseño así no dejamos a nadie afuera. Lo malo de estos diseños es que tienen que estar muy pero muy bien armados sino queda toda la información “desparramada” y posiblemente termine dificultando la lectura al visitante.

Es muy difícil cumplir con todos, pero no todos los mercados son iguales, si tu proyecto esta dirigido a geeks las resoluciones ideales son iguales o mayores a los 1024×768, en cambio si tu proyecto esta orientado a una temática que poco o nada tiene que ver con lo tecnología, las resoluciones serán de 1024 para abajo. Una buena manera de descubrir esto es buscar foros o sitios donde sabemos que nuestro publico target frecuenta y mirar si tiene las estadísticas disponibles. De ahi ya podemos crear un perfil de nuestros futuros visitantes.

Lo mejor es conocer a nuestros visitantes, los diseños líquidos son una solución muy buena pero siempre que estén bien diseñados, en lo personal prefiero los diseños compactos y claros a un diseño que ocupe toda la pantalla y termine confundiéndome.

Los datos son parecidos a las estadísticas de las resoluciones empleadas según TheCounter.com (septiembre/2007). Puedes compararlos con otros datos globales.

1024×768 9818204 (50%)
1280×1024 5276319 (27%)
800×600 1995673 (10%)
Unknown 1618991 (8%)
1152×864 654352 (3%)
1600×1200 127888 (0%)
640×480 30059 (0%)

2 comentarios | Diseño, Resolución | Enlace permanente
Escrito por Toni

Más tutoriales con efectos de texto en Photoshop

9, septiembre, 2007

En BLOG VECINDAD… nos dirigen a una lista con 51 efectos de texto creados en Photoshop que encontramos en: Photoshop Text Effects Round-Up: 51 Text Effect Tutorials Every Designer Should See.

El texto es una parte muy importante de cualquier diseño, aquí tienes un buen muestrario con 51 tutoriales que te mostrarán cómo crear cualquier estilo del texto deseado.

  1. Aqua Text. Reconstruir el estilo de fuente que el Mac OSX ha hecho famoso.
  2. 3D Cliff Text. Texto que aparece sobre la tierra.
  3. Matrix Style Text. Texto al puro estilo Matrix.
  4. Brick Text. Simula un texto realizado sobre una pared de ladrillos.
  5. Set Your Text On Fire. Cómo crear un texto en lamas muy realista.
  6. Explosion Effect. Texto que estalla.
  7. Spiderman 3 Style Text. Texto al estilo de la tipografía metalizada usada en Spiderman 3
  8. Colorful Light Burst Effect. Simula un texto que estalla hacia fuera.
  9. Web 2.0 Sticker Text Effect. Efecto de texto que simula un rótulo de una etiqueta adhesiva (muy a lo WEB 2.0).
  10. 3D Text. Texto 3D en perspectiva.
  11. Worn Rubber Stamp Text. Texto que simula un rotulo estampado en una superficie irregular.
  12. Chalk Text Effect. Texto que simula como pintado por tiza o brocha en un asfalto o graba.
  13. Blown Out 3D Text. Típico texto en relieve al estilo de las películas 3D.
  14. Create A Professional Looking Logo. Un texto con gradientes y sombras con apariencia muy profesional.
  15. Shiny 3D Text. Texto en 3D con efecto de reflejo metalizado.
  16. Reflective Liquid Type. Texto como si fuera agua con reflejos.
  17. Shiny Floor Effect. Texto vertical reflejando de un suelo brillante.
  18. Water Text. Texto que simula que aparece sobre la superficie de un líquido espeso.
  19. Grungy, Slimey Text. Texto emergente en una superficie coloreada.
  20. Chrome Metal Effect. Crear un efecto biselado en un texto cromado.
  21. Gold Plated Text. Texto con superficie oro brillante plateado.
  22. Graffiti Text With Photoshop. Una pintada muy realista en una pared de superficie irregular.
  23. Transparent GLass Lettering. Texto brillante y transparente sobre cristal.
  24. Swirl Text. Simula un remolino brillante sobre el texto.
  25. Pixel Text Effect. Texto sobre una superficie tipo mosaico.
  26. Glowing Gel Text. Texto que brilla intensamente a modo de gel.
  27. 3 Stroked Text. El texto estilizado muy parecido a los graffiti modernos.
  28. Icy Cold Effect. Texto que simula hielo con reflejos brillantes alrededor de él.
  29. Very Stylish 3D Pixel Text. Texto en 3D que forma pequeños bloques en el centro.
  30. Chrome Text. Texto cromado con sombra.
  31. Rusted Slime Effect. Texto con efecto desgastado.
  32. Worn and Torn Text Effect. Texto con efecto desgastado y roto.
  33. Dreamy Text Effect. Efecto de texto difuminado por el exterior y reflejado, con fondo de nubes, un ambiente como si fuera en un sueño.
  34. Schocking Text. Texto que simula la electricidad que está saliendo de él.
  35. Furry Text. Texto que simula una textura peluda.
  36. Realistic Stone Effect. Texto que parece tallado en piedra.
  37. Gutsy Text. Crear el texto curioso sobre una superficie muy rugosa.
  38. Soft, Plastic Text. Texto con textura de plástico que parece grande en cualquier fondo oscuro.
  39. Turf Text. Simula un texto escrito en césped.
  40. Diamond Text. Texto como si fuera con una superficie de diamantes.
  41. Molten Lava Blast Effect. Utilizar los gradientes y los estilos de la capa para crear el texto fundido de la lava
  42. Mossy Effect. Texto con musgo.
  43. Ice Text. Texto que parece congelado.
  44. Plastic Effect. Texto con efecto de estar envuelto en plástico brillante.
  45. Fragmented Tiles Text Effect. Azulejos puestos en el interior del texto.
  46. Zoom Text. Texto con efecto de velocidad.
  47. Highlight and Shadow Text. Texto con efecto biselado muy sencillo.
  48. Image Inside Text. Agregar una imagen al interior de un texto.
  49. Gold And Ruby Text. Hacer el texto de oro que parezca que contiene piedras preciosas.
  50. Girly Bling Text Effect. Letras chispeantes.
  51. Halftone Effect. Rodea el texto con un estilo de semitono de imprenta.

6 comentarios | Diseño, Photoshop, Tipografía | Enlace permanente
Escrito por Toni

Lugares de exposición para buscar inspiración

7, septiembre, 2007

Como ya nos tiene acostumbrados en JUGLAR encuentro una buena colección de servicios que recogen los mejores y más novedosos diseños web, y permiten seguirlos mediante feeds:

Leave a Comment » | Diseño, Web | Enlace permanente
Escrito por Toni

Colecciones de iconos para diseño web

4, septiembre, 2007

Una buena recopilación para los aficionados a los iconos, de parte de Juglar en Iconos para diseño web, que parece que vuelve a la acción:

  • Brand Spanking New: 1, 2, 3, 4

RSS y Social Bookmarking:

AJAX:

Generadores online de iconos:

Buscadores de iconos:

Otros:

2 comentarios | Diseño, Iconos, Web | Enlace permanente
Escrito por Toni

YAML, un framework XHTML/CSS

31, agosto, 2007

Mediante el enlace que nos suministra SENTIDOWEB descubro a YAML (Yet Another Multicolumn Layout), un framework XHTML/CSS que nos permite crear plantillas para diseños web con diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.

También nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Tan solo deberemos indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.

2 comentarios | CSS, Diseño, HTML | Enlace permanente
Escrito por Toni

Generador de cintas

30, agosto, 2007

raibbongenerator.png

Mediante DIGIZEN descubro a Website Ribbon Generator , que es una herramienta que te permite crear y configurar cintas (ribbons) para blogs o páginas web. Según el profesor Mario Núñez, a veces la mejor forma de llamar la atención de nuestros visitantes es con este recurso, de seguro que alguna utilidad le encontraremos.

Puedes poner un texto, seleccionar el tipo de letra y elegir una cinta, de entre el muestrario, al final te genera el siguiente código que lo puedes poner en el sitio que más te interese.

<script language="javascript" src="http://www.websiteribbon.com/ribbon/4626/"></script><noscript><a href="http://www.websiteribbon.com/">Website Ribbon</a></noscript>

El resultado final es el siguiente…

cinta.png

2 comentarios | Diseño | Enlace permanente
Escrito por Toni

Herramientas para genera fodos

30, agosto, 2007

En BLOG AND WEB nos habla de otra herramienta interesante que ya conocía Imagen degradada, pero como puede ser de utilidad para los que la desconozcan, nos presenta a Background Image Maker , un generador de fondos para tu web o blog a base de lineas (horizontales, verticales y diagonales y degradados).

Puedes personalizar la distancia entre lineas, los colores de degradado, lineas o fondo y el tamaño de la imagen que al finalizar usarás comofondo.

Es una útil sino manejamos ningún programa de edición de imágenes y para este caso también es recomendable dar un vistazo a Stripe Generator 2.0.

Para los degradados puede ser interesante utilizar Dynamic Drive: Gradient Image Maker.

Leave a Comment » | Diseño, Fondos | Enlace permanente
Escrito por Toni

Spiffy Corner, generador de esquinas redondeadas mediante CSS

30, agosto, 2007

En BLOG AND WEB comentan que de la mano de los creadores de Spiffy Box sale Spiffy Corner, una herramienta en línea que ya comenté en el post Más bordes redondeados, pero no esta mal recordarlo. Es un generador de esquinas redondeadas que solo usa css para su funcionamiento, sin imágenes ni scripts. Su funcionamiento es muy sencillo solo hay que escoger un nombre para la clase css (opcional), el color de la sección con bordes redondeados, el color de fondo y el radio de curvatura. Una vez generado te brindará tanto el código css como el html para que puedas implementarlo en tu web.

muestra de la utilidad

2 comentarios | CSS, Diseño | Enlace permanente
Escrito por Toni

Blueprint Grid CSS Generator

27, agosto, 2007

En el blog LEANDONO´S comenta que hace unos días hablaba sobre Blueprint, un framework CSS que permite facilitar la creación de la maquetación, aspectos tipográficos y de impresión en nuestras creaciones.

Aprovechándose de él, Blueprint Grid CSS Generator es una herramienta online que nos posibilita configurar la grilla de maquetación con los valores que nosotros definamos.

Leave a Comment » | CSS, Diseño | Enlace permanente
Escrito por Toni

Curioso sistema de navegación por franjas con CSS

23, agosto, 2007

Es impresionante la cantidad de cosas útiles que se pueden realizar con CSS. En WEBINTENTA, basándose en el artículo «A Stripe of List Style Inspiration» nos muestran como, únicamente con CSS, se pueden realizar estructuras de navegación complejas a partir de listas. En su caso han realizado un sistema de navegación horizontal, con franjas que se expanden para mostrar el contenido de las mismas.

franjas1.png

Un sistema de navegación muy útil para enlazar a distintas secciones y crear explicaciones sobre lo que se va a encontrar el usuario dentro de cada una de las secciones.

franjas2.png

El ejemplo que aparece está basado en el citado artículo, pero se ha añadido como novedad, la utilización de imágenes dentro de las franjas (cosa que es muy útil para un sistema de navegación de este tipo).

Para ver las explicaciones en castellano, el código empleado, o efectuar la descarga del mismo, pulsa el enlace.

3 comentarios | CSS, Diseño | Enlace permanente
Escrito por Toni

« Entradas anteriores