Menggunakan Adobe Illustrator untuk membuat tata letak halaman

Panduan ini dirancang untuk mereka yang sudah tahu cara menggunakan Adobe Illustrator, tetapi belum tahu semua seluk-beluk bekerja dengannya dan ingin berkenalan dengannya.

Pertama, lihat apa yang akan kita coba lakukan:

Langkah Pertama

Mari kita buat dokumen baru dengan lebar 960px dan tinggi sewenang-wenang. Saya memilih lebar ini karena, dilihat dari pengunjung situs kami, kebanyakan dari mereka memiliki monitor besar.

Jangan lupa untuk mengatur Color Mode ke RGB.

Langkah Kedua

Batas hitam pada gambar di bawah ini menunjukkan dimensi dokumen yang kita buat (area di antara mereka juga disebut artboard). Saya suka meletakkan tangkapan layar dengan jendela browser yang bersih sebagai tanda air: jauh lebih mudah untuk melihat halaman sebagaimana mestinya.

Langkah Tiga

Langkah selanjutnya sangat penting. Tentu saja, Anda dapat memilih skala sewenang-wenang (Zoom) dan bahkan mengubahnya saat Anda bekerja, tetapi perlu diingat bahwa teks pada halaman harus dapat dibaca pada skala 100% (1: 1). Untuk mengubah skala, Anda dapat menggunakan bidang yang ditandai di bawah ini.

Langkah Empat

Anda dapat menyembunyikan dan memperlihatkan batas ruang kerja saat Anda membutuhkannya. Untuk menyembunyikannya, Anda harus memilih perintah Lihat > Sembunyikan Artboard. Hanya ada satu masalah: operasi seperti itu membutuhkan terlalu banyak waktu. Oleh karena itu, saya menyarankan Anda untuk menggunakan pintasan keyboard khusus untuk ini: Command + Semicolon (;).

Langkah Lima

Untuk menandai hierarki dokumen dengan mudah dan menyeimbangkannya, Anda dapat mulai dengan menandai halaman dengan persegi panjang abu-abu, seperti yang saya lakukan. Persegi panjang tipis adalah teks masa depan.

Langkah Enam

Ketika Anda yakin dengan tata letak halaman, Anda dapat menghapus persegi panjang, menggantinya dengan garis Panduan.

Langkah Tujuh

Menggunakan panduan sebagai titik awal, tambahkan berbagai elemen ke halaman: navigasi, teks, logo, gambar dan ikon, sesuai keinginan Anda. Ketika Anda cukup bermain dengan elemen antarmuka, cobalah untuk menghapus panduan dan melihat hasil pekerjaan Anda. Suatu situasi mungkin muncul bahwa pemandu akan bekerja melawan Anda. Atur mereka sehingga mereka tahu tempat mereka.

Langkah Delapan

Sempurnakan header halaman dengan menambahkan gambar dan ikon ke dalamnya.

Langkah Sembilan

Saya memutuskan untuk menambahkan warna biru ke topi.

Langkah Sepuluh

Sekarang Anda dapat melanjutkan ke desain teks. Tentukan seperti apa judul dan tautannya. Saya percaya bahwa lebih baik melakukan ini segera, sehingga nanti Anda dapat fokus pada pengembangan situs (ketika saatnya tiba).

Langkah Sebelas

Ada beberapa cara untuk menyiapkan desain untuk editor WYSIWYG (misalnya, Adobe Dreamweaver). Yang pertama melibatkan penggunaan irisan. Anda dapat membuatnya dengan menggunakan panduan yang sama atau dengan memilihnya. Mari kita lakukan dengan bantuan panduan: seret dan letakkan di sekitar setiap elemen tautan pada halaman. Dalam contoh kami, keempat ikon adalah tautan: mereka mengarah ke halaman terpisah di situs kami.

Langkah Dua Belas

Saat Anda menandai panduan untuk blok yang Anda inginkan di halaman, Anda dapat mengubahnya menjadi irisan nyata. Untuk melakukannya, gunakan perintah Object > Slice > Create from Guides. Saya perhatikan bahwa Illustrator mungkin tidak membuat irisan yang sesuai sesuai permintaan, jadi saya ulangi operasi ini tiga atau empat kali. Ketika semuanya sudah siap, blok bernomor hitam akan muncul.

Langkah Tiga Belas

Untuk menyimpan irisan yang dibuat, gunakan File > Simpan untuk Web &; Perangkat.... Gunakan Slice Select Tool (k) untuk memilih irisan yang ingin Anda simpan. Anda dapat memilih beberapa blok tersebut dengan menahan Shift. Di panel kanan, pilih opsi yang Anda inginkan untuk menyimpan gambar Anda. JPEG, misalnya, lebih cocok untuk gambar dengan banyak warna, GIF untuk gambar dengan sejumlah kecil warna dan area monokromatik besar, dan PNG lebih cocok untuk menjaga transparansi dalam gambar (namun, Anda akan bertemu engkol bernama Internet Explorer jika Anda menggunakan yang terakhir). Pilih kualitas yang Anda butuhkan (Anda dapat bermain dengan pengaturan) dan klik Simpan.

Langkah Empat Belas

Pilih lokasi untuk menyimpan file. Saya memilih Desktop. Pastikan untuk mengatur bidang Format ke Gambar Saja.

Langkah Lima Belas

Folder bernama Gambar akan muncul di desktop Anda. Di dalamnya ada irisan yang kini telah menjadi gambar.

Langkah Enam Belas

Hapus semua panduan dengan tampilan > Panduan > Hapus Panduan. Selanjutnya, gambar panduan di sekitar objek yang ingin Anda potong sekarang. Saat Anda mengarahkan penunjuk ke menu, warnanya akan berubah. Anda perlu memotongnya untuk semua warna yang Anda gunakan.

Langkah Tujuh Belas

Pilih irisan yang ingin Anda simpan. Navigasi dalam contoh saya tepat untuk menyimpan dalam GIF (tidak mengandung gambar dan banyak warna). Jika Anda ingin menggunakan font biasa, Anda harus memformatnya dengan HTML.

Langkah Delapan Belas

Beri nama gambar apa pun yang Anda suka. Jika Anda tidak ingin melakukan ini, nama mereka akan dipilih secara otomatis.

Langkah Sembilan Belas

Jika Anda menyimpan gambar ke folder yang sama seperti terakhir kali, itu akan berisi gambar baru dan lama. Pastikan untuk mengulangi langkah 16-18 untuk status tombol navigasi lainnya.

Langkah Dua Puluh

Perlu diingat bahwa ini bukan satu-satunya skenario. Anda dapat mengekspor irisan bersama-sama, mengaktifkan atau menonaktifkan halaman yang Anda inginkan saat mengedit.

Metode lain untuk membuat irisan adalah memilih objek dan menjalankan perintah Object > Slice > Create from Selection. Anda dapat menggunakan cara apa pun yang Anda suka untuk membuat irisan.

Langkah Dua Puluh Satu

Dalam kasus tertentu, Anda tidak memerlukan teks yang ditulis langsung di Illustrator, sehingga Anda dapat menghapusnya dengan aman (sebelum mengekspor irisan).

Langkah Dua Puluh Dua

Di bawah ini adalah gambar yang menunjukkan bahwa saya menghapus teks setelah menandai irisan. Anda sekarang dapat mengekspornya.

Langkah Terakhir

Lihat lagi apa yang kita punya.

Saya yakin Anda merasa mudah untuk bekerja dengan Adobe Illustrator. Sangat mudah untuk membuat tata letak dengan kompleksitas apa pun: Anda dapat sepenuhnya mengontrol proses pembuatan tata letak halaman.