.

Графические заголовки

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

В данном примере для создания заголовка с тенью для Web-страницы используется программа Fireworks. Примерно те же действия по созданию графического текста можно выполнить и в Photoshop.

1. Запустите Fireworks.

Появится окно программы Fireworks (рис. 8.13). Обратите внимание на расположение панели инструментов, Property Inspector (Инспектор свойств) и набора других панелей.

2. В строке меню выберите команду File^New (Файл=>Новый).

Откроется диалоговое окно создания документа New Document (рис. 8.14). Вы также можете создать новый файл, используя комбинацию клавиш <Ctrl+N> (<S€+N> для Mac)

3. Для нового файла определите размеры, разрешение и цвет фона, а затем щелкните на кнопке ОК.

Для того чтобы у вас было достаточно пространства для работы, укажите в области Canvas Size ширину 500 пикселей, длину — 300 пикселей и разрешение — 72 dpi. Если в дальнейшем вы будете экспортировать изображение без обрезки, то его размер ^оставь г 500x300 пикселей. Этот размер слишком велик для заголовка, но я люблю начинать с большого холста. Следуя приведенным ниже рекомендациям, обрежьте документ, чтобы изображение соответствовало размерам заголовка. Лучше всего обрезать документ по размеру его содержимого. Чем меньше размер изображения, тем меньше размер файла, что в результате влияет на скорость загрузки.

Обратите внимание на то, что рисунки, которые сопровождают данные этапы, созданы в операционной системе Macintosh. Однако Fireworks прекрасно работает как под Мае, так и под Windows. Пользователи Windows могут выполнить эту последовательность действий с таким же успехом.

В этом документе я хочу создать заголовок для Web-страницы с белым фоном (фон Web-страницы установлен в ее HTML-коде). Поэтому я оставляю пункт Canvas Color (или цвет фона) белым. При создании графики следует всегда использовать такой же цвет фона, как на вашей Web-старнице.

При создании графики в программе Fireworks вы работаете в режиме Original (обратите внимание на закладку в верхней части документа, представленного 8.15). Впоследствии вы воспользуетесь режимом Preview, чтобы увидеть влияние выбранных вами цветовых палитр и форматов файла на дизайн.

4. На панели инструментов выберите инструмент для работы с текстом (Text). Кнопка этого инструмента обозначена буквой А. Щелкните курсором на холсте вашего документа, чтобы начать ввод текста. Закончив ввод надписи, выберите инструмент Pointer (Указатель), который расположен на панели инструментов в левом верхнем углу, чтобы выйти из режима ввода.

5. Примените настройки стиля, размера и цвета для своего шрифта.

Используя инструмент Pointer, щелкните на текстовом объекте, чтобы его выбрать. На длинной горизонтальной панели Property Inspector (рис. 8.16) выберите шрифт из раскрывающегося списка, а затем введите его размер (справа от списка со стилями). Справа от того места, где вы указывали размер шрифта, щелкните на образце цвета и выберите нужный вам цвет из раскрывающейся палитры.

6. Добавьте эффекты к тексту.

Не снимая выделения текстового объекта, выполните следующие действия.

6.1. Щелкните на символе “+” в правой части панели Property Inspector и выберите из списка эффект для вашего текста.

6.2. После выбора эффекта (например, Shadow and GlowODrop Shadow), на экране появится небольшое диалоговое окно, где вы можете изменить настройки. Поэкспериментируйте с настройками, пока вам не понравится результат. По ходу ваших экспериментов вы заметите, что текст на экране динамически обновляется в соответствии с выбранными настройками.

6.3. Чтобы сохранить выполненные изменения, просто щелкните за пределами диалогового окна.

6.4. Если вы захотите обновить настройки эффект тени, щелкните на пиктограмме “i” рядом с эффектом Drop Shadow. Вы можете добавить к тексту сразу несколько эффектов. Для этого щелкните на пиктограмме “+” и выберите еще один эффект.

6.5. Чтобы удалить эффекты, выберите их в списке и щелкните на пиктограмме

7. Обрежьте изображение соответственно размеру надписи.

Завершив дизайн надписи, вы можете подготовить изображение к экспорту. Если вы не обрежете документ, все свободное пространство вокруг вашего объекта будет включено в экспортируемый файл. В итоге получится маленький текст на большом белом пространстве. Для осуществления обрезки документа относительно содержащихся в нем объектов нужно выбрать команду ModifyoCanvas^Trim Canvas.

