Мануал

Це добре місце, щоб дізнатися, як користуватися редактором Туніо. Він може здатися простим, але коли ти дізнаєшся все, що тут описано (або просто будеш практикуватися і експериментувати, в цьому все мистецтво!), він виявиться набагато зручнішим! Як додатковий великий палець або типу того.

Аудіоверсія (злегка неактуальна)

Малювання

Редактор пропонує на вибір 3 інструменти для малювання: Олівець, Зафарбована фігура і Ластик (+МЕГА-ЛАСТИК). Налаштувати інструменти можна на панелях праворуч, змінивши їх кольори, товщину та налаштування згладжування.

1. Олівець (B) – основний інструмент малювання.
   • Ліва кнопка миші - Малювати кольором контуру ( )
   • Права кнопка миші - Малювати кольором заливки ( )
2. Зафарбована фігура (F) — малює таку саму лінію, як олівець, але фігура зафарбована зсередини. Ми використовуємо цю альтернативу, тому що зробити класичний інструмент заливки досить складно.
   • Ліва кнопка миші - Малювати з квітами контуру і заливки (ось це так!)
   • Права кнопка миші - малювати з кольорами навпаки: колір контуру для заливки, а колір заливки для контуру.
3. Ластик (E) - малює прозору лінію, за якою не видно вміст шару. Будь акуратний, поєднуючи кадри, що містять гумку: він накладається так само, як і будь-який інший інструмент.
   • МЕГА-ЛАСТИК (Alt+E) – це накачаний крутий старший брат нашого Ластика. Замість того, щоб закривати лінії своєю невидимкою, як хлюпик зі шрамом, він буквально знижує їх. Його МОЖНА використовувати з інструментом об'єднання кадрів (вони навіть заграють один з одним!), і ми РЕКОМЕНДУЄМО використовувати його для оптимізації. Ахіллесова п'ята лише в тому, що ефект МЕГА-ЛАСТИКА скасувати не можна. Цей хлопець надто сильний. А ще будь обережнішим, використовуючи його на зафарбованих фігурах! Він їх ненавидить, тому ламатиме їхню заливку. (Цю частину Мануала написав МЕГА-ЛАСТИК)

Ці гарячі клавіші та інструменти допоможуть тобі в процесі малювання:

1. +/- - Змінити товщину поточного інструменту.
2. Скролл коліщатком миші - Наблизити/віддалити полотно.
3. Затискання коліщатка миші - Переміщення по полотну (коли він збільшений).
4. Переміщення полотна (D, O) - цей інструмент виконує ті ж функції, що коліщатко миші, але він може бути корисний за відсутності миші.
   • Затиснути - Переміщення по полотну (коли він збільшений).
   • Стрілки на клавіатурі - Акуратніше переміщення (затисніть Shift для прискорення!)
   • +/- - Наблизити/віддалити полотно.
5. Скасування (Z) – видаляє останню створену лінію. Діє лише на поточному кадрі вибраного шару.
6. Повернення (Y) – повертає останню віддалену лінію. Діє лише на поточному кадрі вибраного шару.
7. Поміняти кольори подекуди (X) — змінює місця кольору контуру та заливки.
8. Піпетка (P) – вибирає колір з полотна.
   • Ліва кнопка миші — вибрати колір контуру ( )
   • Права кнопка миші - Вибрати колір заливки ( )

Інструменти трансформації

Ці інструменти дозволяють модифікувати малюнок (переміщення, обертання, масштаб тощо)

Усі функції діють лише на поточному кадрі, на всіх вибраних шарах.

Будь ласка, пам'ятай, що ці функції НЕ МОЖНА скасувати, тому працюй акуратно. (Нагадування: використовуй, якщо ти не в настрої грати в руську рулетку!)

