Adobe XD: Wymiana plików z Aplikacjami Adobe

CC 2020+

0:00Cześć! Witaj w kolejnej lekcji,

0:01w której, mam nadzieję,

0:01ostatnie niezbędne minimum teorii,

0:04czyli to jak wymieniać dane pomiędzy aplikacjami Adobe.

0:07Akurat uważam że ogromną zaletą XD w porównaniu np. do Sketch'a czy Figmy,

0:12które często trochę są lepsze

0:15w takim codziennym użytkowaniu i w takiej przyjazności z użytkowania,

0:19o tyle Adobe XD ogromna zaleta, którą posiada to fakt,

0:23że może współpracować z innymi aplikacjami Adobe.

0:26I jeśli korzystasz z Photoshop'a

0:28czy Ilustratora, z Photoshop'a do edycji grafik np. na banery,

0:32z Ilustratora do edycji przykładowo ikon,

0:34no to uważam, że jest to genialna sprawa,

0:36ponieważ między tymi aplikacjami można wymieniać dane.

0:39Aczkolwiek niestety nie jest to aż tak intuicyjne jak by się chciało.

0:42Pierwszy zawodnik to Ilustrator i z niego będę chciał przerzucić dane do Adobe XD.

0:47Najlepszy sposób na zrobienie tego to po prostu zaznaczam to, co chcę przerzucić,

0:51Command C i Command V w XD,

0:53czyli mówiłem, że nie tak prosto

0:55a jednak bardzo prosto i tak jak powinno być,

0:58ponieważ przechodzi to w formacie wektorowym.

1:00Jak widzisz mamy tutaj dostępne wszystkie ścieżki,

1:03ścieżki są edytować wszystko działa prawidłowo, tak jak byśmy tego chcieli.

1:08Możemy to spokojnie sobie skalować na różne ekrany i rozdzielczości

1:12i ładnie, proporcjonalnie się wszystko skaluje.

1:14Niestety nie ze wszystkimi grafikami będzie tak różowo

1:18zwłaszcza tymi tworzonymi z Adobe XD.

1:20Zobacz, w tym momencie, gdy chciałem stworzyć podobny kształt,

1:24tutaj mogę zrobić sobie zaokrąglone narożniki

1:27a następnie np. ustawić rozmiar obramowania na 10.

1:31Teraz problemem w Adobe XD jest to,

1:33że skalując teraz ten obiekt, zobacz, że ja mogę sobie go skalować z Shiftem z Altem,

1:37ale cały czas rozmiar tego obramowanie pozostaje 10,

1:42czyli jeżeli zaczynam skalować w dół,

1:46chcę np. zmniejszyć ikonę,

1:48to wszystkie stroke'i zostają tak jak są

1:50i w przypadku Sketch'a czy Figmy,

1:52gdzie mamy osobne opcje zwykłego skalowania i skalowania proporcjonalnie,

1:58tutaj, w przeciwieństwie właśnie do tych narzędzi, tego nie ma.

2:01W związku z tym zamiast to usuwać,

2:02polecam ci jedną rzecz jeszcze z wykorzystaniem Ilustratora

2:05jeśli skopiujesz taki kształt, przynajmniej na razie może to jest jakiś work around,

2:10ponieważ pewnie w XD no stworzą to skalowanie.

2:12To jest jedna z podstawowych rzeczy która powinna w takim narzędziu się znaleźć.

2:16Ale dopóki tego nie ma, to możesz wspomagać się Ilustratorem w następujący sposób:

2:21Wklejasz z pomocą Command C i V do Ilustratora taki kształt.

2:24Następnie w Ilustratorze wybierasz polecenie "Object",

2:28stąd idziesz do ścieżki czyli "Path"

2:30i wybierasz polecenie "Outline stroke".

2:32W tym momencie jakby niby nic się nie zmieniło,

2:35ale w momencie gdy sobie skopiujesz i wkleisz taki kształt z powrotem,

2:40zobacz, że teraz skalowanie w XD przebiega proporcjonalnie.

2:43Oczywiście to plus i minus w zależności od rozwiązania.

2:47Natomiast często jest tak, że mamy ikonę stworzoną w XD,

2:50chcemy ją przeskalować ona ma outline'y i niestety nie udaje się to.

2:53Więc to jest trik, z którego ja bardzo często korzystam.

2:56Natomiast, tak jak wspomniałem, przenoszenie rzeczy z Ilustratora do Ilustratora w drugą stronę

