Рисунка из RGB в индексированный цвет

Сайта в зависимости от его тематики

Цветовое и символическое решение

Закрывая «цветную» тему, сообщим несколько технических данных. В компьютере

применяется несколько моделей цвета. Если вы создаете или обрабатываете формат JPEG,

то обязаны в вашей программе для рисования (скорее всего в Фотошопе) проверить модель

цвета. Для этого пройдите путь Image › Mode – «Изображение › Режим»: на открывшейся

панельке флажок должен стоять напротив букв RGB. Эта модель цвета обеспечивает полу-

чение богатой палитры путем смешения трех исходных цветов – Red, Green и Blue, что озна-

чает красный, зеленый, синий. Эта модель опирается на аддитивный механизм цветовос-

приятия, имеющий физиологическую основу (сетчатка глаза имеет клетки, чувствительные

С. Н. Бердышев. «Искусство оформления сайта. Практическое пособие»

только к указанным цветам; богатство красок в окружающем мире мы видим за счет смеше-

ния импульсов от этих трех клеток).

Рядом с буквами RGB на означенной панельке вы увидите надпись «Индекс

цвета» (Index Color). Индексированный цвет – еще одна модель, применимая к рисунку

GIF. Чтобы перевести (экспортировать) JPEG в GIF, мы сначала должны изменить модель

цвета с RGB на индекс, а как это делать, показано на рис. 5. Гифы должны преобладать в

графике сайта, поскольку передача ими цвета наиболее полноценна на всех компьютерах.

Рис. 5. Перевод цветовой модели

Крайне редко используется в сети цветовая модель Grayscale (Ч/Б), которая предста-

вляет собой опять же индексированную палитру, вот только значениям цвета в ней прида-

ется градация серого (всего 256 степеней). Черно-белый режим необходим для старого фото

или имитаций под него.

А еще на той же панельке вы можете заметить упоминание о четырехцветной субтрак-

тивной модели CMYK (от англ. Сyan, Magenta, Yellow, blacK – голубой, пурпурный, желтый,

черный), которая создана и используется в полиграфии. Перед выводом на печать графиче-

ский файл должен быть конвертирован в CMYK, что называется цветоделением. Вам нужно

применять цветоделение тогда, когда собираетесь импортировать файл JPEG в CorelDraw

или любой другой векторный редактор для дополнительной обработки. После обработки

рисунок из CorelDraw экспортируется обратно в формат JPEG с моделью RGB. Экспорти-

ровать изображение сразу в гиф (если есть такая нужда) не рекомендуется, лучше это про-

делать потом в Фотошопе.

С. Н. Бердышев. «Искусство оформления сайта. Практическое пособие»

Обратим внимание на такую хитрость: каждый цвет и оттенок, используемый в гра-

фике, обладает номером. Запомните это. Позднее мы подробнее расскажем, для чего нужны

такие премудрости (см. п. 3.2 пособия).

Разобравшись с цветом, перейдем к краткому описанию графических компонентов,

которые украшают веб-страничку, делают ее приятной для глаз и интересной. Таких типов

насчитывается семь:

> собственно графические файлы – статичные и анимированные, несущие надписи

или только изображения. Эту красоту нужно использовать умеренно, чтобы не отягощать

страничку избыточным «весом»;

> обычные заголовки (Headings), которые получаются посредством простого введения

кода в html-документ. С ними мы детально познакомимся в п. 3.3 пособия;

> трехмерные заголовки (3D Headings), получаемые путем использования функции

фильтр, с которой мы познакомимся в той же части самоучителя;

> фоновые рисунки (Backgrounds), образующие базовый элемент темы странички.

Иногда целесообразно применять вместо фонового рисунка фоновую заливку, что выгоднее,

поскольку страничка становится легче и загружается быстрее;

> кнопки (Buttons), являющиеся частью навигации и по способу исполнения предста-

вляющие собой гифы;

> графические маркеры (Bullets, они же пульки), а также вообще маркированные и

нумерованные списки, о которых мы тоже непременно поговорим;

> горизонтальные полосы-разделители (Dividers) могут быть очень красивы при

задании им верной длины, ширины, цвета и локализации.

Реклама в виде баннеров и объявлений тоже может быть и, говоря прямо, должна быть

частью дизайна интерфейса. Рекламные блоки нужно в небольших количествах органически

интегрировать в композицию странички, добиваясь при этом смыслового соответствия тема-

тике ресурса. Естественно, графическое оформление рекламы тоже должно быть на доста-

точно высоком уровне. При этом надлежит осторожно применять нефункциональные эле-

менты оформления страницы: неактивные баннеры и объявления вводят в заблуждение.

Сочетание графических компонентов единой цветовой гаммы и гармонирующей с

ними подложки-background создает тему сайта. Дизайнеру нельзя путать тему сайта

с тематикой контента (и всего проекта), поскольку это совершенно разные, хотя и

несколько взаимосвязанные понятия. Так, медицинская тематика обычно требует темы с

