Éstas imágenes son del libro Animation de Preston Blair, publicada por Walter T. Foster, allá por los años 50 y no han perdido vigencia para usarse como referencia:

Una versión ligeramente más grande la puedes encontrar haciendo clic en las imágenes.

Una vez creada la secuencia de movimiento al final tenemos un resultado como éste:

Obviamente la idea es trabajar con tus propios personajes y no importa mucho si no sabes dibujar porque acá lo importante es el movimiento.

De hecho en estos tres enlaces que pongo abajo hay algo más de información que te pueden ayudar si deseas empezar a animar ciclos:

http://www.idleworm.com/how/anm/02w/walk1.shtml

http://www.anticz.com/Walks.htm

http://minyos.its.rmit.edu.au/aim/a_notes/04_walkcycle_project.html

Los tres son bastante completos y puedes encontrar no sólo técnicas para animar estos ciclos de caminata para reciclarlos tus animaciones sino también otros tutoriales para mejorar nuestras habilidades.

Si conoces algún otro material para enriquecer este artículo ponlo en los comentarios.

Un fractal es un objeto semi geométrico cuya estructura básica, fragmentada o irregular, se repite a diferentes escalas. El término fue propuesto por el matemático Benoît Mandelbrot en 1975 y deriva del Latín fractus, que significa quebrado o fracturado. Muchas estructuras naturales son de tipo fractal.

Además, debe tener detalle a cualquier escala de observación, ya sea que lo mires de muy de cerca o de lejos, debe distinguirse su forma, la cual es tan irregular que no puede describirse con términos geométricos tradicionales, es decir, no es un cuadrado o un círculo o un dodecágono, por ejemplo.

En pocas palabras, es una imagen generada matemáticamente y muchas veces los resultados son francamente alucinantes:

En 1st Web Designer he encontrado esta recopilación de fractales creados con el programa Apophysis, un software libre que te permite crear fractales a partir de operaciones ya predefinidas que puedes modificar prácticamente hasta el infinito.

Puedes descargarlo gratuitamente desde http://www.apophysis.org/downloads.html

Al comienzo puede resultar un poco confuso pero probando un poco cada una de las opciones se pueden crear gráficos realmente alucinantes.

Siempre es bueno empezar con un tutorial y en DeviantArt he encontrado uno que puedes te explica algunas nociones básicas y te guía paso a paso desde Apophysis hasta Photoshop en la creación de un fractal.

El tutorial lo puedes descargar desde http://sya.deviantart.com/art/Apophysis-Tutorial-10781352.

De hecho el artículo donde encontré esta colección de imágenes en 1st Web Designer es el primero de 3 partes donde tocarán otros recursos para crear fractales y algunos tutoriales. Hay que estar pendientes de su publicación.

Si conoces algo más que valga la pena mencionar o quizás alguna gráfica que hayas creado pásame la voz.

El enlace: http://www.1stwebdesigner.com/inspiration/60-beautiful-fractals-created-with-apophysis-part-1/

Apophysis: http://www.apophysis.org

Y muchas veces, cuando la información que has colocado en la web es digna de ser impresa, es un fastidio tener que imprimir también fotografías, colores de fondo, banners, etc. que gastan papel y tinta y al final nos hacen olvidar la finalidad de esa impresión.

Hoy terminé la web de una gelateria italiana en Miami, Via Veneto Gelateria, y por un error de coordinación no consideramos al armar la estructura (que de hecho es muy simple) iba a haber un cupón de descuento para imprimir.

El problema era que normalmente cuando quieres imprimir algo haces una versión print-friendly que sea puro texto o solamente con los elementos relevantes. De hecho Joomla tiene una opción en sus artículos para hacer versiones para impresora y hasta en pdf.

Sin embargo este caso es distinto porque no había un botón que abra un popup u otra página, era simplemente el popunder como un <div> sobre el diseño de la página.

Era evidente que nadie en su sano juicio iba a gastar tanta tinta de su impresora para canjearla por un helado gratis. Tenía que haber una forma creativa de que se pueda imprimir ese cupón sin imprimir lo demás.

Felizmente encontré la solución muy rápido. Y no se trata de algo muy creativo exactamente, sino de una característica del código CSS que te permite definir si los estilos van a ser aplicados a la versión de la web en pantalla o impresora.

