martes, 3 de julio de 2012

[Video] Haciendo maravillas con el Photoshop


[Video] Haciendo maravillas con el PhotoshopMe entero en NFG sobre un ruso llamado Alexander Koshelkov que entre su talento más destacable está el hecho de hacer de los mejores fotomontajes que quizá uno pueda encontrar. Y es que no bromeo, lo que el hace es crear escenas desde cero, arrancando partes de imágenes y juntándolas de tal forma que el resultado pareciera que es una composición única.
Lo que más me ha impresionado de este diseñador es el uso de las sombras y luces, y como añade detalles bestialmente, porque cuando pareciera que ya todo está bien le sigue añadiendo más detalles, algo que muchos no hacen por temor a estropear todo.
Entonces vamos a deleitarnos un poco la pupila observando como este genio trabaja el lienzo para crear obras increíblemente espectaculares, digno de mi admiración completa, y otra razón más para poder entender qué es lo que tienen los rusos con la computadora.

Crear una barra de navegación estilo Google+ con CSS3 y jQuery


image
Hace poco que Google actualizó su interfaz para ya no parecerse a la interfaz vieja de Facebook, pasando un poco a parecerse un poco a la nueva interfaz. Lo que caracterizó este cambio fue la nueva barra de navegación, la cuál se ubicó a un costado con unos íconos muy pispiretos.
En este tutorial vamos a ver cómo crear una barra de navegación estilo Google+ con CSS3 y jQuery, una barra que la trataremos de estandarizar para aplicarla a nuestro contenido, y verán que la elaboración es muy fácil, pudiendo añadir sus propios íconos si ustedes quieren. Así que no se pierdan el tutorial.
Crear una barra de navegación estilo Google+ con CSS3 y jQuery

HTML5

href="#nExplore"> id="nExplore">Explore
href="#nGames"> id="nGames">Games id="flecha">
id="aHome">

Home

src="imagen1.jpg"> id="aExplore">

Explore

src="imagen2.jpg"> id="aGames">

Games

src="imagen3.jpg">
Este tutorial tiene HTML5 pero de una forma muy sencilla. Lo que tenemos para nuestra estructura son tres partes principales. La primera parte es la barra de navegación, los botones laterales, los cuales tienen como todo englobado un link, y dentro una capa con un id respectivamente. La segunda parte consta de la flecha que vamos a usar para apuntar a la sección que estamos actualmente viendo. Y por último está la parte de contenido, hay un section que actúa como contenedor y dentro tenemos en este caso tres capas con su respectivo id. Noten que tiene un id parecido al texto del menú, porque esto nos va a servir para poder mostrar el contenido correcto cuando usemos jQuery.

CSS3

Si nos damos cuenta la estructura no es muy diferente a cualquier menú de navegación o de tabs. Lo más importante es la configuración de las hojas de estilo para darle el aspecto e imagen que queremos.
nav{
    		position: fixed;
			left:45px;
			margin-top:20px;
		}
		section{
			border-radius: 5px;
			border: solid 1px #ccc;
			background: #fff;
			left:140px;
			position: fixed;
			height:70%;
			overflow: auto;
			width: 70%;
		}

		article{
			padding: 10px;
			display: none;
		}
		nav div{
			background: blue;
			color: #aaa;
			cursor: pointer;
			font-size: 12px;
			margin-bottom: 25px;
			padding-top: 30px;
			text-align: center;
			width: 90px;
		}
		nav a{
			text-decoration: none;
		}
Lo primero es configurar el menú y el contenido para ubicar todo antes que nada. En realidad esta es la parte que pueden configurar a su gusto, yo la use para adecuarla a lo que yo quería, pero pueden jugar con esta parte un poco.
#flecha {
    		position: fixed;
			left: 141px;
			top: 30px;
			height: 30px;
			z-index: 1;
		}
		#flecha:after, #flecha:before {
			right: 100%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}

		#flecha:after {
			border-right-color: #fff;
			border-width: 10px;
			top: 50%;
			margin-top: -10px;
		}
		#flecha:before {
			border-right-color: #ccc;
			border-width: 11px;
			top: 50%;
			margin-top: -11px;
		}		
