Quizás para decepción de los photoshoperos esta semana las noticias estuvieron dirigidas mas para el lado del diseño web. Pero la verdad es que hubo tan buenas noticias en cuanto a material para esta rama del diseño que era inevitable recomendarlo y postearlo aquí.

Visitando Noupe me encuentro con una fantástica lista de 50 plantillas XHTML/CSS de enorme calidad libres para su descarga y posterior uso.

En el listado se podrán ver plantillas para distintos fines en donde algunas de ellas incluyen hasta el PSD para su edición.

Enlace | 50 Free High-Quality and “New” (X)HTML/CSS Templates

The Ultimate JQuery List es un extenso directorio dividido en categorías con todo lo relacionado con este framework, tan de moda últimamente.

En verdad se pueden conseguir efectos muy vistosos y aprender mediante los ejemplos que se pueden encontrar.

Por eso, para los que disfrutaron del post sobre menús de navegación en JQuery hace unos días, de seguro que este sitio irá a parar directamente a los marcadores.

Enlace | The Ultimate JQuery List
Vía | StumbleUpon

Check my Colours es una herramienta online muy útil para todos los diseñadores web y sobre todo, para los mas meticulosos.

Si bien es cierto que el ideal de un diseño para web es que cumpla con todos los estándarres y validaciones para asegurarse que el sitio pueda visualizarse correctamente para todas las personas por igual, muchas veces es difícil hacer una comprobación de todos los elementos.

Con esta herramienta, bastará con ingresar la URL del sitio en cuestión y en minutos nos arrojará los resultados con descripción sobre:

• El contraste y luminosidad de los elementos,
• La diferencia de brillo entre elementos,
• La diferencia de color entre elementos.

De esta forma podremos asegurarnos que la web sea accesible para todas las personas, incluyendo las que cuentan con discapacidad visual.

Por mi parte, mi web no habla muy bien de mi como diseñador… aunque reconozco que debo hacer un cambio de plantilla urgente.

Enlace | Check My Colours
Vía | Informática Práctica

Este es un video muy gracioso que Marcelo de Photomagazine publicó en su blog. Básicamente se muestra que pasaría si los clientes con los que debemos lidiar habitualmente los diseñadores se manejaran en las distintas especialidades de la misma forma.

Realmente es una idea muy creativa y que refleja la “dura” realidad a la que nos tenemos que enfrentar a diario, mostrando las típicas frases como: “Solo te puedo XXX esto por el trabajo.” en rubros como restaurantes, peluquerías y distintos negocios.

Nota: Para los que no saben YouTube tiene en el menú (ícono ubicado en la parte inferior derecha) una opción de subtítulos en donde podrán activarlos y de esta forma leer los textos de todo el video.

El Curriculum Vitae es nuestra carta de presentación y la impresión que quedará de nuestra personalidad ante la empresa que posiblemente nos contrate. Por lo tanto, en materia de diseño y creatividad, sorprender con algo diferente puede ser un factor determinante a la hora de la decisión.

Si bien días atrás compartí una plantilla de Curriculum Vitae básica, en Isopixel me encuentro con este fabuloso enlace en donde podremos encontrar 30 ejemplos para inspirarse sobre Curriculum Vitae creativos.

En esta lista encontré alguno que otro que en verdad son "jugados" y no se si en verdad pueden ser efectivos, ya que son muy complicados de leer. Pero otros sencillamente son muy buenos. Y esta comparación creo que deja algo de enseñanza: "Nuestra locura creativa no siempre será interpretada con facilidad, por lo que deberemos encontrar el equilibrio entre el diseño bonito y la fácil lectura del documento… lo cual no deja ser su principal propósito".

Enlace | 30 Artistic and Creative Resumes

Sin duda After Effects es una poderosa herramienta con la que se logran resultados realmente increibles, Tan solo con ver esta colección de tutoriales nos podemos dar cuenta de ello.

En esta recopilación de tutoriales podremos encontrar fantásticos efectos de textos, animaciones, efectos especiales y muchos “fakes” de internet al descubierto (como en el caso del típico video del peatón atropellado).

Si bien los videos están en inglés, al ser en video se hace totalmente didáctico y simple de entender, mas allá de la complejidad misma del programa.

Enlace | 77 Ultimate Round-Up of Adobe After Effects Tutorials
Vía | Artegami

Si estaban pensando en armar su portfolio y todavía no se decidían por el estilo de diseño, aquí tienen una excelente plantilla en XHTML gratuita con la que podrán mostrar sus trabajos.

The Sky was Blue es la plantilla que ofrece Francesco Mugnai en su blog libre de uso, la cual contiene las siguientes características:

• jQuery Slide para mostrar los últimos trabajos
• Categorización del portfolio con lo que podrán mostrar por separado los trabajos de gráfica, web y demás.
• Miniaturas con efecto Lightbox en jQuery.
• Incluye el PSD de las miniaturas
• Integración de Twitter
• Formulario de contacto
• Validación XHTML y CSS

