PART 2 : ADOBE PHOTOSHOP CS 3

Setelah kemarin dibahas mengenai pembuatan web dari ADOBE FIREWORKS, nah sekarang giliran ADOBE PHOTOSHOP. Ok, langsung saja ikuti langkah berikut ini.

Buka file PSD yang sudah disimpan di komputer atau laptop kamu, seperti pada gambar dibawah ini.

Jika ada notifikasi update seperti ini, maka kamu hiraukan saja dengan memilih NO. Lalu centang "DONT SHOW AGAIN", lihat pada gambar.

Atur perbesaran gambar dengan cara geser zoom di sebelah kanan. Agar lebih optimal, pilih perbesaran mulai dari 200% saja, lihat gambar.

Setelah itu kamu kembali membuat layout dengan cara menarik garis bantu, sesuaikan dengan tulisan "HOME" "BLOG" "ABOUT US" dan "CONTACT US". Buat yang rapi dan sesuaikan dengan ukuran yang kamu inginkan, lihat pada gambar.

Setelah selesai kamu membuat layout dengan garis bantu, saatnya kini melakukan pemotongan "SLICE" pada gambar. Caranya klik saja pada toolbox "SLICE" lalu buat slice pada tulisan "HOME" "BLOG" "ABOUT US" dan "CONTACT US". 

Selain dari itu jangan lupa untuk membuat slice pada bagian isi "CONTENT" web yang akan diisi nantinya. Lihat pada gambar berikut.

Setelah semua kamu slice saatnya sekarang untuk menyimpan file psd ini ke dalam format html. Caranya  pilih dan klik FILE => SAVE FOR WEB & DEVICE 

.

Maka akan muncul tampilan berikut ini. Kamu pilih seperti tampak pada lingkaran lalu klik EDIT OUTPUT SETTINGS

Atur penyimpanan output cara memilih SETTING => CUSTOM. Untuk lebih jelas, lihat gambar di bawah.

Nah, selanjutnya kamu pilih SAVE untuk menyimpan file psd tadi kedalam format html. Dan berikut tampilan yang akan muncul di browser kamu untuk melihat tampilan website yang sudah dibuat.

Nah, semua file yang sudah kamu slice tadi akan berubah menjadi file HTML dengan sebuah folder "IMAGES". Lihat pada gambar berikut ini.

Ok, pada pembahasan selanjutnya akan dibahas mengenai tahap terakhir yaitu penyisipan script kedalam file html ini dengan adobe dreamweaver.

Read More..

Kali ini saya akan memberikan tutorial mengenai pembuatan web sederhana. Pembuatan web kali ini menggunakan aplikasi fireworks, photoshop dan dreamweaver. Penggunaan firewoks agar pembentukkan dasar web lebih rapi dan mudah, selanjutnya menggunakan photoshop untuk melakukan pemotongan slice dan terakhir dreamweaver agar mampu menyisipkan html script di web kamu. 

PART 1. ADOBE FIREWORKS CS 3

Siapkan sebuah gambar dengan ukuran tertentu. Saya sarankan memakai ukuran gambar yang pas atau lebih dari 1200 x 800 px biar kualitas lebih bagus. Lalu pilih FILE => NEW, untuk membuat dokumen baru atur settingan dengan width : 1200px dan height : 800px serta resolution : 72px. 

Buka file gambar  ( CTRL + O ), lalu pilih / browse  gambar dengan resolusi 1200 x 800px yang kamu inginkan untuk dijadikan tampilan dasar web.  

Maka tampilan akan muncul seperti ini. Jikalau gambar tidak sesuai dengan ukuran kanvas, maka dapat kamu perbesar atau perkecil ukurannya agar sesuai dengan kanvas.

Setelah itu atur zoom dengan cara klik SET MAGNIFICATION pada sebelah kanan bawah. Pilih sesuai dengan pasnya kamu akan bekerja. Saya sarankan lebih baik mulai dari 150px, agar kelihatan jelas.

Selanjutnya, mengaktifkan garis bantu dengan cara drag dari sisi kanan atau atas rule. Hal ini dilakukan agar pembuatan dasar tampilan web lebih baik. Lihat pada gambar dibawah ini.

Lalu kamu pilih SLICE TOOL pada toolbox di sebelah kanan, dan buat design web sesuai dengan ukuran kamu inginkan dengan garis bantu tadi. Lihat gambar ( garis warna hijau adalah garis bantu, sementara area hijau adalah slice )

Nah kemudian, setelah semua tampilan web kamu selesai, maka kamu langsung export file ke photoshop. Caranya klik sebelah kanan QUICK EXPORT => PHOTOSHOP => EXPORT PHOTOSHOP.

Maka akan muncul tampilan berikut untuk menyimpan. Ketik nama file lalu pilih SAVE. Nah, tampilan dasar web kamu sudah selesai dan akan dilanjutkan ke PHOTOSHOP.

Pada pembahasan selanjutnya akan dibahas mengenai pemotongan ala photoshop biar lebih rapi dan disesuaikan dengan penyimpanan web dasar di dreamweaver

Read More..