Дизайн ландшафтного сайта в фотошопе. Урок №2 — «Рисуем логотип и меню»

Итак, приступаем к прорисовке нашего дизайна сайта и для начала давай нарисуем наш логотип.

Заходим в фотошоп. Немножко уменьшим масштаб. И первое, что нам нужно сделать — это взять текстуру дерева. Она также находиться в исходниках. Вот она текстура дерева. Мы уменьшим ее размер. Нажимаем для этого Ctrl+Alt+I. Уменьшаем примерно до 100 пикселей. Берем инструмент перемещение и  переносим на наш макет. После этого поднимаем наверх, берем лупу и увеличим немного масштаб. Опять берем инструмент перемещение, нажимаем Ctrl+Т и уменьшаем размер. Ставим примерно вот такой. После этого зажимаем Alt и копируем наш слой. Теперь нажимаем Ctrl+Т, нажимаем правой кнопкой мыши по слою и выбираем отразить по горизонтали, что бы между слоями был ровный стык. Зайдем в слои,  зажмем Shift  и выделим оба наших слоя. После этого объедениям их и  делаем точно такие же операции, повторяем их. Заходим опять в слои и объединяем. Делать это будем до тех пор, пока у нас не будет одна горизонтальная линия из текстуры дерева. Как вы видите, с каждым разом нам необходимо сделать все меньше копий. Сейчас осталось сделать последнюю копию.

Так, отлично. Объединяем наши слои и дадим ему название текстура дерева. Так, посмотрим, как у нас на исходнике. Здесь мы видим, что данная структура потемнее, понасыщеннее, поконтрастнее. Давайте сделаем то же самое. Берем инструмент выделение. У нас должен выделиться наш слой  текстура дерева. После этого нажимаем сочетание клавиш Ctrl +L,  появляется уровень, и мы делаем нашу текстуру.  Делаем немного темнее, двигая наши ползунки направо, здесь двигаем немножко налево. Отлично. Текстура стала потемнее. Так, давайте  подвинем ее немного наверх, чтобы она не выходила за наши направляющие. И теперь мы добавим снизу светло коричневые линию. Для этого берем инструмент линия. Здесь ставим один пиксель, цвет выбираем текстуру бумаги нашей. Зажимаем Shift и проводим до конца линию. После этого берем инструмент перемещение и щелкаем по свободной области. Вот у нас появилась эта фигура. Мы поднимем ее немножко наверх и дадим немножко другой цвет, чтобы не был такой яркий, примерно вот с такими параметрами.

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

Теперь на логотип мы добавим текстуру дерева. Берем ее в исходниках. Уменьшаем размер примерно до 400 пикселе. Берем инструмент перемещения и перетаскиваем к нашему логотипу. Так, получилось много. Уменьшаем размер до 500 пикселей, будет самое то. нажимаем Ctrl+Т и подгоняем под ширину нашего логотипа. Отлично. Заходим в слои и перетаскиваем наверх.  Теперь зажимаем Alt и нажимаем, что бы текстура обрезалась по фону нашего логотипа. После этого нажимаем контроль и щелкаем по слою с фоном логотипа. Слой у нас выделился. Идем в меню «Фильтр – эффекты освещения». Здесь ставим в пункте среда на-20 и интенсивность на 35, радиус примерно как у меня. По кроям у нас затемнилось, стало чуточку лучше. Теперь, что бы стало более естественно, добавим тень. Заходим в слои, выделяем фон логотипа и добавляем тень. Цвет выберем коричневый, ближе к черному. Ставим на 15 пикселей, вполне хватит.

Так дальше. Мы сейчас нарисуем глянец. Для этого создаем новый слой.  Берем инструмент «перо», ставим такие вот точки. Здесь мы зажимаем Ctrl +L и делаем в виде волны. Ставим еще точку, здесь убираем, ставим новую, зажимаем Ctrl +L и делаем линию, плавную линию в виде волны. Затем объедениям данные линии. Нажимаем правой кнопкой мыши и выбираем образовать выделенную область. Радиус растушёвки обязательно задать 0 пикселей и нажимаем ОК. Теперь берем градиент. Градиент обязательно от белого к прозрачному. Здесь должен стоять линейный градиент и здесь не должна стоять инверсия. После этого проводим сверху вниз. нажимаем Ctrl +D, что бы снять выделение. Заходим в наши слои ,зажимаем опять Ctrl +L и щелкаем по фону с логотипом ,что бы выделился наш логотипчик . Теперь нажимаем Ctrl + Shift+L,что бы сделать инверсию и нажимаем Del. Как мы видим, лишний глянец у нас удалился и остался только на логотипе. Но глянец слишком сильный сейчас и нам необходимо уменьшить его непрозрачность примерно на 50%.  Вот так вот.

Сейчас мы сделаем здесь как бы дырки для наших веток. Берем инструмент выделение овальная области, зажимаем Shift и рисуем такой вот кружок.  Переходим на фон с логотипом и нажимаем Del.  Так же нажимаем на Del, перейдя на слой с глянцем. После этого просто на клавише нажимаем на право. Можно зажать Shift, чтобы быстрее передвигалось и точно также удалить здесь. Зажимаем Ctrl +D, что бы снять выделение.

Теперь нам необходимо добавит текст. Берем инструмент текст. Здесь пишем на английском LD. Слой с текстом должен быть выше всего. Шрифт по больше явно у нас там. Так шрифт у нас здесь будет Amir Deko. Здесь пишем ландшафтный дизайн. Первые буквы английские остальной весь текст на русском. Это текст у нас будет гораздо меньше и здесь у нас будет шрифт Verdana. Буковки сделаем побольше чуток. Зажимаем Ctrl+Т и увеличиваем наш шрифт.  Отлично.

Теперь мы добавим стиль слоя нашему тексту. Наложим градиент от светло-серого к белому. Также добавим тени, они будут темно коричневые. Отлично. Что бы ни делать точно такой же стиль для текста, который расположен ниже, просто зажимаем Alt и просто перетаскиваем стиль слоя наверх. Отлично.

Теперь мы видим, у нас логотип получился чуть больше чем на оригинале. Мы его сейчас немного уменьшим. Для этого зажимаем Shift и выделяем все слои, которые относятся к логотипу. Теперь нажмем Ctrl+J. У нас все эти слои скрылись в папочку и назовем ее логотип. Теперь нажимаем Ctrl+Т и уменьшаем размер нашего логотипа примерно до таких размеров. Добавляем наши веточки.  Для начала уменьшим размер данной картинки до 500 пикселей. Берем инструмент рамка и обрезаем верхнюю ветку. После этого берем инструмент перемещением и перетаскиваем к нам на макет. Нажимаем Ctrl+Т, уменьшаем в размерах немножко, поворачиваем на верх, уменьшаем еще в размерах. Примерно вот так. Но сейчас наша веточка тусклая. Что бы сделать ее поярче нажимаем Ctrl+L, передвигаем ползунок направо. Отлично, и также добавим ей немного тени. Тени у нас будут темно-зеленые, размер будет 7 пикселе и непрозрачность 50%. Здесь мы удалим теркой лишние элементы. Непрозрачность на 100 и стираем все, что нам не нужно.

Как мы видим, на исходнике у нас веточка чуток пожелтее, давайте ее сделаем точно такой же. Для этого мы зажимаем Ctrl +U и двигаем ползунок немного налево. Здесь так же двигаем налево, выставляем примерно такие параметры: цветовой тон -6 , насыщенность -8, здесь оставляем на 0. Нажимаем «ОК».

Что бы ни делать тех же операций с веточкой мы ее просто скопируем. Зажимаем Alt, переносим направо, нажимаем трансформации, сочетание клавиш Ctrl+Т и отражаем по горизонтали. Так, получилось примерно также.

Теперь давай те в этом же уроке мы нарисуем наше меню, а в следующем уже будем работать над нашей композицией. Включим наши направляющие. Они включаются клавишей Ctrl +Н, либо через окошко просмотр и вспомогательные элементы, либо показать направляющие. Так включим линеечку, и вот здесь будет наше меню. Мы заново делать всю работу точно такую же с текстурой дерева не будет, мы просто скопируем этот слой. Эти два слоя с листьями засунем в папку с логотипов. Эти слои оказались не там где нужно, в подвале, а должны оказаться в папочке. Здесь мы логотип удалим, так как он у нас лишний, это папка. В папочке меню мы из логотипа скопируем текстуру дерева. Находим ее, зажимаем Alt и переносим в пункт папку меню. Выделяем этот слой, нажимаем Ctrl+Т и переносим где у нас должно быть меню, немножко уменьшив в размерах. Теперь добавим точно такие же линии. Так же мы их скопируем и перенесем в пункт папку меню. Ставим по краям. После этого копируем еще раз, зажимаем клавишу Alt , берем инструмент выделением, нажимаем Shift и переносим вниз.

Теперь мы добавим пункты нашего меню. Берем инструмент текст и пишем :о компании, услуги, примеры работ и контакты. Расстояние между ними сделаем по больше. Для этого нажимаем Tab , возьмем инструмент перемещение и на стрелочках на клавиатуре выровняем по центру. Стиль теста у нас будет точно такой же, как в логотипе, поэтому мы его сейчас копируем. Берем инструмент перемещение, щелкаем по тексту, здесь, кстати, у нас ошибка. Зажимаем Alt и переносим на текст в меню. Меню у нас стало точно таким же стилем. Щелкаем по нашему меню и выравниваем по высотке. Так, отлично. Уберем направляющие линии, у нас получились слишком яркие. Вот такой вот код будет у наших линий, здесь мы выставляем, нажимаем «ОК». так, отлично.

На это мы наш урок заканчиваем. На следующем уроке мы будет рисовать вот такую композицию.

На этом все. Спасибо за внимание и до встречи в следующем видеоуроке!

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments