Cara Mendesain Halaman Arahan yang Menakjubkan Untuk Situs Web Portofolio Dengan Adobe Muse

Daftar Do's and Don'ts untuk situs web portofolio tidak ada habisnya. Namun, dari daftar tersebut, saya menemukan dua kesamaan – menghindari untuk mengisi satu halaman dengan segala sesuatu dan menjaga halaman arahan dan navigasi sesederhana, menarik dan mudah diakses mungkin.

Itulah yang akan Anda pelajari dengan tutorial ini. Selain itu, Anda akan:

• Pelajari cara mengoptimalkan grafik untuk situs web Muse menggunakan Adobe Illustrator (penting untuk membuat konten situs dimuat lebih cepat)
• Mampu menampilkan konten dalam perspektif menggunakan Photoshop.
• Ketahui cara mendesain halaman arahan profesional dengan Adobe Muse.

PERSYARATAN TUTORIAL INI:

Untuk pemahaman yang tepat dan membuat apa yang ditampilkan dalam tutorial ini, Anda harus mengunduh aset tertentu dari berbagai sumber gratis. Namun, Anda masih dapat mengikuti tanpa ini.

• Buka https://goo.gl/KVL9r1 dan unduh gambar ini untuk header. Dimensinya harus 1400 x 750 piksel. Berikut tangkapan layar dari situs tersebut. Letakkan ukuran ini di kotak ukuran khusus dan unduh.

  

• Buka http://goo.gl/ZeHxOF dan http://goo.gl/BASRSP dan unduh paket ikon media sosial dan ikon panah bawah.
• Logo yang digunakan dalam tutorial ini dapat diunduh di sini (hyperlink – file 'assets.rar' dilampirkan dengan email)
• Buka http://goo.gl/mzw1Xh dan unduh vektor layar iMac 27” ini yang akan digunakan untuk menampilkan proyek 'desain situs web'.
• Buka aplikasi creative cloud desktop dan download mockup iPhone dan iPad mini seperti gambar di bawah ini. Mereka akan secara otomatis ditambahkan ke perpustakaan Photoshop Anda.

  

LANGKAH #1: CARA MENGOPTIMALKAN GRAFIS UNTUK WEB DI ADOBE ILLUSTRATOR:

1. Buka file 'eps' ikon sosial di ilustrator. Pilih ikon facebook (versi persegi) dan tekan Ctrl+Shift+G untuk memisahkan ikon-ikon ini.

2. Klik di luar kanvas dan pilih lagi ikon facebook. Kemudian, buka panel transformasi yang terletak di bagian atas dan masukkan W=19.5, H=19.5 dan tekan enter.

3. Tekan Ctrl+C lalu, Ctrl+N. Dalam kotak dialog dokumen baru ini, letakkan 'static_facebook_icon' di bawah bidang Nama, W=20 dan H=20. Pastikan piksel dipilih dari daftar drop-down unit. Klik Oke.

4. Tekan Ctrl+V untuk menempelkan ikon facebook dan menyelaraskannya dengan benar.

5. Buka File > pilih 'save for web' (Alt+Shift+Ctrl+S). Pilih PNG-24 dari daftar drop-down yang terletak di kanan atas. Klik simpan dan simpan di lokasi yang diinginkan. Juga, simpan file ilustrator (Ctrl+S)

6. Ulangi langkah 2 hingga 5 untuk ikon twitter, google plus, LinkedIn dan Behance dan simpan untuk web.

CATATAN : Kami telah memilih format png karena mereka memiliki transparansi yang besar, ukuran yang relatif lebih rendah dan yang terbaik untuk ikon dan vektor.

7. Demikian pula, optimalkan lima ikon ini untuk gambar header. Kali ini, ubah warnanya menjadi putih. Untuk melakukan ini, pilih ikon, pergi ke Fill drop-down yang terletak di kiri atas di bawah menu aplikasi, pilih warna putih dan simpan untuk web. Sekarang, Anda memiliki 10 ikon – 5 berwarna abu-abu dan 5 berwarna putih.

8. Setelah itu, optimalkan ikon panah bawah (warna: putih, dokumen W= 30px, H=20px) dan simpan untuk web sebagai PNG-24.

9. Sekarang, buat dokumen baru berukuran 1400 x 750 piksel dan beri nama header_image. Klik Oke.

10. Buka File > Place dan telusuri gambar yang kami unduh dari pexels.com. Klik pada kanvas untuk menempatkannya dan menyesuaikannya di dalam kanvas.

TIPS : Tekan 'Z' pada keyboard Anda, tahan tombol alt dan klik kanvas beberapa kali untuk memperkecil sedikit sehingga semuanya terlihat sekaligus.

11. Pilih alat persegi panjang dari kotak alat yang terletak di sisi kiri jendela aplikasi. Buat persegi panjang dan ubah menjadi W=1400, H=750px. Kemudian, seret persegi panjang ini ke gambar yang ditempatkan.

12. Dengan persegi panjang ini dipilih, pergi ke fill drop-down, pilih menu swatch library yang terletak di sudut kiri bawah. Dalam daftar ini, buka 'Gradien' dan pilih 'Earthtones'.

13. Pilih earthtone 30 seperti yang ditunjukkan pada gambar di bawah dan tutup panel ini.

14. Dengan persegi panjang masih dipilih, buka tab gradien yang terletak di sisi kanan jendela aplikasi. Jika tidak ada, tekan Ctrl+F9. Klik, tahan, dan seret penggeser gradien tengah ke kiri ekstrem.

15. Kemudian, di dalam bidang 'Opacity' (terletak di atas), masukkan 87% dan tekan enter.

16. Simpan gambar ini untuk web. Kali ini, pilih JPEG dan quality=86%. Juga, simpan file ilustrator.

LANGKAH #2: MENYIAPKAN ASET DI PHOTOSHOP:

17. Buka Adobe Photoshop CC. Buka File > pilih 'Baru'. Beri nama 'ecommerce_design', W=619px dan H=310px.

18. Dari panel Libraries (terletak di sebelah kanan), pilih ipad mini mockup yang telah kita download dan drag ke kanvas.

19. Tahan tombol shift dan tingkatkan ukurannya dengan menyeret sudut dan menyesuaikannya di dalam kanvas seperti yang ditunjukkan di bawah ini.

CATATAN : Anda mungkin ingin menggunakan alat zoom. Untuk beralih antara alat zoom dan seleksi, tekan tombol 'Z' dan 'V' pada keyboard Anda. Juga, jika Anda tidak dapat menemukan panel perpustakaan (atau panel lainnya), cukup buka menu Window > pilih Libraries.

20. Pilih rectangle tool dan buat persegi panjang dengan ukuran berapa pun di dalam kanvas (jangan khawatir tentang warna isiannya). Kotak properti akan muncul. Di dalam ini, letakkan W=1024px dan H=768px dan pastikan ikon rantai tidak dipilih.

21. Sekarang, klik ikon rantai untuk memilihnya. Masukan W=290px dan tekan enter. Ciutkan panel properti ini.

22. Di bawah panel Layers yang terletak di sisi kanan, pilih 'Rectabgle 1', klik kanan dan pilih 'convert to smart object'.

23. Lalu, masuk ke menu edit > pilih 'Free transform'. Sekali lagi, buka menu edit > transformasi > pilih 'distort'.

24. Pegang salah satu sudut persegi panjang dan buat itu bertepatan dengan salah satu sudut layar iPad. Lakukan ini untuk keempat sudut dan tekan enter. Anda akan mendapatkan hasil berikut. Gunakan alat zoom jika perlu.

25. Di bawah panel Layers, klik kanan layer background dan hapus. Juga, buat layer 'persegi panjang 1' tidak terlihat dengan mengklik ikon mata kecil di sebelah kirinya.

26. Ulangi langkah 18 sampai 22 untuk membuat satu persegi panjang lagi, mengubahnya menjadi objek pintar dan membuatnya bertepatan setiap sudut dengan sudut layar ipad dan tekan enter.

27. Buat lapisan 'persegi panjang 1' terlihat dan lapisan 'ipad' tidak terlihat.

28. Klik kanan layer 'persegi panjang 1' dan pilih 'edit konten'. Itu akan dibuka di tab baru. Buka File > Place embedded, telusuri 'screen1.png' yang dapat ditemukan di folder Logos yang Anda unduh. Klik tempat dan tekan enter. Tekan Ctrl+S. Perubahan ini akan diperbarui pada persegi panjang 1 di file utama kami. Tutup tab ini.

29. Demikian pula, lakukan ini untuk persegi panjang 2 dengan 'screen2.png' dan simpan. Pindahkan lapisan ke atas atau ke bawah di panel lapisan sesuai dengan preferensi Anda. Hapus lapisan ipad.

30. Klik kanan sembarang layer persegi panjang dan pilih 'blending options'. Kotak gaya lapisan akan muncul. Pilih opsi terakhir yaitu 'drop shadow' dan beri nilai seperti yang ditunjukkan di bawah ini.

31. Di kotak dialog ini, tepat di sebelah blend mode, ada kotak warna. Klik dan pilih nilai warna berikut.

32. Terapkan efek drop shadow yang sama ke layer kedua juga. Tekan Alt+Ctrl+Shift+S. Pilih PNG-24 dan klik simpan. Anda akan mendapatkan hasil berikut.

CATATAN : Ini adalah bagaimana Anda dapat menempatkan situs web atau gambar apa pun dalam perspektif. Anda hanya perlu mengetahui resolusi yang tepat dari perangkat yang akan Anda tempatkan. Lakukan untuk iphone dan mockup iMac untuk menampilkan proyek 'desain logo' dan 'desain situs web' seperti yang ditunjukkan di bawah ini.

LANGKAH #3: MENYIAPKAN RUANG KERJA DI MUSE:

33. Buka Adobe Muse CC. Anda akan disambut dengan layar selamat datang. Di bawah 'Buat Baru', klik situs dan kotak dialog situs baru akan muncul.

CATATAN : Cara lain untuk membuat situs baru adalah dengan membuka File > Situs Baru atau Ctrl+N.

34. Di kotak dialog ini, ada menu drop-down yang bertuliskan 'fluid width'. Buka ini dengan mengkliknya dan pilih 'Fixed width' dan ubah nilai lebar halaman dan kolom seperti yang ditunjukkan di bawah ini. Nilai bidang 'talang' akan berubah secara otomatis.

35. Perluas opsi pengaturan lanjutan dan pastikan kotak centang 'sticky footer' dipilih. Juga, pastikan bahwa situs di 'sejajar tengah' di dalam area browser. Klik Oke. Muse akan membawa Anda ke mode RENCANA.

36. Tekan Ctrl+S dan simpan situs Anda di lokasi yang diinginkan. Saya menyarankan Anda untuk membuat folder terpisah untuk situs Anda dan menyimpannya setiap kali Anda membuat perubahan.

CATATAN : Lebar fluida adalah untuk membuat tata letak yang responsif. Kami telah memilih lebar tetap karena kami akan membuat efek gulir yang tidak berfungsi dengan situs lancar.

37. Klik dua kali 'A-master' yang terletak di bagian bawah di area abu-abu. Dari kotak alat yang terletak di sisi kiri jendela aplikasi, pilih 'alat teks'.

38. Buat kotak teks di kanvas. Tekan Ctrl+T untuk membuka panel teks dan di bawah drop-down font, cari font web dan pilih 'tambahkan font web'.

39. Sebuah jendela baru akan muncul. Pilih tab 'tepi web font', cari dan unduh font berikut satu per satu:

• monoton
• Teleks
• angka
• jalan raya
• bahasa latin
• Arimo

Setelah mengunduh font ini, hapus kotak teks.

40. Buka panel 'Layers' yang terletak di sebelah kanan atau buka menu Window > pilih 'layers'. Klik ikon kertas tepi terlipat kecil yang terletak di kanan bawahnya. Klik dua kali untuk membuat dua lapisan lagi.

41. Klik dua kali 'lapisan 1'. Jendela opsi lapisan akan muncul. Di bawah nama, masukkan 'home_header' dan klik OK. Ulangi proses ini untuk dua layer lainnya dan beri nama masing-masing sebagai 'static_header' dan 'content'.

42. Atur layer dalam urutan yang ditunjukkan di bawah ini hanya dengan menyeretnya ke atas atau ke bawah dan simpan perubahannya.

CATATAN : Kami telah menempatkan lapisan dalam urutan ini karena kami ingin header kami berada di atas segalanya. Lapisan adalah cara yang efisien untuk mengatur dan menumpuk konten situs terutama ketika tata letak menjadi rumit.

43. Pilih layer 'static_header' dan tutup panel ini.

LANGKAH #4: MEMBENTUK KEPALA STATIS:

44. Di bagian atas halaman, Anda melihat dua panduan. Yang pertama adalah panduan 'atas halaman' dan yang kedua adalah 'panduan header'. Klik, tahan, dan seret panduan tajuk di bawah dan atur pada 80 piksel. Anda dapat melakukan ini dengan bantuan penguasa. Ini adalah area tajuk kami.

45. Pilih alat persegi panjang atau tekan 'M' pada keyboard Anda. Buat persegi panjang kecil di kanvas dan pastikan warna bordernya 'merah' yang menunjukkan bahwa objek ini berada di dalam layer 'static_header'.

46. ​​Pergi ke 'Resize' (atau 'Transform' di versi Muse yang lebih lama) yang terletak di kanan atas, klik dan masukkan H=80.

47. Seret persegi panjang ini dan letakkan di dalam area header sedemikian rupa sehingga terkunci dengan panduan 'top of page' dan 'header'.

48. Sekarang, kita akan menambah lebar persegi panjang dan membuatnya 100% untuk membuatnya skalabel untuk setiap ukuran layar. Perluas persegi panjang ke kedua tepinya dan pastikan itu terkunci dengan tepi halaman. Ketika Anda akan mencapai tepi, pada panduan berwarna oranye akan muncul menunjukkan bahwa objek telah diambil dan pesan akan mengatakan W=100% atau W=1400.

49. Dengan persegi panjang yang dipilih, klik Fill drop-down di bawah menu aplikasi dan pilih warna putih.

50. Klik kata 'goresan' di sebelahnya untuk mengisi. Klik ikon rantai untuk memutuskannya dan letakkan '1' di bidang bobot stroke bawah.

51. Setelah itu, klik drop-down warna guratan, masukkan nilai untuk R, G dan B masing-masing 235. Kemudian, klik ikon kertas tepi terlipat untuk membuat contoh baru. Kotak opsi swatch akan muncul. Klik Ok dan simpan perubahannya.

52. Buka File > Tempat. Jelajahi 'static_logo.png' dan klik buka. Kursor akan mengubah penampilannya menjadi pistol tempat yang penuh dengan gambar. Klik pada kanvas untuk menempatkannya.

53. Kemudian, pindahkan gambar ini ke persegi panjang header dan sejajarkan ke tengah vertikal (garis biru akan menunjukkan kapan itu di tengah) dan pasang ke batas kiri seperti yang ditunjukkan di bawah ini.

54. Sekali lagi, buka File > tempat dan pilih semua ikon media sosial statis yang kami optimalkan menggunakan Illustrator. Klik Buka. Anda akan melihat bahwa pistol tempat akan memiliki nomor (5) yang menunjukkan lima gambar yang dimuat. Jika Anda ingin beralih ke ikon lain untuk menempatkannya terlebih dahulu, Anda dapat menggunakan tombol panah pada keyboard Anda. Tempatkan mereka satu per satu.

55. Pilih semua ikon dan pergi ke panel 'Align' yang terletak di sebelah Resize di kanan atas. Di bawah tarik-turun 'Sejajarkan dengan', pilih 'sejajarkan dengan objek utama'.

56. Kemudian, masukkan 11 pada kolom yang tersedia di bawah opsi 'Distribute spacing'. Klik opsi 'A' dan 'B' seperti yang ditunjukkan pada gambar di bawah.

57. Dengan ikon ini dipilih, klik kanan dan pilih 'grup' atau Ctrl+G. Pindahkan grup ini ke persegi panjang header dan pasang ke tepi kanan sejajar dengan logo seperti yang ditunjukkan di bawah ini.

58. Buat kotak teks dan ketik HOME di dalamnya. Tekan Ctrl+T dan pilih Font: Telex, Size: 13, color: black, center alignment dan 120% leading. Sesuaikan lebar dan tinggi kotak teks ini sesuai dengan ukuran font.

59. Demikian pula, buat empat kotak teks lagi untuk WORK, SERVICES, CONTACT, dan TENTANG. Pilih semuanya, buka panel align dan ulangi apa yang kami lakukan dengan ikon media sosial. Kali ini, ubah jarak distribusi menjadi 50. Kelompokkan dan pindahkan ke persegi panjang header seperti yang ditunjukkan di bawah ini.

60. Sekarang, kita akan menyematkan objek-objek ini ke atas browser yang akan membuat header kita statis. Artinya, itu akan selalu ditampilkan di bagian atas browser terlepas dari pengguliran. Untuk melakukan ini, pilih persegi panjang header, pergi ke 'Pin' yang terletak di kanan atas dan klik di dalam kotak tengah atas seperti yang ditunjukkan di bawah ini.

61. Demikian juga, sematkan logo di kiri atas, grup menu di tengah atas, dan grup ikon sosial di kanan atas. Header statis kami sudah siap.

LANGKAH #5: MEMBANGUN FOOTER:

62. Anda akan melihat tiga panduan di bagian bawah yaitu – footer, bagian bawah halaman dan bagian bawah browser. Klik, tahan dan seret panduan 'bawah browser' dan atur pada 770 piksel dengan bantuan penggaris. Kemudian, seret panduan 'footer' dan pasang ke panduan 'bawah halaman'. Ini adalah area catatan kaki kami.

63. Buat persegi panjang di dalam area H=270 dan W=546 ini, buat sisi atas dan bawahnya bertepatan dengan footer dan bawah panduan browser masing-masing.

64. Dengan persegi panjang ini dipilih, klik kata 'stroke' dan terapkan hanya stroke atas berat '1' (nilai warna stroke: R=235 G=235 B=235). Pergi ke panel 'align' dan di bawah align objek, pilih 'align horizontal center' (ini adalah opsi kedua).

65. Tempatkan static_logo.png dan tambahkan teks di dalam persegi panjang ini seperti yang ditunjukkan di bawah ini. (Font Teks: Arimo, Ukuran: 14, Warna: R=37 G=37 B=37, Rata tengah dan 120% di depan).

66. Simbol hak cipta yang Anda lihat sebelum tahun 2016 dapat ditambahkan dari panel 'Glyphs' yang terletak di sisi kanan jendela aplikasi. Jika tidak ada, buka Window > Glyphs. Catatan kaki kami sudah siap.

LANGKAH #6: MENCIPTAKAN HOME PAGE HEADER DAN EFEK GULIR:

67. Tutup halaman master dan kembali ke mode rencana.

68. Buka halaman 'Home' dengan mengklik dua kali. Buka panel lapisan, pilih lapisan 'home_header' dan tutup panel.

69. Buat ruang di sini dengan menyeret ke bawah lapisan footer ke 4000 piksel dengan bantuan penggaris.

70. Sekarang, buat persegi panjang dengan lebar 100%. Lebar penuh, seperti yang kita lakukan sebelumnya, dapat dicapai dengan memperluas persegi panjang dari tepi kiri dan kanannya dan menjepitnya ke kedua tepi halaman.

71. Perluas persegi panjang ke atas dengan menyeret tepi atasnya dan pasang ke atas panduan halaman seperti yang ditunjukkan di bawah ini.

72. Pergi ke panel resize, masukkan H=750px.

73. Dengan persegi panjang yang dipilih, klik kata 'Isi' (bukan drop-down warna) dan klik 'tambah gambar'. Jelajahi 'header_image.jpg' yang kami unduh dari Pexels dan dioptimalkan di Illustrator. Di bawah drop-down 'fitting', pilih 'scale to fill' dan posisikan ke pojok kiri atas.

74. Di kotak opsi 'Isi' ini sendiri, di sebelah isian, ada opsi yang disebut 'Gulir'. Klik dan letakkan 0 di bidang gerak awal dan akhir. Ini berarti, gambar akan tetap diam dan konten akan bergerak menciptakan efek gulir yang bagus dan menarik secara visual.

75. Buat kotak teks dan ketik 'TENTANG TIM KAMI' di dalamnya. Font: Telex, Ukuran: 13, Rata kiri, warna: putih dan awal: 120%. Pindahkan dan letakkan di sudut kiri atas gambar sebagai berikut.

76. Tempatkan semua ikon sosial yang kami optimalkan untuk gambar header kami. Sejajarkan mereka pada jarak yang sama seperti yang kita lakukan untuk header statis. Kelompokkan dan letakkan di sudut kanan atas gambar sebagai berikut.

77. Buat kotak teks. Seharusnya dari W=944, H=92. Ketik 'WE DESIGN THE WEB' di dalamnya. Font: Monoton, Ukuran: 72, Rata tengah, 120% di depan. Ubah warna kata 'WEB' menjadi R=41 G=171 B=226 dan putih untuk sisanya.

78. Buat tiga kotak teks kecil lagi untuk LAYANAN, KONTAK, dan BLOG. Font: Telex, Ukuran: 13, Warna Putih, rata tengah dan 120% di depan.

79. Tempatkan gambar 'header_logo.png'. Sesuaikan logo dan keempat kotak teks ini sebagai berikut.

80. Pergi ke perpustakaan 'Widget' yang terletak di sisi kanan. Luaskan bagian 'Tombol'. Pilih 'Tombol Negara' dan seret ke kanvas. Tutup panel widget.

81. Pilih dengan hati-hati lingkaran kecil di dalam tombol ini dan tekan hapus.

82. Klik dua kali di dalam kotak teks Lorem Ipsum, pilih seluruh teks, hapus dan ketik 'PORTFOLIO'.

83. Pilih alat seleksi (alat panah) dari kotak alat. Buka panel teks (Ctrl+T) dan ubah format teks 'portofolio' sebagai berikut.

84. Sekarang, pilih tombol status dan ubah ukurannya menjadi W=177, H=43. Sesuaikan kotak teks dengan benar di dalam tombol.

85. Pilih tombol. Pergi ke opsi 'radius sudut' (terletak di sebelah stroke). Klik keempat sudut untuk membuatnya rata.

86. Dengan tombol yang dipilih, lihat sudut kiri atas, di bawah menu aplikasi. Anda akan melihat bahwa 'tombol status' ditulis dalam huruf tebal. Ini dikenal sebagai 'area pemilihan saat ini'. Hal ini memungkinkan Anda untuk mengetahui apa yang telah Anda pilih.

87. Tepat di sebelahnya adalah 'Normal'. Klik dan Anda akan memiliki empat status.

88. Untuk status Normal, ubah warna isian menjadi 'tidak ada' dan warna guratan menjadi putih.

89. Pilih status 'rollover', ubah warna fill dan stroke menjadi R=41 G=171 B=226.

90. Untuk status 'mouse down' dan 'active', perubahan yang diperlukan akan diterapkan secara otomatis.

91. Pilih status normalnya lagi, perluas panel 'Transisi' yang terletak di bagian bawah. Pilih kotak centang yang bertuliskan 'Fade' dan masukkan nilainya seperti yang ditunjukkan di bawah ini. Simpan perubahan.

92. Tempatkan gambar 'down_arrow.png' di bawah tombol. Anda harus memiliki hasil berikut.

93. Sundulan kandang kami sudah siap. Buka File > Pratinjau halaman di browser (Ctrl+Shift+E) dan lihat apakah semuanya berfungsi dengan baik.

LANGKAH #7: MENAMBAHKAN KONTEN:

94. Kembali ke Muse, buka panel lapisan, pilih lapisan 'konten' dan tutup panel.

95. Gulir ke bawah ke ruang putih di bawah dan buat kotak teks W=464, H=60. Ketik 'KARYA TERBARU KAMI' di dalamnya. Font: Raleway light, ukuran: 46, warna: hitam, rata tengah dan 120% terdepan. Sekarang, pilih kata 'RECENT' dan ubah font-nya menjadi 'Raleway Bold'.

96. Buat dua kotak teks lagi. Satu dengan W=376, H=165 dan lainnya dengan W=376, H=363.

97. Klik dua kali di dalam yang pertama dan ketik 'DESAIN SITUS WEB'. Font: Raleway Extra Light, ukuran: 77, warna: hitam, rata kiri, 100% terdepan.

98. Klik dua kali di dalam yang kedua dan rekatkan beberapa teks tiruan dari lipsum.com sebagai berikut.

• Untuk heading utama – Font: Lato Bold, size: 30, color: R=33 G=42 B=52, rata kiri dan 120% leading.
• Untuk paragraf utama – Font: Lato light, size: 21, color: R=57 G=57 B=57, rata kiri dan 120% leading.
• Untuk heading 'Client's Testimonial' – sama dengan heading utama tetapi ukurannya 21.
• Untuk paragraf testimonial – sama dengan paragraf utama tetapi font 'Lato Light Italic'

99. Pilih tombol status 'portofolio', salin dan tempel di bawah kotak teks yang kita buat pada langkah sebelumnya. Ubah teks dari portofolio menjadi 'LIHAT SITUS'

• Untuk keadaan normal – Isi: tidak ada, goresan dan warna teks: hitam.
• Untuk status rollover – Isi dan warna goresan: R=41 G=171 B=226 dan warna teks: putih.

100. Tempatkan gambar 'imac with website mockup'. Atur gambar, kotak teks dan tombol sebagai berikut.

101. Gulir ke bawah ke ruang putih dan buat persegi panjang W=1200, H=5. Terapkan stroke atas berat '1' dan warna R=235 G=235 B=235. Tempatkan sebagai berikut. Ini akan berfungsi sebagai pemisah.

102. Salin kotak teks dan tombol yang kita buat pada langkah 92 hingga 95, tempel di bawah pemisah. Ubah teks kotak pertama menjadi 'DESAIN LOGO' dan teks tombol menjadi 'LIHAT LANGSUNG'.

103. Tempatkan 'iphone dengan logo mockup' dan atur sebagai berikut.

104. Salin dan tempel pemisah setelah ini.

105. Demikian pula, salin dan tempel kotak teks dan tombol di bawah pemisah ini. Ubah teks kotak pertama menjadi 'E-COMMERCE'.

106. Tempatkan 'ecommerce_design.jpg' yang kita buat dan optimalkan pada langkah 15 sampai 30 dengan Photoshop. Atur semuanya sebagai berikut.

107. Sekarang, buat persegi panjang dengan W=1004, H=363 tanpa isian dan goresan atas dengan berat '1' dan warna: R,G,B=235 masing-masing.

108. Di dalam persegi panjang ini, buat dua kotak teks. Yang pertama, ketik – 'APA YANG KAMI PERCAYA ADALAH' (Font: Raleway light, size: 35, color: R,G,B=37 masing-masing, rata tengah dan 100% memimpin). Pilih kata 'BELIEVE' dan ubah font menjadi 'Raleway bold'.

