Advertisement
  1. Web Design
  2. Google Maps
Webdesign

Tambah Sentuhan Realisme ke Peta Google Anda

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Rana Salsabiela (you can also view the original English article)

Menggunakan Google Maps API adalah cara paling popular untuk menunjukkan lokasi geo di laman web hari ini. Dalam tutorial ini saya akan menunjukkan bagaimana saya memberikan peta google saya yang lebih realistik dan saya akan memberi anda beberapa petua tentang cara membuat peta anda sendiri bersinar!


Langkah 1: Pemanasan

Matlamat kami adalah untuk memberi peta gambaran yang realistik, sementara masih membenarkan pengguna untuk mengezum dan memasangkannya.

Kami akan menggunakan beberapa CSS untuk meletakkannya di atas peta.

Sebelum membuka Photoshop saya cadangkan anda mengambil peta sebenar, atau selembar kertas, dan lipat seperti peta yang anda cuba buat. Ini akan membantu anda memahami permukaan yang bertindak balas terhadap sumber cahaya. Sejak saya fikir ia sentiasa bagus untuk bermain dengan sekeping kertas sebelum merebut tikus!

Semasa melakukan ini, anda juga perlu memuat tangkapan skrin peta Google yang anda pilih - Photoshop sebagai rujukan.


Petua: jika anda berada di Mac dan mahu mengambil tangkapan layar pada wilayah tertentu skrin anda, anda hanya boleh tekan "command + shift + 4", kemudian klik dan pilihan segi empat tepat dari apa yang anda mahu ditangkap.


Langkah 2: Peta dan Latar Belakang

Sebaik sahaja anda telah merakam tangkapan skrin anda, anda boleh membukanya di Photoshop dan kami akan mula bekerja!

Perkara pertama yang perlu dilakukan ialah menjadikan fail itu telus. Klik dua kali pada lapisan latar belakang yang mengandungi peta dan tekan enter, dengan melakukan ini kami mengubah latar belakang ke lapisan biasa. Sekarang kita mahu memberi diri kita ruang tambahan untuk bermain, jadi pergi ke Image> Saiz Kanvas (alt + shift + C) dan skala kanvas anda sedikit. Saya menambah 90 piksel pada setiap sisi tetapi rupa dan nuansa pada paparan akhir yang anda mahu dapatkan; jadi jangan bimbang, saiz ini boleh berubah lagi pada bila-bila masa.

Kini sudah tiba masanya untuk menambah imej latar belakang. Hanya mencari sesuatu yang kelihatan seperti di bawah peta, saya dapati di CGtextures.com, tetapi anda boleh menggunakan apa sahaja yang anda mahu, sama ada gambar atau mungkin kecerunan yang bagus.

Sebaik sahaja anda telah memilih latar belakang anda, lapisan berada di bahagian bawah hierarki.


Langkah 3: Edge

Pada ketika ini sudah tiba masanya untuk memberikan peta beberapa bentuk, kerana persegi panjang ini tidak kelihatan seperti sekeping kertas yang dilipat.

Untuk melakukan ini kita hanya menggunakan lasso poligonal dan menarik tepi. Pada ketika ini ia benar-benar membantu anda untuk membuat lipatan, jadi saya membuat grid 3x2 kasar. Ia tidak perlu tepat, tetapi kita akan memerlukannya selalunya dalam langkah seterusnya.

Setelah butang mask mask dipilih, anda secara automatik akan membuat topeng yang menunjukkan kawasan yang dipilih.


Langkah 4: Lipat

Setelah memotong tepi, langkah berikut akan diuruskan dengan memberikan peta kedalaman. Perkara pertama yang ingin kami lakukan ialah membuat peta kelihatan seperti dilipat.

Mula-mula terlebih dahulu, buat lapisan telus baru, kemudian ambil alat pemilihan segi empat tepat, mengikut grid yang anda tetapkan sebelum ini, pilih 3 segi empat tepat bertentangan (lebih besar daripada peta) dan isikannya dengan hitam biasa.

Kami kini akan memohon kepada lapisan ini - ia harus sama seperti yang kami gunakan pada peta. Cara alternatif untuk melakukan ini adalah dengan mengklik dan menyeret topeng lapisan peta dan menjatuhkannya pada lapisan yang sedang kita kerjakan.

