Unidad 9. Imágenes (XI)

9.11. Logo

Para acabar, crearemos una imagen que haga de logo para nuestro sitio, con la que reemplazaremos el actual encabezado <h1>. El aspecto del sitio quedará así:

Como siempre que queremos crear un gráfico, utilizaremos Inkscape. Esta vez lo haremos con la herramienta Texto . Nosotros hemos utilizado una tipografía Forte, con un tamaño de 16. Después le hemos dado borde y un relleno con degradados.

Para crear el reflejo, hemos duplicado el texto, lo hemos reflejado verticalmente y lo hemos puesto debajo.

Después, sobre el reflejo hemos creado un rectángulo con un degradado de negro a gris. Con él crearemos una máscara de opacidad. El negro indica la zona que será transparente. Y cuando un color más se aproxime a blanco, más opaco será el objeto. Es decir, se verá más. Cuando tengamos el degradado a nuestro gusto, con el rectángulo y el reflejo seleccionado, vamos al menú Objeto y elegimos Máscara → Aplicar.

Utilizando el mismo sistema para el reflejo, hemos creado la imagen de la flor. Hemos llamado a las imágenes logo.png y pensamiento.png.

Es hora de colocarlas en nuestro sitio. No tenemos más que cambiar el contenido del <h1> por las dos imágenes:

<h1><img src="imagenes/pensamiento.png" alt="" width="65" height="90" />
    <img src="imagenes/logo.png" alt="Floramics" width="269" height="70" id="logo" /></h1>

Observa que hemos puesto el mismo texto de la imagen en su atributo alt. Así, si la imagen no se carga se verá el texto como lo teníamos hasta ahora.

También le hemos asignado un id. Lo hemos hecho porque le vamos a dar un poco de padding arriba y abajo para alinearla mejor con la imagen de la flor:

#logo { padding: 15px 0 5px; }

Lo hacemos en la hoja de estilo porque puede que un día decidamos cambiar la imagen de la flor, y así no tendremos que ir página por página para ajustar los nuevos márgenes.

Haz los cambios y prueba la página.

El primer problema que observamos es que queda una separación entre las pestañas y el contenido de la página.

Esto se produce porque el h1 es ahora mayor al tener las imágenes. Para solucionarlo, podemos añadir un margen superior al menú, de manera que la suma del margen, y su alto que es de 40px, sea igual o mayor al alto del h1, que ahora es de 90px. Por lo tanto, le añadimos 55px.

#menu {
   margin: 55px 40px 0 0;
   padding: 0;
   font-size: 105%;
   list-style-type: none;
   float: right; 
}

Con estos cambios ocurre otra cosa. Al probar la página, vemos que si esta es lo bastante ancha, el logo y las pestañas se ven en una misma línea. Pero si la reducimos, el logo "salta" encima de las pestañas, dejando la separación del margen que le acabamos de dar, lo que no queda muy bien.

Lo que vamos a hacer es dar un ancho mínimo a nuestra página, lo justo para que no se amonten los elementos. Si la ventana es mayor que ese ancho, no pasará nada. Pero si se hace menor, el ancho se tornará fijo, mostrando las barras de desplazamiento horizontales. Esta propiedad es min-width. También tenemos min-height para el alto, y max-width y max-height para los máximos.

Aplicamos la propiedad al body de la página.

body {
   ...
   
   min-width: 900px; 
}

Cuando la ventana sea mayor de 900px, la página mostrará un diseño líquido, que se hará fijo si la hacemos menor de ese tamaño.

 

Tras realizar todos los cambios de esta unidad, nuestro sitio ha quedado con este aspecto.

9.12. Para saber más...

Manual oficial de GIMP en castellano.

Tutoriales de Inkscape.

Ejercicio propuesto la Unidad 9

Prueba evaluativa de la Unidad 9