Photoshop і ImageReady створюють динамічні логотипи для Composition Notebooks With Pen

Aug 31, 2023

Залишити повідомлення

Під час створення особистого веб-сайту добре розроблений динамічний логотип завжди може додати багато кольору сторінці. Можливо, деякі друзі бачили логотип навколо тонкого кола з пунктирними лініями навколо ефекту повільного повзучого логотипу, не бачили друзів, дивіться тут:

1. Розширити розміри полотна.

Після відкриття файлу логотипу зображення має лише один фоновий шар, і оскільки нам потрібен його контур, ми не можемо розширити полотно безпосередньо на цьому шарі. На панелі «Шари» двічі клацніть порожню область праворуч від фонового шару та натисніть «ОК» у спливаючому діалоговому вікні, щоб перетворити фоновий шар на шар 0. Двічі клацніть назву шару та назвіть його «Лого». Утримуючи клавішу Ctrl, натисніть кнопку «Новий шар» у нижній частині панелі. Створіть новий шар, Шар 1, під шаром «Логотип». Потім виберіть команду меню «Зображення→Розмір полотна», змініть одиницю вимірювання довжини на «Пікселі» в діалоговому вікні, установіть прапорець «Відносна», збільште ширину та висоту на 40 пікселів і збережіть стандартну середину прив’язки.

Результатом цього кроку є збільшення розміру полотна на 20 пікселів у всіх чотирьох напрямках, що відкриває простір для наступного кроку.

2. Створіть візерунки для заповнення фону.

Використовуйте команду меню «Файл→Новий», щоб створити файл розміром 8×8 пікселів білим кольором пера. Щоб мати можливість переглядати, ми можемо натиснути Ctrl+"+" кілька разів, щоб зробити перегляд файлу достатньо великим для легкого маніпулювання. Виберіть інструмент прямокутного виділення (клавіша швидкого доступу M), намалюйте квадратну рамку розміром 4 пікселя у верхньому лівому куті, утримуйте клавішу Shift і додайте таку саму рамку в нижньому правому куті. Переконайтеся, що поточний колір переднього плану чорний за замовчуванням, якщо це не так, ви можете натиснути клавішу D, щоб відновити його до стандартного. Натисніть Alt+BackSpace, щоб залити виділення чорним кольором переднього плану, а потім натисніть Ctrl+D, щоб скасувати виділення.

Виберіть команду меню «Правка→Визначити візерунок», у діалоговому вікні назвіть новий візерунок «Чорні та білі квадрати» та натисніть кнопку OK, щоб зберегти настроюваний шаблон.

3. Зробіть пунктирну рамку.

Поверніться до файлу, де знаходиться логотип, на панелі «Шари» виберіть шар «Шар 1» нижче, потім виберіть команду меню «Правка→Заливка», виберіть «Візерунок» у діалоговому вікні, виберіть «чорно-білий». квадрат", який ми щойно налаштували в розкривному списку нижче, а решту параметрів залишили типовими.

Після визначення шар Layer 1 буде заповнений щільними регулярними чорними та білими квадратами

На панелі «Шари» натисніть кнопку «Новий шар» у нижній частині панелі, щоб створити порожній шар, «Шар 2». Утримуйте клавішу Ctrl і клацніть на шарі «Логотип», щоб завантажити його контур як виділення. Виберіть команду меню «Вибрати→Змінити→Розгорнути”, введіть 1 у діалоговому вікні, натисніть кнопку OK, і виділення розшириться на один піксель. Натисніть Ctrl+Shift+I, щоб змінити вибір. Переконайтеся, що поточний шар є шаром 2, натисніть Ctrl+BackSpace і заповніть виділення білим фоновим кольором. Назвіть шар шару 2 «White Edge». Натисніть Ctrl+D, щоб скасувати вибір, і ви побачите пунктирну рамку навколо логотипа.

4. Зробіть пунктирні лінії з кожного боку незалежними одна від одної.

