Cara Melukis Templat Untuk Laman Web

Isi kandungan:

Cara Melukis Templat Untuk Laman Web
Cara Melukis Templat Untuk Laman Web

Video: Cara Melukis Templat Untuk Laman Web

Video: Cara Melukis Templat Untuk Laman Web
Video: Tutorial Front-End Template Startbootstrap Agency One Page 2024, November
Anonim

Terdapat sebilangan besar templat laman web di web, tetapi mereka mempunyai satu kelemahan - mereka tidak unik. Sekiranya pemilik laman web tersebut tidak mahu reka bentuk laman webnya diulang di tempat lain, dia boleh memesan templat dari pereka profesional atau cuba membuatnya sendiri.

Cara melukis templat untuk laman web
Cara melukis templat untuk laman web

Ia perlu

Program Adobe Photoshop

Arahan

Langkah 1

Membuat templat anda sendiri tidaklah sukar seperti yang dilihat pada pandangan pertama. Untuk bekerja, anda memerlukan Adobe Photoshop - tentu saja, anda harus mempunyai sekurang-kurangnya pemahaman asas untuk bekerja dengannya. Tetapi sebelum anda melancarkan program dan mula membuat, anda perlu memikirkan rancangan masa depan terlebih dahulu. Cara paling mudah untuk melakukan ini adalah terlebih dahulu berkenalan dengan sekurang-kurangnya seratus templat siap pakai, menilai kelebihan dan kekurangannya. Perhatikan penyelesaian berjaya elemen reka bentuk tertentu. Ini tidak bermaksud bahawa anda akan menyalinnya, tetapi adalah wajar untuk mengambil beberapa penyelesaian yang indah dan mudah sebagai asasnya.

Langkah 2

Berdasarkan analisis templat orang lain dan kreativiti anda sendiri, anda harus mendapat idea bagaimana rupa laman web anda. Sebaiknya buat lakaran kasar reka bentuk masa depan dengan pensil berwarna pada kepingan A4 biasa. Anda harus mula bekerja dengan Photoshop hanya setelah anda mempunyai idea yang jelas tentang apa sebenarnya yang akan anda lukis.

Langkah 3

Mulakan Photoshop, buat projek 1200x1600 baru, tetapkan latar belakang yang telus. Hidupkan alat Pembaris, jika belum dihidupkan, untuk melakukan ini tekan kombinasi kekunci Ctrl + R. Aktifkan penggambaran: Lihat - Menggambar.

Langkah 4

Sekarang kita perlu membahagikan templat dengan panduan yang akan menunjukkan batas elemennya - sisi, lajur, dll. Sebagai contoh, anda ingin membahagikan templat sehingga terdapat lajur sempit di sebelah kiri, lajur lebar di sebelah kanan ke kanan templat, dan ada ruang di bahagian atas untuk tajuk. Ini bermaksud bahawa anda memerlukan tiga garis menegak (sempadan kiri templat, kanan dan garis di antara mereka) dan garis mendatar, yang menunjukkan sempadan bawah pengepala. Untuk menetapkan garis menegak, gerakkan kursor ke pembaris kiri di sebelah kiri, tekan V dan, sambil menahan kekunci, seret garis ke lokasi yang diinginkan. Lakukan perkara yang sama dengan dua garis menegak yang lain. Yang mendatar dibina dengan cara yang sama, hanya pembaris atas yang digunakan.

Langkah 5

Cari latar belakang templat anda, mestilah corak kecil dan berulang. Buka di Photoshop, pilih, salin. Kemudian tampal ke templat seberapa banyak kali anda perlu mengisinya dengan latar belakang. Tampal dilakukan seperti ini: "Edit" - "Tampal", dan kemudian seret kawasan latar ke lokasi yang diinginkan. Lebih pantas memasukkan gambar menggunakan perintah Ctrl + V. Tambahkan latar belakang tajuk laman web dengan cara yang sama. Anda boleh menggunakan pelbagai gradien mengisi untuk membuat latar belakang.

Langkah 6

Dengan menggunakan alat Pensil, lukiskan sempadan templat, dengan fokus pada garis yang sudah dilukis (iaitu di atasnya). Anda telah menerima asas templat termudah, sekarang anda perlu menambahkannya dengan butiran yang diperlukan - butang navigasi, garis menu, pelbagai elemen hiasan, dll. Untuk maklumat lebih lanjut mengenai cara membuat butang dan elemen lain, baca artikel yang sesuai mengenai bekerja dengan Adobe Photoshop.

Langkah 7

Templat telah dibuat, sekarang anda perlu memotongnya menjadi kepingan untuk memasukkannya ke dalam halaman html. Gunakan Slice Tool untuk memotong. Untuk mencarinya, klik kanan alat Bingkai dan pilih Potongan dari menu yang terbuka. Sekarang anda boleh meletakkan templat seperti yang dikehendaki, kemudian simpan: "Fail" - "Simpan untuk Web". Di tetingkap yang terbuka, pilih jenis fail: HTML & gambar, tentukan nama fail: index.htm dan simpan. Anda akan mempunyai fail index.htm dan folder gambar dengan gambar yang dihiris.

Disyorkan: