Canva – Nuevo proyecto para compartir recursos de diseño gráfico por Internet

canva

Los profesionales del diseño gráfico están acostumbrados a trabajar con cientos de fuentes, iconos, tipos de letras, texturas y demás componentes necesarios para realizar sus trabajos. Cuando es necesario colaborar con otros profesionales, esos recursos se comparten, la mayorí­a de las veces, de forma completamente desordenada, con emails y carpetas compartidas que los diferentes colaboradores usarán para obtener las fuentes necesarias, fondos, elementos y demás recursos.

La idea de Canva (canva.com), que nace hoy de forma privada, es ofrecer una plataforma que permita a estos profesionales compartir archivos necesarios para realizar trabajos en grupo y obtener material que, disponible de forma pública, permita crear diseños de forma rápida y elegante.

Es una compañí­a australiana que ya ha conseguido 3 millones de dólares para realizar el proyecto, una plataforma que, además de permitir compartir el contenido, nos ofrece la posibilidad de realizar los diseños directamente desde la web, arrastrando los recursos que otros diseñadores hayan publicado allí­.

Tenemos también funciones para compartir el resultado con los clientes, así­ como para discutir sobre el material creado.

De momento se ha liberado a algunos usuarios de Estados Unidos y Australia, según comentan en TNW, aunque ya podemos reservar nuestra dirección url privada informando el nombre y el email en su página principal.

Aquí­ os dejamos con el ví­deo de presentación:
Continúa leyendo «Canva – Nuevo proyecto para compartir recursos de diseño gráfico por Internet»

PSDCovers.com, plantillas 3D de Photoshop para promocionar tus productos

psd covers

Si has pensado promocionar tu producto en un sitio web puedes partir de las brillantes plantillas en PSD que de forma gratuita son publicadas en PSDCovers. Aunque resultan especialmente útiles para diseñadores, pueden ser usadas con apenas habilidades básicas en el manejo de Photoshop ya que la tarea es tan sencilla como ir reemplazando imágenes y ejecutando acciones predeterminadas.

Respecto al tipo de plantillas disponibles, la mayorí­a en 3D, se destacan los clásicos eBooks, DVDs y CDs con cubiertas personalizadas, sin embargo, el sitio abarca cientos de productos más: plantillas de promoción de camisetas (puestas en maniquí­es), bolsas, tazas, botellas (licor, detergente, champú, latas etc.), folletos, tarjetas de negocios, cajas, revistas y un largo etcétera.

diseños psd productos

Quienes ofrecen software para equipos móviles y de sobremesa pueden valerse de los gestures y otros mockups de casi todos los dispositivos populares de Apple (iPad, iPod, iPhone, MacBook y iMac, este último perfecto para mostrar screenshots), del Galaxy SIII, del Nokia Lumia 920 y del HTC One. Por si fuera poco hay también vectores gratis en 2D y en blanco y negro enfocados a la parte de artí­culos electrónicos que pueden servir para crear presentaciones y guí­as.

Todo se puede descargar de forma gratuita y usar de forma libre, aunque siempre que sea posible se agradece que sea comentada la fuente. Cada action, nombre que recibe cada producción disponible para descargar, cuenta con explicaciones, detalles de calidad (resolución, medidas, formato, clasificación, etc.), recomendaciones de uso, ejemplos y solución a dudas a través de comentarios.

Enlace: PSDCovers.com

extractCSS, proyecto de código libre para extraer el CSS de cualquier documento HTML

extract

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.

skwibl – Herramienta de colaboración entre diseñadores y clientes

skwibl

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.

Map Icons – iconos especiales para incluir en nuestros mapas de Google

iconos

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.

Designdrop – Sube un diseño, copia la url y mándala al cliente para que haga comentarios

designAquí­ 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

Tres formas de crear gifs animados desde la web

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.

gif

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.

Y vosotros, ¿qué usáis para crear gifs?.

Fantásticos elementos de todo tipo para embellecer tu web (I)

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.

Maqueta del iPhone 5: bonita maqueta en photoshop para el iPhone 5.

iPhone 5 Mockup PSD

Sombras largas: objeto inteligente de Photoshop para generar sombras largas a diferentes elementos.

Patrones oscuros: pequeña colección de patrones oscuros para tu sitio web.

patrones oscuros

Plantilla para logos: con este elemento de Photoshop podrás personalizar tu logo de una manera sencilla.

logo plantilla

Maqueta del Samsumg Galaxy S4: excelente maqueta en Photoshop del Samsumg Galaxy S4.

Maqueta del Samsumg Galaxy S4

Wanted: bonita fuente de texto al estilo del viejo oeste.

Wanted: fuente de texto

Maqueta de marca o identidad: útil set de elementos gráficos para el diseñador web.

Maqueta de marca o identidad

Formularios de registro: pequeña colección de 7 plantillas en PSD de formularios de registro.

Formularios de registro

Plantillas para el iPad: 3 diferentes maquetas súper útiles del iPad en PSD.

Plantillas para el iPad

Maqueta de marca en PSD: útil colección de elementos para mostrar tus últimos proyectos.

Maqueta de marca en PSD

Modernas GUI para desarrolladores y diseñadores:

Todo tipo de elementos para desarrollar de manera fácil tu próxima aplicación.

Marble GUI: colección de diferentes elementos útiles para tu web.

Marble GUI

Light GUI kit: pequeña y simple colección de elementos de interfaz para tu web.

Light GUI kit

GUI minimalista: excelente concepto de interfaz de usuario minimalista en archivo PSD.

GUI minimalista

99Lime UI: completo set de diferentes elementos minimalistas para la web.

99Lime UI

iPad GUI: kit de diferentes elementos de interfaz del iPad para diseñadores.

iPad GUI

Modern Touch UI: gran colección de elementos de interfaz con un estilo metro (win 8).

Modern Touch UI Kit

Android GUI: completo set de más de 1000 elementos de interfaz totalmente editable.

Android GUI

íconos de gran calidad:

Las siguientes son colecciones de í­conos creados siguiendo las últimas tendencias de la web.

Maki í­conos: completo paquete de 95 í­conos en SVG para utilizarlos en MapBox.

Iconos para mapas

Ultimate Icon: Gran set de í­conos con más de 1000 unidades totalmente gratis.

Ultimate Icon set

íconos de Adobe: pequeño set de 8 diferentes í­conos de adobe en PSD.

Set Iconos de Adobe

íconos Planos: hermoso conjunto de í­conos con un estilo plano en formato PSD.

Set de Iconos Planos

íconos SEO: kit de 12 diferentes í­conos SEO de estilo plano.

12 icons SEO

Kit de í­conos planos: pequeña pero bonita colección de 6 í­conos con un estilo moderno.

Kit de iconos planos

íconos redondos: moderno paquete de í­conos para las diferentes redes sociales.

Iconos redondos

Surfing í­cons: simple y bonita colección de 12 diferentes í­conos en PSD.

Iconos al estilo Surf

íconos de iOS 7: útil colección de 32 í­conos de barra para el iOS 7.

Iconos de iOS 7

íconos sociales: moderno set de í­conos sociales para tu sitio web.

Iconos sociales

íconos en CSS: increí­ble colección de í­conos creados totalmente en CSS.

Iconos en CSS

Plantillas web en variados formatos:

En la siguiente lista se podrá encontrar plantillas en PSD para tu inspiración, así­ mismo encontrarás plantillas en HTML y temas para WordPress.

BlueBox: moderna plantilla para sitio web de estilo plano en PSD.

BlueBox

Coorpin: útil portafolio para WordPress con un estilo minimalista.

portafolio para WordPress

Pronto: tema para WordPress con un diseño en grilla.

diseño en grilla

Celestino: limpio y creativo tema tipo portafolio para WordPress.

portafolio para WordPress

Carbon: plantilla web HTML + CSS adaptable a diferentes dispositivos.

plantilla web HTML + CSS

Pinball: plantilla para blog en PSD con un estilo de grilla y con versión responsiva.

plantilla para blog

Adapt: portafolio para WordPress totalmente responsivo.

portafolio para WordPress

Display: plantilla web en PSD con un estilo limpio y minimalista.

plantilla web en PSD

Impero: tema simple y minimalista para WordPress perfecto para restaurantes.

tema minimalista para WordPress

Pinbin: moderno tema para WordPress al mejor estilo de Pinterest.

moderno tema para WordPress

Skybox: elegante plantilla web multipropósito en archivo PSD.

plantilla web multipropósito

Creativos experimentos o complementos para tu web:

La lista de abajo contiene fragmentos de código y diferentes complementos pensados para embellecer la web.

Mason.js: plugin de jQuery para la creación de grillas perfectas con JavaScript.

plugin de jQuery

UI Transitions: plugin que nos permite crear y eliminar los í­tems de una lista con animación.

listas con animacion

Animaciones CSS3: excelente plugin con una colección de diferentes animaciones en CSS3.

Animaciones CSS

Cubo 3D: galerí­a de imágenes en un cubo 3D construido totalmente en CSS.

Cubo CSS 3D

Ficha de información: 7 bonitos efectos para mostrar información de un elemento.

Ficha de información

Flipswitch: generador online de interruptores con animación en puro CSS3.

Generador online de interruptores CSS3

Libros animados: excelente tutorial para crear la animación de un libro que se despliega al pasar el cursor sobre este.

Libros animados CSS3

Galerí­a de imágenes: útil galerí­a de imágenes construida en jQuery para exhibir tus fotos.

Galerí­a de imágenes

Furatto: moderno framework HTML y CSS perfecto para acelerar el desarrollo de páginas web.

Framework HTML y CSS

Efectos de scroll: útil colección de diferentes efectos de scroll para tu sitio web.

Efectos de scroll

Efectos de transición: asombrosa recopilación de diferentes efectos de animación en CSS + jQuery.

Efectos de transición