Cristalab

Rigging facial con huesos en 3D Autodesk Maya
Branches, SSH y flujo de trabajo con Git y Github (II)
Crea iconos Buddy en Photoshop
Centrar menú de ancho variable con CSS

Rigging facial con huesos en 3D Autodesk Maya

Posted: 18 Apr 2012 08:22 AM PDT

Haremos uso de Maya y su herramienta de huesos, para añadir elementos individuales de control, que nos ayudarán como manejadores de detalle adicional sobre otros sistemas de animación, como los Blend Shapes para desarrollo facial y otros específicos de otras zonas

Asignaremos nuevos controles y conexiones para ajustar la deformación y redirigirla a nuestro gusto, además de aplicar un Skin en la malla del modelo, para controlar y deformar los vértices y las caras como deseemos.

Saludos.

Branches, SSH y flujo de trabajo con Git y Github (II)

Posted: 17 Apr 2012 11:45 PM PDT

Aquí les dejo la segunda y ultima parte de mi introducción a Git y Github donde hablamos sobre Branches y también les enseño a realizar un workflow unido al servidor con SSH.

Este es el libro que les dejo para que puedan revisar con detenimiento más comandos de git. Lo que les mostré ahora es la forma básica en cómo se trabaja y lo que van a usar en su día a día: Pragmatic Guide to Git de Travis Swicegood.

Les dejo también el Cheat Sheet de la ayuda de Github.

Recuerdo que alguien me preguntó cómo eliminar archivos de git. El comando es:

Código :

git rm <nombre del archivo>

Quisiera agradecer infinitamente a Pablo Rigazzi (@prigazzi) por su ayuda, sin él este videotutorial no sería tan genial. Muchas gracias Pablo, soy tu fan

Y sin más espero sus comentarios y que les guste mucho. Hasta los próximos videos!

Crea iconos Buddy en Photoshop

Posted: 27 Mar 2012 06:11 AM PDT

En este videotutorial trabajaremos en la creación de un Buddy Icon en Photoshop, practicando con múltiples variaciones para enriquecer el diseño de uno de los elementos más ampliamente utilizados para referenciar a personas en la Web.

Saludos.

Centrar menú de ancho variable con CSS

Posted: 26 Mar 2012 11:46 PM PDT

Este tutorial explica cómo centrar menús CSS horizontales de ancho variable basados en listas.

Nivel: Básico.

El menú en con listas

Si existe un elemento común a cualquier proyecto web ese es el menú de navegación. Lo que me empuja a escribir este pequeño tutorial es que, según mi breve experiencia docente, todo maquetador web sabe como crear menús de navegación usando listas y CSS, pero la mayoría no saben cómo alinearlos al centro.

Crear el menú es muy sencillo. Primero creamos la estructura:

Código :

  <nav>         <ul>             <li><a href="#">Sección</a></li>             <li><a href="#">Otra sección</a></li>             <li><a href="#">La tercera sección</a></li>             <li><a href="#">Última sección</a></li>         </ul> </nav>

Después mediante CSS eliminamos los estilos de lista, y hacemos que los <li> floten a su izquierda:

Código :

 <style>         nav{             height: auto; /*Junto a overflow: hidden; aplicará a nuestro elemento nav el mismo alto que el más alto de sus elementos hijos */              margin: 0 auto; /* Centro el contenedor */             overflow: hidden;             text-align: left;             width: 960px; /* Defino el ancho de mi página */         }         ul{             float: left;             list-style-type: none; /* Elimino los estilos de lista */             padding: 0;          }         li{             float: left; /* Floto los li para que se dispongan horizontalmente */         }         li a{             padding: 10px; /* El padding añadirá separación entre los elementos */         } </style>

Cómo centrar el menú

Cuando definimos la propiedad float del li a left, no sólo ajustamos la disposición a horizontal, sino que además los estamos alineando a la izquierda y al revés con float:right;. Si conocemos el ancho total de los li podríamos ajustar al centro mediante padding en el ul, pero en la mayoría de CMS, donde el número de elementos de un menú puede variar, esta solución obliga a cambiar el css cada vez que añadamos, modifiquemos o suprimamos elementos. ¿Cómo alineamos nuestro menú al centro si el ancho del mismo es variable? Tan fácil como añadir 4 líneas:

Código :

 <style>         ul{             float: left;             list-style-type: none;             padding: 0;              /* AÑADIMOS */             position: relative;              left: 50%;         }         li{             float: left;             /* AÑADIMOS */             position: relative;              right: 50%;         } </style>

¿Qué ha pasado?

No. No es brujería.
Primero hemos definido las posiciones del ul y li como relativas. Al indicar la distancia de la izquierda del ul y de la derecha del li estamos colocando nuestros contenedores como muestra la siguiente figura: