Tingkat keberadaan layout saat ini seharusnya terlihat seperti ini:
Hingga saat ini, sebuah logo dan menu atas telah dimasukkan. Berikutnya adalah gambar yang sedikit lebih besar, yang akan langsung terlihat di bawah navigasi.
Prinsip membuat lapisan baru telah dijelaskan dalam tutorial sebelumnya. Oleh karena itu, saya ingin menunjukkan sesuatu yang lain di sini. Langsung di bawah menu atas, sebuah gambar yang lebih besar akan ditampilkan. Hasilnya akan terlihat sebagai berikut:
Gambar tersebut - saat Anda memasukkannya - seharusnya memiliki ukuran yang tepat. Jika perlu, edit terlebih dahulu. Kemudian buka Berkas>Buka dan pilih gambar tersebut. Gambar yang dipilih akan ditampilkan dalam jendela baru. Tekan Ctrl+C untuk menyalin gambar ke papan klip. Sehingga Anda bisa langsung memasukkan gambar sebagai lapisan, yang juga memiliki ukuran yang tepat, buka Edit>Tempel sebagai>Lapisan Baru. Lapisan baru akan otomatis memiliki dimensi gambar dan Anda dapat dengan mudah memindahkan lapisan tersebut ke posisi yang sesuai. Dengan cara ini, semua gambar yang ingin Anda masukkan dapat disalin ke dalam layout dan ditempatkan di sana.
Kemudian masukkan teks di tempat-tempat di mana mereka sebenarnya akan muncul nantinya. Pada tahap perancangan, biasanya digunakan teks semu yang disebut Blindtext.
Sebelum Anda duduk dan menulis secara acak "test, test, test", saya sarankan Anda kunjungi situs http://www.blindtextgenerator.de/.
Di sana, Anda bisa menghasilkan teks semu - berbagai macam jenis - secara otomatis. Kemudian teks dapat dengan mudah disalin dan disisipkan ke dalam desain Anda. Dalam konteks ini, saya juga merekomendasikan situs http://dummyimage.com/. Di situs ini, Anda dapat menghasilkan gambar semu dalam berbagai ukuran. Gambar semu ini kemudian dapat digunakan sebagai placeholder untuk grafis asli yang belum dibuat dalam layout Anda.
Permasalahan dengan lapisan transparan
Saat Anda memasukkan teks, itu akan terdiri dari beberapa elemen seperti judul, paragraf teks, dan sebagainya. Oleh karena itu, Anda sebaiknya menggabungkan teks yang berhubungan di lapisan-lapisan tersendiri. Dengan demikian, Anda dapat selalu memindahkan teks tersebut sebagai satu kesatuan. Buka Lapisan>Lapisan Baru untuk melakukannya. Kemudian tentukan ukuran lapisan serta warna latar belakang yang diinginkan atau perlu. Namun, biasanya Anda akan mengatur atau membutuhkan latar belakang transparan. Namun, permasalahannya adalah bahwa lapisan transparan sulit dipindahkan. Sering kali Anda malah menangkap lapisan di bawahnya. Namun, masalah ini dapat dihindari dengan mudah. Yang penting adalah pengaturan di jendela Toolbox. Aktifkan alat Pindah di dalamnya. Di area bawah jendela, aktifkan opsi Pindah Lapisan Aktif.
Dengan cara ini, Anda dapat memindahkan lapisan transparan ke posisi mana pun.
Memotong elemen
Jika Anda puas dengan layout tersebut, saatnya untuk menerapkannya sebagai halaman web HTML secara praktis. Di sinilah Slicen, atau memotong, terlibat. Slicing adalah proses memisahkan layout menjadi bagian-bagian terpisah, yang nantinya akan digabungkan kembali menggunakan HTML dan CSS. Anda harus memotong semua elemen yang akan ditampilkan secara terpisah. Yang dikecualikan adalah elemen-elemen gambar, yang secara alami sudah berdiri sendiri. Saya akan menunjukkan kepada Anda bagaimana Anda dapat memotong elemen. Gambar garis bantu di sekitar elemen yang bersangkutan. Garis bantu akhirnya akan menjadi garis potongnya. Pastikan untuk meletakkan garis itu dengan benar.
Pilihlah area yang diinginkan dan tekan tombol pintas Ctrl+Shift+C. (Ini berlaku sama baik untuk GIMP maupun Photoshop). Selanjutnya, buatlah sebuah file baru. Di Photoshop, file baru tersebut akan langsung memiliki ukuran yang tepat. Namun, di GIMP, hal itu tidak semudah itu. Di sini, Anda cukup membuat file dengan dimensi yang cukup besar. Gunakan Ctrl+V untuk menyisipkan konten dari papan klip.
Selanjutnya, gunakan Alat Pemotong. Tentukan area yang akan dipotong dan tekan tombol Kembali atau Return. Gambar akan dipotong sesuai dengan area yang diinginkan. Melalui Berkas>Simpan dengan Nama Anda bisa menyimpan gambar tersebut.
Suatu elemen penting dari penampilan untuk banyak situs web adalah penggunaan Gradien Warna. Bahkan pada layout contoh yang ditampilkan di sini, terdapat gradien warna. Untuk memotong gradien warna, pilihlah area sempit dari gradien yang tepat. Sebenarnya, sudah cukup jika Anda menetapkan area dengan lebar satu piksel. Namun, tinggi harus sama dengan tinggi sebenarnya dari elemen tersebut. Melalui CSS, Anda kemudian bisa membuat gambar tersebut diulang secara horizontal sampai elemen keseluruhan terisi penuh. Tentu saja, Anda juga bisa menggunakan area potongan yang lebih lebar. Namun, itu akan mengurangi performa situs. Oleh karena itu, pilihlah satu piksel sebagai lebar gradien warna.
Dengan Ctrl+Shift+C salin grafik satu piksel lebar ke papan klip dan tempelkan kembali sebagai gambar baru. Simpan gambar baru tersebut setelah dibawa ke area yang relevan.
Dengan demikian, prinsip dasar pengotakan harus menjadi lebih jelas. Anda memotong semua hal dari layout yang nantinya akan menjadi bagian dari situs web. Jika elemen halaman sudah ada, yang tidak perlu dipotong, gunakan langsung tanpa melalui proses slicing.
Hasilnya seharusnya terlihat seperti ini: Anda memiliki semua grafik yang nantinya akan Anda gunakan dalam situs web. Termasuk di dalamnya logo, latar belakang, gradien warna, dan sebagainya. Pada topik gradien warna, saya menyadari bahwa gradien warna dapat dibuat dengan mudah melalui CSS3. Namun, masalahnya adalah bahwa belum semua browser mendukung fitur tersebut. Selain itu, proses slicing juga memungkinkan untuk menunjukkan pemotongan dengan gradien warna, maka dalam tutorial ini saya memilih untuk menggunakan gambar dalam mengimplementasikan gradien warna.
