Рисуем меню для сайта на каменной основе

Книги и материалы

Рисуем меню для сайта на каменной основе_1

Рисуем меню для сайта на каменной основе_2

 

Шаг 1. Создание каменной основы.

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

Рисуем меню для сайта на каменной основе_3

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

Рисуем меню для сайта на каменной основе_4

Обводим нужный камушек пером – Pen Tool (P). Концы линии инструмента должны соединиться – чтобы мы могли выделить область по заданной кривой.

Рисуем меню для сайта на каменной основе_5

 

Затем в меню Mouse2 > Make Selection задаем такие параметры:

Рисуем меню для сайта на каменной основе_6

 

В итоге выделяем интересующий нас камень или его фрагмент:

Рисуем меню для сайта на каменной основе_7

Рисуем меню для сайта на каменной основе_8

 

Каждый булыжник мы вырезаем поочередно, вставляем в исходник (для каждого камня создаем новый слой), затем каждый элемент подгоняем по размеру, складывая своеобразный «пазл» из вырезанных фрагментов. Кстати, выкладывая мозаику, вы можете смело экспериментировать с очертаниями камушков.

Рисуем меню для сайта на каменной основе_9

 

Получается примерно такая каменная «кладка»:

Рисуем меню для сайта на каменной основе_10

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

Рисуем меню для сайта на каменной основе_11

Ластиком Eraser Tool (E) затрем пиксели на кромке и форму. Теперь можно убрать слой с ориентиром – первоначальным прямоугольником серого цвета.

Рисуем меню для сайта на каменной основе_12

 

Затем нас ждет обработка.

Выбираем слои > Ctrl + E, соединим все вставленные в форму камни в один общий слой. Кстати, если выбранные вами рефы были цветными, то нужно их обесцветить нажатием клавиш Ctrl + Shift + U.

Рисуем меню для сайта на каменной основе_13

Под этим объединенным слоем создаем еще один. Выполняем его заливку серым тоном (например, цветом 626262). Так мы закроем прозрачную зону посередине.

Рисуем меню для сайта на каменной основе_14

Выделяем рисунок по контуру и инструментом Gradien Tool (круговой градиент) делаем плавный переход серого цвета в центре.

Рисуем меню для сайта на каменной основе_15

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

Оттенок камней должен соответствовать гамме всего изображения, для чего нужно выставить определенные настройки контрастности и яркости:

Рисуем меню для сайта на каменной основе_16

Применяем стиль слоя «наложение цвета» – Color Overlay. Так мы подкорректируем наши камушки: смягчим гамму цветов и приглушим их яркость. Значения устанавливаются следующие:

Рисуем меню для сайта на каменной основе_17

А на выходе мы получим следующее:

Рисуем меню для сайта на каменной основе_18

В меню Filter > Noise > Reduce Noise задаем нужные параметры:

Рисуем меню для сайта на каменной основе_19

Требуется создать очередной слой, установить выделить изображение по контуру и осуществить трансформацию этой области: Select > Transform Selection. Выделенную область трансформируем до 99%, не забываем соблюдать пропорции. Все это нам нужно, чтобы впоследствии, когда мы будем объединять слои, не появились светлые пиксели. Не забываем соблюдать пропорции:

Рисуем меню для сайта на каменной основе_20

 

Теперь делаем заливку этого слоя – подойдет любая текстура с повторяющимся рисунком.

Рисуем меню для сайта на каменной основе_21

 

Выбираем для данного слоя стиль наложения Overlay 20%:

Рисуем меню для сайта на каменной основе_22

 

Слои нужно объединить. После чего требуется придать объем нашим камушкам. Здесь снова пригодится Pen Tool для выделения по контуру каменной основы.

Рисуем меню для сайта на каменной основе_23

 

Над слоем камней камней создаем еще один, применяем точечное выделение (Pen Tool) и соединяем его по кругу.

Рисуем меню для сайта на каменной основе_24

 

Заходим в меню Mouse2 > Make Selection (0 pixels), а затем инвертируем выделение – Select > Inverse.

Рисуем меню для сайта на каменной основе_25

 

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

Рисуем меню для сайта на каменной основе_26

 

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

Рисуем меню для сайта на каменной основе_27

 

Инвертируем выделение и отрезаем все лишнее клавишами Ctrl + X. В этом же слое применим стиль наложения 60%.

Рисуем меню для сайта на каменной основе_28

 

Теперь необходимо создать новый слой, для которого стиль наложения будет 100%. На наиболее светлых участках каменного фона кистью в 1 пиксель старательно прорисовываем грани.

Рисуем меню для сайта на каменной основе_29

 

Затем слои нужно соединить.

Рисуем меню для сайта на каменной основе_30

 

Чтобы создать отсветы, выбираем в настройках слоя определенные параметры внутреннего свечения, или Inner Glow:

Рисуем меню для сайта на каменной основе_31

 

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

Могут просвечиваться ненужные нам линии, в этом случае в настройках внутреннего свечения мы добавляем прозрачность либо затираем контуры камней ластиком (Eraser Tool).

Фильтр Filter > Sharpen > Unsharp Mask поможет нам придать дополнительную резкость камням. Значения выставляем такие:

Рисуем меню для сайта на каменной основе_32

 

Если нужно затемнить цветовую гамму всего изображения, можно уменьшить яркость общего фона до -30, а основы из камней – до -50.

Рисуем меню для сайта на каменной основе_33

Наконец, работа над нашей каменной основой для меню окончена. И сейчас мы займемся рисованием пунктов меню на дощечках.

Рисуем меню для сайта на каменной основе_34

 

Рисуем меню для сайта на каменной основе_35

 

Шаг 2. Рисуем элементы интерфейса на дощечках «под дерево».

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

Рисуем меню для сайта на каменной основе_36

Чтобы получить нижний объем для дощечки, сначала необходимо продублировать слой с прямоугольником и сместить его на 5-6 пикселей вниз, уменьшив яркость на -30.

Рисуем меню для сайта на каменной основе_37

 

Соединим оба слоя, делаем выделение по контуру. На новом слое производим заливку текстурой под дерево.

Рисуем меню для сайта на каменной основе_38

 

Используем стиль наложения Overlay (50%):

Рисуем меню для сайта на каменной основе_39

 

Так как при этом основа затемнилась, увеличиваем яркость (+30) для слоя с основой.

Рисуем меню для сайта на каменной основе_40

 

Далее следует объединить два слои с основой и деревянной текстурой.

Используем перо, или Pen Tool (P), чтобы нарисовать кривое выделение с трещинами внизу дощечки.

Рисуем меню для сайта на каменной основе_41

 

Выделение заливается линейным градиентом черного цвета, сверху вниз.

Рисуем меню для сайта на каменной основе_42

 

Теперь по абрису полученной дощечки убираем излишки градиента и устанавливаем 50-процентную прозрачность слоя с градиентом.

Рисуем меню для сайта на каменной основе_43

 

 

Объединяем слои и тем же пером Pen Tool рисуем кривой контур дощечки.

Рисуем меню для сайта на каменной основе_46

 

После чего создаем и инвертируем выделение – Select > Inverse.

Рисуем меню для сайта на каменной основе_47

 

Все лишнее убирается при помощи простых клавиш Ctrl + X.

Рисуем меню для сайта на каменной основе_48

 

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

Рисуем меню для сайта на каменной основе_49

Рисуем меню для сайта на каменной основе_50

 

 

Мы можем смягчить цветовую гамму, применив наложение цвета (Color Overlay) к слою с дощечкой, задаем следующие значения:

Рисуем меню для сайта на каменной основе_51

 

Теперь применяем фильтр Filter > Shapren > Unsharp Mask.

Рисуем меню для сайта на каменной основе_52

 

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

Рисуем меню для сайта на каменной основе_53

 

Рисуем меню для сайта на каменной основе_55

 

Рисуем меню для сайта на каменной основе_56

 

 

Для первого слоя задаем 20-процентную прозрачность, для второго – 30-процентную (для него же используем фильтр Blur > Motion Blur и переносим слой на 5-6 пикселей ниже). Тень выглядит так:

Рисуем меню для сайта на каменной основе_57

 

Рисуем меню для сайта на каменной основе_58

Осталось только написать заголовок пункта меню, сгруппировать и продублировать слои.

Рисуем меню для сайта на каменной основе_59

Шаг 3. Дополним композицию.

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

Рисуем меню для сайта на каменной основе_60

Оставить комментарий через:

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