Kit de recursos para elaborar logos estilo vintage

Tamara

En varias oportunidades hemos compartido opciones gratuitas que incluían badges y logos estilo vintage, la realidad es que si bien vienen elaborados por defecto uno puede intercambiar los elementos para lograr algo más personalizado aunque no siempre queda bien. En este caso lo que quiero mostrarles es un paquete de recursos que están diseñados para ser combinados, sea cual fuere el objetivo del elemento que desean desplegar, todos y cada uno de estos componentes los ayudará en la tarea para lograr el mejor resultado.

La idea es que a partir de cuatro logos básicos, cada uno de los elementos que contienen pueda ser aplicado en el otro y viceversa, de esa forma si uno de ellos no es completamente lo que buscan pueden encontrar la forma de adaptarlos para formar un nuevo esquema. Me hubiese gustado que tuvieran más opciones, pero entre todos los recursos que compartimos aquí podrán, a partir de esta base, complementar con íconos o tipografías diferentes manteniendo la estética.

Vintage Logo Elements

Descargar Vintage Logo Kit | PixelBuddha

Dentro del archivo de descarga encontrarán información sobre las fuentes y el uso que pueden darle a la herramienta, también un pdf y su correspondiente PSD que contiene el editable, por decirlo de alguna manera. Una vez allí con algunos pocos cambios podrán tener un escudo atractivo, moderno (a pesar de la estética) y que combine bien con su nuevo proyecto. Los invito a recorrer la gran cantidad de íconos que contiene nuestro sitio para abarcar más opciones ya que los espacios están predestinados y resulta muy simple cambiar uno por otro.

Glyphr: editor para tipografías HTML5

Isabel

La creación de tipografías es un tema complicado para quienes recién se inician. No es sencillo, a pesar de que puede parecerlo, y requiere de técnica, paciencia y costumbre haciéndolo para manejar las aplicaciones con mayor fluidez. Como con todo, tiene un progreso de aprendizaje que debemos respetar para ser buenos en ellos.

Otra cuestión es que los programas de diseño de fuentes suelen ser, en su mayoría, avanzados y pagos. No solo pagos sino que bastante caros y quienes no tienen la posibilidad se ven complicados por esto.

Glyphr Studio llega para solucionar estos problemas. Se trata de un editor de tipografías online creado en HTML5 y que ofrece herramientas realmente dignas de comparación con un software tradicional. ¿Pago? no, completamente gratis :D .

Glyphr: Editor para tipografías HTML5

Listar las herramientas sería algo realmente extenso. Podemos crear formas, copiar y pegar, editar manualmente secciones de la tipografía en cuestión, realizar nuevas curvas, seleccionar cada letra por separado y, lo mejor de todo, trabajar por capas. Las capas siempre facilitan el diseño y su organización.

Desde el menú de la izquierda se accede a las opciones. En ellas configuraremos la fuente en cuestión editando una garn cantidad de detalles. Además se puede cambiar el proyecto, exportar los resultados o modificar algo ya creado.

Al seleccionar cualquier sector de la tipografía se verán sobre el lateral sus datos. Aquí podemos cambiar los valores a gusto si preferimos este método al manual, sin olvidar que simplemente podemos combinar ambos. Quizás se puede diseñar a mano pero perfeccionar las ubicaciones con diferentes niveles en los campos que ofrece.

Ni bien ingresamos directamente a la aplicación nos brinda dos opciones. La primera es subir un proyecto ya creado para trabajar sobre él y la segunda es la creación de algo nuevo. Tipeamos un nombre y comenzamos.

Nos vamos a encontrar con un canvas en blanco listo para ser trabajado. Al costado aparece la lista de caracteres para que vayamos seleccionando de a uno y creando nuestra nueva tipografía. Desde allí, solo resta hacernos amigos de las herramientas y animarnos a innovar.

Crear tipografías no es sencillo en parte porque la cantidad que existe en innumerable. Si vamos a hacerlo debemos tener en cuenta que hay que aplicar la creatividad y buscar los puntos ingeniosos u originales que podamos sumar, mantiendo un aspecto limpio y claro.

Aclaración al momento de descargar para quienes sean nuevos en el tema. El archivo resultante que crearemos estará en formato TTX. Lo que se hace con este documento es convertirlo luego a tipografía de extensión OTF. Para esto existen varias herramientas aunque lejos deberían estar de preocuparse ya que desde la misma aplicación si van a “Export font” serán guiados paso a paso incluyendo el enlace de descarga al programa que se ocupará del paso final.

Web: Glyphr Studio

Episodify: lleva un registro de los episodios que miras

