Teknik Membuat Web Profesional dengan Photoshop

Teknik Membuat Web Profesional dengan Photoshop

MULAI
Pada bagian ini kita akan membahas tentang teknik pengembangan situs sesuai dengan sketsa.
Proses pengembangan diawali dengan pembuatan layout halaman menggunakan Adobe Photoshop, kemudian diolah dalam Macromedia Dreamweaver untuk menambahkan isi (content) dan sedikit tambahan menu pop up (pull down) menggunakan Javascript.
Untuk studi kasus, pertama kali kita akan mencoba membuat situs pribadi. Dalam hal pemilihan warna, terserah para pembaca. penulis hanya memberikan teknik membuat bentuk layout halaman website profesional.
4.1. SITUS PRIBADI

Dengan melihat bentuk layout tersebut di atas, akan lebih mudah proses pengembangannya dalam Adobe Photoshop. Sebelum membuat dokumen baru, kita harus mengetahui bahwa tidaksemua resolusi monitor pengguna sama dengan yang kita miliki. Sebagai contoh, resolusi monitor kita  menggunakan ukuran 1024 x 768 pixel sedangkan pengguna (user) hanya memiliki resolusi 800 x 600 pixel. Apabila Anda membuat ukuran dokumen 900 x 600 pixel maka menimbulkan ketidaknyamanan pengunjung karena harus sering menggulung halaman website akibat ukuran dokumen terlalu lebar. Sebaiknya lebar tidak melebihi 800 pixel.
4.2.1. Membuat Dokumen Baru
Diasumsikan Anda menggunakan Adobe Photoshop CS maupun CS2. Jalankan program Adobe Photoshop kemudian ikuti beberapa petunjuk berikut ini.
1. Buatlah dokumen baru dengan ukuran 800 x 600 pixel. Mode warna RGB, resolusinya 72 pixel, mode warna RGB 8 bit dan latar belakang white. Beri nama dokumen baru tersebut (misal: Situs Pribadi), setelah selesai klik OK.

2. Untuk mempermudah proses pembuatan interface situs, ada baiknya memasukkan gambar bentuk layout ke dalam dokumen Adobe Photoshop. Anda dapat menduplikasi (copy dan paste) ke dalam dokumen tersebut.

3. Klik Set Foreground color untuk memilih warna sebagai latar belakang.

4. Setelah kotak dialog Color Picker muncul, masukkan kode warna # 0066cc pada kotak kode.

5. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna pada layer Background.

6. Buatlah layer baru dengan nama “Up” kemudian aktifkan Rectangle Marquee tool dan buatlah seleksi seperti nampak pada gambar berikut.

7. Tekan huruf D pada keyboard untuk mengubah warna default Foreground dan Background (Hitam dan Putih) kemudian tekan huruf X untuk membalik warna tersebut.
Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna putih pada layer “Up”. Tekan Ctrl+D untuk membuang seleksi.

4.2.1. Membuat Interface
Bentuk interface yang bagus dapat membangkitkan “gairah” para pengguna untuk tetap menikmati berbagai berita dan informasi yang disajikan. Keunikan bentuk interface memiliki nilai tersendiri karena tidak semua orang memiliki kemampuan untuk menciptakan bentuk tersebut. Berikut ini akan membahas salah bentuk interface yang modern.
8. Pertama kali, aktifkan tool Pen.

9. Pada menu option di bagian atas, pilih Shape Layers.

10. Klik Set Foreground Color untuk memilih warna.

11. Setelah kotak dialog Color Picker muncul, masukkan kode warna #ff5d6c pada kotak yang disediakan

12. Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak pada gambar 4.1.2.5.

13. Aktifkan Convert Point tool untuk membuat efek lengkung. (Lihat gambar 4.1.2.6.).
14. Aktifkan Convert Point tool untuk membuat efek lengkung

15. Klik pada segmen yang ingin diberi efek lengkung. Klik dan tahan sambil menggeser salah satu convert point ke kanan secara perlahan agar membentuk lengkungan yang diinginkan.

16. Selanjutnya memilih segmen yang lain. Klik dan tahan sambil menyeret pointer ke kanan secara perlahan agar membentuk objek yang diinginkan.

17. Jika telah selesai maka akan terbentuk sebuah asesoris modern seperti nampak pada gambar berikut.

18. Aktifkan layer Shape 1, buatlah duplikat layer tersebut dengan cara mengklik dan tahan sambil menggerakkan ke ikon Create New Layer.

19. Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebut dengan nama Shape 1 copy. (Lihat gambar 4.1.2.10.).

20. Aktifkan layer Shape 1 copy kemudian tekan Ctrl+T untuk mentransformasikan. Klik tombol mouse kanan dan pilih Flip Horizontal. Setelah selesai klik tombol Commit pada option bar atau dapat juga menekan tombol Enter. (Lihat gambar 4.1.2.11.).

21. Kurangi tingkat kepekatan (opacity) dengan cara menggeser slider pada menjadi 50%.

22. Aktifkan Direct Selection tool.

23. Buatlah seleksi untuk memilih dua buah segmen yang akan dipindahkan secara bersama-sama.

24. Gunakan tombol panah ke kiri untuk menggeser dua buah segmen tersebut.

25. Langkah selanjutnya adalah membuat ilustrasi yang sama untuk memperindah tampilan.
Buatlah duplikat layer Shape 1 sekali lagi dengan cara menggeser layer tersebut ke ikon Create New Layer. Kemudian modifikasi bentuknya menggunakan Convert Point tool sehingga akan membentuk sebuah latar belakang yang modern. Ubahlah opacity-nya menjadi 20%.

26. Berikutnya, aktifkan Pen tool dan buatlah Shape yang berbentuk seperti gambar berikut.

27. Seperti biasa, aktifkan Convert Point tool untuk membuat bagian yang lengkung

28. Sehingga akan didapatkan sebuah bentuk interface yang modern.

29. Duplikasi Shape 2 dengan cara menyeret layer tersebut ke ikon Create New Layer.
Kemudian ubahlah bentuknya agar lebih menarik lagi. Untuk memodifikasi, gunakan Convert Point tool dan Direct Selection tool. Jika mengikuti petunjuk buku ini, bentuk shape akan seperti nampak pada gambar berikut.

30. Terakhir, aktifkan Rectangle tool .

31. Kemudian buatlah Shape berbentuk kotak memanjang. Jangan lupa memberi warna Shape tersebut dengan kode warna #ea1c30

4.2.1. Membuat Tombol
Setelah sebelumnya membuat bentuk interface untuk halaman situs, langkah selanjutnya adalah membuat tombol yang eksklusif.
1. Pertama kali, aktifkan Rectangle Rounded tool.

2. Buatlah sebuah tombol berbentuk kotak.

3. Aktifkan Direct Selection tool kemudian buatlah seleksi untuk memilih empat buah segmen di bagian bawah.

4. Geser ke kanan sebanyak 10 kali menggunakan tombol tanda panah ke kanan.

5. Berilah efek bayangan (Drop Shadow) dengan cara mengklik ikon Layer Style (f) di bagian bawah Palet Layers. (Lihat Gambar 4.1.3.5.).
6. Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi seperti nampak pada gambar 4.1.3.6. Setelah selesai klik OK.


7. Langkah selanjutnya adalah membuat beberapa duplikasi tombol tersebut dengan cara menggesernya ke ikon Create New Layer.

8. Buatlah tiga buah tombol lagi dengan cara yang sama seperti sebelumnya. Anda dapat menduplikasi tombol yang sudah ada atau membuat tombol baru lagi. Jika Anda telah membuat tiga buah tombol, kira-kira bentuknya seperti gambar berikut ini.

Read More

Belajar membuat blog/web dengan mudah menggunakan wordpress

Belajar membuat blog/web dengan mudah menggunakan wordpress

Saat ini pembuatan blog atau web site terbilang cukup mudah, hal ini karena adanya suatu sistem yang disebut Content Management System (CMS), yang bisa dikatakan sebagai template web site. Dengan CMS kita tinggal mengupload (copy) CMS ini ke server, menginstallnya setelah selesai tinggal masuk ke administrator untuk mengatur dan mengisi artikel yang diinginkan. Banyaknya CMS opensource yang tersedia kadang membuat kita bingung untuk memilihnya. Tetapi jika masih awam dengan CMS, apalagi belum banyak tahu tentang web programming seperti saya, maka sebaiknya memilih yang sederhana dan mudah, seperti wordpress.

Jika para blogger / pengguna wordpress ditanya mengapa kok menggunakan wordpress? Mungkin sebagian akan menjawab karena kemudahannya dan konfigurasi yang relatif sederhana. Bagi pengguna awal biasanya tidak memerlukan waktu lama untuk bisa menguasai dan memahaminya. Sederhana bukan berarti minim fasilitas. Memang fasilitas bawaan wordpress sendiri mungkin masih belum mencukupi jika anda ingin web dengan berbagai fasilitas yang wah, tetapi dengan besarnya komunitas dan dukungan plugins yang begitu banyak, kita tinggal menambahkan fasilitas apa yang diinginkan. Mulai dari  konfigurasi administrasi, statistik, forum, iklan, artikel, kalender, dan sebagainya.

Bagaimana belajar membuat blog/web site dengan wordpress secara off-line ? Untuk melakukan hal itu diperlukan beberapa komponen yaitu : Apache ( berfungsi sebagai server ), MySQL (Database) dan PHP (bahasa pemrograman web). Coba ikuti langkah-langkah berikut :

A. Menginstall Apache, MySQL dan PHP

1. Download Apache dan MySQL dalam satu paket Apache friends yaitu xampplite (basic package) dari situs www.apachefriends.org, www.xampp.org atau dari http://sourceforge.net (ukuran sekitar 46 MB) yang bentuk zip atau exe (diinstall terlebih dulu). Untuk mudahnya pilih saja yang zip.
2. Extract xampplite ke drive yang diinginkan, misalnya C:\xampplite ( memerlukan space hardisk sekitar 115 MB ). Jika download yang exe, install terlebih dahulu.
3. Untuk mengetest apakan xampplite berhasil, buka folder C:\xampplite, jalankan xampp-control.exe dan klik start di baris Apache dan MySql, tunggu sampai ada tanda
   bahwa keduanya berjalan dengan keterangan tulisan running.
   
   
4. Setelah keduanya berjalan ( ada keterangan running ) kemudian buka web browser anda ( mozilla firefox atau internet explorer ) dan ketikkan localhost lalu tekan enter. Maka jika instalasi berhasil akan ditampilkan pesan :
   Welcome to XAMPP for Windows Version …..
   Congratulations:
   You successfully installed XAMPP on this system!
   

B. Menginstall WordPress

1. Download wordpress terbaru dari alamat resmi wordpress, yaitu : http://wordpress.org, atau langsung download file ini http://wordpress.org/latest.zip  ( terkadang tidak bisa download dengan download manager seperti flashget, DAP, IDM dan sebagainya, jadi gunakan saja download standard bawaan browser, misalnya dengan klik kanan dan pilih menu Save As.. atau Save Link As.. ukuran sekitar 1 MB ).
2. Extract latest.zip tersebut di folder htdocs, dari langkah diatas berarti di folder  C:\xampplite\htdocs ( copykan file latest.zip ke folder htdocs, kemudian klik kanan dan pilih extract here dengan  program 7zip, Winzip atau Winrar), akan dihasilkan folder wordpress yang berisi tiga folder, yaitu : wp-admin, wp-content dan wp-includes . Juga beberapa file *.php lainnya.
3. Folder wordpress itulah yang nantinya menjadi nama web yang akan dibuka melalui URL, sehingga bisa kita rename terlebih dahulu, misalnya dari wordpress di ganti menjadi ebsoft sehingga kita nanti membuka web lokal kita dengan mengetikkan http://localhost/ebsoft ( tapi hal itu nanti ).
4. Agar bisa dijalankan, maka wordpress harus diinstall terlebih dulu. Sebelumnya ada beberapa konfigurasi yang harus dilakukan ( pastikan Apache dan MySQL telah dijalankan, seperti langkah A nomor 3 diatas )
   1. Buka browser dan ketik localhost, kemudian pilih menu sebelah kiri bagian bawah phpMyAdmin ( atau langsung ketikkan di alamat browser http://localhost/phpmyadmin/
   2. Buat database baru dengan mengetikkan nama database di bawah keterangan Create new database, misalnya ebsoftdb kemudian klik Create.
5. Setelah berhasil dibuat database baru, buka file wp-config-sample.php ( di folder C:\xampplite\htdocs\ebsoft ) dengan text editor seperti Notepad, dan ubah
   datanya seperti berikut ( ini berdasarkan langkah diatas ) : putyourdbnamehere diganti ebsoftdb ( nama database
   yang telah dibuat sebelumnya ) lalu usernamehere diganti root dan hapus text yourpasswordhere sehingga tinggal titik dua (”), kemudian simpan dan close.
6. Ubah nama file  wp-config-sample.php  menjadi wp-config.php .
7. Langkah selanjutnya menginstall wordpress. Buka web browser kemudian isikan alamat URL : http://localhost/ebsoft/wp-admin/install.php akan
   ditampilkan tampilan welcome oleh wordpress.
   
   
8. Isikan Blog Title dan alamat email, kemudian klik Install WordPress >>
9. Jika berhasil akan ditampilkan tampilan wordpress, success! Dan ingat password yang tampil , atau catat.
   
   
10. Untuk memulai pengaturan, mengisi artikel dan sebagainya, bisa langsung masuk ke admin panel, dengan mengklik link log in ( dari tampilan sebelumnya) atau wp-login.php. Atau bisa juga langsung mengetikkan alamat http://localhost/ebsoft/wp-login.php di web browser.
    
    
11. Ketikkan username : admin dan isikan password yang tampil sebelumnya, kemudian klik login>>
12. Selesai… selanjutnya kita dapat mulai menulis artikel, menjelajahi dan mempelajari menu-menunya, jangan lupa mengganti passwordnya melalui menu User dan klik edit untuk username admin.
    

Semoga bermanfaat ( http://thinkchandra-skyline.blogspot.com )

Read More