Jak tworzyć grafikę za pomocą Adobe XD: Przewodnik dla początkujących

Adobe XD to potężne narzędzie, które umożliwia tworzenie projektów UI/UX dla oprogramowania, aplikacji, stron internetowych i nie tylko. Obejmuje to również tworzenie makiet, prototypów i niestandardowych komponentów interfejsu użytkownika dla interfejsu. Za pomocą programu Adobe XD można tworzyć zarówno proste, jak i złożone projekty.

W tym miejscu opiszemy, jak dodać prostą grafikę, w tym kształty, obrazy i tekst do nowego projektu Adobe XD. Następnie pojawi się przewodnik dotyczący konwertowania grupy kształtów na składniki i ponownego wykorzystania tych składników na stronie. Na koniec w artykule dowiesz się, jak wyeksportować grafikę. Wskoczmy od razu.

Tworzenie projektu Adobe XD

Tworząc nowy projekt Adobe XD, należy wybrać rozmiar układu dla swojego projektu. Udostępnia kilka szablonów do wyboru w oparciu o niektóre popularne urządzenia.

Kilka przykładów to iPhone X/XS/11 Pro (375 pikseli na 812 pikseli), iPad (768 na 1024 pikseli) lub Web 1920 (1920 na 1080 pikseli). Alternatywnie możesz również wybrać niestandardową szerokość i wysokość dla swojego projektu.

Po utworzeniu nowego projektu Adobe XD otworzy pustą stronę. Tutaj możesz zacząć dodawać obrazy, kształty, tekst lub inne elementy projektu. W zależności od posiadanej wersji Adobe XD możesz być w stanie: poznaj niektóre z nowych funkcji oferowane przez Adobe XD.

Elementem projektu najwyższego poziomu jest sama strona kanwy. Jeśli go podświetlisz, możesz użyć prawego panelu, aby bezpośrednio zmienić niektóre jego właściwości, takie jak szerokość lub wysokość płótna.

Jak dodawać obrazy

Istnieje wiele sposobów dodawania obrazów do projektu Adobe XD.

• Pierwszą opcją jest kliknięcie na Hamburger ikonę menu u góry lewej kolumny. Kliknij Importi otwórz plik, który chcesz dodać.
• Inną opcją jest przejście do obrazu w eksploratorze plików i przeciągnięcie pliku bezpośrednio do Adobe XD.
• Trzecią opcją jest skopiowanie i wklejenie obrazu, jeśli masz go otwarty w innym oprogramowaniu, takim jak Microsoft Word.

Jak zmienić rozmiar i położenie obrazu

Możesz zmienić pozycję i zmienić rozmiar obrazu bezpośrednio na płótnie lub zmieniając jego właściwości.

1. Podświetl obraz. Gdy zaznaczysz element projektu na płótnie, będziesz mógł zobaczyć jego właściwości w prawym panelu.
2. Zmień szerokość i wysokość obrazu. Są one reprezentowane przez W oraz H pola.
3. Możesz także zmienić X oraz Y współrzędne miejsca, w którym zaczyna się lewy górny róg obrazu.
4. Aby przesunąć obraz, kliknij i przeciągnij obraz po płótnie.
5. Aby zmienić rozmiar, przeciągnij punkty znajdujące się na krawędziach obrazu.

Jak wyregulować krawędzie obrazu

Możesz dostosować rogi obrazu, aby zmienić jego kształt.

1. Podświetl obraz.
2. Zobaczysz kilka punktów znajdujących się wokół obrazu. Dodatkowo w rogach obrazu znajdują się również punkty.
3. Kliknij i przeciągnij punkt znajdujący się wewnątrz obrazu. Spowoduje to powolne przekształcenie obrazu w inny kształt.

Jak dodać inne efekty do obrazu

Możesz dalej manipulować obrazem, dodając efekty. Obejmuje to krycie, granice, efekty rozmycia i inne.

1. Zaznacz obraz i zmień Otempo w prawym okienku.
2. Pozostając w prawym okienku, zmień kolor Bzamówienie. Tutaj możesz również zmienić grubość, styl kreski, oraz styl narożny granicy.
3. Dodaj efekt rozmycia do obrazu i zmień Wielkość rozmycia obiektu aby zwiększyć lub zmniejszyć intensywność rozmycia.

Jak dodawać kształty

Możesz dodawać kształty w Adobe XD za pomocą panelu po lewej stronie.

1. W panelu po lewej stronie możesz utworzyć wiele podstawowych kształtów, w tym prostokąt, okrąg, trójkąt i linię. Wybierz kształt, który chcesz narysować.
2. Kliknij dowolny punkt na płótnie i przeciągnij kursor, aby rozpocząć tworzenie kształtu.

Jak dodać niestandardowe kształty

Możesz użyć narzędzia do tworzenia własnych kształtów, aby utworzyć własny kształt.

1. W lewym okienku wybierz długopis Ikona.
2. Kliknij w dowolnym miejscu na kanwie, aby dodać pierwszy punkt lub „róg” kształtu. Dla każdego punktu kształtu kliknij kanwę w obszarze, w którym chcesz, aby był.
3. Po zakończeniu tworzenia kształtu naciśnij misc klawisz na klawiaturze.

Jak zmienić kolor kształtu

Możesz zmienić kolor kształtu za pomocą prawego panelu.

1. Zaznacz kształt.
2. W prawym okienku zmień Fchory.
3. Dodatkowo możesz także dodawać obramowania, efekty rozmycia i zmieniać krycie kształtu w taki sam sposób, jak obrazy.

Jak dodać tekst

Możesz także dodawaj i edytuj tekst w ten sam sposób, w jaki dodajesz kształty.

1. Kliknij na Tekst w lewym panelu.
2. Kliknij w dowolnym miejscu na płótnie, aby dodać nowe pole tekstowe. Wpisz żądany tekst w polu tekstowym.
3. Użyj prawego panelu, aby edytować rozmiar, rodzina czcionek, oraz wyrównanie pola.

Jak tworzyć komponenty

Komponent to grupa elementów projektu, które można ponownie wykorzystać. Aby utworzyć i używać komponentu, najpierw musisz mieć grupę kształtów lub inne obiekty projektowe.

1. Zaznacz grupę kształtów na płótnie. Kliknij grupę prawym przyciskiem myszy i wybierz Zrób komponent.
2. U dołu lewego panelu kliknij Aktywa. Otworzy się nowe menu z listą wszystkich posiadanych zasobów, w tym właśnie dodanego komponentu.
3. Kliknij i przeciągnij komponent z listy komponentów na kanwę. Spowoduje to utworzenie dokładnie tej samej grupy elementów.

Jak eksportować przedmioty

Możesz eksportować pojedyncze elementy, jak również całą stronę.

1. Jeśli chcesz wyeksportować pojedynczy element, zaznacz element, który chcesz wyeksportować.
2. Kliknij na Hamburger ikona menu na górze lewej kolumny.
3. Wybierz Eksport, a następnie kliknij Wybrany.
4. Jeśli chcesz wyeksportować całą stronę (lub wszystkie strony), wybierz Wszystkie obszary robocze zamiast.
5. Możesz określić format pliku (PNG, JPG, SVG lub PDF), przeznaczenie eksportowanego elementu (np. Internet lub iOS) oraz miejsce, w którym chcesz zapisać plik.

Zdobądź umiejętności w Adobe XD

To tylko podstawy. Niektóre inne funkcje obejmują możliwość dodawania hiperłączy, symboli, integracji aplikacji i zestawów interfejsu użytkownika. Adobe XD od czasu do czasu udostępnia również nowe funkcje, które pomagają ulepszyć i usprawnić tworzenie makiet i niestandardowych projektów interfejsu użytkownika.

Dostępnych jest wiele kursów online, które pomogą Ci przenieść nowe umiejętności projektowania na wyższy poziom.

Te kursy Adobe zmienią Cię w mistrza Creative Cloud

Czytaj dalej

O autorze