Як тримати шрифти й кольори бренду однаковими в кожному дизайні
Назвіть кольори й шрифти один раз, привʼяжіть до них кожен шар і змінюйте в одному місці.
Тримати шрифти й кольори бренду однаковими — звучить як питання дисципліни, але насправді це питання того, де живе бренд. Якщо кольори — це hex-коди в PDF, а шрифти — те, що випадково встановлено на чиємусь ноутбуці, кожен новий допис — шанс, що помаранчевий зʼїде на кілька відтінків або заголовок упаде на шрифт за замовчуванням.
Відповідь, на якій зійшлися програми для дизайну, — стилі: іменовані кольори й іменовані налаштування тексту, до яких привʼязуються шари, тож одна зміна доходить до кожного дизайну. У цьому посібнику — як бренд розповзається, як команди його бережуть сьогодні, як налаштувати стилі, що тримаються, а тоді спосіб Paletoo на дописі обсмажувальні кави, де десять кольорів і шрифти вже оформлено стилями.
Як бренд розповзається
Розповзання рідко буває однією великою помилкою. Колір узяли на око зі скриншоту — і він на відтінок інший. Допис скопіювали з минуломісячного — і старий помаранчевий переїхав разом із ним. На новому компʼютері бракує шрифту — і його тихо підмінив інший. Сторіз зробили з допису й підігнали розмір вручну — і заголовок вийшов трохи тоншим за оригінал. Кожна зміна дрібна, а разом вони роблять стрічку схожою на три різні бренди.
Біль росте разом із форматами й людьми. Бренду, що живе в дописах, сторіз, каруселях і друці, потрібні ті самі пʼять кольорів і два шрифти всюди, а кожному, хто відкриває файл, — під рукою, просто у файлі, а не в гайдлайні, який треба ще знайти.
Як команди бережуть бренд сьогодні
Класична відповідь — брендбук: логотип, коди кольорів, шрифти й правила, як ними користуватися. Це довідник, з яким усі згодні, але він не завадить нікому ввести не той код.
Програми для дизайну додають контроль. У Canva є Brand Kit для логотипів, кольорів і шрифтів; у Figma — стилі кольору й тексту, змінні й спільні бібліотеки; програми Adobe ділять кольори й стилі символів через Creative Cloud Libraries. Усі вони стоять на одній ідеї — іменоване спільне значення замість вставленого вручну — і всі працюють рівно настільки, наскільки шари в дизайні справді привʼязані до цих значень, а не просто пофарбовані в той самий колір.
Як налаштувати стилі кольору й тексту бренду, щоб вони трималися
Тримайте палітру маленькою й названою: кілька кольорів із чіткою роботою — основний, акцент, фон, колір тексту — плюс кілька тихіших тонів для приміток і ліній. Називайте їх так, щоб колега зрозумів з першого погляду, а головним дайте ролі: коли палітра зміниться, усі знатимуть, який колір — акцент.
А тоді привʼязуйте, а не фарбуйте. Шар із правильним hex-кодом сьогодні виглядає правильно, але завтрашньої зміни не підхопить; шар, привʼязаний до стилю, — підхопить. Так само з текстом: стиль тексту на кожен рівень — дисплейний, заголовок, основний текст, підпис — зі шрифтом, розміром, інтервалом і товщиною. Тримайте файли шрифтів разом із брендом і з ліцензією на ваш спосіб використання, щоб дизайн ніколи не падав на заміну. І перевірте все один раз: змініть один стиль і подивіться, як за ним іде кожен дизайн.
Зроблено в Paletoo
Усі зображення на цій сторінці зроблено в Paletoo — ці три тими самими кроками на інших шаблонах:
Як це зробити в Paletoo
Натисніть «Відкрити в Paletoo», і допис обсмажувальні «Fresh roast weekly» відкриється як ваш власний документ; потім клацніть порожнє місце на полотні, щоб нічого не було вибрано.
Коли нічого не вибрано, вкладка Дизайн показує сам документ: Шрифти, Стилі кольору й Стилі тексту. Цей бренд тримає десять стилів кольору — Roast, Terracotta, Oat, Ink, Caramel і пʼять тихіших тонів, — і пʼять із них мають Роль: Основний, Акцент, Фон, Текст і Додатковий.
Допис обсмажувальні відкрито в Paletoo, нічого не вибрано: вкладка «Дизайн» показує Шрифти, Стилі кольору й Стилі тексту документа Клацніть заголовок «FRESH ROAST WEEKLY». У рядку Заливка замість hex-коду — назва стилю, Roast: колір привʼязано. Клацніть назву, щоб перемкнути на інший стиль, або натисніть Відʼєднати стиль, щоб знову зробити його звичайним кольором. У секції Типографіка текст привʼязано так само — до стилю тексту Serif 224, тобто Piazzolla завтовшки 900.
Заголовок вибрано: у «Заливці» — стиль кольору Roast, у «Типографіці» — стиль тексту Serif 224 Знову клацніть порожнє полотно, а тоді рядок у Стилі кольору — скажімо, Terracotta, — щоб відкрити Редагувати стиль кольору. Змініть колір — і всі привʼязані шари підуть за ним одразу: зернятко логотипа, рядок над заголовком і кнопка. У меню ⋯ рядка є Задати роль…, Виділити все з цим стилем і Дублювати стиль.
Зблизька: секція «Стилі кольору» — десять іменованих кольорів, пʼять із них з роллю Щоб пересунути всю палітру, відкрийте Замінити кольори бренду… значком у заголовку секції або через Ctrl K. Кожен стиль отримує поле Новий колір; задайте потрібні й натисніть Замінити. У групі Схожі кольори зібрано заливки й обведення, близькі до стилю, але не привʼязані до нього, а Повʼязати всі привʼязує їх.
Із текстом так само. Змініть привʼязаному тексту розмір чи інтервал — і стиль покаже зміну: Скинути до стилю поверне як було, а кнопка оновлення поруч занесе зміну в сам стиль, і за ним зміниться кожен текст із цим стилем. Секція Шрифти показує всі гарнітури документа й уміє замінити одну скрізь — у кожному тексті й кожному стилі тексту.
Для власного шрифту виберіть текст, відкрийте Переглянути шрифти й натисніть Завантажити шрифти — підійдуть файли TTF, OTF, WOFF чи WOFF2; вони зʼявляться в Мої шрифти. Для команди ввійдіть, покладіть у команду файл зі стилями бренду й виберіть у його меню Зробити бренд-кітом: його стилі кольору й тексту та компоненти зʼявляться в Ресурси в кожному файлі команди, а Узяти всі стилі перенесе їх у файл, де ви працюєте.
Зробіть по-своєму
Ролі роблять зміну палітри безпечною. Дайте кожному головному стилю Роль — Основний, Додатковий, Акцент, Фон чи Текст — через Задати роль… у його меню; якщо назва стилю вже про це каже, як-от «Accent», редактор сам запропонує роль. Тихіші тони лишайте без ролі, як ця палітра лишає Mocha, Latte, Foam, Line і Cream.
Звична шпарина — файли, зроблені ще до стилів. Відкрийте Замінити кольори бренду… й подивіться в Схожі кольори: там непривʼязані заливки й обведення в межах ΔE 6 від стилю — достатньо близькі, щоб їх явно мали на увазі, — і нічого не зміниться, доки ви їх не привʼяжете. Повʼязати всі привʼязує їх до найближчого стилю, і відтоді заміна кольору дістається й до них.
Для інших форматів виберіть артборд і натисніть Створити всі формати або виберіть один розмір у Копія в іншому форматі: копії лежать у тому самому документі й лишаються привʼязаними, тож одна зміна стилю перефарбовує допис, сторіз і решту разом. Адміністратор команди може піти далі — Зробити бренд-шаблоном файл команди: тоді учасники працюють зі своєю копією й міняють лише те, що шаблон відкриває, — слова, зображення, колір із його стилів чи шрифт зі шрифтів команди.
Шаблони з цим ефектом
Запитання
Чим стиль кольору відрізняється від зразка кольору?
Зразок — це колір, який ви вибираєте; стиль кольору — іменований колір, до якого привʼязуються шари. Змініть стиль — і зміниться кожна привʼязана заливка й обведення.
Чи можна користуватися власними шрифтами бренду?
Так. Завантажте файли TTF, OTF, WOFF чи WOFF2: вони зберігаються у вашому браузері в «Мої шрифти», а файл .paletoo, який ви зберігаєте, бере їх із собою. Команда може ще й ділитися шрифтами, ліцензія яких дозволяє вбудовування.
Як змінити колір бренду в багатьох дизайнах одразу?
У межах документа відредагуйте стиль кольору або скористайтеся заміною кольорів бренду: кожен привʼязаний шар на кожному артборді піде слідом. Для окремих файлів бренд-кіт команди тримає актуальні стилі в одному місці, а «Узяти всі стилі» переносить їх у файл, з яким ви працюєте.
Що буде, якщо шрифту бренду бракує?
Секція «Шрифти» каже, яких шрифтів бракує, і пропонує «Замінити», тож заміну вибираєте ви, а не випадок. Вікно «Експорт» теж назве текст, намальований шрифтом-заміною, ще до експорту.
Чи потрібна для цього команда?
Ні. Стилі кольору, стилі тексту, власні шрифти й заміна кольорів бренду працюють у будь-якому документі без облікового запису. Команди, для яких треба ввійти, додають спільний бренд-кіт і шрифти команди.
Зробити онлайн
- Зробіть логотип онлайнЗробіть логотип онлайн безкоштовно: зберіть знак чи емблему зі справжніх шрифтів і фігур і заберіть собі чіткий векторний SVG чи PDF.
- Дописи для Instagram онлайнШаблони дописів для Instagram, які легко зробити своїми: потрібний розмір, ваші слова й фото, чіткий PNG чи JPG — безкоштовно, просто в браузері.
Безкоштовні шаблони для дизайну: Шаблони брендбуків · Шаблони дописів для соцмереж
Читайте далі
Безшовна карусель в Instagram, що збігається на кожному розрізі
Один широкий артборд, зображення крізь розрізи й окремий файл на кожен слайд.
Альтернатива Canva для дизайнерів: справжня типографіка й друк
Швидкий старт із шаблону — і всі інструменти, на які розраховує дизайнер.
Як зробити візитку з QR-кодом
Правильний розмір, ваші дані, QR-код, що сканується, і PDF для друкарні.
Спробуйте на своєму дизайні
Paletoo відкривається в браузері, без реєстрації. Кожен ефект тут живий: замініть фото чи слова — і ефект підлаштується.
Відкрити в Paletoo