Efecto para banners en flash y as2

Hoy vamos a aprender a hacer un interesante efecto que puede ser utilizado en banners o en lo que se les ocurra.

Sobra decir que toca abrir el flash, pero he encontrado gente que nada le parece obvio, así que “por favor ejecute su flash versión 8 en adelante”.
Ahora le decimos “archivo de flash (AS2)” .
Este tutorial lo voy a hacer con cs4, pero como vengo usando el flash en versiones anteriores la verdad no me acostumbro a tenerlo con la nueva interfaz, así que voy a ventana > espacio de trabajo> clásico.
Configuramos el tamaño que queremos, en este caso 230px X 173px:

Importamos una imagen de fondo ctrl+R, presionamos ctrl+k para que nos salga el panel de alineación y le decimos que nos alinee con respecto a la escena tanto vertical como horizontal.:

Creamos una nueva capa:

Ahora hacemos un cuadro del color que queramos y lo convertimos a clip de película con la tecla F8:

Ahora entramos en el clip dándole doble click al cuadro. Señalamos nuevamente el cuadro y lo convertimos nuevamente en clip de película (F8) para poder animar por movimiento.
Vamos al fotograma número 20 y presionamos F6 para poner un fotograma clave. Luego nos situamos entre los dos fotogramas (1 y 20) y presionamos el click derecho y le ponemos crear interpolación clásica. (Si no convertimos el objeto a click de película el programa nos crea automáticamente el clip, pero cuando tenemos un proyecto grande vamos a tener problemas por utilizar esos nombres genéricos que crea el programa, como animar1, animar2 etc.)

Nos paramos en el primer fotograma y le damos click al cuadro para que nos salgan las opciones de estilo, y le ponemos un alpha al 100%:

Luego vamos al último fotograma y hacemos lo mismo, opciones de estilo>alpha, pero esta vez le ponemos 0%.

Si publicamos (Ctrl+enter) vamos a ver un cuadro titilando, así que cerramos y continuamos con el código.
Vamos a pararnos en el primer fotograma y vamos a presionar F9, dejamos presionado la tecla “Esc” y presionamos seguidamente la letra “S” y luego la letra “T” esto con el objetivo de hacer un stop “stop();”, seguidamente vamos a escribir esto:

onRollOver = function(){
gotoAndPlay (2)
}

Bien ahora salimos del clip dándole click a escena 1:

Ya afuera vamos a mantener la tecla “alt” mientras arrastramos nuestro cuadro (para mantener una misma trayectoria en esta copia de instancia dejamos presionada la tecla “shift” luego de arrastar y no soltar). De esta forma vamos a arrastrar y soltar tantas veces sea necesario para cubrir de manera homogénea toda la imagen:
(para señalar varios clips de manera independiente deja presionado el botón “shift” mientras das click en los clips)


Cuando tengamos tapada toda nuestra imagen le damos publicar (ctrl+enter) y vemos k al pasar el mouse por las partes de nuestra película se nos va a descubrir la imagen y nos va a dar un efecto interesante.

Final:

Como siempre espero que te haya gustado y si puedes enlázame el blog ;)
Es importante que pruebes con distintos tamaños, colores y animaciones para que le saques provecho a este humilde tuto.

Hasta pronto.

Como hacer contorno con fondo transparente en photoshop

Primero que todo pido disculpas a nuestros visitantes por no publicar seguido como lo hacia anteriormente, pero el trabajo me ha quitado mucho tiempo para compartir información.

En esta ocasión quiero colaborar con algo sencillo pero que para la persona que no lo sepa puede llegar a ser un dolor de cabeza. Pues bien, voy a mostrarles como hacer un simple contorno usando una figura vectorial.

Como siempre lo primero que vamos a hacer es abrir un documento nuevo: crl+n , ponemos un fondo ya sea arrastrando nuestro .jpg desde la carpeta en donde lo tenemos o simplemente lo jalamos desde internet hasta nuestro archivo nuevo.

Ahora creamos nuestra figura vectorial presionando la letra “u”.  y seleccionamos el color blanco (esta es la clave para que quede transparente) y hacemos nuestra figura:

TIP:  Es posible que nos salga el cuadro, pues para cambiar a circulo presionamos shift+ u tantas veces como lo necesitemos.

Vamos al botón Fx y seleccionamos trazo:

Escogemos nuestro color y el grosor de la línea. Luego presionamos ok

Para finalizar vamos a modos de fusión y le damos Multiplicar y listo:

Como vemos también funciona con las fuentes:

Si te gustó, enlazanos desde tu página.

