() translation by (you can also view the original English article)
Незважаючи на те, що сьогодні багато людей користуються для перевірки часу своїми смартфонами, годинник лишається одним з найпопулярніших предметів інтер'єру. Навколо нас існує величезна різноманітність форм і кольорів і типів годинників: кухонні таймери, будильники, фліп-годинники, настінні, кабінетні годинники та багато інших.
У цьому уроці ми створимо три різні типи годинника в модному пласкому стилі, застосовуючи однорідні кольори та геометричні фігури. Ми навчимося розробляти дизайн годинника, працювати з інструментом Поворот та використовувати інші зручні інструменти та функції Адобе Ілюстратор.
В кінці уроку ви зможете створювати будь-які плоскі об'єкти, незалежно від того, чи є вони плоскими іконками годинників, іконками приготування їжі або будь-чого іншого. Переконайтеся, що ви переглянули векторний розділ GraphicRiver для отримання більшого натхнення. І давайте почнемо!
1. Створимо дизайн кухонного таймеру
Крок 1
Почнемо з циферблату годинника. За допомогою Еліпсу (L) створіть світло-бежеве коло 95 x 95 px.
Скопіюйте коло та Вставте позаду (Control-C> Control-B). Масшабуйте копію до 175 x 175 px, встановивши його новий розмір або на панелі керування зверху або в панелі Трансформувати. Зробіть колір Заливки більш темним.
Крок 2
Давайте зобразимо хвилинні та інші градації циферблату годинника, починаючи з вершини. Візьміть інструмент Відрізок лінії (\) або Перо (P), утримуйте Shift та зробіть коротку лінію з червоним Обведенням. Відправляйтеся вгору на панель Обведення та встановіть значення Щільність на 2 pt та Кінці на Округлені Кінці, щоб лінія була достатньо товстою та заокругленою на кінчиках.
Крок 3
Виберіть обведення за допомогою Виділення (V), та утримуючи клавішу Alt-Shift, перетягніть вниз, щоб зробити копію у нижній частині циферблату годинника. Згрупуйте (Control-G) створені штрихи.
Переконайтеся, що обидва обведення розташовані ідеально по центру. Для цього виділіть обведення разом із колом та ще раз натисніть круг, щоб зробити його Ключовим об'єктом. Відкрийте панель Вирівняти та натисніть Горизонтальне вирівнювання, центр.
Дублюйте (Control-C> Control-F) нашу групу обведення і оберніть копію на 90 градусів.
Крок 4
Тепер ми додамо незначні градації для 60-ти секунд. Дублюйте ті вертикальні червоні штрихи, які ми створили раніше, змініть колір Обведення на коричневий і встановіть значення Щільності на 1 pt. Ви можете зробити червоні штрихи невидимими, натиснувши значок ока у панелі Шари, щоб не відволікатися на них.
Крок 5
Тримаючи нашу группу штрихів виділеною, двічі клацніть по інструменту Поворот (R) та встановіть Кут на 360/60, щоб автоматично обчислити значення. Натисніть Копіювати, щоб створити нову пару штрихів. Натисніть Control-D, щоб повторити останню дію і продовжуйте натискати Control-D, щоб додати всі 30 пар штрихів.
Зараз ми можемо знову зробити видимими червоні штрихи та далі Відправте їх на передній план (Shift-Control-] понад коричневими штрихами.
Крок 6
Тепер ми перейдемо до тіла або корпусу нашого таймера. Візьміть Прямокутник (M) та намалюйте червоний прямокутник розміром 140 х 145 px. Надішліть його назад (Shift-Control-[), під циферблатом годинника).
Виберіть ліві і праві опорні точки прямокутника за допомогою інструмента Часткове виділення (A) і потягніть за маркери Динамічних кутів, щоб верхня частина форми була повністю заокруглена.
Крок 7
Ми також можемо встановити Радіус кута для верхніх кутів на 15 pt в панелі керування зверху, залишивши їх виділеними за допомогою інструмента Часткове виділення (A).
Тепер ми додамо деякого об'єму до нашої форми, створюючи ободок навколо корпусу годинника. Виділіть корпус і перейдіть до меню Об'єкт> Контур> Зсув контуру і встановіть значення Зсув на 5 px, та залиште всі інші параметри за замовчуванням. Зробіть нову форму трохи темнішою.
Крок 8
Візьміть інструмент Прямокутник з округленими кутами і додайте невеличку підставку у нижній частині корпусу. Створіть темно-червону форму 115 x 15 px з Кутами 7,5 px.
Крок 9
Давайте додамо стрілку до нашого таймера. Візьміть інструмент Еліпс (L) та створіть червоний овал 25 x 90 px. Скопіюйте колір з корпусу годинника за допомогою Піпетки (I).
Дублюйте овал і стисніть його до 9 х 88 px, щоб зробити верхню форму трохи світлішою.
Крок 10
Переключіться на інструмент Прямокутник (M) та зробіть темно-червону форму розміром 33 х 55 px. Надішліть її На задній план, під стрілку, натиснувши двічі Control-[.
Зробіть верхні кути форми злегка округленими, встановивши Радіус на 9 px.
Крок 11
Нам потрібно зробити нижню частину форми злегка витягнутою, щоб вона відповідала циферблату годинника. Візьміть інструмент Curvature Tool (Shift-') та потягніть за нижній край, щоб зігнути його.
Крок 12
Додамо остаточну деталь до нашого таймера: ніжний відблиск над пластиковим футляром. Скористайтеся Прямокутником (M), щоб створити форму розміром 55 x 190 px трохи світлішого червоного кольору.
Виберіть як корпус, так і прямокутник та скористайтеся інструментом Створення фігур (Shift-M). Утримуючи Alt, натисніть на верхню частину прямокутника, щоб видалити його.
Крок 13
Видаліть нижню частину прямокутника тим же методом - і там ми це отримали! Наш кухонний таймер закінчено!
Давайте перейдемо до наступного годинника.
2. Створимо фліп-годинник
Крок 1
Ми почнемо конструювати наш фліп-годинник з його екрану. Візьміть Прямокутник з округленими кутами та створіть світло-жовту форму розміром 170 x 85 px, з Радіусом Кута 8 px.
Зберігаючи форму виділеною, перейдіть до Об'єкт> Контур> Зсув контуру та застосуйте значення Зсуву 10. Залийте нову форму темно-зеленим кольором.
Крок 2
Цього разу або застосуйте Зсув контуру ще раз або просто створіть новий прямокутник розміром 210 х 130 px під попередніми двома. Залийте його яскраво бірюзовим кольором та встановіть Радіус кута на 25 px, таким чином, зобразивши корпус пластикового годинника.
Додайте більш темний обід до бірюзової форми, з Зсувом контуру 3 px, або створивши прямокутник розміром 220 x 140 px із закругленими кутами.
Крок 3
Створіть 170×10 px темно-бірюзовий округлений прямокутник для підставки та Відправте його На задній план (Shift-Control-[).
Давайте зробимо кілька кнопок. Додайте інший округлий прямокутник розміром 120 х 25 px над годинником, заливши його тем же темно-зеленим кольором, як на краю екрана. Розташуйте кнопку під корпусом годинника. Додайте ще одну кнопку на правій стороні годинника, застосувавши темно-бірюзовий колір.
Крок 4
Тепер прийшов час додати цифри! Я скористалася інструментом Текст (T) та безкоштовним шрифтом Bebas, щоб встановити час на 19:30.
Об'єкт> Розібрати вигляд, перетворивши його в редаговані криві.
Крок 5
Якщо потрібно, рухайте кожну фігуру окремо, щоб відстань між 9 та 3 стала трохи більшою, ніж інші прогалини.
Візьміть інструмент Прямокутник з округленими кутами і додайте темно-зелену форму 37 х 76 px для перегортання елементів під кожною фігурою.
Ви можете створити один прямокутник зліва, а потім просто перетягнути його праворуч, утримуючи Alt-Shift, щоб створити копію. Потім двічі натисніть Control-D, щоб повторити останню дію.
Скористайтеся панеллю Вирівняти, щоб вирівняти прямокутники Горизонтальним вирівнюванням по центру.
Крок 6
Застосуйте інструмент Відрізок лінії (\) або інструмент Перо (P), щоб додати вертикальну роздільну лінію. Утримуючи Shift, зробіть вертикальну темно-зелену лінію в центрі годинника. Встановіть значення Ширини на 2 pt на панелі Обведення.
І тепер давайте розділимо на окремі фігури. Візьміть інструмент Прямокутник (M) та зробіть вузьку горизонтальну смужку на дисплеї (я залила її червоним кольором, щоб зробити яскравішою).
Тепер виділіть лише фігури та Об'єкт> Складений шлях> Зробити (Conrol-8), об'єднавши окремі елементи в єдиний об'єкт.
Крок 7
Виберіть складений шлях разом із червоним прямокутником та застосуйте функцію Мінус передній план в панелі Обробка контурів, щоб вирізати смужку, залишивши горизонтальний розрив між всіма фігурами.
Крок 8
Ми отримали це! Наші фліп-годинник закінчено. Тепер ми можемо перейти до наступного!
3. Створимо сучасний настінний годинник
Крок 1
Як і раніше, ми почнемо з дизайну годинника. Візьміть Інструмент Прямокутник з закругленими кутами та створіть світло-бежевий квадрат 120 x 120 px. Застосуйте Об'єкт> Контур> Зсув контуру з Зсув контуру 5 px і зробіть нову форму дещо темнішою.
Крок 2
Тепер знов скористайтеся Зсувом контуру або створіть новий заокруглений прямокутник 150 x 150 px з Радіусом кута 13 px. Залийте нову форму яскраво-оранжевим кольором та Вирівняйте її до циферблату годинника (як до ключового об'єкту), якщо необхідно, натисніть Горизонтальне вирівнювання, центр та Вертикальне вирівнювання, центр.
Застосуйте Зсув контуру 5 px до оранжевої форми та зробіть колір трохи темнішим, додавши годиннику об'єму.
Крок 3
Почнемо додавати градаційні позначки до годинника. Скористайтеся Еліпсом (L), та утримуйте клавішу Shift, щоб зробити оранжеве коло 12 х 12 px над циферблатом. Утримуючи Alt-Shift, перетягніть коло вниз, створивши копію в нижній частині циферблату.
Згрупуйте (Control-G) обидва кола та Вирівняйте їх до годинника.
Крок 4
Дублюйте (Control-C> Control-F) нашу групу кіл та поверніть копію на 90 градусів.
Дублюйте вертикальну групу ще раз, і давайте додамо інший тип градацій. Встановіть колір Заливки на немає і колір Обведення на темно-синій. Установіть значення Щільності на 2 pt в панелі Обведення.
Крок 5
Двічі клацніть інструмент Поворот (R) та встановіть значення Кута на 30 градусів. Клацніть Копіювати та продовжіть, натискаючи Control-D - багато разів, щоб додати всі 12 кіл до годинника.
Крок 6
Відправте оранжеві кола На передній план (Control-]), щоб перекрити темно-сині кола.
Тепер давайте додамо стрілки годинника! Почніть, створивши червоне коло в центрі та Вирівняйте його по циферблату годинника.
Створіть короткий вертикальний темно-синій штрих, скориставшись інструментом Відрізок лінії (\), і встановіть Ширину на 7 pt та Кінці на Закруглені кінці, щоб створити годинну стрілку. Відправте її На задній план (Control-[), під червоне коло).
Крок 7
Додайте хвилинну стрілку, зробивши її довшою та зменшивши Ширину обведення на 4 pt.
Нарешті, зобразьте другу стрілку, змінивши колір Обведення на червоний, а Ширину на 3 pt.
Крок 8
Давайте додамо незначні деталі до годинника. Скористайтеся Еліпсом (L), щоб створити великий овал над нижньою половиною циферблату годинника. Тепер оберіть обидві сторони циферблату годинника та овал, перейдіть до інструмента Створення фігур (Shift-M) та один раз натисніть на верхню частину циферблату годинника, щоб розбити його. Зробіть верхню частину трохи темнішою, створивши овертон.
Крок 9
Вуаля! Наш настінний годинник завершено!
Тик-Так на годиннику! Наша коллекція іконок годинниківзакінчена!
Чудова робота! Я сподіваюся, вам сподобався цей урок і ви знайшли нові корисні поради та підказки.
Ви можете продовжувати розширювати цей набір і створювати нові іконки годинників, як показано на зображенні нижче.
