Jak przyspieszyć proces tworzenia szkieletów w Photoshopie i Adobe XD?

Przed rozpoczęciem jakiegokolwiek projektu projektowego od samego początku towarzyszy Ci jedno słowo: wireframing . Dzisiaj dowiemy się, jak stworzyć szkielet w Adobe XD i jak zaimplementować niektóre grafiki z Photoshopa tylko za pomocą bibliotek.

Ale najpierw, czym właściwie jest szkielet?

Model szkieletowy to wizualna reprezentacja struktury projektu. Definiuje kości, elementy, które będą działać w twoim układzie i rozmieszczenie treści dla twojego prototypu.

Wspaniałą cechą wireframingu jest to, że jest to połączenie prostych elementów, które sprawiają, że koncentrujesz się na funkcjonalności projektu. Na tym etapie możesz rysować, nie zastanawiając się zbytnio nad stylem i projektem.

Musisz tylko dowiedzieć się, jakie są cele twojego projektu i jak je rozwinąć poprzez wireframing przy użyciu prostych elementów. Przechodząc dalej przez modelowanie, opracowujesz najlepsze rozwiązania, ponieważ komponent zespołu zgłasza komentarze i sugestie dotyczące Twojego szkicu.

Pierwszym krokiem jest stworzenie projektu i nazwanie go „sekcjami”, a następnie sporządzenie listy „elementów”, które trzeba wykonać, aby wykonać różne kroki, aż do stworzenia ostatecznej „architektury”.

Tworzenie szkieletu „ręcznie” na początku ma sens. Pomaga rozwinąć cały pomysł na papierze (bez ograniczeń cyfrowych), a także ułatwia przepływ pomysłów. Dla tych z Was, którzy pracują w zespole, praca z papierem nie wydaje się najlepszym podejściem, jeśli chcesz podzielić się swoimi poglądami ze wszystkimi zaangażowanymi w projekt — zwłaszcza jeśli pracujesz ze swoim zespołem online.

W tym samouczku omówimy następujące kroki:

1. Utwórz model szkieletowy, wybierz i wstaw zasoby PS za pośrednictwem bibliotek;
2. Zaktualizuj pliki PS i zobacz wyniki w Adobe XD.

Stworzymy zestaw obiektów do wykorzystania w naszym makiecie. Odłożymy je na bok w naszych aktywach, ponieważ mieliśmy dodatkowy panel, z którego możemy zabrać nasze narzędzia.

Gdy skończysz, możesz go zapisać i użyć ponownie w przyszłych projektach, używając ponownie tych samych elementów i dodając również kilka innych obiektów.

Będziesz potrzebować tych elementów Photoshopa, które przygotowałem do użycia w naszym makiecie.

Oto, co stworzymy:

1 . Utwórz model szkieletowy oraz wybierz i wstaw zasoby PS przez biblioteki

Najlepszym miejscem do rozpoczęcia tworzenia szkieletu od zera jest narysowanie go najpierw ręcznie.

W tym projekcie chcę stworzyć stronę docelową dla witryny kursu online. Wiem, że muszę w nim przekazać istotne informacje. Nie musi być perfekcyjny za pierwszym razem, ale ostatecznie jego skuteczność zależy w dużej mierze od tego, jak zorganizowałem szkielet i jak ściśle pasuje do pierwotnego celu.

Pierwszy krok : Oto moje własne, ręcznie rysowane makiety.

Jak widać, nie ma na ich temat zbyt wiele informacji. Pierwszą intencją jest po prostu pokazanie, jak będzie skomponowany układ i jakie elementy należy wziąć pod uwagę. Czyste i proste.

Drugi krok : Ponownie prześlij szkielet w mniejszym rozmiarze i z kilkoma notatkami na marginesie, których używam do wyjaśnienia elementów i ich użycia:

Krok trzeci : Zacznijmy tworzyć nasz cyfrowy model szkieletowy za pomocą Adobe XD.

Otwórz Adobe XD i wybierz „Web 1920” z otwartego okna.

Zapisz swój projekt jako „Model szkieletowy”, wybierając Plik → Zapisz jako .

Po zapisaniu pliku utwórz również inny obszar roboczy dla iPhone'a ⁶ ⁄ ₇ Plus.

Kliknij przycisk A (obszar roboczy) po lewej stronie i wybierz „iPhone 6/7/8” na prawym pasku bocznym.

A oto nasze dwa obszary robocze: jeden dla komputerów stacjonarnych i jeden dla urządzeń mobilnych.

Teraz możemy zacząć tworzyć nasze obiekty szkieletowe. Podążając za naszymi odręcznymi szkicami, stworzymy teraz te same obiekty w XD.

Obraz bohatera
Wybierz narzędzie Prostokąt ( R ) i narysuj kształt w miejscu, w którym powinien znajdować się twój obraz bohatera. Następnie chwyć narzędzie Linia ( L ) i narysuj dwie linie łączące wierzchołki. Ten rodzaj kształtu reprezentuje nasz symbol zastępczy obrazu.

Pogrupuj kształt i linie i nazwij grupę „Bohaterem”:

Przejdźmy teraz do sekcji „Ikony”. Umieszczam tekst przed moimi ikonami i zamierzam przedstawić to wizualnie za pomocą kilku linii. Ponownie chwyć narzędzie Linia ( L ) i narysuj pojedynczą linię poziomą. Kliknij narzędzie Powtórz siatkę ( ⌘ + R na Macu lub CTRL + R na Windows) i przeciągnij linię, aż będziesz mieć trzy z nich.

Potrzebujemy trzech symboli dla naszych ikon, więc kliknij Elipsa / E ) i narysuj okrąg. Kliknij ponownie narzędzie Powtórz siatkę ( ⌘ + R na Macu lub CTRL + R na Windows) i utwórz trzy okręgi. Następnie wybierz przestrzeń między okręgami i przeciągnij, aby ją poszerzyć.

Sekcja funkcji
Utwórz jasnoszare tło ( #F8F8F8 ) za pomocą narzędzia Prostokąt ( R ). Powtórz kroki z poprzedniej sekcji Obraz bohatera powyżej, aby utworzyć symbol zastępczy obrazu, a następnie powtórz kroki z sekcji Ikony (również powyżej), aby utworzyć linię tekstu. Na koniec utwórz prosty przycisk za pomocą narzędzia Prostokąt ( R ).

Oto wynik końcowy:

W sekcji Referencje powtórz te same kroki co poprzednio, aby utworzyć symbol zastępczy obrazu i kilka wierszy tekstu. Jak widać na całym obrazie szkieletowym, musimy wstawić symbol cudzysłowu.

Zrobimy to za pomocą Photoshopa.

Otwórz dostarczony przeze mnie plik Photoshop, klikając ten link.

Chcę wstawić ten obraz jako symbol za pomocą Bibliotek CC.

W Photoshopie sprawdź panel Biblioteki, przechodząc do opcji Okno → Biblioteki . Utwórz nową bibliotekę, klikając małą ikonę w prawym górnym rogu (patrz zdjęcie):

Nazwałem swoją bibliotekę „Szkielet”. Możesz nadać swojej bibliotece żądaną nazwę.

Teraz kliknij i przeciągnij symbol, który chcesz umieścić w swojej bibliotece:

Przełącz się z powrotem do XD i przejdź do Plik → Otwórz biblioteki CC , a zobaczysz ostatni symbol, który właśnie przesłałeś przez Photoshopa i utworzoną bibliotekę.

Przeciągnij symbol cytatu do swojego szkieletu w XD i umieść go w dowolnym miejscu.

W przypadku sekcji „Ceny, Subskrypcja i Stopka” przedstawimy je za pomocą dodatkowych pól i wierszy, takich jak te widoczne na poniższym obrazku.

Uwaga : ikonę e-mail można znaleźć w pliku Photoshop, który udostępniłem tutaj .)

Wykonaj czynności opisane w sekcji Funkcja , aby wstawić symbol do biblioteki za pomocą programu Photoshop, otworzyć go w XD i przeciągnąć do obszaru roboczego szkieletu.

Oto wynik:

Ostatnią rzeczą, którą musimy zrobić, zanim przejdziemy dalej, jest zamówienie naszych warstw. Upewnij się, że warstwy są aktywowane, klikając ikonę warstwy ( ⌘ + Y dla Mac lub CTRL + Y dla Windows).

Pogrupuj wszystkie elementy sekcji w foldery (przypisałem im taką samą nazwę, jak sekcja, którą reprezentują). W ten sposób wszystkie elementy zostaną uporządkowane i nie będziesz miał trudności z ich szybkim odnalezieniem (patrz obrazek).

Skończyliśmy już z naszym szkieletem!

W następnym kroku zbudujemy nasz projekt, korzystając z naszego szkieletu i odkryjemy, jak błyskawicznie modyfikować elementy bibliotek.

2. Dodawanie warstwy wierności do modelu szkieletowego

Właśnie skończyliśmy nasz szkielet i w tym momencie możemy go ponownie sprawdzić, aby zobaczyć, czy czegoś nie przegapiliśmy. Gdy już upewnimy się, że w makiecie mamy wszystkie niezbędne informacje, możemy podzielić się nimi z zespołem projektowym.

Jesteśmy gotowi, aby przejść dalej i zaktualizować nasz model szkieletowy, aby był „na żywo” za pomocą obrazów, kolorów i kopii zastępczej.

Śmiało i stwórz swój projekt. Powiel swój szkielet, zapisując go pod inną nazwą (np. „Szkielet-Układ”).

Najpierw potrzebujemy obrazu do naszej sekcji Bohaterów (poszedłem dalej i użyłem tego autorstwa Priscilli Du Preez z Unsplash. .)

Otwórz obraz w Photoshopie i zmniejsz rozmiar obrazu, klikając Obraz → Rozmiar obrazu i ustaw szerokość na 3000px:

Zapisz obraz, a następnie przeciągnij go do swoich bibliotek.

W XD przeciągnij obraz z bibliotek do obszaru roboczego. Niech pasuje do kształtu, który właśnie utworzyliśmy jako symbol zastępczy obrazu.

Do tego obrazu dodam logo i tekst; Potrzebuję trochę ciemniejszego obrazu, aby informacje były łatwe do odczytania. Wróć do Bibliotek Photoshopa i kliknij dwukrotnie obraz w panelu. Po otwarciu obrazu przejdź do panelu Warstwy, wybierz warstwę obrazu i kliknij Dodaj styl warstwy na dole panelu. Ustaw kolorową nakładkę z ustawieniami, jak pokazano poniżej:

Zapisz go, a zostanie automatycznie zapisany we wszystkich twoich bibliotekach. Przełącz się z powrotem na XD, a zobaczysz zaktualizowany obraz w obszarze roboczym (nie musisz ponownie przeciągać go z biblioteki).

Uwaga : w zależności od rozmiaru obrazu aktualizacja bibliotek może zająć trochę więcej czasu.

Teraz wstawmy nasze logo. Otwórz plik Photoshopa i przeciągnij „Dowiedz się!” logo do bibliotek. To jest czcionka, której użyłem.

Ponieważ nasze tło jest ciemne, będziemy potrzebować białego logo. Przełącz się z powrotem do Photoshopa i kliknij dwukrotnie logo z Bibliotek.

Chwyć narzędzie Tekst, zaznacz tekst logo i ustaw go na biało. Zapisz go, a zostanie on automatycznie zapisany również w obszarze roboczym XD.

Wstaw tekst i przycisk, aby zakończyć sekcję Bohater.

Następnie wypełnię następną sekcję, dodając tekst i ikony. Te, których użyłem, pochodzą z darmowego pakietu, który stworzyłem dla Smashing Magazine, który można znaleźć tutaj.

Tak jak poprzednio, otwórz ikony i dodaj je do swoich bibliotek w Photoshopie, a następnie przełącz się z powrotem do XD, aby umieścić je w modelu szkieletowym. Oto wynik:

Teraz przejdziemy do sekcji Funkcje . Tak jak poprzednio, przeciągniemy obraz do symbolu zastępczego obrazu (użyłem tego obrazu autorstwa Sonnie Hiles znalezionego na Unsplash). Dodaj tekst i przycisk, jak pokazałem w poprzednich krokach powyżej.

Otwórz dostarczony przeze mnie plik Photoshopa i dodaj symbol wyboru do swoich bibliotek. Otwórz Biblioteki w XD i umieść ikonę obok tekstu. Użyj siatki powtórzeń, aby wykonać trzy jej kopie:

Zmieńmy teraz kolor symbolu wyboru. Wróć do Photoshopa, otwórz go z Bibliotek i nadaj mu kolorową nakładkę, jak pokazano poniżej:

Zapisz go i zobacz, jak Twoje ikony w XD są bezpośrednio aktualizowane.

Teraz dokończmy nasz układ.

W sekcji Referencje dodaj tekst i obraz do referencji (wziąłem swoją z UI Faces).

Na koniec dodamy informacje dotyczące sekcji Cena , sekcji Subskrybuj i stopki. Tabele cen można znaleźć w dostarczonym przeze mnie pliku Photoshop. Przeciągnij je do swoich bibliotek w Photoshopie, a następnie otwórz Biblioteki w XD i przeciągnij je do swojego obszaru roboczego. Możesz je dowolnie modyfikować.

I… gotowe!

Wniosek

W tym samouczku nauczyliśmy się, jak pracować z Photoshopem i Adobe XD, aby stworzyć szkielet, a następnie jak szybko dodać do niego wierność, modyfikując elementy Bibliotek. W celach informacyjnych stworzyłem mobilny model szkieletowy, którego możesz użyć do ćwiczenia i podążania za tym samouczkiem. Postępuj zgodnie z instrukcjami, tak jak w przypadku wersji na komputery, aby dodać tekst i obrazy.

Zobaczę Twój wynik w komentarzach!

Ten artykuł jest częścią serii projektów UX sponsorowanych przez firmę Adobe. Narzędzie Adobe XD zostało stworzone z myślą o szybkim i płynnym procesie projektowania UX, ponieważ pozwala szybciej przejść od pomysłu do prototypu. Projektuj, prototypuj i udostępniaj — wszystko w jednej aplikacji. Możesz zapoznać się z bardziej inspirującymi projektami stworzonymi za pomocą Adobe XD w serwisie Behance, a także zapisać się do biuletynu Adobe Experience Design, aby być na bieżąco i otrzymywać informacje o najnowszych trendach i spostrzeżeniach dotyczących projektowania UX/UI.