Создание градиентного фона для изображения или веб-странички
В программе Adobe Photoshop выберем из меню "Файл" (File) пункт "Новый" (New). Появится диалоговое окно создания нового файла ( 13.15). В нём нас больше всего интересует задание размера будущего файла - ширина и высота. Из раскрывающихся списков выберите единицы измерения "пикселы", если вас интересует именно экранный размер изображения, и сантиметры, если интересуют физические размеры при выводе на печать. Предположим, что мы готовим фон для веб-странички. Тогда в качестве единиц измерения выберем пикселы. Вообще говоря, по умолчанию на веб-страничках фоновый рисунок повторяется по вертикали и горизонтали. Поскольку наш градиентный перелив будет горизонтальным, можно указать любой вертикальный размер, причем чем меньше, тем лучше - меньше будет размер рисунка, поэтому фон будет быстрее загружаться из Интернета. Итак, возьмем 2 пикселя. Размер по горизонтали должен быть таким, чтобы занять всю ширину экрана, иначе на веб-страничке рисунок повторится по горизонтали, что не очень красиво. "Вся ширина экрана" - поня
тие растяжимое, однако редко кто смотрит странички в разрешении большем, чем 1024x768. Поэтому для большинства случаев размера 1024 точки по горизонтали будет достаточно (мы не будем мелочиться, вычитая из 1024 ширину рамки окна браузера...). Итак, определяем ширину рисунка 1024 и высоту 2 пикселя. Остальные параметры нам сейчас не важны. Откроется окно рисунка. Чтобы лучше видеть результаты наших действий, лучше увеличить масштаб изображения, нажав несколько раз Ctrl-"+". Теперь надо выбрать цвета для градиента, например, зелёный и светло-зелёный. Для выбора первого цвета нажмите в палитре инструментов на квадратик "Основной цвет" (см. 13.14). Откроется окно выбора цвета, в котором можно визуально выбрать необходимый цвет. Для выбора второго (конечного) цвета градиента нажмите на квадратик "Цвет фона". Выбрав цвета, можно определить собственно градиент. Для этого выберите инструмент "Градиент" из палитры инструментов. Теперь, удерживая клавишу Shift, проведите линию от левого края рисунка до приблизительно 200-й точки слева. Shift мы удерживаем только для того, чтобы линия, определяющая градиент, получилась строго горизонтальной. Когда вы отпустите кнопку мыши, вы увидите градиентную заливку. Осталось только сохранить наш рисунок. Однако, выбрав пункт "Сохранить" из меню "Файл", вы, скорее всего, увидите, что среди предлагаемых форматов, в которых можно сохранить файл, есть только PSD (собственный формат Photoshop). Это проImageSize 1.07M 13.15 Создание нового изображения в Photoshop
исходит потому, что наше изображение содержит более одного слоя. Выберите из меню "Слой" (Layer) пункт "Склеить все слои" (Flatten Image). После этого опять попытайтесь сохранить файл. Теперь в окне сохранения вам будет предложено множество форматов, из которых следует выбрать JPEG. Затем вам будет предложено выбрать качество сжатия по 10-балльной шкале. В данном случае для приемлемого результата достаточно выбрать 3 или 4. И ещё несколько замечаний по поводу приведенного примера. Во-первых, выбранный нами размер 1024 точки по горизонтали явно избыточен, ведь нарисованный нами градиентный перелив заканчивается уже на 200-й точке. Если вы используете каскадные таблицы стилей (CSS) на веб-страничке, у вас будет возможность НЕ повторять фоновый рисунок по горизонтали. Тогда вы спокойно сможете создать рисунок шириной 200 точек, запомнить конечный цвет градиента, разумеется, не на глаз, а в цифровом выражении. Для этого в окне выбора цвета отображаются значения R, G, В, т. е. красной, зелёной и синей составляющих. А затем помимо фонового рисунка определить на веб-страничке цвет фона, совпадающий с конечным цветом градиента. Можно таким же способом назначить вертикальный градиент, но при условии, что вы используете CSS, поскольку в этом случае вы можете не повторять фоновый рисунок по вертикали. И наконец, можно создать многократный градиентный перелив. Для этого выберите инструмент "Градиент" и щёлкните мышью на изображении градиента в панели инструментов. Появится диалоговое окно "Редактор градиента" ( 13.16). Здесь можно по желанию добавлять в любое место градиента любой цвет, а также цвет переднего плана и цвет фона, пользуясь соответственно одним из трёх значков в окне. Все изменения тут же отображаются на экране. Таким образом, градиент может переливаться не двумя, а тремя, четырьмя или более цветами. Когда будет подобрано нужное сочетание цветов, нажмите ОК и затем, как и ранее, проведите линию инструментом "Градиент" в основном окне.