¡Es genial! Puedes tener dos versiones completamente distintas (si es que cabe la posibilidad real de que sean distintas), una que ves en tu monitor y la otra en papel. En este caso, gracias a que la web la hice en puro CSS, lo único que tuve que hacer fue crear una versión en el código para impresora y ponerle hidden y 1px de ancho y alto a todos los layers, excepto al del popup con el cupón.

El resultado es totalmente satisfactorio.

Esto es lo que se ve cuando muestras el cupón:

Y esto es lo que se ven cuando lo imprimes:

La misma página web con dos estilos distintos.

Ahora viene lo más importante: cómo configurar la hoja de estilos para mostrar dos versiones de CSS.

Es muy sencillo, lo único que debes hacer es colocar la siguiente “etiqueta” envolviendo todo el código CSS:

@media screen
{

ACÁ VAN TODOS LOS ESTILOS PARA PANTALLA

}

@media print
{

ACÁ VAN TODOS LOS ESTILOS PARA IMPRESORA

}

Por ejemplo:

@media screen
{
p {font-family:verdana, arial, sans-serif;}

body {
    margin: 0px;
    text-align: center;
}

}

@media print
{
p {font-family:times new roman, serif;}

body {
    margin: 20px;
    text-align: left;
}

}

En este caso estamos definiendo que en pantalla los párrafos (p) usan la fuente Verdana y el body no tiene márgenes y además estará alineado al centro. En cambio, para imprimir, usaremos la fuente Times New Roman y todo estará separado 20px de los márgenes y alineado a la izquierda.

Puedes visitar la web de Via Veneto en http://www.viavenetogelateria.com/ y revisar el código fuente para entender un poco más cómo está construida, dentro del código verás las rutas de las hojas de estilo. En este caso usé dos archivos separados para los estilos, uno para print y otro para screen, pero sólo por cuestiones de orden, bien pueden estar ambos en una misma hoja.

Además, el script para mandar a imprimir es un javascript que va dentro de la etiqueta <a>:

<a href="JavaScript:window.print();">Imprimir</a>

Si al igual que yo tampoco conocías este tip y te va a servir de algo cuéntamelo en los comentarios.

Gracias al profesor Jesús Conde, la mente detrás de este sitio y el inventor de los tutoriales en video, he aprendido lo poco que sé sobre PHP y que me ha permitido realizar algunas aplicaciones web o poder modificar temas de WordPress, por ejemplo.

Menciono esto porque si te vas a dedicar al desarrollo web sea cualquiera de sus formas, es importantísimo que conozcas al menos la base sobre programación para que entiendas qué se puede hacer o al menos sepas cómo crear un formulario de contacto y no tener que recurrir a terceros para labores tan sencillas.

Hace varios años encontré en Emule una colección de más de 50 Videotutoriales creados por el profesor Jesús Conde, que te explica claramente y paso por paso, todo lo que necesitas saber sobre PHP y MySQL para crear sitios web dinámicos. ¡Realmente el tipo es un maestro!

http://www.revver.com/video/468032/01-curso-php-mysql/

Este vídeo es la primera parte del enorme y completísimo curso de PHP que yo seguí. Vale la pena encerrarse un par de horas a la semana, como si fuera un curso regular en algún instituto, cerrar msn y dejar de lado cualquier distracción que estoy seguro, al terminar, estarás capacitado para programar sitios web dinámicos de gran nivel.

Y no sólo eso sino que en el sitio web Illasaron vas a encontrar una enorme cantidad de videotutoriales de diversos temas tan simples como PowerPoint o Photoshop hasta cursos mucho más complejos como ASP, Java o 3DS max.

En Illasaron no sólo es Jesús Conde el que produce los vídeos sino que hay ya varios profesores que colaboran creando contenido de calidad y lo mejor de todo es que es completamente gratis.

En esta página hay una entrevista que se le hizo a Jesús Conde hace un par de años y que revela mucho de la personalidad de este gran hombre:

http://locx24.wordpress.com/2007/04/13/entrevista-al-prof-jesus-conde/

Es fascinante ver cómo este profesor de historia y geografía haya podido aprender por su cuenta un lenguaje de programación y luego poder enseñarlo.

Su filosofía es clarísima y digna de admiración. Compartir tu conocimiento es quizás la forma más sublime de alcanzar la riqueza. Completamente de acuerdo.

El enlace:
http://www.illasaron.com

Para acceder a los cursos necesitas registrarte. La página me parece un poco confusa al inicio pero luego del registro y validación de la dirección de email, encontrar material es sencillísimo, todo está en el botón gris que dice Descarga Videos. Sino, en todo caso puedes seguirlo desde Revver también.

Te enseña cómo hacer globos de texto, como en los cómics, usando sólo CSS y nada de imágenes, aprovechando la propiedad borde:

El tutorial está en inglés pero eso casi no importa porque prácticamente sólo aparecen los códigos css para las diferentes versiones del globo, con el ángulo a la derecha, arriba y abajo.

El enlace: http://net.tutsplus.com/videos/screencasts/fun-with-css-shapes/

Está como para dudar si se trata del render de un modelado en tres dimensiones. ¡Simplísimo!

El enlace: http://psd.tutsplus.com/text-effects-tutorials/using-light-and-shade-to-bring-text-to-life/

En Photoshop Essentials te explican paso a paso cómo debes hacer para lograr este efecto tan alucinante.

Básicamente todo es trabajo con las opciones de fusión (blend) y canales, además de un blur y noise.

El enlace: http://www.photoshopessentials.com/photo-effects/infrared-photo/page-7.php

Si no estás registrado, te pedirá que lo hagas.

Si quieres usar estos mismos plugins en tu blog acá tienes los enlaces de dónde los saqué:

El plugin de Facebook lo encontré en:
http://wordpress.org/extend/plugins/add-to-facebook-plugin/

Ojo, acá tendrás que hacer una modificación en el php que no es muy complicada la verdad. Por defecto el icono aparece en una sola línea <p> y hacía que aparezca encima del ícono de Menéame. Simplemente cambié todos los <p> y </p> por <span> y </span>.

Otra modificación que hice fue traducir el texto “Share on Facebook” por “¡Pasa la voz!”. Recuerda escribir la entidad “&iexcl;” para el signo “¡” que sino puedes tener problemas.

El plugin de Menéame lo encontré en:
http://www.enezeta.com/zapateces/?p=136

Éste en realidad no es un plugin sino mas bien un hack. Hay que modificar el index de la plantilla y colocar este código en el loop:

<img src="<?php bloginfo(‘template_directory’); ?>/images/menefante.gif" align="top" alt="Menéame" />
<a href="http://meneame.net/submit.php?url=<?php the_permalink() ?>" title="Enviar a menéame <?php the_title(); ?>">Enviar a menéame</a>

Acá también le hice una pequeña modificación porque no quería que aparezca el texto sino sólo el icono del elefante, así que lo cambié por:

<a href="http://meneame.net/submit.php?url=<?php the_permalink() ?>" title="Env&iacute;a a Men&eacute;ame <?php the_title(); ?>"><img src="<?php bloginfo(‘template_directory’); ?>/images/menefante.gif" align="top" alt="Men&eacute;ame" /></a> <?php if(function_exists(addtofacebook)) : addtofacebook(); endif; ?>

Igual, corrigiendo las entidades de la í y la é para que se lea correctamente.

También estoy twitteando los artículos pero recién estoy descubriendo cómo funciona y si hay alguna manera de integrarlo completamente. De momento está en exploración así que no lo hago oficial.

Ya sabes, no te olvides de compartir los artículos en Menéame y Facebook.

El artículo original está en inglés así que colocaré una breve reseña de cada uno de ellos:

1. Mueve tu cámara. Abre el obturador y haz giros, paneos o cualquier movimiento brusco.

2. Dale Zoom. Mantén el obturador abierto y haz zoom. Queda mucho mejor que el motion blur de Photoshop.

3. Desenfoca. A veces tienes mejores resultados con una imagen borrosa que estimula la imaginación.

4. Dispara desde abajo. La perspectiva de un contrapicado sugiere muchas sensaciones y es ideal para hacer buenos contrastes contra el fondo (cielo o techo).

5. Sobreexpón tus fotos. Las imágenes sobreexpuestas o quemadas pueden crear un ambiente onírico si es que están en un entorno blanco o con bastante más luz.

