Ada banyak sekali templat situs web di web, tetapi mereka memiliki satu kelemahan - tidak unik. Jika pemilik situs tidak ingin desain situsnya terulang di tempat lain, ia dapat memesan template dari desainer profesional atau mencoba membuatnya sendiri.
Itu perlu
Program Adobe Photoshop
instruksi
Langkah 1
Membuat template Anda sendiri bukanlah tugas yang sulit seperti yang terlihat pada pandangan pertama. Untuk bekerja, Anda memerlukan Adobe Photoshop - tentu saja, Anda harus memiliki setidaknya pemahaman dasar tentang bekerja dengannya. Tetapi sebelum Anda meluncurkan program dan mulai membuat, Anda harus memikirkan desain masa depan terlebih dahulu. Cara paling mudah untuk melakukan ini adalah dengan terlebih dahulu berkenalan dengan setidaknya seratus templat yang sudah jadi, mengevaluasi kelebihan dan kekurangannya. Perhatikan solusi sukses elemen desain tertentu. Ini tidak berarti bahwa Anda akan menyalinnya, tetapi cukup masuk akal untuk mengambil beberapa solusi yang indah dan nyaman sebagai dasar.
Langkah 2
Berdasarkan analisis template orang lain dan kreativitas Anda sendiri, Anda harus mendapatkan gambaran tentang tampilan situs Anda. Yang terbaik adalah membuat sketsa kasar dari desain masa depan dengan pensil warna pada lembar A4 biasa. Anda harus mulai bekerja dengan Photoshop hanya setelah Anda memiliki gagasan yang jelas tentang apa yang sebenarnya akan Anda gambar.
Langkah 3
Mulai Photoshop, buat proyek 1200x1600 baru, atur latar belakang transparan. Nyalakan alat Ruler, jika belum menyala, untuk melakukan ini tekan kombinasi tombol Ctrl + R. Aktifkan gertakan: Lihat - Gertakan.
Langkah 4
Sekarang kita perlu membagi template dengan panduan yang akan menunjukkan batas elemennya - sisi, kolom, dll. Misalnya, Anda ingin membagi template sehingga ada kolom sempit di sebelah kiri, kolom lebar di sebelah kanan template, dan ada ruang di bagian atas untuk header. Ini berarti Anda memerlukan tiga garis vertikal (batas kiri template, kanan dan garis di antara keduanya) dan garis horizontal, yang menunjukkan batas bawah header. Untuk mengatur garis vertikal, gerakkan kursor ke penggaris kiri di sisi kiri, tekan V dan, sambil menahan tombol, seret garis ke lokasi yang diinginkan. Lakukan hal yang sama dengan dua garis vertikal lainnya. Yang horizontal dibangun dengan cara yang sama, hanya penggaris atas yang digunakan.
Langkah 5
Temukan latar belakang untuk template Anda, itu harus berupa pola kecil yang berulang. Buka di Photoshop, pilih, salin. Kemudian tempel ke template sebanyak yang Anda butuhkan untuk mengisinya dengan latar belakang. Tempel dilakukan seperti ini: "Edit" - "Tempel", lalu seret area latar belakang ke lokasi yang diinginkan. Bahkan lebih cepat untuk menyisipkan gambar menggunakan perintah Ctrl + V. Tambahkan latar belakang untuk tajuk situs dengan cara yang sama. Anda dapat menggunakan berbagai isian gradien untuk membuat latar belakang.
Langkah 6
Dengan menggunakan alat Pencil, gambar batas templat, dengan fokus pada garis yang sudah digambar (yaitu, di atasnya). Anda telah menerima dasar dari templat paling sederhana, sekarang Anda perlu melengkapinya dengan detail yang diperlukan - tombol navigasi, garis menu, berbagai elemen dekorasi, dll. Untuk informasi lebih lanjut tentang cara membuat tombol dan elemen lainnya, baca artikel terkait tentang bekerja dengan Adobe Photoshop.
Langkah 7
Template dibuat, sekarang Anda perlu memotongnya menjadi beberapa bagian untuk memasukkannya ke halaman html. Gunakan Slice Tool untuk memotong. Untuk menemukannya, klik kanan alat Frame dan pilih Cutout dari menu yang terbuka. Sekarang Anda dapat membuat sarang template sesuai keinginan, lalu simpan: "File" - "Save for Web". Di jendela yang terbuka, pilih jenis file: HTML & gambar, tentukan nama file: index.htm dan simpan. Anda akan memiliki file index.htm dan folder gambar dengan gambar yang diiris.
