De Photoshop a Dreamweaver

[ZUR]

Hola....

Amigos he creado mi sitio web con photoshop pero para hacer hipervinculos y agregar algunos textos le doy en "guardar para web" entonces lo abro con dreamweaver el problema es q todo me lo guarda en imagenes (se ve perfecto) el problema es que la pagina tarda mucho en cargar.

Alguien tiene una sugencia? Como hago para q no pese tanto

Gracias

[DragonX]

difícil que una página realizada en photoshop pese poco, pero podrías, para empezar, ver la forma de utilizar fondos de celda y colores no como imagenes, sino armarlos en HTML.

Supongamos que tenes un sector que es todo blanco y alli pones tus textos, bueno ese sector tranquilamente puede ser HTML y no con una imagen de fondo. Se etiende?

[ferarcosn]

Recuerda que se necesita una carpeta de images donde esten todos los recortes de la pagina y ademas debes crear el sitio primero en Dreamweaver

[creativo]

Aparte de lo que ya te han mencionado, aprende a comprimir bien las imágenes.

saludos

[ZUR]

Comprimir ? como es eso creativo?

Si entiendo lo de sustituir imagenes por ejemplo unicolores en html pero igual pesa mucho la pagina.

Por ejemplo bajo plantillas desde aqui http://www.templatesbox.com/templates.htm

y al modificar los textos ( de los botones y similares) lo hago con photoshop
y la guerdo como web para terminar otros detalles como vinculos

alguna manera de q pesen menos ( digo q no se guarde todo como imagen o se comprima como dice creativo?

gracias a todos x responder

[infosubte]

podrías colgar eso en algún lado para que podamos verlo

saludos

[juaniquillo]

Sería una buena idea hacer un tutorial de como ir de un programa de editar imágenes a html, poniendo ejemplos de que es conveniente remplazar y que no, y como hacerlo. Que opinan? Es mejor cuando se hace entre varias personas.

[SLASH22]

Hablando de comprimir...
Como me aconsejan comprimir en mapa de bits ¿jpg o png? ademas, con que comprimo? Photosho "guardar como..." o "Guardar para web"

Gracias

[DragonX]

Con photoshop. Guarda para web y en forato gif, si es una imagen chica, sino un jpg esta bien también.

[Flora]

Hola,

Otra opcion es al ir a exportar de photoshop a dreamweaver, si vas a las preferencias en photoshop, hay una opcion para que en lugar de exportarte celdas te lo exporte en xhtml, y de esta manera te lo traduce todo en divs.
Asi quedaria mucho mas limpio, y solo tienes que quitar las imagenes que te exporta y ponerlas en tus divs como imagenes de fondo.

[:.SMITEXX.:]

Ten en cuenta:
- JPG: acepta millones de colores y se puede comprimir. Cuando le das la opcion de guardar casi siempre te sale el dialogo de compresion. A menor compresion (1) menor calidad de imagen
- GIF: el máximo de colores que permite son 256 y se puede tener fondo transparente
- PNG: permite millones de colores y fondo transparente. Su único problema es que si usas IE6 no verás la transparencia....

[DragonX]

Iniciado por :.SMITEXX.:

- PNG: permite millones de colores y fondo transparente. Su único problema es que si usas IE6 no verás la transparencia....

tenes que embever un codiguillo JS para que funcione en IE

DX

[:.SMITEXX.:]

Iniciado por DragonX

tenes que embever un codiguillo JS para que funcione en IE

DX

Tienes la url? no he podido dar con uno que funcione. Gracias

[DragonX]

aca lo tenes :.SMITEXX.:

Código HTML:

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }
window.attachEvent("onload", correctPNG);
</script>
<![endif]--> 

DX

[DragonX]

ah, me olvidaba, esto debe ir entre <head>...</head>

[:.SMITEXX.:]

Hola, me funciona perfecto. Muchas gracias. Ya habia ensayado muchas maenras diferentes y ninguna me habia funcionado correctamente.

Chau

[efal]

Para que pese menos tu html y cargue rapido debes sustituir los fondos de tus celdas por los colores Hexadecimal que el mismo photoshop te arroja en la paleta de colores.
Aparte trata mejor de hacer tus botones con hoja de estilo y no en jpg o gif.

Una ayudita Hexadecimal:
http://www.webtaller.com/utilidades/...er/colores.php

Saludos

[rigoCR]

Hola yo tengo un problema q en varios dias no lo he podido solucionar, cuando dise;o la pag en photoshop le hago los cortes con la herramienta Slice (K), despues lo guardo para web (gif, html e imagenes, todos los cortes etc...) cuando lo habro en dreamweaver se ve perfecto pero a la hora de hacerle los links de los botones q habia cortado en photoshop, como q me desordena la pag y me abre unas lineas blancas. Alguien me puede ayudar x favor ya no se q hacer!!!

[DragonX]

tenés una url de tu pagina para poder ver que es lo que esta pasando?