jueves, 10 de julio de 2008

Recortar sectores de una imagen en Photoshop

Cuando se maqueta para Web a veces usamos un diseño desarrollado en un editor de imágenes para definir el layout que  posteriormente será convertido en la plantilla de un sitio, Photoshop es uno de los programas más populares para esta actividad.
Photoshop incorpora herramientas heredadas de Image Ready que permite hacer cortes a sectores de una imagen y publicarlos ya sea como un HTML o de manera independiente.

En el menú Ver habilitamos en Mostrar los Sectores:
En la barra de Herramientas, seleccionamos Herramienta Sector, si mantenemos pulsado el ícono podemos ver opciones en la cual se encuentra Herramienta Seleccionar Sector, que servirá posteriormente para seleccionar los sectores recortados y modificarlos:
Podemos entonces podemos dividir en diferentes sectores una imágen, tomando en cuenta su uso con CSS o HTML, la repetición como patrón de muestra y las posibilidades de las tag contenedoras como DIV y TABLE:
En el menú Archivo en "Guardar para Web y dispositivos..." La versión estándar de Photoshop CS3 puede no traer ésta opción habilitada:
En la ventana de Guardar para Web y dispositivos..., podremos elegir la herramienta de selección de sectores y podremos elegir un sector y darle una optimización o un formato de salida independiente.
Podemos dar una salida de formato independiente a cada sector (JPEG, PNG 8Bits, y PNG de 24 bits) con una diferente compresión:
Pulsamos en Guardar, en la ventana de Guardado tenemos muchas opciones para el tipo de salida:
Podemos elegir en Tipo como se publicaran nuestras imágenes
  1. HTML e imágenes publicaran un HTML junto con todas las imágenes.  
  2. Sólo imágenes publicará todas las imágenes o aquellas imágenes seleccionadas mediante Shift + la Herramienta de selección de sectores:
En ajustes podremos establecer que tipo de imágenes serán tomadas en cuanta para publicarse.
  1. Todos los Sectores publica en HTML o en imágenes, todas las imágenes que generen las divisiones de los sectores, esto incluye áreas que no fueron definidas por el usuario.
  2. Todos lo sectores de Usuario, son los sectores que se generaron al cortar directamente la imagen.
  3. Sectores seleccionados guarda únicamente los sectores que seleccionamos en la ventana de "Guardar para Web y dispositivos..." Mediante Shift + Herramienta de selección de sectores:
Al pulsar Guardar en caso de salvar todo en contenido en HTML e imágenes, se creará un archivo html con el nombre de la imagen y en una carpeta llamada imágenes vendrán todas las imágenes cortadas:
En el caso de Sólo imágenes se generará únicamente la carpeta imágenes con todos los cortes:
El mejor uso de este sistema es si se conoce además de diseño Web basado en CSS.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

10 comentarios:

  1. muy bien gracias me sirvio mucho

    ResponderBorrar
  2. sobre este tema como hago para tener un sector que me permita escribir en fireworks es evidente la escritura pero al cortar y pasar a html no logro escribir en los campos cuando estoy en dreamweaber.
    Respecto a la imagen es muy buena su presentacion

    ResponderBorrar
  3. Si lo que quieres es escribir en una celda con una imagen ocupada eso no podrá ser hasta que la hagas un fondo.

    Lo mas lógico es mediante CSS, te recomiendo aprendas las propiedades:

    background-image:
    background-repeat:
    background-position:

    También deberás establecer un ancho y un alto, aunque con las tablas el alto no sirve muy bien. Puedes usar igualmente las propiedades CSS:

    Width
    Height

    Para aprender a relacionar CSS mediante ID y Clases ve el siguiente artículo:

    http://cgnauta.blogspot.com/2008/10/como-administrar-estilos-en-cascada-css.html

    un ejemplo de código vinculado mediante clase (nota el punto antes del nombre fondoimagen, las id empezarán con #, la diferencia entre Clase e ID esta en que la primera puede aplicarse a diferentes elemento e ID solo a uno):

    < head >
    < style type='text/css' >

    .fondoimagen

    {
    background-image: url("http://mi imagen.jpg"); background-repeat:no-repeat;
    background-position: top left;
    }

    < /style >

    < /head >

    < body >
    < table >
    < tr >
    < td class="fondoimagen" >Texto de la celda< /td >
    < /tr >
    < /table >
    < /body >

    saludos

    ResponderBorrar
  4. Este blog ha sido eliminado por un administrador de blog.

    ResponderBorrar
  5. Mayúsculas no.

    Tu problema puede estar ocasionado por la dirección del archivo al que apuntas, puedes mandar el html y el swf a el correo del sitio.

    ResponderBorrar
  6. Muchas Gracias por la explicacion

    ResponderBorrar
  7. Gracias, me resultó muy util.

    ¿Hay alguna forma para guardarlo generando en html capas div, o tiene que ser en tabla?. ¿Y como puedo hacer para que lo exporte como imágen de fondo?.

    Gracias de nuevo. Saludos.

    ResponderBorrar
  8. Pues no es posible según creo, al menos no lo he probado en Photoshop CS5.

    ResponderBorrar
  9. Yo intente esto pero con el CS2 y cuando esporto solo me guarda en gif y me urge en PNG :( alguna idea?

    ResponderBorrar
  10. Usa la herramienta de selección de Guardad para Web y selecciona el fragmento que quieras en un formato específico y veras que podrás darle una salida de archivo diferente.

    Para seleccionar más de una archivo pulsa Shift y da clic sobre los elementos que quieras seleccionar al mismo tiempo al cambiar el tipo de archivo todos esos fragmentos tendrán la misma extensión.

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.