El principio de "ser recibido por la ropa" es cierto no solo para las personas, sino también para los sitios. El vestido del sitio es su diseño. Y es el diseño el que determina la impresión que tiene el visitante en los primeros segundos de visualización del recurso. Esta impresión es especialmente importante porque determina su comportamiento futuro. El primer elemento de diseño que ve todo usuario que visita el sitio es su "encabezado". La tapa es la cara del recurso web. Por lo tanto, todo diseñador web novato desea, en primer lugar, aprender a crear encabezados para sitios.
Necesario
- - acceso a Internet;
- - navegador moderno;
- - editor de gráficos de trama (GIMP, Photoshop);
- - opcional: editor de gráficos vectoriales (CorelDraw);
- - opcional: entorno de modelado 3D (Blender, 3DStudio);
- - opcional: hoja de papel, lápiz o bolígrafo.
Instrucciones
Paso 1
Desarrolle un concepto para el encabezado del sitio futuro. Idealmente, el concepto debería basarse en la idea original. Cuando faltan ideas, se puede obtener inspiración analizando las buenas soluciones existentes. Refleje el resultado de la investigación creativa en forma de boceto en una hoja de papel. El boceto debe reflejar la estructura del futuro encabezado del sitio con la indicación de lugares y áreas "de goma" llenas de imágenes. En esta etapa, es una buena idea pensar en un esquema de color aproximado para el diseño del encabezado.
Paso 2
Seleccione el tamaño del encabezado. En realidad, vale la pena definir claramente solo uno de sus parámetros: la altura. Como regla general, la altura de los encabezados del sitio es fija y no depende de la resolución lógica que afecta los parámetros de visualización de las fuentes. En otras palabras, debe elegir un valor para la altura del encabezado en píxeles. En este caso, tiene sentido tener en cuenta la posibilidad de colocar banners o bloques de publicidad contextual en la cabecera. En cuanto al ancho, se debe determinar el valor mínimo, destacando al menos una zona de "goma" que permita que el encabezado se adapte a los diferentes tamaños de la página web.
Paso 3
Cree una plantilla de encabezado en un editor de gráficos. En un nuevo documento, agregue una capa transparente a la que arrastrará el boceto de acuerdo con los parámetros geométricos seleccionados. La altura de la capa debe coincidir con la altura del encabezado. El ancho puede tomarse como arbitrario, pero más grande que el tamaño mínimo, dejando espacio para áreas horizontales de “goma”. En la plantilla, designe zonas de tamaños fijos y variables, zonas destinadas a ser rellenadas con imágenes estáticas, imágenes de fondo.
Paso 4
Busque o cree imágenes estáticas para colocarlas en su plantilla de encabezado. El logotipo y algunos elementos únicos se pueden crear en un editor de vectores o en un entorno de modelado 3D. Es bastante fácil encontrar imágenes temáticas en bancos de fotos gratuitos en Internet.
Paso 5
Inserte el fondo, el logotipo y las imágenes estáticas en la plantilla de encabezado del sitio en un editor de gráficos. Agregue el fondo y cada imagen a una capa transparente separada. Organiza las capas de la mejor manera. Al mover imágenes en capas, logra su diseño perfecto, correspondiente a la plantilla creada anteriormente.
Paso 6
Guarde la imagen de encabezado resultante. Guarde el proyecto de trabajo en el formato nativo del editor de gráficos. Luego, guarde la imagen de encabezado acoplada en un formato sin pérdidas (por ejemplo, PNG).
Paso 7
Cree una plantilla de encabezado HTML si es necesario. Abra la imagen acoplada en el editor. Recorta imágenes que correspondan a áreas de un tamaño fijo. De los lugares correspondientes a las áreas de "goma", recorte las imágenes de 1 píxel de ancho. Guarde todas las imágenes en el disco. Diseñe el encabezado HTML utilizando las imágenes guardadas.
