Foros del Web » Creando para Internet » Diseño Gráfico »

Cortar imagen en sectores y pasar a html

Estas en el tema de Cortar imagen en sectores y pasar a html en el foro de Diseño Gráfico en Foros del Web. Buenas, despues de buscar y de ver algunos comentarios en este foro y en otros, he llegado a la conclusion que para meter una imagen ...
  #1 (permalink)  
Antiguo 15/10/2003, 07:28
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Cortar imagen en sectores y pasar a html

Buenas, despues de buscar y de ver algunos comentarios en este foro y en otros, he llegado a la conclusion que para meter una imagen de grandes dimensiones en la web, lo mejor que hay es dividirla en sectores (aparte de optimizarla claro esta), pero claro ahí está el problema:

En photoshop selecciono la herramienta sector y posteriormente divido la imagen en sectores, luego me voy a Opciones de sector y guardo cada uno de estos con un nombre, posteriormente guardo toda la imagen optimizada, con todos los sectores seleccionadosy como solo imagenes gif, entonces en el html busco esa carpeta llamada imagenes o images que me crea Photoshop por defecto y bien eligo o el nombre de todas juntas optimizadas, o por otro lado pruebo metiendo todos los nombres de los sectores, pero nada, no me sale nada mas que una raya o a veces nada

¿Cual es el problema, me falta o me salto algún paso?

¿Alguien lo ha echo y le sale bien?

En definitiva ¿es recomendable hacer esto para que una imagen no pese tanto, o hay otra forma mejor aparte de optimizarla para que pese menos?

Un saludo
  #2 (permalink)  
Antiguo 15/10/2003, 09:29
Avatar de efal  
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 433
Antigüedad: 14 años, 6 meses
Puntos: 3
Puedes hacerlo en Fireworks si tienes problemas con Photoshop. yo trabaja con ambos.
Entra al Fireworks y abre tu imagen en el formato que este, asi sea PSD de Photoshop.
Con la herramienta papel de cebolla (esta en la barra de herramientas un cuadrito verde)
Le das a tu grafico como seleccionando los espacios, es decir, lo divides con este. Es como sectorizar pero lo estas haciendo tu mismo.
Terminado lo guardas en PNG y le das Exportar imagen
En la opción a HTML y le pones guardar los graficos sectorizados en el nombre del directorio (carpeta) que quieras. Para eso lo creas al momento.
Seleccionas la carpeta y ya esta.
Acuerdate que tu HTML debe estar al lado de tu carpeta donde guardas las imagenes.
Que esa carpeta no tenga acento ni mayusculas ni separación porque sino lo leera bien el HTML.
Suerte...
__________________
"Los Cambios se dan hacia arriba, no hacia los lados..." efal.
  #3 (permalink)  
Antiguo 15/10/2003, 12:09
Avatar de expovic  
Fecha de Ingreso: junio-2002
Ubicación: spain
Mensajes: 321
Antigüedad: 15 años, 6 meses
Puntos: 0
Puedes:
A) En photoshop hacer los sectores y después pinchas sobre iraImageReady.
B) En ImageReady abrir dicha imagen y trazar los sectores.

Una vez trazado los sectores en imageReady, te vas a Archivo-Guardar Optimizada y ya te saldrán todas las imagenes con su html para la web totalmente optimizadas.
  #4 (permalink)  
Antiguo 15/10/2003, 18:25
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Pues la verdad lo estoy intentando de las dos maneras y nada

En Fireworks, sigo los pasos Efal, marco los sectores luego lo guardo y posteriormente le doy exportar y lo guardo otra vez, primero poniendole el nombre, luego guardar como HTML e imagenes, HTML: Exportar Archivo Html, en divisiones Exportar divisiones, etc, posteriormente con Dreamweaver lo llamo (Insertar Html de Fireworks) y cojo el archivo html que me habia generado antes el Fireworks.

Hasta ahí bien, solo que al subirla a la web no me deja, me dice " index no puede ser enviado ya que no pertenece al sistema de archivos"

En cuanto a lo de Photoshop e Image Ready tambien lo he hecho todo, solo que no se que archivos tengo que cojer de los generados ,ni en que carpetas guardarlo o colocar el codigo o rutas en html o bien en Dreamweaver

Gracias de antemano por vuestra ayuda amiwitos , un saludo
  #5 (permalink)  
Antiguo 15/10/2003, 18:46
Avatar de dennyboy  
Fecha de Ingreso: diciembre-2002
Ubicación: San Diego California
Mensajes: 1.012
Antigüedad: 15 años
Puntos: 5
Hola a todos...

Que tal, a ver si esto te sirve...

Cuando hagas los slices en photoshop, hazlos primero usando guias en donde quieres los cortes, ya determinados TODOS los cuadritos entonces ve a la herramienta de SLICES o SECTORES como dices, y veras un botón que dice CREATE FROM GUIDES en español debería ser algo como CREAR DE LAS GUIAS... esto evitará que te queden pequeños gaps entre sector y sector.

Ahora, veras tambien que las opciones trae la funcion para acoplar capas o sea que las que no requieras que esten divididas las podrás acoplar con alguna adyacente.

Hasta ahi todo debe ir bien, al guardar para web, el programa automáticamente te generará como bien dices una carpeta con las imágenes y listo, a no ser que cambies la organizacion de las carpetas en cuyo caso deberas de corregir la ruta en tu HTML.

Saludos
__________________
A veces soy... a veces quiero ser, pero casi siempre estoy ausente.
  #6 (permalink)  
Antiguo 16/10/2003, 01:50
Avatar de stanmx  
Fecha de Ingreso: noviembre-2002
Ubicación: Tijuana
Mensajes: 192
Antigüedad: 15 años, 1 mes
Puntos: 0
.
__________________
STANMX • Buscando la accesibilidad :arriba:
  #7 (permalink)  
Antiguo 16/10/2003, 02:20
 
Fecha de Ingreso: septiembre-2003
Mensajes: 41
Antigüedad: 14 años, 2 meses
Puntos: 0
hola a todos! estoy intentando buscar la opcion de sectores, y lo de las guias en PHOTOSHOP ELEMENTS pero no las encuentro...existen en este programa???????????????
gracias
  #8 (permalink)  
Antiguo 16/10/2003, 04:26
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Por finnnnnnnnn

Bueno menos mal que ya me sale, tanto en Fireworks como con Photoshop

En Fireworks todo me salia bien, lo unico que no me dejaba era subir el index por que lo ubique en el escritorio y no se por que pero el ftp no me dejaba subirlo desde ahí , menos mal que me dio por cambiarlo y ya me sale. Gracias Efal

En Photoshop tambien hice lo de ImageReady, pero esta vez lo guarde como html e imagenes y así tome el codigo que genera para llevarlo al html, y bueno tambien tuve que cambiar la ruta de las carpetas ya que no me aperecian en un principio, tambien me ha salido correctamente, gracias expovic y dennyboy

verbalkint77 Photoshop Elements no lo conozco espero que algun compañero te pueda ayudar, suerte

Gracias de nuevo a todos, saludosss
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:41.