Satu tugas yang tinggal adalah untuk mengubah kelembapan cara lapisan ke sekitar 6-10%.


Langkah 5: Sempadan Putih (ia Black Baru)

Pada ketika ini saya ingin menambah sempadan putih di sekitar peta. Untuk melakukan lapisan baru, isikan dengan warna apa saja yang anda suka, putarkan isinya menjadi 0% dan gunakan topeng lapisan yang sama yang anda gunakan untuk lapisan peta.

Pada masa ini tidak banyak yang dapat dilihat, tetapi ia akan berubah dalam satu detik: double klik lapisan dan memohon stroke dalaman putih 8-10 piksel. Ia sangat penting untuk anda menggunakan strok bulat yang tidak perlu kelihatan hebat dalam kes kami.


Langkah 6: Dodge dan Burn

Mari kita tukar lampu. Kami akan lakukan dengan sesuatu yang serupa dengan kesan mengelak / membakar. Apa yang boleh kita lakukan di sini adalah untuk membuat lapisan yang berlainan dan satu lapisan, satu lapisan akan menyala dan satu akan menggelapkan yang lain.

Pilih lapisan cahaya, ambil berus putih lembut yang besar dengan kelegapan dan aliran yang rendah, kemudian mulailah melukis dekat dengan lipatan pada segi empat tepat cahaya kertas (yang tidak mempunyai segiempat tepat telus hitam di atas).

Tetapi gambar-gambar akan lebih baik.

Saya menetapkan berus saya kepada kelegapan 20% dan aliran 20%, kemudian saya menarik beberapa sebatan mengikut grid. Ini tidak perlu tepat kerana kita akan menggunakan topeng lapisan sekali lagi.

Pada mulanya sukar untuk melihat strok cahaya di atas peta, jadi, demi kejelasan, saya menggunakan latar belakang kelabu 50% di bawah lapisan. Jelas sekali anda tidak perlu berbuat demikian.

Sebaik sahaja saya gembira dengan pukulan putih saya pilih topeng lapisan pada lapisan ini, ambil alat pemilihan segi empat tepat, dan dengan bantuan grid saya pilih petak di mana saya ingin menyembunyikan kesan ini. Apabila saya mempunyai pemilihan yang betul, isikan dengan hitam.

Sekarang anda boleh menghidupkan lapisan itu bergantung kepada bagaimana kesan strok anda.

Petua: ingat kami mencipta overlay .png untuk peta, jadi "biasa" adalah satu-satunya mod campuran yang boleh kami gunakan. Ini juga bermakna bahawa jika anda membesar-besarkan sebatan putih atau hitam ini dan menjadikannya terlalu legap, keputusan akhir mungkin kelihatan janggal.


Langkah 7: Dodge dan Burn Reloaded

Kini sudah tiba masanya untuk melakukan perkara yang sama untuk sisi yang lebih gelap, jadi pilih lapisan kosong dan ulangi Langkah 6. Kali ini anda akan menggunakan berus kelabu hitam atau gelap dan anda akan memilih dataran yang tidak anda pilih sebelumnya .


Langkah 8: Drop Some Shadow

Masa untuk menarik bayangan.

Untuk membuatnya bagus dan realistik, buat alat lasso poligonal untuk menarik bentuk yang akan menyerupai bayang-bayang, kemudian isi dengan hitam.

It's quite tricky to make the shadow look realistic, but remember this: the farther the map is from the table, the softer the edge of the shadow will be.

Alat smudge boleh membantu anda banyak, saya menggunakannya untuk menumpukan perhatian lebih dengan kotoran.

Hasil akhir harus terlihat seperti ini:


Langkah 9: Potong Lubang

Pada ketika ini anda harus mempunyai sesuatu yang serupa dengan ini. Kami hampir selesai dengan Photoshop.

Semua yang tersisa untuk melakukan lapisan biasa dan lapisan lapisan lapisan latar belakang, jadi klik sekali lagi dan seret lapisan lapisan dari lapisan peta ke lapisan latar belakang, sama berlaku untuk lapisan bayang-bayang. Sebaik sahaja anda telah melakukan itu, ubah kedua-dua topeng ini supaya pilih topeng lapisan dan tekan command + I (kawalan + saya pada PC).