преобладанием белого, голубого и нежно-розового. Однако уклон тематики в сторону фито-

терапии (траволечения) требует изменения темы в пользу комбинации травянисто-зеленого,

светло-зеленого и нежно-желтого цветов (см. табл. 1).

Эго-составляющая сайта. Этому аспекту не всегда уделяется достаточное внимание

теоретиками веб-дизайна, однако всякий сайт обязан иметь среди множества конструкцион-

ных элементов эго-составляющую, как называются в их совокупности средства самоиден-

тификации и индивидуализации посетителя. Данные средства помогают юзеру реально

ощутить свое присутствие на сайте. Подробнее о технике создания эго-составляющей будет

рассказано в пункте 4.3 настоящего пособия, а пока просто перечислим такие средства. Во-

первых, курсор. Это продолжение всемогущей руки юзера. Так пусть юзер отчетливо видит

свою руку, ощущает ее движения: нужно сделать для своего сайта скромный, но оригиналь-

ный, по-своему необычный курсорчик. Например, на сайте по продаже раскрасок для малы-

шей курсор может изображать карандаш или фломастер.6

6 Хотя техника изготовления курсоров здесь подробно описана в пособии, коллекцию шаблонных курсоров можно

скачать на нашем ресурсе «Образованные котята» по адресу http://obrazcats.narod.ru/other/cursors.html.

С. Н. Бердышев. «Искусство оформления сайта. Практическое пособие»

Затем, если вам нужна устная реклама, полезно одну из страничек сайта отвести под

коллекцию аватаров (авиков). Напомним, что аватарами называются такие потешные ква-

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

в дневниках и т. д. в качестве юзерпика – портрета пользователя. Пусть люди берут ваши

аватары и потом говорят о вас «под личиной» этих самых аватаров! Современные техноло-

гии позволяют сконструировать гиперактивные аватары, которые отнюдь не будут похожи на

традиционные картинки-квадратики, но всем своим видом напоминают зверьков или чело-

вечков и умеют перемещаться в пространстве сайта вместе с посетителем, реагировать на

действия гостя.

Реагировать на движения юзера может и сам веб-узел, словно миниатюрная биосфера,

в которой оказался путешественник по Сети. Сайт может встречать гостя музыкой (на глав-

ной или какой-либо другой, особой страничке), может предоставлять комнату отдыха для

прослушивания звуков природы либо прекрасных мелодий в приятной обстановке, может

делать словесные сообщения, комментировать движения гостя и, наконец, может попро-

щаться с посетителем, когда тот задумает покинуть ресурс. Подобное средство индивидуа-

лизации мы назовем звуковым сопровождением юзера.

Кроме того, в общении с вами и с остальными посетитель веб-узла может использо-

вать смайлики, потешные рожицы, часто анимированные (подвижные), а в последнее время

еще и говорящие либо даже поющие. Вы и сами можете применять смайлики, обращаясь

к посетителю. Конечно, применение таких картинок зависит от тематики сайта. Если вы

рекламируете какой-нибудь солидный банк, то ему вовсе не понравится, что на страничках

его ресурса появляются какие-то глумливые колобки с глазами навыкате.

Самый лучший способ общения – это предоставить юзеру возможность высказать свое

мнение, например, в процессе голосования. На этот случай сайт необходимо оборудовать

формами для голосования. Еще больше возможностей для общения предоставляет госте-

вая книга, в которой люди не просто отвечают на ваши вопросы, но и записывают все свои

мысли, какие только приходят им в голову. На коммерческих сайтах гостевая совершенно не

нужна. Во-первых, в ней будут отмечаться ваши конкуренты, оставляя адреса своих ресур-

сов. А во-вторых, почитайте рассказ А. П. Чехова «Жалобная книга», добавьте в него совре-

менный мат и вообразите себе, что произойдет, когда такую ерунду увидят у вас на ресурсе

потенциальные покупатели.

Форум – место для общения. Cобеседниками здесь выступают гости ресурса, они ведут

между собой перепалку, дают советы и т. д. Форумом в Риме называлась базарная площадь,

если кто подзабыл. Для определения слова «базарный» можете воспользоваться словарями

Даля или Ожегова. Когда дойдете до конца списка, вообразите себе, какой негативный заряд

приобретет ваш сайт благодаря форуму. Разумеется! Коммерческому ресурсу форум необ-

ходим столь же мало, как и гостевая книга.8

Поэтому гораздо более полезны для наших целей контактная информация и кон-

тактные формы. С их помощью каждый может связаться с владельцем сайта в любой

момент, в том числе не покидая сайта. Контактная информация важнее контактной формы.

Конечно, форма облегчает быстрое оформление заказа, но ведь не все в жизни сводится к

купи-продайским отношениям! Пребывать на сайтах, где нет адреса электронной почты (email),

попросту противно. А что если возник очень важный вопрос, но вы не можете его сразу

сформулировать? Или, быть может, нужно задать несколько вопросов, чтобы определиться

в своем выборе, а это предполагает отправку нескольких писем. Адрес электронной почты

