Empo: de la A a la Z, pitagóricamente

Empo, del estudio LoSiento, es una tipografía matemático-geométrica basada en que el aspecto de cada letra del alfabeto depende de ciertas fórmulas sobre las coordenadas y distancias de sus formas. Ha ganado el Oro + Grand Laus 2010 de diseño.

Visto en Microsiervos y me pareció interesante postearlo aquí.

Guía rápida: caracteres especiales HTML

Nice Entity: una guía rápida y elegante de caracteres especiales del HTML. Para que la tengas en favoritos siempre y puedas ojearla cada vez que tengas dudas. Aunque si te va lo fácil, casi mejor te recomendaría CopyPasteCharacter: tan sólo pulsando sobre el caracter especial que quieres usar, la web ya te la copia al portapapeles. Ni copiar vas a tener que hacer ya (aunque pegarlo sí).

Fin de semana

¡No uses ese tono conmigo!

¿Qué usa nuestro cliente?

Estás trabajando de manera remota con un cliente y le envías un enlace para que vea el desarrollo de la web que le estás haciendo. Sabes que tiene el logo enorme, más grande de lo que necesita el cliente o una intro en flash …. y por alguna extraña razón este cliente no llega a ver la intro, o no llega a ver correctamente efectos jquery o, simplemente, el cliente tiene la “última versión super estable” de Internet Explorer 6 (toma castaña)… Podrían existir varias razones por las que no está viendo las cosas como debiera.

Sería interesante saber qué demonios tiene nuestro cliente instalado y cómo lo tiene configuado para saber si es error nuestro al programar o no. Pues para eso existe Support Details. Con él podremos averiguar toda la información de nuestro cliente que pueda estar causando estos problemas. Puede decirte lo que le sale por teléfono o guardarlo como PDF y enviártelo desde la misma web. Y vale, está en inglés, pero si lo quieres ver en la lengua de Cervantes, Google lo traduce por tí aquí.

Hazte la vida un poco más simple.

Z-index: cuidado al usarlo

Capa por allí, capa por allá. Z-index es la propiedad por la que otorgamos jerarquía a las capas en diseño web: podemos esconder o mostrar ciertas partes de los elementos web al superponer otros. Pero hay veces que tenemos serios problemas con esta propiedad por los bugs de los propios exploradores (IE...). Por otro lado si estas acostumbrado a trabajar con software de la casa Adobe, no tendrás problemas en comprender cómo va todo esto de trabajar con capas.

Es por ello por lo que desde CreativosOnline se nos aconseja al utilizar z-index:

1.Intenta definir siempre position:relative, pero si no es posible al menos define una posición, no lo dejes heredado.

2.Trata de no usar z-index negativos, ya que Firefox utiliza z-index:0 para él, así que si pones -1 no se verá tu elemento (quedará oculto...tras el propio navegador). [Según comprobaciones, este bug no existe en la versión 3, así que tened cuidado con versiones anteriores].

Y por si acaso aún no te ha quedado claro de qué va la movida, en el siguiente enlace te lo explican muy detalladamente: Z-index Test (en inglés).

¡Han invadido mi sofá!

Igor Chak: diseño industrial conceptual. De siempre he sentido debilidad por estos invasores espaciales pixelados. Digno de estar en nuestras casas, aunque de momento no esté a la venta.

IE Tester: herramienta para los diseñadores web

IE Tester es el nombre de una buena herramienta para todos aquellos diseñadores que se interesen en el diseño web ya que nos sirve para ver como se vería un sitio en cada una de las versiones de Internet Explorer (IE), incluyendo los dolores de cabeza como las versiones 5.5 y 6.

Hay algunos diseñadores web que simplemente ignoran a Internet Explorer, el navegador que viene por defecto en un ordenador con el sistema operativo Windows, lo ignoran porque muchas veces, cuando estamos diseñando nuestro sitio, todo va perfecto en Firefox, Opera, Safari… Y cuando lo vemos en IE todo parece estar roto, y no sabemos por qué. Bueno sí que lo sabemos: porque interpreta html y css como le viene en gana (¿modo aleatorio?).

Camiseta: rómpele la espalda a tu mamá

Casi ná. Curiosa y graciosa camiseta a la venta en TeeFury por algo menos de 7 euros (9 dólares) sólamente hoy. ¡Qué me las quitan de las manos, oiga!

