ШЕСТОЙ УРОК



Фон - своими руками

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

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

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

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

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


Палитра инструментов (Adobe Photoshop)

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

Для тех, кто пока плохо знаком с программой Adobe Photoshop, я объясню какими инструментами мы будем пользоваться. Хотя продвинутые пользователи могут пользоваться и большими возможностями этой программы.

Итак, рассмотрим повнимательнее инструменты, которые нам пригодятся для этого урока (рис. 19):


Рис. 19. Палитра инструментов

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

Rectangular Marquee Tool - Прямоугольное выделение. Если нажать и удерживать на этом инструменте нажатую левой кнопкой мышь, то развернется еще несколько разновидностей этого инструментов. Но они нам пока без надобности, поэтому описание их опущу.

Hand Tool - с помощью этого инструмента можно двигать изображение по экрану. Но это не все. Если сделать по нему двойной клик, изображение развернется во весь экран. Очень удобная функция.

Move Tool - инструмент перемещения. С его помощью можно перемещать как все изображение целиком, так и выделенные части.

Brush Tool - Кисточка. Удерживая нажатой левую клавиши мыши, можно поменять кисточку на карандаш. Обладает множеством функций. Рисует цветом, который установлен на переднем плане. На первых порах достаточно знать размер кисти, которая появляется при активизации этого инструмента. Его можно найти на верхней панели Brush, при развертке которой появляется таблица возможных кистей (рис. 20):


Рис. 20. Размер кисти

Paint Bucket Tool - заливка. Этот инструмент заливает изображением цветом переднего плана, либо текстурой. Удерживая нажатой кнопку мыши на этом инструменте, можно перейти к другому виду заливки - Gradient (ингредиентной). Градиент создает заливку с плавным переходом разных цветов. Имеет множество настроек.

Horizontal Type Tool - инструмент печатания. По умолчанию выставлен обычный текст. При нажатой клавиши левой мыши можно выбрать еще три возможности печатания: вертикального текста и два варианта печатания выделением. Пока будем пользоваться текстом по умолчанию. Имеет множество настроек по выбору шрифта, размеров, типа выравнивания и др. Пишет цветом переднего плана. Для вызова палитры Character (Символ) и Paragraph (Абзац) нужно нажать Toggle the Character and Paragraph Palettes в верхнем меню (рис. 21):


Рис. 21. Вызов палитры текста

Zoom Tool - инструмент масштабирования. Двойной клик по этому инструменту приводит изображение в реальный (100% - ый ) размер.

Set foreground color и Set background color - соответственно цвета переднего и заднего плана. Клик мыши по этим инструментам вызывает Color Picker, где можно выбрать любой цвет. Внизу этой панели есть переключатель для цветовой палитры, используемой для web - Only web colors (рис. 22). Обоюдо-направленная стрелочка между цветами переднего и заднего планов меняет цвета местами.


Рис. 22. Цветовая палитра

Default Foreground and Background colors - возвращает цвета, принятые по умолчанию. Цвет переднего плана становится черным, а заднего - белым.

Кроме инструментов основной палитры, нам понадобится палитра каталога цветов, которая вызывается командой Window|Swatches (рис. 23):


Рис. 23. Каталог цветов

Это и есть безопасные цвета для Веб. Ну, пока и хватит сухой теории. Разбавим ее практикой.


Фон "Каляка-Маляка"

Откроем новый файл, выполнив команду File|New и установим следующие значения (рис. 24):


Рис. 24. Создание нового документа

Как видите, мы выбрали Resolution (разрешение) 72 пикселя на дюйм. Именно такое разрешение используется для web, а большего и не нужно. Большие разрешения используются для вывода на печать, но для нас это совершенно ни к чему.

Я выбрала размер изображения 200х200, это не обязательные размеры. В других примерах мы постараемся делать и другие. Просто я хочу показать, что чем меньше размер исходного изображения, тем быстрее загрузится ваш фон, и тем позже удерут посетители с вашей странички. Хотя, если кроме фона вы их еще сможете чем-то удержать, то, вполне может быть, они пробудут там еще часика полтора. Потому как не фоном единым жив человек.

