Adobe XD: Eksport grafik

CC 2020+

0:00Cześć Witaj w kolejnej elekcji w której

0:01chciałbym pokazać Ci jak eksportować zasoby graficzne xD.

0:05Jest to bardzo proste więc będzie tak

0:06krótka lekcja a eksportować można co do zasady na dwa sposoby.

0:10Pierwszy polega na tym że chcemy eksportować tu i teraz jakiś jeden Asset

0:15jeden zasób czyli przykładowo ikonę i wtedy możemy zaznaczyć taki zasób możemy

0:20zaznaczyć w zasadzie dowolną rzecz czyli grupę warstwę albo np.

0:25grafikę którą mamy za importowane a następnie przechodzimy do polecenia fail

0:29wybieramy polecenie eksport i wybieramy eksport Select albo wciska Commander.

0:34Dużo prościej w tej sytuacji będziemy eksportować całą

0:38sekcję pierwszą w postaci przykładowo pliku PNG.

0:42Drugi sposób na eksportowane.

0:44To sposób który polega na zaznaczenia elementów do eksportu.

0:48Znajduje się w prawej dolnej części panelu

0:50Properties taka jak Box Mark for Export i możemy znów zaznaczyć sobie dowolną rzecz

0:57czy to warstwę czy grupę czy komponent a następnie zaznaczyć go do eksportu.

1:01Domyślnie zaznaczone są do eksportu

1:03grafiki które importuje my czyli pliki JPG PNG i S G.

1:07Więc domyślnie np.

1:08ta grafika jest zaznaczona do eksportu możemy ją oznaczyć możemy oznaczyć więcej

1:13opcji i w ten sposób zaznaczając dla eksportu będziemy mogli na koniec

1:18eksportować razem wiele plików wybierając polecenie File eksport i polecenie.

1:23W tym momencie wszystkie te pliki zostaną

1:25wypisane zapisane w jednym formacie który sobie tutaj wybierzemy.

1:30Jedno zastrzeżenie eksportowane arboretum trochę się różni.

1:33Nie możemy tutaj wybrać opcję Mark for Export.

1:35Szkoda ale możemy za to zaznaczyć sobie taki Art Burt jeden albo wiele ich tam i

1:41po prostu przejść do polecenia File Explorer Select

1:45albo mamy też opcję eksportu wszystkich Art-B lordów czyli wybieramy polecenie o

1:49AdWords i możemy eksportować wszystkie pliki graficzne.

1:54Kolejna ważna rzecz to formaty jeśli wcześniej Command zdecydujemy się

1:57cokolwiek eksportować to formaty jakie mamy do dyspozycji są

2:01cztery możemy eksportować pliki PNG jest przezroczysty tłem możemy eksportować JPG

2:06czyli dwa popularne formaty bit masowe i mamy dwa formaty sektorowe

2:10PDF jest kontrolerem który może wszystko zawierać a g to preferowany format przy

2:16eksporcie do sieci oczywiście wektorów xD powinniśmy pracować raczej na torach

2:21więc to będzie jeden z najczęściej wybieranych formatów w momencie gdy

2:24eksportujemy ikonki albo jakieś inne elementy graficzne takie

2:28które mamy tutaj też powinniśmy eksportować w S V g zarówno Stirling jak i

2:32Side i są to atrybuty które związane są raczej z Development em.

2:36Więc może więcej o tym w części poświęconej handlowi natomiast generalnie

2:41sprowadza się do tego czy M.B. budujemy obrazki wewnątrz tego pliku czy je linku

2:46do takiego pliku jak również czy i w jaki sposób chcemy

2:50kontrolować ewentualnie właściwości tych obrazków.

2:53Przykładowo z poziomu CSS a umożliwiając np.

2:56zmianę tła z tego poziomu czy zmiana jakiegoś koloru

3:00i możliwość zoptymalizowane wielkości pliku czyli zminimalizowania.

3:04Często się przydaje.

3:05To są domyślne ustawienia które zazwyczaj wykorzystuję przy eksporcie plików S V G.

3:11W przypadku plików PNG nie mamy tutaj zbyt

3:13dużo ustawień w przypadku i od tagów są to podobne ustawienia ale dodatkowo dochodzi

3:17Quality które możemy wpisać z palca albo wybrać sobie listę

3:21i ważne ustawienia w przypadku tych plików to opcje które możemy zaznaczyć czy

3:26Design Web a w przypadku plików PNG jest tego jeszcze więcej bo o to chodzi.

3:30IOS i Android na co pozwalają te opcje