10 leyes para diseñar correctamente

Como diseñadores tenemos que ser conscientes de la función de nuestro trabajo y del diseño tanto como nos preocupamos por la estética y lo visual. Hay muchos términos para el diseño de cómo nuestro sitio web trabaja y de sus funciones, desde el diseño de usabilidad a la experiencia de usuario, pero lo que permanece constante es que si queremos ser mejores diseñadores debemos tener en cuenta estos dos conceptos juntos.

Y esto se logra utilizando las leyes para el diseño claro y eficaz como guías, con fórmulas comprobadas para mejorar el diseño. Estas leyes, o reglas, mejoran la usabilidad y la experiencia de usuario de nuestros diseños así como los valores estéticos. Además, siempre podremos citar y consultar estas leyes al presentar o discutir un proyecto que creemos buenos y que, ahora, podremos justificar (la eterna batalla contra nuestros jefes y/o clientes).

Aquí os dejo estas 10 leyes:

Muñecas rusas...de Star Wars!

¡Ou yes! Pues estos Stormtroopers rusos salen a un precio de 12 euros. ¡Me los pido!

Vistos en la tienda StarStore

Diccionario Español-Publicidad

Llevaba ya un par de semanas circulando por la red, pero es hoy cuando me he animado a publicarlo. Existe una web dedicada a la traducción español-publicidad-español que veo muy interesante. Así podrás conocer el significado de muchas de las aparentemente inocentes frases que puedes escuchar en un estudio de diseño o una agencia de publicidad y que, en su interior, sólo poseen oscuridad, maldad y ganas de fastidiarnos la fiesta muchas veces (o no). Si le das a la casilla #73, puedes añadir tu entrada a este diccionario tan peculiar.

Con un tono a veces de humor, los chicos de Publicis, agencia globalizada que en España se encarga de campañas para Telefonica/Movistar, Mixta (lo de los gatos chinos es obra de ellos), Agencia Tributaria, Carrefour, Renault o Iberdrola, por citar algunas. Supongo que la web del diccionario será tan sólo un aporte altruista (bueno, que no sacan dinero directo por ello) y por pura autopromoción.

De momento también han conseguido que hable aquí de ellos...

Enlace: DiccionarioPubli

Degradados para cielos

Vía DiegoMattei me encuentro con una entrada bastante interesante sobre degradados para aplicar a fotografías en Adobe Photoshop.

Estos son recursos realmente útiles cuando estamos componiendo una imagen. En Photoshop Tutorials me encuentro con un excelente pack de gradientes para crear el cielo que necesites para esa imagen.

En total son 15 degradados contenidos en un archivo .GRD listos para acoplarlos a Photoshop, en donde encontraremos amaneceres, atardeceres, cielo nublado y mucho más. El peso del archivo es de 3Kb.

Enlace 15 RealisticSky Photoshop Gradients

Manual Dreamweaver Cs5

Adobe Dreamweaver es el programa de la Creative Suite de Adobe que nos permite diseñar webs y optimizarlas para su uso en cualquier navegador además de muchas otras cosas. Es eleditor html por excelencia.

Y como hace poco salieron por aquí los manuales de Photoshop e Illustrator, pues Dreamweaver no podía quedarse atrás. 707 páginas llenas de diversión.

Descarga el manual Dreamweaver Cs5 (PDF)

Packs de iconos para descargar

iconsfoldersalumin

Alumin Fortis RemiXtras por Steven Zhang & Kaishin

Más carpetas personalizadas para el pack Alumin Fortis.

∞

Y si sigues leyendo la entrada podrás ver infinidad de packs de iconos gratuítos.

Arte generativo

Nodebox, Shoebot, Drawbot & Spryte

Son muy interesantes los programas de arte generativo a partir de código. En el fondo, cualquier programa de dibujo o pintura digital puede modificarse a voluntad alterando el código de sus archivos. El mismo SVG que crea un programa de dibujo vectorial moderno es un simple fichero de texto: una variante de xml que puedes abrir y cambiar en un simple editor de texto, como el bloc de notas. Si en esos ficheros creáramos modificaciones arbitrarias, aleatorias o en función de determinados parámetros o datos, ya entraríamos en el campo del arte generativo.

Videotutorial: mejorar fotos con Photoshop

Pues revisando cosillas por ahí, me he encontrado con este pequeño videotutorial para mejorar nuestras fotos con Photoshop Cs4. La verdad que después de verlo he considerado ponerlo en el blog ya que puede servir para los más novatos. Aunque, la verdad, que después de trabajar en departamentos de preimpresión se me queda cortísimo el mejorar una foto de esta forma y perfectamente, además, podría hacerse con cualquier versión de Photoshop (o hasta Gimp).

Insertar vídeos de Youtube con HTML5

Y más noticias sobre HTML5. Conocido es por todos que Youtube, el portal de vídeos de Google, basa su soporte en la tecnología Flash. Pero, igualmente, fue uno de los primeros que se puso manos a la obra con la tecnología HTML5 apostando por el futuro y dejando atrás sistemas en ocasiones vulnerables. Hace un par de semanas que existe un modo beta funcionando en HTML5 aunque, para eso, el usuario tiene que disponer de Chrome o Safari (los navegadores que soportan las nuevas etiquetas html) y estar suscrito a dicha versión beta.

Cufón: reemplazando fuentes en la web

Estamos acostumbrados, dentro del diseño y la programación web, a utilizar por defecto las fuentes más habituales de los sistemas operativos (caso de Arial con Windows o Helvetica con MacOs). Y si quieres emplear otra distinta, hay que confiar en la suerte para que el navegante posea dicha fuente instalada o bien programar flash y dejarnos de html.

CloudCanvas, un editor gráfico HTML5

Es simplemente increíble lo que la gente está logrando hacer con HTML5 y creo que CloudCanvas es la demostración más brutal de HTML5 que he visto yo en mucho tiempo, es simplemente sobresaliente.

Con soporte para imágenes vectoriales, integración con páginas web como DeviantArt o buscadores como Google y plantillas para aburrir, creo que es una alternativa real a Photoshop para los usuarios menos exigentes y que no quieren hacerse con Photoshop.

Cómo hacer una máscara con Photoshop

Frases

¿Que es diseño? Un plan por colocar elementos de la mejor manera para lograr un propósito en particular

Charles Eames

Aviary: retoque fotográfico online y mucho más

Aviary nació en 2007 con una misión: hacer accesible para los creadores y artistas de cualquier clase una potente herramienta de edición que les permitiese trabajar cualquier género dentro del diseño gráfico y la edición de audio. Entre sus fundadores se encuentran algunos de los cerebros que crearon la comunidad artística Worth1000.com.

Fin de semana

Pues ya sabemos de donde vienen las piezas del Tetris... Visto en una camiseta que se agotó antes quel Iphone cuando salió a la venta. ¡Genial!

Creative is endless battle !

Juego exportado a Flash, que te enseña las técnicas y consejos básicos del diseño a través de un videojuego creado íntegramente mediante un motor 3D propio. Muy bueno.

http://www.1-10.com

¿Cuanto cuesta un logotipo?

El logotipo es la primera impresión que la gente recibe de tu empresa. A través de tu logotipo, una empresa puede parecer grande, pequeña, seria, divertida, responsable, profesional,....

Un logotipo debe perdurar en el tiempo, de ello dependerá su mayor o menor éxito.

Un logotipo debe ser original, debe ser diseñado específicamente para esa empresa, no ser un logotipo genérico y económico adaptado para salir del paso y comenzar a funcionar.

Un logotipo debe buscar profesionales, te será más fácil encontrar a clientes potenciales si la imagen de tu empresa es profesional.

Un logotipo no es encender un ordenador y pulsar una tecla (¡ojalá!). Un buen logotipo lleva tras de sí un serio trabajo de investigación y de búsqueda.

El intercambio de ideas entre cliente y diseñador confluirá en 3 o 4 representaciones gráficas de un posible candidato.

Seleccionar, ajustar y acabar la idea del que más se adecue, no del que más guste, y represente los ideales empresariales para los que se ha creado.

