Tutorial: Presentaciones Con Foto De Fondo

Ya me imaginaba que a uds le interesaria ésto, sólo queria confirmarlo haha!! Necesito que lean detenidamente porque es algo un poco complicado de entender al principio, entonces pongan de su parte en aprender y tratar de entender.

Ya tienen la disposicion de aprender? Entonces empecemos!!
Hagan clic en las imágenes para verlas más grandes

Ésta es la presentación que haremos:

Lo que necesitarán:

1.* El codigo HTML del estilo de la presentacion, yo se lo facilitaré, por el momento solo pondré uno, luego pondré otros estilos al pasar los días. No se asusten con el código hahahahah!!

Código HTML: 

<p style="margin: auto; box-shadow: #DF01A5 3px 0px 20px; padding: auto; width: 550px; height: 450px; border: 8px groove #01A9DB; background-color: #cd1076; color: #0B0B3B ; font-family: Lucida Calligraphy,'Calibri',comic sans; overflow: hidden; display: block;""><span style="; margin-top: 10px; margin-left: -100px; padding: auto; width: 400px; background-color: #01A9DB; text-decoration; text-shadow: 0px 3px 6px #A901DB; color: #ffffff; font-family: Harrington; font-size: 50px; text-align: center; opacity: 0.9; transform; z-index: 2; overflow: hidden; display: block;""><em>NICK</em></span><span style="margin-top: -95px; margin-left: 225px; width: 300px; height: 16px; font-size: 15px; letter-spacing: 2px; text-align: center; ; z-index: 2; overflow: hidden; display: block;""><strong></strong><strong></strong><br /><br /><br /></span>&nbsp;<span style="margin-top: -12px; padding: 0px; width: 550px; ; z-index: 1; overflow: hidden; display: block;""><img src="http://www.sdcdn.com/camera/143/626/143626042.jpg" alt="" /> </span><span style="margin-left: 25px; margin-top: -360px; padding: 5px; width: 495px; height: 290px; font-size: 18px; opacity: 0.8; z-index: 2; text-align: left; overflow: auto; display: block; color: #000000;""><br />Holaa aqui pueden escribir lo que quieran para su presentacion <br /><br />Y aqui tambien hahahaha.....<br /><br /><br /><br />Espero que les haya gustado<br /> Chaufas!!!!!!!!<br /><br /><br /></span><strong></strong></strong></p>

2.* Un editor online de HTML, para editar a nuestro gusto el estilo de presentacion. 

Usaremos éste: http://htmledit.squarefree.com/

3.* Una página que me muestre los codigos HTML de los colores, hay cientos de éstas páginas las pueden buscar en google, la que más se le haga facil su uso.

Pueden usar ésta: http://html-color-codes.info/codigos-de-colores-hexadecimales/

4.* Una foto hermosa se su doll, ésta será la que colocarán de fondo de la presentación y solo deben ir a stardoll y tomar una foto con su cámara, o bien elegir una foto de las que ya tengan antes.

Esas son las 4 cosas básicas que necesitamos, ahora procedo a explicar lo que deben hacer ^^.

A) Lo primero que vamos a hacer es ir al editor html (el link está mas arriba), luego copiamos el código que les di anteriormente y lo pegamos en la parte azul del editor html, así:

Automaticamente peguen el código en la parte azul, debajo les mostrara la presentación que corresponde a ese código.

B) Ahora procederemos a cambiar el fondo de la imagen, como ven tiene una foto mia, pues uds pondrán su foto, de éste modo:

1.- Van a la sección de sus fotos en stardoll, para eso solo hacen click en album y luego click en fotos. 

2.- Buscan la foto que les guste más o la que quieran usar como fondo y hacen click derecho encima de la imagen, luego en el menu que les aparece, seleccionan "Copiar Url de la imagen". De éste modo:

3.- Bien, ahora va lo fundamental, donde pegaremos éste url o link, pues vamos al editor html y buscamos en el código la parte que corresponde a la imagen y la vamos a reemplazar por el url o link que acabos de copiar de nuestra imagen en stardoll. 

Sólo seleccionamos esa parte del código, la borramos y pegamos el url que copiamos antes de la foto (El url debe quedar dentro de las dos comillas chicas).  Ésta es la ubicación en el código:

C) Ahora vamos a editar el nombre en la franja que dice "NICK", le puse nick para que fuera referencia de que ahí debe poner un nombre que quieran. No puede ser muy largo porque entonces no cabe o no se ve bien así, que recomiendo que no sea algo de mas de 6 ó 7 letras.

Para eso deben ir al código en el editor y buscar la parte del código donde diga NICK, borran la palabra nick y escriben el nombre que quieran, de este modo:

Nota: Algo importante, sólo editare el nombre principal, desde el editor html, el otro texto de la presentación no lo editen el editor, dejenlo tal cual, luego que pongan el codigo en stardoll, ahí se hará más facil cambiar el texto por lo que uds quieran escribir ^^.

D) Ya tenemos nuestra foto de fondo y el nombre principal, ahora vamos a editar los colores de nuestra presentacion. Ponga mucha atención que acá si que confunde hahaha.

En todo el codigo verán cosas como ésta por ejemplo #2A0A22, el signo de número seguido de letras y números,  eso nos indica que utiliza un color. Entonces lo que haremos es ir a la página que les proporcioné para los colores html, al hacer click en uno de los colores de la paleta de colores, debajo se les pondrá el código correspondiente a ese color. Deben seleccionar ese código y reemplazar por éste el color que desean cambiar de la presentacion.

Por ejemplo: si quieren cambiar el color de los puntitos del borde: el estilo de borde se llama "dotted", siempre que vean eso le seguirá el codigo del color, entonces sólo borran ese color que esta y ponen el que quieren, así: 

Nota: Ven en la imagen anterior del código, donde sombreo el color, dice ésto "4px dotted #FF0080;" delante de dotted dice 4px o sea 4 pixeles, ese es el grosor del borde, si lo quieren hacer mas grueeso o fino, solo disminuyan o aumenten el valor que está ahí.

Bueno, bueno hahaha! el tutorial se está haciend muy largo, por lo que tendre que simplicar explicaciones del codigo, sólo les puedo decir que prueben todos los códigos de colores que estén en el codigo de la presentacion, así se van dando cuenta que color es de cada cosa, para de éste modo cambiarlo al que uds quieran. Ya les explique como se cambiaba el color del borde, pues de éste modo pueden cambiar los colores de las demas cosas.

E) Una vez tengamos nuestro códdigo editado correctamente con los colores que elegimos y todo eso, procedemos a ponerlo en stardoll.

Entonces lo que haremos es seleccionar todo el código de la parte azul del editor html y lo vamos a pegar en el panel de nuestra presentación en stardoll, así: 

Luego hacemos click en "Guardar" y nos dará error la presentación. Al darnos error, nos convertirá el código que pegamos en la imagen de la presentacion, entonces ahi procedemos a editar todo el texto que está, por lo que queremos escribir en nuestra presentacion, los datos de nuestra doll, frases o lo que sea que quieran poner.

Nota: al escribir no presionen enter, porque es que se les crea otro panel debajo, tendrán que escribir seguido y cuando llene la linea entonces ella misma bajará a la siguiente. Si quieren hacerlo con espacios, tendran que editarlo en el codigo, mediante el editor html, ya eso es cuestión de cada quien, si quieren ponerse a probar, porque yo sólo les estoy dando lo básico.

Luego que cambien el texto que está por lo que uds quieran, guardan la presentación y listo!! tendrán una hermosa presentación como ésta:

Ésto fue todo, bastante largo el tutorial, quise explicar más cosas pero se hacia más y más largo y bueno, leanlo detenidamente y háganlo sin prisa, ojala que les ayude y si no entienden algo preguntan acá en la entrada o en nuestro chat de al lado. En un rato empezaré a crear en tutorial en video para que vean las cosas que edito y como lo hago yo. 

Saluditos y gracias por seguir nuestro blog *O*