Archivo de la categoría: "Tutoriales | Tips"

Sutil efecto de relieve para textos

Monday, April 18th, 2011

Este es un efecto que suele usarse muchísimo en diseños simples y que busquen mostrar cierto estilo minimalista, es el clásico efecto en que la letra pareciera estar con un pequeño relieve, cosa que queda muy bien y (lo mejor de todo) es muy sencillo de hacer.

Voy a usar Inkscape, cualquier otro editor de gráficos vectoriales (decente) sirve igual.

Importante, prestarle mucha atención a los colores a utilizar. Yo lo voy a hacer con la más clásica (a mi entender), que sería un negro #2A2A2A para el texto (el #000000 no queda muy bien que digamos), un blanco puro (#FFFFFF) para la sombra, y un gris claro de fondo (#E9E9E9 va bárbaro). El esquema de colores que acabo de escribir es el que más me gusta, pero se podría hacer con otros tonos distintos, sólo es cuestión de andar probando.

Primero, escribimos nuestro texto color #2A2A2A. (La tipografía utilizada es la de Ubuntu)
txtSinSombra

Segundo, copiamos y pegamos el texto ensima del que acabamos de crear. De manera que ahora tenemos 2 textos exactamente iguales, uno arriba del otro. Al texto superior le damos de color blanco y le aplicamos un desenfoque de 1,0 (el valor de desenfoque puede variar de acuerdo al editor de gráficos vectoriales usado, la idea es que sea un desenfoque puequeño)
txtConSombra

Tercero, corremos una pequeña distancia el texto color blanco desenfocado hacia abajo. Luego lo llevamos al fondo
txtConSombraFINAL

Comparen la pequeña sombra blanca que tiene la 3º imagen respecto a la 1º. Es algo muy sutil pero que queda muy bueno ya que le dá más luz y relieve al texto.

Descargar videos de Youtube en GNU/Linux

Tuesday, December 21st, 2010

Este tip es bastante corto, trata de cómo hacer para guardar en el disco duro de la PC un video que está embedido en un Flash Player de un sitio web. Un muy buen ejemplo de esto son los videos de YouTube.

Descargar videos de YouTube

  1. Cargamos el sitio en donde está el video
  2. Vamos a la carpeta /tmp y lo copiamos a donde querramos

Primero nos vamos a la página en la que se encuentra el video que vamos a descargar, y dejamos que se cargue, tal como si lo fuesemos a ver desde la misma web. Una vez que finalizó la descarga del video vamos a la carpeta /tmp (siendo / el directorio raíz) en esta carpeta, como su nombre ilustra, se guardan los archivos temporales que en nuestro caso va a ser en video en cuestión. Lo que nos resta hacer es copiar el video a otra carpeta que no sea tmp ya que cuando cerremos el navegador web éste video se va a borrar (por ello el nombre de la carpeta “tmp”, de temporal). Generalmente el nombre del video comienza con Flash y seguido de una serie de caracteres. Por ejemplo FlashXXSr5v3f

Obviamente todo esto funciona de esta manera si están usando GNU/Linux, aunque igualmente pueden probar lo mismo en otro S.O. lo único que variaría es la ruta en que se encuentran los archivos temporales

Evitar que una imagen colapse un DIV

Tuesday, January 26th, 2010

Cuando tenemos un DIV con un ancho fijo y dentro de él colocamos una imagen que supera las dimensiones del DIV que la contiene, lo que sucede es que la imagen en cuestión colapsa y se sale de su elemento contenedor.

Usando la propiedad max-width lo que se logra es que la imagen no sobrepase un ancho prefijado y de esta manera que no colapse.

Ejemplo (con un div con borde verde):

imagen desborda div

la imagen desborda el div

imagen desbord div

imagen contenida dentro del div

Para empezar construimos un simple código HTML que nos va a servir para colocar el div junto a su imagen (usen una imagen de tamaño grande para notar mejor el resultado)







imagen de prueba

Ahora si abren el archivo HTML en el navegador verían algo parecido a la primer imagen de arriba, es decir, la imagen en su tamaño completo colapsando al div contenedor. Lo que no verían sería el borde del div ya que hasta ahora no agregamos código CSS. Por eso lo siguiente es hacer el archivo style.css como sigue:

#a{
	width: 400px;
	border: 4px dotted #0f0;
}

#a img{
	max-width: 400px;
	height: auto;
}

Y acá lo importante es como está usada la propiedad max-width, que como el nombre indica, le dice  a la imagen el ancho máximo que puede tener, y también agregué la propiedad height: auto porque si a nuestra imagen en el HTML la declaramos con alto y ancho, entonces el max-width modificaría solamente el ancho pero como le damos height: auto entonces modificaríamos también el alto, para que no pierda su proporción inicial la imagen.

Cómo mover un objeto en Flash

Friday, January 16th, 2009

Este tutorial es muy útil a la hora de hacer un juego en Flash (aunquesea para el movimiento del personaje :P ).

Al finalizarlo va a quedar algo como esto, clickea la película y mueve los cursores…

Con el botón [ + ] haces que la pelota sea más veloz, con el [ - ] la haces mas lenta y con el reset la ubicas de nuevo en su posición original (por si te pierdes fuera de los márgenes). (more…)

Marcos sencillos en Photoshop

Saturday, January 10th, 2009

Con tan solo un paso vas a poder agregarle a tus fotos marcos muy fáciles de hacer.
marco3 (more…)

Crear un cielo estrellado en Photoshop

Thursday, January 8th, 2009

En este tutorial vas a poder hacer un cielo estrellado como se muestra a continuación en unos sencillos pasos ;)

Resultado

Resultado

(more…)