Учебное пособие

Фотошоп для подготовки
Web-графики

       

Использование текста при подготовке Web-графики

Текст также часто используется при подготовке графического оформления страниц. Разумеется, здесь имеется в виду не текстовое содержание сайта, а надписи, изображенные на картинках. Использование таких надписей позволяет сделать оформление сайта более информативным не в ущерб красоте. При использовании «нарисованного» текста перед дизайнером открывается целый ряд возможностей.

  • Во время рисования в Фотошоп дизайнер может использовать практически любой шрифт, а обычный текст web-страницы в большинстве случаев не может содержать более трех стандартных типов шрифтов (гарнитур). Ярким примером использования нестандартных шрифтов могут служить названия сайтов, размещаемые обычно на начальных страницах. Образец такой надписи вы можете увидеть на рис. 6.6.
  • При подготовке изображений можно применять к надписи различные эффекты. Последние версии браузеров имеют некоторый набор фильтров, применяемых и к обычному тексту, но широкого распространения они пока не получили.
  • Текст, включенный в картинку, может быть ее частью, основным или вспомогательным элементом. Он может иметь тот же стиль, что и остальное содержание изображения и, таким образом, не выделяться сильнее, чем это требуется. Обычный текст, как правило, ясно различим среди графических элементов (это можно использовать для повышения информативности).
  • Графика позволяет использовать шрифты со сглаживанием. Сглаживание символов (antialiasing) означает образование на границах символов пикселов с цветом, переходным от цвета текста к цвету фона. Это позволяет значительно улучшить внешний вид текста, особенно при использовании символов большого размера. Символы малого размера, будучи сглаженными, читаются хуже, чем без сглаживания. Для обычного текста использование сглаживания возможно благодаря браузеру и операционной системе.
  • В отличие от простого текста, графика отображается независимо от настроек браузера. Независимо от того, какой цвет и размер шрифта установлен пользователем для web-страниц, ваш логотип будет отображен без искажений.

    Текст может использоваться для представления некоторой информации, например, при рисовании заголовка страницы или раздела. В логотипах, заставках и заголовках текст может использоваться в качестве пояснения, помогающего понять основную идею сайта или указывающего на то, с чем пользователю предстоит столкнуться в следующий момент. Еще одно применение текстовых надписей, выполненных в виде графических элементов — навигационные ссылки (кнопки). Такие элементы обычно «устанавливаются» на сайте вместо традиционных текстовых ссылок из-за возможности использовать различные специальные эффекты, доступные только при работе с графикой. При подготовке заголовков и кнопок следует уделять внимание тому, чтобы текст легко читался. Кроме того, следует помнить о том, что графические элементы занимают гораздо больше места на диске, чем простой текст. Они требуют больше времени для загрузки по каналу связи. Страница, насыщенная графикой, может загружаться достаточно долго. Поэтому следует искать компромисс между красотой и скоростью загрузки.

    Нарисованный текст может использоваться и как самостоятельный элемент, особенно если он нарисован красиво. Но даже если он несет основной смысл (например, это навигационный указатель), его чаще всего дополняют каким-либо изображением. В случае навигации это может быть маркер, выделяющий ссылку из остального содержимого сайта, или логотип раздела, на который эта ссылка указывает.

    На рис. 6.7 показан пример использования шрифта при изготовлении логотипа сайта.

    Подготовка графических элементов web-страниц в Фотошоп

    Рис. 6.7. Пример использования нарисованного текстового логотипа совместно с графикой

    В верхней левой части страницы находится название сайта — «OZON». Рядом с ним располагается графический логотип. И то и другое выполнено при помощи графики.

    Использование для названия сайта графики позволило реализовать все возможности, указанные выше. Обратите внимание на очертания надписей «OZON» и «ИНТЕРНЕТ-МАГАЗИН». Шрифт надписи не относится к стандартным гарнитурам, встраиваемым в браузеры. В отличие от простых текстовых надписей (присмотритесь повнимательнее к пунктам меню в левой части страницы), грани нарисованных букв плавно переходят к фону. Это значительно улучшает внешний вид страницы. Сглаживание границ возможно и для обычного текста, но оно полностью зависит от возможностей браузера и операционной системы. Часто вместе с фотоизображениями и текстовыми элементами используется графика, нарисованная самим дизайнером

    Подготовка графических элементов web-страниц в Фотошоп.

    Обзоры чаще всего это небольшие маркеры списков, указатели, навигационные кнопки и другие элементы. Однако встречаются и большие картинки, нарисованные от руки или при помощи векторных редакторов.

     

     

     

  • Top.Mail.Ru
    Top.Mail.Ru