Aquí les presento la primera parte del segundo capítulo de la videoserie "Así las armamos en español". Una serie de videotutoriales para enseñarte a maquetar un diseño en CSS y XHTML desde un archivo fuente PSD en Photoshop. En esta parte veremos la organización de carpetas y aprenderemos a cortar nuestras imágenes para estar listos para realizar la estructura de la plantilla en XHTML en la segunda parte.
Recuerda ver el primer capítulo: Cómo convertir PSD de Photoshop a CSS y XHTML, parte 1.
Así las armamos en español: Organizar y cortar los elementos del diseño .PSD
No olviden dejarme sus comentarios y sugerencias por aquí en Cristalab o siguiéndome en twitter @raymicha. Pronto el próximo capítulo.
Por Pablo el 15 de Septiembre de 2009
¿Porque cortas las imágenes directamente y no utilizas slices?
Es solo por saber eh!
psycho-vnz :
¿Porque cortas las imágenes directamente y no utilizas slices?
Es solo por saber eh!
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.
micha :
psycho-vnz :
¿Porque cortas las imágenes directamente y no utilizas slices?
Es solo por saber eh!
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.
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 pablo el 15 de Septiembre de 2009
pablo-blog :
ya viene la parte dos paciencia paciencia
Por pablo el 15 de Septiembre de 2009
micha :
Bueno porque nunk me gusto el uso de los slices en realidad y esta forma me parece mejor, siento que me complica menos.
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.
elchininet :
micha :
Bueno porque nunk me gusto el uso de los slices en realidad y esta forma me parece mejor, siento que me complica menos.
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.
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
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
elchininet :
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
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 arieljbon el 15 de Septiembre de 2009
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 Luis Lopez el 16 de Septiembre de 2009
Por Sonia el 16 de Septiembre de 2009
Por Sonia el 16 de Septiembre de 2009
Por Zast el 16 de Septiembre de 2009
Los dos tutoriales muy buenos, hacia falta algo de esto en español por que de guiri estamos muy mal. Saludos!!!
psycho-vnz :
micha :
psycho-vnz :
¿Porque cortas las imágenes directamente y no utilizas slices?
Es solo por saber eh!
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.
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
Holas disculpa por responderte tan tarde
Por Sonia el 16 de Septiembre de 2009
Por Chekelin el 16 de Septiembre de 2009
Aunque este duró 25 minutos la veradad ni se noto el tiempo, muy bueno la verdad. Felicitaciones
Por Xther el 16 de Septiembre de 2009
Un saludo
Por José Luis el 17 de Septiembre de 2009
Por Cristhian el 17 de Septiembre de 2009
Por M4rc0 el 18 de Septiembre de 2009
Por jcyovera el 18 de Septiembre de 2009
Por mktmarco el 18 de Septiembre de 2009
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 jose sarmiento el 27 de Septiembre de 2009
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 [b]Daniel el 28 de Septiembre de 2009
gracias
Por sam el 06 de Octubre de 2009
Por juanka el 06 de Octubre de 2009
Por romina el 15 de Octubre de 2009
Código :
#contenedor{ background: #ebe7cd url(img/madera.jpg)}No termine de ver el tuto pero se nota interesante, de lujo, felicitaciones @micha
Por ruedi el 18 de Octubre de 2009
Por David el 24 de Octubre de 2009
Por brayan el 31 de Octubre de 2009
lo unico que hace es abrir un nuevo documneto con el tamaño por defecto
Por Heyner el 19 de Noviembre de 2009
Por Jorge Zamarron el 03 de Diciembre de 2009
gracias esta pagina siempre ha sido el exito
Por manwann el 13 de Enero de 2010
Por Marihari el 25 de Marzo de 2010
Por gmopinillosv el 28 de Marzo de 2010
Por felix cutz pool el 07 de Abril de 2010
Excelentes videotutoriales y sobre todo la explicacion
Por Angela el 08 de Abril de 2010
muy vacano!
espero la segunda parte (q creo q no la veo, toca buscarla)
Por Leoxzone el 20 de Mayo de 2010
Saludos. [email protected]
Por lespinoza2004@hotmai el 25 de Mayo de 2010
Por ely el 03 de Agosto de 2010
Por JVirgilio el 04 de Octubre de 2010
¿Te casas conmigo?
Na, es broma, sigue así...
Por saidor el 05 de Octubre de 2010
Por Samuel el 08 de Octubre de 2010
Por historialweb el 14 de Octubre de 2010
Ánimo y apor otros muchos.
Por Silvina el 04 de Noviembre de 2010
O.O Gracias por los tuts =D
Por Santiago el 20 de Diciembre de 2010
Por gm el 06 de Febrero de 2011
Por Isahi Willing el 22 de Febrero de 2011
Por Joshua el 24 de Febrero de 2011
Por hola el 08 de Marzo de 2011
y donde la podemos encontrar?
gracias
Por Sam el 10 de Abril de 2011
Solo una duda. en el minuto 21.40 cuando hablas de
seleccionar una imagen, esta imagen se encuentra en una capa que a su vez tiene algunos efectos. Mi problema es que siguiendo los pasos tal y como lo haces, a mi al seleccionar la capa+copiar(cntrol+c)+nuevo(contrl+n)+pegar(cntrl+v) no me pega la seleccion con los efectos de la capa. ¿Donde tengo el problema?¿Como se soluciona?
Muchas gracias, voy siguiendo todos los videos.
Un saludo
Por Ricardo el 30 de Abril de 2011
Por Rulnet el 16 de Mayo de 2011
Por el 31 de Agosto de 2011
un abrazo....
Por aacm el 13 de Septiembre de 2011
Atentamente: AACM alejandro Cruz
Por Rul el 19 de Enero de 2012
Por FAUSTORUIZQ el 24 de Enero de 2012
Por oscar andres el 09 de Febrero de 2012
Por topart el 08 de Junio de 2012
graciasssssss
Por kevin el 02 de Julio de 2012
Por Iñaki el 28 de Mayo de 2013
Por el 25 de Noviembre de 2015