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
- HTML e imágenes publicaran un HTML junto con todas las imágenes.
- 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.
- 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.
- Todos lo sectores de Usuario, son los sectores que se generaron al cortar directamente la imagen.
- 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.
Una 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.
La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...
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.
Película lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.
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:
muy bien gracias me sirvio mucho
ResponderBorrarsobre 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.
ResponderBorrarRespecto a la imagen es muy buena su presentacion
Si lo que quieres es escribir en una celda con una imagen ocupada eso no podrá ser hasta que la hagas un fondo.
ResponderBorrarLo 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
Este blog ha sido eliminado por un administrador de blog.
ResponderBorrarMayúsculas no.
ResponderBorrarTu 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.
Muchas Gracias por la explicacion
ResponderBorrarGracias, me resultó muy util.
ResponderBorrar¿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.
Pues no es posible según creo, al menos no lo he probado en Photoshop CS5.
ResponderBorrarYo intente esto pero con el CS2 y cuando esporto solo me guarda en gif y me urge en PNG :( alguna idea?
ResponderBorrarUsa 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.
ResponderBorrarPara 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.