Примеры оформительских приемов

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

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

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

Приведем в качестве примеров несколько приемов:

- поворот и наложение изображений

- создание эффекта мягкой тени

- создание прозрачного фона

- выделение и перенос изображений на новый фон.

Для создания графических композиций хорошо подходит пакет Adobe Photoshop. Рассмотрим, как эти приемы реализуются средствами Adobe Photoshop версии 4.0.

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

1. Возьмем некоторую картинку, которая будет создавать фон для композиции. Увеличим размеры холста. Для этого выберем позицию главного меню "Изображение", и далее позицию "Размер холста": в полях для задания размеров холста укажем новые размеры (можно выбрать удобную для вас единицу измерения - пиксел, сантиметр, дюйм).

2. Выделим исходное изображение с помощью рамки (инструмент "Область" из палитры инструментов). Выполним поворот изображения с помощью команд "Изображение" и далее "Повернуть холст". В команде нужно с помощью параметров указать направление и угол поворота. Фон готов.

3. Далее открываем файл с другой картинкой. Выделяем нужную область рамкой (инструментом "Область") и копируем выделенную часть в буфер.

4. Делаем текущим файлом подготовленный нами фон и вставляем туда скопированный фрагмент - выполняем команды "Редактирование" и далее "Вклеить". Щелкнем в палитре инструментов иконку инструмента "Перемещение" и переместим вставку в нужное место на фон так, чтобы получить приемлемое композиционное решение (этого можно и не делать, если картинка сразу же оказалась на нужном месте после выполнения операции "Вклеить").

5. Выполним теперь для вклеенного фрагмента операцию поворота. Для этого опять нужно воспользоваться операцией "Изображение" и далее - "Повернуть холст".

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

Можно использовать наложение изображений и без их поворота, такой эффект также смотрится вполне художественно. Для демонстрации фотографий с индустриальными пейзажами сохранение естественных горизонтальной и вертикальной направляющих даже более привлекательно, чем имитация "артистического беспорядка" (рис. 122).

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

С помощью пакета Adobe Photoshop довольно просто можно получать такие эффекты. Рассмотрим схему подготовки картинки с мягкой тенью. Она будет состоять из двух этапов:

- подготовка файла с мягкой тенью,

- наложение изображения на тень.

Подготовка файла с мягкой тенью.

1. Возьмем файл с картинкой и добавим поля к исходному изображению, т.е. увеличим размер холста. Для этого нужно воспользоваться операцией главного меню "Изображение", и далее операцией "Размер холста". При задания новых размеров холста нужно установить изображение в центр таблицы 3х3, чтобы поля по вертикали и горизонтали были симметричными (рис. 123).

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

3. С помощью фильтра "размоем" изображение, а потом обесцветим его. Возьмем операцию главного меню "Фильтр", и выберем далее операцию "Размытие", и далее "Размытие по Гауссу". После выполнения этой операции изображение немного увеличится в размерах и потеряет резкость.

4. Теперь можно обесцветить изображение, воспользовавшись операцией главного меню "Изображение", и далее операциями "Коррекция" и "Обесцветить" (рис. 124)

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

Наложение изображения на тень.

1) А теперь осталось совместить два изображения. Вызовем файл с исходной картинкой и скопируем изображение: выделим нужную область изображения и выполним операции "Редактирование" и далее "Скопировать".

2) Сделаем текущей картинку с заготовленной тенью и выполним операции "Редактирование" и далее "Вклеить". Картинку можно переместить по отношению к тени с помощью операции "Перемещение", расположенной в графическом меню инструментов. (Рис. 125).

Как падает тень.

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

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

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

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

Создание прозрачного фона.

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

Прозрачный фон проще получается в изображениях, созданных в формате GIF. У фотографий и картинок в формате JPEG кажущийся однородным фон часто представляется несколькими близкими цветами. Поэтому при задании прозрачного фона нужно будет указывать несколько цветов. Созданные в формате JPEG картинки вначале нужно будет перевести в формат GIF, и затем задать прозрачные цвета.

Проделаем перечисленные шаги.

1. Откроем файл с исходным изображением в формате JPEG (рис. 127).

2. Выполнив операции "Файл" -> "экспортировать" - > "GIF89a", получим файл в формате GIF. Закроем исходный файл.

3. Откроем полученный файл в формате GIF и снова применим операцию "Файл" -> "экспортировать" - > "GIF89a". Вот теперь при преобразовании нам предлагается картинка со шкалой цветов, в которой мы можем с помощью пипетки указать прозрачные цвета (для этого можно щелкнуть в нужной области картинки или в области нужного цвета в шкале). Результат такого преобразования показан ниже (рис. 128).

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

Выделение и перенос изображения на новый фон

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

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

Скопируем выделенный фрагмент. В файле с фоном (фотографией неба) выполним операцию "Вклеить".

Результат показан на иллюстрации (рис. 130).

Поиск по сайту: