Cara Membuat Grid Modular

Daftar Isi:

Cara Membuat Grid Modular
Cara Membuat Grid Modular

Video: Cara Membuat Grid Modular

Video: Cara Membuat Grid Modular
Video: Схема обучения 5, модульная и базовая сетка 2024, Desember
Anonim

Lebih mudah menggunakan grid modular saat mengembangkan desain atau membuat gambar yang kompleks. Mereka berfungsi sebagai dasar komposisi, membagi lembaran menjadi sejumlah langkah vertikal dan horizontal tertentu dengan jarak yang sama atau berbeda.

Cara membuat grid modular
Cara membuat grid modular

Diperlukan

Tinggal program Photoshop

instruksi

Langkah 1

Semua editor grafis modern dan program desain web memiliki grid modular bawaan. Jika Anda bekerja di Adobe Photoshop, aktifkan tampilan kisi untuk memudahkan pengaturan objek gambar dan penempatannya yang tepat pada lembar. Untuk melakukan ini, buka item menu Edit dan gerakkan mouse di atas keterangan Preferensi. Pada menu yang muncul, pilih item Guides, Grid & Slices (tergantung pada versi programnya, item ini mungkin memiliki nama yang berbeda, pilih kata Grid).

Langkah 2

Di jendela pengaturan yang terbuka, atur parameter grid modular. Di area Grid, pilih warna garis yang membentuk item grid dan spasi baris. Klik "OK", dan periksa bagaimana perubahan yang dilakukan akan memengaruhi tampilan gambar. Di lingkungan pengembangan web Adobe DreamWeaver, kisi disertakan secara default dalam tata letak halaman yang Anda kembangkan.

Langkah 3

Anda dapat menambahkan berbagai tabel (item kisi) dengan rangkaian baris dan kolom apa pun menggunakan item Sisipkan Tabel, serta menyisipkan tabel baru ke dalam sel, sehingga menciptakan jaringan kompleks untuk membangun elemen halaman.

Langkah 4

Anda dapat membuat kisi modular secara manual menggunakan gaya CSS. Untuk melakukan ini, gunakan alat #grid, Gridmaker, CSS Grid Builder, 1 KB CSS Grid, Gridr Buildrrr dan modul lainnya. Misalnya, cuplikan kode berikut membuat kisi empat modul dengan lebar tertentu:.page-layout {margin-right: -5px; }.layout-box {float: kiri; margin: 0 5px 5px 0; }.lb-1 {lebar: 779 piksel; } / * 100% * /. Lb-2 {lebar: 583px; } / * 75% * /. Lb-3 {lebar: 387px; } / * 50% * /. Lb-4 {lebar: 191px; } / * 25% * /

Langkah 5

Kehadiran grid modular memudahkan desainer pemula dan pengembang web, dan master berpengalaman di bidang ini. Proyek yang dibuat berdasarkan grid modular mudah untuk diedit dan ditransfer, yang sangat nyaman untuk volume pekerjaan yang besar. Anda juga dapat berhenti bekerja kapan saja dan terus menggunakan file yang disimpan.

Direkomendasikan: