Programy Photoshop i ImageReady tworzą dynamiczne logo dla notesów Composition z piórem

Aug 31, 2023

Zostaw wiadomość

Budując osobistą stronę internetową, dobrze zaprojektowane, dynamiczne logo zawsze może dodać dużo koloru do strony. Być może niektórzy znajomi widzieli logo wokół cienkiego okręgu kropkowanych linii wokół efektu powoli pełzającego logo, nie widzieli znajomych, zobacz tutaj:

1. Zwiększ rozmiar płótna.

Po otwarciu pliku Logo obraz ma tylko jedną warstwę tła, a ponieważ potrzebujemy jego konturu, nie możemy rozciągać płótna bezpośrednio na tę warstwę. W panelu Warstwy kliknij dwukrotnie pusty obszar po prawej stronie warstwy tła i kliknij OK w wyskakującym oknie dialogowym, aby przekonwertować warstwę tła na warstwę 0. Kliknij dwukrotnie nazwę warstwy i nadaj jej nazwę „Logo”. Przytrzymaj klawisz Ctrl i kliknij przycisk Nowa warstwa u dołu panelu. Utwórz nową warstwę, warstwę 1, pod warstwą „Logo”. Następnie wybierz polecenie menu „Obraz → Rozmiar płótna”, w oknie dialogowym zmień jednostkę długości na Piksele, zaznacz pole wyboru Względny, zwiększ szerokość i wysokość o 40 pikseli i zachowaj domyślny środek Kotwicy.

W wyniku tego kroku płótno jest o 20 pikseli większe we wszystkich czterech kierunkach, co otwiera przestrzeń na następny krok.

2. Utwórz wzory, aby wypełnić tło.

Użyj polecenia menu „Plik → Nowy”, aby utworzyć plik o wymiarach 8 × 8 pikseli z białym pisakiem. Aby móc zobaczyć, możemy nacisnąć Ctrl+"+" kilka razy, aby widok pliku był wystarczająco duży i umożliwiał łatwą manipulację. Wybierz Narzędzie Zaznaczanie prostokąta (klawisz skrótu M), narysuj kwadratowe pole o wielkości 4 pikseli w lewym górnym rogu, przytrzymaj klawisz Shift i dodaj to samo pole w prawym dolnym rogu. Upewnij się, że bieżący kolor pierwszego planu jest domyślnie czarny. Jeśli tak nie jest, możesz nacisnąć klawisz D, aby przywrócić go do ustawień domyślnych. Naciśnij klawisze Alt+BackSpace, aby wypełnić zaznaczenie czarnym kolorem pierwszego planu, a następnie naciśnij klawisze Ctrl+D, aby usunąć zaznaczenie.

Wybierz polecenie menu „Edycja → Zdefiniuj wzór”, w oknie dialogowym nazwij nowy wzór „Czarno-białe kwadraty” i naciśnij przycisk OK, aby zapisać niestandardowy wzór.

3. Zrób kropkowane pudełko.

Wróć do pliku, w którym znajduje się Logo, na panelu Warstwy wybierz warstwę Warstwa 1 poniżej, następnie wybierz polecenie menu „Edycja → Wypełnienie”, w oknie dialogowym wybierz opcję „Wzór”, wybierz opcję „czarno-biały kwadratowy”, który właśnie dostosowaliśmy na poniższej liście rozwijanej, a pozostałe opcje pozostały domyślne.

Po określeniu warstwa 1 zostanie wypełniona gęstymi, regularnymi czarno-białymi kwadratami

W panelu Warstwy kliknij przycisk Nowa warstwa na dole panelu, aby utworzyć pustą warstwę, Warstwa 2. Przytrzymaj klawisz Ctrl i kliknij warstwę „Logo”, aby wczytać jej kontur jako zaznaczenie. Wybierz polecenie menu „Wybierz → Modyfikuj → Rozwiń”, wpisz 1 w oknie dialogowym i naciśnij przycisk OK, a zaznaczenie rozszerzy się o jeden piksel. Naciśnij Ctrl+Shift+I, aby odwrócić zaznaczenie. Upewnij się, że bieżąca warstwa to warstwa 2, naciśnij Ctrl+BackSpace i wypełnij zaznaczenie białym kolorem tła. Nazwij warstwę warstwy 2 „Biała krawędź”. Naciśnij Ctrl+D, aby odznaczyć zaznaczenie. Wokół logo zobaczysz kropkowaną ramkę.

4. Uniezależnij linie przerywane po obu stronach od siebie.

Czytelnicy musieli to zauważyć, tak, ta przerywana linia jest fałszywa, jest to zasłona dymna, polegająca na przepuszczeniu wzoru tła przez odsłoniętą część o szerokości 1 piksela, jeśli trudno jest go poruszyć. Co robić? Nadal używamy dymu i luster -- po cztery tła dla każdej strony. Na panelu Warstwy przeciągnij Warstwę 1 na przycisk Nowa warstwa na dole panelu i utwórz nową kopię tej warstwy w warstwie 1. Powtórz dwie kolejne kopie, aby uzyskać cztery identyczne warstwy ze wzorem „czarno-białe kwadraty”. Wybierz narzędzie do selekcji pikseli w pojedynczej kolumnie, powiększ widok obrazu do odpowiedniej skali, kliknij jednokrotnie linię przerywaną po lewej stronie Logo i zaznacz wszystkie linie, w których znajduje się linia przerywana. W panelu Warstwy wybierz Warstwa 1 i kliknij przycisk Dodaj maskę warstwy u dołu panelu. Rezultatem będzie prawie całkowicie czarna maska dla tej warstwy, biała tylko na linii, gdzie przerywana linia znajduje się po lewej stronie Logo, co oznacza, że warstwa Warstwa 1 będzie widoczna tylko na tej linii. Następnie, stosując tę samą zasadę, zaznacz kropkowane linie powyżej, po prawej i poniżej Logo, korzystając odpowiednio z jednorzędowych i jednokolumnowych narzędzi do zaznaczania pikseli, a następnie dodaj maski kolejno do pozostałych trzech warstw wzoru. W tym momencie logo nie zmienia się w stosunku do powierzchni, w rzeczywistości kropkowana ramka wokół niego składa się już z czterech części. Możesz ukryć warstwę i sprawdzić, czy tak jest. Nazwij cztery warstwy wzoru „w lewo”, „w górę”, „w prawo” i „w dół” zgodnie z odpowiadającymi im częściami.

5. Przesuń przerywaną linię w ImageReady.

Teraz, kiedy już zakończyliśmy przygotowania, przejdźmy do animacji w ImageReady. Po naciśnięciu przycisku skoku na dole przybornika ImageReady automatycznie uruchomi się i automatycznie załaduje właśnie przygotowany plik, ze wszystkimi warstwami i maskami w niezmienionej postaci. Na panelu Animacja widać, że bieżący obraz automatycznie staje się pierwszą klatką animacji. Kliknij przycisk Kopiuj bieżącą klatkę, aby utworzyć drugą klatkę identyczną z pierwszą.

Wybierz narzędzie Przesuń. W panelu Warstwy wybierz warstwę „W lewo” i naciśnij przycisk strzałki ↑, aby przesunąć ją o jeden piksel w górę. Następnie przesuń warstwę „w górę” o jeden piksel w prawo, warstwę „w prawo” o jeden piksel w dół, a warstwę „w dół” o jeden piksel w lewo. Z obrazka wynika, że kropkowane pole wije się w kierunku zgodnym z ruchem wskazówek zegara. Powiel klatkę 2 jako klatkę 3 w panelu Animacja i użyj tej samej metody, aby ponownie przesunąć kropkowane pole w prawo. Powtarzaj ten proces, aż klatka 8 zostanie ukończona. Podstawową jednostką wzoru, który zrobiliśmy w poprzedniej sekcji, jest 8 pikseli, przesuwających się o 1 piksel na klatkę i można go powtórzyć już po 8 klatkach.

6. Ustawienia końcowe.

Domyślne ustawienie ImageReady to {{0}} sekund na klatkę, musimy zmienić tę liczbę. Na panelu Animacja kliknij Klatkę 1, aby ją zaznaczyć, a następnie przytrzymaj klawisz Shift i kliknij klatkę 8, aby zaznaczyć wszystkie 8 klatek. Kliknij menu rozwijane czasu zatrzymania pod dowolną klatką i wybierz opcję 0.1 sekundy, aby czas zatrzymania wszystkich klatek został zmieniony na 0,1 sekundy.

W zależności od konkretnych potrzeb możemy również zmienić białą krawędź poza ramką linii przerywanej na inny kolor lub ją obciąć, aby lepiej dostosować się do potrzeb projektowania i produkcji stron internetowych.

OK, animacja gotowa. Inteligentni czytelnicy zauważyli, że cały proces opisany w tym samouczku ma na celu osiągnięcie wizualnego oszustwa, o ile pomysł jest jasny, proces produkcji jest niezwykle prosty. Tak długo, jak otworzymy nasze pomysły, ten sam przykład może również stworzyć różne wijące się sposoby ramki z linią kropkowaną.

Ostateczny wynik jest następujący:

Należy zaznaczyć, że w kroku 5 można skopiować drugą klatkę i bezpośrednio przesunąć każdą część o 7 pikseli, a następnie w menu funkcji panelu Animacja wybrać opcję Animacja, a program automatycznie wygeneruje 6 środkowych klatek – może to być wygodniejsze , ale nie jest to tak łatwe do zrozumienia, jak ruch klatka po klatce.