6. Slow Sync Flash. No todas las cámaras tienen esta opción. Consiste en dejar el obturador abierto por un segundo aproximadamente y que el flash se dispare justo al final. Con esto consigues crear un halo que sigue el recorrido del objeto o escena y deja brillante el último fotograma. También existe la opción de lanzar el flash al inicio.

7. Toma desde arriba. Las tomas aéreas cenitales, sumadas a un ojo de pez pueden resultar muy interesantes.

8. Exposiciones múltiples. De hecho esto es la base de la fotografía en HDR, pero también puedes usarla para jugar en Photoshop con las luces y sombras de las distintas fotografías.

9. Granulado. A veces las imágenes muy granuladas pueden emular una situación triste o un ambiente de niebla. Queda mejor cuando es en blanco y negro.

10. Balance blanco. Cuando haces un balance blanco en un color falso los resultados pueden convertir una escena normal en una situación bastante extraña.

11. Larga duración. Mantener el obturador abierto por horas es ideal para seguir la ruta de las estrellas en el cielo, por ejemplo.

12. Infrarrojo. No todas las cámaras tienen esta opción, pero vale la pena conseguir una que lo haga. Las fotografías que usan esta técnica se ven realmente asombrosas.

He tratado de explicar estos 12 puntos de la manera más clara aunque escueta. Si entiendes inglés entra a http://digital-photography-school.com/adding-randomness-to-your-photos para ver fotografías con cada ejemplo y tener más información.

Es tan simple como usar degradados, nubes, desenfoques y por supuesto, pinceles:

Éste es un set de 7 brushes de alta calidad de QBrushes que puedes descargar haciendo clic en la imagen:

Un tutorial bastante completo y que definitivamente te va a ayudar a mejorar tus habilidades.

El enlace: http://abduzeedo.com/smoke-type-photoshop-10-steps

Son pasos a seguir para envejecer el rostro de una persona joven. En este caso, a Katie Holmes.

Básicamente consiste en ir modificando con la herramienta licuar algunas partes de la piel como las mejillas, nariz y pómulos, que son la que sufren más de la gravedad, quitarle color a ciertas zonas y aclarar otras y clonar arrugas y manchas de rostros de personas ancianas.

Yo traté de hacer lo mismo con mi rostro y creo que el resultado no estuvo nada mal:

El enlace: http://www.exguides.org/photoshop-tutorials/age-progression.html

Acá trataré de explicar un poco cómo funciona que estoy seguro también te va a ayudar en tu batalla contra Internet Explorer:

Cuando hemos definido un estilo nuevo, sea un div, tag o clase, normalmente la sintaxis es así:

#contenido {
    font-family: “Trebuchet MS”, Tahoma, Verdana;
    font-size: 14px;
    #font-size: 16px;
}

Acá se ha creado un área llamada “contenido”, por eso le colocamos un michi, y en las propiedades indicamos que la fuente es Trebuchet y el tamaño 14px, pero en Internet Explorer se verá con tamaño 16px. Esto se debe a que los navegadores bien hechos no reconocen la propiedad que tiene el michi (#), sólo IE, éste leerá que la letra mide 14 y luego se le indica que mide 16. Para el caso de Internet Explorer 6, en lugar de michi se pone guión bajo _.

Si conoces otro hack que pueda servir pasa la voz que la guerra contra Internet Explorer es dura.

La lomografía (del inglés lomography) es el arte de hacer fotografías con una cámara LOMO LC-A (cámara compacta de la marca soviética LOMO (en cirílico: ЛОМО). Es una cámara totalmente automática, de alta sensibilidad, capaz de registrar color y movimiento sin necesidad de flash y sin deformación. Las fotografías tomadas con esta cámara tienen unas características peculiares que las distinguen instantáneamente.
La lomografía enfatiza la fotografía informal y despreocupada. Lo que normalmente se consideraría un defecto o accidente (sobresaturación de colores, defectos ópticos, sobreexposición, etc.) se considera aquí un rasgo particular y artístico.

Las fotografías tomadas con la cámara Lomo tienen un look bastante particular, algo así como una mezcla entre vintage y HDR. Las imágenes logradas son fascinantes:

http://downstream.dk/index.php?n=1

http://www.lomography.com/ppp/

http://www.flickr.com/photos/eloquator/360162758/

 
http://www.flickr.com/photos/hleung/2064923373/

http://www.flickr.com/photos/lomographicsocietyinternational/576184123/

http://www.flickr.com/photos/lomographicsocietyinternational/576184107/

http://www.flickr.com/photos/tadeurdo/2886185120/

http://www.flickr.com/photos/vivia/393180493/

En http://www.lomophoto.com/fakelomo.php he encontrado este tutorial de 20 pasos para hacer un fake de lomografía en Photoshop que está en inglés y que acá traduzco:

1. Archivo: Abrir: escoge la foto que quieras.
2. Imagen: Ajustes: Brillo/Contraste: aumentar el contraste a 20.
3. Imagen: Ajustes: Tono/Saturación: aumentar la saturación a 20.
4. Marco Rectangular.
5. Dale a Feather 1/12 (un doceavo) del ancho de tu imagen (si la imagen mide 600px, el feather será 50).
6. Selecciona con la herramienta selección toda la imagen. La opción “Seleccionar todo” no funcionará.
7. Seleccionar: Invertir.
8. Crea una nueva capa.
9. Pinta la nueva capa totalmente de negro.
10. Cambia el modo de fusión de la capa negra a Superponer (Overlay).
11. Duplica la capa negra
12. Selecciona la capa de la imagen.
13. Duplica la capa de la imagen.
14. Selecciona la herramienta degradado.
15. Escoge la opción de degradado a esférico.
16. Escoge la opción de estilo de degradado como “color frontal/ transparente” (foreground to transparent). Es la que está por defecto.
17. Cambia tu color primario a blanco.
18. Con la herramienta degradé haz clic en la mitad de la imagen y arrasta una línea hasta el extremo más lejano de la imagen (depende de si el encuadre es horizontal o vertical).
19. Cambia el modo de fusión de esta capa a Superponer (Overlay).
20. Cambia la opacidad de esta capa a 80% (o como quede mejor).

Otro tutorial explicado con imágenes lo encuentras en Digital Photography School.

Puedes encontrar más imágenes en Flickr (http://www.flickr.com/search/?q=lomography&m=text)

En Photoshop Talent está paso a paso cómo conseguir este efecto y además puedes ver los resultados de algunas personas que han seguido el tutorial y han subido la foto. ¡Muy bueno!

El enlace: http://www.photoshoptalent.com/photoshop-tutorials/pst/500/Blue-glow-dreamy-portrait.html

Si no has tenido infancia, el ahorcado consiste en adivinar una palabra letra por letra antes de que ahorquen a un hombrecito de palos que se irá acercando a su condena cada vez que no acertemos en la letra correcta.

En FlashExplained he encontrado este tutorial, que si bien está en inglés, se entiende facilito por la cantidad de gráficos y ejemplos que coloca. Además sirve muy bien para aprender y reforzar nuestros conocimientos en XML o al menos darnos una idea de qué va todo eso.

Al final tendrás una versión personalizada que estoy seguro podrás combinar con una que otra pastrulada para terminar con una mezcla de Tetris con Arkanoid y Michi.

El enlace: http://flashexplained.com/actionscript/how-to-make-a-dynamic-hangman-game-in-flash-8-with-xml-and-actionscript/

Sin embargo, cuando se trata de ser el rostro imagen de una publicidad, o aparecer sin mácula en la foto de promoción, es importantísimo que todos nos vean y recuerden como si nuestra piel fuera de terciopelo, como el poto de un bebé.

Felizmente tenemos a Photoshop que nos soluciona la vida, al menos esa vanidad engañosa. En este tutorial que he encontrado en Tutiki nos enseñan cómo convertir una cara llena de granos y manchas en un rostro angelical:

El resultado es bastante bueno y muy revelador. No te decepciones cuando conozcas en persona a esa modelo de revista por la que tanto babeas. Y antes de photoshopear la paja en la cara ajena quitemos la viga que tenemos en la nuestra.

El enlace: http://www.tutiki.org/w/index.php/Beautiful_Skin_by_Czechman

Si bien no creo que la idea ser hacer el mismo template, sirve muchísimo para mejorar nuestra técnica photoshopera. ¡Hay unos efectos y tips buenísimos!.

El enlace: http://psdtuts.com/tutorials/interface-tutorials/create-a-magic-night-themed-web-design-from-scratch-in-photoshop/

A nivel de gráfica, porque de usabilidad estamos hablando totalmente de otra cosa, el 2.0 es básicamente diseño minimalista, brillos y reflejos en los logos y botones grandes.

Acá hay un par de tutoriales para crear justamente esos efectos para los logos. El primero enseña cómo crear el famoso reflejo:

http://www.bittbox.com/illustrator/tutorial-web-20-logo-reflection-in-vector-format-with-illustrator/

Y este otro muestra cómo hacer el brillo dentro del logo.

 
http://www.bittbox.com/illustrator/glossy-vector-web-20-logo-text-in-5-easy-steps/

No son para nada complicados. Con un poco de observación y práctica estoy seguro dominarás este estilo que poco a poco irá desapareciendo como toda moda

El acabado está bastante bueno aunque yo le borraría ese espectro azul grisáceo que hay a la izquierda. Al finalizar el tutorial vas a encontrarle utilidades interesantes para las nubes de diferencia, que no sólo sirven para crear nubes precisamente.

El enlace: http://www.123rf.com/blog/blog.php?idblog=b1000075

Tal es el caso de este efecto que hicieron para su saludo navideño y calendario 2009, una técnica que a mí me gusta mucho porque juega mucho con la óptica y te obliga a alejarte o hacer de chino y entrecerrar los ojos:

De cerca no ves un carajo, además de ser un dolor de cabeza, tienes que alejarte para entender lo que hay en los puntitos.

En su blog explican, de manera muy general, como lograr esta técnica y proponen algunos ejercicios que no nos hacen nada mal seguir y aprenderla para poder aplicarla a algún diseño “innovador”.

El enlace: http://www.zen.es/zenblog/efectos-de-texto-con-tramas-y-mascaras/

En Photoshop, al grabar la imagen en “Save for Web…” aparece sólo como Progresivo. Si desactivamos la opción, pues será Baseline.

Básicamente se trata de la forma en cómo va a descargarse la imagen cuando naveguemos por Internet. Para poder elegir uno de ellos debemos saber cómo funciona cada uno, fíjate en las dos imágenes de abajo:

Baseline

Progressive

Lo que hace la opción Baseline es descargar la imagen línea por línea, desde arriba, mientras que Progressive lo hace mostrando toda la imagen pero en baja calidad.

¿Por cuál debemos optar? Yo creo que la respuesta es sencilla. Si Photoshop pone por defecto Progressive debe ser por algo. A veces es molesto tener que esperar a que cargue la imagen completa para enterarnos de qué se trata, sobre todo si estamos usando conexiones lentas o navegando a través de un Smartphone. Esta opción nos permite entrar en contexto mucho más rápido que Baseline y, si la imagen nos interesa, pues podemos esperar a que cargue. Sino, saltamos de página o seguimos leyendo.

Para leer más información puedes entrar al blog Yahoo! User Interface Blog (en inglés).

Visto en El Clérigo

Si bien esto es relativo, ya que puedes adaptar un theme a tu necesidad, una alternativa, quizá por la que por naturaleza los diseñadores gráficos se inclinen, es crear un plantilla propia. Y de hecho no está mal, sólo que yo considero, habiendo ya tantos temas creados que se pueden modificar, que es invertir tiempo innecesario ($alvo que el cliente lo justifique).

Lo que sí es un error es pretender que diseñar una web es solamente colocar elementos bonitos y lograr que se vea bien. O peor aún, llenarlo de animaciones en Flash e ilustraciones recargadas super tech porque es “moderno”. En todos los años que he dictado el curso de multimedia y web he visto que la gran mayoría de futuros diseñadores gráficos olvidan lo más importante: Usabilidad.

Para darnos una idea de la importancia de diseñar usando Wireframes, Yahoo! ha lanzado una indispensable librería de esténcils que podemos descargar y usar gratuitamente para trabajar el diseño funcional de nuestra web.

Si eso lo combinamos con las plantillas de navegadores que publiqué hace un tiempo, podemos hacer nuestro trabajo un poco más sencillo y enfocarnos en lo que realmente importa.

Ahora, ¿qué pasa si no soy bueno diseñando gráficas? Ya tengo solucionado el tema de estructura porque he comparado con mis esténcils otras web y mi diagramación está resuelta. Ya tengo el 50%, sólo falta la gráfica. Ahí muero.

No tanto en realidad, justo ayer encontré este tutorial en Photoshop Lady que más o menos nos da unas luces de cómo debemos diseñar un template de manera profesional.

El resultado queda más o menos así, con unas variantes, pero no importa tanto el diseño final sino qué aprendemos durante el proceso, y eso, con el tiempo y práctica, nos va a permitir poder desarrollar verdaderos diseños impactantes, pero sobre todo FUNCIONALES.

El enlace: http://psdtuts.com/tutorials/interface-tutorials/how-a-simple-layout-can-be-mixed-n-matched-with-patterns-photos-and-backgrounds/

La idea es escribir un artículo de cualquier cosa sobre diseño, puede ser un tutorial, la reseña de un libro de diseño, recursos como brushes o tipografías, etc. y si es aceptada te llevas el premio. Muy simple.

Y no sólo eso sino que además, por cada post aceptado y publicado, ellos donarán 100 dólares a Save The Children. Su intención es donar 5000 dólares. Nada ambicioso.

Acá algunos premios (en inglés):

• Wacom 9×12 Tablet or Choice of Camera Lens at $500 in value
• PSD to Wordpress Theme 10-Day Turnaround at WP Coder
• 1-Year Premium Subscription to Lynda.com Onling Training
• 3-Month Subscription to WooThemes Premium Wordpress Themes
• 6-Month Featured Seller Membership on IncSpring
• Stationery, Comp Slip, Business Card Package by Graham Smith of ImJustCreative
• Elite By Design "Video" Wordpress Theme
• Simple Please Premium Wordpress Theme
• 300 Premium Textures from the Colorburned Texture Shop
• 3 Premium Fonts from Bittbox.com
• Vintage Mega Vector Pack and Vector Pack of Choice from Designious
• Premium Review from the UX Booth
• The Problogger Book (Donated by Chitika)
• "Principles of Beautiful Web Design" donated by Design Blurb
• Jim Bunch’s "The Magic of the MasterMind" e-book
• IncSpring t-shirt
• 600×100 Ad on Front Page of Tutorial9.net (1-month)
• 1-Month Ad on FuelYourCreativity.com

Ponen algunos requisitos como que tu trabajo sea original y que no esté publicado en ningún otro sitio.

¡Si te animas a participar avísame para publicarlo!

El enlace: http://www.tutorial9.net/news/tutorial9-presents-the-gift-of-knowledge-giveaway/

En Photoshop  Lady han hecho esta lista en base a las visitas que han tenido los estos tutoriales. Y la verdad no están nada mal, no sólo son efectos grandiosos sino que están muy bien explicados.

Esta lista es mejor que cualquier curso presencial de Photoshop. Estoy seguro que mejorarás tu habilidad muchísimo después de haber hecho unos cuantos.

El enlace: http://www.photoshoplady.com/the-100-most-popular-photoshop-tutorials-2008/

Por que cuántas veces has necesitado darle un nombre secuencial a una cantidad enorme de botones o clips de película dentro de una escena y escribir “boton1, boton2, boton3, boton4,…boton55” es muy tedioso e inútil. Recuerda que Flash está hecho para hacer valer la ley del mínimo esfuerzo. Y no, no es para vagos, sino que mientras menos trabajes más harás.

Si quieres resolver eso de manera más práctica, poder asignarle nombres secuenciales a un gran grupo de símbolos sólo tienes que crear un archivo llamado "NombreSecuencial.jsfl", edítalo con el bloc de notas y copia el siguiente código (está en lenguaje JavaScript para Flash):

// *****************************************************************************
// Coloca como nombre de las instancias seleccionadas un prefijo y un consecutivo.
// hisayuki takagi | www.wildcard.jp.org
// *****************************************************************************
var cur_doc = fl.getDocumentDOM();
var ui = cur_doc.xmlPanel(fl.configURI + "Commands/NombreSecuencial.xml");
var sa = new Array();

for(var i1=0; i1<cur_doc.selection.length; i1++){
   if(cur_doc.selection[i1].elementType == "instance" || cur_doc.selection[i1].elementType == "text"){
      sa.push({obj:cur_doc.selection[i1],pos:cur_doc.selection[i1].top*1000+cur_doc.selection[i1].left});
   }
}
sa.sort(cmp_pos);
function cmp_pos(a, b) {return a.pos – b.pos;}

for(var i1=0; i1<sa.length; i1++){
   var n1 = ui.prefix+ (i1+1);
   sa[i1].obj.name = n1;
}

Luego crea otro archivo llamado "NombreSecuencial.xml", edítalo con el bloc de notas y coloca el siguiente código (escrito en XML User Interface Language -XUL):

<dialog id="ui" title="SetPrefix" buttons="accept, cancel">
<grid>
<columns>
  <column/>
  <column/>
</columns>
<rows>
  <row>
    <label value="prefix:   " control="prefix" />
      <textbox id="prefix" />
  </row>
</rows>
</grid>
</dialog>

Una vez creados y guardados, colócalos en la carpeta:

C:\Documents and Settings\Usuario\Configuración local\Datos de programa\Adobe\Flash CS4\es\Configuration\Commands

O una similar según tu configuración de la instalación de Flash.

Para usarlo debes seleccionar en Flash todos los clips a los que quieres ponerles un nombre con un prefijo y un número consecutivo, por ejemplo “btn”, para que se forme btn1, btn2, btn3 y así.

Luego de seleccionarlos abres el menú "Comandos" y debe aparecer el nombre "NombreSecuencial", lo seleccionas y se ejecuta el script. Te presentará una ventanita donde tienes que poner el prefijo que llevarán los nombres de instancia (btn en nuestro ejemplo), y luego oprimes OK. Todos los clips que seleccionaste aparecerán con el nombre de instancia que pusiste y un numero consecutivo, ordenado de acuerdo a su posición, los primeros son los que se encuentran en la parte superior izquierda, y los últimos son los que se encuentran en la parte inferior derecha.

La salvada se la debo a gabynufe de Cristalab que muy gentilmente me pasó este código hace ya un buen tiempo.

El diseño no es una maravilla pero tampoco es lo importante. Si quieres tips sobre cosas muy puntuales para After Effects, estás en el lugar correcto.

El enlace: http://www.caciquefilms.sspoint.com/index2.html

El sitio es VideoCopilot. Está lleno de tutoriales de altísima calidad y, a diferencia de otros lugares, no sólo tienes el video para verlo y seguirlo sino que también te da los archivos que se usaron, para que puedas usar los mismos videos y completar el efecto tal cual está en el tutorial.

¡Bastante útil! Ojo, para poder usar los archivos del tutorial deberás tener instalado QuickTime porque usa videos en formato mov.

El enlace: http://www.videocopilot.net

Definitivamente mi logotipo no se presta para el ejemplo, pero valgan verdades que en el intento he aprendido a darle brushes a un path.

El enlace: http://pshero.com/archives/text-in-stitches

Practicar alguno de ellos no vendría nada mal para aprender algunos truquillos y hacernos más diestros.

El enlace: http://www.smashingmagazine.com/2008/11/03/photoshop-tutorials-to-improve-modeling-skills/

Pues de esto se trata el siguiente tutorial, está en un inglés bastante entendible y te explica paso a paso como lograr una ilustración como la de arriba. Prometo buscar tutoriales más sencillos para principiantes como yo.

El enlace: http://www.derekyu.com/?page_id=218

Marketplaces, donde están FlashDen, AudioJungle y ThemeForest que son sitios donde uno puede comprar y vender componentes de flash, loops y tracks libres de regalías y plantillas para WordPress, Joomla, etc. Bastante interesante tanto si necesitas material relativamente económico o si quieres ganar algo de dinero con tus propias creaciones.

Tutsplus es la sección educativa: AUDIOTUTS,  NETTUTS,  PSDTUTS y VECTORTUTS, que están muy bien nutridos de tutoriales sobre audio, internet y diseño web, Photoshop e Illustrator.

Y por último tienen también otros servicios como FreelanceSwitch que es un blog especializado sobre trabajo freelance con muy buenas sugerencias sobre CRM y administración. También está FaveUp que es básicamente un galería de buenos trabajos para lograr inspiración.

Definitivamente Envato es un sitio obligado para diseñadores.

El ejemplo queda bastante simpático y si tenemos fotografías tomadas con un ángulo picado o ligeramente inclinado desde arriba, podremos hacer lo mismo.

El enlace: http://www.tiltshiftphotography.net/photoshop-tutorial.php