Y vamos ahora a por un nuevo recurso para la categoría de Utilidades para diseñadores y programadores con extractcss.com, una aplicación que nos permite extraer la hoja de estilos de cualquier documento HTML que le indiquemos.
Solo tenemos que pegar el HTML deseado en el primer panel y seleccionar lo que queremos obtener del mismo. Permite extraer ids, clases y estilos, generando un .css que podemos utilizar posteriormente para adaptar el diseño a lo que tengamos en mente.
El proyecto es de código abierto, disponible en github para que sea posible navegar por sus entrañas. Lo divulgan en webresourcesdepot.com como la solución ideal para separar el css de un html en aquellos casos en los que no se separó inicialmente, algo extremadamente recomendable antes de comenzar cualquier diseño web moderno.
En febrero os listamos una serie de recursos útiles para trabajar con CSS, ideales para los que están aprendiendo a programar hojas de estilo. La mayoría de ellos están relacionados con la programación de páginas web viendo en tiempo real el efecto de las alteraciones realizadas, extractCSS puede ser una buena forma de «jugar» con pa´ginas web conocidas para alterar su diseño sin alterar su contenido.
Una buena idea para practicar y conocer mejor el mundillo del diseño web.
Antes de comenzar con esta lista de aplicaciones diseñadas para crear logotipos de forma gratuita en internet, es mejor que deje claro un punto: Construir un logotipo no es un juego, es la imagen de la compañía, es la marca que aparecerá en nuestros productos, lo que usaremos para ofrecer nuestros servicios. Hay personas que estudian años para poder desarrollar el talento adecuado para transformar una necesidad en una marca, y ninguna herramienta, por muy buena que sea, puede ni podrá nunca sustituir a la creatividad de un profesional de diseño gráfico.
Se puede pensar en no invertir mucho en una web, en no dedicar grandes recursos en publicidad, en no alquilar un gran espacio… pero no se debe pensar en recortar presupuesto cuando hablamos de la creación de un logo, porque esa imagen nos acompañará durante mucho tiempo, dentro y fuera de Internet.
Supongo que ahora os estaréis preguntando cómo puedo divulgar una lista de aplicaciones para hacer logos gratuitos si tengo tan claro que no se debe hacer eso para construir la marca de una empresa. La respuesta es sencilla: podemos construir logotipos para reuniones informales, para grupos de trabajo, para asociaciones de barrio… no siempre es necesario pensar en la repercusión a largo plazo de la imagen mostrada en un logo, a veces solamente queremos tener una pequeña marca informal en nuestras páginas.
Dicho esto, os dejo con algunos recursos interesantes, editores gratuitos que pueden ayudar a construir logomarcas en pocos minutos:
– logotipogratis.com: Una de las últimas opciones que nos presentaron. Podemos elegir el tipo de fuente, las formas, los colores y la posición de los elementos para obtener una logomarca sencilla en formato PNG, respetando la transparencia del resultado. Para poder usar su colección entera de formas, hay que pagar 3 euros.
– graphicsprings.com: Ofrece varios logos de ejemplo y permite alterarlos con nuestro nombre y slogan, personalizando así el resultado.
– supalogo.com: Mucho más básica, simplemente juega con la palabra que le indiquemos y ofrece varias versiones con colores, formatos y sombras.
– logotypemaker.com: Un editor bastante completo, permite introducir nuestro slogan y jugar con formas previamente definidas, siempre con la opción de bajar el resultado en forma vectorial. No todos los logos allí presentados son gratuitos.
– logaster.com: Un editor que solicita un nombre y una categoría para mostrar una propuesta ya lista. Dicha propuesta puede alterarse con miles de iconos disponibles, siendo posible alterar la posición relativa entre nombre y marca, cambiar el color y nivel de transparencia, alterar la tipografía, etc.
Y no puedo terminar el post sin recomendar estos Recursos para quien diseña logos, con tutoriales, herramientas y vectores que pueden ayudar a los profesionales en dicha categoría.
En los últimos meses hemos visto varias aplicaciones que ayudan a obtener el feedback de nuestros clientes, opiniones sobre nuestros trabajos escritas muchas veces por encima de la imagen que estamos compartiendo.
Skwibl (skwibl.com) es otra opción que no podíamos dejar de mencionar, una plataforma que nos ayuda a colaborar en proyectos, comunicarnos en tiempo real con nuestros clientes, crear notas sobre áreas específicas en las imágenes y monitorizar tareas incluidas.
Como veis, es más que un simple «te envío una imagen y comentas allí lo que quieras», es un proyecto que nos permite gestionar todas las tareas asignadas tanto a diseñadores como a clientes, permitiendo así ver el estado del trabajo como un todo.
Es posible también enviar vídeos y permitir la creación de notas en cada frame del mismo, ideal para los proyectos de producción visual en los que se quieren discutir los detalles de todo el trabajo realizado.
Skwibl abrió sus puertas hace ya un año, con versión en inglés y un equipo de cinco profesionales dedicados a ayudar a agilizar el «va y viene» de tareas y opiniones entre clientes y profesionales. Desde entonces son pocas las novedades que han incluido en la herramienta, aunque no por eso dejaremos de visitar el proyecto para ver la evolución de la idea.
Para los desarrolladores y diseñadores que cuidan hasta el más mínimo detalle de sus aplicaciones existen muchas bases de datos de iconos de todo tipo. Aquí os hemos presentado miles de ellos durante los últimos años, pero hasta ahora no nos habíamos topado con una colección especialmente diseñada para su uso en mapas.
Eso es lo que podéis encontrar en iconos map-icons.com, una fantástica colección especialmente diseñada para Google Maps, con las instrucciones necesarias para implantarlos, alterar su color y tamaño, modificar su posición, etc.
El recurso lo presentan en webresourcesdepot.com como una fuente de iconos para la API de Google Maps API y Google Places, aumentando las instrucciones de developers.google.com para permitir el uso de imágenes y svg.
Un buen recurso para darle más vida a los mapas integrados en nuestras aplicaciones.
Aquí tenemos otra herramienta que los profesionales del diseño pueden utilizar para recibir el sagrado feedback de sus clientes.
Se trata de designdrop.io, una web bastante sencilla, aunque no menos práctica, que permite subir una imagen y obtener una url para comenzar la discusión de sus elementos.
Solo tenemos que subir o arrastrar el archivo sobre el que queremos debatir y, después de un registro que únicamente solicita email y nombre de usuario, copiar la url única en la que se encontrará el material.
Cuando enviemos dicha url a los clientes (podemos invitarles desde allí mismo), podrán seleccionar cualquier región de la imagen y realizar comentarios sobre la misma. Cada región seleccionada tendrá un número indicando la colección de comentarios. Nosotros, como creadores del trabajo, podremos responder allí mismo, teniendo de esta forma bien organizadas las discusiones relacionadas con cada sección, sin necesidad de capturas, presentaciones e infinidad de emails que van y vienen.
No es la única solución que vemos de este tipo, pero sí es una de las más sencillas de utilizar. No permite analizar el histórico ni tener un portafolio organizado de nuestros trabajos, no podemos comparar versiones ni subir más de un archivo por url, pero en muchas ocasiones no es necesario ese tipo de funcionalidades, solamente necesitamos que alguien opine sobre la imagen que estamos enviando.
Podéis ver un ejemplo aquí: designdrop.io/SF90fRQ3T, donde he comenzado una discusión de una captura de WWWhatsnew.com
Si las herramientas existentes para crear gifs animados no os acaban de convencer y buscáis algo práctico, rápido y, si es posible, integrado en el navegador, echad un vistazo en esta extensión.
Se trata de MakeGif, creada para transformar vídeos HTML5 en gifs animados. Solo tenemos que pulsar en el icono y comenzar a generar la animación a partir del vídeo que estamos consultando en este momento. Es posible especificar el tamaño, los frames por segundo y el número máximo de frames capturados. Si queréis usarlo con Youtube, recordad que el vídeo tiene que estar en formato HTML5.
makeagif.com también es una conocida opción que permite seleccionar imágenes, transformar un vídeo de youtube a gif o capturar los frames con la webcam. Existe una galería con algunos gif populares realizados con la herramienta, motivo por el cual durante la creación del gif solicita la categoría del mismo. Es posible establecer la velocidad de la animación y el tamaño del resultado.
gifmake.com, por otro lado, es una web que nos permite subir imágenes desde nuestro ordenador, o importarlas desde otro sitio, para generar una animación utilizando la secuencia de fotos. Podemos alterar el tamaño del resultado, definir que haya un loop infinito en la animación y acelerar el resultado para que la transición entre las imágenes sea más rápida.
Si no habéis abierto un editor de fotos en vuestra vida y necesitáis realizar pequeñas alteraciones en un logo, una fotografía, un dibujo o cualquier otro archivo gráfico, swiftly (swiftly.com) puede ayudaros.
Se trata de una plataforma en la que los usuarios solicitan alteraciones pequeñas (recortar, editar un texto en una tarjeta de visita, eliminar elementos, cambiar de tamaño, ajustar colores, etc.) a cambio de 15 dólares. Es un proyecto creado por 99designs en el que una parte de los profesionales que ya trabajan en el portal ofrecen sus servicios, teniendo en cuenta siempre el límite de las alteraciones que pueden ser solicitadas por los clientes. Recordad que 99designs es una plataforma en la que pueden solicitarse trabajos más complejos de diseño y esperar las propuestas antes de decidir la contratación de las mismas.
Comentan los responsables a Techcrunch que la media de tiempo que el cliente tiene que esperar para que su trabajo sea realizado es de 20 minutos, por lo que se transforma en una solución bastante interesante para los que necesitan urgentemente una alteración profesional en un archivo.
Personalmente encuentro interesante el hecho de que el precio sea fijo, ya que ahorra mucho tiempo en la negociación, aunque hay que reconocer que no requiere el mismo esfuerzo recortar una imagen que eliminar un elemento de ciertas imágenes o modificar el texto de un jpeg.
Una idea sencilla que, seguramente, se multiplicará en varios idiomas durante los próximos meses.
En el siguiente listado encontraras una gran colección de diferentes recursos web de todo tipo, recopilados especialmente para proporcionar una ayuda a los diseñadores o desarrolladores dedicados al fantástico mundo del internet.
Creativos elementos gráficos:
Lo que necesitas para tus próximas presentaciones: maquetas, fondos, fuentes y demás.
Crear un sitio web que se adapte a las pantallas de nuestros dispositivos móviles ha dejado de ser un lujo para ser una necesidad. Aunque la mayoría de las webs consigue verse de forma decente en un tablet, no ocurre lo mismo con los móviles, por lo que se hace necesario incluir algunas funcionalidades (extensiones o características na hoja de estilos) que permitan adaptar de forma dinámica el contenido que presentamos.
Si preferís tener algo de libertad en lo que a diseño se refiere, la mejor forma es programar la web pensando, desde su inicio, en el aspecto móvil, y para eso tenemos responsivewebcss.com, para que nos ayude en ese punto.
Se trata de una aplicación, presentada hoy en webresourcesdepot.com, que genera el código CSS necesario para poder comenzar a trabajar. Solicita los tamaños y la estructura base de nuestra web y permite bajar archivos html y css para que sean incluidos o adaptados dentro de nuestro diseño, ahorrando mucho tiempo en programación y diseño.
Ya que el resultado es html, tendremos que abrir el código e incluir los elementos dinámicos adecuados para transformarlo en php o cualquier otro lenguaje con el que estemos trabajando, aunque el tener el css ya creado es un paso que muchos agradecerán, tanto para trabajos profesionales definitivos como para los que estén practicando y estudiando diseño web.
Seguimos concentrados en utilidades para los webdesigners y profesionales del diseño en general para hablar de conceptinbox.com.
Se trata de una aplicación web, disponible en español e inglés, que ayuda a agilizar el proceso de aprobación de los diseños por parte de los clientes. Podemos subir nuestros diseños y gestionarlos en la web, permitiendo compartirlos con los clientes y compañeros de forma sencilla para obtener el siempre necesario feedback. Para crear la cuenta no es necesario rellenar complejos formularios, simplemente tenemos que enviar nuestros primeros diseños por email a in@conceptinbox.com y ver cómo nuestro primer espacio ya es creado de forma automática.
Nuestro espacio de trabajo, el lugar en el que podemos guardar nuestros diseños, puede ser personalizado y protegido con contraseña. Es posible también alterar el orden de las imágenes con solo arrastrar el contenido, así como activar o desactivar los comentarios que los usuarios realicen sobre nuestros trabajos.
De momento existen dos opciones: la gratuita, con un límite de 50 megas por cuenta, y la premium, con cuentas desde 1 Giga y un coste de 9 dólares mensuales, aunque puede probarse durante 14 días sin compromiso. Esta segunda opción permite también almacenar proyectos, no solo imágenes, así como incluir fondos personalizados y proteger los proyectos con contraseña.
Florencia Espinasse, una de sus responsables, nos comenta que ya están trabajando en una nueva versión que verá la luz dentro de pocas semanas. Estaremos atentos y os informaremos sobre las novedades.