Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Adobe Illustrator

Tips Mendapatkan Desain Web dari Illustrator ke Browser

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Sittiana Ana (you can also view the original English article)

Skenario: seseorang memberi anda dokumen Ilustrator dengan tata letak web terbaru mereka dan ini adalah tugas anda untuk mengubahnya menjadi HTML dan CSS yang bekerja. Mari kita lihat bagaimana anda bisa melakukan itu.

catatan: Tujuan dari tutorial ini adalah bukan untuk menciptakan kembali desain untuk penggunaan web dengan sempurna. Malahan, kita akan menggunakannya untuk mengeksplorasi alur kerja dan fitur dalam Illustrator yang membantu kita untuk melakukannya.

Berkas Ilustrator

Mari kita mulai dengan melihat dokumen yang dimaksud:

Lihat bagaimana tata letak contoh kita dibuat in this tutorial

Ini adalah tata letak halaman 404; halaman yang memberitahu pengguna bahwa apa pun yang mereka cari tidak dapat ditemukan dan mereka mungkin harus mencoba yang lainnya. Kita bisa melihat judul, beberapa paragraf instruksional, form dan tombol pencarian, ditambah beberapa tombol dengan tooltips di bagian paling bawah.

Semuanya tampak melayang di pusat halaman, baik secara horizontal maupun vertikal. Ini memiliki latar belakang kuning, beberapa aksen hangat dan bayangan drop di sana-sini. Dimana kita mulai?

Mudah!

Kita tidak akan mundur kembali untuk ini, mari kita membuat ini semudah mungkin untuk diri kita sendiri. Ilustrator tidak akan mengeluarkan paket HTML, CSS dan JavaScript yang rapi untuk ini, dan kita juga tidak akan membuang waktu untuk membangun semuanya dari nol, jadi mari kita pergi dan ambil salinan dari Bootstrap untuk memulai proyek ini.

Saat ini v3.1.1, seperti yang bisa anda lihat ..

Saya mendownload Bootstrap, menghapus beberapa file CSS dan font yang tidak kita butuhkan, lalu tambahkan sebuah berkas index.html berdasarkan Cover Template oleh Mark Otto. Empat menit mengklik mouse dan saya sendiri mengerjakan a basic page yang kira-kira menyerupai apa yang kita cari.

Ini mungkin seperti tidak terlihat banyak, tapi kita baru saja menghemat banyak waktu ..

File sumber untuk melanjutkan dari titik ini tersedia di GitHub repo, di dalam folder 1-starting-point.

Menambahkan Markup

Langkah logis berikutnya adalah menambahkan markup struktural ke dalam daftar index.html (Sekali lagi, Illustrator tidak akan melakukannya untuk kita). Kita sudah memiliki wadah yang disejajakan dipusat, sebuah div dengan classes inner cover:

Mari tambahkan beberapa potongan tambahan di dalamnya:

Kami telah menambahkan tag<h1>dan <h2>, beberapa paragraf, dan beberapa tipe bentuk Bootstrap markup (anda bisa grab more examples dari dokumen Bootstrap). Bentuknya memiliki sebuah kelas dari form-inline, kelas Bootstrap asli yang menempatkan elemen bentuk kita di sepanjang satu baris.

Akhirnya, tepat di akhir, anda akan melihat tiga jangkar, semua dengan kelas btn dan btn-primary. Ini akan berfungsi sebagai tombol kita. Inilah yang kita miliki pada tahap ini:

Pada titik ini kita tidak melakukan apa-apa dalam hal styling, bukan sebuah garis tunggal  CSS, namun berkat Bootstrap kita telah membangun halaman kita secara efektif, siap untuk dipoles.

Ayo Dapatkan Tooltips yang Bekerja

Hal lain yang bersama Bootstrap yang akan membantu kita; tooltips. Anda dapat membaca lebih lanjut tentang berbagai pilihan yang tersedia bagi kita in the Bootstrap docs, tetapi untuk sekarang mari kita tambahkan bahan yang diperlukan untuk HTML kita.

Untuk setiap tombol kita tambahkan kelas ekstra tip. Digunakan untuk mengidentifikasi apapun yang membutuhkan sebuah tooltip. Kita juga butuh sebuah atribut title yang menentukan apa yang sebenarnya akan ditampilkan di dalam tooltip:

Berkas bootstrap.min.js yang sudah kita tarik mempunyai semua JavaScript yang dibutuhkan untuk tooltips.  Faktanya, ia memiliki banyak permainan JavaScript lainnya, banyak yang bahkan tidak kita butuhkan, jadi di lingkungan produksi mungkin bijaksana untuk hanya menyertakan hal-hal yang kita gunakan.  Bootstrap tooltips merupakan opt-in, sehingga tidak bekerja dengan ajaib, kita perlu menginisialisasi mereka. Mari kita lakukan hal tersebut di dalam tag script di bagian bawah halaman kita, di bawah dimana kita telah memanggil JavaScript yang lainnya:

Selesai. Sekarang kita memiliki ini:

Sangat berbeda

  Sekarang Mari Mencoba Beberapa Gaya

Saya telah menambahkan file CSS ketiga ke proyek yang disebut theme.css dan telah menunjuknya dari dokumen <head>.Tapi apa yang kita tambahkan ke stylesheet itu?

Kita akan mulai dengan wadah utama. Pilih objek kontainer di Illustrator dan anda akan melihat, di panel Layer, bahwa telah dinamai main.

Ini relevan. Dalam situasi tim, sangat bijaksana untuk memiliki pemahaman umum tentang bagaimana objek seperti ini harus diberi nama. Anda akan melihat mengapa ketika kita membuka panel CSS.  

Properti CSS

Pergi ke Window > CSS Properties untuk mengungkapkan panel dengan nama yang sama. Dengan objek utama kita yang dipilih, ini akan berisi semua gaya yang relevan yang dapat kita tempel langsung ke lembar gaya kita.   Anda akan melihat bahwa gaya ini telah diterapkan pada pemilih .main, seperti objek kita telah dinamai.

Silakan copy apa yang anda lihat, lalu paste langsung ke berkas theme.css. Agar peraturan ini berlaku untuk elemen penampung kita, kita harus mengubah pemilih menjadi hal yang sebenarnya kita gunakan (menjaga pemilih .main sedikit berisiko karena kita mungkin menemukan ini digunakan di tempat lain di keseluruhan situs kita). Ubah .main to .inner.cover dan anda sebaiknya melihat elemen wadah anda berubah kuning keemasan yang indah, dengan sudut yang membulat dan bahkan sebuah kotak bayangan, semua diaplikasikan dengan CSS cross-browser yang baik.

Dimensi CSS

Anda akan melihat bahwa aturan CSS kita di sini tidak mencakup lebar atau tinggi apapun. Ini adalah hal yang baik; Bootstrap cukup banyak mengurus semua itu, jadi kita benar-benar hanya mencari gaya estetika.   Dengan mengubah CSS Properties Export Options kita bisa memiliki dimensi kita termasuk di sini, tapi kita akan meninggalkan mereka.

Meskipun wadah kita agak lebar, karena gaya yang sudah diterapkan, jadi mari kita mengganti dimensi tersebut dengan kueri media berikut:

Aturan penggantian ini ditemukan di cover.css, memberikan kita lebar 400px di layar setidaknya lebar 992px. 400px tidak sesuai dengan desainnya, tapi secara pribadi saya menemukan dimensi dan ukuran font sebenarnya sedikit kecil, jadi saya menolaknya!

Sementara kita di sini, saya hanya ingin mengubah gaya jadi kita menerapkan sudut membulat dalam kueri media ini juga. Hapus mereka dari aturan yang anda tempel dari Illustrator dan terapkan mereka seperti ini sebagai gantinya:

Sekarang kita sebaiknya memiliki sesuatu seperti ini di layar besar:

.. dan ini di layar kecil:

Pengukuran Spesifik

Kita tidak benar-benar setia pada dimensi yang tepat yang digunakan dalam dokumen Ilustrator, tapi itu bukan masalah; web itu layaknya cairan. Masih, wadah kita bisa menggunakan beberapa lapisan di bagian bawah, jadi mari kita cari tahu persis berapa banyak desain Illustrator kita yang harus kita gunakan.

Pilih Measure tool di Illustrator (anda akan menemukannya dengan Eyedropper tool) dan tarik kursor untuk mengukur setiap daerah yang diberikan dari desain. Kita dapat melihat bahwa lapisan yang kita cari adalah 25px, jadi mari kita terapkan secara manual ke gaya kita.

Lebih baik

Gaya Lain

Kita memiliki cukup banyak gaya dan objek untuk menangani di sini dan, jika semuanya diberi nama persis seperti seharusnya, kita dapat (pada prinsipnya) mengeluarkan tumpukan besar CSS dari Illustrator untuk menangani semua itu.  Namun, ada beberapa ketidak sesuaian dengan penamaan objek di sini (hindari yang memerlukan beberapa komunikasi perancang / pengembang yang dekat) dan kita mungkin akan mendapatkan beberapa kode asing yang tidak kita butuhkan.

Sebagai gantinya, kerjakan dengan sabar dari elemen ke elemen, pilih setiap objek dan keluarkan CSS yang sesuai. Mulailah dengan tipografi dan mari kita lihat seberapa bagus Illustrator melakukannya.

  Font

Salah satu hal pertama yang anda perhatikan adalah bahwa CSS untuk semua jenis objek meliputi: font-family : Open Sans;

Open sans bukan font sistem standar dan tidak akan ditampilkan di browser manapun dimana pengguna tidak menginstalnya. Oleh karena itu anda perlu beralih ke Google Fonts dan mengambil tautan CSS untuk menariknya ke laman melalui keajaiban webfonts.

Tombol

Semua sudah berjalan cukup baik sejauh ini, tapi kemudian kita menekan tombol. Tombol pencarian sebenarnya tidak buruk, tapi ketiga tombol di bawah ini belum diberi nama objek, jadi kita lihat yang berikut di jendela Properties CSS kita:

Tidak ada kode CSS yang dihasilkan. Untuk membuat CSS untuk objek yang belum dinamai, beri nama objek pada panel layer atau aktifkan opsi 'Generate CSS for Unnamed Objects ' di dialog Opsi Ekspor CSS. 

Silakan membuka pilihan seperti yang telah kita bahas sebelumnya, kemudian pastikan anda sudah mengecek Generate CSS for Unnamed Objects. Alternatifnya adalah memberi nama pada tombol kita, tapi pilihannya bagus di sini.

Sekarang, dengan semua tombol yang kita pilih, kita bisa menekan Generate CSS dan memiliki output gaya untuk kita. Sayangnya, Illustrator akan menampilkan gaya yang lengkap untuk setiap objek, bahkan jika mereka semua memiliki aturan yang sama. Hal ini tampaknya terjadi bahkan jika kita menggunakan Graphic Styles, Character Styles, Paragraph Styles yang umum atau bahkan memberikan semua objek nama yang sama! Ruang untuk peningkatan di sana, tapi setidaknya kita bisa mengambil gaya umum dan menerapkannya ke beberapa objek secara manual.

Saya menyalin gaya untuk tombol pencarian, lalu menerapkannya ke .btn, .btn:hover untuk memastikan semua gaya Bootstrap ditimpa dengan benar. Saya juga menambahkan sebuah border: none; untuk menyingkirkan batas biru Bootstrap. Mari kita lihat apa yang kita buat!

Tidak buruk, tapi tidak sempurna

Ini tidak buruk, tapi ini sangat tidak sempurna. Bayangan teksnya belum diikuti ke (mereka kurang transparansi), gradiennya pada tombolnya tidak benar dan mereka benar-benar kehilangan bayangan kotak mereka.

Mengapa?

Singkatnya, ekspor Illustrator CSS belum siap untuk struktur kompleks semacam ini (agar bisa cukup, sangatlah kompleks). Mari kita lihat tombol pencarian yang ingin kita buat ulang:

Indah. Tapi lihat berapa banyak fill, gradien dan bayangan yang telah hilang ke dalamnya:

Aduh. Hampir tidak mengejutkan bahwa Illustrator mengatakan Tidak ada. Bahkan radius batas telah ditinggalkan dari persamaan karena keadaan menjadi terlalu rumit.

Anda tidak sedang bercanda ..

Sebagai gantinya, saya hanya akan menerapkan beberapa gaya sederhana dan menghindari CSS yang kompleks (tutorial ini adalah tentang apa yang bisa dilakukan Illustrator untuk kita semua setelahnya..) Gaya .btn yang telah berkembang terlihat seperti ini:

Dalam hal efisiensi CSS, semua ini sangat menarik, tapi kita bekerja dengan apa yang diberikan oleh Illustrator untuk demonstrasinya. Anda akan bijaksana untuk kembali setelah itu dan membersihkan CSS, bahkan mungkin menggunakan alat seperti CSSLint.

  Ikon

Apa yang telah kita hasilkan sampai saat ini tidak buruk, jadi kita akan membiarkannya sendiri untuk saat ini. Mari kita simak ikon tombolnya. Ada beberapa pendekatan yang bisa kita gunakan di sini:

Mengekspor Bitmap

Dengan memilih setiap grafik, anda bisa menghasilkan CSS dengan cara yang sama seperti sebelumnya. Illustrator akan memilih untuk mengekspor jalur kompleks seperti file png, lalu gunakan gambar-gambar itu sebagai latar belakang elemen anda.

Anda akan diberi sekelompok aset untuk digunakan:

Tapi, sekali lagi, itu tidak sempurna, dan akan menghilangkan aspek-aspek tertentu dari desain, mengeluarkan gaya yang dipertanyakan dalam kasus lain, jadi pendekatan ini akan memperbaiki beberapa bagian anda. Pendekatan ini juga gagal menampilkan display retina menjadi akun, berpotensi memberi kita grafis sub-standard pada layar tertentu. Pokoknya, yang dikeluarkan CSS untuk grafis ini terlihat seperti ini:

SVG

Preferensi saya, sebagai perancang web, akan memilih SVG dalam kasus ini, sesuatu yang bekerja sama dengan baik dengan Illustrator.

Pertama, pilih ikon, lalu salin ke clipboard dalam cara yang biasa (Command + C). Data SVG untuk objek itu sekarang tersedia untuk anda tempel ke editor teks (menakjubkan). Buka file baru dalam proyek web anda, sebut saja "icon-contact.svg" dan paste isi clipboard ke dalamnya.

Anda sekarang dapat menambahkan SVG itu sebagai gambar langsung di markup dari index.html anda:

Halo..

Ada berbagai cara untuk menerapkan SVG ke dalam sebuah halaman web; melalui CSS, dengan terlebih dahulu mengubah XML menjadi base64, menempelkannya ke markup anda, pilihannya adalah milik anda (lihatlah SVG Files: From Illustrator to the Web untuk informasi lebih lanjut). Pendekatan kita bekerja dengan baik sekalipun, setidaknya di browser modern, jadi kita akan bertahan dengan itu

Ulangi proses untuk ikon lainnya, dan ..

Kita Selesai!

Dengan sedikit tweaking (saya telah menambahkan beberapa lapisan ke elemen form) anda harus memiliki sesuatu yang menyerupai ini:

Tidak buruk! Ini tidak 100% mencerminkan grafis Illustrator, tapi mengingat kita telah mengandalkan terutama pada gaya yang dihasilkan oleh Illustrator saya pikir kita bisa sangat senang. Perbaikan lebih lanjut harus dilakukan dengan tangan, Illustrator telah melakukan semua yang bisa ia lakukan pada saat ini.

Apakah anda memiliki tip yang bisa membantu Illustrator secara langsung memperbaiki layout web ini? Beri tahu kami di komentarnya!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.