Pedro Puig

Entradas de la categoría ‘Diseño’

Restauración profesional de una fotografía

finallll

A menudo tenemos fotografías de familiares que necesitan ser restauradas, el paso del tiempo ha deteriorado casi por completo el retrato. En PSDtuts nos enseñan como de una forma profesional podemos mejorar ostensiblemente estos recuerdos. Yo siempre digo que para estos trabajos lo fundamental es la paciencia y mucho ctrl+z.

El resultado es sencillamente espectacular, sobre todo cuando se inventa el lado izquierdo de la cara haciendo un reflejo horizontal.

Vía: PSDtuts

Plantillas de navegadores en PSD

browsertemplatesv2

A la hora de presentar nuestros diseños de sitios web es conveniente simular como van a quedar en los templates de distintos navegadores.

En Piksels podemos descargar un archivo PSD (3,5 mb) con las 3 resoluciones más usadas (800×600, 1024×768 y 1280×1024). Podremos editar desde la barra de direcciones, activar o desactivar el scroll, el favicon.

Las simulaciones de navegadores incluidas en el psd son  Firefox para Mac OS X, Internet Explorer y Firefox para Windows.

La forma de utilizarlo es sencilla, hacemos una copia de nuestro trabajo y la pegamos en la resolución que más nos interese.

Os recomiendo tener muy bien guardadito este psd, seguro que lo necesitareis.

Vía: Diego Mattei

Hacer variaciones en un diseño

Diseño Original

Muchas veces cuando acabamos un diseño, podemos realizar variaciones del mismo y presentar al cliente una misma idea pero con estilos diferentes. En PSDtuts nos explican cómo podemos hacerlo, desde un diseño minimalista hasta una variación abstracta.

En el post detallan como podemos realizar esta variaciones paso a paso, parece sencillo, pero… El resultado es espectacular.

Vía: PSDtuts

Animales en 3D

Diego Mattei nos ofrece en su blog un enlace donde podemos descargarnos una colección de animales en 3D, listos para ser utilizados en nuestro photoshop. Nunca se sabe si en algún trabajo puntual te pueden sacar del apuro; yo soy partidario de cuantos más recursos tengas localizados, por muy extraños que parezcan, mejor que mejor.

En esta ocasión son 38 animales en 3D con las correspondientes texturas y el preview de cada una de ellas. Diego también nos deja el enlace de un pequeño tutorial donde explican como poder trabajar con estos objetos en photoshop

Ya la versión CS3 traía esta funcionalidad, el modelado 3D en photoshop, por cierto la versión CS4 promete muchas más funcionalidades relacionadas con el 3D.

Vía: Diego Mattei

100 manuales de identidad corporativa

Un manual de identidad corporativa es según la definición de la wikipedia:

Un documento en el que se diseñan las líneas maestras de la imagen de una compañía. En él se define las normas que se deben seguir para imprimir la marca y el logotipo en los diferentes soportes utilizados.

En Neutrón Gráfico, hacen una recopilación de más de 100 manuales de identidad corporativa de diferentes empresas. Todo diseñador se verá inmerso alguna vez en su vida en la confección de uno de estos manuales, por lo que estos ejemplos pueden sernos de gran utilidad.

La nueva identidad de RTVE

RTVE ha cambiado su identidad corporativa, ya empezó hace poco con su web y ahora le ha tocado el turno a sus diferentes logos. El elemento unificador es la “e” final presente en sus 3 marcas (RTVE, TVE y RNE). La empresa encargada de realizar el desarrollo gráfico ha sido la consultora barcelonesa “Summa”. La tipografía ha sido creada y los colores se basan en degradados muy al estilo web 2.0, entiendo yo, un poco desfasados.

Mi opinión personal es buena en cuanto a los logotipos y las adaptaciones, pero las moscas para la TV destacan demasiado y son bastante feas, pero para gustos los colores.

Aquí os dejo un video donde explican el proceso de cambio que ha seguido RTVE para modificar la identidad corporativa:

Usabilidad en la navegación por pestañas

Usabilidad en pestañas