Да и я надеюсь, что вам не очень надоела моя болтовня, и вы удерете не раньше, чем сделаете фон.

Итак, каждый, в меру своих способностей рисует все, что захочет в этом квадратике. У меня обнаружились следующие таланты: Я взяла кисточку (размером в 4 пиксела), выбрала оранжевый цвет из каталога Window|Swatches и нарисовала морковку. Почему морковку? Да очень просто. Я решила сесть на диету, а потому могу позволить себе думать только о сырых овощах. И вот она, моя сладкая (рис.25):


Рис. 25. Вот он - источник моей будущей стройности!

А дальше очень легко. Сохраняем это изображение для web (File|Save for Web), и сохраняем в новой папке fon под любым именем. Я вот сохранила под именем fon_morkovka.jpg.

И опять же проверяем, как это выглядит в натуре (рис. 27):


Рис. 27. Морковкино изобилье

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

Открываю опять свою несчастную морковку в Adobe Photoshop, открываю Filter|Other|Offset (рис. 28):


Рис. 28. Панель Offset

На появившейся панели Offset установим следующие значения смещения: Horizotal - 100, Vertical - 100 (то есть устанавливаем половинное значение высоты и ширины нашего исходного изображения). Undefined Arias устанавливаем галочку у Wrap Around (). Ну, и чтобы сразу видеть изменения, установим галочку Preview, вот так:


Рис. 29. Смещение

Для большей красоты я добавлю в центр помидорчик (рис. 30):


Рис. 30. Натюрморт

Далее опять проверяем, что у нас вышло. Подставляем новый фон в значение background="fon_morkovka2.jpg", и открыв браузер любуемся на наш салат (рис. 31). Или что вы там сотворили.


Рис. 31. Обед вегетарианца

Конечно, это не шедевр. Конечно, не стоит делать такие яркие рисунки для обоев. Иначе текст на нем будет просто нечитабелен. Но мне, главное, чтобы вы поняли смысл. И может, вы после этого и не станете ярыми вегетарианцами, но сотворить что-то подобное для вас теперь - пара пустяков.


Текстуризатор

А теперь попробуем сделать фон "кирпичики"

В Adobe Photoshop открываем новый файл, устанавливаем нужный размер 300 х 300, устанавливаем разрешение 72 пиксела на дюйм, вот так (рис. 32):


Рис. 32. Размеры нового файла

Нажмем на ОК и начнем работать с новым полотном. Зальем сразу же его кирпичным цветом. Если же вам нужен белый кирпич, то можете ничем не заливать. Для заливки используем инструмент Paint Bucket Tool (заливка). Выберите подходящий цвет из каталога цветов и залейте нашу будущую структуру (рис. 33):


Рис. 33. Заливка кирпичной структуры

А сейчас вы страшно удивитесь, узнав, что мы не будем рисовать никаких кирпичей. Они у нас сами нарисуются с помощью фильтра.

Я не скажу, что этот способ самый правильный. Настоящие профессионалы никогда не будут пользоваться таким простым и легким методом. Они будут использовать все возможности Adobe Photoshop, возьмут на вооружение кисти, краски, слои, эффекты и маски. И сотворят такое, что никто повторить уже не сможет. Но на то они и профессионалы. Но зато мы с вами на то и новички, чтобы начать с простого. И все у нас впереди. И взлеты, и паденья. И снежные вершины и артезианские скважины… Н-да, опять отвлеклась. Ну а теперь познакомимся поближе с фильтрами. Откроем же их! (рис. 34).


Рис. 34. Фильтры

Видите, какое количество фильтров? Вы можете заниматься ими все свободное время и, уверяю, это никогда не надоест. В дальнейшем, мы не раз прибегнем к их помощи. А пока обратим внимание на фильтр Texturizer, который как раз и предназначен для изготовления разнообразных текстур. Так скорей же нажмем не него (рис.35)!


Рис. 35. Фильтр Texturizer

Открыв опции Texture, увидим что мы можем сделать Brick (кирпич), Burlap (мешковину), Canvas (полотно) и Sandstone (песчаник). Начнем, пожалуй с кирпичиков. Пользуясь ползунками Scaling (шкала), Relief (рельеф), а также направлением освещения Light Direction, добиваемся желаемого результата в окне предаварительного просмотра. После чего нажимаем кнопку OK.

Лично меня устроили следующие значения: Scaling - 200, Relief - 6: Light Direction (направление света) - Top Left

И вот, в результате нехитрых ухищрений, у меня готова кирпичная кладка!

Возможно, конечный результат вас не очень устраивает, и вам хотелось поменять цвет, либо ослабить фон, а может просто изменить оттенок. Не переделывать же все сначала, когда у нас есть для этого чудесное средство Hue/ Saturation (Цвет/Насыщенность)

Выполним команду Image|Adjustments|Hue/Saturation (рис. 36):


Рис. 36. Выбор настроек Цвет/Насыщенность

И перед нами откроется вот это (рис. 37):


Рис. 37. Настройки Hue/Saturation

Изменяя движки Hue (цвет), Saturation (насыщенность) и Lightness (освещенность), мы можем подправить изображение по своему желанию. Вот, например, результат моих ухищрений (рис. 38):


Рис. 38. До и после применения настроек

Кроме Hue/Saturation имеются и настройки баланса цветов: Image|Adjustments|Color Balance, и настройки Яркости/Контраста: Image|Adjustments|Brightness/Contrast. Двигая ползунки в разные стороны, вы сможете изменять первоначальный рисунок в желаемом направлении.

Конечно, в поисках лучшего вы можете и заблудиться, и понять что сотворили что-то ужасное… и хотели бы вернуться на несколько шагов назад. Функция Edit|Undo мало чем помогает, так как возвращает ход только на один шаг. Ну и что же теперь, вешаться или проделать заново весь этот каторжный труд? Ну уж нет! Это совсем необязательно! Ведь есть способ и получше! Для этого можно просто открыть историю наших подвигов Window|History (рис. 39):


Рис. 39. Эта наша с вами история

Как видите, все наши ходы записаны. И, тыкнув левой кнопкой мыши на любой строке, мы сможем вернуть историю вспять. Однако история содержит ограниченное число ходов. По умолчанию оно равно 20 шагам. вы можете увеличить число этих шагов, изменив первоначальные установки командой Edit|Preferences|General, установив в поле History States желаемое количество значений. Но я бы не рекомендовала его сильно увеличивать, так как это все загружает и без того загруженную нами память компьютера.

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

А вот средняя иконка мне очень даже нравится. Например, нам понравилось полученное изображение, и нам жаль его терзать дальше. Но сомненья все-тки гложут. А вдруг еще круче получится? Так вот, нажимая на эту иконку Create New Snapshot (создать новый снимок), мы как бы замораживаем копию нашей работы, и она у нас отпечатывается в самом верху истории под новым именем. И мы в любую минуту можем к нему вернуться. Чтобы было совсем понятно, что я тут вам бормочу, я даже нарисовала стрелочкой (рис. 40):


Рис.40. Создание нового снимка

Вот вроде и все, о чем я хотела поговорить с вами на исторические темы. Конечно, мы немного удалились от создания фона, но без знания своей истории, мы могли бы вообще заблудиться. А теперь я за вас спокойна. И могу немного передохнуть.

Думаю, ваш кирпичный фон удался на славу. Вы можете сохранить его, оптимизировав для web. Надеюсь он занимает у вас немного килобайтов, а соответственно и малое время загрузки. Вы можете протестировать ваш фон в любом файле. У меня, например, вот что получилось (рис. 41):


Рис. 41. Вот они - кирпичики!

Думаю, сама процедура создания фона вам стала понятной. Выбирая другие структуры в Filter|Texture|Texturizer, вы можете создать и другие чудесные структуры: Burlap (мешковину), Canvas (полотно) и Sandstone (песчаник).

Вот что у меня получилось (рис. 42):


Рис. 42. Вот они, возможности фильтра Texturizer!

Что ж, это был довольно трудный урок. И построен он в основном, на иллюстрациях. Мне пришлось довольно попотеть, создавая этот урок. Теперь ваша очередь! А пока вы будете создавать эти структуры, я, после небольшого передыха, расскажу, как можно делать и другие структуры… Удачи!


К списку всех уроков

(В. Ахметзянова, 2005 г)