Tamara

Aquí en Kabytes, todos somos fanáticos de las series, miramos muchas muy diferentes y a veces sobrepasa nuestra memoria llevar el conteo de lo que vimos y lo que no. En el caso particular de Isa y mío, solemos mirar dramas asiáticos por lo que como tienen un formato diferente a los americanos (no suelen tener temporadas sino que duran x cantidad de episodios y terminan), por momentos es difícil llevar la cuenta de cuál capítulo fue el último que vimos.

He probado todo tipo de aplicaciones para llevar este monitoreo sin éxito, en algunos casos tienen las producciones incompletas, desactualizadas, o ni siquiera están. Es por ello que luego de haber llenado de aplicaciones similares mi móvil pude dar finalmente con un software liviano, simple de utilizar, muy completo y actualizado. Claro que los que solo miren series británicas o americanas no tendrán problemas en hallar sustitutos ya que usualmente son las primeras que se actualizan en las bases de datos, pero para los que miramos aún más cosas, se complica.

Episodify

La aplicación es liviana por el sencillo hecho de que sirve para lo que dice y nada más, buscas la serie o el drama, la encuentras, la marcas como favorita (o se agrega sola cuando tildas un episodio), agregas los episodios que has visto y listo, tienes una lista que te indica por qué capítulo vas desde la primer pantalla. Algo que puede ser algo molesto pero a fin de cuentas es útil, es que cuando uno inicia la aplicación salta una ventana que nos pregunta si hemos visto alguno de los episodios pendientes, es incómodo, puede ser pero cumple su función ya que prácticamente podemos marcar los pendientes directamente sin buscar nada.

Episodify

La gráfica es bastante básica, si buscan algo lindo visualmente pues entonces puede que no sea la aplicación para ustedes (bueno, tampoco tanto pero tengo que decirlo), por mi parte, me ha resultado tan útil y práctica que a fin de cuentas no molesta.

Puede que para algunos sea insuficiente ya que solo sirve para llevar un monitoreo de episodios así que quizás les convenga revisar algunos de los programas que ya hemos publicado o ver una versión online, pero para quienes miran varios animes, series y dramas puede ser de gran ayuda si cuentan con un dispositivo con Android.

Descargar: Episodify | Google Play

Mirakel: gestor de tareas para Android

Isabel

Los gestores de tareas se vuelven necesarios en épocas en las que no logramos organizar nuestro trabajo. Puede ocurrir en cualquier ámbito pero especialmente dentro del mundo del diseño y el desarrollo son muy buscados. El motivo es que las fechas de entrega siempre nos corren de cerca y las modificaciones son constantes. Es lo que le pone movimiento a nuestro trabajo pero al mismo tiempo lo que lo hace muy desorganizado por naturaleza.

Siempre conocemos las mejores opciones en gestores de tareas dentro del formato web pero no debemos olvidar que muchos también lo requieren en sus dispositivos. Es cómodo que si nos llega un feedback o pedido vía mail y no estamos en casa podamos cerrar el proyecto acordando plazos de entrega y anotándolos ahi mismo en una aplicación. Una manera mas de estar siempre conectados (o al menos en horarios laborales).

Mirakel: Gestor de tareas para Android

Mirakel es una de las mejores alternativas dentro de Android con organización de tareas. Sus desarrolladores se presentan dejando en claro que buscan lo mismo que nosotros: “manejar tareas fácilmente, en una plataforma gratuita, con control y en un marco atractivo“. ¿No es lo que necesitamos? ;).

La aplicación permite la creacion de tareas organizándolas de diferentes formas. Se las puede caracterizar con varios colores o incluso crear un proyecto y luego dentro tareas secundarias. Todo sin complicaciones ni pasos avanzados. Algo así como un to-do list pero mas organizado.

Por supuesto no faltan los recordatorios. Selecionamos el día, la hora, el modo de notificación y si gustamos podemos agregar una descripción o nota.

Se pueden sumar archivos o detalles a cada item para no olvidar absolutamente nada si estamos a las corridas en el momento en el cual la llevemos a cabo. Se tuvo también en cuenta la integración con un sistema de backup, riesgo que no deseamos correr claramente si estamos ingresando datos de trabajo.

Visualmente, la UI es versátil y se puede utilizar en tablets sin problemas. Tengamos en cuenta que hoy en día las tablets son cada vez mas numerosas y las aplicaciones comienzan a darse cuenta de esto considerándolas al momento de diseñar su proyecto.

