Jak tworzyć przyciski 3D za pomocą Adobe Photoshop

Jak tworzyć przyciski 3D za pomocą Adobe Photoshop

Jest wiele niesamowitych rzeczy, które możesz stworzyć w Adobe Photoshop które są przydatne w Internecie, od prostych ramek do zdjęć po złożone interfejsy użytkownika. Jedną z najbardziej przydatnych rzeczy, które możesz stworzyć w Photoshopie, są przyciski 3D, które przydadzą się, jeśli prowadzisz bloga lub stronę internetową z niestandardowym interfejsem.





W tym artykule pokażemy, jak tworzyć przyciski 3D za pomocą Photoshopa, wraz z wizualnymi stanami „góra” i „dół”, dzięki czemu można je animować. (W tym artykule nie będziemy omawiać samej animacji).



Krok 1: Przygotuj dokument

Chociaż przyciski 3D pojawiają się najczęściej na stronach internetowych, należy pamiętać, że istnieją dla nich inne aplikacje, takie jak animowane GIF-y, makiety produktów i gry mobilne. W zależności od tego, do czego tworzysz ten przycisk, ostateczny format pliku i jego wymiary mogą się różnić.





Aby utworzyć przycisk 3D w Photoshopie, musisz utworzyć dla niego własny dokument. Aby to zrobić, otwórz Photoshopa i kliknij Utwórz nowy > Niestandardowy . Zacznij wpisywać swoje wartości.

Aby utworzyć przycisk 3D, będziesz potrzebować dokumentu poziomego. Dla naszych wykorzystaliśmy:



  • 900 x 300 pikseli wysokości
  • 300 pikseli/cal
  • Tryb kolorów RGB

Chociaż te specyfikacje zdecydowanie nie są twardą i szybką zasadą, zapewni to, że masz wystarczająco dużo miejsca do pracy i możliwość skalowania rozmiaru przycisku w razie potrzeby.

Krok 2: Skonfiguruj swój prostokąt dla przycisku 3D

Po skonfigurowaniu specyfikacji pliku zostaniesz przeniesiony do swojego obszaru roboczego. Będziesz mieć poziome białe płótno w jednej warstwie i tutaj zaczniesz budować swój przycisk.



Aby zbudować swój przycisk 3D, kliknij Narzędzie zaokrąglony prostokąt po lewej stronie ekranu, tutaj na czerwono. Możesz także użyć skrótu U aby uzyskać do niego dostęp.

Kliknij raz białą warstwę: spowoduje to automatyczne wyświetlenie Twojego Utwórz zaokrąglony prostokąt skrzynka. Użyjesz tego pola do określenia wymiarów prostokąta.



Dla naszego przycisku wybraliśmy:

  • 300 pikseli szerokości
  • 75 pikseli wysokości

Zadbaliśmy również o zaokrąglenie rogów o 10 pikseli. Nie za wysoko i nie za nisko. Potem nacisnęliśmy ok .

Notatka: Przyciski różnią się rozmiarem i kształtem, więc nie musisz używać tych dokładnych wymiarów. Dodatkowo, jeśli szukasz więcej informacji na temat skrótów, oto niektóre z najbardziej przydatne polecenia klawiaturowe programu Photoshop .

Po naciśnięciu ok , Photoshop utworzy zaokrąglony prostokąt z tymi wymiarami wewnątrz warstwy. Możesz zmienić jego Napełnić oraz Udar mózgu kolorów, korzystając z menu rozwijanych w lewym górnym rogu ekranu.

Na potrzeby tego samouczka — i aby zilustrować, jak mogą wyglądać przyciski „w górę” i „w dół” — zmienimy nasz przycisk „w dół” na czerwony.

Krok 3: Zrób swój przycisk 3D

Po utworzeniu podstawowego przycisku i wybraniu jego koloru, będziesz chciał dostosować go w Styl warstwy Okno dialogowe. Ma to sprawić, że będzie wyglądał bardziej 3D.

Aby uzyskać dostęp do swojego Styl warstwy okno dialogowe, możesz przejść Warstwa > Styl warstwy z górnego menu. Możesz także dwukrotnie kliknąć warstwę zawierającą Twój przycisk, aby wyświetlić ją automatycznie. Ta droga jest znacznie szybsza i osobiście ją preferujemy.

Gdy pojawi się okno Styl warstwy, przejdź do opcji Faza i płaskorzeźba . Włącz to.

Jest to szybki i łatwy sposób na nadanie krawędziom przycisku bardziej wypukłego, trójwymiarowego wyglądu. W tym samouczku są to ustawienia, których użyliśmy:

Struktura

  • Styl: Faza wewnętrzna
  • Technika: Dłuto miękkie
  • Głębokość: 605
  • Kierunek: W górę
  • Rozmiar: 5
  • Złagodzić: 1

Zacienienie

  • Kąt: 90
  • Wysokość: 37
  • Tryb podświetlenia: Rozjaśnianie kolorów, krycie 55%
  • Tryb cienia: Wielokrotne, 25% krycia

Sztuczka polega na tym, aby ustawienia były wystarczająco wysokie, aby można było dostrzec pewną różnicę, ale nie tak silne, aby były przytłaczające.

Gdy skończyliśmy z Bevel & Emboss, poszliśmy do Kontur i to też włączyłem. Kontur sprawia, że ​​definicja fazowania i wytłoczenia jest nieco silniejsza, a w tym samouczku wybraliśmy ustawienie Stożek — odwrócony .

Następnie włącz Nakładka gradientu . To właśnie nadaje przyciskowi zaokrąglony, lekko „błyszczący” wygląd. Ustawienia są następujące:

  • Tryb mieszania: Narzuta
  • Nieprzezroczystość: 90
  • Styl: Liniowy
  • Kąt: 90
  • Skala: 100

Wreszcie włączyliśmy się Cień , aby przycisk wyglądał nieco „podniesiony” na białym tle strony internetowej lub bloga. Ponownie, oto ustawienia:

czy firefox zużywa mniej pamięci RAM niż chrome?

Struktura

  • Tryb mieszania: Wiele
  • Nieprzezroczystość: 35
  • Kąt: 90
  • Dystans: 2
  • Szerzyć się: 6
  • Rozmiar: 8

Jakość

  • Kontur: Liniowy
  • Hałas: 0
  • Warstwa wybija cień: Na

Teraz nadszedł czas, aby zapisać te specyfikacje jako styl warstwy.

Krok 4: Zapisz jako styl warstwy

Gdy skończysz z ustawieniami przycisku, zacznie on wyglądać 3D. Ponieważ istnieje duże prawdopodobieństwo, że utworzysz więcej niż jeden przycisk 3D, musimy znaleźć szybki i łatwy sposób, aby to zrobić.

Oto jak.

Przed kliknięciem ok w Styl warstwy w oknie dialogowym, kliknij Nowy styl . Gdy to zrobisz, Photoshop zapisze ten styl warstwy, który utworzyłeś dla swojego przycisku.

Jeśli korzystasz z programu Photoshop CC, ten nowy styl zostanie zapisany w Twoim Biblioteki sekcji, jak widać powyżej. Dostęp jest bardzo szybki i łatwy.

Krok 5: Jak używać zapisanego stylu warstwy

Teraz, gdy już zaprojektowałeś swój przycisk i zapisałeś go jako styl warstwy, zobaczmy, jak działa dla twojego stanu „w górę”. Żadnego kłamstwa, to skróci czas pracy o połowę.

Najpierw utwórzmy inny przycisk bezpośrednio nad warstwą czerwonego przycisku, tak jak powyżej. Zróbmy to na zielono, dla podkreślenia.

Dalej ---zamiast dwukrotnego kliknięcia samej warstwy, aby wyświetlić Style warstw okno dialogowe --- kliknij dwukrotnie styl warstwy w swoim Biblioteki płyta.

Gdy to zrobisz, Photoshop automatycznie zastosuje zapisany styl do nowej warstwy przycisków, zachowując nowy kolor i kształt. Masz teraz dwa przyciski ---jeden w stanie do góry, a drugi w dół --- i to jest takie proste. Uwielbiam ten skrót.

Krok 6: Dodaj tekst do przycisku

Następnie dodamy tekst do przycisku.

Aby dodać tekst, utwórz nową warstwę nad dwiema warstwami przycisków. Kliknij Wpisz narzędzie zacząć pisać.

W tym samouczku napiszemy słowo „subskrybuj”, ponieważ jest to coś, co dość często widuje się na stronach internetowych i platformach społecznościowych.

Zamierzamy również użyć bezpiecznej w sieci czcionki bezszeryfowej. Ostateczny wybór, którego użyjesz do własnego przycisku, należy do Ciebie. Montserrat, Proxima Nova, Arial i Verdana to szeroko stosowane i bezpieczne w sieci alternatywy.

Jednak po wykonaniu tej czynności jest jeszcze kilka subtelnych zmian, które musisz wprowadzić, aby ten tekst się „wyskoczył”.

Najpierw kliknij dwukrotnie warstwę zawierającą tekst, aby wyświetlić go w swoim Styl warstwy Okno dialogowe.

Następnie kliknij Wewnętrzny cień , aby dodać do tekstu depresję (lub zapadnięty obszar). To sprawia, że ​​wygląda na to, że litery zostały wygrawerowane na przycisku. Dokładne ustawienia, których użyliśmy w tym samouczku, znajdują się poniżej.

Struktura

  • Tryb mieszania: Zwielokrotniać
  • Nieprzezroczystość: 35
  • Kąt: 90
  • Dystans: 2
  • Dławić się: 4
  • Rozmiar: 1

Jakość

  • Kontur: Liniowy
  • Hałas: 0

Następnie zastosuj a Nakładka gradientu do tych liter, aby łatwiej wtopiły się w guzik, nie wyglądając na płaskie. Ponownie, ustawienia dla naszych to:

  • Tryb mieszania: Kolor wypalania
  • Nieprzezroczystość: 90
  • Styl: Liniowy
  • Kąt: 90
  • Skala: 100

Krok 7: Wykończenie

Po utworzeniu tego stylu tekstu — zwłaszcza jeśli chcesz go ponownie użyć — przejdź do Nowy styl i zapisz go, zanim klikniesz ok .

Po zakończeniu możesz szybko przełączać się między dwiema warstwami przycisków, aby zobaczyć, jak wyglądają stany „góra” i „dół”.

Całkiem fajnie, co? Aby zapisać plik, przejdź Plik > Zapisz jako i zapisz go jako odpowiedni format pliku dla dowolnego projektu, nad którym pracujesz.

Dostosuj swój blog za pomocą przycisków i widżetów 3D

Teraz, kiedy już wiesz, jak tworzyć przyciski 3D w programie Photoshop, możesz z nim pracować kreatywnie, projektując własne przyciski 3D, które będą odpowiadać Twoim potrzebom. A dzięki tym umiejętnościom w swoim arsenale możesz stworzyć produkt, który będzie nie tylko profesjonalny, ale także osobisty.

Chcesz wiedzieć o innych rzeczach, które możesz zrobić z tym programem? Oto jak usunąć tło w Photoshopie .

Udział Udział Ćwierkać E-mail Jak uzyskać dostęp do wbudowanej poziomicy Google na Androidzie?

Jeśli kiedykolwiek musiałeś upewnić się, że coś jest wypoziomowane w mgnieniu oka, możesz teraz uzyskać poziomicę w telefonie w kilka sekund.

Czytaj dalej Powiązane tematy
  • Twórczy
  • Adobe Photoshop
  • Wskazówki dotyczące edycji obrazu
  • Samouczek Photoshopa
O autorze Shianne Edelmayer(136 opublikowanych artykułów)

Shianne ma tytuł licencjata w zakresie projektowania i doświadczenie w podcastingu. Obecnie pracuje jako starszy pisarz i ilustrator 2D. Zajmuje się kreatywną technologią, rozrywką i produktywnością w MakeUseOf.

Więcej od Shianne Edelmayer

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować