Comunidad PHPeros
Imagen y Diseño => Diseño General => Tutoriales y Manuales => Mensaje iniciado por: ferri en 14 de Noviembre de 2009, 16:29:17 pm
-
Bueno aquí esta despues de ver como tanta gente lo necesitaba un tutorial de como codear tu layout Habbo o no Habbo.
Para empezar necesitas:
- Un layout.
- Paint.
- Fireworks.
- Cualquier programa de edición web.
Veamos el tutorial con mi ejemplo:
Tenemos un layout:
(http://habbutil.net/images/desin2.png)
Ese es el layout que yo utilizaré, ahora bien, vemos como tiene menus introducidos (EL CONTENIDO) que tambien querremos expandibles para poder introducir todo lo que querramos y que se alargen cuanto sea necesario.
Por lo tanto el primer paso que haremos será retirar los menus para poder primero codear el layout en tres partes:
(http://habbutil.net/images/parteslayout.PNG)
Aquí el layout sin los menus que previamente guardé cada uno por separado fuera aparte para luego codearlos tambien y hacerlos expansibles.
(http://habbutil.net/images/desin2solo.PNG)
Ahora este layout sin menus vamos a abrirlo con Fireworks, una vez abierto vamos a dirigirnos a esta herramienta:
(http://habbutil.net/images/menufire.PNG)
Y con esta herramienta vamos a seleccionar porqué partes vamos a dividir nuestro layout, como dijimos previamente, este layout base sin menus ni nada lo diviremos en - ENCABEZADO - CUERPO (BOX GENERAL) - COLA DE LA WEB.
Más o menos así:
(http://habbutil.net/images/layoutdividi.PNG)
Bien una vez dividido el layout base (sin menus ni ningun contenido) lo vamos a exportar para pasarlo a HTML y así poder tener codeado el layout.
Para eso nos dirigimos a Archivo y seguidamente a Exportar.
(http://habbutil.net/images/exportar1.PNG)
Le ponemos un nombre y lo exportamos como HTML y imágenes.
Esto nos guardará un archivo HTML y una cantidad de imágenes.
Ahora para poder utilizar este layout y poder meter estructuras en su interior utilzaremos, cualquier editor web, en mi caso, dreamweaver.
Lo abrimos y la parte del layout llamada Box general le vamos a quitar la imagen que aparece y la insertaremos en la misma tabla como fondo.
(http://habbutil.net/images/dream1.PNG)
(http://habbutil.net/images/dream2.PNG)
(http://habbutil.net/images/dream3.PNG)
Y porfín tenemos nuestro archivo HTML codeado y con posibilidad de incluir en su interior todo el contenido deseado.
PARA QUE FUNCINE EN TU HOSTING, DEBERAS SUBIR EN EL MISMO DIRECTORIO EL ARCHIVO HTML Y LAS IMAGENES =).
Aquí la previa final:
(http://habbutil.net/images/final.PNG)
¡Saludos y ojalá les sirva!
Vía: Habbutil.net (Foro)
-
:) Buenisimo el tutorial. Una duda que tengo, ¿Como se haría en Phostoshop?.
Esque yo no manejo Fireworks :S
-
nada mal...
-
Este es un método pero no es nada recomendable, mejor hacerlo por su cuenta :)
-
La box no sera expandible, el tamaño ese sera fijo.
-
¿Sabesi como hacerlo mediante CS2?
-
¿Sabesi como hacerlo mediante CS2?
¿CSS o CS2?
Pones la imagen como backround y le agregas margenes y ya.
-
Bueno, sería mejor que pusieras un tutorial que sea con divs, ya que no se usan tablas porque al validarlas estan incorrectas.
-
¿CSS o CS2?
Pones la imagen como backround y le agregas margenes y ya.
Photoshop CS2, ¿Como lo puedo hacer?
-
Photoshop CS2, ¿Como lo puedo hacer?
No uso Photoshop para hacer layouts tan simples, ¿porque no cortas las partes del layout y lo haces con CSS?
-
Por que yo de esos no sé xDDD No tengo ni puñetera idea de CSS y diseño.
-
Guau me uviera gustado ver un tutorial como ese en unos años atras! tanto trabajo que me dio para adivinar como se hacia eso! busque todas las formas y no podia hasta que pague vips para que me enseñen a codear un diseño!, Buen Aporte si pudiera darte una Karma ya la tuvieras ;D :D.. :bstar:
-
Hay Varias Formas de codear, pero esta es mas complicada, la otra es mil veces mas facil, solo es crear teblas y tablas, talvez cre un Videito ;)
-
Hay Varias Formas de codear, pero esta es mas complicada, la otra es mil veces mas facil, solo es crear teblas y tablas, talvez cre un Videito ;)
¡Esperamos tu tutorial! ;)
-
Es mucho mas facil con DIVS y queda mejor.
Haces 3 DIVS, les pones el tamaño, les pones como background la imagen y ya.