3:02jak zobaczyłeś, nie ma z tym żadnego problemu. Świetnie.

3:05Gorzej sprawy się mają z Photoshop'em.

3:07W Photoshop'ie co do zasady możemy mieć bitmapę

3:11ale możemy też mieć wektory.

3:14W przypadku bitmap mam tutaj warstwę bitmapową,

3:16gdybym chciał zaznaczyć tę warstwę i ją po prostu skopiować

3:19Command C

3:20a następnie wkleić w XD, nic się nie stanie.

3:22Po prostu nie da się tego zrobić.

3:23Nie działa ta funkcja.

3:25W przypadku kopiowania bitmap z Photoshop'a działa coś takiego:

3:27wybieramy M na klawiaturze czyli narzędzie Mark'i.

3:30Następnie zaznaczamy sobie to, co chcemy skopiować i wybieramy teraz Command C

3:35i wklejamy to z pomocą Command V do Adobe XD.

3:39I rzeczywiście w tym momencie wkleiliśmy,

3:41ale oczywiście już nie wektor, tylko bitmapę.

3:44No bo natywnie w Photoshop'ie była to w ogóle bitmapa.

3:47Jeśli mamy zaznaczone różne warstwy, bo akurat Command C po zaznaczeniu skopiuje nam coś

3:51z tej aktywnej zaznaczonej warstwy,

3:53jeżeli mamy różne warstwy i chcemy skopiować wszystko to, co zaznaczyliśmy,

3:56wybieramy w Photoshop'ie polecenie edycji a następnie polecenie "Copy merged".

4:02Wtedy skopiuje nam się do schowka wszystko,

4:05co jest widoczne pod selekcją i możemy to z pomocą Command V wkleić do Adobe XD.

4:10No ale, tak jak wspomniałem,

4:12raczej nie chcielibyśmy w XD mieć praktycznie żadnych bitmap.

4:16Z kolei w Photoshop'ie, jak wiadomo,

4:18możemy pracować także z wektorami.

4:19Mogą to być wektory zaimportowane z Ilustratora ale też stworzone natywnie w Photoshop'ie.

4:23Wtedy jednym z rozwiązań jest kliknięcie prawym przyciskiem na warstwę,

4:27która jest wektorowa.

4:28Ta akurat nie jest, więc nie ma tych opcji dostępnych,

4:30ale warstwa wektorowa powinna mieć dostępną opcję Copy SVG.

4:33Jeśli pijemy kod SVG, wtedy po prostu

4:36Command V w XD powinien nam wkleić właściwą grafikę

4:39i tym możemy poratować się także w przypadku innych aplikacji

4:43takich jak Figma czy Sketch w razie gdyby import z

4:46pomocą Command C i Command V nie działał.

4:48Tam akurat działa całkiem nieźle.

4:50Ale pamiętaj o tym, że jeśli w schowku masz kod SVG, to Adobe XD zinterpretuje to

4:55jako grafikę i w ten sposób możesz też z innych aplikacji to przerzucić.

4:58Natomiast w przypadku Photoshop'a jak i innych aplikacji Adobe,

5:02Polecam coś zupełnie innego.

5:03Polecam uruchomić sobie panel "Libraries", który znajduje się w każdej aplikacji Adobe.

5:08Dzięki temu możesz wymieniać informacje np. z After Effects'em.

5:11I te informacje będą w takiej formie jak najbardziej edytowalnej,

5:15czyli jeśli masz tutaj wektor, przykładowo to jest kształt, który narysowałem wektorowo w Photoshop'ie

5:21to, co możesz zrobić, to, po prostu, przeciągnąć i upuścić go do panelu "Libraries",

5:25do konkretnej biblioteki a tutaj mam akurat "Your Library"

5:28jakąś pierwszą bibliotekę utworzoną.

5:30Oprócz tego, że możesz tutaj wrzucać takie grafiki,

5:33Możesz także z zaznaczonej warstwy wrzucić style tekstu, foreground czy fill color itd..

5:39I w tych bibliotekach mogą się znajdować wszystkie te informacje.

5:43I teraz te informacje bardzo łatwo można przerzucić do Adobe XD.

5:46Wystarczy, że uruchomię sobie tutaj panel bibliotek czyli przejdę do "File"

5:50a następnie "Open CC Libraries" albo skrót Shift Command L.

5:53Alternatywnie mogę kliknąć w panel "Assets"

5:56i tutaj znajduje się ikonka do bibliotek.

5:58To wszystko prowadzi do otwarcia panelu "CC Libraries".

6:01Wystarczy że wybierzesz odpowiednio tę samą bibliotekę.

6:04I teraz mogę przeciągnąć rectangle.

6:06I ma on właściwości wektorowe.

6:08Jeśli to był wektor zachowa on wszystkie właściwości, będzie bezstratnie skalowalny.

6:12Natomiast w panelu warstw wygląda on trochę inaczej

6:14niż normalny wektorowy kształt i nie daje się edytować np.

6:17nie daje się zmienić jego kolor.

6:19Dlaczego?

6:20Dlatego że posiada tu malutki link,

6:22który sygnalizuje, że jest cały czas połączony z biblioteką Adobe Creative Cloud.

6:27To znaczy, że ten kształt jest edytowalny przez Photoshop'a.

6:31No, bo stamtąd się wziął.

6:32Mogę dwukrotnie kliknąć na takim elemencie

6:35a zostanie on automatycznie otwarty w programie Adobe Photoshop.

6:39Nie mógłbym edytować go tu na canvas'ie.

6:41On po prostu jest w bibliotece.

6:42Jak dwa razy kliknę w bibliotece, to po prostu otwiera się jako osobny plik PSD

6:46i teraz mogę edytować jego właściwości i przykładowo zmienić kolor i zapisać tę zmianę.

6:50Są one synchronizowane automatycznie do biblioteki po tym jak ja zapisze ten plik tutaj.

6:56Zobacz w bibliotece już się zmieniło.

6:58Tutaj też i odświeża się również w Adobe XD.

7:01Czyli w ten sposób możemy wszystkie zmiany synchronizować.

7:04Jeśli np. mamy jakąś bibliotekę ikonek czy kolorów

7:07mogą być one połączone z biblioteką w ten sposób.

7:10I jedyny minus jest taki,

7:11że oczywiście nie da się teraz tego edytować w samym Adobe XD.

7:15W związku z tym

7:16to w jaki sposób ja najczęściej, szczerze mówiąc, wykorzystuję biblioteki CC,

7:21to jest po prostu żeby na szybko, jako taki schowek, taki podręczny magazyn

7:26przerzucać sobie pliki między jednym a drugim programem.

7:28Nie za bardzo korzystam z tych funkcji podlinkowania

7:31i zmiany właśnie w jednym miejscu

7:34tak, żeby mi się zaaktualizowało tutaj,

7:36ponieważ XD ma trochę inne funkcje, które umożliwiają to.

7:40Są to komponenty i o nich porozmawiamy jeszcze.

7:42Natomiast jest to taka alternatywna opcja.

7:45Możesz też korzystać z bibliotek.

7:46W tym przypadku, gdy chcesz edytować taki obiekt wystarczy,

7:48że teraz klikniesz na nim prawym przyciskiem myszy

7:51albo prawym przyciskiem myszy na jego instancji w panelu warstw

7:55i wybierzesz polecenie "Unlink graphic".

7:57Tutaj zresztą wskazuje też opcję "Edit in Photoshop", moglibyśmy to edytować stąd bezpośrednio.

8:01Problem niestety polega na tym, że akurat grafiki z Photoshop'a

8:05też przenoszone będą, niestety, jako bitmapy.

8:07Jest to ikonka smutnej bitmapy, która tutaj jest

8:09i de facto wszystkie zmiany nie, już nie będą jakby teraz dotyczyły tego elementu wektorowego

8:17te właściwości wektorowe niestety tracimy,

8:19w związku z tym też, moim zdaniem, nie ma to jakiegoś tutaj większego sensu.

8:23Usunę to zarówno z bibliotek jak i u mnie.

8:26Jeżeli bym usunął, rzecz jasna, z biblioteki samej

8:30a zostałoby to tutaj podlinkowane,

8:32to ta grafika by nie zniknęła ale miałbym informację o tym,

8:35że ten link wygasł, jest popsuty i po prostu jakoś musiałbym to naprawić.

8:40Natomiast, tak jak wspomniałem, jak widzisz

8:42z Photoshop'a tak czy inaczej otrzymujemy tutaj bitmapę,

8:46więc jedyna opcja z Photoshop'a przenoszenia wektorów to prawym przyciskiem myszy i kopiowanie tutaj kodu CSV.

8:51Natomiast tak, czy inaczej polecam robić to jednak z Ilustratora

8:55i chyba najprostszym sposobem jest jednak

8:57kopiowanie tego do jakiejś podręcznej biblioteki i przerzucania

9:01albo po prostu Command C i Command V z Ilustratora.

9:03To jest sposób, który, w mojej ocenie, działa najszybciej.

9:06Aczkolwiek pamiętaj jeszcze, że masz do dyspozycji pewną ostateczność,

9:09czyli zapisywanie z dowolnej aplikacji

9:11i nie musi to być nawet Photoshop czy Ilustrator,

9:13ale może to być Corel czy After Effects,

9:15czy każda inna aplikacja, która pozwala na zapisanie plików wektorowych,

9:19czyli plików SVG również.

9:20I często korzystam z tego sposobu

9:22ze Sketch'a czy z Figmy.

9:24W momencie gdy importuje do XD bardziej skomplikowane grafiki

9:27przy prostych kształtach wektorowych

9:29po prostu Command C i V działa całkiem nieźle do XD,

9:32natomiast, gdy jest tam dużo efektów, jakieś cienie, różne takie rzeczy,

9:35to już Command C, Command V może nie zadziałać zbyt dobrze

9:38i wtedy rozwiązaniem jest zapisanie takiej grafiki do pliku .svg.

9:43Możemy to zrobić w Figmie czy Sketch'u

9:45w każdym z tych programów.

9:47Możemy to zrobić też w Ilustratorze zaznaczając np.

9:50to, co chcemy wyeksportować i wybierając polecenie "Export Selection".

9:53To chyba najprostszy sposób.

9:54Tutaj zaznaczamy tylko odpowiedni format,

9:56czyli format .svg, pozostałe nie są mi potrzebne.

9:59I eksportuję ten asset jako .svg.

10:01To jest jeden chyba z miliona sposobów na jaki można te .svg wyeksportować.

10:05Natomiast jedna rzecz jest warta zapamiętania.

10:07Gdybyś eksportował, czyli zapisywał ten cały plik jako .svg,

10:10czyli eksportował cały artboard jako .svg,

10:12to będziesz miał niepotrzebnie mnóstwo białego miejsca po wyciągnięciu takiej ikonki do XD.

10:17Więc polecam zaznaczyć to, co rzeczywiście chcesz wyeksportować.

10:21Wtedy przejść do "Object" a następnie "Artboards" i polecenie, wybrać polecenie

10:26"Fit to selected art",

10:28czyli zmniejszyć ten artboard tak,

10:30żeby przy poleceniu "File save",

10:32przy zapisywaniu go jako .svg było wyeksportowane tylko to, co potrzeba.

10:35Photoshop również pozwala na eksport plików .svg

10:38i również mogą one, zachowując wartości wektorowe, walory wektorowe,

10:42zostać zaimportowane wtedy z powrotem do XD.

10:45No i jeszcze jedna metoda, może też z niej będziesz korzystał.

10:49Po prostu z polecenia "File open"

10:51albo przerzucenia konkretnego pliku .ai czy .psd zostanie on poprawnie zaimportowany do XD.

10:58W związku z tym jeśli ja teraz wskaże XD np.

11:01plik Ilustratora, w którym zapisałem tę ikonkę,

11:04czyli "Icon.ai" zostanie otwarty nowy plik XD.

11:08Zobacz, artboard tutaj się zgadza, wielkość

11:10ale generalnie mamy o, no właśnie, to jest ten problem ze skalowaniem

11:12muszę Shift przytrzymać, żeby to mi się skalowało,

11:15ale mamy zaimportowane wszystko z tego pliku .ai bardzo ładnie,

11:19czyli "File open" działa.

11:20W przypadku Photoshop'a zadziała to również,

11:23czyli jeśli wybiorę na komputerze plik, który jest z rozszerzeniem .psd

11:28i otworzę go w XD z pomocą "File open" zostanie też zaimportowany.

11:32I tu, jako jedno z niewielu rozwiązań,

11:34otrzymujemy z Photoshop'a wektor.

11:36Także możesz spróbować w ten sposób zaimportować sobie wszystkie warstwy z Photoshop'a. Photoshopa zostaną tutaj ładnie za

11:42Zostaną tutaj ładnie importowane i zachowują one te właściwości wektorowe.

11:45Także myślę, że to już wszystkie sposoby.

11:47Będziesz pewnie z różnych sposobów korzystał

11:49a więc chciałem przedstawić Ci je wszystkie, potrenuj.

11:52I do usłyszenia w kolejnej lekcji.