Полезные материалы

Создание коллажа в Adobe Photoshop

Свет и цвет

Самоучитель HTML

Справочник CSS

Изображения являются неотъемлемой частью любого интернет-ресурса, помогая создавать уникальный дизайн, иллюстрировать материалы сайта, или просто демонстрировать посетителям фотографии. «Графика для Web» научит вас, как обрабатывать фотографии, чтобы сделать их более выразительными; готовить изображения для публикации; размещать картинки на веб-странице и создавать свои собственные иконки.

Вы можете подписаться на получение материалов сайта по почте через систему рассылок Subscribe.ru. Для этого введите свой почтовый адрес и нажмите кнопку ОК.

Общие рекомендации при работе с форматом GIF

 

Подход к оптимизации изображений в формате GIF различается в зависимости от исходных данных: имеются ли в рисунке прозрачные участки и градиенты, размера картинки, и количества цветов. Также имеет значение, что для вас важнее: размер или качество, поскольку в большинстве случаев приходится чем-то жертвовать. Хотя оптимизация файлов и заключается в отыскании золотой середины, в большинстве случаев исходное качество изображения теряется. Его можно повысить, но при этом неминуемо возрастет и объем файла. Поэтому следует учитывать важность изображения для сайта и с учетом этого подбирать параметры. Например, к улучшению вида заголовка сайта, который размещается на каждой странице, следует подойти более тщательно, поскольку он определяет «лицо» сайта. Однако и здесь не следует злоупотреблять размерами файла, иначе посетители не поймут, чего они так долго ожидают. А не поймут, так и труды не оценят.

Общие рекомендации при работе с форматом JPEG

 

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

Оптимизация файлов в формате JPEG

 

Формат JPEG (Joint Photographic Experts Group) широко применяется при создании сайтов для размещения на них фотографий и других полноцветных изображений. Алгоритм, на котором построено действие формата, частично отвергает данные, но при этом эффективно сжимает файлы. JPEG характеризуется фактически одной величиной, с помощью которой можно управлять объемом файла, называемой качество. Чем выше это значение, тем лучше выглядит изображение, но при этом возрастает и объем файла.

Эффект перекатывания

 

Смена одной картинки на другую при наведении на нее курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но во многих случаях вполне достаточно и CSS.

Что такое interlaced?

 

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

Средства работы с цветом

 

Автор: Виктор Вязьминов

Реальное количество цветов нельзя описать никакими 16-миллионными палитрами. На самом деле чувствительность человеческого глаза к цвету у людей разная. Это то же самое, что слух. Хорошо слышать еще не значит иметь музыкальный слух. Так же иметь глаза не значит чувствовать цвет. В качестве прикола байка от художников: «чувствуешь цвет — живописец, не чувствуешь — график». На самом деле, конечно, это только байка. Есть классическая музыка, есть джаз, есть попса. Так и тут. Хотя данная аналогия никуда не годится. Типа — умеешь рисовать только портрет — значит, рисуешь «руки в карманах, а ноги в густой траве».

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

Среда, но не день недели

 

Автор: Виктор Вязьминов

Под понятием «среда» я имею в виду не день недели, а то визуальное пространство, образуемое текстом и оформлением странички. Я умышленно не пишу слово «сайт», потому как все сказанное может относиться и к полиграфии, и другим видам дизайна.

Приемы и способы акцентирования

 

Автор: Виктор Вязьминов

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

Как выделить основное в фотографии? Я думаю, тут очень хорошо применимы приемы и средства художников-живописцев и графиков. То есть те же самые пресловутые ввод в композицию, движение взгляда по элементам и объектам, перемещение, ритм, контраст, силуэт, пятно и т.д. Минимальными средствами вы можете усилить воздействие конкретной фотографии, подчеркнув или выделив один или несколько принципов. Далее рассмотрим способы акцентирования на примере нескольких фотографий.

Акценты

 

Автор: Виктор Вязьминов

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

Модульная сетка

 

Автор: Виктор Вязьминов

Для начала определим, что такое модуль. Это повторяемый рисунок, узор, размер или пропорция. Вспомните картинки Эшера. Ящерки, рыбки, птицы в некоторых его работах — это и есть модуль (рис. 1).

Рис. 1

Рис. 1. Картина Эшера «Рептилии»