Perkara terakhir yang dilakukan ialah mematikan penglihatan lapisan peta. Dengan cara ini kami memotong lubang melalui lapisan dan bahagian yang baik dari imej itu telus

Sekarang bahagian bawah lapisan tumpukan anda harus kelihatan seperti ini:


Langkah 10: Png

Eksport untuk Web dalam png-24 telus, namakan fail "mask.png" dan tutup Photoshop!


Langkah 11: HTML dan JS

Bahagian yang paling sukar dilakukan, kini berehat dan buka editor teks kegemaran anda

Kini anda hanya perlu membuat fail HTML baru yang menggunakan Google Maps API dan fail CSS untuk menyusun perkara itu sedikit.

Banyak dokumentasi tentang API ini juga di Google, anda akan melihat dalam langkah seterusnya yang anda tidak perlu menjadi pengekod pakar, anda hanya perlu menulis beberapa baris

Seperti yang anda lihat, kod itu agak mudah, saya hanya memutuskan untuk mengubah beberapa pilihan:

Saya mematikan suis untuk melihat satelit kerana saya tidak fikir ia sepadan dengan perasaan realistik ini. Saya melumpuhkan pengawal pengawal, paras streetView dan zoom untuk alasan yang sama, tetapi anda bebas melakukan apa sahaja yang anda mahu di sini.


Langkah 12: CSS

Apa yang berikut adalah kosong minimum yang akan ditulis dalam fail CSS yang dipautkan, dan anda akan melihat tidak ada terlalu rumit.

27 baris kod hanya untuk membuat perkara kelihatan betul dan anda boleh mengubahnya dengan cara yang anda suka, satu-satunya baris yang perlu anda ambil perhatian ialah peristiwa penunjuk terakhir: tiada;

penunjuk: tiada; menghalang tetikus daripada berinteraksi dengan # div div, jadi kursor akan dapat berinteraksi dengan apa sahaja di bawahnya. Dengan cara ini peta terus berfungsi, walaupun ia dikaburkan oleh topeng atau sesuatu yang lain.

Jika anda mencari acara penunjuk, dokumentasi kegemaran anda yang anda akan lihat terutamanya digunakan dengan fail SVG. Saya fikir penggunaannya dengan nilai "tiada" dianggap kurang penting dan belum diterokai!

Selebihnya CSS tidak begitu menarik; ia hanya meletakkan peta dan topeng di kedudukan yang betul. Map_canvas ditetapkan 1202px lebar dan tinggi 622px kerana yang berlaku adalah ukuran grid di mana peta adalah segi empat merah di gambar, atas: 97px dan kiri: 97px adalah offset grid dari atas sudut kiri (segiempat tepat biru dalam gambar).


Permohonan Kemungkinan

Sekarang anda memahami asas-asas anda boleh menggunakan teknik ini dalam pelbagai cara.

Apabila saya merancang konsep ini saya tidak memikirkan permohonan tertentu, tetapi selepas saya mula menulis tutorial saya fikir ia akan menunjukkan kepada anda orang cara praktikal untuk menggunakannya. Oleh itu, saya meletakkan halaman hubungan mudah dan fikir akan lebih baik untuk memberikan peta perspektif.

Untuk melakukan ini saya baru saja memilih semua lapisan dan menggunakan Edit> transform> perspektif untuk memberikan peta penyimpangan yang betul.

Dengan cara yang sama saya menyimpang sedikit bayang-bayang dan di bawahnya.

Ia saiz dan saiz yang berkesan, tetapi png-24 adalah kompromi saiz / berat yang baik.

Muat turun fail sumber dan semak tambahan .psd untuk diri sendiri.


Kesimpulannya

Saya harap saya sudah cukup jelas dan anda telah membuat peta sejuk untuk laman web anda.

Jika anda boleh mencadangkan cara alternatif untuk melakukan ini, atau memperbaiki aliran kerja anda, sila perhatikan pemikiran anda di bahagian komen. Terima kasih kerana membaca!!

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.