Salam Share. .!!
Sebuah Website yang bagus bukan hanya dilihat dari isinya saja tapi juga dari Layout yang ditampilkan. terkadang banyak Website yang memiliki isi yang sangat menarik tapi akibat Layout yang kurang menarik sehingga para pengguna internet jarang betah mengunjungi Website tersebut, dengan kata lain Isi dan Layout sebuah Website saling bergantung. Layout sebenarnya dapat dibuat menggunakan Css dan Photoshop, untuk kali ini saya akan mencoba menjelaskan bagaimana cara mebuat Layout menggunakan aplikasi perangkat editor Photoshop. Untuk menghemat waktu langsung saja ketutorialnya seperti dibawah ini :
Langkah - Langkah :
1. buka aplikasi Photoshop yang anda miliki.
2. kemudian buat New Document dengan cara kllik menu "file" yang ada pada menubar atau dengan cara menekan tombol Shorcut (ctrk+N) pada keybord. kemudian isi pada Width: 850 px, Height:650px dan pada "Background Content" pilih "Transparent". jika sudah selesai diisi anda tekan OK. seperti gambar dibawah ini :
setelah itu akan tampil seperti gambar dibah ini:
3. kemudian anda buat garis bantu dengan menggunakan GuideLine, caranya anda klik menu "View" kemudian pilih "New Guide" akan tampil jendela seperti dibawah ini:
Atur pada "Orientation" pilih "Horizontal" kemudian pada Positionnya masukkan 150px. itu bertujuan untuk membuat jarak dengan Header dari Web yang kana dibuat, jika sudah klik OK. maka akan tampil seperti gambar dibawah ini :
4. kemudian langkah selanjutnya anda dapat menggunakan "Text Tool" untuk memberikan judul pada Header Web anda. seperti gambar dibawah ini :
tambahkan juga gambar-gambar yang menarik yang berhubungan dengan Web anda, karena Web yang akan saya buat adalah Online Shop maka saya menambahkan gambar pakaian dll atur sebagus mungkin. seperti gambar dibawah ini :
5. kemudian kita buat jarak untuk menu di bawah Header, kita dapat mengulang langkah 3 diatas dengan membuat "New Guide" tapi jaraknya diubah yaitu 180 px. maka tampilannya seperti gambar dibawah ini :
Potong sesuai dengan kebutuhan Web. dan lakukan hal yang sama untuk membuat "Footer" dari Web hanya saja tempatnya berbeda seperti gambar dibawah ini:
7. langkah selanjutnya adalah membuat potongan menu dengan menggunakan "Rectangel Tool" buat sesuai dengan kebutuhan menu yang akan anda masukkan di web anda. warna dapat diatus sesuai dengan keinginan, buat satu persatu. seperti tampilan dibawah ini :
jika sudah selesai membuat potong lagi menggunakan "Slice Tool" disetiap menu untuk membuat jarak satu sama lain. seperti gambar dibawah ini:
jika sudah selesai membuat menu pertama, buat lagi untuk menu "kategori" yang ada disamping. langkahnya sama seperti sebelumnya, tampilannya akan seperti gambar dibawah ini :
8. buat juga Footer menggunakan "Rectangel Tool" untuk meberikan tampilan yang bagus. seperti gambar diwah ini :
tambahkan tulisan pada menu sehingga lebih bagus, sebenarnya tulisan pada menu dapat ditambahkan lewat Coding "HTML".
9. langkah yang terakhir jika semua tampilan menurut kita sudah menarik, simpan "project" anda dengan cara pilih menu "file" pilih "Save for Web and Device". maka akan muncul jendela seperti gambar dibawah ini :
rubah extensi "jpge" menjadi "PNG" untuk memberikan kesan transparan saat disimpan, jika sudah anda klik "SAVE". maka file tersebut akan menjadi extensi "HTML" dan simpan file tersebut pada Local Server anda seperti "Appser" dan "Mysql".
jika dijalankan atau dibuka dibrowser maka tampilannya akan seperti ini :
untuk dapat melakukan Link atau semacamnya, anda harus membuat sebuah file Html atau mengedit Script dari file yang sudah disimpan sebelumnya. karena Artikel ini hanya membahas tentang tutorial photoshop maka Script HTML nya tidak dibahas.
Demikian Tutorial Membuat Layout Website Menggunakan Photoshop yang dapat saya jelaskan, semoga dapat bermanfaat buat semuanya. jika ada kesalahan dalam setiap penjelasan diatas saya mohon maaf. Terimakasih. .Salam SHARE. .!!
1 komentar:
Click here for komentarmantap dah artikelnya kawan http://aromaessen.com
ConversionConversion EmoticonEmoticon