Хочете унікальну аватарку для щоденника / форуму? Ніде не знайти саме те, що потрібно? Бажаєте вразити відвідувачів анімованими елементами дизайну на вашому веб-сайті? Створіть свою власну анімовану gif картинку (або навіть серію), використовуючи продукти з лінійки Adobe Photoshop. Повірте, це дійсно легко, впорається навіть починаючий.
Вам знадобиться:
– Adobe Photoshop по ідеї будь-якої версії, від 5.5;
– Adobe ImageReady (йде в комплекті з Photoshop).
Створюємо кілька картинок, щоб зібрати з них анімований gif:
1. Відкрийте Photoshop і створіть новий порожній файл відповідного розміру: як правило, в сервісах соцмереж і на форумах допускаються аватари розміром 80х80, 100х100, 200х200 і в рідкісних випадках 250х250. Виберіть один з цих розмірів, встановіть режим кольору RGB. Якщо ви маєте намір створити рухому картинку, фоном для якої послужить фон сайту / форуму, відзначте тут так само прозорий (transparent) фон. Але пам’ятайте, що тільки деякі фігурки виходить вирізати з картинок настільки акуратно, щоб прибрати білясті (і іншого кольору) обриси, так що подумайте, все-таки задавши фіксований фон майбутньої аватарі або банеру ви значно полегшите собі життя.
2. Виберіть у меню пункт «Window» (Показати – інструменти / панелі) і в списку, що розкрився відзначте галочкою пункт «Layers» (Показати панель «шари»). Найчастіше галочка вже стоїть, тобто показ панелі заданий за замовчуванням.
3. Виберіть в лівій вузької панелі інструмент Олівець (Pensil) і намалюйте з його допомогою картинку. Там же є кисть, якщо орудувати нею вам буде зручніше. Щоб переключитися між інструментами, натисніть на квадратик, утримуючи кнопку миші в натиснутому стані, переведіть курсор на потрібний елемент у випадаючому поруч списку і відпустіть.
Як варіант, можна нарізати необхідних об’єктів із знайдених в Інтернеті картинок, використовуючи ласо і всі його аналоги із списку (Lasso Tool),
виділення квадратом і кругом (всі варіанти зі списку Marquee Tool),
чарівну паличку (Magic Wand Tool),
функцію копіювання і вставки виділеного (після виділення, в меню вибирайте: Edit-> Copy, потім у створеному вами новому файлі Edit-> Paste) і гумку, щоб прибрати зайве. Зменшуйте або збільшуйте, нахиляйте, відображуйте або повертайте скопійоване картинку за своїм бажанням за допомогою Edit-> Free Transform і Edit-> Transform.
Або можна зробити напис на потрібному тлі за допомогою Type Tool, і потім, використовуючи фільтри, вносити зміни на нових шарах для отримання рухомої картинки в кінцевому підсумку; або зробити так, щоб на кожному новому шарі з’являлося по 1 нової букві або новому слову.
4. Натисканням правої кнопки миші на виділеному вихідному шарі виберіть у панелі інструментів «Шари» пункт «Дублювати шар» (Duplicate Layer). Виділіть новий створений шар, якщо цього не відбулося автоматично. І потім, після роботи, щоразу копіюйте останній шар із внесеними змінами (або перший, якщо за задумом вам потрібен саме він).
5. Внесіть на новому шарі якісь зміни в картинку: щось додайте (наприклад, новий об’єкт або букви), щось приберіть (ластиком), зменшите / збільште загальний розмір, поміняйте колір якоїсь деталі, освітлити / затемните картинку в цілому (в меню Image-> Adjustments-> Brightness / Contrast; таким чином, ви зможете домогтися того, що ваша картинка буде блимати при зміні в gif файлі світлої та темної картинок), і т. д.
,
,File->
Jump To-> Adobe ImageReady “height =” 473 “src =” http://www.znaikak.ru/design/pic/visred/Untitled-3112.jpg “width =” 450 “/>
Створюємо анімовану картинку в Adobe ImageReady:
Сама панель Анімація
Результат
На даній картинці якраз показаний результат невірної роботи, коли при створенні файлу і його шарів у Photoshop не враховувався той факт, що кожен новий шар-кадр в gif буде повністю зміняти попередній, а не накладати доповнення на вихідну картинку. Насправді на кожному з 4-х кадрів вище повинен бути кульбаба, і на кожному наступному кадрі все, що було зображено на попередньому.
2.а. В панелі Анімації під кожним кадром вказано час у секундах – його потрібно поміняти, якщо ви хочете, що кадри змінювалися із затримкою, а не моментально, тобто щоб кожен кард затримувався перед смотрящим на вказане вами кількість секунд. Просто натисніть на напис і встановіть при бажанні потрібний час.
3. У меню виберіть: File-> Save Optimized As (Зберегти оптимізований файл як …) і далі виберіть папку та ім’я для збереження анімованого gif файлу.
3.а. Після будь-якої зміни файлу в Photoshop (е) обов’язково заново повторюйте перекидання файлу File-> Jump To-> Adobe ImageReady, інакше всі налаштування в ImageReady зіб’ються в щось незрозуміле.
Ось така у нас вийшла картинка
– Додатки:
– В принципі, малювати можна і в ImageReady, т. к. панелі інструментів у них з Photoshop схожі;
– На панелі Анімації, внизу, під кадрами, є стандартні кнопки управління відео – натиснувши на стрілку, можна запустити превью, і подивитися, як виглядатиме ваша gif картинка;
