Jak narysować wektory izometryczne?


16

Szukam najlepiej „wbudowanego” oprogramowania dla programu Illustrator CS2-5.

Próbuję utworzyć te izometryczne ilustracje do aplikacji internetowej. W tej chwili ręcznie skonfigurowałem siatkę w programie Adobe Illustrator i wykonałem rysunki w oparciu o tę siatkę - ale nie mam żadnych prowadnic, żadnych przystawek i tego typu…

Wynik końcowy powinien być zbliżony do tego: http://www.twigital.co.uk/

Zastanawiam się, czy znasz dobre oprogramowanie do rysowania rzeczy izometrycznych, z którego mogę następnie wyprowadzić go jako wektor (.eps lub .ai), aby następnie zaimportować do programu Illustrator i poprawić im kolory i inne elementy?

Jeśli nie znasz specjalnego oprogramowania do tego celu, czy kiedykolwiek robiłeś izometryczne ilustracje w programie Illustrator? Jakieś metody? Jakieś wskazówki?

Przykładowy rysunek izometryczny wektor

EDYTOWAĆ:

Nie należy mylić rysunku izometrycznego z rysunkiem 1,2 lub 3 punktowym.

RYSUNEK IZOMETRYCZNY:

[system izometryczny to tylko konwencja / wynalazek, przydatny do wielu rzeczy, nie do reprodukcji tego, co widzą oczy w rzeczywistości, ale tak naprawdę tylko konwencja przydatna do pomiarów i innych rzeczy]

iso (równy) metryczny (pomiar)

Na rysunku izometrycznym wszystkie krawędzie sześcianu byłyby równoległe w zestawach po cztery. (2 równoległe linie oznaczają, że linie nigdy się nie spotkają bez względu na to, jak długo je narysujesz)

RYSUNEK PERSPEKTYWNY:

[Konwencje rysowania perspektywicznego (1 punkt, 2 punkty, 3 punkty ... i niektóre inne) są nadal konwencjami, ale starają się naśladować i być jak najbliżej tego, co widzi oko w rzeczywistości (3D), ale takie, jakie jest na 2D (papier / ekran) nigdy nie jest tak jak w rzeczywistości.]

[Kolejną rzeczą, którą niektórzy mogą się kłócić, jest fakt, że mamy dwoje oczu (tylko niektóre urządzenia optyczne) *, a obraz faktycznie jednoczy (jest tworzony) poprzez jakąś magię, która dzieje się w mózgu, co stanowi kolejny argument, dlaczego żadne z nich konwencje naprawdę dokładnie przypominają rzeczywistość ... ale dotyczy to filozofii SE: P] *

Na rysunku perspektywicznym krawędzie zwężają się w kierunku jednego lub więcej punktów zbiegu.

W Perspective Grid w programie Illustrator CS 5 dostępne są 3 opcje:

Perspektywa 1 punkt, perspektywa 2 punkty i perspektywa 3 punkty.

