¿Cómo construir un gráfico de la bandera de su sitio de HTML5 y CSS3

Casi todos los sitios web comerciales HTML5 y CSS3 tiene una bandera gráfico - un gráfico especial, por lo general con un tamaño fijo (900x100 es común), que aparece en todas las páginas. Normalmente, si está modificando una plantilla CSS, usted tiene un banner gráfico predeterminado. Usted querrá copiar este gráfico con el fin de comenzar con el tamaño y la forma correcta.

Usted puede construir una bandera de muchas maneras, pero aquí es una técnica sencilla que puede modificar:

1. Cargar o crear la forma básica.

   Si usted tiene un gráfico de lanzarte, cargarlo en Gimp. Si no es así, crear una nueva imagen del tamaño que usted necesita. El mío es de 100 píxeles de alto por 900 píxeles de ancho.

2. Crear un fondo de plasma.

   Utilice el filtro de plasma (Filtros-Render-Clouds-plasma) para crear un patrón semi-aleatoria. Utilice los nuevos botones de semillas y la turbulencia de cambiar el ambiente en general. No te preocupes por el colores- se les quita en el siguiente paso.

3. Después de que el fondo de plasma está en su lugar, utilice el filtro Colorear para aplicar un color al fondo.

   Elija un color consistente con su tema. Para este ejemplo, ir a dar un color más claro porque usted está utilizando sombras, que requieren un fondo claro. Utilice el control deslizante Luminosidad para hacer un color relativamente ligero.

4. Crear una capa de texto con la herramienta Texto.

   Texto en un gráfico debe ser grande y en negrita. La herramienta Texto crea automáticamente una nueva capa. Después de escribir el texto, especifique el tipo de letra y el tamaño.

5. Duplicar la capa de texto.

   En el panel Capas, haga una copia de la capa de texto. Seleccione la menor de las dos capas de texto (que se convertirá en una sombra).

6. Difuminar la sombra.

   Con la capa de sombra seleccionado, aplicar el desenfoque gaussiano (Filtros-Blur-Gaussian Blur).

7. Mueva la sombra.

   Utilice la herramienta Mover para mover las posiciones relativas del texto y la sombra. Por lo general, los usuarios esperan una sombra sea ligeramente inferior y derecha del texto (que simula la luz que viene de la parte superior izquierda). Cuanto más lejos la sombra es a partir del texto, mayor será el texto parece estar flotando.

8. Haga la sombra semitransparente.

   Con aún seleccionado la capa de sombra, ajuste el control deslizante Opacidad al 50 por ciento. Esto hará que las sombras menos pronunciado y permitir que parte del fondo que aparezca a través de la capa de sombra.

9. Sazone al gusto- hacer adiciones en base a sus necesidades.

10. Guarde en un formato reutilizable.

    El formato nativo para imágenes en Gimp es XCF. Tiendas XCF todo - capas, configuraciones y todos. Si necesita modificar el banner más tarde (y usted), usted tendrá una buena versión para trabajar.

    Elija Archivo-Guardar como para guardar el archivo. Si especifica el .xcf extensión, Gimp guarda automáticamente en el formato completo.

11. Exportar a un formato comprimido.

    En general, debe guardar los gráficos de banner como archivos PNG o GIF. (Gimp es compatible con ambos formatos.) Considere PNG a menos que la capa inferior tiene la transparencia (porque algunos navegadores todavía no admiten las características avanzadas de la transparencia del formato PNG). No guardar las imágenes que contienen texto en formato JPG. El esquema de compresión JPG es notorio por la adición de artefactos a texto.

    

Normalmente, cuando se guarda en otro formato, aparece un cuadro de diálogo de opciones. En caso de duda, ir con los valores por defecto.