DisenioN

Mírame

Diego González Villarejo — Mon, 01 Aug 2011 07:06:40 +0000

Tarde de piscina

Diego González Villarejo — Thu, 28 Jul 2011 06:14:52 +0000

Jugando

Diego González Villarejo — Tue, 26 Jul 2011 08:30:36 +0000

Una habitación

Diego González Villarejo — Wed, 20 Jul 2011 07:24:44 +0000

Post Baño

Diego González Villarejo — Mon, 18 Jul 2011 08:32:32 +0000

Espigas Verdes

Diego González Villarejo — Thu, 14 Jul 2011 10:00:28 +0000

Mi Familia

Diego González Villarejo — Tue, 03 May 2011 06:18:27 +0000

Pelotas

Diego González Villarejo — Thu, 21 Apr 2011 16:08:16 +0000

Ramillo

Diego González Villarejo — Thu, 21 Apr 2011 16:07:11 +0000

Pecera

Diego González Villarejo — Fri, 08 Apr 2011 07:11:40 +0000

Bonsai 3

Diego González Villarejo — Tue, 05 Apr 2011 06:21:56 +0000

Bonsai 2

Diego González Villarejo — Wed, 30 Mar 2011 09:46:44 +0000

Bonsai 1

Diego González Villarejo — Thu, 17 Mar 2011 07:54:19 +0000

Decoración

Diego González Villarejo — Tue, 15 Mar 2011 07:41:00 +0000

Marchas

Diego González Villarejo — Wed, 09 Mar 2011 07:14:09 +0000

Habitación

Diego González Villarejo — Mon, 07 Mar 2011 07:40:55 +0000

La Torre Blanca

Diego González Villarejo — Wed, 02 Mar 2011 07:06:10 +0000

Ribera

Diego González Villarejo — Mon, 28 Feb 2011 07:26:09 +0000

Polen

Diego González Villarejo — Fri, 25 Feb 2011 06:58:22 +0000

Fachada

Diego González Villarejo — Mon, 21 Feb 2011 07:23:31 +0000

Espigas

Diego González Villarejo — Thu, 17 Feb 2011 07:17:22 +0000

El Rocío

Diego González Villarejo — Tue, 15 Feb 2011 07:23:07 +0000

Catedral

Diego González Villarejo — Fri, 11 Feb 2011 06:56:42 +0000

Campanario

Diego González Villarejo — Tue, 08 Feb 2011 07:51:47 +0000

Formularios: Validación y envío a Bases de Datos

Diego González Villarejo — Mon, 07 Feb 2011 06:14:35 +0000

El formulario se valida antes de ser enviado mediante jquery. Con PHP se envía la información recogida a una base de datos y además enviamos un e-mail de confirmación.

Un buen formulario puede ser una gran herramienta para la recogida de información. Pero para poder aprovecharlo al máximo debemos potenciarlo. Hoy vamos a explicar de una manera sencilla como validar un formulario con jquery, como enviar la información recogida por PHP a tu dirección de correo y una base de datos en MySql.

¿Qué necesitamos?

Unos conocimientos básicos en html (con unos conocimientos de andar por casa nos es más que suficiente).
Un servidor que soporte PHP
Una base de datos en MySql y un mínimo control de las mismas.

El código del formulario.

Formulario de prueba





Nombre



Apellidos



e-mail

Este es un código para un formulario básico. Veamos el código con detenimiento. Primero declaramos el DOCTYPE y le damos un título al documento. Al “form” le damos el id=”formulario”. Puedes cambiar este id por el que estimes oportuno, pero ten en cuenta que este id va a ser necesario para la validación.

Este sencillo formulario tiene tres campos básicos: Nombre, apellidos y e-mail aunque se pueden utilizar tantos como necesitemos. A estos campos debemos darles un id y un name que les identifique en este caso: nombre, apellidos, email. Este id y el name también lo usaremos luego para hacer la conexión con la base de datos, tratadlos con cuidado. Además a cada campo que queramos que sea obligatorio le adjudicaremos la class=”required”, y si es un email class=”required email”. De esta forma comprobará que se han rellenado los campos antes de enviar el formulario y en el caso del e-mail verificará que es del tipo xxx@dominio.xx Esta validación nos da más posibilidades, pero antes vamos a ver como hacemos la validación

Validar el formulario:

Formulario de Prueba

Como la validación se hará por jquery lo primero que necesitamos serán los archivos js. Aquí os dejo el enlace para descargaros la última versión de jquery y la del plug-in de validación. Una vez que los hayamos descargados los guardamos en la carpeta js y los enlazamos a nuestro html como vemos en el código.

Ponemos en marcha la función a traves de la etiqueta “script” y definimos el id del formulario que vamos a validar. Como vemos en el ejemplo #formulario. Es importante que coincida con la que le dimos al form. Si queremos abrimos el archivo validate. js y buscamos las frases que aparecerán con la validación para traducirlas, ya que por defecto vienen en inglés. Es muy fácil. Además podremos ver todos los tipos de validaciones que nos permite este fantastico plug-in como por ejemplo por dígitos, url, etc.

Conexión a la base de datos MySql y envío de email.

Accede a la base de datos de MySql. Si no tienes muy claro como acceder, lo ideal es que lo hables con tu proveedor del alojamiento. Creas una nueva tabla llamada “prueba”, y en ella los campos que vamos a recojer, en nuestro caso nombre, apellidos, email. Yo además recomiendo crear un campo fecha, para saber con exactitud cuando se envió el formulario. Una vez que la base está hecha creamos nuestro archivo “enviar.php” para hacer la conexión. Veamos el código:

$fecha = date("d/m/Y H:i:s"); $nombre = $_REQUEST['nombre'] ; $apellidos = $_REQUEST['apellidos'] ; $email = $_REQUEST['email'] ; $confirmacion = "Estos son los datos que has introducido. Muchas gracias por tu participación: Nombre: $nombre Apellidos: $apellidos2"; mysql_connect ('servidor', 'usuario', 'contraseña') or die ('Error: ' . mysql_error()); mysql_select_db ('nombre_bd'); $query="INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES ('$fecha', '$nombre', '$apellidos', '$email')"; mysql_query($query) or die ('Error en la carga de datos'); mail($email, "Asunto del mensaje", $confirmacion, "From: correo@dominio.xx"); header("location:http://www.tudominio.es/respuesta.html") ?>

En primer lugar recojemos la información del formulario mediante la funcion REQUEST a las variables que deseemos. Lo más sencillo es llamar a la variable del mismo modo que hemos llamado a los id’s de cada campo. La variable “$nombre” recoje la información del campo con id “nombre”. Fácil, ¿verdad? Recogemos todos los datos y creamos una variable para el contenido del email de confirmacón: “$confirmacion”.

Ahora hacemos la conexión con la base de datos. Introducimos la dirección de nuestro servidor MySql, el usuario y la contraseña (estos datos os los dará vuestro proveedor de alojamiento), si falla nos aparecerá un error: mysql_connect (‘servidor’, ‘usuario’, ‘contraseña’) or die (‘Error: ‘ . mysql_error());

Seleccionamos la base de datos que queremos e introducirmos su nombre: mysql_select_db (‘nombre_bd’);

Luego hacemos el query para introducir los datos que hemos recogido en los campos que hemos creado en la base de datos. Para que entendais el código, le decimos que inserte en la tabla “prueba” en los campos que aparecen entre paréntesis los valores siguientes: $query="INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES (‘$fecha’, ‘$nombre’, ‘$apellidos’, ‘$email’)"; Cerramos la conexión con la base de datos.

Ahora enviamos un email de confirmación mediante la función mail. La función mail se construye en base a cuatro campos, que se ordenan de la siguiente manera: Dirección de destino, Asunto del mensaje, Contenido del mensaje y Dirección de envío. Así nuestra función quedaria de la siguiente manera: mail($email, “Asunto del mensaje”, $confirmacion, “From: correo@dominio.xx”); Como vemos en la dirección de destino tomamos la variable $mail, para que se envíe a la dirección que nos facilitaron. Para el contenido del mensaje utilizamos también la varibale $confirmación que habiamos declarado antes.

Para terminar yo utilizo la función “header” que me permite redirigir a una página de respuesta. Es una buena idea porque así informamos al cliente de que todo se ha procesado correctamente.

Y ya está. Fácil y muy útil.

Cualquier comentario o aportación será bienvenida.

Callejuela

Diego González Villarejo — Fri, 04 Feb 2011 08:26:27 +0000

ADSL

Diego González Villarejo — Mon, 31 Jan 2011 07:34:01 +0000

Tronco Viejo

Diego González Villarejo — Thu, 27 Jan 2011 20:48:01 +0000

Árbol

Diego González Villarejo — Thu, 27 Jan 2011 20:34:00 +0000

Rubén

Diego González Villarejo — Mon, 24 Jan 2011 19:20:19 +0000

Arbol de Navidad

Diego González Villarejo — Mon, 27 Dec 2010 07:09:45 +0000

Calle típica

Diego González Villarejo — Thu, 25 Nov 2010 08:07:05 +0000

Lower Carfield

Diego González Villarejo — Wed, 17 Nov 2010 07:58:40 +0000

Ventana

Diego González Villarejo — Thu, 11 Nov 2010 07:49:51 +0000

MP3

Diego González Villarejo — Fri, 05 Nov 2010 12:12:03 +0000

Romanus

Diego González Villarejo — Tue, 02 Nov 2010 07:33:05 +0000

Tela

Diego González Villarejo — Fri, 29 Oct 2010 06:08:30 +0000

Ganar un premio

Diego González Villarejo — Wed, 27 Oct 2010 14:02:28 +0000

Una sala oscura, iluminada apenas por unos focos y la luz que emite la pantalla de proyección. Suben, se dan la mano, se hacen las fotos y bajan. Me mantengo pegado a la silla, no creo que me toque subir.
“Y el premio al mejor uso creativo del medio revistas y suplementos es para…”
Comienzan los aplasusos, miro a los lados y nos levantamos. Es un camino corto, pero extraño.

Cuando eres diseñador y el premio es al mejor uso creativo de un medio sientes que estás haciendo bien tu trabajo. El pasado 10 de octubre tuvo lugar la entrega de los premios Genio en la sede del grupo Vocento en Madrid. Se daban cita mucha gente del sector, de los grupos de publicidad punteros en España. Y entre ellos nosotros. Los únicos que no pertenecen a un gran grupo de comunicación. Además la campaña no era para un empresa de gran inversión, por lo que parece que de verdad premiaron nuestra creativdad y no al anunciante para que esté contento. Un motivo de más orgullo para nosotros.

La entrega de premios

Si bien es verdad que no creo demasiado en este tipo de premios, recibirlos es gratificante. Si un trabajo que crees que es bueno es reconocido fuera de tu círculo cercano, tienes la seguridad de que es un buen trabajo. Supongo que esta premio será un acicate para mi creatividad además. No será a largo plazo, pero de momento, me siento ante la hoja en blanco con algo más de ilusión.

Como ya he dicho no creo demasiado en estos premios, tengo la impresión de que siempre se da a quien interesa, no al mejor. Siempre hay alguno que ha realizado un gran trabajo y lo cuelan para no cante mucho, pero la mayoría son grandes empresas con tremendas inversiones (vamos los que dan de comer al medio). Como mi trabajo no puede tener ningún interés comercial para el grupo que da el premio, me queda el consuelo de que nos dan el premio porque la campaña es buena.

En la velada se aprovechó además para entregar los leones de Cannes de plata y de bronce (en la entrega oficial de Cannes solo entregan los de oro), así que en las pantallas de proyección del recinto se vieron circular muy buenas ideas. No es un mal sitio para inspirarse. Intenté quedarme con todo lo que pude porque no me llevé el bloc de notas (fallo grande, debes ir siempre con el bloc de notas, nunca sabes dónde puede aparecer la inspiración).

De todos modos en estos premios lo mejor viene despúes. Un cocktail y una charla distendida con algunos buenos profesionales. Quedas un día para tomar algo y que te enseñen el estudio, pones en común algún proyecto que pueda ser interesante. Vamos, vida social del diseñador.

Roma

Diego González Villarejo — Mon, 25 Oct 2010 14:24:43 +0000

Coliseo

Diego González Villarejo — Tue, 19 Oct 2010 18:17:20 +0000

Cara del hombre

Diego González Villarejo — Tue, 28 Sep 2010 14:16:35 +0000

Gárgolas

Diego González Villarejo — Wed, 22 Sep 2010 07:12:30 +0000

Gota de agua

Diego González Villarejo — Fri, 17 Sep 2010 06:13:52 +0000

Ángulo Recto

Diego González Villarejo — Wed, 15 Sep 2010 06:34:18 +0000

Sitios Web para el móvil

Diego González Villarejo — Wed, 15 Sep 2010 06:27:22 +0000

La era de los dispositivos móviles

En breve la mayoría de las conexiones serán por móvil

Como diseñadores web debemos cambiar el chip. En un futuro muy cercano muchos de los usuarios que acceden a nuestros sitios lo harán a través del teléfono móvil, así que hay que estar preparados. Si te ves capacitado para crear una aplicación para el iPhone o para Android, ¡adelante! es la mejor solución. Y si no lo haces o aunque lo hagas es bueno tener bien optimizada la web para los móviles.