Mirakel funciona realmente bien, de manera fluida y brinda todo lo que se necesita para tener el trabajo y nuestros proyectos mas ordenados. No se expande sumando funciones que la mayoría no buscan y se enfoca, en cambio, en los usuarios promedio que sin dudas la encontrarán como una buena aliada.

Mirakel – Tamaño: 2.1 M – Descargar

Botón circular con indicador de progreso (SVG, CSS3 y JavaScript)

Pablo

La verdad, hace tiempo que no disfruto tanto de un tutorial como el que realizó la gente de Tympanus para demostrar de forma practica la potencia de emplear gráficos vectoriales para realizar animaciones. Y no tuvieron mejor idea que cambiar el comportamiento de un botón del tipo submit empleando como base de diseño la contribución de un usuario de Dribbble.

La idea de este proyecto es simple pero no por eso menos interesante, cambiar el estado de un botón al ser accionado, primero mostrando un gráfico de progreso para luego devolver el resultado del proceso, también en formato de botón.

Para que se entienda la idea, capture las distintas instancias del botón en la imagen que inserto a continuación.

estados del boton circular animado

Demostración online

Desde lo técnico el proyecto también es interesantísimo, principalmente por como aprovecha las distintas tecnologías. Emplea gráficos vectoriales (SVG) para dibujar los distintos componentes del botón en sus distintos estados, incluso el cargando esta realizado como SVG.

Por otro lado los elementos conformados por SVG son ubicados y animados mediante CSS3, en general utilizando transiciones, propiedades que se encuentran soportadas por la mayoría de los navegadores modernos.

Para terminar este proyecto hace uso de JavaScript, principalmente para lanzar los distintos eventos según sea necesario.

Todo el proyecto que parece complejo a simple vista pero que en realidad no lo es cuando estudiamos un poco el código en detalle logran un bonito botón que resultará muy util en interfaces moviles, en donde el espacio no sobra y una solución de este tipo puede facilitarnos mucho las cosas.

Los invito a descargar el proyecto desde su apartado en GitHub, ademas de obviamente visitar el tutorial que explica linea a linea el código.

Dropr: espacio online para creadores de contenidos

Tamara

Ya sea que se dediquen a cualquier rama del diseño, la arquitectura, el arte o tengan una gran cantidad de videos editados que quieran mostrar desde una perspectiva profesional. Este sitio puede ofrecerles una plataforma simple para implementar su perfil personal y poder desplegar allí todos sus trabajos sin necesidad de utilizar sitios externos y con todos los tipos de archivo contenidos en un solo lugar.

La base se encuentra elaborada en formato adaptable, sea cual fuere el dispositivo desde el que se ingrese, nuestro perfil se verá de la misma forma sin degradaciones. Podremos agregar información personal a nuestro perfil y aquellos que gusten de nuestro trabajo podrán seguirnos.

Dropr: porfolios

Considero que la base fuerte del sistema es la posibilidad de permitir incluir una gran cantidad de formatos de archivos, esto crea un espacio para compartir cualquier tipo de trabajo desde videos hasta maquetas y dibujos realizados en Blender. No hay muchos espacios que permitan esto y habrá que ver, si todo crece y se hace popular en algún punto si puede seguir soportándolo ya que hay muchos archivos que tienen un peso descomunal.

Tipos de archivo que soporta Dropr:

  • Imagen: .jpg; .jpeg; .gif; .png; .tiff y .tif
  • Audio: .mp3; .wav; .flac; .ogg y .mp4a
  • Video: .asf; .asx; .avi; .divx; .dv; .m4v; .mov; .mp4; .mpeg; .mpg; .qt; .wmv; .3g2; .3gp; .3ivx y .3vx
  • Interacción: .swf; .zip; .js; .html; .pdf; .pages; .ai; .psd; .dxf; .svg; .eps; .ps y .ttf
  • Texto: .txt; .rtf; .doc; .docx y write
  • 3D: .blend; .dae; .obj; .fbx; .dwf; .osg; .osgt; .osgb; .ive; .3ds; .lwo; .lws; .ply; .wrl; .iv; .shp; .stl; .bvh; .flt; .ac; .x; .dw; .3dc; .geo; .gta y .kmz

Una excelente forma de ponerse en contacto con gente que realiza las mismas actividades que nosotros y al mismo tiempo encontrar una enorme cantidad de talento y producción visual muy interesante.

Para comunicarse con los artistas podrán seguirlos, pero deberán si o si tener cuenta en la plataforma, a través de su email o las redes sociales pueden formar parte de la comunidad, aunque considero que para el creador puede ser mejor que cualquiera tenga acceso a su contacto. También tiene un problema con el codificado de texto latino ya que no está bien y los textos se ven sucios, estimo que es algo bastante fácil de solucionar como para que lo dejen así mucho tiempo.

Por lo demás es una plataforma espléndida de interacción entre artistas y diseñadores de todos los géneros y soportes.

Sitio: Dropr

Crear presentaciones online con Slidebean

Isabel

Las presentaciones nacen por gran cantidad de motivos. Trabajo, el momento en el cual queremos presentar una creación propia, desarrollos personales, celebraciones familiares, eventos o algún trabajo para la facultad. La cuestión es que están presentes y en mas de una ocasión debemos recurrir a ellas y a su creación. Por suerte, hoy en día con tantas opciones es fácil hacerlo.

Una de ellas es Slidebean. La aplicación es completamente gratuita salvo que deseemos privacidad y acceso sin conexión. En ese caso nos saldrá $4.99 dólares al mes. Sin embargo en la mayoría de los casos se busca lo primero asi que no va a generar problemas y es bueno que exista la opción para eventos mas avanzados.

Crear presentaciones online con Slidebean

Slidebean no se centra en un tipo de “diapositiva” sino que ofrece una gran cantidad de formatos.

  • Texto: Para las secciones que debemos explicar, alguna función o punto que deseamos resaltar.
  • Listas: ¿Buscando resaltar punto a punto algunas funciones?, es el formato ideal.
  • Gráficos: En formato pastel o de barras para mostrar estadísticas que los ayuden en su próxima presentación.
  • Imágenes: Para mostrar las ilustraciones adecuadas.
  • Collage: Alternativa de imagen en la cual podemos combinar varias de ellas en diferentes estilos.
  • Línea de tiempo: Con el fin de dejar claro un progreso o evolución.
  • Videos: ¿Lo estático no alcanza?, se puede mostrar un pequeño video para explicarlo mas claramente.

Como ven, las opciones son mas que completas. Todo se muestra en espacios limpios, libres de elementos que no hemos sumado por elección y eso genera resultados atractivos visualmente, que es claramente lo que uno busca con una presentación.

Crear presentaciones online con Slidebean

Crearlas no es nada complicado. Solo deben ir sumando los datos y elementos mientras el mismo sitio los va guiando, al menos la primera vez. Es cuestión de explorar sus posibilidades y llegar a la mejor opción dependiendo de qué estemos buscando.

Van a necesitar un registro, simple y con los datos que tradicionalmente se solicitan. Luego iremos automáticamente a nuestro panel y notaremos un gran botón invitándonos a crear una nueva presentación, mas el título.

Siguen preguntas relativas a la misma. El lugar donde será realizada, qué representaremos y datos adicionales. Finalmente se accede a cada una de las etapas que tendrá, dándonos para seleccionar entre los formatos que comenté anteriormente, colores, tipografías, etc. Cuando estén contentos con el resultado, se obtiene un enlace para compartirlo con quien debamos sin problemas.

Web: Slidebean

Plantillas para crear emails adaptables (Responsive)

Pablo

La mayoría de los recursos de los que hablo en Kabytes están relacionados al diseño de sitios web, sin embargo no olvido la importancia de diseñar un correo electrónico que sea de fácil lectura independientemente del dispositivo utilizado para su lectura.

Para lograr que un correo electrónico sea adaptable, tarea que no es tan sencilla como parece, podemos utilizar el sitio Responsive email patterns, una magnifica colección de plantillas gratuitas para descargar y utilizar de la forma más sencilla.

En este sitio van a encontrar todo tipo de estructuras, una columna, dos columnas, listas de imágenes y muchísimo más. Ideal para aquellos que están diseñando el newsletter de su sitio y buscan que el mismo se visualice de la mejor forma posible.

email responsive design template

Una de las grandes ventajas que encuentro en este sitio es su comunidad, ella es la encargada de contribuir a diario con nuevos templates así como probar los disponibles detectando posibles errores o fallas.

Para una correcta organización este muy buen sitio cuenta con categorías, lo que garantiza en cierta medida una rápida y veloz búsqueda, encontrando la plantilla adecuada para nuestras necesidades.

Si se deciden a utilizar alguna de estas estructuras simplemente deben seleccionarla y copiar y pegar el código que el sitio ofrece. Como podrán ver el mismo se basa en HTML básico y CSS3, empleando media-queries para modificar el comportamiento de la estructura según la resolución de la persona que la visualiza.

Si les gusta la idea y tienen algún esquema para compartir pueden hacerlo directamente desde el sitio oficial del proyecto.

Web: Responsive email pattern

Helium Harvey [Corto de Animación]

Tamara

