4.1

 

Что мы будем делать

SketchUp — это очень многофункциональная программа, которая станет верным помощником при разработке веб-дизайна. Я расскажу вам о том, что такое артборд, слои, падающая и внутренняя тени, заливка и граница. А полученные познания мы реализуем на практике, разработав элементарную, но в то же время интересную иконку.

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

    • В верхней части экрана размещены основные инструменты веб-дизайна.
    • Слева отображаются слои
    • Посредине – бесконечный холст, служащий рабочим местом.
    • Справа – настройки для выделенных объектов.

1. Разработайте артборд

Артборды – это отменный способ оптимизировать все ваши работы с использованием специальных фреймов. Данная программа уже имеет несколько встроенных артбордов, которые появляются при нажатии клавиши А. Так, предусмотрены точные размеры экранов большинства продуктов от компании Apple. Найти их можно в правой части экрана.

4.2

 

Выполняем операцию  iPad screens > Landscape . В левой стороне экрана появилась панель, отображающая слои.

Два раза кликаем по артборду, после чего у вас появляется возможность переименовать данный объект. Например, назовем егоWater Icon. Получается примерно такой результат:

4.3

 

2. Занимаемся разработкой фона

Итак, мы уже научились создавать артборд, который ориентирован на экран iPad. Его ширина составляет 1024 пикселя, а высота – 768 пикселей. Теперь попробуем добавить сюда фон. Для выполнения данной задачи потребуется нажать кнопку R. Нажимаем на артборд и протягиваем его так, чтобы получился своеобразный прямоугольник. Полученная фигура тут же появляется в панели слоев. Теперь переименовываем его в Background.

4.4

 

Получилось? Теперь нужно обратить внимание на правую панель и установить параметры для фонового слоя:

  • Position X = 0
  • Position Y = 0
  • Width = 1024
  • Height = 768

 

4.5

 

Теперь стоит довести фон до более эстетического вида. Нажимаем на опцию «Границы» и снимаем с нее галочку. Добавляем градиентную заливку, нажимая на клавишу Fill. 

4.6

 

Выбираем функцию  Radial Gradient. На экране появляется слайдер, на котором изображен градиент с белым цветом слева – и черным справа. Чтоб сменить эти цвета, достаточно кликнуть на них на слайдере. 

4.7

 

Производим настройку цветов. Для наглядности я задал параметры H190, S50, B100, A100 для центрального цвета, а для второго - H210, S50, B100, A100.

4.8

 

3. Разрабатываем иконку

После всех вышеуказанных манипуляций пришло время заняться иконкой с каплей воды. Рисуем прямоугольник. Нажимаем кнопку R и тянем курсор. Созданный слой называем icon. 

4.9

 

Параметры ширины и высоты устанавливаем на 515. Сам прямоугольник переносим в центр поля.

4.10

 

Устанавливаем радиус границы на 144. Также на этом этапе необходимо снять галочку с опции border. Саму иконку стоит окрасить в чистый белый цвет.

4.11

 

Тень

Пришла пора создать тень. Зайдите в одноименное меню и произведете настройку предложенных пяти параметров по такому принципу:

  • Color: H210, S70, B80, A100
  • X: 0
  • Y: 24
  • Blur: 55
  • Spread: 0

4.12

 

Для большей привлекательности иконки добавляем внутреннюю тень, задав ей такие характеристики:

  • Color: H190, S30, B100, A100
  • X: 0
  • Y: -13
  • Blur: 21
  • Spread: 0

И в результате вышеописанных манипуляций у вас получится следующая фигура:

4.13

 

4. Рисуем каплю

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

4.14

 

Теперь нам необходимо разработать треугольник. Выполняем такие действия: Insert > Shape > Triangle. На правой панели ставим галочку напротив  функции Equilateral. Задаем треугольнику высоту и ширину по 200 пикселей.

4.15

 

Собираем из полученных фигур визуальную капельку:

4.16

 

Выделяем оба слоя и нажимаем на функцию «Объединить».

4.17

 

Капля готова. Осталось только придать ей определенной аккуратности. Я решил добавить радиус к ее вершине. Выбираем фигуру и нажимаем на опцию Edit (редактировать). Данная функция размещена на верхней панели инструментов.

4.18

 

И вот теперь меняем параметр Corners на 34.

4.19

 

Вот и все, идеальная капля создана. Чтобы ее сгладить, можно воспользоваться опцией Flatten, которая размещается в верхнем меню. Сам слой переименовываем на Droplet. Пользуясь правой панелью необходимо настроить ширину на 266, а высоту – на 377. Не забудьте перенести полученный элемент в середину.

4.20

 

И напоследок стоит уделить должное внимание стилю. Снимаем галочку с границ и окрашиваем полученную каплю в радиальный градиент. Центральный цвет форматируем под H190, S70, B100, A100, а нижний — H210, S70, B100, A100.

4.21

 

Для пущей привлекательности поместим внутреннюю тень

H190, S100, B100, A100

  • X: 0
  • Y: -34
  • Blur: 55
  • Spread: 0

4.22