Membuat Website Dengan Menggunakan Photoshop
Mungkin anda sudah tidak asing dengan blogspot, wordpress, joomla, drupal maupun website berbasis CMS lainnya, atau mungkin php, css dan sebagainya. Yep… sebuah aplikasi yang biasa di gunakan untuk membuat website.
Mungkin… untuk saat ini blogspot, wordpress, drupal, joomla atau sorce CMS (conten management system) lebih di gandrungi, disamping user friendly dan gak ribet bikin coding dan desain serta tetek bengeknya.
Nah.. bagi anda yang bosen dengan CMS dan ingin berkreasi sendiri menggunakan software Dreamweaver tidak ada salahnya anda menyimak tutorial berikut.
Ya….. saya akan membuat tutorial tentang Membuat Website Dengan Menggunakan Photoshop dan Dreamweaver.
Taukah agan semua, jika Photoshop bisa digunakan untuk mendesain tampilan website? Dengan menggunakan tehnik Sliding semua itu bisa saja terjadi.
Nah….. silahkan simak tutorial berikut, semoga bermanfaat
1.Mulailah dengan new920px lebar x 700pxtallimage. Tata letak ini akancocok untuk 1024x768 resolusi ataulebih tinggi. Jika Anda lebih memilih untuk membuatnya dapat dilihat di 800x600 resolusi monitor, silakan gantinya menggunakan lebar maksimum 778px.Begin dengan menciptakan latar belakang dua-kencang. Untuk melakukan ini, pertama mengisi lapisan latar belakang dengan # b7c292, warna hijau gelap zaitun. Untuk warna bagian atas latar belakang, membuat layer baru, pilih theRectangular Marquee Tool, dan buat seleksi untuk ketiga atas thebackground. Aku mengisi tambang dengan warna beige terang(# f2eeea).
2.Selanjutnya buat layer baru titledTable Backgroundand menggunakan theRectangular Marquee Tool, buat seleksi bagi tubuh tabel utama. Isi seleksi dengan # 000000. Kemudian klik kanan pada layer ini dan pilih opsi blending. Tambahkan aDrop ShadowandInner Shadow. Bayanganini akan membuat garis yang bagus dan givethe tabel utama sentuhan yang bagus dengan gradien yang sangat halus.
3.Sekarang kita akan membuat bar navigasi. Mulailah dengan membuat lapisan titledNavigation baru Bar. Pindahkan lapisan ini di bawah mejaBackground, karena bar navigasi akan terlihat baik jika tampaknya"pop-out" dari bawah meja utama. Sincethe bar akan memiliki bentuk yang sedikit tidak teratur, menggunakan pen tool untuk membuat pilihan. Anda dapat melihat bentuk yang saya buat untukitu di bawah ini. Anda dapat mengisi seleksi dengan warna yang Anda inginkan untuk now.I saya tidak akan menjelaskan bagaimana menggunakan pen tool secara mendalam dalam tutorial ini. Jika Anda baru ke berbagai alat pena, Anda harus twooptions. Anda bisa menggunakan theRectangular Marquee Toolinstead, atau Anda dapat menggunakan salah satu dari dua tutorial berikut ini untuk mendapatkan kecepatan sampai dengan alat.
4. Selanjutnya mari kita tambahkan beberapa gaya ke bar navigasi. Klik kanan pada layer navigasi bar, pilih opsi blending, dan menggunakan pengaturan berikut untuk aDrop ShadowandInner Shadow.
5.Silakan menambahkan logo dan beberapa link placeholder di bar navigasi. Untuk efek tambahan untuk membuat tata letak ini appearmore seperti "Web 2.0" tata letak, menambahkan beberapa glosske bar navigasi. Untuk melakukan hal ini, membuat layer baru di atas semua lapisan saat ini dan pilih theElliptical Marquee Tool. Buat pilihyang menutupi bagian atas bar navigasi, mengisinya putih, dan mengubah opacity layer ini sekitar 10-15%.
6.Sekarang mari kita menambahkansebuah foto yang bagus di sudut kiriatas tabel utama. Kami kemudian akan menambahkan kotak di sebelah gambar untuk menambahkan kemampuan pencarian rumah. Jika Anda tidak memiliki gambar, Anda dapat menggunakan salah satu saya memilih upat sxc.hu.Click sini untuk mendapatkannya. Anda akan wanttomengubah ukuran gambar sehingga tidak menyalip tata letak; Saya ukurannya tambang sekitar 560px lebar 370px tinggi. Saya juga menambahkan stroke garis 1px, drop shadow, dan gradien yang sangat halus pada bagian atas gambar seperti yang saya lakukan untuk bar navigasi.
7.Hal ini sangat umum untuk website real estate untuk memiliki beberapa jenis pencarian yang memungkinkan Anda untuk dengan mudah melihat apa sifat yang untuk dijual. Karena ini adalah alat yang berguna, mari kita tambahkan satu berikutnya juga gambar yang baru saja ditambahkan. Mulailah dengan membuat layer baru, pilih theRectangular Marquee Tool, dan buat seleksi yang mengisi sisa barisdi sebelah kanan gambar rumah. Halini akan berfungsi sebagai latar belakang khusus untuk kotak ini. Aku mengisi tambang dengan warnaabu-abu terang (#eeeeee) untuk memastikan bahwa contentplaced diatasnya akan tetap mudah readable.Fill dalam kotak dengan judul, beberapa teks deskriptif, dan beberapa bidang pencarian. Untuk bidang pencarian saya menggunakan theRounded Rectangle Tool. Sebagai efek tambahan, saya juga menambahkan AMAP forsale signand dari States.
8.Serikat. Selanjutnya kita akan membuat pembagi kecil untuk memisahkan bagian konten dan sub-navigasi utama. Untuk ini, kita akan menggunakan pola. Mulailah dengan membuat baru 1px lebar 3pxgambar tinggi dengan latar belakangtransparan. Menggunakan thePencilTool, warna dalam dua blok pertamadalam warna hitam seperti yang ditunjukkan below.In untuk menggunakan ini, perlu ditetapkan sebagai sepatu dr kayu a. Untuk melakukan hal ini, pergi toEdit> Define Pattern. Berikan judul kemudian menyimpannya. Kembali ke dokumen asli, membuat lapisan titledRight Kolom Divider baru, dan pilih theRectangular Marquee Tool. Buat seleksi yang tinggi, namun sangat tipis untuk pembagi untuk masuk. Sekarang pergi toEdit> Fill.Selectthe pola baru dibuat dan klik Ok. Anda harus memiliki pembagi seperti yang ditunjukkan di bawah ini. Saya juga pergi ke depan ditambahkan beberapa konten di kolom sebelah kanan.
9.Akhirnya membuat pola lain seperti yang dilakukan inthe langkahsebelumnya, tetapi intead membuatnya 3px lebar 1px tinggi. Gunakan pola ini untuk membuat pembagi yang akan memisahkan judul header dan konten halaman. Kemudian tambahkan beberapa teksfiller dan menambahkan perangkat tambahan tambahan yang Anda ingin membuat. Anda dapat mengklik gambar di bawah ini untuk melihat produk akhir.
Begitulah cara buat web design dari Photoshop.....
Tidak ada komentar:
Posting Komentar