Samouczek: Jak zaprojektować interfejs IPhone na czacie
W tym samouczku zaprojektujemy interfejs użytkownika iPhone'a dla aplikacji mobilnej na fora i czacie.
Aplikacja zawiera kilka elementów codziennego dotykowego interfejsu, takich jak przyciski, pola wprowadzania i gesty dotykowe.
Omówimy różne narzędzia Photoshop, style warstw i oczywiście rozwiązujemy wszelkie ograniczenia projektowe; a także zaprojektowanie piksela - idealnie i wystarczająco pięknego, aby być godnym miejsca na ekranie iPhone'a.
Projekt powstał przy użyciu Photoshopa CS5.5, jednak wszystkie najnowsze wersje Photoshopa będą działać wspaniale.
Wymagania dotyczące ekranu aplikacji
W tym samouczku stworzymy tylko jeden ekran. Ekran będzie głównym ekranem czatu dla aplikacji czatowej, podobnie jak publiczny czat, ale na telefonie. Wymagania tego ekranu:
- Nagłówek - jest to czat, w którym aktualnie jesteś.
- Przycisk wstecz / zamknięcia / tematów - aby powrócić do poprzedniego ekranu.
- Przycisk osób - pokazuje, kto jest aktualnie na czacie.
- Lista wiadomości - wiadomości muszą mieć awatar i znacznik czasu.
- Sposób przeglądania profili użytkowników i wiadomości raportowania.
- Pole tekstowe do pisania wiadomości.
- Przycisk Wyślij, aby opublikować wiadomości.
Planowanie, szkicowanie i konstrukcja szkieletowa
Podobnie jak w przypadku każdego projektu interfejsu użytkownika, planowanie, szkicowanie i wireframing niezbędny jest interfejs. Często odrzuca wszelkie głupie pomysły (choć mogą wydawać się głupie w twojej głowie!), Zanim połączysz cyfrowe koncepcje i makiety. To, co może wydawać się genialnym rozwiązaniem w celu rozwiązania problemu w twojej głowie, może ostatecznie nie zadziałać w praktyce, dlatego właśnie szkieletowanie przed rozpoczęciem projektu jest tak ważnym krokiem.
Weź pióro i ulubioną podkładkę i zacznij szkicować.
Jak widać z powyższego obrazu, spędziłem zaledwie kilka minut, łącząc trzy różne koncepcje; zazwyczaj ten proces trwa kilka dni lub czasami tygodni, ale ponieważ projektujemy tylko jeden ekran, a cel aplikacji jest prosty, szkicowanie ich nie powinno zająć dużo czasu! Są w większości bardzo podobne, ale każdy ma swoje wyjątkowe różnice, które podsumuję poniżej.
Szkic A
Zainspirowany oryginalnym interfejsem użytkownika Twitter dla iPhone'a, ten interfejs pozwala użytkownikom przesuwać palcem po wiadomości, aby zobaczyć więcej opcji, takich jak "Wyświetl profil" i "Zgłoś użytkownika" - zabawny i zajmujący mało miejsca sposób, aby umożliwić więcej treści na tym ekranie. Wpadłem na pomysł posiadania przycisku ustawień na pasku nawigacyjnym na tym ekranie, ale zdecydowałem się przestrzegać mojej normalnej zasady "Mniej znaczy więcej" - jest mało prawdopodobne, że użytkownik będzie uzyskiwał dostęp do ustawień za każdym razem, gdy używa aplikacji, więc nie jest potrzebny tutaj.
Szkic B
Ta koncepcja jest nieco bardziej kompaktowa, z przyciskami "Zobacz profil" i "Zgłoś użytkownika" jako statycznymi ikonami po prawej stronie wiadomości. Grałem z ideą nie posiadania przycisku "Wyślij" tutaj, a zamiast tego skorzystaj z przycisku wysyłania na klawiaturze iOS. Zdecydowałem się na to, ponieważ większość aplikacji (w tym standardowe aplikacje na iOS, takie jak wiadomości) ma przycisk wysyłania na klawiaturze, a także dodatkowy przycisk wysyłania obok pola wprowadzania tekstu. Chciałbym, aby moje interfejsy były spójne z innymi w App Store.
Szkic C
Szkic C to szkic, na który zdecydowałem się przejść - zamiast przycisku wstecz mamy przycisk zamknięcia. Sądzę, że dzięki temu staje się bardziej oczywiste, że gdy klikniesz blisko, nie będziesz już częścią tej rozmowy (w przeciwieństwie do aplikacji do obsługi wiadomości, do której wracasz i możesz wrócić, aby nadal widzieć wszystkie poprzednie wiadomości). Przycisk Ludzie pokazuje listę użytkowników aktualnie na czacie, a ja ponownie przyjrzałem się pomysłowi, aby slajd zawierał więcej elementów funkcji (takich jak aplikacja Twitter), aby umożliwić użytkownikowi przeglądanie profilu użytkownika lub zgłaszanie go.
Po wykonaniu tego, nadszedł czas, aby przejść do złożenia czegoś w Photoshopie!
Krok 1: Status i pasek nawigacyjny
Zanim przejdziemy do tego kroku, musimy stworzyć nasz dokument. Standardowy rozmiar ekranu iPhone'a (w rozdzielczości Retina) ma szerokość 640 pikseli i 960 pikseli w rozdzielczości 326 pikseli. Zawsze zaczynam od białego tła w moich projektach.
Pierwszym krokiem jest wprowadzenie domyślnego paska stanu iOS. Pasek stanu to pasek na górze iPhone'a, który informuje o ważnych informacjach, takich jak sygnał, czas, nośnik i czas pracy baterii. Dostępne są trzy opcje: czarny pasek, czarny pasek o niskiej przezroczystości lub srebrny pasek.
Jeśli chcesz, aby wygląd aplikacji wyglądał jak prawdziwa, możesz pobrać pasek stanu z zestawu PSI do iPhone'a PSI Retina znaleźć tutaj . Wystarczy pobrać i otworzyć PSD i przeciągnąć pasek, który chcesz do dokumentu PSD. Ustaw go u góry płótna.
Pasek nawigacji znajduje się na naszej liście rzeczy do zrobienia. Standardowy pasek nawigacji ma wysokość 86 pikseli i obejmuje całą szerokość iPhone'a (640 pikseli). Ponownie możesz przeciągnąć ten element ze wspomnianego zestawu PSD lub możesz go utworzyć ręcznie (moja preferowana opcja, ponieważ nie ma dołączonych stylów). Wybierz narzędzie Kształt prostokąta i umieść prostokąt 640 x 86 pikseli na swoim płótnie.
Krok 2: Przyciski paska nawigacji
Odwołując się do naszych szkieletów, mamy dwa przyciski na pasku nawigacji. Wybierz narzędzie Zaokrąglonego kształtu prostokąta (pamiętaj, aby zawsze używać kształtów do kształtów w projekcie interfejsu użytkownika, znacznie ułatwia skalowanie dokumentu przy niższych rozdzielczościach!). Użyłem wymiarów 100 x 50 pikseli z promieniem naroża 6 pikseli.
Umieść ten kształt na lewej i prawej stronie paska nawigacji i umieść je ładnie.
Krok 3: Wybór stylu
Czas zacząć wybierać nasz styl. Ta aplikacja pozwoli ludziom na czatowanie i poznawanie nowych ludzi, a także pozwala ludziom się bawić. Z tego powodu uważam, że zabawny, dziwaczny schemat kolorów i typografia są tutaj ważne, aby pomóc w osiągnięciu tego punktu.
Wybierz narzędzie Tekst i wybierz krój pisma, który pasuje do obrazu, który masz w głowie. Wybrałem szampana Arial Rounded MT Bold . Wpisz swoją nazwę tematu (wybrałem "Projekt interfejsu użytkownika") i ustaw centralnie na pasku nawigacyjnym.
Kontynuując zabawny motyw wybrany dla aplikacji, nadszedł czas, aby wybrać niektóre kolory. Osobiście używam Miłośnicy kolorów aby zainspirować moje wybory kolorów podczas projektowania. W tym konkretnym przypadku szukałem "zabawy" iw ciągu kilku sekund przedstawiono mi wiele różnych opcji i inspirujących palet do wykorzystania jako baza dla mojego projektu.
Skończyło się na tym, że wybrałem jednego z nich Pokój zabaw . Ważne jest, aby zastanowić się, jakie kolory będą potrzebne przy wyborze palety; Uważam, że wybieram coś lekkiego, coś mrocznego, a coś jasnego jest zawsze dobrym punktem wyjścia. Ważne jest, aby mieć dobry kontrast w swoim projekcie.
Krok 4: Stylizacja paska nawigacji
Teraz powrócimy do naszego paska nawigacyjnego i nadamy mu kolor, na jaki zasługuje. Wybierz warstwę paska nawigacyjnego (mam nadzieję, że Twoje warstwy zostały uporządkowane!), Kliknij prawym przyciskiem myszy i wybierz Opcje mieszania. Jest to miejsce, w którym znajdują się najpotężniejsze narzędzia Photoshopa, jeśli chodzi o tworzenie doskonałych projektów pikseli. Stąd możesz dodawać cienie, gradienty, wzory i stoksy, z możliwością kopiowania i wklejania tych stylów na inne warstwy.
Przede wszystkim dodamy gradient do naszego paska, więc kliknij Gradient Overlay. Wybrałem kolor turkusowy jako taki, którego chcę użyć na pasku nawigacyjnym. Jest jasny i ma mocny cios, a nasz projekt jest łatwy do zapamiętania. Zastosuj gradient kąta 90 stopni przechodząc od światła (góra) do ciemności (dół).
Teraz kliknij panel Obrys. Zmień rozmiar swojego obrysu na 2 zamiast domyślnego 3. Zalecamy, aby zawsze unikać liczb nieparzystych w projektowaniu interfejsu użytkownika, zwłaszcza na urządzeniach mobilnych. Spowoduje to jedynie zwiększenie pracy zarówno projektanta, jak i programisty, jeśli chodzi o skalowanie pracy (nie można uzyskać pół 3 pikseli, ponieważ pół piksela nie istnieje!).
Zmień typ wypełnienia swojego obrysu na gradient i upewnij się, że obrys pojawi się na zewnątrz kształtu. Wybierz ciemny turkusowy kolor na dole skoku i czarny na górze. Ponieważ obrys znajduje się poza naszym paskiem nawigacji, czarna część obrysu nie będzie wyświetlana na pasku stanu, a zatem użytkownik będzie mógł zobaczyć obrys u dołu.
Wybierz panel Cieniowanie wewnętrzne i nałóż na pasek biały krąg o grubości 15%. Pojawi się u góry paska i nadać mu piękny wygląd, dzięki czemu będzie wyglądał bardziej 3D. Dałem mojemu cionowi odległość 2 pikseli i rozmiar 3 pikseli.
Nadszedł czas, aby naprawdę sprawić, by nasz pasek nawigacyjny był pop. Używając wzorów, możemy dodać wiele głębi do naszego projektu. Używam białego wzoru siatki na pasku nawigacyjnym. Jeśli chcesz użyć tego wzorca, możesz pobrać ich kolekcję za darmo na Premium Pixels .
Krok 5: Cień typografii
Aby nadać naszej typografii trochę głębi, otwórz panel opcji mieszania i zastosuj cień. Zmień kąt na -90 (upewnij się, że nie zaznaczono tutaj opcji Użyj globalnego stylu, w przeciwnym razie wszystkie cienie w projekcie zmienią się na -90) i używaj tego samego koloru, co w przypadku suwów paska nawigacji. Daj cienia odległość 2 pikseli i zmniejsz rozmiar do 0 pikseli. Daje to czysty cień w tekście nad tekstem, czyniąc go bardziej interesującym.
Krok 6: Stylizacja przycisków paska nawigacji
Zamierzamy teraz zastosować niesamowite style do przycisków na pasku nawigacyjnym. Chcemy, aby te przyciski dobrze wiązały się z naszym paskiem nawigacyjnym, ale jednocześnie muszą wyróżniać się na tyle dobrze, aby użytkownik natychmiast rozpoznał, że są przyciskami. Aby to zrobić, użyjemy więcej stylów warstw, aby nadać im trójwymiarowy efekt.
Otwórz panel opcji mieszania i kliknij nakładkę gradientu. Nadaj swojemu przyciskowi gradient jasności (od góry) do ciemnego (dolnego) za pomocą kolorów z paska nawigacyjnego. Kolor światła został wybrany z podświetlenia mojego paska nawigacji, a ciemny kolor został wybrany z dolnego suwu mojego paska nawigacji.
Wybierz panel skoku i zmień rozmiar skoku na 2px, z pozycją na zewnątrz. Zmień typ wypełnienia na gradient, a kąt na 90 stopni. Zmień kolory gradientu ze światła (góra) na ciemne (na dole), opierając kolory na kolorach używanych już w pasku nawigacyjnym i przyciskach. Natychmiast widać, że ten obrys nadaje przyciskowi wygląd 3D, jakby wychodził z paska nawigacji, zamiast siedzieć na nim.
Aby jeszcze bardziej urozmaicić przycisk i sprawić, że będzie on jeszcze bardziej atrakcyjny wizualnie, dodamy do przycisku wewnętrzny blask. Kliknij wewnętrzny blask i zmień tryb mieszania na ekran. Zmniejsz krycie do 20% i upewnij się, że hałas jest ustawiony na 0%. Zmień domyślny żółty blask na biały i upewnij się, że rozmiar jest nadal ustawiony na domyślną wartość 5px. To powinno dać Twojemu przyciskowi miły wewnętrzny blask, dzięki czemu przycisk wygląda naprawdę na dotyk!
Teraz dodamy wewnętrzny cień, aby nasz przycisk był trochę bardziej realistyczny. Zmień krycie na 15% i wybierz czarny jako swój kolor. Upuść odległość do 2 pikseli i rozmiar do 4 pikseli. Teraz zmień kąt na -90 stopni (upewniając się, że nie wybrano opcji Użyj globalnego światła). Daje to niewielki cień dolnej części przycisku, ukrywając część dolnej wewnętrznej poświaty, którą właśnie zastosowaliśmy. W rzeczywistości obszar ten byłby cieniowany, dlatego ważne było ukrywanie wewnętrznego blasku.
Aby zakończyć stylizację naszego przycisku, dodamy cień. Wybierz panel cienia i zmień kolor na biały z kryciem równym 25%. Ten cień będzie działał jako punkt kulminacyjny poniżej naszego obrysu, więc zmień odległość na 4px (2px, aby objąć obszar obrysu i 2px, który będzie widoczny poniżej obrysu).
Krok 7: Etykiety przycisków
Przycisk bez etykiety jest bezcelowy, więc teraz poświęcimy trochę czasu, aby zakończyć nasze przyciski. Przede wszystkim kliknij prawym przyciskiem myszy swój styl i wybierz opcję Kopiuj styl warstwy. Teraz kliknij prawym przyciskiem myszy przycisk Un-Style i wybierz opcję Wklej styl warstwy.
Najpierw będziemy kontynuować pracę nad naszym prawym przyciskiem. Ten przycisk będzie oznaczony jako "Ludzie" i chcemy użyć ikony dla 2 lub więcej osób. Ze względu na ten samouczek zamierzam używać ikon tworzonych przez kreatywne studio Yummygum; możesz znaleźć paczkę, której użyłem w IconSweets.com - Będę używał ikon z tego pakietu podczas samouczka.
Używając tej samej czcionki, która została użyta w tytule paska nawigacji, wpisz etykietę przycisków. Zmień rozmiar i umieść go na swoim przycisku, a następnie umieść wybraną ikonę (lub utwórz własną) w swoim dokumencie. Ustaw te dwie warstwy równo na swoim przycisku. Rozdzieliłem moje warstwy, więc jest ich 15 pikseli po obu stronach i przycisk oraz 10 pikseli pomiędzy ikoną i tekstem. Wklej styl warstwy z tekstu tematu paska nawigacyjnego na ikonę i etykietę przycisku. Jeśli chcesz zmienić długość przycisku, użyj narzędzia Zaznaczanie bezpośrednie, aby wybrać 4 punkty kontrolne po prawej stronie, a następnie przeciągnij. Możesz przytrzymać klawisz Shift, aby zachować tę modyfikację prosto.
Powtórz ten proces za pomocą przycisku po lewej stronie paska nawigacyjnego, tym razem za pomocą ikony krzyżyka i słowa "Zamknij". Aby dodać nieco więcej stylizacji do moich przycisków, zmniejszyłem krycie dwóch kształtów tła do 95%, dzięki czemu pod spodem widać trochę wzoru siatki.
Krok 8: Pasek pola tekstowego
Nadszedł czas, aby zwrócić uwagę na resztę naszego ekranu. Chwyć narzędzie Kształt prostokąta i używając tych samych wymiarów naszego paska nawigacyjnego (640 x 86 pikseli) umieść kształt na płótnie. Ustaw go u dołu ekranu.
Krok 9: Tło
Teraz będziemy pracować na tle naszego projektu. Otwórz panel opcji mieszania dla warstwy tła i wybierz wzór do wypełnienia. Użyłem ciemnego wzoru z pionowymi liniami, przez które przechodzę Subtelne wzory - możesz pobrać pełny zestaw wzorców, który bardzo polecam.
Jeśli chcesz dodać niektóre własne kolory do wybranego wzoru, możesz to zrobić za pomocą stylu nakładki koloru. Zastosowałem brąz (z mojej palety kolorów, którą wybrałem wcześniej) na 35%. Ta krycie jest wystarczająco niska, aby twoja tekstura / wzór były wystarczająco jasne, aby zabarwić kolor lub tło.
Teraz mamy ciemne tło, zobaczysz, że punkt, w którym nasz pasek nawigacji spełnia nasz obraz tła, nie wygląda tak dobrze. Możesz to łatwo naprawić, stosując styl cienia na pasku nawigacyjnym, dzięki czemu będzie wyglądać tak, jakby był nad twoim tłem.
Ponownie otwórz panel opcji mieszania dla paska nawigacji i wybierz panel cienia. Upewnij się, że wybrano kolor czarny i zmień krycie na 25%. Zwiększ zarówno odległość do 6 pikseli, jak i rozmiar do 10 pikseli, a następnie kliknij przycisk OK. Konieczne może być eksperymentowanie z tymi opcjami, ponieważ wyniki będą się różnić w zależności od koloru i rodzaju tekstury / wzoru wybranego dla tła.
Krok 10: Wiadomości
Teraz, gdy mamy już tło i górny pasek nawigacyjny, skoncentrujemy się na określeniu głównej zawartości aplikacji. Wybierz narzędzie Kształt prostokąta i umieść prostokąt na swoim płótnie. Szerokość, której użyłem wynosiła 600px, pozwalając na wyświetlanie 20px po każdej stronie kształtu. Użyłem znacznie jaśniejszej wersji koloru żółtego / kremowego z palety kolorów, którą wybrałem wcześniej.
Wybierz narzędzie Zaokrąglone prostokątne narzędzie i zmień wymiary na 80 x 80 pikseli, a promień na 6 pikseli. Umieść kształt (który ma być używany jako nasz kształt awatara) na twoim płótnie i umieść go prawidłowo. Aby zachować spójność mojego projektu, pozwoliłem 20px usiąść między krawędziami kształtu tła wiadomości i mojego kształtu awatara.
Za pomocą narzędzia tekstowego napisz swoje imię i nazwisko oraz wiadomość; Użyłem Arial Rounded MT Bold na moje imię i normalny Arial dla mojej wiadomości tekstowej - sformatuj tekst tak, aby ładnie pasował do twojego tła wiadomości.
Zamierzamy teraz dodać nieco stylu do naszej wiadomości, używając tylko kolorów; Zmieniłem kolor mojego imienia na ciemny turkus (bardzo bliski czerni) i wyprany turkus inspirowany moim paskiem nawigacyjnym.
Następnie wstawiłem zdjęcie siebie, przechodząc do Plik> Umieść. Po wprowadzeniu zmieniłem rozmiar obrazu i umieściłem go powyżej mojego czarnego awatara, które stworzyliśmy wcześniej. Aby zaoszczędzić na wycinaniu obrazu, a także w celu późniejszego przeniesienia lub zmiany jego rozmiaru, kliknij prawym przyciskiem myszy i wybierz opcję Utwórz maskę przycinającą. Spowoduje to połączenie twojego wizerunku z awatarem do czarnej skrzynki i wyświetli tylko to, co znajduje się nad czarną skrzynką. Przekonasz się, korzystając z narzędzia Move, które możesz nadal przenosić i zmieniać rozmiar tego obrazu.
Używając innej ikony IconSweets, stworzyłem ładny mały znacznik czasu. Musiałem zmniejszyć rozmiar ikony - możesz to zrobić, przechodząc do Edycja> Przekształć> Przekształć swobodnie i zmieniając wymiary (według pikseli lub procentu). Użyłem 70% szerokości i wysokości, aby zachować proporcje. Dodałem trochę tekstu i voila. Pamiętaj, aby wybrać kolor, który jest łatwy do odczytania, ale nie krzyczy o uwagę.
Krok 11: Zduplikowane wiadomości
Zduplikuj swoje skrzynki z wiadomościami pod sobą, pozostawiając lukę 2px między każdą ramką tła. Możesz to zrobić, klikając lub przeciągając warstwy na ikonę Nowa warstwa, lub możesz jednocześnie nacisnąć Cmd + Shift + Strzałka w dół, aby zduplikować i przesunąć warstwy w dół.
Zmień całą treść w swoich skrzynkach, tak jakby była to prawdziwa rozmowa. Jeśli chcesz zmienić rozmiar ramek tła, użyj narzędzia Zaznaczanie bezpośrednie i zmień rozmiar za pomocą punktów kontrolnych. Dzięki temu wszystkie krawędzie są ładne i ostre.
Krok 12: Stylizacja wiadomości
Dzięki temu możemy teraz skoncentrować się na ożywianiu naszych skrzynek z wiadomościami. Otwórz panel opcji mieszania i wybierz panel cienia. Zmień tryb mieszania na normalny i wybierz biały jako swój kolor. Zwiększ krycie do 80% zamiast standardowego 75% i daj cienie odległość 2 pikseli. Spowoduje to ukrycie 2px luki, którą zostawiliśmy między każdym tłem skrzynki komunikatów.
Skopiuj i wklej powyższy styl warstwy na wszystkie warstwy tła skrzynki wiadomości. Powinieneś skończyć z czymś takim jak powyżej.
Krok 13: Dodawanie zaokrąglonych narożników
Aby uczynić nasz projekt bardziej interesującym, a także aby dodać więcej głębi, dodamy zaokrąglone rogi na końcu naszych wiadomości i sprawimy, że będzie wyglądał, jakby był ułożony na papierze na papierze.
Wybierz narzędzie Prostokąt zaokrąglony i nadaj mu promień 10 pikseli. Zmień szerokość na 600px (lub inną szerokość używaną dla tła skrzynki wiadomości) i wysokość, która nie przekracza wysokości dolnego tła skrzynki wiadomości. Użyłem tutaj jasnego koloru, aby był dobrze widoczny.
Używając narzędzia Zaznaczanie bezpośrednie, wybierz zawartość warstwy kształtu wektorowego (zaokrąglone pole, które właśnie narysowaliśmy) i przejdź do Edycja> Kopiuj. Kliknij warstwę kształtu wektorowego na tle dolnej ramki wiadomości i przejdź do Edycja> Wklej. Spowoduje to wklejenie zawartości warstwy kształtu na twoją drugą warstwę kształtu. Możesz teraz usunąć kształt, który narysowaliśmy w poprzednim kroku. Nadal powinieneś widzieć kształt widoczny.
Otwórz opcje mieszania na dolnym tle okna komunikatu i zastosuj cień. Zmień kolor na czarny, krycie na 25%, odległość na 1 piksel i rozmiar na 3 piksele. To stworzy ładny subtelny cień.
Zduplikuj tę warstwę i podsuń ją 5px. Zmień położenie warstwy tak, aby znajdowała się pod oryginałem. Powinieneś skończyć z czymś podobnym do poniższego. Jak widać, jest to prosty sposób na stworzenie nakładającego się papieru.
Powtórz krok ponownie, aby mieć trzy kawałki papieru zamiast dwóch. Możesz nadać dolnej kartce nieco bardziej zauważalny cień.
Krok 14: Cień paska nawigacji
Zapewne zauważyłeś, że podczas projektowania naszych skrzynek wiadomości, ukryliśmy większość cienia, który nasz pasek nawigacyjny rzucił na nasze tło. Aby go zastąpić, możesz umieścić wiadomości pod paskiem nawigacji (opcja prosta, ale nierealistyczna) lub wykonać kolejny krok.
Wybierz narzędzie Prostokątne zaznaczanie i narysuj chudą linię u góry wiadomości podobnych do powyższych. Wypełnij go kolorem czarnym na nowej warstwie.
Przejdź do opcji Filtr> Rozmycie> Rozmycie gaussowskie i zastosuj rozmycie. Będzie to teraz działać jako cień - po prostu wycinaj wszelkie fragmenty rozmycia, które pokrywają się z krawędziami tła skrzynki wiadomości.
Krok 15: Przyciski profilu i raportu
Wracając do naszych modeli krawędziowych, zdecydowaliśmy się zezwolić użytkownikom na przesuwanie wiadomości w lewo, aby wyświetlić więcej przycisków. W takim przypadku te przyciski umożliwiają użytkownikowi przeglądanie profilu plakatów wiadomości lub zgłaszanie plakatu z wiadomościami.
Wybierz warstwy składające się na jedną z twoich wiadomości (wybieram wiadomość Homera Simpsona) i używając klawiszy Shift i klawiszy strzałek, przesuń wiadomość o 10 pikseli jednocześnie w lewo. Za pomocą narzędzia tekstowego napisz etykiety, a następnie wybierz kilka ikon odpowiadających tym etykietom. Wybrałem indywidualną osobę do profilu i cel do raportu (tak jakbyś je kręcił - pomyślałem, że to było zabawne!).
Aby nadać temu obszarowi więcej głębi, dodałem czarny cień do ikon i tekstu.
Krok 16: Pasek pola tekstowego
Pasek pola tekstowego jest jednym z najważniejszych elementów na tym ekranie. Użytkownicy muszą mieć możliwość wprowadzania swoich wiadomości z łatwością i bez zamieszania (dlatego usunąłem przycisk ukrytego wysyłania w początkowych koncepcjach naszkicowanych).
Aby rozpocząć, odszukaj warstwę tła i skopiuj style warstw. Wklej te style warstw do warstwy paska pola tekstowego, którą utworzyliśmy wcześniej. Otwórz opcje mieszania dla tej warstwy i wybierz panel skoku. Zastosuj obrys 2px na zewnątrz kształtu używając bryły czarnej jako koloru. Ponieważ obrys znajduje się na zewnątrz, a kształt dotyka trzech krawędzi płótna, zostanie wyświetlony tylko obrys nad kształtem.
Teraz wybierz wewnętrzną kartę cienia i zmień tryb mieszania na normalny, kolor na biały, krycie na 10% i odległość do 2 pikseli. Upewnij się, że kąt jest ustawiony na globalną domyślną jasność (90 stopni) i kliknij OK. Daje nam to świetną atrakcję poniżej naszego czarnego obrysu. Po zastosowaniu dwóch prostych linii 2px nasz pasek pola tekstowego wygląda już dobrze od reszty tła, mimo że ma to samo tło!
Wybierz narzędzie zaokrąglonego prostokąta. Daj swojemu narzędziu wysoki promień, użyłem 50px; to da jej bardzo okrągłe (okrągłe) końce. Umieść kształt na pasku, użyłem 460x54px jako moich wymiarów. Upewnij się, że lewa strona kształtu pola tekstowego znajduje się w odległości 20 pikseli od lewej krawędzi obszaru roboczego, aby zachować spójne odstępy między projektami.
Wypełnij kształt ciemnym kolorem (użyłem brązu wybranego z ciemnego piksela w tle), a następnie otwórz panel stylów warstw. Zastosuj biały cień 2px do pola tekstowego z kryciem 10%.
Kliknij wewnętrzny panel cienia i zastosuj cień wewnętrzny do kształtu pola tekstowego. Zapewni to o wiele więcej głębi i sprawi, że będzie wyglądał tak, jakby był wycięty w tle pręta. Użyj czarnego z trybem mieszania mnożenia i kryciem 25%. Użyłem 5px jako mojej odległości i 10px jako mojego rozmiaru, chociaż możesz tu eksperymentować.
Korzystając z narzędzia tekstowego i wyposażonego w Arial Rounded MT Bold, wpisz "Napisz komentarz ..." i umieść go w polu tekstowym. Otwórz opcje mieszania dla nowej warstwy tekstowej i zastosuj czarny cień z kryciem 75%, odległością 2 pikseli i rozmiarem 3 pikseli.
Krok 17: Przycisk pola tekstowego
Wybierz ponownie Zaokrąglone prostokątne narzędzie kształtu i używając tych samych ustawień promienia i wysokości, które poprzednio użyliśmy, umieść kształt na tle paska pola tekstowego. Zmień rozmiar przycisku tak, aby znajdował się 10 pikseli od pola tekstowego i 20 pikseli od prawej krawędzi kanwy.
Kliknij prawym przyciskiem myszy twoją nową warstwę kształtu przycisku i wybierz opcje mieszania. Wybierz panel nakładki gradientu i zastosuj gradient od światła (góra) do ciemności (dół). Użyłem wspaniałego żółtego koloru, który znajdował się w palecie kolorów, którą wybrałem wcześniej.
Aby zachować spójność naszego projektu, zastosuję przycisk do naszego przycisku, który sprawi, że będzie wyglądał tak, jakby wychodził z tła, podobnie jak w przypadku przycisków na pasku nawigacyjnym. Tym razem użyłem bryły czarnej zamiast gradientu, ponieważ tło jest znacznie ciemniejsze i nie jest wypełnione gradientem. Użyłem 2-krotnego obrysu po wewnętrznej stronie mojego kształtu ze 100% nieprzezroczystością.
Wybierz narzędzie tekstowe i wpisz "Wyślij" na swoim przycisku. Otwórz opcje mieszania dla nowej warstwy tekstowej i zastosuj brązowy cień do tekstu z odległością 1px i rozmiarem 3px.
I po tym skończyliśmy, wszyscy jesteśmy skończeni! Chcielibyśmy zobaczyć Twoje wyniki, dlatego prosimy o umieszczenie ich w sekcji komentarzy poniżej. Jeśli chcesz zobaczyć projekt w pełnej rozdzielczości, możesz to zobaczyć tutaj .