Швидка заливка шару кольором
У Photoshop є штатний метод заливки шару кольором, але він надто незручний - треба пройти по вкладці головного меню Редагування -> Заливка (Edit -> Fill), відкриється вікно, де треба вибрати, чим заливати - основним або фоновим кольором, або самостійно вибрати колір , а потім натисніть ОК.
Але, як завжди, Phtoshop пропонує нам альтернативні способи заливки. І, звичайно, цей спосіб полягає у застосуванні гарячих клавіш.
Загалом, за допомогою гарячих клавіш Фотошопу, можна використовувати три варіанти заливання. Це заливка фоновим кольором, основним кольором новим кольором, проте останній варіант не є самостійним, а є доповненням до одного з перших двох.
Як показано на малюнку, миттєво залити шар фоновим кольором із палітри кольорів можна за допомогою комбінацій клавіш Ctrl+Delete або Ctrl+Backspace, для заливання основним кольором необхідно натиснути Alt+Delete або Alt+Backspace.
Тепер про встановлення кольору в палітрі кольорів. Кольори за промовчанням (основний - чорний, фоновий - білий) встановлюються натисканням клавіші D. Поміняти місцями основний з фоновим можна натисканням клавіші X (ікс).
Наприклад, щоб миттєво залити шар чорним, треба натиснути D і Alt+Backspace.
Але як залити шар довільним кольором? Для цього потрібно налаштувати швидкий вибір кольорів гарячими кнопками, як розказано тут.
Тепер, щоб залити шар власним кольором, мені потрібно натиснути клавішу K, вибрати колір мишкою або ввести його значення, потім натиснути Alt+Backspace. Погодьтеся, дуже швидко та зручно.
І ще одна смакота. Гарячими клавішами можна заливати не тільки шар.Натиснувши комбінації Alt+Shift+Backspace та Ctrl+Shift+Backspace Ви також заллєте зображення основним та фоновим кольором відповідно, але прозорі місця шару так і залишаться прозорими.
Власник цього сайту. Графічний дизайнер, спеціаліст з Фотошопу з досвідом 10+ років. Також веду канал про графічний дизайн на Ютуб та розвиваю тематичну спільноту у ВКонтакті. Зв'язатися зі мною можна через коментарі, форму зворотнього зв'язку або електронною поштою [email protected]
Як залити вектор у figma
Для замкнутих векторів Figma доступна звичайна заливка (кольором, градієнтом або зображенням), але в деяких випадках потрібно виконати заливку частини вектора, або навпаки, частково її прибрати.
Часткова заливка вектор
Для цього можна скористатися інструментом Paint Bucket, який доступний у режимі редагування вектора.
Щоб почати редагувати вектор, або натисніть на нього кілька разів поспіль, або натисніть кнопку Edit Object.
Інструмент Edit Object
Заливка дозволяє точно вибрати області, які треба залити тлом або навпаки зробити прозорими.
Відео: 6 урок з Figma — Інструмент Перо і робота з вектором [Figma уроки] Завантажити
Вектор у фігмі: як редагувати з інструментом «Edit object»
У цій інструкції розбираємо, як редагувати вектор у фігмі з інструментом «Edit object». Це можна використовувати для будь-яких векторних елементів (іконок, ілюстрацій, фігур, створених за допомогою стандартних інструментів фігми).
Якщо вибрати елемент, який був намальований за допомогою стандартних інструментів у Figma або будь-який дурний векторний елемент, зверху з'явиться іконка «Edit object».
Якщо її натиснути, на об'єкті з'являться точки і можливість їх переміщати.Зверху з'являться додаткові інструменти, які можна використовувати.
Bend tool – це інструмент Figma для вигину, який допомагає заокруглювати кути. Якщо вибрати цей інструмент і натиснути на якусь точку лівою клавішею миші, а потім потягнути убік, то з'являться важелі, за допомогою яких можна змінювати фігуру.
Якщо при редагуванні встановити клавішу «Alt», то можна пересувати один з важелів.
При затисканні клавіші Shift, буде можливість змінювати розташування важелів на 45 градусів.
Інструмент Paint bucket дозволяє зафарбовувати будь-які області або навпаки прибирати з них заливку.
Ви можете ставити додаткові точки всередині відрізків фігури, як показано на скріншоті вище та переміщувати їх.
Інструменти "Pen tool" та "Pen" допомагають малювати додаткові точки у вашої фігури.
Відео: Уроки Figma (Фігма) – №8: Заливка та градієнт / Безкоштовний курс по Фігмі Завантажити
Висновок
Отже, у цьому невеликому відео та статті ви дізналися як редагувати вектор у фігмі та розібрали про інструмент «Edit object».
Відео: Уроки Figma | Симетричний вектор Завантажити
Як малювати векторні зображення у Figma
Малюємо м'яч для регбі, хитрімо з накладенням шарів та уникаємо «м'ятих» ліній.
Meery Mary для Skillbox Media
Часто Figma асоціюється лише з проектуванням інтерфейсів. Однак у ній можна малювати повноцінні ілюстрації та векторні іконки.
Разом з ілюстратором Віктором Засипкіним розповідаємо, як працює режим векторного редактора у Figma та як малювати у ньому м'яч для регбі.
Віктор Засипкін
Ілюстратор. Малював ілюстрації для електронного підручника «Японська мова без страху» та розсилки «Як зробити проект».
Редактор.Пише про дизайн, редагує книги, жартує жарти, дивиться аніме.
Відео: 4 СПОСІБ ОБ'ЄДНАТИ У FIGMA. З'єднуємо елементи, шари, кадри, фігури, вектори, об'єкти у фігмі. Завантажити
Як працює режим векторного редактора у Figma
Перш ніж малювати, важливо розібратися, як працюють інструменти створення векторних ілюстрацій. Якщо ви вже все про них знаєте, одразу переходьте до практики. Якщо ні, читайте нашу інструкцію.
Для початку намалюйте простий квадрат:
1. На панелі інструментів натисніть іконку і клацніть у будь-яку частину макета.
2. Натисніть ще раз на будь-яку іншу частину макета, і у вас з'явиться лінія.
3. Так само зробіть ще три лінії, щоб у вас вийшов квадрат. Остання лінія має з'єднатися з першою. Щоб лінії вийшли рівними, робіть їх із кнопкою Shift..
Зверніть увагу, що створивши першу точку, ви увійшли в режим векторного редактора, і панель інструментів змінилася:
Додайте на квадрат додаткові точки, щоб вийшов багатокутник:
1. На панелі інструментів натисніть , наведіть курсор на одну з ліній - посередині ви побачите точку.
2. Затисніть цю точку правою кнопкою миші та тягніть її від центру фігури.
3. Повторіть те саме з іншими сторонами фігури.
Згладьте кути прямокутника, що вийшов:
1. На панелі інструментів натисніть на іконку і двічі клацніть на будь-яку точку фігури.
2. Затисніть будь-який з країв ліній - їх називають вусами. Тягніть вус у бік вигину кута, щоб він не перетинав лінію дуги. Інакше ваша лінія може вийти «м'ятою».
3. Повторіть те саме з іншими точками. Якщо округлення, що вийшло, вам не подобається, натисніть правою кнопкою миші на потрібну вам точку.
Як і у стандартних фігур Figma, у вектора можна змінити колір заливки і параметри обведення:
Будь-яку стандартну фігуру Figma — коло , квадрат , трикутник чи багатокутник — можна редагувати як вектор. Щоб це зробити, створіть фігуру і двічі клацніть по ній правою кнопкою миші:
Щоб вийти з режиму редагування вектора, натисніть Done на панелі інструментів. Якщо захочете щось змінити, двічі клацніть по вектору.
Відео: РАСТР У ВЕКТОР FIGMA | jpeg to svg Завантажити
Як намалювати м'яч для регбі
Людський мозок запам'ятовує лише основні деталі об'єктів, тому перед початком роботи обов'язково знайдіть референс, щоб нічого не вигадувати на ходу.
Ми будемо малювати м'яч для регбі, на фотографії ви відразу побачите його основні та другорядні деталі:
1. Створіть коло і розтягніть його по довжині та висоті м'яча, щоб вийшов овал.
2. У режимі векторного редактора налаштуйте форму овалу під м'яч, щоб вони були схожі.
Відео: Віктор Засипкін / Skillbox Media
1. Створіть коло і розтягніть його по основному шву, який перетинає його.
2. У режимі векторного редактора налаштуйте форму овалу під шов.
3. Видаліть фон, додайте на вектор обведення і перенесіть його на овал у формі м'яча.
Відео: Віктор Засипкін / Skillbox Media
1. Створіть квадрат та підганяйте його розміри під форму додаткового шва.
2. Видаліть фон у фігурі, додайте обведення та закругліть кути . Як зразок для заокруглення візьміть кут шва, який видно найкраще. У нашому референсі це лівий нижній.
3. У режимі векторного редактора розташовуйте точки фігури у напрямку шва, а вусами регулюйте заокруглення так, щоб вектор повторював форму шва.
4. Цей шов не суцільний, а малий.Вкажіть пунктирний стиль у налаштуваннях обведення. Щоб це зробити, у блоці Stroke на панелі інструментів натисніть і в меню, що з'явилося в пункті Stroke Style вкажіть стиль Dash. Налаштуйте налаштування Dash (кількість точок) та Gap (крок), щоб пунктир приблизно нагадував шов справжнього м'яча.
Відео: Віктор Засипкін / Skillbox Media
1. Скопіюйте основний овал, виділіть його та вкажіть колір заливки: білий.
2. Помістіть білий овал на м'яч і підганіть його під розмір відблиску — він буде приблизно на третину менший від основного овалу.
3. Помістіть відблиск на м'яч. Швидше за все, він буде завеликим, тому зменшіть його і підправте ламані кути за допомогою вусів.
Відео: Віктор Засипкін / Skillbox Media
Ліва біла смужка
Щоб її зробити, скористайтеся хитрістю з накладенням шарів:
1. Створіть коло і повторіть зовнішній лівий край смужки за допомогою однієї з його сторін.
2. Створіть ще одне коло і за допомогою його повторіть внутрішній правий край смужки. Важливо, щоб це коло на палітрі шарів знаходилося нижче попереднього.
3. У режимі векторного редактора підправте обидва кола, щоб вони точно повторювали вигини смужки. Для зручності вкажіть непрозорість кіл на 50%, щоб бачити самі фігури, і контури м'яча.
4. Виділіть обидві фігури, натисніть на панелі інструментів на іконку та у списку виберіть . В результаті видимої залишиться тільки та частина, в якій ваші кола не перетинаються, вона й утворює білу смугу.
5. Зробіть копію основної форми м'яча та підкладіть її під смужку. Якщо вона виходить за краї фігури, виділіть і смужку, і форму м'яча, потім на панелі інструментів натисніть на іконку і в списку виберіть . В результаті залишиться видимою лише та частина, де ваші кола перетинаються.
6.Помістіть фігуру на м'яч. Якщо вона залазить на шов, його можна трохи зменшити.
Права біла смуга
Праву смугу можна зробити так само, як і ліву, або намалювати її самостійно за допомогою інструмента:
Відео: Віктор Засипкін / Skillbox Media
1. Білий шов повторює форму основного. Візьміть поперечний шов із затиснутою клавішею Ctrl (⌘) виділіть усі точки знизу та видаліть їх. У вас повинна вийти коротка лінія завдовжки з поперечним шовом.
2. Покладіть лінію на референс і, якщо потрібно, зробіть її довшою або коротшою в режимі векторного редактора.
3. Помістіть вектор на нижній край шва і за допомогою пера обведіть решту контуру шва.
4. За допомогою пера повторіть контури всіх стібків.
Відео: Віктор Засипкін / Skillbox Media
В результаті у вас вийде приблизно такий м'яч:
💡 Відео
Уроки Figma Як малювати у фігмі векторну графіку
