Trucos Windows Vista, Seven, XP, SEO, Posicionamiento Web

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.