7 Еще один случай ошибки. Правильнее «аниме», но, похоже, в русском языке закрепилось неверное написание.

8 Сказанное, однако, вовсе не означает, что коммерческим сайтам не стоит мелькать на страничках уже готовых фору-

мов. Еще как стоит!

С. Н. Бердышев. «Искусство оформления сайта. Практическое пособие»

должен присутствовать обязательно, равно как и почтовый адрес (для компаний). А злоупо-

требление контактными формами при отсутствии полноценной обратной связи гарантирует

по большей части поступление невнятных заказов такого рода, как в известном анекдоте:

«Мне, плз, ДВД с киной про того чувака, который еще снимался в том кине».

Гипертекст и язык HTML. Ранее читателя уже предупредили, что понадобится осво-

ить азы языка HTML, на котором пишутся веб-странички. Аббревиатура HTML означает в

расшифровке Hyper Text Markup Language, то есть язык разметки гипертекста. Сказанное

нуждается в пояснениях. Дело в том, что WWW представляет собой не только паутину, но

и технологию поддержания информационного потока, в основу которой положена гипер-

связь в виде системы переходов между источниками данных. Такая связь осуществляется за

счет гипертекстовых ссылок, или, если называть их короче, гиперссылок. Ссылкой может

служить фрагмент текста и рисунок. Причем на вашей html-страничке могут полностью

отсутствовать переходы (гиперссылки), однако она все равно остается HTML-документом,

поскольку написана на языке HTML, что и обеспечивает переход на нее по ссылке с других

страничек сайта либо с поисковика (поисковой системы).

Найдем в Проводнике нашу ученическую страничку index.html и, выделив ее курсо-

ром, зададим команду Открыть с помощью… › Интернет-Эксплорер. Интернет-Эксплорер

(Internet Explorer), как вам уже известно, представляет собой программу для просмотра веб-

страничек. Эта программа определенно установлена на вашем ПК, поскольку она относится

к числу стандартных.

Первое, что мы увидим, это непонятный набор символов вместо нашего текста. Так

передаются Эксплорером русские буквы, и подобная передача нас, естественно, не устраи-

вает. Тогда выполним первую в нашей жизни работу с HTML языком. Для начала пройдем

путь Страница › Кодировка (или Вид › Кодировка). Тогда мы увидим, что наш файл имеет

кодировку ISO. Именно она и делает русские шрифты непонятными для компьютера. Выбе-

рем другую кодировку – «Кириллица (Windows)». Установив ее, посмотрим лишний раз на

ученическую страничку: теперь она в нормальном виде (рис. 6). И мы можем смело пройти

путь Страница › Просмотр HTML-кода (или Вид › Просмотр HTML-кода).

Рис. 6. Смена кодировки html-странички

Перед нами в программе Блокнот откроется записанная на HTML языке верстка нашей

странички. Документ начинается словами, заключенными в какие-то странные кавычки:

С. Н. Бердышев. «Искусство оформления сайта. Практическое пособие»

‹HTML›‹HEAD›‹meta http-equiv=“content-type" content=“text/html; charset=iso-8859-1"›.

Слова в кавычках называются тэгами (тегами), они задают форматирование html-доку-

мента. Каждый тэг имеет определенные свойства – атрибуты, обладающие неким значе-

нием. В ходе html-программирования мы выбираем для тэгов подходящие атрибуты и задаем

последним оптимальное значение.

Первое слово показывает нам, что перед нами действительно html-документ. Второе

начинает собой «шапку» (заголовок, англ. head) этого документа, куда включается вся наи-

более важная информация о страничке. Что такое content, понятно: это информационное

наполнение. Оно имеет вид текста text, внедренного в тело HTML-документа. Буквы ISO

во фразе charset=iso-8859-1 подсказывают, что этот атрибут и есть указатель кодировки.

Сейчас мы сменили кодировку на кириллицу, и теперь остается сделать так, чтобы компью-

тер всегда использовал в отношении этой странички кодировку кириллицы. Поэтому уда-

лите значение атрибута charset – вместо iso-8859-1 напишите windows-1251. Вот вы уже и

научились писать на HTML кое-что важное. Об остальном узнаете из пункта 3.2 настоящего

пособия.

Заметьте, много внимания языку HTML не уделяется, поскольку его тонкости вы

изучите самостоятельно в процессе работы со специализированной литературой. Дело в том,

что настоящий веб-дизайнер должен сначала научиться воображать странички, конструи-

ровать их гармоничными и привлекательными, а уж только потом осваивать технические

приемы верстки. Если же человек овладел техникой, а потом принимается за постижение

гармонии, то его путь будет более длительным и трудным (хотя при упорстве завершится

тоже успешно). Ведь такой человек в два раза дольше будет изучать технические приемы,

поскольку не сможет понять их назначения. Когда же мастер твердо знает, как и над чем

станет работать, он в два счета выучит технологию дизайна.

С. Н. Бердышев. «Искусство оформления сайта. Практическое пособие»

Дата добавления: 2015-06-28