Consideraciones básicas.

La pantalla del móvil es mucho más pequeña que la del ordenador. La mayor parte de los móviles son tactiles y necesitan unos botones relativamente grandes para que se puedan usar con facilidad. Por esto mismo un diseño que funcione bien en un monitor no tiene porque funcionar bien en el móvil.

La velocidad de conexión del móvil es siempre inferior a la del ordenador (por regla general). Optimizar las imágenes y los fondos es algo que nuestros usuarios nos agraderán enormemente. Que el sitio cargue con facilidad y rápidamente es siempre una buena señal.

Algunos recursos:

La mejor manera de comprobar como se nuestra web en un navegador móvil es con un teléfono móvil. Además lo ideal es probar con modelos distintos para ver las diferencias. Como eso a veces no es posible lo mejor es utilizar simuladores: ¿Cómo se ve mi web en un iPhone o un móvil con Android?

iPhone: http://iphonetester.com/

Multiplataform: http://protofluid.com/

Si lo que quieres es convertir tu sitio web para móviles y no te quieres complicar mucho tienes varias opciones.

Mippin: http://mippin.com/web/ Solo necesitas registrarte y podrás crear de manera gratuita una versión móvil de tu sitio web. Incluye algunas opciones de personalización que te pueden ser muy útiles

Plug-in para wordpress: Si utilizas wordpress como cms o plataforma de blog existe un pequeño plug-in que te puede ayudar muchisimo: WordPress Mobile Pack http://wordpress.org/extend/plugins/wordpress-mobile-pack/. Yo no soy excesivamente partidario de los plug-in pero no está nada mal este, fácil de usar y fácil de instalar.

Zinaddo: http://www.zinadoo.com/ Desde esta web también podrás crear una versión móvil de tu sitio.

Cardos

Diego González Villarejo — Fri, 10 Sep 2010 14:51:33 +0000

Tortuga

Diego González Villarejo — Mon, 06 Sep 2010 06:20:49 +0000

Puente en Sian Ka’an

Diego González Villarejo — Mon, 30 Aug 2010 07:51:44 +0000

Acantilados en Irlanda del Norte

Diego González Villarejo — Thu, 26 Aug 2010 08:19:02 +0000

Necesidades

Diego González Villarejo — Tue, 24 Aug 2010 15:01:14 +0000

“Le damos al cliente lo que quiere y no lo que necesita.”

Un error que cometemos muchos diseñadores. Le damos al cliente lo que quiere y no lo que necesita.

El cliente es lo más importante, es quién en definitiva nos paga por nuestro trabajo, así que es vital que esté contento con nosotros. Partiendo de esta base muchos diseñadores llegamos a un problema. Queremos tenerle contento y hacemos lo que sea para no perderle y para que quede bien satisfecho. Cuando el cliente es nuevo, normalmente tanteas, y vas viendo qué le gusta. Lo usual es que el cliente elija el diseñador en base al estilo que este tiene. Pero eso en España es solo teoría. Es común que el cliente te elija porque ha visto el folleto o la web que le has hecho a un amigo o por la recomendación de un familiar.

Conversación.

He visto la web que le has hecho a Juan, el de los tomates y me ha gustado mucho, y quiero que me hagas una cosa parecida. Con lo de quienes somos, una foto en la parte de arriba como la que tiene y eso. Sí, nosotros nos dedicamos a la instalación de placas solares.

Quizás es un caso demasiado evidente. En ningún caso deberíamos hacer la web igual para una empresa que vende tomates que para una que instala placas solares. Ni siquiera el planteamiento será el mismo. El dinero fácil tienta, le adapto un poco la página y lo cobro, con poco trabajo me llevo el dinerito.

¿Y esto funciona?

Pues es probable que el cliente esté contento. Al fin y al cabo le has dado lo que quería, ¿pero cuánto le va a durar? Si el ve que se ha gastado la pasta en algo que no le sirve, le cambiará el gesto. El cliente tiene lo que quería, pero no lo que necesita. Y la culpa evidentemente es del diseñador. El cliente de esto no sabe (aunque crea que sí), el profesional eres tú. Tú eres quien debe asesorarle y trabajar sobre lo que de verdad necesita. Sé consciente de esto, el diseño que realices es un vehículo para el mensaje. Lo importante es que llegue el mensaje. El barco puede ser precioso pero si no lleva la mercancía hasta la ciudad en lo alto de la montaña no nos sirve de nada.

¿Qué necesita usted?

Es común que el cliente no sepa exactamente qué necesita, algunos incluso no saben lo que quieren. El diseñador debe orientarle, en realidad este trabajo previo hará más fácil el proceso de diseño. Vas con mucha más información y el cliente se fía más de ti porque tiene la sensación de que puedes manejar la situación. Es muy desagradable ir a un restaurante y pedir 4 platos para 2 personas pensando que va a ser una cantidad razonable de comida y que te encuentre que te sobran 2 platos. Posiblemente no vuelvas, le has pagado 2 platos que ni has probado. Como empresa es mejor avisar al cliente, recomendarle que pida solo 2 platos y así quedará más satisfecho y habrá una mayor probabilidad de retorno.

Entonces, ¿qué debo hacer?

Habla con tu cliente, aprende de como trabaja, como funciona su negocio. Interiorizalo y asesorale. Mantenle informado de lo que crees que es mejor para él. Analiza las necesidades de su negocio. Esa es la clave del éxito como diseñador.

Pub dublinés

Diego González Villarejo — Tue, 24 Aug 2010 05:52:14 +0000

Ninot de noche

Diego González Villarejo — Fri, 20 Aug 2010 07:51:07 +0000

Camarones

Diego González Villarejo — Wed, 18 Aug 2010 14:39:02 +0000

Rediseño Total

Diego González Villarejo — Mon, 16 Aug 2010 16:23:05 +0000

Le doy la vuelta a la web. Un nuevo concepto y un nuevo diseño. Nuevas secciones, nuevos trabajos, todo nuevo.

Después de unos meses de duro trabajo y ardúo esfuerzo, ya está lista la nueva web. He aprovechado los meses estivales para hacer un rediseño completo de la web. Seamos realistas, ya iba siendo hora.

Para los que no hayan visto la web anterior, aquí os dejo una versión previa. Es una pena, porque no conservo ninguna copia de la primera versión. Seguro que con el paso del tiempo me haría ilusión verla, pero bueno no se puede tener todo.

El cambio más obvio es el lavado de cara total. He apostado por un layout más limpio, claro y flexible. El anterior no me permitía muchos cambios y el negro del blog ni siquiera encajaba con la imagen corporativa de DisenioN. Lo reconozco, mal. Bueno peor que mal, debería dar ejemplo si luego le pido eso a mis clientes. Los otros cambios son a nivel de estructura.

El blog.

Voy a intentar potenciar el blog todo lo posible. Eso no quiere decir que vaya a escribir más a menudo. Más bien todo lo contrario. Voy a escribir menos, pero me voy a currar más los post. La idea es adaptar el estilo de cada post al contenido del mismo. Voy a adaptar todo lo que he ido aprendiendo del diseño para materiales impresos a la web. Esto hará que cada post lleve mucho más trabajo, pero estoy seguro que será más satisfactorio, por lo menos para mi.

El Portfolio.

En vez de tener muchos trabajos dividos voy a ser más selectivo. Menos trabajos pero solo los mejores.

Foto del día.

Esto no quiere decir que vaya a colgar una foto nueva cada día. Cuando tenga una foto que me guste la colgaré. No tiene porque ser hecha ese día, quizás solo descubierta entre todas las que hago. De todos modos como las reglas las pongo yo, yo las modifico.

Sobre mi.

En esta sección he situado información sobre mi y los medios de contacto. ¡Fácil!

Pues si te ha gustado el rediseño y el nuevo concepto de DisenioN déjame un comentario más abajo y suscribete al blog por RSS. Si no sabes lo que es eso, es que posiblemente estés un poco anticuado en esto de internet (más información sobre RSS). Si no te ha gustado déjame también un comentario, aquí estamos para mejorar.

Problemas con la base de datos

Diego González Villarejo — Wed, 13 Jan 2010 10:42:10 +0000

En primer lugar os quería pedir disculpas a todos los asiduos al blog.

He tenido problemas con la base de datos Sql que contiene toda la información del blog. Y entre las fiestas, algunos fallos mios (lo reconozco) y que tengo un hosting que debe ser como las aerolíneas Low-Cost (por precio y servicio, que quede claro) hemos estado sin blog casi un mes.

Se que es muchisimo tiempo y hasta cierto punto me da vergüenza. De todos modos llevaba sin escribir bastante tiempo. Estoy preparando un rediseño para el blog y para mi portfolio on-line. Es un trabajo arduo y lleva tiempo (del que apenas dispongo) por lo que la cosa se complica. Pero os aseguro que estoy trabajando duro y que el resultado final será bueno.

Pues nada más, solo quiero volver a pediros disculpas. En breve volvereis a tener noticias mias.

Proyecto 365 – Octubre 09

Diego González Villarejo — Tue, 10 Nov 2009 11:53:55 +0000

Ya tenemos las fotos del mes de octubre. Una foto por día con un tema en común. En este caso era “verde”. Sé que no todas son buenas fotos, de hecho solo hay unas pocas que me gusten de verdad. Pero bueno hay que aprender. Espero con mucho gusto vuestros comentarios.

¡Gracias!

Proyecto 365 – Septiembre 09

Diego González Villarejo — Sat, 03 Oct 2009 12:32:59 +0000

He sido constante y tenemos aquí para el disfrute colectivo las fotos de mi primer mes del proyecto 365. En el mes de septiembre el tema ha sido “Yo”. Bastante egocéntrico, lo reconozco pero queria empezar con algo que me pareciese un reto. La verdad es que ha sido muy gratificante y aunque no todas las fotos que publico me gustan hay algunas que sí y espero que la calidad vaya aumentando con el tiempo. Las fotos van ordenadas cronológicamente. Espero que las disfruteis tanto como yo.

¡El blog en Facebook!

Diego González Villarejo — Tue, 15 Sep 2009 09:21:17 +0000

Para todos aquellos apasionados al blog de DisenioN he creado una aplicación en Facebook.

Si teneis cuenta en Facebook (que si no la tienes ya deberias) entrad en la siguiente dirección: http://apps.facebook.com/disenionblog/ y agregad esta aplicación para que podais ver todas las novedades del blog directamente en vuestro facebook. Todo esto es por haceros la vida más fácil eh. El siguiente paso será incluir RSS, creo que será un buen paso.

Pues como siempre espero vuestras sugerencias y comentarios.

Wallpaper Tipográfico V

Diego González Villarejo — Fri, 11 Sep 2009 09:26:47 +0000

Hoy vuelven vuestros amados fondos de escritorio o wallpapers (como ustedes gusten). El de hoy está realizado con la tipografía gratutia Mod. Una pasada la tipo esta, la verdad. Y para adornarlo nos hacemos un pregunta retórica ¿Qué coño es el diseño? y damos una respuesta idiota. Espero que os guste. Ya sabeis que si lo necesitais en otra medida que no sea las que ofrezco más abajo solo teneis que pedirlo.

Como siempre está disponible en las siguiente resoluciones:

Fotografía de la semana 9

Diego González Villarejo — Thu, 03 Sep 2009 06:49:37 +0000

Proyecto 365

Diego González Villarejo — Tue, 01 Sep 2009 21:59:43 +0000

Supongo que este blog no debe tener muchos lectores asiduos por cosas como esta. Hace casi dos meses que no escribo nada y la última vez fue para decir que llevaba demasiado tiempo sin hacerlo. Quizás sea la falta de tiempo (os prometo que estoy realmente atareado) o la falta de motivación e inspiración.

Como sacarle más horas al día va a estar complicado, voy a empezar un nuevo proyecto para motivarme. Quiero ampliar mi mirada fotografica, y para eso lo mejor es practicar mucho. Así que desde hoy cada día haré una foto, y lo mantendré durante un año. Cada mes tendrá una temática y una vez que acabe el mes subire todas la fotos aquí y a mi cuenta de flickr.

La idea no tiene más pretensión que la de divertirme y aprender más. Si alguien quiere participar en este proyecto no tiene más que dejar un comentario en este post o enviarme un correo a diego.gonzalez@disenion.com

Un blog dejado de la mano de Dios

Diego González Villarejo — Thu, 09 Jul 2009 12:29:15 +0000

Hoy hace justo un mes que no escribo nada en el blog. Y no es que no tenga cosas que contar, es que sencillamente no tengo tiempo para hacerlo. Siento mucho no hacerlo más a menudo por mis innumerables fans (si es que existe alguno) pero me es imposible.

Voy a intentar escribir algo durante mis vacaciones, pero tampoco prometo nada, eh. Si quereis que os informe cuando lo actualize enviadme un mail a diego.gonzalez@disenion.com y os avisaré encantado. También podria crear una suscripción por RSS, pero debo ser el tiepo más ocupado del mundo porque tampoco encuentro tiempo para eso.

¡Gracias por vuestra comprensión!

