Photoshop и ImageReady правят динамични лога за композиционни тетрадки с писалка

Aug 31, 2023

Остави съобщение

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

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

След отваряне на файла с логото изображението има само един фонов слой и тъй като се нуждаем от контура му, не можем да разширим платното директно върху този слой. В панела със слоеве щракнете двукратно върху празната област вдясно от фоновия слой и щракнете върху OK в изскачащия диалогов прозорец, за да конвертирате фоновия слой в слой 0. Щракнете двукратно върху името на слоя и го наименувайте „Лого“. Задръжте натиснат клавиша Ctrl и щракнете върху бутона Нов слой в долната част на панела. Създайте нов слой, Layer 1, под слоя "Logo". След това изберете командата от менюто "Image→Canvas Size", променете единицата за дължина на Pixels в диалоговия прозорец, поставете отметка в квадратчето Relative, увеличете Width и Height с 40 пиксела и запазете средата по подразбиране на Anchor.

Резултатът от тази стъпка е, че платното е с 20 пиксела по-голямо във всичките четири посоки, което отваря място за следващата стъпка.

2. Създайте шаблони за запълване на фона.

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

Изберете командата от менюто "Редактиране→Дефиниране на шаблон", наименувайте новия шаблон "Черни и бели квадратчета" в диалоговия прозорец и натиснете бутона OK, за да запазите персонализирания шаблон.

3. Направете поле с точки.

Върнете се във файла, където се намира логото, в панела със слоеве, изберете слоя Layer 1 по-долу, след това изберете командата от менюто „Edit→Fill“, изберете „Pattern“ в диалоговия прозорец, изберете „black and white“ квадратен" модел, който току-що персонализирахме в падащия списък по-долу, и запазим останалите опции по подразбиране.

След като бъде определен, слой 1 ще бъде запълнен с плътни, правилни черни и бели квадрати

В панела със слоеве щракнете върху бутона Нов слой в долната част на панела, за да създадете празен слой, слой 2. Задръжте натиснат клавиша Ctrl и щракнете върху слоя "Лого", за да заредите очертанията му като селекция. Изберете командата от менюто "Select→Modify→Expand", въведете 1 в диалоговия прозорец, натиснете бутона OK и селекцията ще се разшири навън с един пиксел. Натиснете Ctrl+Shift+I, за да обърнете селекцията. Потвърдете, че текущият слой е слой 2, натиснете Ctrl+BackSpace и запълнете селекцията с бял цвят на фона. Наименувайте слоя 2 "White Edge". Натиснете Ctrl+D, за да премахнете отметката и ще видите пунктирана кутия около логото.

4. Направете пунктираните линии от всяка страна независими една от друга.

Читателите трябва да са видели, че да, тази пунктирана линия е фалшива, тя е димна завеса, е да пропуснете фоновия модел през открита част с ширина 1 пиксел, ако е трудно да го накарате да се движи. Какво да правя? Продължаваме да използваме дим и огледала -- четири фона за всяка страна. В панела със слоеве плъзнете слой 1 върху бутона Нов слой в долната част на панела и създайте ново копие на слой 1 на този слой. Повторете още две копия, за да получите четири еднакви слоя с модела "черни и бели квадрати". Изберете инструмента за избор на пиксел в една колона, увеличете изгледа на изображението до подходящия мащаб, щракнете еднократно върху пунктираната линия от лявата страна на логото и изберете всички линии, където се намира пунктираната линия. В панела със слоеве изберете Layer1 и щракнете върху бутона Add Layer Mask в долната част на панела. Резултатът ще бъде почти изцяло черна маска за този слой, бяла само на линията, където пунктираната линия е отляво на логото, което означава, че слой 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 кадъра - това може да е по-удобно , но не е толкова лесно за разбиране, колкото движението кадър по кадър.