El template viene acompañado de un readme en donde podrán encontrar las especificaciones adicionales.

En cuanto al uso del mismo, Francesco expone que puede utilizarse tanto personal como comercialmente sin restricciones.

Plantilla The Sky Was Blue | Preview - Descarga

Esta es una recopilación realizada por la gente de Blog.SpoonGraphics en donde enlazan mas de 20 recursos relacionados con camisetas.

En dicha lista podremos encontrar camisetas en vectores, imágenes con modelos, playeras arrugadas, con cuello, buzos, abrigos y diversos modelos mas en donde se intenta brindar una gran variedad en este campo.

Enlace | Huge Collection of T-Shirt Design Mockup Templates

BONUS: Como presentar nuestros diseños? Bueno, aquí va un minitutorial escondido sobre como realizar un estampado.

1° Paso. Tomamos la imagen de la remera y la abrimos en un nuevo documento.

 

Este archivo lo guardamos como PSD. Para los mas nuevos… Archivo > Guardar como… y le ponemos un nombre. Solo eso.

2° Paso. En una nueva capa abrimos nuestro diseño. Para esta ocasión pondré la caricatura que me hiciera tiempo atrás un amigo.

Una vez puesta sobre la camiseta, cambiaremos el modo de fusión de la capa a “multiplicar” de forma tal que se vea la textura de la camiseta. Y para darle un toque mas de realismo, bajamos la opacidad a 90%.

3° Paso. En verdad aquí se ve bien y muchas veces convendrá que dejemos así nuestro modelo a exhibir. Pero si deseamos darle mas realismo, obviamente el diseño debe seguir los pliegues de la tela, por lo que vamos a Filtros > Distorsionar > Desplazar…

En la siguiente ventana solo cambiaremos los valores de Escala Horizontal y Escala Vertical (recuerden que es un minitutorial… no quiero adentrarme mas). En mi caso he decidido poner 5 en cada uno, pero de acuerdo a que querramos hacer mas o menos pronunciados los pliegues, pondremos mas o menos valor a cada uno.

  Y de esta forma obtenemos nuestro diseño realista.

 

Los tatuajes son la debilidad de muchos (entre los que me incluyo) y por lo tanto, un recurso muy requerido aquí en el blog. Varios son los emails que llegan pidiendo este tipo de material.

En este pack podrán encontrar mas de 100 gráficos vectoriales divididos en 15 archivos en formato AI. Algunos siguiendo la línea de los tribales, otros mas tradicionales, pero unidos por un denominador común: todos ellos son muy atractivos he invitan a jugar con combinaciones para crear uno propio.

Aprovecho para dejar aclarado que “NO TATUO”. Parece una broma, pero fueron muchos los correos y comentarios que me llegaron para realizar tatuajes a personas…

Descarga | Tattoos.zip
Descarga alternativa | Tattoos.zip

Cada vez es mas común la unión entre personas o empresas para trabajar en conjunto sobre un nuevo proyecto, sobre todo en internet.

En el camino de este proceso nos encontraremos con diferentes trabas, sobre todo en la comunicación entre las partes, ya que muchas veces los integrantes del proyecto se encuentran en diferentes países o simplemente el ritmo cotidiano hacer que la organización sea todo vía internet.

En Zona Cerebral, Iván publica una serie de 10 sugerencias para encarar los proyectos colaborativos que sin duda les ayudará a a futuro, enumerando pautas básicas y acercándonos a las diferentes herramientas online con las que contamos para este fin.

Enlace | 10 Sugerencias para gestionar un proyecto colaborativo con éxito

 Dina Goldstein ha realizado una fantástica producción basada en finales no felices de las princesas mas conocidas de Disney, ubicándolas en escenarios de nuestra época y abarcando problemáticas actuales tales como adicción, enfermedades y más.

En JPGMag cuenta: “La versión de Disney casi siempre tiene un comienzo triste, una dama víctima de las maldades del villano, y el final es previsible feliz.  El príncipe siempre la salva y la joven victimizada se convierte en princesa. Ha raíz de esto comencé a pensar en las princesas de Disney viviendo situaciones actuales que afectan a las mujeres”.

Y si duda que lo logró, poniendo a La Bella en plena cirugía estética o a Cenicienta con una adicción al alcohol.

Sin mas preámbulos, aquí las imágenes:

Vía | CodigoGeek

Hace varios días que ví en otros blogs de diseño este recurso y que al principio me pareció demasiado “simple” por llamarlo de alguna forma y pensé que no aportaría nada al blog.

Pero leyendo mails atrasados (perdón a los que todavía no contesté) veo que un lector pedía efectivamente esto, una plantilla modelo para Curriculum Vitae acorde a nuestra especialidad… el diseño.

Es por eso que decidí publicarlo, quizás no como novedad pero si como utilidad en archivo, ya que seguramente esta persona no es la única que necesita plasmar su “carrera de vida laboral” para buscar trabajo.

La plantilla original está en inglés y tiene los puntos básicos que todo curriculum debe tener. Como siempre piden que traduzca todo, esta vez me aproveché del poco contenido que tenía el mismo para pasar al castellano y lo traduje.

Descarga | Plantilla en Castellano
Descarga | Plantilla en Inglés
Autor | Sample Resume Template
Vía | FrogX3 - Intenta

ACTUALIZACIÓN: Si esta planilla no les convence y buscan algo de inspiración, Código de Barras hizo una buena recomendación sobre un artículo publicado en Smashing Magazine sobre Curriculum de diseñadores.

Febo asoma, ya sus rayos… así decía la canción que nos machacaron de chicos para que la aprendiéramos (aquí en Argentina) y que comenzaba con el sol como protagonista.

El sol es sin duda un elemento gráfico muy utilizado, ya que tiene muchos significados según las diferentes culturas.

Este es un pack de seis archivos en formato EPS con una gran variedad de soles. A disfrutar…

Descarga | Soles.rar
Vía | Zcool

Esta es una buena colección conformada por 8 engranajes de distintos tipos y tamaños en alta calidad y, obviamente, como todo elemento ofrecido en PNG, con fondo transparente.

Ya en varias ocasiones hemos visto que este tipo de recurso agiliza mucho el trabajo, por lo que me pareció bueno compartirlo y a la vez recomendarles que vean la galería del autor ya que cuenta con muchos elementos de este tipo.

Como inspiración para trabajar con estos recursos, les dejo este enlace de un artista que realiza composiciones con objetos de este tipo y mucho mas.

Descarga | Engranajes.zip
Enlace | Gears Transparent PNGs

Hasta el momento había infinidad de artículos en blogs donde explicaban “como crear un theme para Wordpress” o “como crear una plantilla web” pero en todos ellos solo mostraban la parte gráfica, olvidándose del código y su funcionamiento.

Lo bueno es que en Six Revisions explican el armado completo de un sitio, con lo que se obtiene como resultado un tutorial extremadamente útil para ver como se arma la estructura, el diseño de botoneras y demás elementos que conforman un sitio.

Para los que recién comienzan o los que están intentando adentrarse en el mundo del CSS, este tutorial les vendrá de maravillas.

Enlace | How to Code a Dark and Sleek Web Design

Texture Lover aplica de forma estupenda su recurso principal en el diseño de su sitio… las texturas. Con un estilo muy marcado, el sitio promete tener buena cantidad y calidad de texturas, tutoriales sobre creación de texturas y fuentes de inspiración relacionadas con el tema.

El sitio cuenta también con la posibilidad de subir nuestro material para ponerlo a disposición de todos y, de esta forma, promocionar también nuestro sitio (enlaza directo al sitio de origen).

Enlace | Texture Lover
Vìa | Puntogeek

 

Los patterns (o motivos en español) son un recurso muy buscado con el que en segundos podemos aplicar fondos realmente bonitos a nuestros trabajos.

En este caso, en Web Design Ledger hicieron un listado de 100 nuevos patterns “seamless”, que traducido podríamos decir que es “sin costura”. En otras palabras, la unión del motivo coincide en todos sus lados.

Enlace | 100 New and Beautiful Seamless Patterns

 

En Photomagazine me encuentro con un buen tutorial inspirado en la serie Dexter, la serie que trata del un forense especializado en análisis de salpicaduras de sangre y a la vez, un psicópata que al terminar su turno en la comisaría busca a criminales cuestionables para su particular moral y se deshace de ellos.

Lo bueno de todo esto es que hablando con Marcelo, me comentó que ha quitado el registro del sitio, por lo que este y los demás tutoriales se encuentran liberados para verlos sin usuarios ni claves.

Y recuerden, todo tutorial enseña técnicas aplicables a diversos fines. La famosa frase: Que el árbol no tape al bosque es totalmente válida en este caso. No se queden con el ejemplo sino con lo aprendido.

Enlace | Tutorial Dexter

Este es un buen video que muestra el proceso de estampado por serigrafía. Se que muchos están con proyectos de crear líneas de remeras (camisetas en otros países) debido a la consulta de diseños en vectores para este fin, por lo que me pareció bueno exponer este video.

Por otro lado, al final del mismo muestran algunas ideas creativas para darle un valor diferencial al producto, aunque no creo que hayan tenido en cuenta la comodidad a la hora de su uso. Pero bueno, toda idea creativa es válida.

Vía | Oh! Grafico

Hay librerías y técnicas que poco a poco han tomado un papel principal en las nuevas tendencias de diseño web y uno de ellos es el Jquery, con el cual sin necesidad de crear una película en flash podemos crear animaciones en menús, galerías de imágenes, etc.

En 1stWebDesigner me encuentro precisamente con una buena colección de menús de navegación muy llamativos, en donde podremos conseguir el código o aprender como hacer varios conocidos como los que se ven en la imagen.

Hay para todos los gustos y sin duda sabrán sacarle el provecho que se merece cada uno de estos menús.

Enlace | 36 Eye-Catching Jquery Navigation Menus