• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Membuat Desain Web Bernuansa Cat Air dengan Photoshop Bagian 2

02‘13
May

info90.jpg

Article ini adalah lanjutan dari article sebelumnya tentang membuat konsep desain web dengan nuansa cat air mengguakan photoshop. Pada bagian sebelumnya anda sudah di ajak bereksperimen untuk menggunakan Art history brush dan mengkombinasikannya dengan Watercolor Brushes yang sudah siap pakai sehingga memiliki background gambar pemandangan yang tampak seperti lukisan.

Pada bagian sebelumnya kita juga sudah menyelesaikan desain pembungkus halaman content dengan model tembus pandang seperti kaca. Sekarang mari kita lanjutkan ekperimen desain bagian header, menu navigasi dan isi content

Siapkan logo anda untuk ditempatkan dibagian header halaman website. Untuk judul website dan sub judul saya menggunakan "Corbel" dan "Bradley Hand ITC" Typeface dengan kode warna: #FFFFFF yang di tempatkan diatas gambar logo. Tepat di belakang logo saya brush beberapa kali dengan warna biru (#068192 dan #00e0ff). kemudian semua layer di proses ini saya grup kedalam grup logo.

Untuk bagian navigasi menu Gunakan Rounded Rectangle tool untuk membuat bidang persegi berwarna biru (#002c4a) di bagian atas desain, Atur nilai Fill Opacity menjadi 50% dan tambahkan Stroke biru (# 3F5060) berukuran 1px. Dengan Type Tool, ketik link link halaman di atas layer menu navigasi yang baru dibuat, saya menggunakan tipografi "Futura Std", untuk anda gunakan yang anda sukai.

Selanjutnya, Brush dengan warna putih (#FFFFFF) di belakang teks dan ubah juga warna text di atasnya dengan warna biru tua (# 23A54) sebagai efek tanda link atau bagian navigasi menu yang disorot mouse.

Disini saya meningkatkan kreatifitas efek visual dari background lukisan yang sudah di buat dengan menambahkan lebih banyak warna tanda cat air, saya menempatkan brush di seluruh perbatasan gambar "Landscape, silahkan atur sesuai dengan kreasi anda supaya terlihat lebih menarik.

Untuk bagian header yang selain logo tambahkan juga sebuah kotak untuk sebuah ringkasan deskripsi web. Buat sebuah bidang menggunakan rounded reactangle berwarna hijau (#1c3f03) dengan radius 15px, kemudian berikan Efek Stroke dengan warna yang sama dan ubah nilai opacity menjadi 35%. Ubah bidang tersebut menjadi Smart Objek dan tambahkan Layer Mask untuk menghilangkan sebagian box.

Pada bagian isi halaman (content) kita akan menambahkan sebuah desain pergantian gambar/banner (image slider), terlebih dahulu carilah plugin-plugin ajax slider yang cocok dengan desain web sebelum membuat desain slider image.

Siapkan gambar berukuran 620 pixel dan tiga thumbnail yang berukuran lebar total 620 pixel jiga di jajarkan kesamping, lalu tambahkan bidang segitiga berwarna biru (#5D8CB6) dengan menggunakan Polygon Tool.

Tambahkan bidang persegi berwarna putih (#FFFFFF) dengan Rectangle Tool lalu beri opacity 50% dan tambahkan deskripsi singkat diatas banner

Sampai dengan tahap ini sebagian besar proses desain web yang sulit sudah selesai, tapi masih ada beberapa bagian seperti sidebar dan footer yang belum diselesaikan, kita lanjutkan di bagian ke 3 ya supaya gak terlalu berat load gambar tutorialnya.

Anda juga mungkin suka dengan artikel ini :

  1. Bagaimana menggunakan tool Vanishing Point di Photoshop
  2. Membuat Desain Web Bernuansa Cat Air dengan Photoshop
  3. Menggabungkan Photo Dengan Photomerged Photoshop
  4. Membuat Brush di Photoshop dengan Bentuk Brush dari Gambar
  5. Bagaimana membuat efek Liquid (cairan) sederhana pada Photoshop

Komentar

  • jessica (08 Oct 2014 12:05:34)

    semoga menjadi ilmu yang manfaat dan barokah..amin

  • Z***ky (18 Aug 2013 02:59:29)

    Perasaan ini tutorial dari web sebelah ya . . . . ?

  • i[at]w3function.com (22 May 2013 10:20:42)

    Betul pembuatan template web dengan table memang bukan standard, tidak SEO friendly, berat di load dan banyak masalah lainnya yg kemudian akan menyulitkan temen-temen sendiri sehingga harus ditinggalkan. Untuk template web yg baik dan professional temen-temen bisa mempelajari mulai dari penggunaan tag HTML standard untuk template web baik XHTML/HTML5 sampai dengan pemberian gaya desain di CSS secara external. Temen-temen bisa sama-sama belajar di Blog kami untuk mulai beralih dari penggunaan template table ke penerapan standard template web tableless sampai dengan semantic ada banyak materi di blog ini yang semoga bisa membantu.

  • aconymous (22 May 2013 09:03:39)

    selamat siang w3function.. saya mau bertanya soal slice di photoshop, setelah di slice dan di jadikan html and image, itu menjadi sebuah table yg di potong dengan baris dan kolom, saya pernah dengear bila menggunakan banyak table akan memperlambat progres page, bagaimana bila tidak trjadi seperti itu, apa ada solusinya untuk saya dan kawan" lainnya,
    terimakasih :)

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff