В Роботландии есть замечательный художник Александр Артурович Русс. Вот мы с ним и сели за Фотошоп и придумали титульную картинку для моего сайта:
![]() |
![]() |
![]() |
Готовый рисунок перед записью на диск мы поместили, конечно, на тот же самый фон, что будет на сайте (растянули фоновую картинку по вертикали). Сделали так для того, чтобы анти-алиасинг по контуру картинки был правильным.
Вы не знаете что такое анти-алиасинг? Это очень просто! Вы ведь знаете, что экран монитора не гладкий, рисунок на нем собирается из отдельных пикселов, и эти самые точки-пикселы видны невооруженным глазом. Если не принять специальных мер, ступенчатость контура неизбежна. А можно по ступенчатой границе пустить пикселы имеющие переходной (средний) цвет между цветом контура и цветом фона. Ступеньки сглаживаются и визуально становятся незаметными. Это и есть анти-алиасинг. Профессионалы обязательно рисуют экранные картинки с анти-алиасингом. Тем более, что современные графические системы типа Фотошоп поддерживают анти-алиасинг самостоятельно.
Кстати, в настройках рабочего стола Windows 95/98 есть флажок "сглаживать экранные шрифты" (правый щелчок на рабочем столе Рабочий стол Настроить рабочий стол Эффекты). Этот флажок включает анти-алиасинг для шрифтов. Если у вас он не установлен, обязательно поставьте: шрифты станут красивыми и их пиксельная сущность станет незаметной. Как видите, теперь анти-алиассинг является стандартной услугой графической операционной системы.
Результат своей работы мы записали как два прозрачных
title1.gif (93x64, 3782 байт ) | Сидоров с монитором |
title2.gif (478x64, 6971 байт) | надпись Кухня Сидорова |
Для точного (по пикселам) размещения картинок на странице браузера мне понадобилась таблица и картинка-распорка empty.gif. В картинке empty.gif всего одна точка, и та сделана прозрачной, но такую картинку удобно использовать в дизайне, растягивая ее до нужного размера при помощи атрибута witdh тега IMG. Я написал такой код:
<TABLE border=1 cellspacing=0 cellpadding=0 width=591> <TR align=left valign=top> <TD> <IMG src=./pic/title1.gif width=93 height=64 border=0 alt=""> </TD> <TD> <IMG src=./pic/empty.gif width=20 height=90 border=0 alt=""> </TD> <TD> <IMG src=./pic/title2.gif width=478 height=64 border=0 alt="Кухня Сидорова"> </TD> </TR> </TABLE>
Иными словами, таблица выглядит так:
первая картинка | распорка | вторая картинка |
Работая с таблицей, я сначала включил ее границы (border=1), чтобы визуально наблюдать на экране, как она строится. Посмотрите ее здесь.
Ширина распорки взята в 20 пикселов, а высота в 90:
<IMG src=./pic/empty.gif width=20 height=90 border=0 alt="">
Высота распорки регулирует величину отступа заголовка от других элементов страницы.
Ширина всей таблицы задана в 591 пиксел для того, чтобы таблица не растягивалась при увеличении разрешения экрана:
<TABLE border=1 cellspacing=0 cellpadding=0 width=591>
Число 591 получилось так: 93+20+478=591 (ширина первой картинки + ширина распорки + ширина второй картинки).
Можно было бы указать и меньший размер. В этом случае браузер указанное число игнорирует и рисует таблицу в минимально-необходимых размерах.
Когда размер распорки был подобран, границы таблицы были выключены:
<TABLE border=0 cellspacing=0 cellpadding=0 width=591>
Посмотрите, что получилось. Я смотрел это, конечно, в разных браузерах, при разных размерах окна и при разных размерах шрифта по умолчанию.