Tutorial Virado en photoshop ( efecto envejecido)

Hoy me sacudo un poco la pereza para enseñarles como hacer un virado y/o efecto envejecido a una foto en photoshop.

Aunque este tutorial puede parecer un poco básico, la verdad es que usando un poco la imaginación podemos conseguir otro tipo de resultados.

Lo primero que vamos a hacer es conseguir una foto, en este caso:

Presionamos ctrl+J para sacar una copia de nuestra capa.

Presionamos ctrl+shift+u para desaturar (poner en blanco y negro nuestra foto):

Ahora le damos click a crear nueva capa de relleno o ajuste:

Ponemos color uniforme y seleccionamos un café como el que yo he escogido y le damos OK:

Finalmente ponemos esta capa como luz suave y ya está:

Esta última le he puesto dos texturas grunge que encontré por google, a una le he puesto luz suave y a la otra le he puesto multiplicar. Espero les haya gustado el efecto de envejecido / virado en photoshop.

Se te gustó enlaza este blog.

Efecto sueño en photoshop

Hoy quiero enseñarles un efecto en photoshop que según mi criterio simula un sueño, muy visto en series o  en películas.

Lo primero que hacemos es sacar una copia de nuestra imagen: (ctrl+j o arrastramos nuestra imagen hasta el icono de duplicar capa)

Vamos a filtro >  desenfoque gaussiano>  y le damos este parámetro. Lo importante es no darle mucho ni poco:

Ahora vamos a nuestra paleta de capas y ponemos sobre poner:

Finalmente podemos dejarlo hasta ahí, o también podemos duplicar la capa a la que le hemos puesto el desenfoque para marcar mucho más el efecto.

Si te ha gustado enlázame.

PNG transparentes en IE6

No es nada raro que estemos creando una página con css y en el momento de probarla en el odioso Internet explorer 6 nos damos cuenta que no salen los png transparentes. Aquí es cuando empezamos a buscar como locos la solución a este problema.

Pues bien, existen varias posibilidades, entre ellas archivos javaScript; que para mí no fueron útiles, quizás porque no seguí correctamente las instrucciones; sin embargo encontré este código css el cual me funcionó perfectamente, por esto quiero compartirlo con ustedes:


#capaPng {
height:300px;
width:400px;
background-image:url(imagenes/img.png) !important;
background-image:none;
filter:none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dixso.net/wp-content/examples/css/png-ie/imagenes/img.png');
}

Es sumamente importante poner la ruta absuluta para la imagen PNG en la línea "filter", por otro lado y no menos importante, es colocar la altura (height) y anchura (width).

Con esto seguro ya podrá trabajar imágenes PNG. Sin embargo otro problema muy común con estas imágenes PNG es cuando las queremos como fondo en nuestros botones o incluso en un input, ya que los botones dejan de ser pulsables y el input parece ser una imágen más. La solución es la siguiente:

En el css para que los links con fondo PNG en IE6 funcionen se debe cumplir lo siguiente:

* La capa que tiene el filter no puede tener “position:absolute”. Por encima de ella sí se pueden poner divs con posicionamiento absoluto conteniéndola.
* A la capa filter debe aplicarsele estilo mediante identificador id=”", con class=”" no funcionaría.
* Los elementos activos contenidos en la capa filter deben tener definido explícitamente el atributo position a absolute o relative.



Gracias ha:
http://www.tripix.net
http://dixso.net

Como cambiar de hosting nuestro joomla

Hola, en ocasiones tememos cambiar de hosting porque nuestra página está hecha en un gestor de contenidos como joomla. Así que nos entra el miedo de perder nuestro trabajo. Por esto hoy traigo la solución para cambiar de hosting nuestro joomla sin perder lo que ya hemos hecho (quiero aclarar que esto lo he encontrado en el caché de una página que ya no existe):

"Bueno, los pasos para la mudanza, son bien simples y los enumero a continuación:

1. Hacer un backup de la base de datos. Esto lo pueden hacer utilizando la opción “exportar” desde phpMyAdmin (herramienta con la que probablemente cuenten en su hosting).

2. Hacer un backup de TODOS los archios existentes en la instalación actual de tu sitio (vía ftp por ejemplo o bien utilizando algún sistema de backup ofrecido por tu hosting).

3. En el nuevo servidor, hacer una instalación limpia de Joomla! utilizando la misma versión que tenías instalada en el viejo hosting. Esto es para asegurarnos la compatibilidad de funciones, etc. Entonces si antes tenías una 1.5.14, para la nueva instalaciones tenés que descargarte una 1.5.14, subirla vía ftp al nuevo servidor e instalarla. Cabe recordar que previamente a la instalación tenés que crear la base de datos en el nuevo servidor (no es necesario que el nombre de la base y el usuario sean los mismos que los anteriores. Si estas cambiando de servidor es muy probable que no puedas asignarle el mismo nombre de base y nombre de usuario).

4. Acá viene lo bueno. Subir (y pisar o sobreescribir) todos los archivos de la vieja instalación al nuevo hosting. TODOS menos (y el más importante) configuration.php. Porque no hay que pisar este archivo y los demás si?. Este archivo contiene la configuración del nuevo entorno, por lo cuál si lo pisas con el de la vieja instalación se te va a armar un quilombo de la puta madre. Asi que NO SUBAS EL ARCHIVO CONFIGURATION.PHP TE DIJE!!!.

5. Solo nos falta restaurar el backup de la base, para ello utilizamos nuevamente phpMyAdmin e importamos el script del backup de la vieja base a la nueva. Acá previamente hay que ELIMINAR todas las tablas de la nueva instalación ya que elscript anterior viene con los CREATE TABLE necesarios para restaurar la base completa.

6. Navegar el sitio, probablemente todo ande de maravillas :P

Con respecto a EXPORTAR e IMPORTAR, vale aclarar que al hacerlo no deberían tocar ninguna opción. Así como las presenta de manera predeterminada, así deberían quedar. Con esto nos aseguramos que en ambos casos la operación se realizará correctamente. Una variante de esto es crear el script de exportación con la opción “Añada DROP TABLE”, si hacemos esto, no será necesario eliminar las tablas de la nueva instalación antes de importar ya que ésta sentencia eliminará y creará cualquier tabla que encuentre en su camino.

Para resumir:

1. Exportar la base de la vieja instalación.
2. Backup de archivos y carpetas vía ftp.
3. Instalar Joomla! en el nuevo servidor.
4. Subir y pisar todos los archivos del paso 2 menos configuration.php.
5. Importar la base del paso 1.
6. Voila!

Vale aclarar que estos pasos pueden probarlos en su pc para ver si todo anda bien y asegurarse que el paso a producción no traerá problema alguno.

Existen extensiones que hacen esto por nosotros pero para que complicarse tanto si los pasos son bien pedorros?."

Por mi parte me ha servido un montón, espero les sirva igual.

Sacado de: http://www.estoesproduccion.com.ar

---------------------------

Hace poco he tenido que cambiar varias páginas de hosting, y al ser tantas tuve que replantear la forma de hacer este cambio de hosting y encontré una solución más practica.

La idea es solo subir los antiguos archivos al hosting nuevo, subir la antigua base de datos  y modificar el configuration.php:

    var $host = 'localhost';
    var $user = 'Nuevo usuario';
    var $db = 'nueva base de datos;

Y listo.
Hasta pronto.

Como crear y usar Favicon.

Un favicon en general es ese pequeño icono que tienen las páginas web en la parte superior; si quieres profundizar mira este enlace: http://es.wikipedia.org/wiki/Favicon.

Lo primero que vamos a hacer es crear nuestro icono, para posteriormente insertarlo en nuestra página.
Según mi experiencia, este icono se puede crear en photoshop:

• Descargamos e instalamos el plugin para  guardar en formato .ico desde photoshop: http://www.freedownloadmanager.org/es/downloads/Enchufe_de_uni%C3%B3n_de_Icono_para_Fototienda_38086_p/free.htm
• Luego abrimos nuestro photoshop, Ctrl+N y le damos las dimensiones de 16x16 px.
• Importamos nuestra imagen, Ctrl+t , Ctrl + 0 y dimensionamos nuestra imagen para dejarla al tamaño de nuestro lienzo.... De ahi en adelante es darle rienda suelta a tu imaginación.
• Para terminar guardamos como .ico 

Ahora ya tenemos nuestro .ico. Es un proceso, aunque no muy largo si se podría acortar:

• Entra en esta página: http://www.favicon.cc/  o esta http://www.html-kit.com/e/favicon.cgi?m=1
• y ya, jejeje.

Ahora vamos a usar nuestro Favicon:


Lo que vamos a hacer es colocar este código en nuestro html entre las etiquedas del head:

[head]
[link rel="shortcut icon" href="favicon.ico" /]
[/head]

*sustituir los [ ] por un menor que y un mayor que.

Como es obvio tienes que subir el favicon.ico y tu archivo .html en la misma ruta para que funcione.

Si te gustó enlázame.