1. Lo primero que hacemos es abrir una imagen en paint ("Archivo"/"Abrir"). Debemos procurar que ésta sea de buen tamaño, la mía es ésta:
   
   El tamaño de esta imagen es de 1000x880, pero fue redimensionada a un tamaño menor para que puedan apreciarla por completo y está en formato .png
2. En la ventana que aparece, seleccionamos nuestra imagen y le damos clic a "Abrir"
   
3. Seleccionamos la herramienta "Rectángulo" y, debajo de la barra de herramientas le damos clic a la 2 opción, que es para que nuestro rectángulo tenga borde y relleno.
   
4. En la paleta de colores, seleccionamos con el botón derecho del ratón el color que será el fondo, en mi caso, gris y con el botón izquierdo el que será el borde, yo he escogido blanco. Asegúrate de que el color del fondo y el borde combinen con la imagen y que el color de fondo resalte con el negro, de lo contrario, perderemos el texto.
   
5. Trazamos 3 rectángulos de buen tamaño: uno chico, otro mediano y uno más grande, para que contengan nuestra navegación, información personal y la información de neopets, respectivamente.
   
6. Lo siguiente es añadir el texto, por lo que debemos seleccionar la herramienta correspondiente.
   
7. Le damos formato al texto
   
8. Hacemos una caja del tamaño deseado para poder escribir dentro de ella
   
9. Repetimos este proceso en los otros 2 rectángulos.
   
10. Ahora, guardamos la imagen, de ser posible, en formato .png, ya que este es formato es de buena calidad y ocupa poco espacio. Como resultado, quedará algo así:
    
11. Lo siguiente que debemos hacer es subirla a internet, yo recomiendo el host photobucket.com en el cual sólo deben registrarse y podrán subir entonces cualquier imagen.
    

Codificación

1. Ahora vamos a armar el código html, recomiendo armarlo en block de notas e ir guardando los cambios conforme a cada paso para evitar que nuestro código se pierda. El primer código es el de estilo, con éste debemos comenzar cualquier código que hagamos. El resto de los códigos deben ir entre estas 2 etiquetas:
   <style></style>
   
2. El siguiente código es para el color de fondo, de esta forma, los que tengan una resolución de pantalla mayor al tamaño de nuestra imagen verán este color de fondo en la parte "sobrante"
   body { background color:black; background-repeat:repeat ; background-position:right}
   Debemos considerar que el color que deseemos poner sea acorde al de nuestra imagen, podemos usar el código hexadecimal de cada color o, bien, sólo poner el nombre del color en inglés, por ejemplo: black=negro; pink=rosa; red=rojo; blue=azul; green=verde; purple=morado; white=blanco; yellow=amarillo, etc.
   Una sugerencia que yo doy en caso de que se desconozca el código hexadecimal del color es usar un cuadrito de un color sólido y usar el siguiente código para colocar como fondo una imagen:
   body { background-image:url(http://i222.photobucket.com/albums/dd29/elizarain/Smile/tutos/black.png) ; background-repeat:repeat ; background-position:right}
   Sólo deberán reemplazar la URL/dirección de la imagen, la cual se encuentra entre paréntesis "()"
3. El siguiente código es el de la scrollbar, de nuevo, es necesario reemplazar los códigos de color por los de nuestra imagen. Podemos omitir este código si no conocemos las partes del scrollbar
   o si nuestro navegador es Firefox
   body{scrollbar-face-color:black;scrollbar-shadow-color:white;scrollbar-highlight-color:black;scrollbar-3dlight-color:black;scrollbar-darkshadow-color:white;scrollbar-track-color:grey;scrollbar-arrow-color:white;}
4. Este código nos permite cambiar la fuente de nuestro lookup en este órden: color, tamaño, alineación (de preferencia no cambien esta última)
   body,p,table,tr,td,div {color:black;font-size: 12px;font-family:Georgia, sans-serif;text-align:left;}
5. El código para cambiar el formato de los enlaces es el siguiente:
   a:link,a:visited {color: white;font-size: 12px;font-family:Georgia, sans-serif;} a:hover {color: white;font-size: 12px;font-family:Georgia, sans-serif;}
6. Con el siguiente código podemos modificar las cajas de texto (donde va la información). No es necesario realizar ningún cambio a este código:
   .contentModuleTable {border-color: #000000; border-width: 0px; border-style: dashed; width:20px;} .contentModuleContent, .contentModule, .medText{border: 1px; background-color:transparent;} .contentModuleHeader, .contentModuleHeaderAlt {background-color :transparent;color: #000000;} #footer,.footerNifty,#header, .sf, .copyright {display:none;} table,td{background:transparent} #ebr{position:absolute;left:0px;top:-6px;z-index:1;}
7. Los siguientes códigos son para ubicar la posición de nuestra información:
   Este nos permite ubicar dónde irá nuestro status, es decir: neopets, trofeos, tienda, edad, etc... Donde:
   Left es la posición en "x", es decir de la izquierda a derecha. Debemos considerar que entre menos pixeles haya, más cerca del borde izquierdo de la imagen estará y entre más pixeles haya, más lejos del borde izquierdo.
   Top es la posición en "y", es decir, de arriba, hacia abajo. Entre menos pixeles haya, más cerca de la cabecerá estará y entre más pixeles haya, se hubicará más abajo.
   Width es el ancho que tendrá.
   Height es la altura.
   
   Si no queda bien ubicado o de las medidas que queremos al principio, habrá que ajustar las medidas nuevamente.
   #page{position:absolute;left:50px;top:340px;width:440px;z-index:1;overflow: auto;height: 480px;}
   Este es el código que permite ubicar nuestra información personal, sigue el mismo patrón de arriba:
   #info{position:absolute;left:50px;top:140px;width:440px;z-index:2;overflow: auto;height: 120px;}
   Finalmente este código es el que nos permite ubicar los comandos de navegación:
   #nav{position:absolute;left:50px;top:60px;width:440px;overflow:none;z-index:2;height: 30px;}
8. A partir de aquí, se debe cerrar los códigos de estilo, es decir, que el resto de nuestra información debe ir debajo de la etiqueta "/style".
   
   </i>
9. Este es el código donde debemos colocar la url de nuestra imagen de fondo. Deben reemplazar la url por la de su imagen, que ya deben haber subido a photobucket.
   También, deben poner las dimensiones de su imagen, recuerden que width es el ancho y height es la altura.
   <div id=ebr><img src="http://i222.photobucket.com/albums/dd29/elizarain/Lookups/deathnote1.png" width="1000" height="880"></div>
10. A continuación, este es el código donde pueden poner su información personal, sus avys, contador, etc.
    <div id=info> Aquí puedes escribir lo que sea
11. Este es el código para colocar sus avys.
    Deben de reemplazar la URL del avy predeterminado (http://images.neopets.com/neoboards/avatars/default.gif), por la url de los avys que quieren poner.
    <hr> <h2>Avatars</h2> <b>Favorito</b> | <b>Nuevo</b> | <b>Buscado</b> <br><img src="http://images.neopets.com/neoboards/avatars/default.gif"> | <img src="http://images.neopets.com/neoboards/avatars/default.gif"> | <img src="http://images.neopets.com/neoboards/avatars/default.gif">
12. Con este código podemos advertir a quienes nos visitan si aceptamos neoamigos, neomails, invitaciones al duelódromo o a alguna asociación, sólo se debe reemplazar el estado por "Abierto" o "Cerrado", según sea el caso.
    <hr> <h2>Open/Close</h2> <b>Neomail:</b> Abierto<br> <b>Neoamigos:</b> Abierto<br> <b>Asociación:</b> Cerrado<br> <b>Duelódromo:</b> Cerrado
13. Ahora, debemos cerrar ésta parte. POR FAVOR, NO QUITES LOS CRÉDITOS
    <hr> <h2>Creditos</h2> <p><a href="/~Smile_in_the_Rain">Smile Tutorials</a>. </div>
14. Ahora, el código para la navegación:
    <div id=nav> <a href="addpet.phtml">Crear</a>- <a href="petcentral.phtml">Central</a>- <a href="explore.phtml">Explorar</a>- <a href="gameroom.phtml">Juegos</a>- <a href="neomessages.phtml">Correo</a>- <a href="objects.phtml">Tiendas</a>- <a href="neoboards/index.phtml">Foros</a>- <a href="nf.phtml">Noticias</a>- <a href="stuff.phtml">Cosas</a>- <a href="/~Smile_in_the_Rain">Tutoriales</a> </div>
15. Finalmente, el código de nuestra información de usuario
    <div id=page> <table> Aquí escribe o agrega lo que quieras.

Colocación

Ya que hemos armado nuestro código, debemos colocarlo. Debemos pasar el cursor/mouse, sobre "mi cuenta" en la barra de navegación de Neopets y darle clic a "Editar Perfil"

Escribe tu contraseña, para que puedas realizar los cambios, copia tu código y luego pégalo en la última casilla donde dice: "Sobre mí"

Finalmente, le damos clic a "Guardar detalles" y quedará listo nuestro lookup.

Este es el resultado final del lookup:

[Volver arriba]

[Volver arriba]

| Sencillos | Textos | Imágenes |

1. Lo primero que haremos será crear una nueva imagen, de cualquier tamaño la mía será de 50x50 px.
   
   
2. Lo que sigue, es seleccionar la herramienta de "Bote de pintura"
   
3. Debajo de la paleta de colores veremos un par de rectángulos de colores, le daremos clic a la flechita para seleccionar entre la opción de un color sólido o una gradiente.
   
   El ícono del pincel es para un color sólido, al dar clic sobre el rectángulo nos aparecerá una ventana para escojer el que más nos guste:
   
   El ícono con las 3 rayitas es para seleccionar una gradiente, cuando damos clic sobre el rectángulo, nos aparece la siguiente ventana:
   
   Donde dice "Estilo" seleccionamos el que más nos guste y en editar veremos la siguiente ventana, en la cual, seleccionamos de la lista la nuestra combinación favorita y le damos clic en aceptar:
   
4. Damos clic nuevamente en "Aceptar" en la pantalla anterior y luego sobre nuestra imagen, para que esta se pinte del color que hemos elegido:
   
5. Precionamos ahora ctrl+c (copiar) y ctrl+v (pegar) unas 3 veces, para obtener 3 copias de la imagen:
   
   
6. Ahora vamos a "Efectos"/"Ruido"/"Agregar ruido":
   
7. Escogemos el porcentaje de ruido que nos convenza y aceptamos. Hay que hacer ésto con las 3 imágenes:
   
8. Copiamos (ctrol+c) la primera imagen y abrimos el Animation Shop, donde pegaremos (ctrol+v) la imagen:
   
9. Copiamos la segunda imagen y damos clic en el ícono de para pegarla después de la primera imagen:
   
10. Repetimos ese procedimiento con la tercera imagen.
    
11. Vamos a "Archivo"/Guardar"
    
12. Seleccionamos la carpeta donde guardarlo, lo nombramos y damos clic en aceptar
    
13. En la proxima fase seleccionamos la calidad de nuestro archivo y damos clic en "siguiente":
    
14. Espearmos a que se complete la optimización del archivo y volvemos a dar clic en "siguiente"
    
15. Una vez que se haya optimizado, nos mostrará una vista previa y sus estadísticas:
    
    
16. Como resultado final tendremos ésto:
    

Texto

1. Para este tutorial, realizaremos primero los pasos del 1 al 10, citados arriba. Una vez que tenemos las 3 imágenes, abrimos un nuevo documento del tamaño que vaya a ser nuestro texto aproximadamente, yo lo haré de 500x100 px. Asegúrense de que el color de fondo sea "transparente"
   
2. Seleccionaremos la herramienta de texto.
   
3. Daremos clic sobre nuestra imagen en blanco y nos aparecerá una ventana, en la cual escribiremos nuestro texto:
   
4. En donde dice "Estilos" le daremos clic a la flechita de "Relleno" y seleccionaremos el botón con varios cuadritos para que nuestro relleno sea una "Textura"
   
5. Daremos clic sobre el rectángulo de "Relleno" para que se abra una ventana, en la cual daremos clic a la flecha a un lado de la textura predeterminada para ver el resto de ellas. De la lista, seleccionaremos la primera de nuestras imágenes con ruido.
   
6. Le damos clic a "Aceptar" para tener como relleno el primer cuadro del glitter.
   
7. Una vez que hayamos escrito nuestro texto y tengamos el relleno, le damos clic a "aceptar"
   
8. Si nuestra imagen es muy pequeña, modificamos su tamaño con los cuadros en las esquinas y bordes de nuestro texto para darle el largo y ancho deseado.
   
9. Copiamos (ctrl+c) la imagen, abrimos el Animation Shop Pro y pegamos (ctrl+v) ahí nuestro texto.
   
10. Regresamos a la imagen original en Paint Shop Pro y, con la herramienta de texto activa damos clic sobre el texto para que aparezca de nuevo la ventana de edición.
    Repetimos el paso 5 y seleccionamos nuestro segundo cuadro para que sea el relleno de nuestro texto.
    
11. Le volvemos dar clic a "Aceptar"
    
12. Volvemos a copiar y en el Animation Shop, le damos clic al ícono para pegar nuestro texto después del primer cuadro.
    
13. Repetimos los pasos del 10 al 12, para rellenar nuestro texto con el tercer cuadro de color y añadirlo a nuestra animación.
    
14. Ahora, guardamos la animación en "Archivo"/"Guardar"
    
15. Seleccionamos la carpeta donde guardarlo, lo nombramos y damos clic en aceptar
    
16. En la proxima fase seleccionamos la calidad de nuestro archivo y damos clic en "siguiente":
    
17. Espearmos a que se complete la optimización del archivo y volvemos a dar clic en "siguiente"
    
18. Una vez que se haya optimizado, nos mostrará una vista previa y sus estadísticas:
    
    
19. Como resultado final tendremos ésto:
    

Imágenes

1. Lo primero que haremos será abrir una imagen en Paint Shop Pro, puede ser cualquiera. Yo escogí ésta:
   
2. Si la imagen es pequeña, procedemos a seleccionar la herramienta de lupa para agrandarla:
   
   
   Verán que le he quitado el fondo blanco, pero no es necesario que ustedes lo hagan.
3. Ahora, seleccionamos la herramienta de "Lazo":
   
4. En la paleta de configuración de la herramienta (si no la localizan pueden habilitarla en "Ver"/"Barras de herramientas" y palomean "Paleta de Configuración") y elegimos donde dice "Tipo de selección", la opción de "punto a punto" (que para mí resulta más sencilla)
   
5. Vamos a la imagen y seleccionamos lo que queremos hacer glitter como si estuvieramos uniendo puntos en el contorno.
   
   Como ven, hay hormiguitas alrededor del caldero, ésa fue mi selección.
6. Después de seleccionar el área deseada, nos vamos a "Efectos"/Agregar ruido":
   
7. Escogemos el porcentaje deseado de ruido y le damos clic a "aceptar"
   
8. Abrimos el Animation Shop y copiamos (ctrl+c) toda la imagen (será necesario quitar la selección) y la pegamos en el Animation (ctrol+v)
   
9. Ahora le damos clic al botón deshacer 2 veces para volver a la selección solamente.
   
10. Repetimos los pasos del 6 al 7 de para tener el siguiente frame y con el ícono en el Animation Shop pegamos la imagen después del primer cuadro.
    
11. Se repiten los pasos 9 y 10 tantas veces como queramos. Yo lo haré una última vez para tener 3 frames.
    
12. Ahora la guardamos:
    
13. Seleccionamos la carpeta donde guardarlo, lo nombramos y damos clic en aceptar
    
14. En la proxima fase seleccionamos la calidad de nuestro archivo y damos clic en "siguiente":
    
15. Espearmos a que se complete la optimización del archivo y volvemos a dar clic en "siguiente"
    
16. Una vez que se haya optimizado, nos mostrará una vista previa y sus estadísticas:
    
    
17. Como resultado tendremos algo así:
    

[Volver arriba]

1. Para que se reproduzca música en el lookup, tienda, galería o petpages lo primero que haremos, será crear una cuenta en fileden.com para subir en esa página nuestros archivos, ya sean .mp3, .wav o .midi.
   Una vez que ingresamos a la página, le damos clic a "Register"
   
2. Ahora, damos clic en donde dice "Select this plan", en la columna que dice "Free acount", a menos que tengan pensado pagar por alguno de los otros planes (que no creo, duh)
   
3. Llenamos las casillas con los datos que nos piden y damos clic en "Register"
   
4. Si nos pide otros datos, simplemente le decimos: "Acept" y nos dará el siguiente mensaje:
   
   Este mensaje nos indica que tenemos que revisar nuestro correo electrónico para ver si hemos recibido un correo para activar nuestra cuenta.
5. A nuestro correo debe llegar un mensaje parecido al siguiente, en el cual ingresaremos la dirección que nos proporciona:
   
   En caso de que no llegue el mensaje a nuestro correo, deberemos revisar la carpeta de spam, para cerciorarnos de que el mensaje no ha sido almacenado en esa carpeta por error.
6. Al ingresar a la web, sólo debemos dar clic en "OK"
   
7. Ahora, podemos ingresar a nuestra cuenta:
   
8. Ahora, podemos comenzar a subir archivos:
   
9. Le damos clic a "Examinar" para localizar algún archivo en nuestra computadora:
   
10. Lo siguiente es seleccionar el archivo que deseamos subir, en este caso un mp3 y le damos clic en "Abrir"
    
11. Damos clic en "Upload files y esperamos a que el archivo se almacene en la web. Puede tardar un poco dependiendo del peso del archivo y nuestra conección a internet.
    
    
12. Una vez que el archivo se haya subido recibiremos una confirmación, donde nos muestran las diferentes formas para colocar nuestro archivo. Seleccionaremos "Direct URL's" y luego daremos clic en "Copy to clipboard". Finalmente clickeamos en "OK"
    
13. Ahora, para que nuestra canción se escuche en alguna petpage, tienda, lookup, etc... Deberemos reemplazar la url del siguiente código por la del archivo que acabamos de subir:
    <bgsound src="http://www.fileden.com/files/2007/2/16/783967/Ali_Project_-_Seishoujo_Ryouiki.mp3">
    Este código NO FUNCIONA CON FIREFOX
14. Finalmente lo que hacemos es pegar el código donde más nos guste, ya sea información de usuario o lookup, en tu tienda, galería, etc...

[Volver arriba]

1. Primero que nada vamos a partir de una imágen en formato .gif (un formato de animación) que no rebase los 32x32 pixeles como esta:
   
2. Para ver los frames o cuadros de la imagen la abriremos en en Animation Shop:
   
   
3. Dependiendo de qué tan sofisticada sea la animación podemos tener 2 o más cuadros, uno ligeramente diferente al anterior. La imagen que yo estoy usando, como verán sólo tiene 2 frames, y uno está unos cuantos pixeles por encima del otro.
   
   De preferencia fíjense que no sean demasiados frames para que no se les complique la vida o seleccionen los principales del .gif
4. Copiamos el primer frame que vayamos a usar (ctrl+c) y lo pegamos (ctrl+v) en el Pain Shop Pro. Escogemos la herramienta de lupa para acercarlo y que sea cómodo trabajarlo:
   
   
5. Ahora, seleccionamos la herramienta de "pincel"
   
6. En la paleta de configuración de la herramienta (si no la localizan pueden habilitarla en "Ver"/"Barras de herramientas" y palomean "Paleta de Configuración") y seleccionan como forma "cuadrada" y en tamaño 1 px.
   
7. En la paleta de colores, escogemos un color, de preferencia, oscuro, que será el borde de nuestra flechita:
   
   No se dejen llevar por la imagen, el color que usaré es negro (duh)
8. Ahora pintamos pixel por pixel un triangulito en la esquina superior izquierda de nuestro frame:
   
   
9. Escogemos otro color, que convine con la imagen y rellenamos el triangulito de la misma forma
   
10. Ahora lo copiamos (ctrl+c) y lo pegamos en Animation (ctrol+v)
    
11. Volvemos a los frames originales y repetimos el proceso (pasos del 4 al 9) con todos los frames restantes (en mi caso sólo es 1)
    
12. Ahora, copiamos el siguiente frame en la misma animación del primer frame con este ícono con el cuál se copiarán los frames uno frente al otro en la misma animación.
    
13. Procedemos a guardarla:
    
14. Para guardar el archivo debemos asegurarnos de guardarlo como "cursor animado" (no importa si no queremos que nuestro cursor no tenga animación)
    
15. Y ahora, ya que está guardado, procedemos a subirlo a la web, puede ser a fileden.com. Selecciona "Direct Url" y luego presiona el botón "Copy to Clipboard"
    
16. Ahora pegamos esa URL que acabamos de copiar en el siguiente código. Como ven tienen que colocar la URL 2 veces, reemplazando, desde luego, la url de mi cursor.
    <style>body{cursor: url('http://www.fileden.com/files/2007/2/16/783967/Cursores/bruji.ani');} a {cursor: url('http://www.fileden.com/files/2007/2/16/783967/Cursores/bruji.ani');} </style>
17. El resultado debe ser algo así:
    

[Volver arriba]