Nagłówek strony w Photoshopie

• Może 20, 2024

W tym samouczku zbudujemy nagłówek witryny w programie Photoshop^R które będziemy animować we Flashu^R Katalizator^TM. Animacja zaczyna się od pustego tła, a elementy projektu przesuwają się, aby „zbudować” nagłówek na naszych oczach. Animacja zostanie zaprogramowana tak, aby zaczynała się „pod obciążeniem” i będzie trwać zaledwie kilka sekund. Ten nagłówek strony będzie przeznaczony dla prawdziwego biznesu z życzeniami.

Naszym pierwszym krokiem jest zbudowanie nagłówka w Photoshopie. Każdy element projektu umieścimy na osobnej warstwie w ramach przygotowań do pracy z nim w programie Flash Catalyst. Jak widać, będziemy mieli 6 elementów projektu.

1. Tło
2. Dolny pasek na całej szerokości nagłówka
3. Nazwa firmy
4. Karta urodzinowa
5. Karta dyniowa
6. Kartka świąteczna

1. Zacznijmy nowy projekt w Photoshopie. Ustaw szerokość na 1000 pikseli, wysokość na 225 pikseli, a tło na przezroczyste. Ten rozmiar będzie dobrze pasował na górze naszej strony.
   
   
2. Jedynym elementem, który będzie widoczny na początku animacji, jest białe tło. Wypełnij pierwszą warstwę obrazu wybranym kolorem tła. W panelu Warstwy zmień nazwę tej warstwy na „Tło”.
   
   
3. Aby utworzyć zacienioną krawędź, użyłem stylu warstwy cienia wewnętrznego. Kliknij dwukrotnie warstwę tła i zaznacz pole obok Cień wewnętrzny. Ustaw Odległość i Dławik na 0, a Rozmiar na 49.
   
   
4. Następnie dodamy cienką ramkę wokół obrazu za pomocą stylu warstwy obrysu. Ustawiłem Kolor na brązowy (# 6e674f), Rozmiar na 2, a Pozycja na Wewnątrz.
   
   Następnie dodamy karty. Zmniejszyłem rozmiar moich kart okolicznościowych do 230 x 175 pikseli. Dzięki temu będą proporcjonalne do wielkości nagłówka.
   
   
5. Skopiujmy / wklejmy kartę dyni do naszego nagłówka. Nazwij nową warstwę „Dynia”. Kliknij Edycja - dowolna transformacja, aby nieznacznie obrócić kartę w prawo. Kliknij warstwę Dynia i zastosuj styl Warstwa cienia, zachowując ustawienia domyślne.
   
   
6. Powtórz ostatni krok dla karty Urodziny i kartki świąteczne.
   
   Następnie dodamy pasek u dołu nagłówka. Umieścimy nasze karty za tym paskiem, aby emulować karty na półce.
   
   
7. Dodaj nową warstwę do panelu Warstwy i nazwij ją „Pasek”.
   
   
8. Za pomocą narzędzia Prostokątna ramka zaznacz dolny obszar nagłówka tuż za brązową ramką. Wybierz kolor paska i wypełnij zaznaczenie tym kolorem.
   
   
9. Kliknij dwukrotnie warstwę i dodaj styl warstwy obrysu, tak jak zrobiłeś to z warstwą tła.
   
   
10. Kliknij narzędzie Typ poziomy i wybierz czcionkę dla nazwy swojej firmy. Użyłem tego samego brązowego koloru co kolor obramowania. Wpisz nazwę firmy po lewej stronie nagłówka.
    
    
11. Ten krok jest opcjonalny. Zrasteryzujemy tekst. Kliknij warstwę tekstową prawym przyciskiem myszy i wybierz z menu Typ rasteryzacji.
    
    
12. Zapisz swój projekt w formacie .psd programu Photoshop.
    
    

Prawa autorskie 2018 Adobe Systems Incorporated. Wszelkie prawa zastrzeżone. Zrzuty ekranowe produktów Adobe zostały przedrukowane za zgodą Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst i Flash Paper jest / są [a] zarejestrowanym znakiem towarowym lub znakami towarowymi Adobe Systems Incorporated w Stanach Zjednoczonych i / lub innych krajach.

Instrukcje Wideo: Nagłówek na stronę :: Tutorial PhotoShop (Może 2024).