Zaprojektuj interfejs Web 2.0 w Photoshopie
Zrozumienie tutoriala poniżej to zrozumienie jego techniki, dzięki czemu możesz narysować sobie graficzny interfejs użytkownika dla strony internetowej. Boczna nawigacja, guziki, nagłówki, na przykład. Cały styl Web 2.0.
Uruchom nowe płótno; dowolny rozmiar. Coś większego niż 450x300px byłoby dobre. Wybierz Zaokrąglone narzędzie prostokątne i narysuj prostokąt tak duży, jak pokazano na obrazku powyżej.
Kliknij dwukrotnie warstwę zaokrąglonego prostokąta, aby uruchomić Opcje mieszania. Zmień ustawienia następujących stylów.
Upuść cień
Krycie: 31% Odległość: 1px Spread: 0% Rozmiar: 5px
Faza i płaskorzeźba
Głębokość: 100% Rozmiar: 0px Zmiękczenie: 0px
Nakładka gradientowa
Kliknij dwukrotnie Gradiant i ustaw następujące punkty zatrzymania. Lokalizacja: 0%, # 1378cd Lokalizacja: 100% # 4da5f0
Uderzenie
Rozmiar: 5px Pozycja: Kolor wewnątrz: # 54abf6
Włóżmy jakiś tekst, slogan, URL lub coś. Miej środek i wyrównaj do prawej, aby logo mogło znajdować się po lewej stronie. Stylujmy tekst. Używam Unicode Lucida Sans; 55pt; gładki; -120 do śledzenia znaków (odstępy między literami). Kliknij dwukrotnie warstwę tekstową i ustaw następującą wartość w Opcje mieszania.
Nakładka gradientu
Kliknij dwukrotnie Gradiant i ustaw następujące punkty zatrzymania. Lokalizacja: 0%, # 9ec7eb Lokalizacja: 100% ecf6ff
Następnie musisz wstawić logo po lewej stronie tekstu. Użyję zaokrąglonego prostokąta o promieniu 5px do reprezentowania logo. Tutaj jest Opcja mieszania ustawienia zaokrąglonego prostokąta.
Wewnętrzny cień
Krycie: 45% Odległość: 0px Rozmiar: 43px;
Faza i płaskorzeźba
Głębokość: 100% Rozmiar: 0px Zmiękczenie: 0px Tryb podświetlenia Krycie: 50% Tryb cieniowania Krycie: 100%
Nakładka gradientowa
Kliknij dwukrotnie Gradiant i ustaw następujące punkty zatrzymania. Lokalizacja: 0% # 0e2f4a Lokalizacja: 47% # 001a31 Lokalizacja: 48% # 002545 Lokalizacja: 100% # 0f4b7f
Uderzenie
Rozmiar: 5px Kliknij dwukrotnie Gradiant i ustaw następujące punkty zatrzymania. Lokalizacja: 0% # 1468af Lokalizacja: 100% # 50abf8
Dajmy mu trochę błyszczącego efektu. Trzymać CTRL i kliknij lewym przyciskiem na zaokrąglony prostokąt Miniatura warstwy. Po wybraniu całego zaokrąglonego prostokąta zmień na Narzędzie do zaznaczania prostokątnego, trzymać ALT i rysuje drugą połowę wybranego obszaru; tak jak na powyższym obrazku.
Utwórz nową warstwę; Przeciągnij go w górę, aby znalazł się na szczycie wszystkich warstw; wypełnij wybraną część białym [#ffffff]; zmień krycie na 15%.
Samouczek zakończy się tutaj. To, jak zamierzasz wykorzystać ten projekt, zależy wyłącznie od ciebie. Lekko zmieniając jego rozmiar i kolory, można go użyć jako nagłówka lub przycisków internetowych. Oto przykład.
Nagłówek strony
Przyciski witryny