Читачі, мабуть, бачили, що так, ця пунктирна лінія є підробкою, це димова завіса, яка пропускає фоновий візерунок через відкриту частину шириною 1 піксель, якщо її важко змусити рухатися. Що робити? Ми продовжуємо використовувати дим і дзеркала -- чотири фони для кожної сторони. На панелі «Шари» перетягніть шар 1 на кнопку «Новий шар» у нижній частині панелі та створіть нову копію шару 1 цього шару. Повторіть ще дві копії, щоб отримати чотири однакових шари з малюнком «чорно-білі квадрати». Виберіть інструмент виділення пікселя в одному стовпці, збільште вигляд зображення до відповідного масштабу, один раз клацніть пунктирну лінію ліворуч від логотипу та виберіть усі лінії, де розташована пунктирна лінія. На панелі «Шари» виберіть «Шар1» і натисніть кнопку «Додати маску шару» внизу панелі. Результатом буде майже повністю чорна маска для цього шару, біла лише на лінії, де пунктирна лінія знаходиться ліворуч від логотипу, тобто шар Layer1 буде видно лише на цій лінії. Далі, використовуючи той самий принцип, виділіть пунктирні лінії над, праворуч і під логотипом, використовуючи інструменти виділення пікселів з одним рядком і одним стовпцем відповідно, і по черзі додайте маски до решти трьох шарів візерунка. У цей час логотип не змінюється з поверхні, фактично пунктирна лінія навколо нього вже складається з чотирьох частин. Ви можете приховати шар і перевірити, чи це так. Назвіть чотири шари візерунка «ліворуч», «вгору», «праворуч» і «вниз» відповідно до їхніх відповідних частин.

5. Перемістіть пунктирну лінію в ImageReady.

Тепер, коли ми закінчили нашу підготовку, давайте перейдемо до анімації в ImageReady. Якщо натиснути кнопку переходу внизу панелі інструментів, ImageReady автоматично запуститься та автоматично завантажить файл, який ми щойно підготували, з усіма шарами та масками, як вони є. На панелі «Анімація» можна побачити, що поточне зображення автоматично стає першим кадром анімації. Натисніть кнопку «Копіювати поточний кадр», щоб створити другий кадр, ідентичний першому.

Виберіть інструмент «Переміщення». На панелі «Шари» виберіть шар «Ліворуч» і натисніть кнопку зі стрілкою ↑, щоб перемістити його на один піксель вгору. Потім перемістіть шар «вгору» на один піксель праворуч, шар «праворуч» на один піксель вниз і шар «вниз» на один піксель ліворуч. На зображенні виглядає так, ніби пунктирна коробка звивається за годинниковою стрілкою. Скопіюйте кадр 2 як кадр 3 на панелі «Анімація» та використайте той самий метод, щоб знову перемістити пунктирну рамку за годинниковою стрілкою. Повторюйте процес, доки кадр 8 не буде завершено. Основною одиницею шаблону, який ми створили в попередньому розділі, є 8 пікселів, які переміщуються на 1 піксель на кадр, і його можна повторити лише після 8 кадрів.

6. Остаточні налаштування.

Налаштування за замовчуванням для ImageReady становить {{0}} секунд на кадр, нам потрібно змінити це число. На панелі «Анімація» клацніть кадр 1, щоб вибрати його, потім, утримуючи клавішу Shift, клацніть кадр 8, щоб вибрати всі 8 кадрів. Клацніть розкривне меню «Час затримки» під будь-яким кадром і виберіть 0.1seconds, щоб час затримки для всіх кадрів було змінено на 0,1 секунди.

Відповідно до конкретних потреб ми також можемо змінити білий край за межами пунктирної лінії на інші кольори або обрізати його, щоб краще адаптуватись до потреб веб-дизайну та виробництва.

Гаразд, анімацію зроблено. Розумні читачі побачили, що весь процес цього підручника полягає в досягненні візуального обману, якщо ідея зрозуміла, процес виробництва надзвичайно простий. Поки ми відкриваємо наші ідеї, той самий приклад також може створити різноманітні звивисті способи кадрування пунктирною лінією.

Кінцевий результат такий:

Слід зазначити, що на кроці 5 ви можете скопіювати другий кадр і безпосередньо перемістити кожну частину на 7 пікселів, а потім вибрати Tween у меню функцій панелі «Анімація», і програмне забезпечення автоматично згенерує середні 6 кадрів — це може бути зручніше , але це не так легко зрозуміти, як рух кадр за кадром.