09 junio 2010

HOSPEDAR LAS IMÁGENES EN BLOGGER

Muchas veces alojamos las imágenes de nuestra plantilla en sitos gratuitos como tinypic, imageshack, photobucket,etc..
y cuando estos sitios tienen una caída, dejamos de visualizar nuestras imágenes o son sustituidas por mensajes
que no gustan.
Esto me ha pasó a mi y lo podéis ver en esta captura:

3
A partir de ahí busqué la solución y  que mejor solución que alojarlas en el mismo blogger.
He migrado todas las imágenes de mi plantilla a blogger y aunque es trabajoso tiene su recompensa.
Para ello , abrimos  Diseño>Edición de html>expandir plantilla de artilugios.
Ahora hay que ir buscando y copiando en un bloc de notas todas  las URL  que contengan el nombre del sitio donde  hospedamos nuestras imágenes y las copiamos.
1
Una vez  copiadas, las vamos abriendo una por una en la barra de nuestro navegador y pinchamos con el botón derecho sobre la imagen GUARDAR IMAGEN COMO y las vamos copiando en una carpeta  creado con anterioridad.
2
Cuando las tengamos todas recuperadas abrimos en nuestro blog Creación de entrada> nueva entrada y subimos todas las imágenes como hacemos normalmente.
Una vez todas colocadas en la nueva entrada abrimos Vista previa y pinchamos sobre cada una de las imágenes , estas se abrirán en el navegador y copiamos su URL .
Ya solo nos queda volver a nuestra plantilla y cambiar la URL anterior por la nueva.
Esta nueva entrada la guardamos como BORRADOR y la reservamos para ir añadiendo nuevas imágenes que necesiten un alojamiento.
Es un poco pesado cambiar todas las URL de nuestra plantilla, pero habrá valido la pena el esfuerzo.

05 junio 2010

EL GIMP(Esfera efecto 3D)

Es una esfera 3D creada con 4 pasos muy simples y con un efecto bastante bueno.
Abrimos un nuevo documento de 300x300.
Creamos una nueva capa .Con la herramienta selección elíptica dibujamos un circulo y lo rellenamos con un patrón, yo he creado este con textura de madera para el tutorial.
1
Ahora sin deseleccionar abrimos Filtros>Distorsionar>!WARP y deformamos hacia arriba y hacia abajo, solo un poco las vetas de la imagen.
2
Creamos una nueva capa y sin deseleccionar aplicamos un degradado Radial, de blanco a negro y desde la izquierda superior a derecha inferior.
3
Solo nos queda cambiar el Modo de esta capa a Claridad fuerte .
4
Yo personalmente le he quitado el fondo y guardado en PNG.

01 junio 2010

Editar entradas desde Windows Live Writer

Cuando instalamos Windows Live, nos viene en el paquete Writer, un procesador de texto fácil y cómodo para editar las entradas para Blogger.
Lo primero que tenemos que hacer es abrir el procesador de texto writer y en la barra de herramientas pinchar en Blogs>Agregar cuenta de blog .

1
Nos aparece un asistente para la configuración y nos pregunta:
¿Qué servidor de blog usas? y pinchamos en Otros servicios de blog.
2
Ahora nos dice: Agregar una cuenta de blog:
donde en Dirección web de tu blog, le pondremos la URL de nuestro blog, y el nombre de usuario y la contraseña que utilizamos en el blog.
3
A continuación empezará la configuración de la cuenta de blog, que tardará unos segundos.
5
Cuando termine pinchas en finalizar y ya puedes utilizar el editor de texto de writer para crear la entrada para tu blog.
Mientras vayas escribiendo es aconsejable pinchar en Guardar Borrador Local de vez en cuando por si fallara el programa y se perdiera todo.
Como podéis ver  la interfaz es muy completa. Podemos subir las imágenes, cambiarles el tamaño, la posición, crearle un margen o una sombra, etc...
Crear tablas con un par de clics,añadir enlaces y lo más importante y que muchas veces no prestamos la debida atención y luego sale el texto como sale,  si pinchamos en Herramientas, encontraremos Revisar Ortografía y nos irá corrigiendo las faltas , siempre preguntando primero si queremos hacer el cambio.
Una vez todo en su sitio solo queda pinchar en Publicar borrador en blog y automáticamente envía una copia al blog.
Cuando termina la trasferencia ya la tenemos en nuestro blog , y lo encontraremos en Editar entradas como cualquier entrada creada con Blogger y en borrador, para aplicarle una vista previa antes de publicar.
También se puede  enviar directamente desde writer a la entrada del blog, aunque yo no lo hago hasta no darle el último vistazo.