109. Di kotak teks kedua, ketik kutipan terkenal dari Milton Glaser seperti yang ditunjukkan di bawah ini (Font: Lato Light Italic, size:70, color: R,G,B=37 each, center alignment and 120% leading.

110. Salin dan tempel salah satu tombol status di atas dan ubah teksnya menjadi 'LIHAT KERJA KAMI'. Atur semuanya sebagai berikut.

LANGKAH #8: MENGHUBUNGKAN:

111. Dari kotak alat, pilih 'link anchor' atau tekan 'A' pada keyboard Anda. Kursor akan mengubah penampilannya menjadi pistol tempat yang sarat dengan jangkar. Tempatkan jangkar ini di atas kotak teks 'OUR RECENT WORK' seperti yang ditunjukkan di bawah ini.

112. Kotak dialog dengan opsi jangkar akan muncul. Di dalam bidang nama, masukkan 'recent_work'.

113. Pilih tempat gambar panah bawah di bawah tombol portofolio. Buka drop-down 'Hyperlinks' yang terletak di atas dan pilih 'recent_work'. Simpan perubahan dan pratinjau situs (Ctrl+Shift+E).

LANGKAH #9: MENAMBAHKAN TEKS ALTERNATIF, METADATA, TAG LEVEL DAN FAVICON:

114. Teks alternatif adalah cara agar mesin pencari memahami arti materi yang terkandung dalam gambar dan harus disediakan untuk setiap gambar yang Anda tambahkan ke situs Anda. Untuk melakukannya, klik kanan salah satu dari tiga gambar yang telah kita tempatkan dan pilih 'edit properti gambar'.

115. Kotak dialog properti gambar akan muncul. Anda akan melihat dua bidang di sini. Salah satunya adalah 'tip alat' dan yang lainnya adalah 'teks alternatif'. Perbedaan mendasar antara keduanya adalah sebagai berikut:

CATATAN : Anda harus mencari di web untuk metode dan pertimbangan penting untuk menambahkan teks alternatif dan metadata karena keduanya merupakan aspek utama untuk SEO yang lebih baik.

116. Untuk menambahkan metadata, kembali ke tampilan Rencana, klik kanan halaman beranda dan pilih 'properti halaman'. Jendela baru akan muncul berisi tiga tab yaitu – tata letak, metadata, dan opsi. Beralih di antara tab ini, jelajahi opsi, dan tambahkan kata kunci yang relevan.

117. Faktor penting lainnya yang perlu dipertimbangkan sebelum membuat situs online adalah mengubah beberapa properti teks untuk menambahkan tag level.

CATATAN : Biasanya, saat Anda menambahkan konten tertulis di situs web, Anda membuat judulnya tebal dan lebih besar dari paragraf (atau teks lainnya) untuk menggambarkan perbedaan di antara mereka. Kita, sebagai manusia, dapat mengenali perbedaan ini. Tetapi masalahnya adalah bahwa browser tidak memahami bagian mana dari teks Anda yang merupakan heading dan mana yang merupakan paragraf, kecuali jika Anda menetapkan tag level yang ditentukan untuk masing-masing bagian tersebut.

Tentunya akan menampilkan halaman Anda secara online seperti yang Anda rancang apakah Anda telah menerapkan tag atau tidak (karena CSS), tetapi untuk membuat situs yang SEO friendly, perlu menggunakan tag deskriptif ini.

118. Untuk melakukannya, pilih teks, buka panel teks (Ctrl+T) dan di bagian bawah, Anda akan melihat tarik-turun yang berisi semua tag. Pilih sesuai dan simpan perubahannya.

119. Buka File > Properti situs. Di bawah tab konten, opsi terakhir adalah 'Favicon' (dalam versi Muse yang lebih lama, itu di bawah tab Tata Letak). Saat Anda mengarahkan kursor ke kata 'Favicon', tip alat akan muncul yang menjelaskan apa itu dan apa yang seharusnya menjadi dimensi yang sesuai. Adalah menguntungkan untuk menambahkan favicon karena berfungsi untuk membuat merek Anda menonjol dan untuk membuat situs Anda mudah dikenali jika pengguna telah menandainya.

LANGKAH #10: MENGEKSPOR SITUS:

120. Terakhir, buka File > Ekspor sebagai HTML (Ctrl+E). Di bawah bidang URL situs, masukkan www.squaremaze.com dan pilih lokasi tempat Anda ingin mengekspor situs. Klik Oke. Halaman Arahan kami sekarang sudah siap. Anda dapat mempratinjaunya (file 'index.html') di browser apa pun yang Anda inginkan dan menguji tampilan dan kinerjanya.

HASIL AKHIR:

KESIMPULAN

Menggunakan aplikasi lain seperti Illustrator, Photoshop, Fireworks, Fuse, dan Animate untuk membuat aset berkualitas untuk situs Muse selalu terbukti bermanfaat dan menghasilkan hasil yang luar biasa. Ini hanyalah salah satu pendekatan untuk mendesain dengan alat yang luar biasa ini. Silakan dan jelajahi lebih lanjut. Terima kasih.