Lo siguiente es configurar la flecha para indicar en qué sección estamos actualmente. Esto si tiene que involucrar CSS3 y un poco de magia para hacer con puro CSS un triángulo. Recuerden que todo está en position: fixed, por lo que no van a poder mover nada, o en otras cosas, no es muy responsive design, pero pues la interfaz de Google+ también es así, así que de alguna forma sigo el funcionamiento. Nótese la importancia de usar :after y :before para poder hacer el recorte del rectángulo.
#aHome{
    		display: block;
		}
		#nHome{
			background: url('home.png');
			background-repeat: no-repeat;
			background-position: center 0;
		}
		#nHome:hover{
			background-position: center -52px;
			color: #000;
		}
		#nHome:target, .actual{
			background-position: center -52px !important;
			color: #000;
		}
		#nHome:active{
			background-position: center -102px;
		}

		#nExplore{
			background: url('explore.png');
			background-repeat: no-repeat;
			background-position: center 0;
		}
		#nExplore:hover{
			background-position: center -51px;
			color: #000;
		}
		#nExplore:target{
			background-position: center -51px;
			color: #000;
		}
		#nExplore:active{
			background-position: center -101px;
		}

		#nGames{
			background: url('games.png');
			background-repeat: no-repeat;
			background-position: center 0;
		}
		#nGames:hover{
			background-position: center -52px;
			color: #000;
		}
		#nGames:target{
			background-position: center -52px;
			color: #000;
		}
		#nGames:active{
			background-position: center -101px;
		}
Sin embargo ahora si llega lo más importante de todo. Nuestras opciones de menú constan de cuatro estados: cuando están normal (color gris), cuando el mouse está sobre la opción (:hover), cuando se presiona la opción (:active), y cuando es el que se está usando (:target). El :target es un nuevo estado que se activa cuando un objeto tiene su id en la barra de direcciones, como por ejemplo ..com/#nHome, en estos casos el estilo se activa para ese id y por eso usamos eso, para saber cuál es la opción que está actualmente en uso y así poder mostrar en cierta forma un ícono específico.
También como podemos ver necesitamos un estilo .actual que nos va a servir para indicar desde un principio cuál opción es la que se va a mostrar al cargar el sitio; ya veremos que con jQuery lo podemos quitar para que no quede seleccionado siempre elHome.
home
Después tenemos que nuestros íconos son un sprite, por lo que para el tutorial tenemos solo 3 imágenes que tienen 3 estados cada uno. El estado de :hover y :target son el mismo, así que no necesitamos otra imagen más. La tercer imagen es cuando se presiona el botón (:active). Por tal motivo usamos tres estilos para cuatro estados realmente, así repetimos con nuestras tres opciones, las que queramos.

jQuery

$(document).on("ready", inicio);

function inicio(){
	$("nav div").on("click", moverFlecha);
	$("#flecha").css("marginTop", $("#nHome").offset().top-25);
}
Comenzamos como cualquier inicio de jQuery, definiendo nuestra función de inicio(), pero noten que declaramos un evento para todas las opciones para mostrar y acomodamos la flecha para que apunte a la primera opción, la de Home. Usamos para esto un offset() para que se ubique y le quitamos 20 pixeles para que quede al centro de la opción.
function moverFlecha(){
	var nombre = $(this).text();
	nombre    = "#a" + nombre;
	$("article").hide();
	$(nombre).fadeIn();

	$(".actual").removeClass("actual");
	$("#flecha").animate({
		marginTop: $(this).offset().top-25,
	});
}
Ahora tenemos que configurar nuestra función. La trampa para hacer funcionar nuestro menú de una forma muy fácil es el texto que le ponemos a nuestras opciones, y el nombre del id que le pusimos a nuestros article. El article tiene un “a” seguido del texto de las opciones, entonces tenemos que formar el nombre de la capa que queremos mostrar de acuerdo a la opción que el usuario escogió. Después de que juntamos el nombre ocultamos todas las capas de contenidos y a continuación con un fadeIn()mostramos la adecuada. Lo que sigue es quitarle la clase al Home para que no se quede prendido siempre. Y por último usamos un animate() para mover nuestra flecha aloffset() de la opción que se ha elegido, le quitamos 20 pixeles y con eso aseguramos que esté más o menos en el centro de la opción.
Y con esto ya debemos tener bien configurado nuestro menú y contenedores listo para imitar el estilo de Google+, muy fácil porque es estático todo, pero quizá si añadiéramos un poco de Ajax con base de datos estaría más completito, pero quizá eso lo veamos en otro tutorial.

miércoles, 25 de abril de 2012

30 tutoriales: Efectos de Texto


Una magnifica recopilación de 30 tutoriales. Tipografía es el tema clave de estas obras. Una multitud de ideas para dar un toque especial y totalmente individual para nuestros textos y letras.

Crear Super Tipografía brillante 3D en Illustrator y Photoshop

Crear letras de cristal rellenas de líquido en Photoshop
Crear tipografía elegante de cristal en 3D en Photoshop e Illustrator
Crear un efecto de Texto CMYK  3D en Photoshop y 3D Studio Max
Fuente: designm.ag