EL GIMP (Efecto Texto nevado)

En esta ocasión vamos a simular un efecto de texto con nieve por encima.
Para ello vamos a necesitar los script-fu Efectos de capa, que ya hemos tratado en un tutorial anterior y que podéis descargar en este ENLACE y añadirlo la carpeta Scripts de Gimp
1-Para empezar creamos un nuevo documento de 400x200 y en color aa732a.
2-Con la herramienta texto, en color c2c2c2; fuente: Comic Sans Bold; y tamaño:120; tecleamos el texto que nos va a servir de ejemplo.
1
3-Una vez creado el texto vamos a aplicarle bisel y relieve. Abrimos Script-fu>layers effects>bevel and emboss y le ponemos los siguientes valores:
2
y este es el resultado hasta ahora
3
4-A continuación le vamos a poner otro Script que se llama trazo. Para ello volvemos a Script-fu>layers effects>Stroke… y copiamos los siguientes valores:
4
5-Creamos una nueva capa que llamaremos Nieve y con el color blanco de frente y un pincel duro y pequeño vamos a pintar unos trazos de nieve por encima de las letras y en las zonas horizontales.
5
6-Una vez pintada  la  Nieve le vamos a aplicar los mis pasos 3 y 4 que para el texto y con los mismos valores.
7-Cuando terminemos de aplicar los scripts, le vamos a añadir Resplandor interior y para ello volvemos a Script-fu>layers effects>Inner Glow y le damos los siguientes valores:
6
8-Cerramos el ojo a la capa Fondo , combinamos las demás capas y nos quedarán dos.
9- Para terminar con la capa texto activa le damos sombra y para ello vamos a Filtros>Luces y sombras>prespectiva.
7
Solo nos queda guardar nuestra imagen.

28 mayo 2010

EL GIMP (BURBUJAS)

Una burbuja tenemos que crearla y guardarla como un pincel, de esta forma podemos utilizarla en más ocasiones.
1-Lo primero será crear un nuevo documento de 400x400, pero ojo, tenemos que cambiar el modo de color a Escala de grises.
1
2-Creamos una nueva capa que llamaremos 1, para no liarnos y con la herramienta Selección Elíptica dibujamos un circulo , lo rellenamos de color negro y conservamos la selección.
2
3-Creamos una nueva capa que llamaremos 2 y vamos a Seleccionar> Encoger y le damos un radio de 45px. y pulsamos la tecla Supr para eliminar el centro. Deseleccionamos y cerramos el ojo a la capa1.
3
4-Vamos a Filtros>Desenfoque>Desenfoque gaussiano y le  aplicamos el desenfoque de 45px.
4
5-Volvemos a  la capa 1 y con el botón derecho activamos Alfa a selección , pinchamos en la capa 2 volvemos a Seleccionar>encoger y esta vez con un radio de 10px. pulsamos CTRL+I para invertir la selección y la tecla Supr.
De esta forma hemos eliminado el desenfoque de la parte de afuera que no nos interesaba conservar.
6-Deseleccionamos. eliminamos la capa1 y creamos una nueva capa que  llamaremos 3 y con la herramienta Pincel dibujamos una pincelada a un lado pasando un poco hacia adentro y le aplicamos un desenfoque de 45px.
5
Bajamos la opacidad de la capa 2 a 50 y la de la capa 3 a 88.
7-Ya solo nos queda guardar nuestro pincel .
Por si alguno no lo sabe estos son los pasos para guard la brocha:
7
Le damos un nombre, guardamos en la carpeta brushes de gimp y con la extensión gbr.
8
En la ventana de Exportar archivo debemos activar Aplanar imagen( es muy importante).
9
  Por último le damos el nombre con el que aparecerá en nuestra ventana de pinceles.
Esta es una burbuja básica, luego cada uno con su imaginación puede ir cambiando el diseño.


De todas formas os dejo este enlace donde  puedéis descargar 9 brochas de burbujas bastante buenas.
Solo tenéis que descomprimir el archivo y pegarlas en la carpeta brushes.

22 mayo 2010

EL GIMP-AERO GLASS

Voy a crear el efecto Aero  y para ello  utilizaré el Script  Bevel and emboss
que podéis descargar y copiar en la carpeta de scripts de vuestro Gimp.
La idea original de este tutorial la he sacado de un video tutorial en inglés.
1-Creamos un nuevo documento de 640x400.
Ponemos como color  frontal 071063 y color fondo 2194b1.
Con la Herramienta Degradado activa y Forma espiral, trazamos desde la
esquina superior izquierda hacia la esquina inferior derecha y vamos probando trazos hasta que nos salga más o menos como en la captura:
1
2-Creamos una nueva capa que nombraremos BASE .
Cambiamos el color frontal en blanco, creamos un rectángulo con la herramienta selección de rectángulos y  pinchamos en Seleccionar> Borde con un radio de 15px y con el bote de pintura rellenamos de blanco.
2
Y sin deseleccionar abrimos Script-Fu>layer-effects>Bevel and emboss,
solo cambiamos el valor del tamaño a 1  y aceptamos. Cambiamos la opacidad de la capa a 20 y combinamos las 2 capas de sombra que se han creado.
3
3- Activamos la capa Fondo con la capa BASE seleccionada y abrimos
 Filtros>Desenfoque>Desenfoque gaussiano y le aplicamos un desenfoque de 10px.
4-  Creamos una nueva capa que llamaremos OSCURO y cambiamos el color
frontal a negro .
Aplicamos un degradado lineal de negro a transparente y de abajo
hacia arriba  y cambiamos la opacidad de la capa a 42.
4
5- Cambiamos el color frontal a blanco y con la selección rectangular y
activando extraer de la selección, creamos un rectángulo que coja la mitad de la base y creamos una nueva capa que llamaremos BRILLO.
5
A la nueva selección le aplicamos un degradado lineal de blanco a transparente.
Deseleccionamos y cambiamos la opacidad de la capa BRILLO a 33;
6
Combinamos hacia abajo las 3 capas de arriba y nos quedaran las capas BASE y  Fondo.
7
Ahora vamos a añadir texto, prácticamente se siguen los pasos anteriores.
6- Con la herramienta texto escribimos GIMP en color blanco , fuente Sans Bold tamaño 120  y volvemos a aplicar el script que utilizamos para la capa BASE, pero en esta ocasión modificando el valor del ángulo a 0 y la opacidad de la capa a 35.
Combinamos las 2 capas de sombra y seleccionamos el texto en alpha a selección.
8
 9
7- Creamos una nueva capa que llamaremos OSCURO 2 y cambiamos el color frontal a negro y aplicaremos  un degradado  lineal de negro a transparente y cambiaremos la opacidad de la capa a  39 .
10
8- Cambiamos el color frontal a blanco y con la selección rectangular y activamos extraer de la selección, creamos un rectángulo que coja la mitad del texto y creamos una nueva capa que llamaremos BRILLO.
Le aplicamos un degradado lineal de blanco a transparente y le cambiamos la opacidad de la capa BRILLO a 10 . Deseleccionamos.
11
9- Volvemos a activar y seleccionar la capa TEXTO , bajamos hasta  la capa Fondo y aplicamos un desenfoque gaussiano de 8px.

12
-Se puede ir jugando con la opacidad de las capas, para conseguir mayor o menor transparencia.
-------------------------------------------------------------------------------------------------------

18 mayo 2010

EL GIMP (Crear esfera)

Voy a crear una esfera simple en muy pocos pasos.
Primero abro un nuevo documento de 300x300 y creo una nueva capa.
Con la herramienta Selección Elíptica  trazo un circulo:
2
Cambio el color frontal a 223ecd y el color de fondo en negro,
activo la herramienta Degradado de azul a negro y forma Radial
y trazo el degradado como muestro en la captura.
3
Deselecciono la esfera y activo la herramienta Aerógrafo, para darle
un mayor efecto 3d.
Cambio el color frontal a blanco, busco un pincel muy difuminado,
en mi caso Circle Fuzzy(19) y en escala 5 y le doy un solo clic
en la zona que marco:
4
Repito el mismo toque de aerógrafo,en el mismo sitio, pero esta vez con
una escala de pincel de 10.
5
Elimino la capa fondo.
Al crear los puntos de luz con el aerógrafo, estos se han salido
un poco de la esfera, por lo tanto tengo que eliminar todo lo que esté fuera de esta.
Para ello pincho encima de la miniatura de la esfera con el botón derecho
y activo  alfa a selección y una vez seleccionada , invierto la selección y
pincho en SUPR, para borrar todo lo que estuviera por fuera.
Lo he guardado en formato PNG.

14 mayo 2010

¿DÓNDE ALOJAR ARCHIVOS SWF?

Varios amigos me preguntaban donde había subido las imágenes con Swf.
Como todos sabemos Blogger no permite subir archivos con extensión SWF
y tampoco he encontrado ningún hosting gratuito que lo haga.
He creado una web en Google Sites y ya tengo solucionado el problema.
No he tenido que crear una nueva cuenta, porque sirve la misma que tengo
para Blogger y es sencilla de utilizar y no tiene publicidad.
Estos son los pasos a seguir:

1-En la página principal de Google abrimos la pestaña MÁS y pinchamos en Sites.
1
2-En la pantalla siguiente en Crear Sitio.
3-Rellenamos el siguiente formulario, donde le damos un nombre a nuestra web.
3
4-Una vez creado el sitio entramos en administrar y en Archivos Adjuntos
5-Pinchamos en Subir y a continuación en Examinar y buscamos en nuestro
disco el archivo swf que queremos subir y aceptamos
4
Para el ejemplo subí el archivo reloj.swf cono se puede ver:
5     
Mi dirección es http://sites.google.com/site/mirinconmisaani
a la que tengo que añadir al final , el nombre del archivo que acabo de subir
para obtener la  url de la imagen y quedará así:
http://sites.google.com/site/mirinconmisaani/reloj.swf

Publicar SWF en Blogger:
Como ya tenemos la URL del archivo SWF es hora de utilizar código html para mostrar
nuestro archivo flash en el blog. Para ello utilizamos el siguiente código:
-------------------------------------------------------------------------------
<object id="movie" type="application/x-shockwave-flash"
   data="ruta-archivo.swf" width="ancho" height="alto">
   <param name="movie" value="ruta-archivo.swf">
   <param name="wmode" value="transparent" />
</object>
----------------------------------------------------------- 
Donde pone ruta-archivo.swf tenemos que pegar la URL del archivo SWF,
y en ancho y alto las dimensiones de la imagen SWF.
Fijaros que la URL del archivo se pega en dos sitios.

Y ya tenemos nuestra imagen en flash insertada en el blog.
 
IR ARRIBA