Desainer web profesional mengembangkan templat situs web, biasanya dalam editor grafis yang kuat seperti Adobe Photoshop. Hasil karya berupa file dengan gambar, yang dalam bentuk ini diberikan kepada pemesan. Untuk menggunakan desain yang sudah jadi, yaitu untuk menata halaman web, Anda perlu memotong template.
Diperlukan
editor grafis raster Adobe Photoshop
instruksi
Langkah 1
Buka file template di editor grafis Adobe Photoshop. Pilih File dan Buka dari menu, atau tekan kombinasi tombol Ctrl + O. Pada dialog yang muncul setelah itu, buka direktori dengan file tersebut, pilih dalam daftar dan klik tombol "Buka".
Langkah 2
Pilih skala yang nyaman untuk melihat gambar template. Gunakan Alat Zoom atau item menu konteks. Pilih skala yang memungkinkan Anda memposisikan kursor dengan presisi piksel. Ini diperlukan untuk mengatur garis referensi secara akurat.
Langkah 3
Bentuk satu set garis referensi di atas gambar template. Nyalakan tampilan penggaris di jendela dokumen jika belum menyala. Untuk melakukan ini, tekan Ctrl + R atau pilih View and Rulers dari menu.
Langkah 4
Gerakkan kursor mouse ke atas penggaris atas untuk menambahkan garis referensi horizontal. Tekan dan tahan tombol kiri. Gerakkan kursor mouse ke bawah ke area gambar. Demikian juga, dengan menggunakan penggaris kanan, Anda dapat menambahkan garis horizontal.
Langkah 5
Tambahkan jumlah garis referensi yang diperlukan dan posisikan di sepanjang batas pembagian wilayah templat. Garis harus melewati semua tempat di mana Anda ingin memotong template. Mereka harus membatasi semua gambar dan area logis (logo, header situs, menu horizontal dan vertikal, dll.) yang akan ditampilkan di halaman web.
Langkah 6
Aktifkan Alat Iris. Tombolnya ada di bilah alat vertikal.
Langkah 7
Buat jumlah area pemotongan yang diperlukan menggunakan Slice Tool. Pilih skala yang nyaman untuk menampilkan template. Gunakan mouse untuk mengatur batas area. Panduan yang ditambahkan pada langkah ketiga akan memberikan posisi yang tepat dari batas-batas objek yang Anda buat. Sesuaikan area yang ada jika perlu menggunakan Slice Select Tool.
Langkah 8
Ubah properti daerah pemotongan sesuai kebutuhan. Aktifkan Alat Pilih Slice. Klik kanan pada area yang diinginkan. Di menu konteks, pilih item Edit Opsi Irisan. Pada dialog Opsi Irisan yang muncul, pilih jenis area (gambar, area kosong, tabel), mode pengisian latar belakang, tentukan, jika perlu, nama, URL target, konten atribut alt="Gambar" dan nilai lainnya. Klik Oke.
Langkah 9
Potong templatnya. Pilih File dan Simpan untuk Web & Perangkat dari menu, atau tekan Shift + Ctrl + Alt + S. Dalam dialog Simpan untuk Web & Perangkat, tentukan format dan parameter kompresi gambar tempat template akan dipotong. Klik tombol Simpan. Dialog Simpan Dioptimalkan Sebagai akan ditampilkan.
Langkah 10
Pilih HTML dan Gambar (*.html) di daftar drop-down Jenis file, dan di bidang Nama file masukkan nama file tempat markup HTML template akan ditempatkan. Dalam daftar Irisan, pilih Semua Irisan. Tentukan direktori untuk output dan klik tombol "Simpan".
Langkah 11
File HTML akan ditempatkan di direktori target, yang sebenarnya adalah template halaman web yang sudah jadi. Subdirektori gambar akan berisi kumpulan gambar tempat template asli dipotong.
