Рисуем клавиатуру MacBook

24 июля 18:20 2012

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

Рисуем клавиатуру MacBook

Попробуйте повторить этот урок дизайна и вы поймете, что же это такое!

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

То, что вы должны уметь делать:

  • Умение создавать легкие векторные формы;
  • Трансформация объектов;
  • Работа с рельефами, со стилем слоя и объемом.

Первое. Для начала, надо создать новый документ с любым размером. К примеру, возьмем размер 952*412 pix:

Рисуем клавиатуру MacBook

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

Возьмите инструмент «ведро» (Paint Bucket Tool (G)) и залейте им нашу форму, цвет возьмите #313338 (Выберите меню цвета, внизу палитры инструментов, нажав на верхний квадрат).

Затем, используя фигуры прямоугольника со округлыми углами (Rounded Rectangle Shape Tool), образуйте широкий прямоугольник по середине холста. Дайте ему имя Border.

Рисуем клавиатуру MacBook

Третье. Надо уменьшить заливку (Fill) верхнего слоя до 0 процента. Затем два раза щелкаем по нему, для того, чтобы открылось окно стилей слоя (Layer Styles) и примените эффекты:

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

В результате применения эффектов, у вас должно получиться вот что:

Рисуем клавиатуру MacBook

Четвертое. Верхний слой стоит продублировать и дать имя ему Edge. После этого примените вот такие стили слоя (Layer Styles):

Рисуем клавиатуру MacBook

Пятое. Затем на несколько пунктов вниз отпустите слой Edge с помощью соответствующего инструмента перемещения (Move Tool). У вас должно получиться вот что:

Рисуем клавиатуру MacBook

Шестое. Надо продублировать еще раз слой Border. После этого перетащите его выше всех остальных, и дайте новое имя Keyboard Base.

Сейчас, самое время применить последнее из эффектов к этому слою:

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

На данный момент, ваш результат должен быть таковым:

Рисуем клавиатуру MacBook

Седьмое. После завершения работы с Keyboard Base пришло время сделать кнопки на клавиатуре. Всё это делается постепенно.

Для начала, стоит нарисовать одну кнопку, затем уже дублировать действия для каждой дополнительной. Для этого выбираем прямоугольник (Rectangle Tool) и с помощью него создаём маленький прямоугольник в верхнем углу, слева клавиатуры. Дайте имя этому слою Key, это кнопка будет вашим Esc.

Нажмите два раза по слою и примените следующие эффекты:

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

Кнопка ваша должна быть такой:

Рисуем клавиатуру MacBook

Рисуем клавиатуру MacBook

Восьмое. Осталось продублировать слой по имени Key и переместить его в нужное месторасположение на клавиатуре. В итоге у вас должно получиться 6 рядов кнопок. Не забывайте, что для некоторых кнопок вам следует растягивать при дублировании слой Key.

Для этого переходите в меню редактирования, затем выберите — свободная трансформация (Edit> Free Transform). Тяните за угол прямоугольника, чтобы получить желаемый размер.

Девятое. Добавление цифр и букв на клавиши. Делайте это красиво и аккуратно, от этого зависит успех выполненной работы.

Рисуем клавиатуру MacBook

И в итоге у нас получется вот такое чудо:
Рисуем клавиатуру MacBook