El diseño actual debería parecerse a esto:
Hasta ahora se han añadido el logotipo y el menú superior. Continuaremos con un gráfico un poco más grande, que debería ser visible directamente debajo de la navegación.
El principio de la creación de nuevas capas ya se ha descrito en el tutorial anterior. Por lo tanto, me gustaría mostrarle algo más en este punto. Debe aparecer una imagen más grande directamente debajo del menú superior. El resultado tendrá este aspecto:
La imagen debe tener las dimensiones correctas cuando la inserte. Así que edítala de antemano si es necesario. A continuación, vaya a Archivo>Abrir y seleccione la imagen. La imagen seleccionada aparecerá en una nueva ventana. Pulse Ctrl+C para copiar la imagen en el portapapeles. Para poder pegar la imagen en una capa con el tamaño adecuado, seleccione Edición>Pegar como>Nueva capa. La nueva capa tendrá automáticamente las dimensiones de la imagen y podrás moverla al lugar adecuado. De este modo, todas las imágenes que desee insertar podrán transferirse a la maqueta y colocarse allí.
A continuación, inserte los textos en los lugares donde realmente deban ser visibles más adelante. En la fase de diseño se suele utilizar para ello el llamado texto ficticio.
Antes de sentarse y escribir a lo loco "prueba, prueba, prueba", le recomiendo que visite http://www.blindtextgenerator.de/.
Allí podrá generar automáticamente textos ficticios de distintos tipos. Los textos pueden copiarse y pegarse fácilmente en el borrador del diseño. En este contexto, también recomendamos el sitio web http://dummyimage.com/. En esta página se pueden generar imágenes ficticias de cualquier tamaño. Puede utilizar estas imágenes ficticias como marcadores de posición para gráficos originales que aún no se han creado en sus diseños, por ejemplo.
El problema de las capas transparentes
Si inserta textos, éstos constarán de varios elementos, como títulos, párrafos de texto, etc. Por lo tanto, debería agrupar los textos que van juntos en capas separadas. De esta forma siempre podrá mover estos textos de una sola pieza. Para ello, active Capas>Nueva capa. A continuación, asigne a la capa el tamaño y el color de fondo que desee. En la mayoría de los casos, sin embargo, establecerá/necesitará un fondo transparente. El problema es que resulta difícil mover las capas transparentes. A menudo se acaba con una capa subordinada. Este problema puede evitarse fácilmente. Para ello son decisivos los ajustes de la ventana Caja de herramientas. Active la herramienta Mover. A continuación, active la opción Mover capa activa en la parte inferior de la ventana.
Esto le permite mover capas transparentes a cualquier posición.
Recortar elementos
Una vez que esté satisfecho con el diseño, es el momento de la aplicación práctica como un sitio web HTML. Aquí es donde entra en juego el slicing. Cortar no es más que dividir el diseño en partes individuales, que luego se vuelven a montar utilizando HTML y CSS. Hay que cortar todos los elementos que se van a mostrar individualmente más tarde. Por supuesto, esto no incluye todos los elementos de imagen, que están disponibles individualmente de todos modos. En primer lugar, me gustaría mostrarle cómo puede recortar elementos. Para ello, dibuje líneas guía alrededor del elemento en cuestión. Las líneas guía forman en última instancia los bordes de corte. Así que asegúrese de establecerlas correctamente.
Ahora selecciona el área deseada y pulsa la combinación de teclas Ctrl+Mayús+C. (Por cierto, esto se aplica tanto a GIMP como a Photoshop). A continuación, crea un nuevo archivo. En Photoshop, éste tendrá el tamaño correcto. Por desgracia, esto no es tan fácil con GIMP. Aquí sólo tienes que crear un archivo con las dimensiones suficientes. Usa Ctrl+V para pegar el contenido desde el portapapeles.
Ahora entra en juego la herramienta de recorte. Utilízala para definir el área a recortar y luego pulsa la tecla Retorno. La imagen se recortará al área deseada. Puede guardar la imagen mediante Archivo>Guardar como.
Un elemento estilístico importante para muchas páginas web es un degradado de color. El diseño de ejemplo que se muestra aquí también presenta un degradado de color. Para cortar un degradado de color, seleccione un área estrecha del degradado correspondiente. En realidad, es suficiente con establecer un área con una anchura de un píxel. La altura, en cambio, debe corresponder a la altura real del elemento. Utilizando CSS, puede asegurarse posteriormente de que este gráfico se repita horizontalmente hasta rellenar todo el elemento. Por supuesto, también podría utilizar una sección de imagen más ancha. Sin embargo, esto reduciría el rendimiento de la página. Por lo tanto, seleccione un píxel como anchura para los degradados de color.
Utilice Ctrl+Mayús+C para copiar el gráfico de un píxel de ancho en el portapapeles y péguelo como una nueva imagen. A continuación, guarda la nueva imagen después de haberla llevado a la sección correspondiente.
Esto debería aclarar el principio básico del corte. Se recortan todos los elementos de la maquetación que luego pertenecen a la página web. Si ya tiene elementos individuales de la página que no necesitan ser cortados primero, tómelos directamente, es decir, sin ningún rodeo de corte.
El resultado debería ser el siguiente: Tienes todos los gráficos que quieres utilizar después en la página web. Esto incluye, por ejemplo, el logotipo, los fondos, los degradados de color, etc. Ya que hablamos de degradados de color: Por supuesto, soy muy consciente de que los degradados de color se pueden crear fácilmente utilizando CSS3. Sin embargo, el problema es que aún no todos los navegadores lo soportan. Y puesto que el slicing también se puede mostrar muy bien utilizando un degradado de color, he utilizado un gráfico para la implementación de degradados de color en este tutorial.