Po przetworzeniu wszystkich informacji z góry (informacje z Internetu ... mogą być niepoprawne, nie krępuj się rozmyślnie) zakładam, że nie jest możliwe uzyskanie widoku izometrycznego wielu obiektów na płótnie (jak w przykład powyżej, twigital.co.uk (dzięki George za wyjaśnienie, jak to zrobiono w jego odpowiedzi) z siatką perspektywiczną, czyli z perspektywą 1 punktową: linie spotkają się w jednym punkcie na horyzoncie, 2 punkty: linie spotkają się w 2 punktach na horyzoncie, 3 punktach ... masz pomysł ...

A w widoku izometrycznym linie nigdy się nie spotykają , ponieważ są równoległe. (Myślę, że można to nazwać perspektywą izometryczną, dlatego jestem trochę zdezorientowany)

!!! Ale jeśli zbudujesz siatkę ręcznie, jest to możliwe , możesz dowiedzieć się, jak to zrobić lub możesz pobrać już zrobioną tutaj . Po wykonaniu wszystkich czynności w tym samouczku wybierz wszystkie utworzone linie i przejdź do Widok> Przewodniki> Utwórz prowadnice . To rodzaj odpowiedzi na to pytanie, ale szukałem tylko „wbudowanego” rozwiązania i ...

Próbowałem to zrobić z siatką perspektywy w programie Illustrator CS5 ... nie działało dla mnie, jeśli ktoś zrobił to z siatką perspektywy w programie Illustrator, proszę wyjaśnić dokładne kroki w tym celu.

Niektórzy mogą powiedzieć, że kładę duży nacisk na niektóre rzeczy powyżej, ale jeśli utworzysz złożoną aplikację z setkami lub tylko 50 losowo rozmieszczonymi (w sposób izometryczny) obiektami, które nie są idealnie izometryczne, skończysz z brzydkimi wynikami tu i tam (nie wszystkie linie będą równoległe i wyglądają źle) lub jeśli jest to aplikacja do pomiarów i precyzyjnych pomniejszonych rzutów, skończysz na „złych” liczbach ... i prawdopodobnie tego nie chcesz. .


1
Jak dotąd najlepszą opcją, jaką znalazłem, jest to, co skomentowałeś pod odpowiedzią @Johannes: przekonwertuj linie na siatkę. Jest daleki od widoków izometrycznych oferowanych przez dowolne oprogramowanie 3D CAD (lub ogólnie dowolne oprogramowanie 3D), ale być może jest to wystarczające obejście dla oprogramowania do ilustracji 2D (które, tak, ma pewne narzędzia pomocne w rysowaniu z perspektywy).
Jari Keinänen,

Odpowiedzi:


11

W przypadku twigital projektant ( Chris ) zastosował program Illustrator, siatkę i narzędzie Obracanie 3D. Zauważ, że ma predefiniowane obroty izometryczne.

Jeśli potrzebujesz więcej niż domyślnie zapewnia program Illustrator, wypróbuj wtyczkę CADtools dla programu Illustrator , która udostępnia narzędzia do rysowania i wymiarowania w rzucie izometrycznym.

Mam jeszcze kilka zasobów do udostępnienia. Na podstawie tego samouczka zarejestrowałem powyższe kroki jako działania, dzięki czemu możesz je uruchamiać za pomocą skrótów klawiaturowych:

  • Lewy = CMD + Shift + F1
  • Góra = CMD + Shift + F2
  • Prawo = CMD + Shift + F3

Aby je uzyskać, wystarczy pobrać ten plik: Isometric.aia iw programie Illustrator przejdź do Akcje (Okno> Akcje) iz menu kontekstowego (mała ikona w prawym górnym rogu ze strzałką skierowaną w dół i 2 poziomymi liniami (=)) wybierz Załaduj akcje i przejdź do Isometric.aia

Tworzenie akcji od zera jest dość proste.

Dokonałem także kilku nagrań ekranu:

Pełny plik arches można pobrać stąd: iso_arches.ai

łuki izometryczne

Przydadzą się 3 główne rzeczy, które mogą nie być widoczne w filmie:

  • stosowanie przyciągania punktów / siatki odniesienia do łatwiejszego umieszczania obiektów
  • za pomocą modułu dla modułów, aby różne elementy pasowały do ​​siebie
  • podczas składania obiektów z powtarzającymi się częściami, używając symboli zamiast grup

aby usprawnienia były łatwiejsze


+ 1 dla CADtools dla Adobe Illustrator CS3, CS4, CS5 i CS5.5 link do wtyczki Ustawienie izometryczne z narzędzia Obracanie 3D jest również dobre. Są to swego rodzaju „wbudowane w oprogramowanie” metody wykonywania poprawnego i dokładnego rysowania izometrycznego ... ale ta wtyczka CADtools jest dość droga.
Flavius ​​Frantz

1
Warto zauważyć, że samouczek SSR ma literówkę 86,062% powinien wynosić 86,602% , ponieważ jest to wartość cos (30) i sin (60), gdzie kąt odpowiada twojemu obrotowi. Jeśli tego nie naprawisz, w końcu będziesz miał kłopoty, ponieważ rzeczy nie do końca zgadzają się między transformacjami.
joojaa,

1

Program Illustrator CS5 ma świetne nowe narzędzie o nazwie „Perspektywa”. To narzędzie pozwala skonfigurować siatkę perspektywiczną 2D lub 3D, która pomaga rysować elementy, aby nadać im wymiar. „Przykleja” kształty i tekst do określonej płaszczyzny oraz dostosowuje jego rozmiar i kąt w zależności od tego, gdzie jest umieszczony.

Oto kilka filmów Adobe, które dokładnie wyjaśniają, czym jest to narzędzie i jak go używać:

Definiowanie siatek perspektywicznych

Rysowanie grafiki w perspektywie

Ponadto, tutaj jest samouczek wideo Terry'ego White'a, w pewnym sensie omawiający podobne rzeczy.

A oto kilka różnych samouczków 3D , niekoniecznie wykorzystujących narzędzie Perspektywa w programie Illustrator.

Myślę, że to narzędzie jest najlepszym sposobem na uzyskanie tego izometrycznego odczucia za pomocą programu Illustrator. Jeśli nie masz CS5, musisz użyć bardziej surowych metod tworzenia własnych siatek, a co nie.

Alternatywnie możesz zawsze spróbować znaleźć oddzielne oprogramowanie, które spełni Twoje potrzeby. Tak czy inaczej mam nadzieję, że to pomoże!

EDYTOWAĆ

Aby wyjaśnić, narzędzie Perspektywa nie jest w żadnym wypadku „Prawdziwym 3D”, jest jedynie obiektem 2D z iluzją 3D (podobnie jak izometryczny).

Weźmy na przykład ten obraz . Jest to obraz izometryczny, który można wykonać za pomocą narzędzia perspektywy w programie Illustrator. To prawda, istnieje lepsze oprogramowanie do tego, ale myślę, że jest to jeden z twoich najlepszych zakładów na robienie tego w programie Illustrator. Narzędzie perspektywy potrzebuje trochę czasu, aby się przyzwyczaić, tutoriale na pewno pomogą w tym.

Myślę, że widzisz różnicę między przykładami, które opublikowałem wcześniej, a twoim „odczuciem izometrycznym” to jedynie kąt obrazu. Izometryczny jest zwykle bardziej z góry na dół (tylko pod kątem), podczas gdy inne przykłady patrzą bardziej bezpośrednio na obiekt. Ale tak właśnie postanowili zrobić swój wizerunek.


Uhum, mam CS5, widzę siatkę perspektywiczną, ale czy możesz ją ustawić, aby przejść do trybu „izometrycznego”? Ponieważ izometryczny nie jest 3D, jest 2D, ale wygląda trochę 3D, to wszystko ... aw grafice izometrycznej nie ma perspektywy ... [ en.wikipedia.org/wiki/Isometric_projection ]
Flavius ​​Frantz

3
do tej pory ręcznie utworzyłem siatkę za pomocą prostych linii w programie Illustrator, a następnie wybrałem wszystkie z nich i wybrałem Widok> Prowadnice> Utwórz prowadnice, więc wszystkie moje linie są teraz siatką izometryczną wykonaną z prowadnic (nie tylko linii w programie Illustrator) a dzięki inteligentnym przewodnikom dostaję to, czego chcę ... nie do końca, ale blisko ...
Flavius ​​Frantz

@Flavius: Tak to się robi. Powinieneś zrobić z tego odpowiedź.
Alan Gilbertson,

Edytowane w celu wyjaśnienia. Mam nadzieję, że teraz ma to większy sens.
Hanna,

@Johannes [Zredagowałem moje pytanie, aby wyjaśnić niektóre rzeczy, głównie dla mnie i dla osób takich jak ja, które nie mają takich rzeczy łatwo] Proszę wyjaśnić, jak to zrobić z siatką perspektywiczną w programie Illustrator CS5 i osiągnąć coś takiego jak przykład w pytanie lub twój przykład, ale wolałbym mój, czyli kilka obiektów narysowanych, a następnie ułożonych na płótnie w materii izometrycznej.
Flavius ​​Frantz

1

Mogłem myśleć zbyt skomplikowanie, ale tak czy inaczej pomyślałem, że powinienem się podzielić.

Cóż, moja pierwsza myśl była nosorożec , który jest oprogramowaniem 3D (dla systemu Windows)

Za jego pomocą możesz dość łatwo tworzyć tekst 3D i podstawowe obiekty 3D, takie jak kostki, cylindry i inne rzeczy.

Co więcej, miałem na myśli funkcję Make2D . Pozwala tworzyć rysunki 2D z obiektów 3D.

Następnie możesz zapisać te linie w formacie .ai.


Oto przykład (nie w 100% dokładnego) iPhone'a, który zrobiłem (dawno temu), który teraz przekonwertowałem na linie i z tego, który dostałem do Illustratora. Obraz

Jeśli chcesz wypełnić go kolorem .. może to być trochę żmudne, ponieważ musisz połączyć ścieżki, zanim będziesz mógł je wypełnić. Wybierz 2 lub więcej linii i Ctrl + J.


interesująca opcja ... przyjrzę się temu
Flavius ​​Frantz

+1 za rekomendacje oprogramowania 3D z opcją eksportowania, a następnie importowania do programu illustrator. przyda się nie tylko w tym przypadku ...
Flavius ​​Frantz

1

Myślę, że idealny tutorial do twoich celów właśnie pojawił się na stronie Digital Arts . To nie tylko „jak to zrobić”, to całe studium przypadku.


On on ... oczywiście, że się pojawił, prosiłem o to, prawda? : P: P [jooooke]. Świetny samouczek, sprawdzę go później tego wieczoru, dziękuję za uwagi. :)
Flavius ​​Frantz,

Ale oczywiście! W samouczku znajduje się gotowa siatka izometryczna, która może zaoszczędzić trochę czasu. :)
Alan Gilbertson,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.