[contact-form-7 id="24084" title="Feedback ES"]

Actualización de los cambios en la plantilla

Después de haber hecho todos los cambios necesarios a su plantilla web en Adobe Photoshop, hay que actualizar todos los cambios en sus documentos HTML.

En primer lugar debe saber algunos conceptos básicos sobre los sectores en Adobe Photoshop. Cada sector en el archivo PSD representa la imagen o el fondo en el documento HTML. Los sectores del fichero PSD están marcados con los rectángulos azules. Si Usted no puede ver los sectores por cualquier razón, tiene que elegir la opción “View/Show/Slices…” (Ver / Mostrar / Sectores) en el menú superior. Para gestionar los sectores Usted necesita utilizar la herramienta slice del panel de herramientas (tecla de acceso directo “K”). En realidad hay dos herramientas slice en este conjunto de herramientas: “Slice Tool” (Herramienta Slice) y “Select Slice Tool” (Herramienta Seleccionar Sector)  para cambiar entre las herramientas. Todos los cortes/sectores adecuados ya están colocados en el archivo PSD incluido en su paquete de plantilla web. Por eso Usted necesita solamente la herramienta ‘Select Slice/Seleccionar Sector’.

Antes de actualizar las imágenes utilizando ‘Guardar para Web’ hay que asegurarse de que los sectores que quiere guardar no superponen a otros sectores. Por ejemplo, un sector grande de la imagen del fondo puede contener un sector pequeño de la imagen de botón. Así antes de guardar este sector necesita ponerlo en la parte superior. Para hacer esto Usted debe seleccionar este segmento por medio de la herramienta ‘Select Slice/Seleccionar Sector’. Después abra el panel de opciones en la parte superior de la pantalla. Si Usted no puede ver este panel por alguna razón tiene que presionar “Window/Options” (Ventana/Opciones) en el menú superior. A la izquierda del panel verá cuatro botones para sectores: Bring to Front / Traer al frente, Bring Forward/ Traer adelante, Send Backward/Enviar atrás y Send to back/Enviar al fondo. Haga clic en el botón Traer al frente para llevar este sector a la parte delantera. Si Usted necesita actualizar un sector pequeño con la imagen de botón, Usted debe “Enviar al fondo” este sector grande para ver un sector más pequeño.

 

 
Algunos textos están representados como textos sin formato en HTML, así antes de guardar las imágenes que contienen este texto, hay que ocultarlo. Para hacer esto, tiene que seleccionar la capa que contiene ese texto.

La forma más fácil de hacer esto – es hacer clic en esta imagen manteniendo la tecla “Ctrl” presionado. Pero si hay algunas capas transparentes sobre esta capa de la imagen, tendrá algunos problemas con ella. La capa superior será seleccionada en lugar de la capa con imagen.

Para revisar el contenido de la capa seleccionada en ese momento, haga lo siguiente. Abra el panel de capas, si no puede verlo por cualquier razón elija la opción “Window/Layers” (Ventana/Capas). Encuentra la capa destacada en lista de capas – esta es la capa seleccionada corriente. A la izquierda del nombre de la capa se puede ver el icono “ojo”. Haga clic sobre este icono algunas veces para &ocultar / mostrar capa” y note que texto desaparece. Si este es el texto que desea ocultar – Usted está en el camino correcto. Si la selección es incorrecta, use las variantes alternativas para seleccionar la capa apropiada con la imagen.

Haga clic derecho sobre la imagen. Aparecerá una lista de capas. Trate de elegir las capas diferentes de la lista, tenga en cuenta que las capas de texto tienen los mismos nombres que su contenido. Use el procedimiento descrito anteriormente para asegurarse de que ha seleccionado la capa correcta.

Si ha seleccionado una capa de texto necesaria, ocultela haciendo clic en el icono “ojo” a la izquierda del nombre de la capa en la lista de capas.

Ahora es el momento correcto para actualizar las imágenes utilizando el procedimiento ‘Guardar para Web’.

Elija “File/Save for Web…” (Archivo / Guardar para Web ) en el menú superior o utilice “Ctrl + Alt + Shift + s”. La ventana ‘Guardar para web’ aparecerá.

En esta ventana se puede cambiar las opciones de optimización de imágenes. En realidad, nuestros diseñadores ya han establecido las opciones de optimización para el mejor balance de calidad / tamaño. Pero si Usted quiere que su página se cargue más rápido, puede disminuir/reducir la calidad de imagen. Seleccione el sector usando la herramienta ‘Select Slice/Seleccionar sector’. A la derecha verá un panel con las opciones de imagen. Usted puede cambiar el valor de la casilla de entrada de calidad para imagen .JPEG o los colores para/de imágenes .GIF y.PNG.

Más adelante seleccione el sector que desea actualizar, haga clic en él por medio de la herramienta ‘Select Slice/ Seleccionar Sector’. Si desea actualizar varios sectores en seguida, debe seleccionar los presionando el botón “Shift”.

Opciónes de Imagen

Si ha seleccionado todos los sectores que desee actualizar, haga clic en el botón “Save” (Gurdar) en la esquina superior derecha de la ventana ‘Guardar para Web’. La ventana ‘Guardar optimizado como’ aparecerá.

Busque la carpeta HTML de su plantilla web. Cambie la opción ‘File type/Tipo de archivo’ por ‘ Images only/Sólo imágenes’ y la opción ‘Slices/Sectores’ por ‘Selected Slices/Sectores seleccionados’. Otras opciones pueden dañar la estructura original de HTML.

 

Si Usted ha hecho todo esto correctamente verá una ventana emergente que pide la confirmación de la sustitución de imagen. Confirme eso.

Confirmación del reemplazo

 
Si esta ventana no parece, asegurese de que está tratando de guardar imágenes a la carpeta apropiada. También verifique el nombre del sector haciendo doble clic sobre él. El mombre y tipo de imagen deben ser los mismos que hay en HTML.

Ahora es el momento para verificar las modificaciones que ha hecho. Encuentre la carpeta HTML de su plantilla web y lanze el archivo HTML para ver los cambios.

Nota! Por favor, asegúrese de que Usted ha visto este vídeo tutorial (en inglés) sobre la utilización de la opción “Traer al frente” en Photoshop.