P.D: Si este blog esta dejado de la mano de Dios, y el que lo ha dejado de lado soy eso quiere decir que soy Dios. La respuesta es sí.

Actualización de “Imágen de fondo en Flash que ocupa todo el navegador”

Diego González Villarejo — Tue, 09 Jun 2009 18:29:42 +0000

Hace algún tiempo ya realizé este pequeño tutorial sobre como utilizar imágenes de fondo para un flash y que además carguen dinámicamente. He recibido muchisimas peticiones para que cuelgue el .fla de aquel tutorial. Pues bien en primer lugar voy a actualizar el enlace que estaba roto:

Flash con Fondo que ocupa todo el navegador y con carga aleatoria de imágenes

Además o dejo también el .fla para que lo descargueis. Y como siempre si veis cualquier cosa o necesitais algo más solo teneis que decirmelo. ¡Un saludo!

Fotografía de la semana 8

Diego González Villarejo — Wed, 27 May 2009 21:31:36 +0000

Calendarios

Diego González Villarejo — Fri, 22 May 2009 08:17:06 +0000

Otro encargo que os presento. Un cliente me pasó una serie de acuarales para insertarlas en unos calendarios que queria que le diseñase. La idea es que el centro fuese la pintura, y el diseño lo resltase y lo potenciase, pero dando un toque muy elegante. Bueno pues este es el resultado:

Cada hoja del calendario incluye dos meses y como el encargo llegó con bastante retraso (las acuarelas tardaron más de lo previsto) hubo que hacer un calendario mixto de 2009 y 2010. Así quedo:

Truco Rápido: Fondo para vuestros diseños

Diego González Villarejo — Wed, 13 May 2009 07:52:34 +0000

Encontré este mini-tutorial en el blog de otro diseñador, recuerdo que estaba en inglés, pero no recuerdo mucho más. Así que aquí transcribo lo que leí de memoria. Para hacer este tutorial solo necesitamos una foto que tenga una cierta armonía de colores (aunque no es imprescindible) y Photoshop. En tan solo un paso, muy fácil:

Para hacer este fondo voy a utilizar una de mis fotografías que tengo colgadas en flickr (haz click sobre la foto para poder descargarla):

Vamos a Filtro > Desenfocar > Desenfoque de movimiento… y ponemos los parámetros que veis en la imagen inferior:

¡Y ya está! Tenemos un precioso fondo para utilizar en nuestros diseños y con un único paso. Probad con distintas fotos, tocando los niveles, o modos de fusión para conseguir el efecto que querais. Pero como veis la base es realmente sencilla y eficaz.

Propuestas Publicitarias

Diego González Villarejo — Sat, 09 May 2009 14:01:20 +0000

Cuando eres diseñador sueles hacer bastantes propuestas que finalmente no salen a la luz (aunque otras sí y no son las mejores). En los últimos meses he realizado una buena cantidad de propuestas a mis clientes. Normalmente cuando se trata de una campaña grande y aún no tienen bien definidos los formatos intento pasarles un visual en tamaño A4 para que aprecien la propuesta y decidan. En este último mes he hecho un total de 7 propuestas para varias campañas. No todas han salido, claro, pero creo que pueden dar una buena idea de cúal es mi gusto y mi estilo al diseñar.

Las 7 propuestas, ordenadas de manera aleatoria. ¿Cúales son vuestras favoritas?

Revista Voir

Diego González Villarejo — Thu, 07 May 2009 06:26:47 +0000

Un nuevo trabajo para mi portfolio. En este caso el encargo era el diseño y la maquetación del número especial de una revista de óptica, coincidiendo con el 50 aniversario de su producto estrella. La revista tiene un tamaño DIN A4 y una retícula de 3 columnas con ámplios márgenes. En breve intentaré subir la retícula en InDesign como he hecho otras veces.

Trazar textos de pdf en Acrobat

Diego González Villarejo — Tue, 05 May 2009 09:05:29 +0000

El otro día me surgió un problema. Me pasaron un logotipo para insertarlo en un cartel. El logo era vectorial, lo que ya está bastante bien, y venia en un pdf. El cartel (bien grande) ya lo habia diseñado en Illustrator, y necesitaba poner el logo en blanco para insertarlo. El tipo que diseñó el logo no fue demasiado cuidadoso (ni muy profesional, supongo) y el texto del logo venia. El problema era que el cliente no tenia otra cosa más que eso y no podia ponerme en contacto con el diseñador del mismo. Cuando intenté abrir el logo en Illustrator para cambiarle el color resulta que no tengo esa tipografia y se rompe el logo al abrirlo. ¿Qué hago?

Bien pues buscando, encuentro este tutorial en Desfaziendo Entuertos. Lo reproduzco aquí con el Acrobat 8 Professional porque la verdad es que lo he encontrado realmente muy interesante. Los pasos son muy sencillos: Insertar una marca de agua invisible y trazar los textos con la vista previa del acoplador (son necesarios los dos pasos, eh).

En primer lugar abrimos el pdf que queremos trazar. Vamos a Documento > Marca de agua > Agregar… Nos aparece la siguiete ventana:

Primero vamos a “Examinar” y elegimos una foto (la que sea, da igual porque no se va a ver). Cuando esté seleccionada la veremos en el previsualizador que aparece en la derecha. Como no queremos que se vea ponemos la opacidad al 0% y pinchamos en “Opciones de aspecto…” En la ventana flotante que aparece desactivamos la casilla de “Mostrar al imprimir”.

Muy bien aceptamos todo y nos vamos a la Vista Previa del Acoplador: Avanzadas > Producción de impresión > Vista previa del acoplador:

Solo tenemos que marcar la casilla de “Convertir todo el texto en contornos”. En la parte inferior seleccionamos si queremos trazar esa página, todo el documento o un rango de páginas. Le damos a “Aplicar”, luego a “Aceptar” y nos saldrá una ventanita flotante avisándonos de que la acción no se puede deshacer. Aceptamos de nuevo y ya tenemos nuestro pdf trazado. Prueba a intentar seleccionar el texto con la herramienta de selección o abre el pdf en Illustrator para comprobar que todo está bien trazado.

Muchos pensareis que podeis evitaros el primer paso, por que si al fin y al cabo no va a aparecer la imagen… Pues no, es inevitable. Es necesario poner una imagen en transparencia (0% en nuestro caso de opacidad) para que convierta los textos a trazos.

¡Espero que os sea útil.

Fotografía de la semana 7

Diego González Villarejo — Fri, 01 May 2009 23:05:38 +0000

Un par de buenos recursos

Diego González Villarejo — Thu, 30 Apr 2009 06:54:13 +0000

Hoy os presento un par de webs dónde podreis encontrar algunos recursos muy útiles para el disñador. Un banco de fotografías gratuito y un banco de imágenes vectoriales gratuitos. Siempre es bueno disponer de recursos para nuestros diseños:

Indisain

Vector Madness

¡Espero que os sean útiles!

Algo distinto

Diego González Villarejo — Tue, 28 Apr 2009 11:47:18 +0000

Cuando uno tiene un trabajo creativo siempre piensa que tiene que innovar.

Siempre busco hacer algo distinto, pero normalmente no me lo aceptan. Quizás deba ser menos permisivo conmigo mismo. Creo que soy un diseñador clásico y que romper moldes no es mi fuerte. Posiblemente sea porque para romper reglas primero hay que conocerlas bien y tengo la impresión de que yo no las conozco bien. De todos modos el artista para ser tal tiene que ser capaz de sorprender, ¿o no?

A lo mejor mi problema como diseñador radica en que estoy fuera de esos límites. Y no por una cuestión personal si no porque el diseño gráfico o el diseño web no es un arte. Aunque en el diseño hay una finalidad estética, esta no es su finalidad última. El fín del diseño es comunicar una idea. La estética es imprescindible pero porque hace esa idea más accesible.

Bueno, es posible que no deba obsesionarme con innovar, al fin y al cabo no es mi deber como diseñador. Mis diseños tienen que ayudar a transmitir una idea y no explorar nuevos campos en la comunicación gráfica. No se porque, pero no me quedo más tranquilo…

Fotografía de la semana 6

Diego González Villarejo — Sat, 18 Apr 2009 12:06:36 +0000

Wallpaper Tipográfico IV

Diego González Villarejo — Thu, 16 Apr 2009 16:19:41 +0000

De nuevo volvemos a los fondo tipográficos. Esta vez, uno muy “corporativo”, que quede clarito quién lo ha hecho. La tipografia elegida para la ocasión ha sido Diavlo, de Jos Buivenga. Una tipo excelente y completamente gratis. Disfrutadla que merece la pena.

Como siempre está disponible en las siguiente resoluciones:

Educación y creatividad

Diego González Villarejo — Tue, 14 Apr 2009 08:10:43 +0000

Ayer un amigo dejo en Facebook un par de videos sobre una conferencia que dió Sir Ken Robinson en el TED acerca de la educación y la creatividad. De verdad que merece muchisimo la pena verlas. Están subtituladas al castellano así que no hay excusas:

Educación y Creatividad 1

Educación y Creatividad 2

Fotografía de la semana 5

Diego González Villarejo — Sat, 11 Apr 2009 22:48:10 +0000

Folleto: Argumentario de ventas

Diego González Villarejo — Thu, 09 Apr 2009 15:55:49 +0000

Un folleto claro, de fácil uso. Pensado para que el cliente lo maneje con asiduidad como una herramienta de ventas. Es un cuadríptico de tamaño A5 cerrado. Los gráficos y las fotografías que acompañan al folleto han sido creados (o seleccionados) intentando seguir la misma lína de comunicación de este producto en otros medios. Espero que os guste:

Fotografía de la semana 4

Diego González Villarejo — Sat, 04 Apr 2009 23:23:26 +0000

¡Mi primera foto marcada como favorita en Flickr!

Mi nuevo juguete

Diego González Villarejo — Fri, 03 Apr 2009 13:50:38 +0000

Acabo de recibir mi última adquisición: Una Canon IXUS 100 IS. Las primeras impresiones son geniales. Una cámara pequeña y ligera , pero muy robusta, con unos acabados muy elegantes y muy intuitiva. Cuando recibes un juguete nuevo lo que más te apetece es ponerte a jugar, pues eso he hecho. He cogido mi nueva cámara y mi vieja Nikon Coolpix 4600 y me he puesto a hacer pruebas. Pues bien aquí teneis los resultados:

Todas las pruebas han sido en modo automático, que la cámara eliga. Más adelante haré pruebas cuando empieze a trastear y os las mostraré por aquí:

Nikon Coolpix 4600 - Pincha en la imagen para ampliar

Canon IXUS 100 IS - Pincha en la imagen para ampliar

El balance de blancos es automático, y la Nikon obtiene un tono más cálido para la fotografía. Sin embargo el estabilizador de imagen de la IXUS hace maravillas frente a la camara de Nikon:

Nikon Coolpix 4600 - Detalle

Canon IXUS 100 IS - Detalle

El foco también es automático y la Nikon tiene a enfocar lo que está en el fondo mientras que la Canon tiende a enfocar lo que está en primer plano:

Nikon Coolpix 4600 - Pincha en la imagen para ampliar

Canon IXUS 100 IS - Pincha en la imagen para ampliar

Prefiero enfocar manualmente pero particularmente veo mucho más util que se enfoque lo que está en primer plano. Así que otro punto para mi nueva cámara. Y el macro, otro de los puntos fuertes de la Canon:

Nikon Coolpix 4600 - Pincha en la imagen para ampliar

Canon IXUS 100 IS - Pincha en la imagen para ampliar

Evidentemente ninguna fotografía ha sido manipulada para mostrarlas tal cual las hace la cámara. En la Nikon se han hecho a la máxima resolución posible (4MP) y en la Canon en una resolución intermedia (8MP) pero no deberia influir en la calidad de la imagen.

Bueno espero que este pequeño análisis pueda ser útil para algún indeciso.

De paseo por el diseño

Diego González Villarejo — Mon, 30 Mar 2009 06:38:25 +0000

Darse una vuelta por las webs de mis diseñadores favoritos pueder ser muy frustrante. ¿Cómo tienen esas ideas? ¿Cómo han llegado hasta ese detalle que consigue que su obra sea genial? ¿Por qué a mi nunca se me ocurren cosas así? Me planeto si estoy en el sitio adecuado. Es posible que me guste el diseño, pero creo que yo no le gusto al diseño. Supongo que llegado a este punto deberia darme una vuelta para refrescar mis ideas. La crisis me deja demasiado tiempo para pensar cosas en las que no deberia.

Madrid no es la ciudad más agradable para pasear. Creo que cuando me mude y vaya al campo los paseos serán más relajantes. Se oye una moto sin tubo de escape, un coche con Camela a más de 1km y los graves suenan a la perfección, unos obreros que se piden los sacos de cemento, gente repartiendo publicidad en la boca del metro. Ummhh, vuelven a bajar los pisos de esta inmobiliaria (posiblemente mantengan los precios que habia antes, pero nos lo venden distinto). Lo arrugo y lo tiro a una papelera, que tampoco quiero ensuciar mi ciudad. Dos pasos más y me doy media vuelta.

