В то время, когда ваш ум занимается чтением текста, рассматриванием и анализом картинок, ваше подсознание работает на свойственном ему уровне - анализирует пятна, ритм, цвет и управляет вашими эмоциями. И даже очень интересный текст с отличным содержанием и иллюстрациями может быть отвергнут вашим подсознанием, если ему не будут соответствовать цвета, фон, рамочки и другие элементы. Теснота элементов на экране или наоборот, излишние паузы... до фига есть способов испортить впечатление, не подозревая об этом. Скажем, черный цвет фона в сочетании с цветом ваших заголовков может вызвать совсем не то ощущение, которое хотелось бы... И есть еще фактор, который совсем трудно предусмотреть. Это вкус, эстетика и настроение зрителя. На вкус и цвет товарищей нет... потому ваша страничка всем сразу все равно не понравится... ну это мысль совсем уж из области маркетинга.

Картинка из прошлого выпуска. Это упражнение на пространственные ощущения.

У вас уже определен формат. Это либо формат экрана в чистом разрешении as is, либо вы подразумеваеете, что страничка будет со скроллингом - то есть у вас пространство восприятия уже ограничено рамками с определенным соотношением сторон. В данном случае лучше абстрагироваться от конкретного содержания и представить ваш значок в виде точки. Итак, мы (европейцы)  воспринимаем картинку в направлении слева направо и сверху вниз. У китайцев и японцев это совсем по другому, но о них как нибудь потом... :o)

Картинка 1. Точка с левого края сверху. Согласно нашей динамике, она попадает сразу же в поле зрения и включает наше восприятия. Активное начало (быка за рога). Подобный вариант сразу предполагает включить зрителя в действие и сразу заставить ВОСПРИНИМАТЬ информацию. Будет ли он размышлять над ней или только "жевать что предложат" - зависит от дальнейших ваших действий по обустройству композиции.

Картинка 2. Точка справа сверху. Зрителю предлагается некая пауза "для приведения мыслей в порядок", то есть он успевает краем глаза оценить фон, шрифты, цвет, получить должные настройки.

Картинка 3. Как абстрактный вариант, ибо в жизни почти не встречается в чистом виде. Пауза затянулась. Зритель начинает искать глазами объект, то есть вариант подразумевает наличие определенных эмоций, неподвластных вам.

И так далее... Конечно, это все условно... но основной принцип композиции - заставить зрителя глазами следовать по экрану в задуманном ВАМИ порядке, в том же порядке воспринимать инфорацию и формировать свои мысли и эмоции как ВАМ надо. В современной рекламе всех видов эти приемы отработаны до совершенства (если реклама выполнена профессионалами). Живопись, графика, скульптура, дизайн и прочее, прочее - все подчиняется определенным законам восприятия, основанным на особенностях нашей психики.

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

На следующий ряд картинок вы може посмотреть, уже зная, как оценивать ту или иную композицию с точки зрения восприятия. Не всегда стоит устраивать анализ виденного, иногда достаточно определить - нравится или не нравится... и ПОЧЕМУ...

Как поступают профессиональные художники при создании композиции? Они рисуют композиционные СХЕМЫ на уровне пятен, линий и цветовых акцентов, они предварительно строят цветовую гамму своего произведения. Убедившись, что это все соответствует задуманному, они переходят к изготовлению уже самого сайта (или живописной картины, если хотите).

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

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

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

В следующий раз разговор пойдет о конкретных композиционных приемах, средствах и принципах композиции.

Раздел "Типсы" я пока переиначу в раздел "Советы косметолога", ибо речь пойдет о технической грамотности картинок и графических заголовков. Полтора года назад, впервые столкнувшись с вебом, я первым делом начал изучение этой проблемы. Размер картинки, ее оптимизация, настройка цвета и прочее. Много полезного тогда я нашел у всем известного Артемия Лебедева. Сейчас инет полон таких советов, но тем не менее... мой личный опыт.

Размер картинки. (в пикселах). Этот фактор целиком зависит от вашей композионной задумки. Хорошая картинка, имеющая собственную ценность, может быть и достаточно большого размера.

Размер картинки (по весу). Это уже зависит от вашей веб-культуры и этики. Заставлять зрителя с платным инетом "качать фикус" в полтора мегабайта кощунственно. Он просто постарается забыть к вам дорогу.

Заголовки. Графические, разумеется... лучший формат - GIF, хотя иногда лично я применяю и JPG.

Первый вариант весом всего в 600 байт. Но смотреть без боли на него нельзя. Рваные края вызывают ощущение неряшливости. Причина - либо отключенный Anti-aliased в шрифтовом модуле, либо картинка сохранена с недостаточным количством цветов в палитре (менее 32). При экспериментах я выявил, что рваный край начинает появляться при количестве цветов менее 27. Почему так много при черном цвете заголовка? Понятно из этих двух картинок.

Эти полутона во второй картинке и составляют мягкий край символа.

Случай, когда в заголовке удобнее применить JPG.

формат JPG - 5,5Кб

формат GIF - 20 Кб

Как говорится, комментарии излишни... При введении в GIF палитры на 128 цветов (в данном примере - 256) можно снизить размер изображения до 15 Кб, при палитре 64 (при заметной потере качества - 12 Кб), остальные палитры нарушают замысел мягких теней и полутонов... Да, не забывайте в GIFе включать функцию diter, иначе вместо мягкого перехода поимеете цветовую раскладку на определенное количество цветов.

При наличии в вашей картинке большого количества теплых оттенков - красного, оранжевого, и подобных... тут он бессилен. Дажи при минимальном коэффициенте сжатия он превращает красное в что -то ужасное. Слева -GIF (32 цвета), справа - JPG (75% сжатия).

Видите, все почернело. По сравнению с Gif-ом - полное ... недоразумение.

Как JPG ведет себя в картинках? Точно так же. Красная часть спектра оптимизируется предельно паршиво. И оптимизаторы тут не причем (поскольку они лишь визуально показывают картинку до записи ее в конкретный файл).

За сим, с уважением...   MrDeSign
(продолжение следует...)