Convertir PSD a CSS y XHTML, parte 2

Muchas gracias!! Estoy deseando ver la siguiente parte!
Por: Pablo-blog

Muy buen tip micha felicitaciones , por ahora tengo la siguiente pregunta:
¿Porque cortas las imágenes directamente y no utilizas slices?
Es solo por saber eh!
Por: psycho-vnz

psycho-vnz :

ajaaja si no hay problema toda pregunta es valida.

Bueno porque nunk me gusto el uso de los slices en realidad y esta forma me parece mejor, siento que me complica menos.
Por: micha

micha :

Otra cosa, para ir aprendiendo a maquetear que recomiendas, empezar con una plantilla como la del video tutorial o un diseño mas sencillo?
En caso de ser la primera opción tienes links a la mano en donde pueda descargar algunas plantillas para ir probando.
Saludos
Por: psycho-vnz

y la parte 2? jajaj. saludos
Por: pablo-blog

pablo-blog :

ya viene la parte dos paciencia paciencia
Por: micha

jajaj ok ok, es que apaciona ver tus videotutoriales
Por: pablo-blog

Buen video @micha, muy detallado. Sólo unos señalamientos:

micha :

Al contrario, el uso de slides te ahorra mucho trabajo, te complica menos, permite que puedas cambiar los nombres de las imágenes más fácil y escoger el formato de cada una, compresión, etc, de una sola vez. No tienes que estar guardando y abriendo constantemente, ni tampoco copiando y pegando en nuevos documentos. En cuanto al tema de escoger los formatos, no creo que en los dos ejemplos que muestras, JPG sea el mejor formato, aunque no teniendo las imágenes delante es muy difícil afirmarlo, esto es algo que pienso argumentar en un próximo tutorial que estoy preparando acerca del color y el escoger los formatos para web.

Por lo demás muy buen videotutorial, espero el siguiente.
Por: elchininet

elchininet :

Primero que todo mil gracias por ver mi video y por las sugerencias siempre es bueno armar discuciones sobre este tipo de temas

En el caso de los slides son opiniones diferentes para mi los slides me complican mas y como dije en mi video la manera que io uso es MI manera y doy la opcion de hacer un video presentando otras dos formas de como hacer los cortes para asi la gente pueda ver las opciones que hay y adaptarse a lo que mejor les acomode

En el caso de los formatos, para mi eso es un tema para un video tuto completo y me parece muy bueno que hagas uno explicando eso me encantaria verlo y que podamos conversar mas sobre eso. Ahora, yo escogi JPG por dos razones: 1) porque PNG es un formato muy pesado para imagenes grandes (y en el caso de las imagenes de las rayas del encabezado el kitaba un poco la sensacion de textura) y 2) porque yo teniendo la imagen en frente si me parecio un buen formato porque destacaba bien la textura de los dos ejemplos.

Estoy a la espera de ese tuto sobre formatos para imagenes web

Si no te parece muy mandado de repente me puedes dar tu mail para mantenernos en contacto
Por: micha

No me refería a PNG, sino a GIF.
PNG al igual que GIF son formatos de compresión sin pérdida, es decir, compactan siguiendo algoritmos de compresión como podrían ser los de los archivos zip. En al caso de PNG24 es lógico que quede grande con respecto al JPG ya que son 3 canales para RGB y un canal para alpha y la imagen que intentabas compactar tiene muy pocos colores, sin embargo si escoges GIF y escoges los colores que vas a exportar (sobre todo en el caso del degradado de gris a blanco) la imagen compacta sin pérdida y visualmente quedará lo más exacta a la original, al contrario de JPG (perfecto para exportar imágenes con gran cantidad de colores) que comprime con pérdida ya que aplica una transformación discreta del coseno (ese era el efecto de textura al que te refieres) la cual es perfecta para fotografías e imágenes con más de 256 colores. Todo esto está mejor explicado en wikipedia. Voy poco a poco con mi tutorial, ya que tengo muy poco tiempo, pero trataré de publicarlo pronto. Un saludo y me alegro que desees ponerte en contacto, te lo envío en un pm.

Un saludo
Por: elchininet

elchininet :

muy buen punto lo tomare en cuenta y recomendare tu tuto cuando salga, aqui estamos para aprender y descubrir mejores practicas

un saludo desde peru y espero tu pm
Por: micha

Micha espectacular!!! nunca encontre un tuto asi!!! te pregunto si se pueden bajar los videos??? si es así...donde???..bueno seguiremos esperando lo otros videos!!! FELICITACIONES!!!!!
Por: arieljbon

arieljbon-blog :

uyy me agarraste fria con eso de todas maneras io tengo los videos y cuando saque mi web los pondre a bajar habra que tener un pokito de paciencia

si puedes recomienda mi video ayudame a hacerme mas conocida!!! sacare mas videos

mil gracias
Por: micha

Excelente vídeo me encanta la manera en la que explicas como cortar y crear las imágenes listas para html, yo también prefiero hacerlo de la misma manera que lo has hecho no me gustan los slices, por que me parece un poco mas rígido, creo que eso depende de cada uno, yo aprendí esto cuando aun no existía la opción de slices entonces por eso me costo adaptarme yo creo.
Por: Luis Lopez-blog

Uso Linux
Por: Sonia-blog

Muy bueno, Felicidades. Me ha encantado.
Por: Sonia-blog

joder Raymicha eres la ostia!!! sigue asi!!!

Los dos tutoriales muy buenos, hacia falta algo de esto en español por que de guiri estamos muy mal. Saludos!!!
Por: Zast-blog

psycho-vnz :

Holas disculpa por responderte tan tarde . Bueno para mi cualkier plantilla es ideal siempre y cuando se kiera empezar de verdad y se tengan en cuenta lo basico. Aqui te mando un link que me mando @Carlangueitor para que te bajes dos plantillas para que practiques PSD Template. Yo tambien las estoy armando asi que si tienes otra pregunta mandate nomas esta ves no me demorare lo prometo !
Por: micha

Hay plantillas en formato xcf para gimp?
Por: Sonia-blog

te estaria mintiendo si te dijera que si conosco la verdad que io siempre he usado photoshop y no me he tomado la molesta de ver otros programas parecidos para hacer o conseguir plantillas disculpa
Por: micha

Bonitos tutos, se esperan los demás.

Aunque este duró 25 minutos la veradad ni se noto el tiempo, muy bueno la verdad. Felicitaciones
Por: Chekelin-blog

Muy buen tuto. Estoy esperando con ansia los siguientes. Muchisimas gracias por el esfuerzo y la dedicación.

Un saludo
Por: Xther-blog

Excelentes videos sobre todos para aquellos que de paginas web no sabemos nada...pero ke logicamente en mi caso quiero aprender...Gracias
Por: José Luis-blog

Micha felicidades por los TUTOS!, esperaba algo así en español! Gracias
Por: Cristhian -blog

micha, gracias por el tuto, yo desarrollo paginas web, pero me doy cuenta q me falta bastante, espero con ganas la 2da parte d este tutorial... gracias...
Por: M4rc0-blog

No había notado esta segunda parte sino hasta que llegue a la tercera por error... HaHaHa, no me he visto aun el vídeo pero estoy seguro de que es magnifico una vez mas.
Por: M@U

Buen tuto, Raymi!!! me encanto eres practica y sencilla; lei tambien un tema de discusión con respecto a las imagenes, y creo que es buen tema para discutir; solo queria agregar algo más a esto; hay un problema con los formatos en png y es que no se pueden ver en IE6; he tenido ese problema varias veces nose si te ha pasado; pero a mi varios clientes usan IE6 aun; así que lo mas optimo seria usar un gif ya que el formato gif lo soporta todos los exploradores...lamentablemente Microsoft sigue dando soporte a IE6. ...ahora voy a ver el siguiente tuto. grax.
Por: jcyovera

muy bueno el videotutorial raymi, son pocos los video tutoriales de maquetación en español tan buenso como el tuyo
Por: mktmarco-blog

@jcyovera, para trabajar con PNG en IExplorer menor que el 7 debes trabajar con filtros (otra locura de MS). En el CSS debes hacer algo como lo siguiente:

Código :

div#myDiv {
    background-image: url("images/imagen.png") !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/imagen.png");
}

La primera línea es para todos los navegadores menos IE (IExplorer 6 lo ignorará por el !important) y la segunda línea es para IExplorer y la ignorarán todos los demás exploradores.
Por: elchininet

hola muy bueno tu tutorial pero se te olvido algo
todavia existenm personas que usan explorer 6 y monitores muy viejod y las imagenes png o sin fondo en explorer 6 se dibuja un cuadro de color gris lo que te ocaciona una perdida visual y mas si est5a imagen esta en un fondo degradado y o otro color que no sea ese gris saludos muy bueno lo digo por que dices que quieres que tus web sean para todo el mundo saludo muy uy bueno
Por: jose sarmiento-blog

@jose sarmiento-blog, @micha todavía no ha entrado a la parte de CSS, pero el post anterior al tuyo, tiene una solución a este problema, se puede hacer que los PNG que usen el canal alpha se visualicen sin problemas en IE6.
Por: elchininet

Hola espero tu tutorial del PSD a CSS ya el final! q seria programar los css eh entendido todo a la perfección ...solo que hay alguun modo de liberarte de bloques???

gracias
Por: [b]Daniel-blog

hola recien empiezo del diseñoweb y te agradezco por estos videotutos espero ir aprendiendo de apocos gracias y saludos otra vez
Por: sam-blog

la raja el tutorial, tambien comenzando en esto del diseño web, flash y todo eso, me encantaria seguir viendo mas tutoriales tuyos y si pudiera estar todo el dia aprendiedo de vos se me haria demasiado facil esto, gracias
Por: juanka-blog

hola en caso de tener un degrade y sobre es un luz focal(creo q asi le dicen)..tendria q separ lo q es degradado de esa luz focal y luego tomar una muesta de es luz ??o como tendria q hacer???muchas gracias por toda la ayuda y todo lo q aprendemos...gracias a todos aquellos q nos ayudan..saludos
Por: romina-blog

Mi solución para no lidiar con patrones que no sean degree, es poner la img completa y un backgroud solido, ejemplo:

Código :

#contenedor{ background: #ebe7cd url(img/madera.jpg)}

No termine de ver el tuto pero se nota interesante, de lujo, felicitaciones @micha
Por: etzekiel

Muchísimas gracias, fenomenal la serie de vt sólo me pierdo un poco en continuar con el siguiente vt
Por: ruedi-blog

Impresionantes videotutoriales ! 1000 gracias!
Por: David-blog

cuando pulso la tecla control n para sacar un nuevo documento con las mismo tamaño que la imagen que deseo pegar no me lo hace , que sera?
lo unico que hace es abrir un nuevo documneto con el tamaño por defecto
Por: brayan-blog

Buen VT y con esa linda voz se aprende mejor espero sigas así, buena suerte
Por: Heyner-blog

Exelentes tus videos sigue asi
Por: Jorge Zamarron-blog

linda vo de la niña, sabe alguien si el video puede ser descargado ya aque en la chamba no tengo conexion y me gustaria vrlo a la hora de la comida.
gracias esta pagina siempre ha sido el exito
Por: tlacuilosound

Es lo mejor que he encontrado, ansio ver la segunda parte... No demores
Por: manwann-blog