3:32jeśli wybierzemy polecenie eksport for Design to po prostu zostanie eksportowane

3:36jeden obrazek w rozmiarze takim jak go stworzyliśmy na K2 czyli 1240 724.

3:42Ale jeżeli zaznaczył łeb to dodatkowo otrzymamy z tego jeszcze wersję dwa razy

3:47większą czyli 2 tysiące 484 i będzie to wersja która będzie się nadawała np.

3:54na ekrany Retina.

3:55Do budowania na naszą stronę i zmiany w momencie gdy ktoś ma większą gęstość

3:59pikseli więc tę opcję łeb przeznaczamy wtedy kiedy

4:03eksportujemy do sieci i chcemy mieć te lepsze zasoby też przygotowane.

4:06Rzecz jasna wszystko musi być sektorowe.

4:08Jeśli projektu w skali 1 to w jakiej skali projektowa my ustalamy właśnie tutaj

4:14będziemy praktycznie zawsze projektować w skali 1 niektóre jakieś idee.

4:18Coś może być przygotowane w skali 2 czyli

4:20w skali rzeczywistych pikseli które mamy np.

4:23na ekranie Retina ale my raczej się staramy projektować w skali 1 czyli

4:27poprzez malowaniu jak to będzie widoczne na użytkownika czyli 1366 to jest projekt

4:32w skali 1 i to zostawiamy i teraz eksportujemy do nieba dostaniemy dwa

4:36rozmiary jeden raz i dwa razy więc musimy zadbać o to że jeśli byśmy mieli np.

4:42mapę to ona pod spodem miałaby tą

4:44rozdzielczość pozwalającą na eksportowane do dwukrotnie większego rozmiaru.

4:49Mówiłem o tym już przy

4:51dodawania obrazków do ich SDK importowanych tutaj

4:54i u nas mają ma 3 skale a Android ma chyba 5 skal i też decydujemy w jaki.

5:00Rozpoczęliśmy projektowanie w każdym

5:02przypadku polecam wam zawsze rozpoczynać od skali 1 czy 100 proc.

5:05dla Androida i oczywiście eksportować pliki tutaj zgodnie z tą specyfikacją.

5:10W przypadku platform mobilnych niestety

5:12będziemy mieli pliki PNG z którymi trzeba będzie pracować ewentualnie PDF np.

5:16dla iOS a a w przypadku webOS zdecydowanie polecam s v.

5:20Jeśli tylko mamy do dyspozycji wektory PDF.

5:23Kiedy używamy chyba tylko wtedy jak chcemy jakiemuś klientowi albo komuś pogląd owo

5:28przesłać cały Art Board lub też kilka albo lordów możemy je zaznaczyć i wtedy albo

5:33eksportować do jednego pliku albo do wielu plików PDF i wysłać jako jakiś projekt.

5:38Nie przypominam sobie żebym w ogóle

5:40kiedykolwiek użył tej funkcji w Adobe Excel.

5:43Jeśli chodzi o eksportowanych zasobów to

5:44wszystko xD jak widać nie zawiera zbyt wiele jakichś złożone opcje eksportowe.

5:49Ma wszystko co jest potrzebne ale z

5:50drugiej strony czasem przydałoby się jeszcze kilka dodatkowych funkcji w

5:54związku z tym mam nadzieję że Adobe szybko je Doda.

5:56Polecam Ci pozostać na bieżąco z datami które dość często wychodzą do xD

6:02i być może coś w tej kwestii się zmieni albo jakiś fajny plug in który ułatwia

6:05trochę porządkowanie zasobów i ich eksport.

6:09Ja w kolejnych kursach będę jeszcze mówił o tym jak przykładowo przygotować sobie

6:14pliki pod pracę w zespole a po to żeby łatwiej się eksportować dla developerów

6:19jak również właśnie w sekcji pracy zespołowej i handlowej.

6:22Będę omawiał pozostałe opcje które są w

6:25zasadzie jedną czyli Zeppelin czyli możliwość eksportu do zewnętrznej

6:29aplikacji która ułatwia Development na podstawie zasobów które przygotowaliśmy.

6:34Natomiast w kursie projektowania i myślę

6:36że byłoby to zbyt dużo informacji zwłaszcza dla osób które nie pracują w

6:39zespole nie pracują na bieżąco z deweloperami a raczej eksportują swoje

6:44własne zasoby tworzą własne kliki jakieś landing page albo proste projekty te

6:50informacje które przekazałem w tej lekcji na pewno będą wystarczające.

6:53Dziękuję ci bardzo za uwagę i do usłyszenia.