Utilizan un total de 5 tipografías distintas en la misma hoja de tamaño A5, impresa a 1 cara. No está nada mal, en una misma frase llegan a juntarse 3. Me encantan las frases que empiezan sin el signo de exclamación y terminan con cuatro: “Rebajada 30.000 euros!!!!”. Dos bloques de texto alineados a la izquierda (justificados y con un interletrado horroroso) y otros dos al centro. Creo que estos tipo han innovado tanto en el diseño como lo hizo Ed Wood Jr. en el cine.

Pensar que alguien ha cobrado por esto me devuelve la moral. Ya puedo volver y seguir trabajando. Creo que nos queda mucho por hacer. Hay tanto que mejorar.

Fotografía de la semana 3

Diego González Villarejo — Sat, 28 Mar 2009 11:46:41 +0000

Fotografía de la semana 2

Diego González Villarejo — Sun, 22 Mar 2009 12:40:08 +0000

Wallpaper Tipográfico III

Diego González Villarejo — Thu, 19 Mar 2009 10:53:08 +0000

Volvemos al ataque con nuestros wallpapaer tipográficos. En este caso como las normas las implanto yo, también me las salto cuando se me antoja. Esta vez no he utilizado una tipografía gratuita. De todos modos la Adobe Caslon Pro viene con los paquetes de Adobe CS.

Como siempre está disponible en las siguiente resoluciones:

Fotografía de la semana 1

Diego González Villarejo — Sat, 14 Mar 2009 11:00:37 +0000

Esta semana inauguramos una nueva sección: “Fotografía de la semana”. Intentaré postear cada semana una de mis fotos favoritas, no tienen que ser hechas esa misma semana, simplemente tienen que gustarme. Espero vuestros comentarios y sed piadosos que estoy empezando…

Folleto Cuadrado

Diego González Villarejo — Mon, 09 Mar 2009 21:19:32 +0000

Despúes de una semana sin publicar nada hoy volvemos con una nuevo trabajo. En este caso es un folleto de tamaño 21×21. El cliente me pidió un folleto elegante para mostrar precios y descripciones de productos. Fotos potentes y grandes, un aspecto limpio con una retícula muy cuidada y una gama de colores amplia para darle el mayor juego posible al folleto.

Las fotos llevan un barniz UV para potenciarlas y el juego gráfico de los círculos y las líneas hace referencia a la línea de comunicación del producto. Espero que os guste:

Hoy diseña: Valeria Martinez de v2m2

Diego González Villarejo — Tue, 03 Mar 2009 07:27:16 +0000

Cuando empiezas algo nuevo las primeras experiencias siempre te marcan mucho. Algo así también pasa cuando empiezas a trabajar como diseñador. Tus primeros compañeros influirán mucho en ti, eso seguro. Pues algo así me pasó con Valeria Martinez. Ha sido mi primera maestra a nivel laboral en esto del diseño. Los más de 2 años de trabajo codo con codo han modelado en parte al diseñador que soy hoy. Por eso no podia dejar de estar presente en mi blog. En este pequeña entrevista podreis conocer más de esta estupenda diseñadora o a través de su sitio web. Antes de empezar con las cosas triviales, vayamos a lo realmente importante: ¡Felicidades por tu inminente maternidad!

1. Hazme un breve resumen de tu carrera, para empezar por ahí.

Estudié en méxico diseño gráfico publicitario y antes de terminar la carrera ya estaba trabajando para una agencia muy grande en el departamento de fotografía publicitaria que en ese entonces también me gustaba mucho. Ahí aprendí todo lo que sé de fotografía tanto de estudio como de reportaje y es esa agencia conocí a las personas que me inspiraron a irme de México un tiempo para hacer cosas nuevas del otro lado del charco.

Vine a España (Barcelona) en el 2001 y estudié un máster de Maya (infografía) , durante ese año hice algunos trabajos de freelance de fotografía, diseño y 3D. Al terminar en 2002 me vine a Madrid e hice un máster de páginas web en flash, inmediatamente después empecé a hacer mis primeras páginas web de freelance.

A finales del 2002 entré a trabajar a una agencia pequeña en madrid Kennecot para la que hacia diseño gráfico y web, estuve 8 meses trabajando ahí y compaginandolo con una beca en una productora de video y cine Telson hasta mediadios del 2003. Entonces entré a trabajar a una multinacional Essilor España, donde me incorporé al departamente de Marketing encargada de la las campañas publicitarias y de linea del diseño gráfico de los productos durante 4 años. En 2007 entré en un proyecto muy bonito con un colega que me habia invitado a participar desde el principio creandolo todo desde cero, un estudio de diseño gráfico y fotografia LalineaMagenta pero duró muy poco el sueño ya que en septiembre del 2008 la empresa cerró y desde entonces estoy trabajando de freelance y no me puedo quejar.

2. Tu principal fuente de inspiración es:

Primero fué un colega en méxico quien me inspiró para hacer lo que hago ahora, David Valdez un infografista de los primeros y de lo mejor que hay en México.
Ahora lo es mi marido Fernando Serrano que es un diseñador admirable, para mi es un ejemplo no solo porque sea bueno, sino porque es de las pocas personas que conozco entregadas totalmente a su trabajo porque le gusta lo que hace y pone auténtica pasión en cada trabajo por mínimo que sea.

3. Qué prefieres a la hora de diseñar: para web o para papel? ¿por qué?

Aunque creo que utilizo más Photoshop a la hora de trabajar, no tengo una preferencia clara en el diseño. Aplico generalmente todos los programas que controlo en todos los procesos ya sea web o impresión, Photoshop, Illustrator, InDesign, Flash.

4. Tus 5 webs favoritas o que más visitas

Domestika (la mejor herramienta para los diseñadores en España hoy en dia)
blogvecindad (interesante blog de diseño de mis compatriotas)
pixel2life (para seguir aprendiendo)
dafont (creatividad tipográfica ante todo)
Stock ExChange (free photostock)

5. Las 3 tipografias que más te gusten o que más usas (gratuitas o no, da igual).

Helvetica family (super fan)
Swiss family
Walkway family
Chalet family

6. El proceso creativo. ¿Tienes un proceso establecido a la hora de afrontar un proyecto? Explica brevemente cúal es ese proceso.

Hay clientes que tienen claro lo que quieren por eso es mejor primero que nada preguntarles a ellos como ven el producto final y si tienen claro lo que quieren. Muchas veces tienen la idea en la cabeza pero simplemente no saben plasmarla. Esos son los trabajos más fáciles por que aunque a ti no te guste mucho el resultado final el trabajo es del cliente y tu estás para complacerlo en todos sus caprichos.

De todas formas como no es lo habitual, el proceso sería:

1. Una breve retroalimentación de información para presupuestar.
2. Selección de procesos a utilizar, (foto – diseño – 3d – web – video) se pueden utilizar varios procesos a lo largo de todo el trabajo, esto sirve también para tener claro el presupuesto que vas a pasar.
3. Investigación a fondo sobre el producto que vas a vender, depende del producto (por ejemplo, el cartel de un concierto, la portada de un libro, el dossier de una empresa, la carta de un restaurante o una invitación de boda, una web, etc). Cada uno es completamente distinto entre si pero hay que saber, el target al que va dirigido, autor, fechas, giro, saber si existen otras ediciones anteriores, etc).
4. La ejecución depende de los procesos que sean.
5. Presentar visuales de este paso depende lo rápido o lento que será el final, hay que intentar en la medida de lo posible que no existan cambios escenciales (eso es un trabajo ideal), que impacte el trabajo a la primera y que no tenga errores.
6. Correcciones, la mayoriade las veces son inevitables.
7. Entrega.

7. ¿Qué te ha aportado tu etapa de fotógrafa ahora que te dedicas al diseño?

Puedo desarrollar más una idea si cuento con ese proceso creativo y me aporta sobre todo tiempo, si tengo claro lo que quiero hacer intento hacerlo yo misma ganando tiempo y a la vez dinero por que es un proceso que no tengo que subcontratar.

8. ¿Mejor como freelance o trabajando para alguna empresa o agencia? ¿por qué?

Verás, llevo unos 5 meses totalmente de freelance y me siento mejor como freelance en el momento de mi vida en el que estoy, tanto a nivel personal como profesional. La variedad y la libertad de gestión de un trabajo controlando integramente tú mismo todos los procesos y tu tiempo, no tiene precio, además de que precisamente ahora mis prioridades tienen mas tintes personales que profesionales momentaneamente ya que un hijo conlleva mucha responsabiliad y atención.

9. ¿Cúales son tus proyectos a medio-largo plazo?

El proyecto corto-medio plazo que tengo es un proyecto conjunto con otros 2 colaboradores, para formar una pequeña sociedad en donde cada unos es especialista en algo pero entre todos tenemos un abanico amplio de posibilidades para ejecutar cualquier trabajo ya sea conjunto o individual y al mismo tiempo buscar proyectos más ambiciosos.

Tarjetones para viaje

Diego González Villarejo — Wed, 25 Feb 2009 07:34:36 +0000

Hoy os presento mi último encargo. Mi cliente va a llevar a sus clientes a un seminario. Pero esta vez el seminario será en un sitio especial. Por eso más que mostrar el destino se requeria que el cliente lo descubriese. Creamos 8 tarjetones, cada uno con un texto alusivo al destino y con una de las letras que componen el nombre de la ciudad. Cuando ordenabas los 8 tarjetones, descubrias el destino. Un juego fácil pero que logra la implicación del cliente:

Para el diseño utilzé un fondo con un motivo que recordase a lo árabe, así como la tipografia. Las fotos empleadas reflejan bien el paisaje de Estambul dónde se mezcla lo oriental y lo occidental:

Tutorial: Textos que se adaptan a formas en Photoshop

Diego González Villarejo — Mon, 23 Feb 2009 07:29:13 +0000

Photoshop evidentemente no es un programa pensado para maquetar textos (para eso tenemos InDesign o Quark), pero tiene algunas funciones con los textos que son poco conocidas. Con este pequeño tutorial de hoy vamos a aprender a utilizar los textos que se adaptar a formas. Primero un texto sobre un trazado, y luego un texto dentro de una forma. Fácil y muy util.

Para empezar con estos tutoriales son elementales unas nociones básicas sobre los trazados en Photoshop, sobre todo para exprimirlos bien, aunque en sí el tutorial es muy sencillo. El truco para saber si lo estamos haciendo bien reside en fijarse en la formita del cursor. En la imagen inferior el cursor de la izquierda es para un texto sobre un trazado y el de la derecha para un texto dentro de un trazado.

Texto sobre un trazado

Creamos un lienzo, le damos un fondo (en este caso un degradado radial de #1e4309 a #0e2402).

Cogemos la herramienta pluma y hacemos un trazado con la forma que gustemos, es importante que en modo de edición esté seleccionado trazados.

Con nuestro trazado ya dibujado cogemos la herramienta texto, le damos la propiedades que estimamos oportunas y nos ponemos encima del trazado. El cursor debe coger esta forma.

Muy bien, ahora ya solo tenemos que escribir el texto que deseamos.

Fácil, ¿verdad? Para aprender a manejar bien este sistema lo mejor es practicar. La parte del trazado dónde pinches con la herramienta de texto será el sitio dónde empezará el texto. Un consejo con la herramienta de selcción directa (el cursor blanco) podemo tocar las curvas del trazado y el punto dónde empieza el texto a posteriori.

Texto dentro de trazado

Creamos un lienzo, le damos un fondo (en este caso un degradado de #65d4e1 a #34a1ae).

Para este caso vamos a utilizar un círculo y el texto de dentro se adaptará a el. Cogemos la herramienta elipse y hacemos una elpise a nuestro gusto, es importante que en modo de edición esté seleccionado trazados. En este caso vamos a dejar pulsada la tecla Shift para que nos salga un círculo perfecto.

Con nuestro círuclo ya dibujado cogemos la herramienta texto, le damos la propiedades que estimamos oportunas y nos ponemos dentro del mismo. El cursor debe coger esta forma.

Ya sólo queda poner el texto que quermos, y si nos apetece mejorarlo un poquito:

Y ahora ya solo queda prácticar y probar, ¡las posibilidades son infinitas!

Folletos PremiumClean

Diego González Villarejo — Fri, 20 Feb 2009 15:37:16 +0000

¡Un nuevo encargo de PremiumClean! Esta vez eran unos folletos para dar a conocer a la empresa. Conceptualmente el proyecto estaba muy claro desde el principio así trabajamos mucho en el aspecto visual del mismo. Un diseño elegante y muy cuidado y unos materiales a la altura de las expectativas

Las fotos que se han utilizado en el folleto han sido realizadas por Santiago Bernabé (de Mind Cookin). La verdad es que sin ellas no habria sido posible realizar estos magníficos folletos.

Hoy diseña: Santiago Bernabé de Mind Cookin

Diego González Villarejo — Mon, 16 Feb 2009 20:22:42 +0000

Siempre es un placer charlar con alguien familiar y cercano. 5 años estudiando en la misma universidad dan para conocer a alguien bien, aunque algunos tipos son siempre una caja de sorpresas. Así es Santi Bernabé, un diseñador en ciernes, con muchas ganas de trabajar, un estilo propio (que es mucho), y con una sonrisa y una idea original siempre al acecho. Ahora mismo Santi trabaja en su proyecto personal: Mind Cookin. Pasaros por su portfolio y su blog, merecen la pena.

1. Hazme un breve resumen de tu carrera, para empezar por ahí.

Bien, pues todo empezó cuando yo tenía 15 años y mi padre me prestó mi primera cámara de fotos Reflex (en realidad siempre ha habido una, dos o tres reflex en mi casa) y me puse a tirar fotos de cualquier cosa. La fotografía ha sido siempre para mí mi principal medio de expresión, una manera como cualquier otra de desintoxicarme de la rutina diaria. El diseño siempre me ha interesado, pero he de reconocer que hasta que un amigo me dijo que estaba estudiando diseño yo no tenía ni idea de que eso se pudiera estudiar. Maldita ignorancia. Tras darle muchas vueltas y tras haber decidido pasar mi etapa como fotógrafo (un tanto fugaz) y como operador de cámara en la TV (no ha habido trabajo con mejores compañeros, más tranquilo y mejor pagado, pero aún así…) me puse a estudiar diseño. Eso pasó hace año y medio, y de ahí hasta hoy.

2. Tu principal fuente de inspiración es:

No sé si sonará un poco pomposo, pero creo que es la realidad. Me gusta mirarlo todo, carteles, revistas, anuncios, personas, perros, edificios, niños, juguetes… Cualquier cosa tiene que ser capaz de transmitirte algo per se, sólo tienes que ser capaz de verlo en ese momento.

3. ¿Qué prefieres a la hora de diseñar: para web o para papel? ¿por qué?

La web sin ninguna duda. En el papel dependes tanto del impresor que a veces me da un poco de rabia. La web es más dinámica y en ella dependes más de ti mismo, aunque he de decir que no hay mayor placer que ver tu diseño bien impreso y tenerlo en tus manos.

4. Alguno de los diseñadores que más te gusten

Dentro de mi humilde ignorancia, quizá uno de los que más me han inspirado es Alex Trochut, el genio de la tipografía. Por otro lado hay un estudio también español que realmente me flipa: LSD Studio y un estudio de motion graphics que haga lo que haga yo lo estaré alabando: Blind. Por lo demás valoro muchísimo todo el trabajo de los grandes y pequeños diseñadores y artistas en general, ¡siempre hay algo que aprender de ellos!

5. Tus 5 webs favoritas o que más visitas

Sin duda, Smashing Magazine con una ingente variedad de contenido de grandísima calidad. Otra maravilla es Psd Tuts algo más que unos simples tutoriales: ESO es saber explicar. Otra página que con cada tutorial que termino tengo cinco más que quiero empezar. La biblia de las biblias del motion graphic no podía faltar: Motionographer en realidad no la visito mucho, porque siempre que entro me meto a “cream” y me pongo a cotillear entre los estudios de diseño en motion que aparecen listados. Tampoco podía faltar Domestika en el listado de clásicos. Por último una página que nunca dejará de sorprenderme es Flickr, se respira una frescura amateur y del “hazlo tú mismo” americano que se sale. Me encanta darle a explorar y ver qué es lo que sale…

6. Las 3 tipografias que más te gusten o que más usas:

Quizá la Garamond, Futura Lt y la Geo Sans light (aunque esta última tiene un pequeño problema de tracking)

7. El proceso creativo. ¿Tienes un método establecido a la hora de afrontar un proyecto?

Mi método es bien sencillo: agarro un lápiz y mi cuaderno de borradores, cojo todas las revistas que encuentre y los tres o cuatro libros de diseño que más me gustan, me abro una lata de cerveza-Cocacola-vasodeagua-etc y apelo a la Virgen de los Desamparados para que haga llegar a mí la inspiración. Una vez que ya he garabateado lo suficiente tiro el cuaderno en cualquier lado y me pongo a divagar por los maravillosos mundos de la creación, hasta que encuentro alguna idea.

La verdad es que está pareciendo una estupidez, ¿no?, pero en realidad es un momento muy crítico para mí. No tengo ningún método, simplemente me dejo llevar por mi lápiz y mi inspiración en el momento, pero desde que empiezo a crear una idea hasta que esa idea se plasma en algo concreto (ya sea el papel o la pantalla) no dejo de darle vueltas, ni siquiera cuando estoy medio dormido. En realidad la creación es un proceso arduo y complicado, más de lo que la gente cree. Ahora, tampoco se les puede culpar porque casi siempre se describe el proceso creativo como lo he descrito yo en el primer párrafo, sin hacer el más mínimo hincapié en los múltiples quebraderos de cabeza, depresiones, obsesiones, frustraciones y lamentos que aparecen y desaparecen a lo largo de todo el proceso. Yo siempre vuelvo atrás en mis proyectos, y compruebo una y otra vez la idea inicial, y es un proceso que puede llegar a ser realmente tedioso. Eso sí, cuando consigues al fin encontrar lo que buscas es como si hubieras escalado la cima del Everest, batido el record del mundo de 100m lisos y descubierto una nueva forma de vida en Marte, ¡¡todo a la vez y en cuestión de segundos!! Es sin duda una de las sensaciones más cojonudas que todos hemos tenido.

8. ¿Qué te ha aportado tu etapa de fotógrafo ahora que te dedicas al diseño?

Creo que lo más importante ha sido la conciencia de la responsabilidad que existe en toda creación (concepto que surgió en mi mente con la fantástica escritora Susan Sontag en su libro “Sobre la fotografía” cuando hablaba de la también fantástica fotógrafa Diane Arbus). Cuando voy a fotografiar a una persona, y más si esa persona es alguien conocido, lo que menos me interesa es la fotografía que voy a tomar. Es la persona y su representación lo que me preocupa. Siento una fuerte responsabilidad al hacer fotos a la gente pues creo en parte lo que los antiguos pensaban: que la fotografía se lleva un trocito del alma del fotografiado.

Con esto quiero decir que todo lo que se crea en este mundo petado de objetos y representaciones, de diseños y fotografías, tiene que ser para algo, decir algo, transmitir algo. Ya que no puedo hacer puentes o industrias que den trabajo al tercer mundo, quiero ser alguien entero y que mis creaciones sean algo en sí mismas también. En fin, qué difícil de explicar es todo esto…

9. ¿Mejor como freelance o trabajando para alguna empresa o agencia? ¿por qué?

Quisiera empezar aprendiendo en una agencia y luego trabajando como freelance. De todos modos, son los proyectos lo que más me motiva, ser asalariado o freelance ahora mismo no me preocupa.

10. ¿Cuáles son tus proyectos a medio-largo plazo?

Aprender, aprender y aprender. Y encontrar un buen trabajo tampoco estaría mal

Wallpaper Tipográfico II

Diego González Villarejo — Fri, 13 Feb 2009 07:03:54 +0000

Siguiendo con nuestros fondos de escritorio hoy os presento el segundo de la serie tipográfica. Como ya habiamos comentado estos wallpapers utilizan tipografías gratutias. En este caso la elegida es Existence Light. Una tipografía sin serifa, muy fina y elegante, y como siempre gratis. La fotografía es el skyline de Madrid que se ve desde mi casa. Disfrutadlo:

Este fondo de escritorio está disponible en estas resoluciones. Como siempre si quereis cualquier otro tamaño dejad un comentario y lo antes posible lo tendreis aquí mismo.

He perdido la inspiración. ¿Dónde la habré dejado?

Diego González Villarejo — Wed, 11 Feb 2009 07:35:46 +0000

Cuando empiezas un proyecto nuevo y te plantas ante el lienzo vacio del photoshop puede entrar vertigo. El diseñador no se puede permitir perder la inspiración, cada mañana al ponerse al trabajar tiene que venir. Normalmente un diseñador no puede esperar varios días a que le venga la inspiración. Pero esto no implica que haya días en los que no estemos inspirados, para esos días grises, de búsqueda de inspiración internet es un gran aliado, por el potencial de búsqueda que tiene y el fácil y rápido acceso a la información.

A continuación os presento mis 55 sitios favoritos dónde buscar la inspiración perdida:

Campaña de nuevo producto

Diego González Villarejo — Mon, 09 Feb 2009 07:32:46 +0000

Para un diseñador siempre agradable encontrarse con un proyecto grande. Muchas veces el interés de un proyecto viene determinado por la libertad que te den. Si un proyecto es pequeño y no te dan libertad, al final tienes la sensación de que el trabajo no es tuyo (vamos que no lo sientes como una obra tuya, aunque hayas empleado unas cuantas horas en él). Pero si el proyecto aunque no tenga mucha libertad es un proyecto más grande y con piezas variadas, siempre hay más espacio para introducir detalles propios o para experimentar.

Hoy os presento un proyecto de una envergadura “mediana”. La libertad era más bien escasa, pero al tener varias piezas siempre te puedes explayar algo más.

Esta campaña que os presento hoy se compone de 4 piezas básicas. Un folleto con la descripción técnica del producto, un folleto más pequeño y directo, una hoja resumen de todas las nuevas características y un par de cartas para informar de la novedad.

El folleto ténico tiene un tamaño cerrado DIN A4. Se maqueta en horizontal y debian primar las imágenes y los textos grandes.

Las cartas y las hojas de resumen llevan una maquetación más básica. La premisa era mantener una línea clara y limpia, jugando con los blanco, azules y negros.

Por último os muestro el folleto pequeño. Un tamaño mucho más pequeño que su hermano mayor y plegado en ventana dos veces.

Tutorial: Cómo crear formularios en pdf

Diego González Villarejo — Fri, 06 Feb 2009 18:19:36 +0000

Más de una vez hemos recibido en nuestro correo (o nos hemos descargado) un pdf sobre el que se puede rellenar (y que normalmente se devuelve relleno por e-mail). Estos formularios en pdf son muy comunes en las administraciones públicas, pero ¿cómo se hacen? ¿qué software necesito? Tranquilo que aquí están todas las respuestas:

Lo primero que necesitamos es un documento en pdf. En principio cualquiera vale, así que vamos a utilizar como plantilla el diseño de unas facturas que realizé para un cliente (evidentemente elimino su logo y todas las referencias hacia ellos). Prueba para formularios en pdf.

Antes de descargarlo veamos que software necesitamos. En primer lugar necesitamos una versión Pro del Acrobat de Adobe, y el Adobe Designer (trabajaremos sobre la versión 7.0). En la nueva versión del Acrobat Pro el Designer viene integrado lo que facilita bastante las cosas. En primer lugar abrimos nuestro pdf con el Designer. Aparecerá la siguente ventana de importación (simplemente nos dirá la ruta de nuestro archivo):

Hacemos click en “Siguiente” y nos aparece las opciones de importación.Marcamos “Mantener aspecto” para que no desmaquete nuestro pdf.:

Otra vez hacemos click en “Siguiente” para proseguir. A continuación elegimos el método de devolución, que en este caso va a ser “Rellenar y enviar/imprimir”.

De nuevo”Siguente” y ahora se nos presenta un texto con una caja dónde debemos rellenar el correo electrónico al que queramos que nos devuelvan el pdf relleno. Hacemos click en “Finalizar”

Muy bien, en nuestra pantalla se muestra nuestro pdf con un par de botones arriba a la derecha: “Imprimir formulario” y “Enviar por correo electrónico”. Por estética los colocamos en la parte inferior de nuestro formulario.

La interfaz del Designer es bastante sencilla. En el centro tenemos dos pestañas una con las “Páginas de trabajo” y otra con la “Vista previa de pdf”. Es fácil saber para que son. A la derecha arriba tenemos la biblioteca con los elementos que podemos incluir en nuestro pdf. En el medio vemos las propiedades del objeto seleccionado y abajo información útil. Para empezar de una manera sencilla, vamos a crear un campo de texto debajo de “Datos del cliente”:

Es posible que tras dibujar el cuadro de texto aparezcan las palabras “Campo de texto” a la izquierda. En ese caso las seleccionamos, borramos y reajustamos el tamaño de nuestro cuadro al deseado. Lo seleccionamos y en la ventana objeto en el apartado objeto seleccionamos “Ninguno”. Así le quitamos los bordes a nuestro campo.

Este es un buen momento para ir a “Vista previa” y comprobar que todo funciona. ¡Perfecto!. Si queremos en la parte superior hay unas herramientas de texto, para decidir el tipo de letra, la alineación, el tamaño, etc.

Además de campos de texto se pueden insertar Campos númericos, de contraseña, listas desplegables (para seleccionar) o una fecha. Esto es lo que vamos a hacer ahora. Seleccionamos de la biblioteca “Campo de fecha y hora”, y creamos un cuadro como hemos hecho en el del texto. Igualmente en el menu de objeto > Aspecto le damos a “Ninguno”. Es el momento otra vez de irnos a la Vita Previa y ver qué pasa si seleccionamos el campo de la fecha:

Al hacer click aparece un cuadro desplegable con un calendario. La fecha seleccionada aparecerá en vuestra formulario. Podemos elegir el formato de la fecha, e incluso fijarla para el día que se abra el pdf o incluir también la hora. Todos estos parámetros se modifican en la ventana objeto mientras tenemos seleccionado nuestro campo de fecha. Lo mejor es que probeis, hay una gran cantidad de posibilidades.

Una vez que ya está hecho esto solo tenemos que guardar nuestro formulario (se guardará como un archivo pdf). Las posibilidades de los formularios son muy ámplias. Cuando lo envies el destinatario podrá rellenarlo y imprimirlo o reenviarlo. Aquí os dejo una muestra de un par de cosas más que he hecho con el mio. Formulario terminado.

Un usuario que tenga el Acrobat Reader en principio no podrá guardar una copia de este formulario. Si quereis que el destinatario pueda guardar un copia en pdf de este formulario necesitais la versión 8.0 del Acrobat Pro. Una vez abierto ve a “Avanzadas > Activar derechos de usuario en Adobe Reader”. Activa y guarda.
¡Hecho! Como siempre si teneis cualquier duda o alguna sugerencia, por favor, dejad un comentario.

Tutorial de líneas brillantes en Photoshop

Diego González Villarejo — Wed, 04 Feb 2009 21:24:54 +0000

Photoshop es una herramienta excelente para retocar fotografías, pero si es tan famoso es por que va mucho más alla. Photoshop tiene una gran cantidad de herramientas y posibilidades para crear, que si se saben explotar otorgan al diseñador unas posibilidades casi infinitas. Hoy vamos con un pequeño tutorial que nos ayudará a utilizar los efectos de capa, los pinceles y la pluma. Son necesario unos conocimientos mínimos de photoshop para llevar a cabo este sencillo tutorial:

Este es el aspecto final que vamos a obtener (haz click sobre la imágen para verla a tamaño real)

En primer lugar creamos un lienzo vacio de 1200×900 pixeles. Seleccionamos de color frontal el #102b43 y de color de fondo #041a22. Elegimos un degradado radial con estos colores y de arriba a la izquierda a abajo a la derecha:

A continuación seleccionamos la herramienta pluma, marcamos la opción trazados y nos vamos a la pestaña de trazados (por defecto con las pestañas de capas y canales)

Acto seguido dibujamos una curva con la pluma al gusto.

Es recomendable guardar el trazado que hemos creado, aunque no imprescindible. Se guardan en la opción del mismo nombre que aparece en el menú emergente de la pestaña trazados. Elegimos de color de frente el blanco. Vamos al pincel y en sus opciones elegimos uno de 7px de diámetro y 100% de dureza (podeis jugar con estos parámetros para obtener distintos resultados, las posibilidades son infinitas)

A continuación creamos una nueva capa vacia y en trazados en el menú emergente elegimos contornear trazado. En herramienta elgimos pincel y marcamos simular presión.

Y… ¡volia! El efecto ya está creado. Para verlo bien, deselecciona el trazado. Pero aún podemos mejorarlo más, vamos a ver algunos efectos de capa. En primer lugar una “Superposición de degradado”, en este caso de blanco a #b2e4f6. Y luego un “Resplandor exterior” con los parámetros que veis más abajo y de color #77d4e8.

Ahora sí! Este es el resultado final que obtenemos:

Si queremos mejorarlo un poco más y así de paso seguir practicando, creamos otro trazado siguiendo las indicaciones que he dado antes (si hemos guardado el anterior trazado no se perderá al hacer uno nuevo), volvemos a crear una capa nueva vacia y en las propiedades del pincel ponemos los siguientes parámetros: Diámetro: 7px – Dureza 0% - Espaciado 70% – Variación del tamaño 100% – Dispersión 700% – y marcamos “Suavizar”

Repetimos el proceso que llevamos a cabo antes y seleccionamos el trazado y contornear trazado. Las opciones como antes “Pincel” y “Simular presión”. A la nueva capa le duplicamos los efectos de la anterior con lo que obtenemos:

Con práctica y paciencia podemos obtener resultados realmente espectaculares. Si teneis cualquier duda, o quereis aportar cualquier cosa, por favor dejar un comentario.

Papaleria Premium Clean

Diego González Villarejo — Mon, 02 Feb 2009 07:29:21 +0000

Hace unos días os presenté el logotipo de PremiumClean. Hoy os dejo las fotos de la papeleria que he creado para ellos.

La papelería que se le realizó consistió en: hojas para cartas, hojas para facturas, sobres (tamaño americano con ventana) y las tarjetas de visita.

Las hojas para cartas y las facturas ser realizaron en tamaño A4 con un papel estucado mate de 120gr. Las dos tienen la misma base pero en las facturas además he creado la base estándar para rellenar solo los datos que vayan cambiando en las facturas. Una muestra de ambas:

Los sobres, son en tamaño americano (para introducir hojas en tamaño 21×10, como una hoja A4 doblada dos veces) y con ventana para poner directamente la dirección en la carta. Los sobres son muy limpios y elegantes, siguiendo la línea de comunicación que hemos creado para la compañia:

En las tarjetas de visita se realizaron dos tipos. El primer tipo es la tarjeta genérica de la compañia, que lleva en la parte posterior una mapa explicativo de cómo llegar al local. El otro tipo de tarjeta, que es para los directores de la compañia lleva en la parte trasera un fondo plano del color corporativo y el símbolo del logo repetido, de una manera elegante y distintiva. Las tarjetas de visita se hicieron en papel estucado de 300gr y plástificado mate por ambas caras. Unas cuantas fotos de muestra:

Wallpaper Tipográfico I

Diego González Villarejo — Fri, 30 Jan 2009 10:54:02 +0000

Hoy empezamos una nueva “sección”. Esta es la primera entrega de una serie de fondos de escritorio basados en alguna de mis tipografías gratutitas favoritas. La primera tipografía usada es la Museo de Jos Buivenga, para crear “La delgada línea blanca”. Para descargaros la tipografía debeis daros de alta aunque es completamente gratis en sus versiones 300, 500 y 700. Poco a poco iré subiendo más fondos. Espero que os gusten:

Está disponible en las siguientes resoluciones:

Y como siempre sabeis que si necesitais cualquier otra resolución solo teneis que pedirla y lo antes posible la subiré.

Catálogo General de Lentes Oftálmicas

Diego González Villarejo — Wed, 28 Jan 2009 16:20:55 +0000

Ahora que ya entramos en 2009, os presento la nueva entrega de un catálogo que hago cada año para una multinacional del sector de la óptica. Es un catálogo muy ámplio de precios y productos, con una gran cantidad de información técnica.

El catálogo va en una carpeta con anillas para facilitar la entrada de nuevas hojas (nuevos productos lanzados a mitad de año). Tiene un cuerpo principal dónde va la información de precios y en un folleto aparte grapado con “grapa omega” las referencias técnicas de todos los productos. La grapa omega dispone en el exterior de una abertura para poder insterla dentro de una carpeta de anillas.

Un par de folletos

Diego González Villarejo — Mon, 26 Jan 2009 15:25:54 +0000

El folleto es uno de los encargos más habituales del diseñador, y dependiendo del cliente puede ser uno de los más satisfactorios. En la elaboración de un folleto se aprecia bien el gusto tipográfico, fotográfico, del uso del color y en cuanto a composición que tiene un diseñador. A continuación os presento los dos últimos folletos que he creado. Por deseo expreso del cliente sus logos y nombres aparecen eliminados o difuminados, no es el resultado final lo que os presento pero es muy parecido:

Uno de los dos folletos tiene como leiv motiv el uso de pasiajes y otro está orientado a la cocina. De este último precisamente ya hable en otro post en el que deje incluso la retícula que use para el folleto. Os dejo unas fotografías que he hecho de los mismos:

Wallpaper: The Golden Line

Diego González Villarejo — Fri, 23 Jan 2009 07:54:05 +0000

Un nuevo Wallpaper para descargar. The Golden Line (en grande es todavia más bonito que en la miniatura que veis debajo):

Disponemos de 4 resoluciones para descargar, pero si quereis alguna resolución distinta dejad un comentario más abajo y en breve estará disponible.

Rediseño Logo Marpe Vision

Diego González Villarejo — Thu, 22 Jan 2009 07:33:44 +0000

El rediseño de un logotipo suele implicar un trabajo ante todo conceptual. Aunque de vez en cuando el cliente tiene muy claro lo que quiere. Así fue con este cliente.

En este caso las pautas a seguir eran muy claras. Colores similares, pero más claros, hay que mantener la forma del ojo, pero con trazos más limpios. La idea principal que habia que transmitir era: Salud. Dado que el producto que venden en en su mayoria sanitario, debiamos acercar la imagen anterior hacia una imagen que transmitiese limpieza, salud, solidez, seguridad y “modernidad” (¿por qué le ha dado a todo el mundo por tener un logo moderno). El truco para que un logo “moderno” entre por los ojos al cliente es pasarle una aplicación del logotipo con un reflejo al más puro estilo web 2.0. No soy partidario de esos reflejos y me cuido mucho de emplearlos, pero a veces no queda otra opción.

Muy bien, a continuación veremos el logotipo incial:

Y ahora el logo con los cambios que efectuamos. Colores más claros, estilizamos la tipografía y el ojo, además pasamos todo el nombre a una sola línea para poder implementarlo más facilmente. El resultado:

Show Room Transitions

Diego González Villarejo — Wed, 21 Jan 2009 07:19:52 +0000

Bueno pues para empezar hoy os voy a presentar una campaña que ya salió hace unos meses, pero hoy revisándola me ha gustado más de lo que recordaba.

Esta campaña llevaba un tarjeton para buzonear la zona y dar a conocer el ShowRoom que se iba a desarrollar. Además en la tienda (que es donde se llevará a cabo la acción) dejaremos unos folletos explicativos y recordatorios sobre la charla a la que han asistido. Además se decorará la tienda con unos carteles aéreos. A continuación las piezas que se desarrollaron:

Y ahora los carteles, con las fechas y horas de cada sesión:

¿La tipografía utilizada? Una que me encanta: Chalet.

Propuesta para la Web de un músico

Diego González Villarejo — Tue, 20 Jan 2009 08:38:55 +0000

Que pena me dió que finalmente este proyecto no saliese adelante. El cliente me dijo que estaba encantado con el diseño, pero hubo algunos problemillas con el presupuesto y se echó atras:

La web estaba pensada para utilizarse como un blog, pero como nunca se llegó a utilizar no pasó del archivo de photoshop. Tengo en mente empezar a trabajar a pasar este diseño a un tema de WordPress, pero ahora mismo no tengo demasido tiempo. De todos modos si alguien quiere el psd para trabajar sobre esa base puede descargarselo desde aquí: psd de web para músico.

Cool Poster – Fondo a rayas en Photoshop

Diego González Villarejo — Sun, 18 Jan 2009 17:59:47 +0000

Os presento a continuación uno de los últimos encargos que he recibido.

Un cartel para una promoción que va a poner en marcha una óptica. El briefing fué sencillo: “Hazme algo cool: moderno y elegante”. No es muy agradable que te pidan algo cool y moderno. Lo que es moderno deja de serlo en dos días. Elegante es un concepto más fácil de plasmar.A continuación os dejo el visual del póster entero para que os deleiteis:

Además voy a aprovechar la situación para mostraros un pequeño tutorial de como hacer el fondo rayado en photoshop. El efecto que queremos conseguir es el que vemos en el detalle de la imagen de abajo. Probad y modificarlo para comprobar todas sus posibilidades. En primer lugar crearemos un nuevo documento vacio de 40×40 pixeles:

A continuación con la herramienta rectángulo creamos un rectángulo y lo giramos 45º. Acto seguido hacemos dos copias y colocamos el centro de los mismo sobre las esquinas superior izquierda e inferior derecha. El color del rectángulo dependerá de lo que estemos buscando, prueba distintas opciones pero un gris medio da un ámplio abanico de posibilidades.

El truco para que queden centrados los rectángulos es moverlos con Edición > Transformar activado (Ctrl+T). Una vez hecho esto ya solo tenemos que irnos a Edición > Definir Motivo y Darle un nombre. Una vez hecho ya solo tenemos que ir al documento en el que queremos utilizar el motivo rayado y en estilo de capa elegir Superposición de Motivo. Luego podemos tocar la escala y el modo de fusión para adaptarlo a nuestras necesidades.

¡Hecho!

Logo Premium Clean

Diego González Villarejo — Thu, 15 Jan 2009 11:30:20 +0000

Hoy os presento el último logotipo de mi creación que ha salido a la luz:

PremiumClean. La empresa se dedica al lavado manual de automóviles, con una tecnología ecólogica y moderna, cuidando al máximo los detalles para un acabado exigente de verdad. Todo eso tenia que transmitir el logo. Busqué una tipografia elegante de la que partir (aunque finalmente fueron dos) y seleccioné un par de colores que pudiesen transmitir limpieza y que tuviesen una relación muy directa con el agua.

Pues bien este es el logotipo:

Como se puede apreciar el símbolo que acompaña al logotipo son tres gotas de agua idénticas, una por cada uno de los tres pilares de PremiumClean: Limpieza, Perfección y Ecología. Para la tipografía me decante por una primera tipografía con serifa muy elegante (“Premium”) y por una tipo sin serifa de palo fino (Clean) para crear el juego del contraste Modifiqué las terminaciones inferiores para que asentasen sobre una misma línea. Además retoque ciertas partes para hacer el logo lo más sencillo y fácil de recordar que fuese posible:

Por ejemplo: La cola de la “r” está retocada para que haga la misma forma que la terminación de la “P”. El punto de la “i” se sustituye por una de las gotas, la “m” se adapta a la forma de la “C”, etc. Muchos detalles para dotar de profundidad a un logo simple, conciso, con fuerza y que busca una transmisión rápida de las ideas esenciales de la compañia.

Retícula de folleto 21×21

Diego González Villarejo — Tue, 13 Jan 2009 09:32:03 +0000

Pues para empezar bien vamos a dejaros en exclusiva y gratis por completo una plantilla de maquetación para InDesign.

El tamaño de la página es de 21x21cm. Cuenta con unos márgenes idénticos a cada lado de 15mm y la página izquierda y derecha son iguales. Es una maqueta pensada para contenidos muy divididos, datos concisos y sin textos excesivamente largos. Originalmente la maqueta también estaba pensada para que la mitad de folleto tuviese una imagen grande en la página de la izquierda y el texto explicativo en la derecha. La paginación va cajeada en la parte superior, y seria muy interesante colocar el logo al lado de la páginación. La parte superior queda libre para introducir un títular o para centrar más la información en la zona inferior. A continuación os dejo un par de ejemplos de mi folleto con esta retícula:

Sois libres de usar esta retícula para cualquier proyecto, tanto comercial como personal. Podeis modificarlo sin problema alguno y no es necesaria ninguna mención al autor de la retícula. Me gustaria que si utilizais esta retícula tengais la amabilidad de enviarme un imagen con el folleto maquetado para incluir en este mismo post. Pondré la imagen y un link hacia vuestra web. (No es necesario que lo envieis, solo es para enriquecer el trabajo que hagamos).

Retícula de folleto 21×21 (para InDesign CS3, si la necesitas en otra versión, por favor contacta conmigo: diego.gonzalez@disenion.com o deja una comentario en este post)

Mind Cookin’

Diego González Villarejo — Mon, 12 Jan 2009 10:05:14 +0000

Hoy os presentamos a un gran diseñador en ciernes: Mind Cookin (Santiago Bernabé Garcia):

Mind Cookin: Cocinando diseños con cabeza

Buen gusto, estilo e ideas fresquitas caracterizan a este diseñador. Echad un vistazo a su portfolio porque merece la pena.

Además es un gran fotógrafo: Álbum fotográfico de Santiago Bernabé Garcia

En breve, ¡más!

¡Nos mudamos!

Diego González Villarejo — Tue, 16 Dec 2008 20:28:02 +0000

Bueno, pues como podeis ver hemos cambiado de blog. He dejado Blogger y me he venido a WordPress. Además ahora el blog estará alojado en mi propio dominio. El otro blog se mantendrá activo para no perder los enlaces ni las imágenes, pero las nuevas entradas estarán aquí.

Os pido un poco de paciencia, ya que estoy en pleno proceso de actualización de la imagen. Así que si el blog está desmaquetado, o hay partes que no se ven, paciencia, en breve estará terminado.

Espero que este nuevo paso me ayude a darle un impulso al blog y así cuidarlo un poco más. En breve tendreis más noticias.

¡Muchas gracias!

Comprar Fíncas Rústicas

Diego González Villarejo — Mon, 21 Apr 2008 07:46:00 +0000

Recien salida del horno. Una web para comprar fincas rústicas. Espero que os guste.

Dark Wallpaper

Diego González Villarejo — Fri, 01 Feb 2008 13:21:00 +0000

Otro Wallpaper, esta vez menos alegre…

1024 x 768
1280 x 1024
1600 x 1200
1900 x 1200

Christmas Wallpaper

Diego González Villarejo — Fri, 07 Dec 2007 14:52:00 +0000

Ahora que se acerca la Navidad, os dejo un fondo de escritorio para amenizar las fiestas!

1024 x 768
1280 x 1024
1600 x 1200
1900 x 1200

animaticaudiovisual

Diego González Villarejo — Tue, 24 Jul 2007 20:18:00 +0000

Hoy os traigo un link a una web de Eventos Tecnicos Audiovisuales que acabo de terminar. Se aceptan opiniones y sugerencias.

Muchas gracias.

Una aburrida tarde de viernes

Diego González Villarejo — Fri, 29 Jun 2007 13:09:00 +0000

Fondo de Escritorio 1600×1200
Fondo de Escritorio 1280×1024
Fondo de Escritorio 1024×768

Imágen de fondo en Flash que ocupa todo el navegador

Diego González Villarejo — Sat, 26 May 2007 15:30:00 +0000

¡Actualizado!

Este post ha sido actualizado y ahora podeis descargaros el .fla y ver el tutorial en movimiento en este otro post.

Muchos habréis visto por ahí webs en flash que utilizan de fondo una imagen que ocupa todo el navegador. A continuación vamos a explicar cómo y además vamos a hacer que esas imágenes cambien de forma aleatoria. Es necesario un conocimiento básico de Action Script para lograr esto. Veamoslo en movimiento:

Flash con Fondo que ocupa todo el navegador y con carga aleatoria de imágenes

Lo primero que necesitamos son las fotos que harán de fondo, tantas como querais, cuantas más haya menos oportunidades de que se repitan. Para este ejemplo he usado 5 por lo que es muy probable que salga la misma dos veces seguidas. Como norma general las imágenes serán cuadradas y tendrán un tamaño de por lo menos 1600×1600 pixels. Comprimidlas en la medida de lo que podáis porque si no os van a salir una imágenes muy pesadas.

Bien pues empezamos. Creamos un nuevo archivo de flash. Con cuatro capas: fondo y AS.

Bien en el primer fotograma en la capa de AS pegamos este código:

Stage.scaleMode = “noscale”;
//———————–
var StageWidth:Number = 762;
var StageHeight:Number = 510;
function escalaFondo()
{
if (Stage.width > Stage.height) {
fondo._width = Stage.width;
fondo._yscale = fondo._xscale;
} else {
fondo._height = Stage.height;
fondo._xscale = fondo._yscale;
}
fondo._x = (StageWidth – fondo._width) / 2;
fondo._y = (StageHeight – fondo._height) / 2;
}
//———————–
Stage.addListener(this);
this.onResize = escalaFondo;
escalaFondo();
//———————–
stop();

Explicación del código:

En primer lugar le decimos al flash que no nuestra página no se reescale para que la foto siempre se vea bien, más grande o más pequeña, pero sin deformarse.

Luego declaramos el tamaño que va a tener la parte en la que vamos a trabajar, en nuestro caso: 762×510 pixels (Este tamaño es el mismo que le daremos a la película en sus propiedades, y por favor ponedle por lo menos 30fps de velocidad para que la animación sea fluida).

A continuación declaramos la función “escalaFondo” y le decimos que si cambia el ancho de la pantalla cambie a su vez la posción de nuestro “Stage” y que si se escala en x tambien se escale en y. Además al final ponemos un stop.

Si nos fijamos en el código aparece varias veces “fondo”. Este es el nombre de instancia que tendremos que darle a nuestro movieclip que va a contener el fondo a pantalla completa que cambia.

Bien creamos un movieclip con nombre de instancia “fondo” y con un tamaño de 1600x1600px (o el tamaño que le demos a nuestras imágenes) y lo alineamos a la esquina superior izquierda de nuestro stage.

Dentro de este movieclip tenemos 4 capas: imagenes, fundir, carga y AS. En la capa de imagenes tenemos un movieclip que solo contiene un borde negro y que mide 1600×1600 pixeles. A este movieclip le daremos de nombre de instancia “imagenes_mc”. Dentro de este movieclip haremos la carga aleatoria de imagenes.

En la capa de fundir tenemos un grafico negro que pasará a transparente para que la animación sea fluida.

En la capa de carga, tenemos una animación de precarga en un movieclip. Utilizad la que más os guste.

Y en la capa de AS pondremos este código:

stop();
imagenes_mc.loadMovie(“fotog0″+(1+random(5))+”.jpg”);
function cargando() {
var total, cargados, t;
total = imagenes_mc.getBytesTotal();
cargados = imagenes_mc.getBytesLoaded();
t = Math.floor((cargados*100)/total);
if (t>=100) {
clearInterval(hiloPrecarga);
play();
}
}
var hiloPrecarga = setInterval(cargando, 1);

Empezamos con un stop para que la animación no avance hasta que este cargada la imagen. Luego con un loadMovie “llenamos” nuestro movieclip imagenes_mc con la imagen aleatoria. Mis archivos de imagenes se llaman fotog01.jpg fotog02jpg… fotog05.jpg. Así que le decimos que carge “fotog0″ + un número aleatorio entre 5 y su extensión (en nuestro caso jpg.) Al random le sumamos 1 porque para flash un número aleatorio de 5 pueden ser: 0, 1, 2, 3 y 4.

Trabajando las distintas capas hacemos una animación fundiendo las capas de fundir y de carga para que nos quede fluido. Además así determinamos la duración que tendrá la animación.

Ahora solo tenemos que publicar nuestro archivo. En las opciones de publicación del html le damos a Dimensiones : Porcentaje; y luego ponemos alto y ancho al 100%. La alineación del flash al centro tanto en vertical como en horizontal.

¡Y ya está! Ahora publicamos y cómo veremos nuestro navegador tiene un pequeño borde. Para eliminarlo abrimos el archivo html que hemos creado con cualquier editor e introducirmos en la cabecera el siguiente código:

body {
margin: 0px;
}
–>

Terminado, disfrutadlo

Fotogaleria

Diego González Villarejo — Sat, 20 Jan 2007 14:46:00 +0000

He colgado de mi web, 19 fotillos que me gustaban. No son muchas, pero tampoco es que sea un buen fotógrafo. Espero opiniones aquí mismo. Muchas gracias

La cultura y el Arte

Diego González Villarejo — Thu, 07 Dec 2006 16:23:00 +0000

Hablando el otro día con un compañero me di cuenta de una cosa, las diferencias que existen en nuestra manera de apreciar el Arte.

Estaba hojeando un libro sobre pintura (ahora mismo no recuerdo el título, pero eso importa poco) y se dirigió a mí:

- ¿Te gusta la pintura?

- Sí, la verdad me gusta el Arte en general.

- Normal, siendo diseñador. A mí también me gusta mucho la pintura, ¿sabes?

- ¿Si? – En ese momento me pare en una página sobre Monet – No sabia que te interesara…

- Sí, pero no me gustan las cosas modernas que exponen ahora. Yo me voy al Prado a ver a los clásicos y me encanta. Pero a mí una línea roja y un cuadrado no me dicen nada, yo creo que es un engaño.

Prefiriendo no comenzar una conversación seria sobre Arte, me limite a decirle: – Ahhh, ya te entiendo.

- Me gustan cosas como lo que estas viendo – se acerca un poco y continua – Monet, o los artistas más clásicos como Goya o Picasso.

Me mordí los labios. Si un tipo me dice que Goya o Picasso son artistas clásicos evidentemente no sabe mucho de pintura. Posiblemente a este tipo no le guste la pintura a él le gustan los cuadros. No tiene ningun interés en la pintura como forma de expresión artística. Por eso sólo le gustan los cuadros figurativos, en los que se pueden ver la habilidad con el pincel del artísta para los ojos más inexpertos; y no le hará falta pararse a pensar ni haberse documentado para entender la obra ante la que se haya.

Esta actitud del “cultureta” es más evidente en otras disciplinas artísticas como la música o el cine. Hay mucha gente que dice que le encanta la música cuando en realidad le gustan las canciones, que menos que saber distinguir los distintos instrumentos para poder decir que te gusta la música. Conozco gente a la que no le gusta la música en inglés porque no entienden lo que dicen, los sentimientos en la música se transmiten en un 15% a través de la letra, el resto es ritmo y sonidos.

Con el cine pasa otro tanto de lo mismo, mucha gente se confiesa amante del cine, cuando en realidad le gustan las películas. El cine es un gran medio de entretenimiento y como tal estará en consonaciancia con la mayor parte de la gente. Si no sabes quien es F.W. Murnau entonces no te gusta el cine, te gustan las películas.

Bueno espero os haya quedado claro la distinción que hago entre una forma de expresión artística (el cine, la música, la pintura…) y sus productos (las películas, las canciones, los cuadros…).

Piensatelo, a ti, ¿qué te gusta en realidad?

Comparativa de precios de carburantes

Diego González Villarejo — Tue, 07 Nov 2006 09:39:00 +0000

En el Ministerio de Industria, Turismo y Comercio tenemos una comparativa de precios de carburantes que puede ser muy útil viendo tal y como están los precios. Seleccionamos el tipo de carburante y luego pinchamos sobre la provincia que deseemos. Una vez allí seleccionamos la población o el código postal, aunque también es posible ver los precios en toda la provincia. Luego simplemente elegimos el orden: alfabetico o por precio. Y ya está. Los precios los actualizan periodicamente. Espero que esta información os sea útil.

Información sobre los precios de los carburantes en las estaciones de servicio

DisenioN.com Por fin actualizada!!!

Diego González Villarejo — Mon, 06 Nov 2006 08:55:00 +0000

Por fin tenemos la actualización de mi Portfolio on-line. Ya estais tardando en visitarlo y en dejar vuestras opiniones por aquí. Estoy abierto a cualquier crítica que sirva para mejorar el sitio.

DisenioN : Diseño Gráfico y Diseño Web

¡Un saludo a todos!

Video-Arte Experimental

Diego González Villarejo — Thu, 02 Nov 2006 11:59:00 +0000

Bueno tras medio mes de asueto, volvemos a la carga. Esta vez con un par de videos. Ambos me traen recuerdos de mis años de universidad. Si alguno de los que ve esto estudio Comunicación Audiovisual en la Universidad Complutense de Madrid y tuvo clase de Realización con Fernando Huertas (ya se que es mucho pedir…) quizás los haya visto ya y además los disfrutará mucho más. En Camarada yo no participé, pero en No le des más Huertas si que intervine como montador y con alguna idea abusurda que otra. Espero que los disfruteis:

Camarada

No le des más Huertas (El corto del Besugo)

Line Rider – ¡Cuidado que es adictivo!

Diego González Villarejo — Mon, 16 Oct 2006 13:51:00 +0000

Line Rider. Más un entretenimiento que un juego, no hay ganadores no hay puntuaciones, solo diversión. Dibuja lineas en caida para mantener a nuestro chico del trineo. Podeis probarlo aquí, pero ya aviso es altamente adictivo:

Line Rider

Y a continuación os muestro algunos videos de gente que es muy buena en esto. Primero probadlo un par de veces y luego echadle un ojillo a los videos, disfrutad:

http://www.youtube.com/watch?v=LeBO8y5nRYU

http://www.youtube.com/watch?v=oH7EwbGDmp0&mode=related&search=

http://www.youtube.com/watch?v=pkUTlMcrGQE&mode=related&search=

http://www.youtube.com/watch?v=kL8o0vD0rwI&mode=related&search=

Y muchos más!! Solo poned Line Rider en YouTube y disfrutad.

Mis tarjetas de visita

Diego González Villarejo — Wed, 11 Oct 2006 13:05:00 +0000

Aquí os dejo las dos opciones que barajo para hacerme las tarjetas de visita:

A parte podeis verlas con más calidad en este enlace.

Gracias por vuestros consejos o votaciones.

Nuevo Campeón de España de PES 5

Diego González Villarejo — Sat, 30 Sep 2006 16:03:00 +0000

Vamos a hacer una exepción en este blog de diseño para hablar de Videojuegos. Particularmente de un torneo de Pro Evolution Soccer 5.

Este fin de semana se ha disputado en el hotel Puerta de América el torneo PES Liga 06 del famoso juego de Konami. Para los no entendidos el Pro5 es el juego más jugado en el mundillo de la Play2 en cuanto a juegos de futbol. Este torneo que se disputaba era por ser el campeón de España de Pro5. Un total de 32 participantes de todos los puntos de Madrid se dieron cita, para medirse por un sistema de liguilla y eliminatorias posteriores para decidir quien es el mejor jugador de España y así representar (junto con el 2º clasificado) a España en el campeonato de Europa que se va a disputar el próximo fin de semana en Dublin. El ganador de este torneo ha sido... mi hermano Pablo González Villarejo.

Podeis leer más información en la página oficial del torneo PESliga y el desarrollo de la competición en la web de la Final de la PESliga. Además tenemos una entrevista que le hizo la famosa revista de videojuego Meristation, pinchando aquí.

Le hicieron una entrevista reporteros de Antena 3 y de Cuatrosfera, el programa de Cuatro. En cuanto disponga de las imágenes las colgaré por aquí.

Enhorabuena campeón!!!!

Lista de libros imprescindibles para el diseñador

Diego González Villarejo — Thu, 28 Sep 2006 15:04:00 +0000

Hoy vamos a presentar un tema que creo que puede ser interesante para todos los diseñadores. Una lista de libros de calidad para el diseñador. Pinchando en el nombre ireis a la ficha del libro en La casa del libro aunque es posible que los encontreis más baratos en otros sitios. A medida que me sea posible iré ampliando esta lista. ¡A leer!

1000 DISEÑOS CON TIPOGRAFIA
de HARVEY, WILSON
EDITORIAL GUSTAVO GILI, S.L.
ISBN: 842522036X

CASCADING STYLE SHEETS
de VV.AA.
ANAYA MULTIMEDIA-ANAYA INTERACTIVA
ISBN: 8441514976

DISEÑAR CON Y SIN RETICULA
de SAMARA, TIMOTHY
EDITORIAL GUSTAVO GILI, S.L.
ISBN: 8425215668

DISEÑO WEB CON FLASH: EDICION 2006 (DISEÑO Y CREATIVIDAD)
de CRUZ HERAS, DANIEL DE LA
ANAYA MULTIMEDIA-ANAYA INTERACTIVA
ISBN: 8441519358

DISEÑAR HOY: TEMAS CONTEMPORANEOS DE DISEÑO GRAFICO
de PELTA, RAQUEL
EDICIONES PAIDOS IBERICA, S.A.
ISBN: 8449315336

DISEÑO CON ESTANDARES WEB
de ZELDMAN, JEFFREY
ANAYA MULTIMEDIA-ANAYA INTERACTIVA
ISBN: 8441516081

EL DISEÑO EN LA PUBLICIDAD: CREAR MENSAJES GRAFICOS CON GRAN IMPACTO VISUAL
de LANDA, ROBIN
ANAYA MULTIMEDIA-ANAYA INTERACTIVA
ISBN: 8441517819

DISEÑO Y COMUNICACION VISUAL
de MUNARI, BRUNO
EDITORIAL GUSTAVO GILI, S.L.
ISBN: 8425212030

EN TORNO A LA TIPOGRAFIA
de FRUTIGER, ADRIAN
EDITORIAL GUSTAVO GILI, S.L.
ISBN: 8425219167

TIPOGRAFIA
de AICHER, OTL
G CAMPGRAFIC
ISBN: 8493344621

TIPOGRAFIA BASICA
de LUIDL, PHILIPP
G CAMPGRAFIC
ISBN: 8493344613

RETICULAS PARA INTERNET Y OTROS SOPORTES DIGITALES
de GÖTZ, VERUSCHKA
INDEX BOOK< br />ISBN: 8489994633

TIPOGRAFIA: FUNCION, FORMA Y DISEÑO (AMPLIADA Y MEJORADA)
de BAINES, PHIL y HASSAM, ANDREW
EDITORIAL GUSTAVO GILI, S.L.
ISBN: 842522067X

TIPOGRAFIA DEL SIGLO XX (3ª ED.)
de BLACKWELL, LEWIS
EDITORIAL GUSTAVO GILI, S.L.
ISBN: 842521839X

Maquetando textos digitales (II)

Diego González Villarejo — Thu, 14 Sep 2006 14:09:00 +0000

Retomamos la maquetación de textos digitales y así volvemos tras este largo descanso efectuado (casi dos semanas). Volvemos con la alineación y los colores.

La alineación

La mayor parte de las veces una decisión sobre como alinearemos un texto (a la izquierda, centrado, a la derecha o justificado) vendrá determinado por una decisión de diseño. Aunque esta decisión normalmente influye también en la facilidad de lectura y el lo agradable que se hace ese texto a la vista.

Cuando maquetamos textos largos elegiremos textos justificados o alineados a la izquierda. Los textos alineados a la izquierda presentan un aspecto irregular en la parte derecha, una sección irregular que puede resultar anti-estetica. El problema de los textos justificados es que el espacio entre palabras, o incluso entre letras, se ve forzado para adaptar la longitud de la línea a un ancho determinado.

Una familia tipográfica es un grupo de tipografías unidas por características similares. Los miembros de una familia (los tipos) se parecen entre si, pero también tienen rasgos própios. Las tipografías de cada familia tienen distintos grosores y anchos. Algunas familias las forman muchos miembros, otras sólo de unos pocos.

En el texto anterior se puede apreciar como los espacios entre las palabras son mayores en el parrafo superior. (Cortesia de unostiposduros una web de referencia que debeis añadir a favoritos todos los amantes de la tipografia). En un libro en el que el tamaño de la tipografia es pequeño esos huecos blancos son menos apreciables y en esos casos se agradece una uniformidad en el ancho de las lineas.

El color

En cuanto al color del texto y aunque parezca muy evidente, es importante buscar un color de tipografia bien contrastado con el fondo. Fondo blanco – Letra negra. Es la referencia que traemos de la producción impresa, ya que el papel es, normalmente blanco.

Fijaos que hablo de contraste y no de colores similares. Para explicar este punto os diré que un texto en color rojo sobre un fondo azul no es legible. Sabemos diferenciar facilemente el rojo y el azul, pero no se contrastan bien. Así que por lo general usaremos un texto con la tipo en blanco o la tipo en negro, dependiendo de como se consiga el mejor contraste.

En cuanto a cual es la mejor combinación de los textos que van a ser leidos para ordenador existen multitud de opiniones. Está demostrado que un texto en blanco sobre un fondo oscuro, un gris oscuro, por ejemplo, posee un mayor contraste que otras opciones, y por eso se recomienda esta combinación de colores para las webs que van a ser visitadas por gente con problemas de visión. Si bien es cierto, que esta combinación consigue que nos cansemos antes de leer el texto, así que llegados a este punto nos damos cuenta de que no podemos llegar a una conclusión definitiva.

Unicamente como consejo, cuando maqueteis un texto claro sobre un fondo oscuro os aconsejo que utilizeis tipografias con un palo ancho o en negrita, ya que así facilitareis su lectura.

Logos y más Logos

Diego González Villarejo — Fri, 01 Sep 2006 17:44:00 +0000

Bueno hoy vamos a empezar con un campeonato de logotipos. Me han encargado dos logotipos en la empresa donde trabajo. Para facilitaros la cosa la empresa se llama essilor y se dedica a la fabricación de lentes oftálmicas y en menor medida para instrumentos ópticos y otros servicios dedicados a la óptica.

El primer logotipo es para el servicio Essilor Intregal. Consta de un paquete de ventas de lentes y de instrumentos a mejor precio. Es integral porque abarca todos los productos que ofrece essilor. Además debia ceñirme a los colores corporativos. Esa es toda la información que me dieron. Insultantemente escasa para hacer un logo, pero bueno. Tengo que presentar 3 logos y he creado 8, os los paso por aqui para que lo voteis en los comentario o a mi correo personal. Da igual como querias. Despues de las votaciones os informaré de cual ha sido el logo ganador.

El segundo logo es para una nueva división de venta de lentes de manera exclusiva a traves de la web. Essilor WebShop. La mecanica es la misma. Ahi 9 logos a elegir 3. Votad a vuestros favoritos en los comentario o en mi correo. Muchas gracias a todo el mundo. Espero que os gusten.

Maquetando textos digitales. Nociones básicas (I)

Diego González Villarejo — Mon, 28 Aug 2006 08:42:00 +0000

¿Qué hace que una página sea agradable a la lectura o no? ¿Qué hace que nos cansemos tan rápido de una web?

Muchos factores influyen en la legibilidad de un sitio web. El principal sin lugar a dudas es la maquetación del texto. Este post no pretende ser una clase magistral de maquetación de textos, si no solo una pequeña guia para diseñadores que están comenzando o para cualquiera que vaya a maquetar un texto (un trabajo para clase, un informe en el trabajo, etc.) Os aseguro que un texto bien presentado son muchos puntos a vuestro favor.

Empezaremos con lo más basico. Tamaño de letra, interlineado, el espacio entre palabras, alineamiento y colores. Ilustraremos todo con ejemplos para una mejor comprensión.

Tamaños de letra

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

El primer texto es en exceso pequeño como podemos ver claramente y requiere un esfuerzo por nuestra parte, no es agradable su lectura. En el último texto el tamaño es en exceso grande. La primera impresión es que estamos ante un título y la lectura es complicada porque dificulta la comprensión general del parrafo.

Interlineado

El interlineado es la espacio que separa dos lineas consecutivas. Veamos unos ejemplos:

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Cuando maquetemos una web el parametro del alto de linea se controla con la etiqueta “line-height” y se suele medir en porcentajes, en el primer caso tenemos un line-height del 60% y el último un line-height del 200%. En el caso correcto hemos ultizado un line-height del 110%. En textos en la web es más comodo para el lector un interlineado un poco mayor que en los textos impresos.

Espacio entre palabras

En muchos de los programas de edición de textos (como “word”) el espacio entre palabras o “word-spacing” se determina automaticamente en función de la justificación del parrafo.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Este ejemplo es sumamente gráfico.

En el próximo capitulo veremos la justificación y el uso de los colores.

Presentación oficial de DisenioN

Diego González Villarejo — Sun, 27 Aug 2006 15:38:00 +0000

Blog de Diseño. Esa es la mejor descripción que podemos hacer de esta aventura que comienza hoy. Vamos a hablar de diseño gráfico y de diseño web, y menor medidas de otras formas de arte digital: Ilustración, 3D, video-arte, etc.

Para abrir boca nada mejor que mi portfolio on-line de Diseño Gráfico y Diseño Web en el que podreis una selección de mis trabajos, aunque iré subiendo por aquí algunas cosas más.

Bueno esto es solo el comienzo, cada día habrá un poco más.