Cara Membuat Header pada AMP Website

Bagikan artikel ini ....Share on Facebook
Facebook
2Tweet about this on Twitter
Twitter

Photoshop | Rizkan.id

Cara Membuat Header pada AMP Website. Jika anda sebelumnya telah belajar untuk memasang AMP (Accelerated Mobile Pages) pada website untuk mempercepat loading. Kali ini kami akan membagikan tutorial untuk mendesain tampilan AMP Header agar terlihat simpel dan menarik.

Ini tampilan awal AMP header pada website rizkan.id, bentuknya tidak proporsional (agak lonjong kesamping).

1. Buka aplikasi Photoshop CS 3 (atau yang terbaru). Tekan Ctrl + N lalu atur Width = 190 pixel , height = 36 pixel dan resolution = 72 pixel. Jika sudah klik ok.

2. Maka akan muncul tampilan blank dokument seperti gambar dibawah.

3. Karna saya ingin praktis, saya langsung mengambil dari desain logo rizkan.id terdahulu. Tekan Ctrl + O untuk memilih gambar yang akan dimasukan pada header AMP website anda. Klik dan drag tul;isan/gambarnya.

4. Pada menu diatas pilih Layer > Smart object > Convert to Smart object.

5. Tahan tombol shift sembari mengecilkan ukuran objek untuk header.

6. Tekan kembali Ctrl + O lalu lakukan cara yang sama seperti langkah no 4-5 diatas.

7. Dan hasilnya akan terlihat seperti gambar dibawah. Mungkin anda akan bingung jika tampilan gambar pecah (itu karena memang ukuran header AMP sangat kecil yaitu 190 x 36 pixel.

8. Jangan lupa untuk save as. Sebagai PSD (untuk mentahnya) dan JPEG untuk hasil akhirnya.

9. Beri nama gambar AMP header, lalu klik save.

10. Selanjutnya log in ke akun website anda yaitu wordpress. Pada dashboard pilih AMp > Getting Started > General.

11. Pada General klik remove. Jika gambar header awal sudah hilang, klik upload.

12. Pilih AMP header yang telah kita desain sebelumnya dengan photoshop, kemudian klik open.

13. Jika sudah berganti headernya, cukup klik save changes.

14. Nah kita dapat menceknya dengan menambahkan /amp pada alamat (URL) website contohnya saya https://www.rizkan.id/amp maka tampilannya pun sudah berubah menjadi menarik dan proporsional.

Jika artikel ini berguna bagi anda, silahkan like dan share.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.