DESAIN WEBSITE DENGAN PHOTOSHOP

http://psdesain.net/

Mendesain website dengan photoshop

Oleh : Jaka Zulham
http://psdesain.net/

1

Tutorial photoshop, wordpress dan desain | http://psdesain.net/

DESAIN WEBSITE DENGAN PHOTOSHOP

http://psdesain.net/

Kata pengantar
Dengan rahmat dan dalam naungan Allah yang maha esa, Alhamulillah saya telah menyiapkan Ebook (Electronic Book) edisi pertama untuk website saya psdesain.net/. Sesuai dengan judul pada E-book ini, pada ebook ini kita akan mencoba mendesain sebuah theme atau biasa disebut web desain dengan photoshop, saya akan menjelaskan secara step by step dengan lengkap hanya pada ebook ini. Semoga dengan ebook ini, dapat meningkatkan ilmu anda dan meningkatkan kualitas anda sebagai seorang DESIGNER .

Salam sukses. Jaka Zulham | http://psdesain.net/

2

Tutorial photoshop, wordpress dan desain | http://psdesain.net/

DESAIN WEBSITE DENGAN PHOTOSHOP

http://psdesain.net/

Tutorial Membuat desain website Dengan photoshop.
Langkah 1 Download template 960.gs (http://960.gs) selanjutnya extract di komputer anda, buka template photoshop 16 coloumn dengan software photoshop anda.

Langkah 2 Setelah terbuka, tampak kanvas kerja seperti gambar berikut

3

Tutorial photoshop, wordpress dan desain | http://psdesain.net/

Hasilnya.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Karena sebuah site atau website berbentuk persegi panjang (panjang kebawah) kita akan memperpanjangnya.net/ . (gambar dibawah ini tampak setelah saya zoom out (ctrl + -)) 4 Tutorial photoshop. beralih kemenu Image > Canvas size. wordpress dan desain | http://psdesain. Selanjutnya atur seperti berikut.

DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Tampak objek panjang merah pada grup tersebut. untuk background warna header buatlah sebuah background dengan menggunakan Rectangle tool (U) memenuhi bagian atas lembar kerja. tempatkan grup tersebut dibawah group 16 Col Grid. 5 Tutorial photoshop. Anda juga bisa menghapus garis-garis grid hijau dengan menekan Ctrl + . Kita akan membuat header untuk bagian ini. Jangan lupa kunci kembali group 16 Col Grid agar tidak teredit saat proses mendesain web. Buatlah dengan warna #131313 seperti penampakan dibawah. pastikan anda mengkunci grup tersebut agar tidak teredit dan tidak terganggu.net/ Buka kunci untuk grup 16 Col Grid tarik gambar pembantu untuk proses desain website seperti gambar dibawah ini. Langkah 3 Ubah nama group Layer 1 menjadi Header. pada keyboard.net/ . Perlu anda ketahui. wordpress dan desain | http://psdesain. grup 16 Col Grid hanya grup pembantu untuk proses mendesain web.

net/ Dengan Rectangle tool. wordpress dan desain | http://psdesain.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. klik brush tool (b) dengan soft brush buatlah sebuah brush dengan warna putih seolah olah ada sedikit cahaya pada bagian header. selanjutnya pilih brush dengan Hardness yang rendah. Tutorial photoshop. Cara setting brush bisa dengan mengklik kanan pada lembar kerja. buatlah sesuai coloum tersebut. Agar mudah dalam proses pembuatan anda juga bisa menghilangkan garis merah-merah tersebut dengan mengklik icon mata disamping setiap Group/layer pada panel layer Buat sebuah layer baru diatas Header 1 dan ubah namanya menjadi Cahaya. perhatikan bagian grid group 16 Col Grid. kembali buat sebuah persegi panjang untuk membuat header navigasi.net/ 6 .

net/ .net/ Tambahkan juga teks pada header tersebut. Teks tersebut bisa title atau judul blog atau web. 7 Tutorial photoshop.net. Sebagai contoh saya memberi titlenya blog desain saya http://psdesain.net/ atau PSD Desain. wordpress dan desain | http://psdesain.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Juga menambah deskripsi dibawah title tersebut.

wordpress dan desain | http://psdesain. Tentang. link yang sedang aktif dengan yang atau belum diklik. Agar lebih user friendly website tersebut. pastikan link seperti Halaman utama lebih terang dari link lainnya.net/ Tambahkan layer style pada title PSD Desain tersebut dengan cara klik 2 kali pada layer teks. 8 Tutorial photoshop. Ini menginformasikan kapada pengguna bahwa link tersebut dalam keadaan aktif atau pengguna sedang berada pada link tersebut. tambahkan navigasi pada header tersebut seperti Home.net/ . Perlu diperhatikan. Blog dan lain sebagainya. Tambahkan pula gradient overlay seperti gambar berikut. Selanjutnya. Selanjutnya akan keluar window layer style lalu pilih drop shadow dan setting seperti berikut.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.

wordpress dan desain | http://psdesain.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ .net/ Langkah 4 Ubah warna background menjadi warna #f4f5f7 9 Tutorial photoshop.

10 Tutorial photoshop.net/ Pastikan anda menavigasi group sebagus mungkin untuk mempermudah desain dan coding nantinya.net/ . dengan Rectangle tool buatlah sebuah background untuk slideshow tersebut dengan warna #dfe0e2. untuk bagian paling atas saya menggroupnya menjadi group Utama. pasti anda tau kan dengan slideshow? Banyak blog juga website yang memanfaatkan fasilitas jQuery ini untuk membuat slideshow. navigasi dan lain-lainnya pada tutorial diatas. Buat sebuah group “Slideshow” dibawah group utama.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Disini untuk header paling atas. wordpress dan desain | http://psdesain. Langkah 5 Selanjutnya kita akan mencoba membuat bagian untuk slideshownya.

DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Kembali dengan warna #ededed buatlah sebuah rectangle. wordpress dan desain | http://psdesain. jangan lupa memanfaatkan fasilitas dari 16 Col Grid agar desain tersusun rapi dan mudah saat pengkodingan oleh web developers.net/ . pastikan gambar tersebut berada di group slideshow. 11 Tutorial photoshop. Tambahkan gambar untuk slideshow tersebut.

net/ .DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Dengan Rectangle tool. Ubah opacity yang telah dibuat sebesar 25%. di tempat tersebut kita akan menambahkan sedikit teks untuk mendeskripsikan gambar slideshow tersebut. buat sebuah persegi pada bagian kiri gambar. wordpress dan desain | http://psdesain. 12 Tutorial photoshop.

DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Dengan type tool.net/ . buat sedikit teks untuk mendeskripsikan gambar slideshow tersebut. Anda bebas membuatnya yang penting teratur dan tidak membuat pusing jika suatu saat anda ingin mengeditnya lagi atau anda ingin mensharednya ke orang lain. Kembali. 13 Tutorial photoshop. wordpress dan desain | http://psdesain. pastikan anda memanage sendiri group-group yang diperlukan sesuai selera dan se-enak mungkin menurut anda .

net/ . buat sebuah objek untuk navigasi slideshow tersebut. Berikut contoh sementara yang telah kita desain. Buat juga objek < dengan pen tool. 14 Tutorial photoshop.net/ Dengan rounded rectangle tool. wordpress dan desain | http://psdesain. untuk teks dan sebagainya anda bisa mengubah sesuai selera dengan manage group yang sesuai tentunya.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.

Dengan Ellipse Tool.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ . Duplicate kembali group tersebut dan buat kembali tombol serupa seperti berikut. masih pada bagian slideshow kita akan membuat navigasi kecil berupa lingkaran kecil pada bagian kanan slideshow. buatlah sebuah lingkaran kecil.net/ Anda bisa menggoupnya menjadi Prev atau Next untuk memudahkan. 15 Tutorial photoshop. wordpress dan desain | http://psdesain. Selanjutnya.

Seperti slideshow pada umumnya. Duplicate lingkaran kecil tersebut (Ctrl + J). Atur juga ubah warnanya seperti penampakan berikut. Tutorial photoshop. ini berfungsi untuk navigasi lembar-lembar slideshow.net/ .net/ Beri layer style stroke seperti berikut.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. 16 Ubah juga Opacity lingkaran-lingkaran tersebut menjadi 80%. selanjutnya geser ke kiri atau ke kanan dan ubah warnanya menjadi putih. wordpress dan desain | http://psdesain.

Beralih ke menu Filter > Blur > Gaussian blur. buatlah segaris objek bayangan seperti berikut.net/ . 17 Tutorial photoshop. wordpress dan desain | http://psdesain.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. isi radius sebesar 7 pixel dan akhiri dengan menekan OK pada lembar gaussian blur tersebut.net/ Sekarang kita akan membuat bayangan untuk slideshow tersebut. Dengan pentool. Posisikan ke layer paling bawah pada bagian header lalu ubah opacitynya menjadi 80%.

wordpress dan desain | http://psdesain. 18 Tutorial photoshop. sekarang kita akan mencoba membuat bagian body atau isi website.net/ .net/ Langkah 6 Buatlah sebuah group baru. Dengan warna putih buatlah bagian dengan Rectangle tool seperti berikut.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.

net/ .DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Dengan Type tool buat teks welcome atau bagian lain dari selamat datang seperti gambar berikut. 19 Tutorial photoshop. wordpress dan desain | http://psdesain. Dengan pencil tool. buatlah sebuah garis sebesar 1 px dibawah teks tersebut.

net/ Buka sebuah gambar dan tempatkan pada objek desain seperti gambar berikut. tambahkan pula teks dengan type tool seperti gambar.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ . wordpress dan desain | http://psdesain. Dengan Rectangle Tool. 20 Tutorial photoshop. buatlah sebuah kotak kecil untuk membuat tombol read more atau baca selanjutnya.

wordpress dan desain | http://psdesain.net/ .DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Beri layer style pada tombol yang kita buat dengan rectangle tool seperti berikut. 21 Tutorial photoshop.

html http://psdesain.net/membuat-tombol-dengan-photoshop.     http://psdesain. anda bisa melakukannya dengan cara klik kanan pada group dan pilih Duplicate Group.net/membuat-tombol-website-dengan-photoshop.html Atau silahkan kunjungi http://psdesain. Anda hanya perlu menduplicate dan menyeretnya di tempat yang layak.html http://psdesain. Lakukan secara berulang sebanyak yang anda mau untuk halaman utama desain theme ini.net) berikut.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. dengan cara ini anda tidak perlu repot untuk membuat beberapa postingan halaman utama.net/membuat-tombol-download-dengan-photoshop.net/ Tambahkan juga teks dan juga sebuah shape pada tombol tersebut.net/ untuk melihat tutorial photoshop terbaru. Untuk mempermudah. Anda juga bisa mempelajari pembuatan tombol-tombol yang bagus pada postingan blog saya (psdesain. 22 Tutorial photoshop.html http://psdesain.net/membuat-icon-berteksture-dengan-photoshop.net/ . saya membuat 4 postingan pada desain halaman utama ini maka buatlah kembali 4 buah postingan seperti pada langkah diatas. wordpress dan desain | http://psdesain.

dan pastikan juga anda memanage group dengan bagus untuk mempermudah pengeditan kembali.net/ Dengan Rectangle tool. Atur warna sesuai selera anda. Jangan lupa juga untuk menambahkan teks nomor dan teks Nex >> agar website tersebut lebih user friendly dan pastinya theme desain masih terlihat elegant untuk sebuah website. Sebagai contoh nanti dibawah ebook tutorial ini saya akan menyediakan file download psd untuk theme yang saya desain ini. buatlah sebuah tombol persegi untuk navigasi desain tersebut. 23 Tutorial photoshop. wordpress dan desain | http://psdesain.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ .

24 Tutorial photoshop. Disini saya menggunakan 2 footer.net/ Langkah 7 Selanjutnya kita akan membuat bagian footer atau kaki sebuah website. Dengan Rectangle tool. buat dengan warna #dfe0e2 sepertihalnya saat pembuatan bagian slideshow diatas. yakni 1 footer untuk bagian widget dan satunya lagi untuk copyright atau registered website tersebut. buatlah sebuah objek untuk background witget footer.net/ . Buat kembali dengan Rectangle tool sebuah objek untuk footer tersebut.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Buatlah dengan teratur seperti gambar berikut. wordpress dan desain | http://psdesain.

Anda bisa mendapatkan icon-icon gratis seperti dibawah ini pada postingan saya : http://psdesain.net/download-icon-website-gratis.net/ Tambahkan juga teks untuk widget tersebut. Tambahkan pula sedikit tombol-tombol social untuk desain anda.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. perhatikan bahwa desain anda masih dalam naungan 16 Col Grid untuk mempermudah orang yang ingin mengcoding desain anda.net/ . Buatlah dengan teratur menggunakan move tool (v) pada toolbar. 25 Tutorial photoshop.html Download dan tambahkan beberapa tombol social yang anda rasa perlu pada desain anda. wordpress dan desain | http://psdesain.

DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Juga arsip dan category untuk widget anda. tambahkan gambar-gambar widget untuk flickr anda. anda bisa membuatnya dengan ukuran 100px x 100px. wordpress dan desain | http://psdesain. Pastikan gambar-gambar tersebut berukuran sama. atau perkecil lagi jika anda ingin menambahkan lagi beberapa gambar dari kumpulan flickr anda. 26 Tutorial photoshop.net/ . karena selanjutnya kita akan membuat widge flickr sebagi contoh.net/ Buka beberapa gambar pilihan anda.

Langkah 8 Kembali dengan Rectangle tool. wordpress dan desain | http://psdesain.net/ Anda bisa menambah garis garis pada bagian arsip atau category dengan pencil tool. Buat dengan ukuran 1 pixels.net/ . disini saya memberikan namanya footer 2 27 Tutorial photoshop. buatlah sebuah bagian lagi untuk footer paling bawah.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.

buat lagi sebuah gambar untuk footer tersebut dengan warna yang lebih terang. Tambahkan teks untuk footer tersebut.net/ . anda bisa membuat copyright © atau registered ® 28 Tutorial photoshop.net/ Jika sebelumnya untuk background footer. wordpress dan desain | http://psdesain. buatlah dengan warna serupa seperti langkah membuat header utama. Sama seperti bagian header.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.

net/ Selesai.net/ .ziddu. wordpress dan desain | http://psdesain.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.com/download/15980028/Desain_website_dengan_Photoshop.rar. Download file psd yang telah saya desain di link berikut (ziddu) : http://www.html 29 Tutorial photoshop.

wordpress dan desain | http://psdesain.net/ 30 Tutorial photoshop.net/ .DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.