Este es el primer capitulo de una serie de videotutoriales para enseñarte a maquetar un diseño en CSS y XHTML desde un archivo fuente PSD en Photoshop.
Esta serie se llamará "Así las armamos en español". Hoy les presento a la famosa plantilla PSD y hablo sobre las partes principales de una web y como esta estructurada.
Así las armamos en español, preparación del .PSD de Photoshop
En el próximo capitulo estará dividido en dos partes: la primera parte organizaremos nuestras carpetas y cortaremos las imágenes que necesitaremos para empezar a maquetar y la segunda ya será empezar con el HTML. No se lo pierdan.
No olviden dejarme sus comentarios y sugerencias a @raymicha
:O es el mejor tutorial en español que he visto, espero con ansias tus otros videotutoriales ! Por:Herrerix-blog
ohh gracias hasta que por fin se pudo ver jojojo
aunque esta un pokito cambiadito mi post jojojo bueno ia estare suebiendo el segundo capitulo recomienden el tuto a toda la gente que puedan gracias por sus comentarios Por:micha
Muy bueno, ya espero los otros capitulos.
Saludos Por:Carlangueitor-blog
Guau estaba buscando justamente esto. Gracias Por:fessimon
Muy buen video!
Espero los siguentes tutoriales Por:[Ray]
Muy bueno!
cuando aprendí todo esto me toco "a la fuerza".. es bueno ver como se hace la manera profesional.
saludos. recomendare este video y estare pendiente de la continuación. Por:Eduardo-blog
Eduardo-blog :
Muy bueno! cuando aprendí todo esto me toco "a la fuerza"
ya somos dos io tambein lo tuve que aprender a la mala Por:micha
Muy bueno, estaré pendiente del próximo video tutorial Por:psycho-vnz
Excelente aportación micha. Por:-george-
Me ha gustado mucho... Gracias por el aporte. muy bueno micha Por:AXM
Excelente videotuto!!!!
La verdad es que sabes explicar muy bien.
Felicidades por esto
Estaré esperando los próximos videos. Por:daz_angie
Excelente esta iniciativa de videotutoriales sobre maquetado, le vendrá muy bien a los que se están iniciando... Y a F. por los resultados en google (es broma )
Ya yo tengo algo de experiencia maquetando y todo, pero igual veré los videos... siempre se aprende algo nuevo
Aunque hay un detalle en este, no se si no lo hiciste así por alguna razón o para efectos de la explicación o si yo estaré errado... Por lo menos en esta página:
Y en el ejemplo lo puse como fondo del body.. aunque podría ser el fondo de un div principal que abarque el head, top y body... Por:Duilio
Duilio-blog :
Excelente esta iniciativa de videotutoriales sobre maquetado, le vendrá muy bien a los que se están iniciando... Y a F. por los resultados en google (es broma )
Ya yo tengo algo de experiencia maquetando y todo, pero igual veré los videos... siempre se aprende algo nuevo
Aunque hay un detalle en este, no se si no lo hiciste así por alguna razón o para efectos de la explicación o si yo estaré errado... Por lo menos en esta página:
http://elmuebleinc.com/
que tiene una estructura un poco similar...
Yo exporté todas las partes del fondo como una sola imagen, excepto el fondo del foot:
http://elmuebleinc.com/css/img/bg.png
Y en el ejemplo lo puse como fondo del body.. aunque podría ser el fondo de un div principal que abarque el head, top y body...
esta muy bien tu consulta pero si te das cuenta los fondos de la plantilla con la que io hago el tuto son diferentes porque son texturas tendria que ser algo DEMASIADO preciso o simplemente no podria agarrar una muestra de cualkier tamanio ya que si lo colocara de frente con un background-repeat: repeat-x puede que salga distorsionado. En cambio en tu pagina los fondos son simples colores solidos entonces no importa el tamanio de la muestra que saques siempre va a ser igual.
Y colocarlo en un div principal seria lo mismo que ponerlo en el body porque no le vas a dar un tamanio especifico.
espero halla podido aclarar tu consulta sino sigue preguntando no mas
En el segundo capitulo iba a ser una pequenia aclaracion sobre eso justamente. Por:micha
Interesante... Sí, tienes razón, en parte también había pensado eso... Sería cuestión de sentarse a intentar conseguir un patrón común a todos los fondos... o hacer un pequeño truco y dejar a la parte de galería con su fondo grunge en los 940px y a los lados con otro fondo o un simple degradé...
Lo interesante del maquetado así como la programación es que hay múltiples formas de resolver una cosa... Por:Duilio
bueno es que depende tambien de tu cliente y de cuan abierto este a algunos cambios. Pero ia te digo la manera que io utilizo es una de las mas comunes y mejores (lo unico pesado es que hay mas divs de lo comun digamos) pero igual tambien el disenio no es nada simple
y justamente por eso que io busco hacer varios videos con disenios diferentes para ver como va cambiando la manera y que cada uno lo implemente para sus proyectos como mejor le paresca Por:micha
Muy bueno el videotuto, esperando que muy pronto salga el segundo.
Exitos Por:Fox-blog
Buen video @micha, muy bien explicado. Un saludo Por:elchininet
Gracias por tu interes a k las demas personas aprendan, muy vacano... Por:anRoswell-blog
Excelente!!!! aporte!!, muy bien explicado.... esperamos los proximos videos!!! gracias micha!!!! Por:arieljbon
gracias por el videotutorial, está muy bien explicado. Espero poder ver los siguientes. Por:guso-blog
Raymi, EXCELENTE! Por:pablo-blog
Solo decir que esta bueno el video, lastima que por obvias rezones no puedas compartir el archivi psd. puesto que esto hatia a un más interesante el contenido del tuto. sinembargo pues es lo mejor que hay en español hasta el momento y ten la seguridad que estoy muy seguro de lo que digo. éxito con todo ...Y SEGURÁN NUESTROS ASUNTOS. Por:David Cifuentes-blog
Uppsss que cantidad de errores de estilo y dedazos se me han pasado en el comentario anterior. pido porfavor lo borren para hacer uno más pulido pues me vence el sueño. Por:David Cifuentes-blog
por favor la parte que falta!! esta buenisimo el tutorial pero te deja con las ganas jaja. Por:maximartin-blog
maximartin-blog :
por favor la parte que falta!! esta buenisimo el tutorial pero te deja con las ganas jaja.
he subido otros dos videos aki en el foro aqui te paso los url parte 2 y parte 3
ayudame a difundirlo!! Por:micha
Hey, yo había dejado un par de comentarios en este hilo.
Nuevamente, te felicito por este magnifico material... Enhorabuena, Por:M@U
Amo a la chica del videotutorial!!!! Por:Joan -blog
Que bonita voz hahaha...
Tienes un fan nuevo...
Por cierto gracias por el tutorial, lo estaré siguiendo, realmente necesitaba encontrar uno como este... Y está muy bien explicado, gracias nuevamente... Por:riajiru
Excelente siempre me intereso aprender a pasar los PSD a CSS muchísimas gracias por este gran aporte espero que lo termines Por:Cris-blog
no puedo ver ningun video ni se de donde descargarlo que debo hacer, ayuda
gracias Por:nacho-blog
Estoy en internet desde hace un año y desde hace unos meses empece con photoshop y todo lo relacionado con graficos asi como ultimamente codigo xhtml, css, javascript ... Bueno solo agradecer que haya personas como tu que compartan su conocimiento y nos ayuden a entender todo esto. Creo que aunque tengo aun poco conocimiento sobre el tema de la maquetacion, he entendido su funcionamiento, a ver si echo un vistazo a los otros y practicando a ver que consigo. Muchas gracias!!! Por:Pitrinki-blog
Felicidades, explicas de manera clara y sencilla las cosas. Tienes dotes para la docencia... Magnífico videotutorial!! Por:Carlos -blog
te felicito excelente material, de verdad muy claro y bien explicado, hace tiempo que buscaba la manera de pasar psd a html, pero los tutos que encontraba eran un poco complicados Por:Jaime-blog
Raimicha, vi la primera parte del tutorial explicas muy bien y se entiende todo. Por:GuatonaLaser
Raymi! me encantò el tutorial!!!! yo trabajo en diseño web y fue la primera vez que POR FIN entendì como maquetar una web.. MUCHAS GRACIAS por compartir.. en serio me es de muuuucha ayuda =) EXITOS!!! Por:paoluque
Buen Video!!
Gracias por compartir tus conocimientos Por:ju.serey
Y yo porque no consigo ver nada? Me interesa mucho el tutorial entero la verdad.
Saludos! Por:Kenzitron
No se ve nada!!!!!!! Por:kikeriko
Estan muy buenos los tutoriales, felicidades, I love you Girl... Por:Marco A.-blog
Hace unos dias encontré un curso en DVD que promete enseñar a maquetar una web en photoshop y luego a convertirla en código xhtml W3C válidado + jquery.
Quisiera saber si alguien lo ha usado y me lo puede recomendar :
css
html
photoshop
xhtml
videotutorial
)
!
) 
