Cara menggambar vektor isometrik?

16

Saya mencari solusi perangkat lunak "bawaan" untuk Illustrator CS2-5 lebih disukai.

Saya mencoba membuat ilustrasi isometrik ini untuk aplikasi web. Saat ini saya sudah secara manual mengatur kisi-kisi di Adobe Illustrator dan melakukan gambar berdasarkan kisi ini - tapi saya tidak punya panduan, tidak ada jepret dan hal-hal seperti itu ...

Hasil akhirnya harus dekat dengan ini: http://www.twigital.co.uk/

Saya bertanya-tanya apakah Anda tahu perangkat lunak yang baik untuk menggambar hal-hal isometrik dari mana saya kemudian dapat output sebagai vektor (.ep atau .ai) jadi saya dapat mengimpor ke Illustrator dan germo mereka warna dan barang-barang lainnya?

Jika Anda tidak mengetahui perangkat lunak khusus untuk ini, apakah Anda pernah melakukan ilustrasi isometrik di Illustrator? Ada metode? Ada tips?

Contoh gambar vektor isometrik

EDIT:

Tolong jangan bingung menggambar Isometrik dengan 1,2 atau 3 Point Perspective Drawing.

GAMBAR ISOMETRIS:

[sistem isometrik hanyalah sebuah konvensi / penemuan, berguna untuk banyak hal, tidak mereproduksi apa yang dilihat mata pada kenyataannya, tetapi benar-benar hanya sebuah konvensi yang berguna untuk pengukuran dan hal-hal lain]

metrik iso (sama) (pengukuran)

Dalam gambar isometrik , semua tepi kubus akan sejajar dalam set empat. (2 garis paralel berarti bahwa garis tidak akan pernah bertemu satu sama lain, tidak peduli berapa lama Anda menggambar mereka)

GAMBAR PERSPEKTIF:

[Konvensi penggambaran perspektif (1 poin, 2 poin, 3 poin..dan beberapa lainnya) masih merupakan konvensi tetapi mereka mencoba meniru dan sedekat mungkin dengan apa yang dilihat mata dalam kenyataan (3D), tetapi sebagaimana adanya pada 2D (kertas / layar) tidak pernah seperti kenyataan sebenarnya.]

[Hal lain yang mungkin dibantah sebagian orang adalah fakta bahwa kita memiliki dua mata (hanya beberapa perangkat optik) * dan gambar sebenarnya menyatukan (diciptakan) melalui beberapa keajaiban yang terjadi di otak, membuat titik lain mengapa tidak satupun dari ini konvensi benar-benar secara akurat menyerupai kenyataan ... tetapi ini untuk Philosophy SE: P] *

Dalam gambar perspektif , ujung-ujungnya akan meruncing ke satu atau lebih titik hilang.

Dengan Perspective Grid di Illustrator CS 5 ada 3 opsi:

Perspektif 1 poin, perspektif 2 titik, dan perspektif 3 titik.

Setelah memproses semua informasi dari atas (info dari internet ... mungkin salah, jangan ragu untuk berunding) Saya membuat asumsi sederhana bahwa tidak mungkin untuk mencapai pandangan isometrik dari banyak objek pada kanvas (seperti pada contoh di atas, twigital.co.uk (terima kasih kepada George untuk penjelasannya tentang bagaimana hal itu dilakukan dalam jawabannya) dengan grid perspektif, yaitu dengan perspektif 1 titik: garis akan bertemu dalam satu titik di cakrawala, 2 poin: garis akan bertemu pada 2 poin di cakrawala, 3 poin ... Anda mendapatkan ide ...

Dan dengan Tampilan Isometrik, garis tidak pernah bertemu , karena paralel. (Saya pikir Anda juga bisa menyebutnya perspektif isometrik, itu sebabnya saya agak bingung)

!!! Tetapi jika Anda membangun grid secara manual , Anda dapat mempelajari cara melakukannya atau Anda dapat mengunduh yang sudah dilakukan di sini . Setelah Anda melakukan segalanya dalam tutorial ini, pilih semua baris yang Anda buat dan pergi ke View> Guides> Make Guides . Ini adalah semacam jawaban untuk pertanyaan ini, tetapi saya hanya mencari beberapa solusi "bawaan" dan ...

Saya memang mencoba melakukan ini dengan grid perspektif di Illustrator CS5 ... tidak berfungsi untuk saya, jika ada yang melakukan ini dengan Perspektif Grid di Illustrator tolong jelaskan langkah-langkah tepat untuk melakukannya.

Beberapa orang mungkin mengatakan saya sangat menekankan pada beberapa hal di atas, tetapi jika Anda membuat aplikasi yang kompleks dengan ratusan, atau hanya 50 objek yang diposisikan secara acak (dengan cara isometrik) dan objek yang bukan isometrik sempurna Anda akan berakhir dengan hasil yang buruk di sana-sini (tidak semua garis akan paralel dan terlihat buruk) atau jika aplikasi untuk pengukuran dan presisi menurunkan proyeksi Anda akan berakhir dengan angka "buruk" ... dan Anda mungkin tidak menginginkannya. .

Flavius ​​Frantz
sumber
1
Sejauh ini opsi terbaik yang saya temukan adalah apa yang Anda komentari di bawah jawaban @Johannes ': ubah baris menjadi kisi. Ini jauh dari pandangan isometrik yang ditawarkan oleh perangkat lunak CAD 3D (atau umumnya perangkat 3D apa pun), tetapi mungkin ini solusi yang cukup untuk perangkat lunak ilustrasi 2D (yang, ya, memiliki beberapa alat untuk membantu menggambar dengan perspektif).
Jari Keinänen

Jawaban:

11

Untuk twigital perancang ( Chris ) menggunakan Illustrator, kisi dan alat Rotate 3D. Perhatikan ia memiliki preset untuk rotasi isometrik.

Jika Anda membutuhkan lebih dari apa yang Illustrator sediakan secara default, coba plugin CADtools untuk Illustrator , yang menyediakan alat untuk menggambar dan membuat dimensi isometrik.

Saya punya beberapa sumber daya untuk dibagikan. Berdasarkan tutorial ini saya telah mencatat langkah-langkah di atas sebagai tindakan sehingga Anda dapat memicu mereka yang menggunakan pintasan keyboard:

  • Kiri = CMD + Shift + F1
  • Atas = CMD + Shift + F2
  • Kanan = CMD + Shift + F3

Untuk mendapatkan ini, yang perlu Anda lakukan adalah mengunduh file ini: Isometric.aia dan di ilustrator buka Actions (Window> Actions) dan dari menu konteks (ikon kecil di kanan atas dengan panah mengarah ke bawah dan 2 garis horizontal) (=)) pilih Muat Tindakan dan telusuri ke Isometric.aia

Cukup mudah untuk membuat aksi dari awal juga.

Saya juga telah melakukan beberapa rekaman layar:

File lengkungan lengkap dapat diunduh dari sini: iso_arches.ai

lengkungan isometrik

Ada 3 hal utama yang mungkin tidak jelas dalam video yang akan berguna:

  • menggunakan titik gertakan / kotak referensi untuk menempatkan objek lebih mudah
  • menggunakan unit untuk modul sehingga bagian yang berbeda cocok bersama
  • saat merakit objek dengan bagian berulang, menggunakan simbol bukan kelompok

untuk membuat tweak lebih mudah

George Profenza
sumber
+1 untuk CADtools untuk Adobe Illustrator CS3, CS4, CS5, dan tautan CS5.5 ke plugin. Dan pengaturan isometrik dari alat 3D Rotate juga bagus. Ini adalah semacam "built in the software" metode untuk melakukan gambar isometrik yang benar dan akurat ... tetapi plugin CADtools agak mahal.
Flavius ​​Frantz
1
Mungkin perlu dicatat bahwa tutorial SSR memiliki kesalahan ketik 86.062% harus menjadi 86,602% , karena itu adalah nilai cos (30) dan sin (60), di mana sudut cocok dengan rotasi Anda. Jika Anda tidak memperbaiki ini, Anda pada akhirnya akan berada dalam masalah karena hal-hal yang tidak selaras antara transformasi.
joojaa
1

Illustrator CS5 memiliki alat baru yang hebat yang disebut "Perspektif". Alat ini memungkinkan Anda mengatur kisi perspektif 2D atau 3D yang membantu Anda menggambar sesuatu untuk memberi mereka dimensi. Ini "menempel" bentuk dan teks ke bidang tertentu dan menyesuaikan ukuran dan sudutnya tergantung di mana ia ditempatkan.

Berikut adalah beberapa video oleh Adobe yang menjelaskan dengan tepat apa alat itu dan bagaimana menggunakannya secara mendalam:

Mendefinisikan Perspektif Grid

Menggambar Karya Seni Dalam Perspektif

Juga, ini adalah tutorial video oleh Terry White, semacam membahas hal-hal serupa.

Dan berikut adalah beberapa tutorial 3D lain-lain , belum tentu menggunakan alat Perspektif di Illustrator.

Saya pikir alat ini adalah cara terbaik untuk mendapatkan nuansa isometrik menggunakan Illustrator. Jika Anda tidak memiliki CS5 maka Anda harus menggunakan beberapa metode yang lebih kasar untuk membuat grid sendiri dan apa yang tidak.

Atau Anda selalu dapat mencoba menemukan perangkat lunak terpisah untuk memenuhi kebutuhan Anda. Apa pun yang saya harap ini membantu!

EDIT

Untuk memperjelas, alat Perspektif tidak berarti "True 3D" itu hanyalah objek 2D dengan ilusi 3D (seperti halnya isometrik).

Ambil gambar ini misalnya. Ini adalah gambar isometrik, dan gambar ini dapat dibuat dengan alat perspektif dalam ilustrator. Memang, ada perangkat lunak yang lebih baik di luar sana untuk ini, tetapi saya pikir ini adalah salah satu taruhan terbaik Anda untuk melakukannya di dalam ilustrator. Alat perspektif mengambil beberapa membiasakan diri, tutorial pasti akan membantu dengan itu.

Saya pikir perbedaan yang Anda lihat antara contoh yang saya posting sebelumnya dan "nuansa isometrik" Anda hanyalah sudut gambar. Isometrik biasanya lebih top-down (hanya pada sudut) sedangkan contoh-contoh lain melihat lebih langsung pada objek. Tapi itulah cara mereka memutuskan untuk membuat citra mereka.

Hanna
sumber
Uhum, saya punya CS5, saya perhatikan grid perspektif, tetapi bisakah Anda mengaturnya sehingga Anda masuk ke mode "isometrik"? Karena isometrik bukan 3D, 2D, tetapi sepertinya 3D itu saja ... dan dalam grafik isometrik tidak ada perspektif ... [ en.wikipedia.org/wiki/Isometric_projection ]
Flavius ​​Frantz
3
sejauh ini saya secara manual membuat kisi-kisi saya dengan garis-garis sederhana di ilustrator, kemudian saya memilih semuanya dan pergi ke View> Guides> Make guide, jadi semua baris saya sekarang adalah kisi isometrik yang terbuat dari panduan (bukan hanya garis di ilustrator) dan dengan Smart Guides eneabled saya mendapatkan apa yang saya inginkan ... tidak sepenuhnya, tetapi menutup ...
Flavius ​​Frantz
@ Flavius: Itulah cara untuk melakukannya. Anda harus membuat ini sebagai jawaban.
Alan Gilbertson
Diedit untuk klarifikasi. Semoga ini lebih masuk akal sekarang.
Hanna
@Johannes [Saya telah mengedit pertanyaan saya untuk mengklarifikasi beberapa hal, sebagian besar untuk saya dan orang-orang seperti saya yang tidak mendapatkan hal-hal ini dengan mudah] Tolong jelaskan bagaimana melakukan ini dengan kotak perspektif di Illustrator CS5 dan mencapai sesuatu seperti contoh di pertanyaannya, atau contoh Anda, tetapi saya lebih suka pertanyaan saya, yaitu beberapa objek digambar dan kemudian disusun di atas kanvas dalam materi isometrik.
Flavius ​​Frantz
1

Saya bisa berpikir terlalu rumit, tetapi saya pikir saya harus berbagi.

Yah, pikiran pertama saya adalah Badak , yang merupakan perangkat lunak 3D (untuk windows)

Dengan itu Anda dapat dengan mudah membuat teks 3d dan objek 3d dasar seperti kubus, silinder, dan lainnya ..

Selanjutnya apa yang ada dalam pikiran saya adalah fitur Make2D . Hal ini memungkinkan Anda untuk membuat gambar 2d dari objek 3d ..

Anda kemudian dapat menyimpan garis-garis itu dalam format .ai.


Berikut adalah contoh dari (tidak 100% akurat) iphone yang telah saya buat (dulu) yang sekarang saya konversi menjadi garis dan dari yang dibawa ke Illustrator. Foto

Jika yang Anda inginkan adalah mengisinya dengan warna .. itu mungkin pekerjaan yang membosankan karena Anda harus bergabung dengan jalur sebelum Anda dapat mengisinya .. Pilih 2 atau lebih baris dan Ctrl + J.

Joonas
sumber
opsi menarik .. saya akan memeriksanya
Flavius ​​Frantz
+1 untuk rekomendasi perangkat lunak 3D yang memiliki opsi untuk diekspor dan kemudian diimpor ke ilustrator. akan bermanfaat tidak hanya dalam kasus ini ...
Flavius ​​Frantz
1

Saya pikir tutorial yang sempurna untuk keperluan Anda baru saja muncul di situs web Seni Digital . Ini bukan hanya "Bagaimana Cara," ini adalah studi kasus secara keseluruhan dengan caranya sendiri.

Alan Gilbertson
sumber
He he ... tentu saja muncul, saya memintanya, bukan? : P: P [jooooke]. Tutorial yang bagus, saya akan memeriksanya nanti malam, terima kasih atas sarannya. :)
Flavius ​​Frantz
Tapi tentu saja! Ada kotak isometrik siap pakai yang disertakan dengan tutorial, yang bisa menghemat waktu. :)
Alan Gilbertson