El concepto de usabilidad está presente cada vez más en nuestros desarrollos, desde un simple buscador, pasando por la homogeneidad en los links hasta la navegación por pestañas, precisamente en usabilitypost nos dan 5 consejos parar que esta navegación sea 100% efectiva para el usuario. Estos consejos se resumen en:

  • Unir la pestaña activa con el contenido
  • Diferenciar la pestaña activa por colores
  • Poner en un color diferente el texto de la pestaña activa
  • Hacer que toda la pestaña sea clicable y no solo el texto
  • Definir siempre una pestaña activa

Vía: Isopixel

Consejos para ser un diseñador independiente y no perecer en el intento

Desde un principio, un trabajo puede ir a las mil maravillas, el cliente entiende lo que quieres hacer, valida tus prototipos, cobras sin retrasos ni demoras al final del desarrollo, muchas veces me he encontrado con este tipo de clientes/trabajos; pero os puedo asegurar que cuando un trabajo se tuerce, se tuerce de verdad, el cliente no te transmite nada a la hora de comenzar el desarrollo, tarda una eternidad en validar las diferentes fases del trabajo y encima al final tarda en pagar o directamente no paga.

¿Qué hay que hacer para encauzar a este tipo de clientes/trabajos? Minid.net explica magistralmente como debemos entender el proceso creativo y como debemos comportarnos en nuestra relación con el cliente:

  • La regla de oro es saber distinguir que tu trabajo no es la manufactura, es la creación, solo eso
  • El cliente no sabe que diseño quiere, dirige al cliente, tú eres el diseñador, probablemente si sigues 100% las directrices del cliente, acabaras creando un frankenstein.
  • 1 diseño es una idea, si el cliente te pide 5 bocetos te está pidiendo 5 ideas, cobra por ellas.
  • Cúbrete las espaldas. Cuando envíes un prototipo al cliente, pon marcas de agua o reduce las medidas del prototipo, aunque lo mejor es hacerle firmar al cliente un contrato o pedido para en caso de quedarse con los prototipos, puedas cobrarlos.
  • Prueba todos los terrenos para lograr un cometido. Trata de simplificar todo para conseguir algo solido y elegante.
  • No trabajes sin un contrato redactado de forma correcta y completa.
  • Incluye en el presupuesto el material a utilizar (tipografías, fotografías etc.…).
  • Cobrar el trabajo, esto parece algo obvio, pero puede llegar a ser lo más complicado.

Vía: Minid.net

La importancia de los wireframes

Leo en Nudonation un muy interesante post donde explica cómo se crea un proyecto web desde el inicio hasta la fase final, gráficamente hablando por supuesto. Desde el esbozo en lápiz y papel, pasando por el desarrollo de wireframes (bosquejo de la ubicación de elementos en una pantalla) hasta la fase de prototipado (la usabilidad y los sistemas de navegación van indirectamente implícitos en el desarrollo de los wireframes) .

Lo importante de crear wireframes previos al comienzo de la fase de diseño, nos evitará hacer modificaciones en fases posteriores (aunque esto no es siempre así, ya se sabe…).

Wireframe del sitio web Mexbest

Ya sea un microsite, un blog, una web o incluso diseños para imprenta, es recomendable crear un wireframe que nos ayudará a definir un mejor proyecto final. Para la realización de wireframes hay multitud de herramientas. Yo utilizo el Photoshop, me permite crear los distintos elementos en capas, es fácil de modificar y me resulta cómodo no salir del programa en el que luego voy a realizar el diseño, pero lo importante es que sea una herramienta en la que el diseñador, se sienta a gusto.

Tutoriales de Photoshop

Tutoriales de Photoshop

En Paintbits encontramos un muy interesante recopilatorio de tutoriales de nuestro querido y amado Adobe Photoshop. El recopilatorio está clasificado en diferentes categorías ( efectos, retoque, tipografías, pintura digital, diseño, iconos, diseño web y temas variados).

Como bien dicen en Isopixel, el problema es distinguir entre tanta cantidad de información, que tutoriales son de calidad y cuáles no. Estos sin duda son de la primera clase.

Espero que lo disfrutéis.