8. Выбор формата файла.

Перед экспортом этого заголовка выберите формат файла. На панели Optimize задайте параметры, которые показаны 8.17.

8.1, Выберите значение GIF из первого списка, a Adaptive — из второго, как показано 8.17.

8.2. Затем в поле Colors задайте значение 128. Этот параметр ограничивает количество цветов в вашем заголовке. Для большей оптимизации изображения вы можете задать еще меньше цветов. Чем меньше цветов вы используете, тем меньше размер фалла, а следовательно, тем выше скорость его загрузки. Однако, если вы выберете слишком мало цветов, качество изображения может резко ухудшиться.

В Fireworks вы можете просмотреть, как будут выглядеть выбранные вами цве- rdlJkX товые палитры и настройки формата файла. Для этого необходимо щелкнуть на LV«r# кнопке Preview в верхней части окна документа Находясь в режиме предвари- тельного просмотра, вы можете выбирать различные параметры на панели Optimize, чтобы увидеть, насколько хорошо смотрится изображение и сколько времени потребуется на его загрузку (всю эту информацию можно почерпну гь в режиме Preview). Когда вы определитесь с параметрами, которые вас устраивают, можете щелкну ть на кнопке Original.

9. Сохраните редактируемый файл и экспортируйте заголовок.

Наконец-то! Перед экспортом изображения для Web сохраните результаты вашей работы в “родном” формате программы Fireworks, выбрав команду меню FileoSave. В диалоговом окне Save введите имя файла и задайте расширение .png (например, my file. png). Сохраните файл в любом месте на жестком диске компьютера. Сохранив оригинальный PNG-файл, вы всегда сможете его открыть, внести изменения в дизайн, а затем еще раз экспортировать в формат GIF или JPEG для вашего Web-сайта.

Для того чтобы экспортировать заголовок для Web-сайта, выберите команду File^Export. В открывшемся диалоговом окне экспорта выберите вариант Images Only рядом с кнопкой Save As. Введите имя файла, после которого задайте расширение .gif или .jpg, выберите папку на жестком диске и щелкните на кнопке Save.

Вам следует уделить немного времени изучению шрифтов в Web-браузере, так как основная часть страницы состоит из HTML-текста. Когда вы размещаете текст на Web-странице, вы ограничены в форматировании. Для форматирования текста вы можете использовать HTML-теги или таблицы стилей CSS, определяя набор параметров форматирования, напри мер цвет, начертание и размер шрифта. Вы можете также задать один из нескольких вариан тов шрифта.

Когда вы задаете шрифт в HTML или CSS, вы предполагаете, что на компьютере пользователя этот шрифт присутствует, и ваша Web-страница будет отображаться корректно. Если на компьютере пользователя нет шрифта, к которому обращается Web-страница, то браузер заменит этот шрифт. Это может негативно сказаться на макете вашей страницы, потому что, как вы уже знаете, шрифты сильно отличаются по размеру и ширине.

Загрузка HTML-страниц осуществляется последовательно — сверху вниз. Посему, если подстановочный шрифт окажется шире, чем тот, который вы задали, макет значительно переместится вниз.

Спецификация шрифтов

Используйте шрифты, которые есть на компьютере почти у всех пользователей, например Helvetica, Arial, Times, Verdana, Georgia и т.д. Взгляните 8.18, где приведен перечень стандартных шрифтов — он невелик.

Другая предосторожность, которую вы можете реализовать в HTML-теге, — это перечень предпочтений шрифтов. К примеру, когда вы задаете шрифт в теге, укажите первым наиболее предпочтительный шрифт, а затем перечислите альтернативные шрифты, которые будут использоваться системой, если первый шрифт окажется недоступным. Когда кто-то загружает страницу, браузер просматривает ваш перечень шрифтов, пока не найдет реализованный в системе шрифт. В идеальном случае этим шрифтом окажется первый шрифт в вашем списке. Вот как примерно может выглядеть этот HTML-тег:

<font face="Verdana, Arial, Helvetica, sans-serif">

В этом случае Verdana является первым, наиболее предпочтительным шрифтом, за которым следует Arial и Helvetica. Последняя запись “sans-serif” свидетельствует о том, что если браузер не обнаружит в системе ни шрифта Verdana, ни Ai ial или Helvetica, то для отображения текста Web-страницы будет использован любой доступный шрифт без засечек.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×