Desarrollar las distintas aplicaciones a las que será sometido, partiendo del logotipo desarrollaremos toda la imagen corporativa de la empresa, (tarjetas de visita, sobres, página web, rótulo corpóreo, sello, cartelería, etc....

Por lo tanto, ¿cuánto le costaría el diseño del logotipo a una empresa?.

Pues sinceramente creo que, si el cliente comprende los aspectos anteriores, el precio lo marcará el intercambio de ilusiones entre cliente y diseñador. A ese trabajo le pondremos el precio.

Fuente: LogoDesignLove

Y todo esto me viene de maravilla, ya que en breve tenía pensamiento de hablar del trabajo "posterior" al logotipo de una empresa: el manual de aplicación gráfica. Así que perfecto. ¡En unos días sabréis algo al respecto!

Firefox Throttle: el ralentizador del navegador web

Leyendo entradas por Microsiervos me he fijado especialmente en una extensión bastante interesante para los diseñadores y programadores web: un ralentizador de web.

Todo sea por una buena causa: ralentizar el navegador (Firefox en este caso, con un plug-in) para comprobar cómo se comporta una web o una aplicación web al funcionar a baja velocidad, simulando una conexión de «banda estrecha», RDSI, etc… ¡Ah, qué tiempos en los que se obligaba a los diseñadores a conectarse vía módem para hacer que aligeraran las páginas que diseñaban sufriendo en sus propias carnes cada KB de más…

Pues eso. Pulsa aquí para bajártelo: Firefox Throttle

Email Marketing: 20 cosas que debemos saber

Si alguna vez te has sentido fuera de lugar en una discusión sobre email marketing, debes saber que no eres el único. Estas veinte definiciones y conceptos comunes en la jerga del marketing por correo electrónico te ayudarán a expandir tu vocabulario y te harán sonar y sentirse como un experto (y sino, siempre podrás decir que nunca te acuestas sin saber nada nuevo).

Tutorial de Programación para Android

En un post que leí sobre cómo instalar y configurar adecuadamente el entorno de desarrollo Android para realizar nuestras aplicaciones Android en Windows. Ahora, vamos a empezar por como crear un proyecto, definir las partes más importantes de su estructura y el popular “Hola Mundo” (que suele ser el inicio en programación).

Manuales Photoshop e Illustrator CS5

Los manuales de los diferentes programas de diseño son indispensables para aprender a sacarles el mayor partido y saber utilizar todas sus opciones. Por aquí os dejo los manuales de Adobe Photoshop CS5 y de Adobe Illustrator CS5, las últimas versiones que Adobe sacó al mercado hace apenas unos meses.

30 efectos para texto

Lo efectos de texto son de los tutoriales más vistos para Adobe Photoshop. Desde que el texto es usado en todos los campos del diseño y la publicidad, no tiene sentido usar un simple texto de color plano para cada aplicación. Y aunque una gran cantidad de tutotiales para Photoshop pueden dar resultados decentes, puede ser algo difícili encontrarlo de alta calidad.

Aquí te dejo algunos de los mejores tutoriales sobre efectos para texto, en concreto 30 de ellos. Y no sólo lograrás buenos resultados finales, sino que, además, verás cómo se consiguen y podrás modificarlos a tu manera.

El handicap es que están en inglés, pero como sois chicos de mundo no tendréis problemas en comprenderlos (o en traducirlos con Google).
Pulsa sobre cada una de las imágenes para ir hasta el tutorial correspondiente

Crea tu propia tipografía manuscrita

Con la llegada de los ordenadores la tradición de escribir cartas con un bolígrafo está desapareciendo a marchas forzadas. Una manera de rememorar viejos tiempos es crear tu propia tipografía a partir de tu escritura a mano, algo que en general es bastante engorroso, por no hablar de que muy poca gente sabría como hacerlo. Los señores que venden bolígrafos Pilot han creado una web que te ayuda en ese proceso de la manera más sencilla posible, con unos resultados correctos para la poca atención que necesita. A lo largo de esta entrada vamos a seguir todos los pasos explicando pequeños truquillos para obtener la mejor fuente posible.

Plantillas para imprenta

Think Design ha puesto a nuestra disposición una serie de plantillas para impresión en formato .eps que seguro agradeceréis.

3 herramientas que mejorarán tu experiencia en Social Media

Creo que no hace falta mencionar cifras concretas ni sesudos estudios para demostrar que cada vez pasamos más tiempo dentro de nuestras redes sociales favoritas… Precisamente por eso resulta curioso que decoremos las casas en que vivimos para que se adapten a nuestros gustos o practiquemos tuning a los vehículos que conducimos para que reflejen nuestra personalidad y, sin embargo, nos movamos por las redes sociales con los “fríos” interfaces y las “escasas” funcionalidades que otros han diseñado para nosotros.

Facturas divertidas con Illustrator

Toda persona que trabaja por su cuenta, o mejor llamado como “freelancer”, tiene la obligación de cumplir con ciertos requisitos ante la ley de su país, uno de ellos es pagar los impuestos correspondientes por su trabajo (IVA o retenciones de Irpf), y para no terminar haciendo mal las cuentas, tenemos que llevar un control de documentos, es por eso que necesitamos entregarles varios papeles a los clientes como recibos, facturas, contratos, entre otras cosas. Todo esto para tener un control y que no haya pérdidas o multas a la hora de pagar los impuestos correspondientes.

GIMP : tutoriales a mansalva

A las personas que no les gusta Adobe Photoshop y que son partidarias del software libre, tienen la opción de usar una herramienta llamada GIMP (GNU Image Manipulation Program). Este es un programa de software libre y gratuito, y la ventaja es que es mucho mas ligero que Photoshop. En realidad posee muchas ventajas aparte de ser totalmente libre y gratis (tanto para usuarios como para empresas, ahorrando una señora pasta en licencias): puedes programarlo como quieras, funciona en todas las plataformas (originalmente para Linux y con versiones para MacOs y Windows), el perrito de mascota es bastante simpático, exiten versiones portables y portales-web dedicados a este software libre.

Extensiones Firefox para diseñadores web

De sobra es sabido el potencial que posee Mozilla Firefox con sus extensiones de todo tipo. En este caso, quiero centrarme en el diseño web y en las extensiones existentes para hacernos la vida más fácil. Sigue leyendo para conocer algunas de ellas.

Fondos de pantallas arcoiris

Aquí va una de fondos de pantallas con mucho colorido. Han sido recopilados por Hongkiat de entre la multitud de archivos de Deviantart.

Para más fondos, mira por estas galerías.

Revistas online para diseñadores gráficos

Los diseñadores gráficos al igual que otras profesiones creativas están obligados a mantener su información actualizada y estar al día en nuevas tendencias tanto del mundo del diseño como de la ilustración. Es por ello que cuantas más fuentes de inspiración y conocimientos tengamos al alcance de las manos, más fácil resultará estar al día en estas disciplinas.

Las revistas de moda y diseño son una de estas fuentes importantes a tener en cuenta. Durante algún tiempo compré algunas de estas revistas (especialmente el magazine español Belio)

Y más tipografías...

Hay días (o noches) en que me da por algo. Y cláramente ha sido un domingo de fijación tipográfica. Me pasa cada vez que sopla levante. Así que un poquito de calidad tipográfica nunca viene mal. En realidad la calidad nunca está de más, aunque sean texturas, pinceles de Photoshop o iconos.

Así que ahí van 20 fuentes más. ¡Qué aproveche!

Negras y grandes: bonitas fuentes

Y detrás de tan escandaloso título para la entrada, viene una de fuentes tipográficas. Negras y grandes. Grandes y negras. Muy negras. Porque las negritas son bellas. Y porque destacan. Y porque sí.

20 hermosas tipos que deberías usar en tus diseños.

Fin de semana

Evolución en Stop Motion

Os dejo con este impresionante stop motion sobre la evolución de la vida en la Tierra. Muy bueno, sí señor...

Canal Adobe: tutoriales en español

Si no sabes inglés o tu nivel no es el suficiente para entender los boletines y noticias en la lengua de Shakespeare, seguro que muchas veces te has perdido información interesante sobre los productos de Adobe y noticias de otras webs de diseño.

Así que como Adobe quiere que aprendamos a manejar todos sus programas a la perfección y enseñarnos trucos y atajos de teclado para que los usemos más cómodamente (además de vender, que estamos en crisis), ha creado un canal de vídeo completamente en español. Además, así nuestro trabajo diario será más rápido.

En este canal, encontrarás vídeos en HD (alta definición) con tips para trabajar con todos los programas de Adobe como por ejemplo:


Como crear archivos en PDF desde Outlook;

Como ponerle contraseña a un PDF;

Animación en Flash con las propiedades físicas de muelle;

Y muchos más sobre Illustrator, CS Live, InDesign, Flash, Acrobat, Photoshop, Dreamweaver, After Effects, etc…

La dirección del canal de Adobe en Español es http://www.canaladobe.com/

RGB / CYMK

Modelo RGB

Este espacio de color es el formado por los colores primarios luz. Es el adecuado para representar imágenes que serán mostradas en monitores de ordenador o que serán impresas en impresoras de papel fotográfico.

Programa para crear packs en 3D

A la hora de crear proyectos de packaging, son muchas las opciones de software que podemos encontrar para realizar buenas presentaciones. Desde los programas habituales de diseño vectorial, hasta los grandes renderizados obtenidos por aplicaciones de modelado 3D, son opciones que dependiendo de nuestras habilidades podemos utilizar para este tipo de diseños.

Identificar tipografía online

La mayoría de los proyectos de diseño gráfico, por no decir su totalidad, requieren de elementos tipográficos. Los diseñadores tenemos cientos, por no decir miles, de fuentes en nuestra colección particular, muchas de ellas instaladas en el ordenador, para utilizar en cualquier momento que las necesitemos. Sin embargo a menudo con tanto tipo nos volvemos locos a la hora de clasificarlas para encontrarlos fácilmente, o directamente encontrarlas.

Diseñar webs para móviles

A la hora de diseñar una web, bien sea personal o para algún cliente en concreto, queremos que se visualice lo mejor posible en todos los navegadores y dispositivos disponibles. Lógicamente esto no es una tarea sencilla porque existen distintos estándares que condicionan que una página web se vea de distinta manera dependiendo de donde se muestre.

Letras 3D vectoriales

En los últimos tiempos se ha impuesto el estilo 3D en la tipografía, tanto para ilustraciones como en diseño gráfico. La proliferación de las herramientas de modelado 3D semiprofesionales al alcance de todos ha provocado que el que más o el que menos, haya realizado algunas composiciones con estas aplicaciones.

Recursos para medios sociales

En Mashable han preparado una buena recopilación de recursos de medios sociales para diseñadores y artistas, y es que, los diseñadores son uno de los grupos profesionales que más se pueden aprovechar de la explosión que está teniendo la Social Media.

En total son 75 recursos entre los que podréis encontrar extensiones de Google Chrome para diseñadores web, aplicaciones para Android y para iPhone, buenos portafolios para seguir, tecnicas de CSS3 para posicionar mejor vuestras webs, etc..

No os perdáis ninguno de los consejos y recursos de este listado, aplicadlos y veréis como vuestros diseños y vuestras webs suben en su posicionamiento en Google y con ello, si todo está bien aplicado, vuestros ingresos también subirán (de publicidad, si vais a sueldo dudo que pase).

Descarga patrones con MadPattern

Los patrones son uno de los elementos más utilizados para diversos fondos realizados en páginas web y en otros tipos de diseños, así que es importante disponer de buenos recursos para que no nos quedemos sin material en este ámbito.

MadPattern es una muy buena colección de plantillas de Adobe Illustrator que nos permite crear rápidamente patrones con una sencillez extrema, y encima tienen una galería para compartir los patrones creados con el Kit que nos dan para compararlos con los del resto de usuarios.

Visto en: WebResourcesDepot

Speed CSS – Maquetación de una web a cámara rápida

Veamos rápidamente cómo se pasa de una imagen en PSD a HTML.

Adobe acaba de poner una nueva carta en la mesa para demostrar que su plataforma Flash aún tiene cuerda para rato. Al parecer, en la conferencia Max 2010 que tendrá lugar a finales del mes de octubre de este año se mostrará una API de Flash para que éste sea capaz de mostrar contenidos tridimensionales.

Frases

"Flash debe morir"

armando sosa

HTML5 para principiantes

Seguramente, y a pesar del poco tiempo de vida de este blog, habrás podido observar cierto interés por el nuevo HTML5, al que espero le falte poco para quedar definido. Y es que esta nueva (re)visión del HTML le aporta todo lo que echaba de menos cuando empecé a estudiar programación web y que fueron de las cosas que hicieron desanimarme y centrarme en el diseño "analógico". Flash nunca caló en mí demasiado.