Un pequeño niño juega con un globo de helio como cualquier otro, cuando se percata que al aspirarlo se le afina la voz quiere repetir el mecanismo y termina tragándose el globo. Así es como levanta vuelo e inicia un recorrido a través de todo el mundo, acompañado por un pequeño pájaro y conociendo todo tipo de personajes en el camino.

Helium Harvey

La historia es un poco corta y sin sentido, pero visualmente es muy bonita y el ritmo que posee el video lo hace muy llevadero. Aclaren a los niños que esto no puede hacerse en realidad, no queremos que nadie se trague globos (cuando uno lo piensa así, es bastante peligroso el mensaje).

Daniel Savage es el creador de esta pequeña pieza que resulta ideal para salir y escaparnos habiendo cumplido con nuestras tareas durante toda la semana. Que tengan un excelente viernes!

Compilado de widgets y reproductores en PSD

Tamara

Existe una inmensa cantidad de opciones para personalizar las barras laterales y los artículos que publicamos según los elementos que contengan. Por ejemplo, si deseamos compartir un archivo de audio, podemos utilizar los objetos embebidos que nos ofrecen las diferentes plataformas online o podemos personalizar la visual y el funcionamiento para adaptarlo al estilo de nuestro sitio. Esto es particularmente interesante cuando somos creadores de contenidos sea cual fuere el formato en el que lo hacemos y no deseamos que los reproductores sean los que vienen por defecto en sitios como vimeo o youtube.

Son cuestiones personales que tienen más que ver con la estética que con la funcionalidad en si, si solemos crear videos puede que la transferencia de nuestro sitio se dispare por las nubes si tenemos muchos usuarios visualizándolos pero al mismo tiempo nos aseguramos que el contenido esté relativamente protegido.

Para aquellos que buscan formas originales para aplicaciones poco usuales y que su sitio muestre opciones diferentes a las que tradicionalmente se ven en las plantillas prediseñadas, esta serie de recursos les puede llegar a ahorrar algunos pasos esenciales y finalmente tiempo.

Widgets en formato .PSD

En esta lista encontrarán una variedad de usos bastante interesante que pueden ir desde una ventana de información de autor hasta aquellas que pueden servir para modificar las propiedades de navegación de una plataforma. Todos, creo yo, pueden ser adaptados para encajar en cualquier tipo de plataforma interactiva, ya sea que estén diseñando un sitio web o una aplicación móvil, con algunas pocas modificaciones la herramienta podrá cumplir su función.

Las estéticas tienden a lo plano porque es lo que se utiliza ahora, personalmente considero que sirven más como inspiración ya que casi todos los componentes que se incluyen hoy en día pueden ser emulados a través de CSS sin la necesidad de utilizar imágenes.

Vector Settings Interface

Descargar Vector Settings Interface | PixelsDaily

Simple Alarm Clock

Descargar Simple Alarm Clock | PixelsDaily

Profile Widget

Descargar Profile Widget | 365psd

Twitter Account Widget

Descargar Twitter Account Widget | PixelsDaily

Vector Calendar Widget

Descargar Vector Calendar Widget | PixelsDaily

Free Disk Space Widget

Descargar Free Disk Space Widget | PixelDaily

Event Widget

Descargar Event Widget | PixelsDaily

CSS Download Widget

Descargar CSS Download Widget | PixelsDaily

Reproductores de medios en .PSD

Debajo se encuentran algunas opciones originales para crear widgets contenedores de elementos de medios, con esto me refiero a audio y video que generalmente se reproducen por default con las herramientas que ofrecen sitios como Soundcloud, Vimeo o Youtube. Para aquellos que pretendan alojar el contenido en su propio sitio y necesiten ideas de cómo disponer de la información de forma atractiva, esta lista puede ayudarlos.

Mini Music Player

Descargar Mini Music Player | 365psd

Video Player UI

Descargar Video Player UI | UICloud

Light Video Player

Descargar Light Video Player | UICloud

Viro Madie Players UI

Descargar Viro Media Players UI | GraphicBurger

Flat Music Player Interface

Descargar Flat Music Player | PixelsDaily

CSS only audio player UI

Descargar CSS only audio player | FreebiesBug

Mini Audio Player CSS Simulation

Descargar Mini Audio Player CSS Simulation | Freebiesbug

Mini Video Player PSD

Descargar Mini Video Player PSD | FreebiesBug

Una serie de reproductores de video, audio y widgets para agregar en lugares estratégicos, todos elaborados en Photoshop y fáciles de editar, también hay algunas opciones que incluyen la versión CSS pero aclaro desde ahora que no son todas.