1. Трансформація (Q, W, S) – відкриває режим трансформації. Тут ти можеш переміщати, обертати, змінювати розмір та дзеркати малюнок.Це можна зробити або переміщуючи малюнок (як у твоєму улюбленому графічному редакторі!) або через введення значень у вікно вводу (досить корисно, якщо ти перфекціоніст, у тебе ДКР або ти переміщаєш фон чи якогось робота!)
   1. Перетягування всередині прямокутної області - Перемістити малюнок.
      • Shift - Переміщати тільки горизонтально або вертикально.
      • Стрілки на клавіатурі - Акуратніше переміщення (затисніть Shift для прискорення!)
   2. Затиснути квадратики на кутах прямокутника - Змінити розмір малюнка. Акуратніше: лінії за замовчуванням НЕ ЗМІНЯЮТЬ свою товщину, якщо змінюєш розмір. Будь ласка, використовуй заповнені фігури, якщо збираєшся змінювати розмір і при цьому не хочеш перетворювати малюнок на кашу. Або постав галочку на "Змінювати товщину ліній з масштабом"! ( )
      • Shift - Змінювати розмір пропорційно.
      • +/- - Збільшити/зменшити малюнок (Затисніть Shift для прискорення!)
   3. Перетягування куточків прямокутника - Обертання малюнка.
      • Ctrl - Велика точність!
      • Q/W - Повернути малюнок ліворуч/праворуч (затисніть Shift для прискорення!)
   4. Відобразити горизонтально (H)
   5. Відобразити вертикально (Shift+H)
   6. Скасування (Z) — ти можеш скасовувати зміни лише у режимі трансформації!
   7. Повернення (Y) - те саме!
   8. Застосувати трансформацію (Enter)
   9. Скасувати трансформацію (Escape)
   • Затисні мишу і рухай — що довше ти рухаєш курсор, то сильнішим стає спотворення.

   Тимчасова шкала

   Управління кадрами, шарами і всім таким.

   1. Шар (Shift + A) – створює новий шар після поточного.
      • Ctrl+Shift+A - Створити новий шар ПЕРЕД поточним.
   2. Прикріпити озвучку - дозволяє додати музику або звуки для мультфільму. Увійди в обліковий запис, щоб отримати цю можливість.
   3. Новий кадр (A) — Створення нового кадру після поточного.
      • Ctrl+A - Створити новий кадр ПЕРЕД поточним.
   4. Видалити поточний кадр (Del) – зможеш здогадатися, що робить ця кнопка? Будь обережним, видалення не можна скасувати! (Скопіюй кадр заздалегідь, якщо не хочеш ризикувати!)
      • Shift+Del - Видалити поточний шар.
   5. Відтворити/зупинити (Space) – відтворює анімацію з початку. Прошу зауважити, що при першому відтворенні анімація може з'являтися повільно, але після того, як усі кадри скешуються, вона відтворюється на реальній швидкості.
      • Shift+Space — відтворення анімації з поточного кадру.
      • Якщо вибрано кілька кадрів, відтворення зациклиться з першого кадру виділення до останнього.
   6. Показати/приховати кальку (Tab) – переключає видимість прозорих версій попередніх кадрів. Корисно для референсів!
   7. Копіювати кадр(и) (C) — зберігає вміст вибраного кадру (або кількох вибраних кадрів) у буфері обміну. Скопійовані кадри незалежні від своїх оригіналів, тому вони не зміняться, якщо щось зміниш на кадрах, які ти скопіював, або видалиш їх. (Тому ти можеш використовувати їх для бекапів!)
   8. Вставити кадр(и) із заміною обраного (V) — вставляє скопійований кадр (або кадри), при цьому все, що знаходиться на кадрі (кадрах), стирається. Тебе попередять! Якщо вибрана для вставки область більша, ніж скопійована, вставлені кадри повторюватимуться один за одним у початковому порядку, але шари немає.
   9. Поєднати кадр(и) з скопійованим(і) (M) — Вставити скопійований кадр (або кадри) ПОВЕРХ вмісту.І знову нагадую, що гумка теж вставиться, будь обережніше! Якщо вибрана для вставки область більша, ніж скопійована, вставлені кадри повторюватимуться один за одним у початковому порядку, але шари немає.

   Кожен шар має такі опції:

   1. Приховати/показати Шар - Перемикає видимість шару. На невидимих ​​шарах не можна малювати.
   2. Перетягнути шар - дозволяє міняти шари місцями.
   3. Видалити шар — знову ж таки, будь дуже обережним з цією штукою!
   4. Подвійне натискання - Перейменувати шар.

   Наступні гарячі кнопки допоможуть тобі переміщатися за тимчасовою шкалою.

   1. Попередній кадр (Стрілка Ліворуч)
   2. Наступний кадр (Стрілка Праворуч)
   3. На перший кадр (J)
   4. На останній кадр (L)
   5. Стрілка вгору - Попередній шар.
   6. Стрілка вниз - Наступний шар.
   7. Скролл коліщатком миші - Вертикальне переміщення за тимчасовою шкалою.
   8. Shift + Скролл коліщатком миші - Горизонтальне переміщення за тимчасовою шкалою.
   9. Затискання коліщатка миші (альтернатива: затисніть двома пальцями) — переміщення за тимчасовою шкалою за допомогою свайпів, як на телефоні.

   Часті питання (Версія для редактора!)

   РЕДАКТОР ЗАНАДТО СКЛАДНИЙ!

   Якщо навести курсор на інструмент і потримати його, з'явиться невеликий опис функції. Якщо зрозуміліше не стало, прочитай весь решту Мануалу.

   Мій графічний планшет дивно поводиться в редакторі

   Спробуйте вимкнути Windows Ink (Рукописне введення Windows) у налаштуваннях драйвера твого планшета! (Загугли, якщо не знаєш, як це зробити!) Але якщо проблема залишиться, зв'яжися зі мною.

   Чи можна малювати на Туніо з телефону?

   Це можливо, але редактор спочатку не призначений для мобільних пристроїв.
   У Chrome є функція, яка називається "Версія для комп'ютера", вона доступна в меню. Натисніть на неї, і вікно редактора збільшиться і навіть стане майже придатним для малювання!

   Мульти не завантажується, з'являється помилка.

   Зв'яжіться з Адміном! Ти можеш надати додаткову інформацію (і ми дуже рекомендуємо!), зробивши скріншот вікна консолі (F12 у більшості браузерів) або скачав лог помилок редактора (Alt+L).

   Як зберегти мультфільм?

   Я думав, це очевидно, але, судячи з частоти цього питання, виявилося, що це не так. Натисніть велику кнопку з іконкою в самому низу панелі інструментів, дурненький!

   Чому при збереженні мультфільму з'являється вікно входу, навіть якщо я вже увійшов до облікового запису?

   Швидше за все, це тому, що ти вийшов з облікового запису (автоматично або вручну). Просто увійди та збережи мульт ще раз, після цього все має працювати! Також є проблема з браузерами Firefox, через яку редактор може завантажитись некоректно. У цьому випадку збережи мульт локально (Ctrl+S) і перезавантаж сторінку без кешування за допомогою комбінації клавіш Ctrl+F5.

   Чому при скачуванні мультфільму з'являється чийсь логін в нижньому лівому кутку?

   Це простий захист від крадіжки робіт. При завантаженні мультфільмів, на зображенні з'явиться логін автора оригіналу. Ця система неідеальна, тому навіть якщо ти сильно зміниш оригінал, ім'я автора початкової роботи все одно залишиться. Але ти можеш попросити мене прибрати цей напис.

   Заливання не працює!

   Все працює, просто потрібно правильно ним користуватися. Через деякі технічні обмеження ми не можемо зробити заливку такою, як вона працює в графічних редакторах. Тому інструмент із іконкою відерця малює фігуру, зафарбовану кольором зсередини.Так що просто спробуй намалювати якусь фігуру, наприклад кружальце!

   Окей, але як змінити колір заливки?

   Виберіть колір на панелі і натисніть правою кнопкою миші по ньому. Той самий трюк працює, якщо ти використовуєш піпетку!

   А ось спотворення точно не працює! Чи працює?

   Клацніть у будь-якій точці полотна, а потім потягни курсор у будь-якому напрямку! Чим далі ти зрушуєш курсор, тим більше спотворення застосовується.
   Будь ласка, запам'ятай, що ти не можеш скасувати цей ефект.

   Чому, коли я збільшую/зменшую малюнок, він перетворюється на кашу?

   За промовчанням редактор не змінює товщину ліній. Поставте галочку на "Змінити товщину ліній з масштабом" ( ), щоб виправити це непорозуміння! Щоправда, при цьому краще змінювати розмір пропорційно (із затиснутим Shift або кнопками +/-), а інакше все одно вийде розмазня.
   

   Як прикріпити озвучку до мультфільму?

   Клацніть на кнопку (на панелі з кадрами!) та вибери аудіофайл зі свого комп'ютера. Або просто перетягни його у вікно редактора! Зазначу, що для того щоб прикріпити озвучку, необхідно увійти в аккаунт.

   Скільки коштує прикріплення звуку?

   500 олівців. Після завантаження ти можеш перезалити (при редагуванні мультфільму) озвучку безкоштовно. За досягнення деяких рівнів ти отримуєш безкоштовні озвучки.

   Де зберігаються локально збережені мульти?

   Вони зберігаються у локальному сховищі твого браузера. Тому будь обережним: якщо очистити кеш браузера, всі твої автозбереження можуть зникнути! Для безпеки, рекомендую час від часу зберігати роботу в чернетці (для цього потрібно увійти в обліковий запис) або експортувати дані, використовуючи менеджер локальних збережень ( ).

   Який максимальний розмір мультфільму?

   Це залежить від продуктивності твого комп'ютера та обмежень браузера. Ми рекомендуємо не перевищувати розмір 30 мегабайт (абсолютний ліміт - 200 МБ). Якщо ти не можеш оптимізувати мультфільм, попроси Адміна перетворити його на відео. Якщо ти робиш довгий мульт, використовуй окремі чернетки для різних сцен, ми можемо їх склеїти!

   Як оптимізувати мій мультфільм?

   Пам'ятай мої мудрі слова! Абсолютно всі лінії малюються, навіть якщо їх не видно, або вони чимось закриті. Видаляй непотрібні лінії! Гумка, до речі, теж лінія, він не допоможе. Використовуй МЕГА-ЛАСТИК, він видаляє лінії цілком, акуратніше - його дію звернути не можна!

   Поради та Трюки

   Цей розділ присвячений корисним порадам, які (сподіваюся) трохи полегшать тобі життя! Точніше, роботу із редактором Туніо. Порад із знайомств у мене немає!

   1. Перед використанням інструментів, дія яких не можна скасувати (МЕГА-ЛАСТИК, трансформація, спотворення), скопіюй поточний кадр! ( ) Якщо щось піде не так, ти зможеш вставити ( ) і повернути все, як було.
   2. Хочеш очистити купу кадрів за один раз? Легко! Створи порожній кадр і скопіюй його. Потім виділили на таймлайні область, яку хочеш очистити, та встав. Все очиститься!
      • Той самий трюк можна провернути з кількома скопійованими кадрами. Це допоможе тобі зациклити якусь повторювану анімацію!
      • Також ти можеш поєднувати безліч шарів в один (використовуючи)! Тільки будь акуратніше, щоб не "пролити" ластик, що залишився на них.
      • Змінювати кадри місцями також дуже легко, використовуючи копіювання та вставку.
   3. Можливість вибрати кілька кадрів на тимчасовій шкалі, насправді досить корисна.Ти можеш використовувати її не лише для копіювання та вставки діапазонів кадрів, але й для трансформації на кількох шарах одночасно! Просто вибери всі потрібні шари та твори магію.
   4. Чи потрібно намалювати пряму лінію? Просто збільши другий повзунок згладжування до максимуму та малюй. Ось і все!
   5. Як зробити скетч трохи менш видимим? Створи новий кадр та використовуй кальку, щоб обвести замальовку! Або малюй скетчі трохи світлішим кольором. Ми поки що не винайшли прозорість!

   Повний посібник з початку роботи в Sketch (з безкоштовною шпаргалкою)

   Неважливо, чи ви повний новачок, дизайнер на навчанні, досвідчений профі, який перемикається на новий продукт, - це стаття для вас. По-перше, ми трохи познайомимося зі Sketch - що це таке, чим він завоював свою популярність, як отримати безкоштовну тріал-версію та встановити програму на Mac. По-друге, вивчимо інтерфейс Sketch, я поясню основи та покажу деякі фішки та прийоми. По-третє, ми торкнемося більш просунутих функцій програми (криві Безьє, блендинг особливо вражають). І, нарештія поділюся якісними ресурсами по Sketch, включаючи безкоштовну шпаргалку на 99 пунктів, з якою дуже зручно вчитися роботі в додатку. Звучить непогано? . . .

   1. Чому Sketch?

   Якийсь час після релізу в 2010 році Sketch розцінювався як легковажний інструмент для редагування графіки, за допомогою якого дизайнери UI та UX могли швиденько прототипувати дизайн додатків. Але за останні роки Sketch значно розвинувся – і його можливості зараз виходять далеко за межі створення макетів екранів.Як молодий продукт, створений спеціально для потреб сьогоднішнього дня, в ньому немає всього цього непотрібного сміття, як у наборі продуктів Adobe Creative Cloud. Зараз Sketch гордо продається як візуальним, мобільним, іконковим, веб і продуктовим дизайнерам - і я думаю, це лише питання часу, поки його розробники, Bohemian Coding, з впевненістю не почнуть орієнтувати свій продукт і на ілюстраторів та художників.

   Що таке Sketch?

   Sketch - одна програма із групи під назвою “векторні графічні редактори”. Інші представники цієї категорії – Adobe Illustrator, CorelDRAW та OpenOffice Draw. Векторний редактор відрізняється від піксельних редакторів. У піксельному графічному редакторі (наприклад, Adobe Photoshop, GIMP або Microsoft Paint), коли ви малюєте фігуру, зберігається маса даних про кожному пікселі, що виглядає як коло: Але у векторному редакторі на кшталт Sketch зберігається лише математична основа самої фігури. На практиці це означає, що ви можете масштабувати вектор, скільки завгодно і ніколи не побачите жодної втрати як зображення. Дизайнери та ілюстратори зазвичай віддають перевагу виключно векторам, тому що їх завжди можна конвертувати у пікселі. Набагато складніше піти зворотним шляхом. У Sketch тільки якщо ви не вставите піксельну графіку, наприклад, фото, всі шари векторні. Кожен об'єкт складається з опорних точок та кривих, які можна переглянути та відредагувати, клацнувши двічі на фігурі. Але ми до цього ще повернемось!

   Все хороше – компактно

   Sketch за останні 12 місяців змужнів, став набагато стабільнішим продуктом.Для застосування вагою менше 50 мегабайт Sketch має більш ніж великі можливості, і зараз є чітке відчуття, що його вартість набагато більш ніж виправдана (повна вартість $99, для студентів - $49). Для порівняння, Adobe Illustrator CC займає більше 1000 МБ на моєму жорсткому диску. Більше того, постійна програма Bohemian Coding щодо покращення ПЗ означає, що коли з'являються баги, їх досить швидко фіксують. Офіційний суперник Sketch, Adobe Illustrator, існує на ринку з 1987 (!) і залишається стандартом в індустрії традиційних дизайн-студій. Але для дизайнерів нової генерації Sketch дає величезну можливість вивчити основи та досягти відмінних результатів. Вчитися дизайну в Sketch швидко, окупно, та весело!

   2. Початок роботи у Sketch

   Спочатку скачайте Sketch

   Якщо ви зовсім новачок, завітайте на сторінку Getting Started на офіційному сайті Sketch. Sketch буде працювати на будь-якому Mac з OS X El Capitan (10.11) або вище, і ви можете скачати безкоштовну 30-денну тріал-версію.

   Постарайтеся не заблукати в інтерфейсі

   • Панель інструментів: надає доступ до команд, що часто використовуються. Більшість команд можна використовувати через гарячі клавіші, що швидше. (У нас є докладна шпаргалка по гарячих клавішах у Sketch – ви можете завантажити її внизу посту).
   • Список шарів: ця панель показує список всього, що було намальовано у Sketch. Всі елементи в Sketch представлені як шари - так що фігура на зразок кола значиться в цьому списку як окремий шар, і його положення показує, який шар знаходиться спереду або позаду кола. Ви також можете встановити для кожного шару назву.
   • Інспектор: Інспектор відображає докладну інформацію про виділений шар, і дозволяє робити точні налаштування. Наприклад, ви можете вручну вказати X/Y-координати точки або змінити піксельну ширину фігури. Інспектор також дозволяє вам налаштовувати непрозорість, заливку та межі, вирівнювати шар, задавати тіні, розмиття та параметри експорту.
   • Артборд: Sketch організує вашу роботу за допомогою сторінок та артбордів Артборди дають змогу створювати різні композиції на одній сторінці. Це може бути корисним для налагодження ефективного робочого процесу. Наприклад, вам хотілося б записувати кожну ітерацію при розробці лого, або необхідно створити макети екранів для різних пристроїв на одному полотні. Кожен документ Sketch може містити різні сторінки (сторінка – це по суті чисте нове полотно), і кожна сторінка може містити безліч артбордів. Думайте про артборд як про кадр, який ви можете вставити у будь-яке місце дизайну.

   Далі ознайомтеся з деякими важливими командами

   a. Створення артбордів

   Коли ви відкриваєте Sketch вперше, у вас буде порожній канвас. Насамперед вам напевно захочеться створити артборд, що дозволить тримати дизайни в порядку. Ви можете створювати стільки артбордів, скільки хочете на одній сторінці. Щоб створити новий артборд, натисніть “Insert” на панелі інструментів, потім виділіть “Artboard”, клацніть прямокутник і перетягніть мишкою на полотно. Або можете просто натиснути “A” на клавіатурі, а потім клікнути і потягнути.

   b. Малювання фігур

   Найпростіше почати малювати фігури за допомогою гарячих клавіш. (Не забудьте, попереду на вас чекає шпаргалка зі 100+ гарячих клавіш!)

   • O = овал
   • R = прямокутник
   • U = прямокутник із закругленими кутами
   • L = лінія

   За допомогою кнопки “Insert” в панелі інструментів можна отримати доступ до більшого набору різних фігур типу зірки, багатокутника, трикутника тощо. Ось тут я малюю зірку:

   с. Вирівнювання та розподіл об'єктів

   Коли я тільки-но почав працювати в Sketch, я закохався в їх кнопки вирівнювання і розподілу, які живуть вгорі панелі Інспектора. Ось що вони роблять: Розподілити по горизонталі Зрівнює горизонтальні відступи між виділенням із 3 або більше об'єктів. Розподілити по вертикалі Зрівнює вертикальні відступи між виділенням із 3 або більше об'єктів. Вирівнювання по лівому краю Вирівнює ліві краї двох або більше виділених об'єктів. Вирівнювання по горизонталі Вирівнює горизонтальні центри виділення з двох або більше об'єктів. Вирівнювання по правому краю Вирівнює праві краї двох або більше виділених об'єктів. Вирівнювання по верху Вирівнює верхні краї двох або більше виділених об'єктів. Вирівнювання по вертикалі Вирівнює вертикальні центри виділення двох або більше об'єктів. Вирівнювання внизу Вирівнює нижні краї двох або більше виділених об'єктів Ці команди виконують дві критично важливі функції. По-перше, вони допомагають вам працювати ефективно, тому що ви можете швидко створити купу об'єктів, а потім вирівняти і розподілити їх рівномірно всього за пару кліків. Тепер ніяких відчайдушних перетягування об'єктів точно в потрібних піксель! І, по-друге, вони допомагають очистити композицію в кінці дизайн-процесу, тому що ви точно знаєте, що всі елементи точно позиціоновані та розподілені, всі на своїх місцях.Ось приклад, як я використовую вирівнювання лівим краєм (кнопка “Align left”):

   d. Дублювання шарів та артбордів

   У Sketch дуже легко дублювати шари та артборди. Клацніть правою кнопкою мишкою на будь-якому об'єкті, виберіть опцію “Duplicate”, щоб створити копію поверх оригіналу. Як варіант, просто виділіть об'єкт і натисніть + D, або просто утримуйте alt, а потім перетягніть об'єкт, який хочете скопіювати. Ось я дублюю свою зірку: Дублювання артбордів також важливе у налагодженні продуктивного дизайн-процесу. Дублюючи артборд після кожної важливої ​​зміни, ви завжди можете легко повернутися на більш ранню версію без необхідності користуватися опцією “Undo” сотні разів:

   e. Ще кілька підказок по головним опціям у Sketch

   Ця серія порад з Sketch допоможе освоїти програму та покращити свою продуктивність: Частина 1 - Початок роботи у Sketch

   • Ресайз фігур за допомогою гарячих клавіш
   • Дублювання елементів
   • Смарт-виділення
   • Угруповання та розгрупування елементів
   • Пряме виділення у групах
   • Настроювання 100% масштабу
   • Показати всі артборди
   • Перенесення об'єктів на передній або задній план
   • Перейменування
   • Вимірювання відстані між елементами
   • Налаштування непрозорості за допомогою цифрової клавіатури
   • Зміна радіуса кожного кута окремо
   • Налаштування нестандартних гарячих клавіш
   • Використання математичних операцій усередині полів уведення
   • Складові фігури
   • Команда для поворотного копіювання
   • Слайси
   • Експортовані елементи та артборди
   • Експорт вихідних джерел для екранів retina
   • Позиціонування об'єктів "за гранню"
   • Комбінування світла та тіні для завдання глибини
   • Імітація складчастої поверхні
   • Створення різких тіней
   • Відстань між об'єктом та його тінню
   • Множинні джерела світла
   • Лінія горизонту
   • Накладання об'єктів

   І, нарешті… пропрацюйте ці уроки з Sketch. Вони російською мовою

   Серія уроків від Marc Andrew

   Створення мобільних додатків у Sketch від Marc Andrew

   Якщо вам потрібні ще уроки та поради щодо початку роботи в Sketch, ви знайдете їх у розділі “Додаткові ресурси” наприкінці цієї посади.

   3. Більш просунуті прийоми роботи у Sketch

   Як тільки ви впораєтеся з основами, настане час перейти до більш сучасних можливостей, доступних Sketch-користувачам!

   Освоєння кривих Безьє

   Як я згадував раніше, Sketch - це векторний графічний редактор, а це означає, що всі об'єкти в Sketch складаються з точок та кривих. Щоб відчути всю цінність Sketch, вам потрібно навчитися керувати цими точками та кривими. Це дозволить вам малювати складні фігури, наприклад, орнаментовані літери з нуля. Пітер Новел написав шикарну статтю про роботу з кривими Безьє. Він описує важливі принципи роботи з цим видом об'єктів, пояснює різницю між різними елементами управління, дає практичні поради щодо роботи з цим векторним інструментом у Sketch. Ознайомтеся!

   Створення символів

   Sketch дозволяє створювати власні "символи". Це означає, що ви можете зберегти шар або групу шарів як символ, а потім вставити його в документ, якби це була проста фігура. Особливими символами є те, що ви можете клацнути двічі на “сутності” символу, відредагувати “головний” символ, і всі сутності цього символу в документі будуть автоматично оновлені. На цій GIF-ці я створюю символ у формі листочка, вставляю ще дві його сутності, а потім змінюю непрозорість батьківського символу. Подивіться, як інші змінюються:

   Просунуті опції ресайзу

   Коли працюєте з об'єктами, що згрупуються, може знадобитися, щоб об'єкти в групі поводилися по-різному при ресайзі. Для кожного об'єкта всередині групи Sketch дозволяє вибрати свій метод ресайзу. Ось можливі опції:

   • Stretch (розтягнути): об'єкт буде відресайзований пропорційно до загальних розмірів групи. Це метод за умовчанням, зазвичай саме такого ефекту ви чекаєте від ресайзу.
   • Pin to corner (прикріпити до кута): розмір об'єкта буде змінено, але його положення не зміниться (стосовно найближчого кута)
   • Resize object (ресайз об'єкта): розмір об'єкта буде змінено на те саме піксельне значення, на яке ресайзується група. Якщо група стає на 50px ширше, то об'єкт стане на 50px ширше.
   • Float in place: об'єкт не буде відресайзований при ресайзі групи, але він змінить своє положення пропорційно до загальних габаритів групи.

   Детальніше про режими блендінгу

   Режим блендингу (змішування) визначає, як кольори одного шару взаємодіють із шарами під ним. Наразі Sketch пропонує 15 різних режимів змішування. Якщо ви користувач Photoshop, можливо, ви вже знайомі з деякими з них. У цій чудово ілюстрованій статті Маурицію Уехара описано кожен режим, і навіть прийоми зі створення чудових ефектів з допомогою.

   Використання Sketch для друкованого дизайну!

   Для тих, хто швидше і продуктивніше працює в Sketch, має сенс підготовляти й друковані документи в цій програмі замість якогось спеціалізованого пакету на кшталт Adobe InDesign. У цій приголомшливій статті Пітер Новелл пояснює, як використовувати Illustrator для підготовки PDF, створеного в Sketch для друку.

   Випробуйте свої навички у цих міні-проектах

   Ви дочитали аж до цього місця, то чому б не випробувати ваші нові навички, намагаючись відтворити парочку міні-проектів у Sketch? Почніть із простого - відтворення іконки Google Docs. Потім спробуйте щось складніше. Створення іконок у Sketch

   • Створюємо плоску Flat іконку у Sketch
   • Детальний урок створення IOS іконки в Sketch
   • Створюємо ефектну іконку у вигляді краплі води у Sketch
   • Іконки у Sketch 3 — Дизайн іконки Google Docs
   • Малюємо прикольну мультяшну ілюстрацію бомбу
   • Створення іконок у Sketch, проста іконка налаштувань
   • Різдвяні іконки дизайн в Sketch

   Створення ілюстрацій у Sketch

   4. Додаткові ресурси

   • Стати Sketch-профі всього за 9 невеликих порад
   • Освойте плагін Craft від Invision і дізнайтеся, чим він такий гарний для веб-дизайнерів
   • Zeplin – передача вихідників розробникам
   • 5 речей, які потрібно зробити до створення наступного дизайн-файлу у Sketch
   • Покроковий посібник зі створення нових проектів у Sketch

   Обов'язково вивчення

   Завантажте шпаргалку із 99 гарячих клавіш для Sketch!

   Якщо ця стаття видалася вам корисною, чому б не завантажити цю шпаргалку? Збережіть цю PDF-ку на комп'ютері для швидких довідок, або її можна роздрукувати та прикріпити на стіні біля монітора. Як вам Sketch? Які ваші успіхи в роботі з цією програмою? Діліться у коментарях!