Los diseñadores web profesionales desarrollan plantillas de sitios web, generalmente en potentes editores gráficos como Adobe Photoshop. El resultado del trabajo es un archivo con una imagen, que en este formulario se entrega al cliente. Para usar el diseño listo para usar, es decir, para diseñar una página web, debe cortar la plantilla.
Necesario
editor de gráficos de trama Adobe Photoshop
Instrucciones
Paso 1
Abra el archivo de plantilla en el editor de gráficos Adobe Photoshop. Seleccione Archivo y Abrir en el menú, o presione la combinación de teclas Ctrl + O. En el cuadro de diálogo que aparece después de eso, vaya al directorio con el archivo, selecciónelo en la lista y haga clic en el botón "Abrir".
Paso 2
Elija una escala conveniente para ver la imagen de la plantilla. Utilice la herramienta Zoom o los elementos del menú contextual. Seleccione una escala que le permita colocar el cursor con precisión de píxeles. Esto es necesario para establecer con precisión las líneas de referencia.
Paso 3
Forme un conjunto de líneas de referencia sobre la imagen de la plantilla. Active la visualización de reglas en las ventanas de documentos si aún no lo está. Para hacer esto, presione Ctrl + R o seleccione Ver y reglas en el menú.
Paso 4
Mueva el cursor del mouse sobre la regla superior para agregar una línea de referencia horizontal. Mantenga presionada la tecla izquierda. Mueva el cursor del mouse hacia abajo al área de la imagen. Del mismo modo, con la regla de la derecha, puede agregar líneas horizontales.
Paso 5
Agregue el número requerido de líneas de referencia y colóquelas a lo largo de los límites de la división de las regiones de la plantilla. Las líneas deben pasar por todos los lugares donde desea cortar la plantilla. Deben restringir todas las imágenes y áreas lógicas (logotipo, encabezado del sitio, menús horizontales y verticales, etc.) que se presentarán en una página web.
Paso 6
Activa la herramienta Slice. Su botón está en la barra de herramientas vertical.
Paso 7
Cree el número necesario de áreas de corte con la herramienta Cortar. Elija una escala conveniente para mostrar la plantilla. Utilice el ratón para establecer los límites de las áreas. Las pautas agregadas en el tercer paso proporcionarán un posicionamiento preciso de los límites de los objetos que cree. Ajuste las áreas existentes si es necesario utilizando la herramienta de selección de sectores.
Paso 8
Cambie las propiedades de las regiones de corte según sea necesario. Active la herramienta de selección de rebanadas. Haga clic derecho en el área deseada. En el menú contextual, seleccione el elemento Editar opciones de sector. En el cuadro de diálogo Opciones de sector que aparece, seleccione el tipo de área (imagen, área vacía, tabla), el modo de relleno de fondo, especifique, si es necesario, el nombre, la URL de destino, el contenido del atributo alt="Imagen" y otros valores. Haga clic en Aceptar.
Paso 9
Corta la plantilla. Seleccione Archivo y Guardar para Web y Dispositivos en el menú, o presione Mayús + Ctrl + Alt + S. En el cuadro de diálogo Guardar para Web y dispositivos, especifique el formato y los parámetros de compresión de imagen en los que se cortará la plantilla. Haga clic en el botón Guardar. Se mostrará el cuadro de diálogo Guardar optimizado como.
Paso 10
Seleccione HTML e imágenes (*.html) en la lista desplegable Tipo de archivo y, en el campo Nombre de archivo, ingrese el nombre del archivo donde se colocará el marcado HTML de la plantilla. En la lista de sectores, seleccione todos los sectores. Especifique el directorio para la salida y haga clic en el botón "Guardar".
Paso 11
Se colocará un archivo HTML en el directorio de destino, que es, de hecho, una plantilla de página web lista para usar. El subdirectorio de imágenes contendrá el conjunto de imágenes en el que se cortó la plantilla original.
