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/

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

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

net/ 6 . perhatikan bagian grid group 16 Col Grid.net/ Dengan Rectangle tool. buatlah sesuai coloum tersebut. Cara setting brush bisa dengan mengklik kanan pada lembar kerja. wordpress dan desain | 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.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. kembali buat sebuah persegi panjang untuk membuat header navigasi. 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. Tutorial photoshop.

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

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

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

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

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

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

pastikan anda memanage sendiri group-group yang diperlukan sesuai selera dan se-enak mungkin menurut anda . wordpress dan desain | http://psdesain. 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.net/ Dengan type tool. buat sedikit teks untuk mendeskripsikan gambar slideshow tersebut.net/ . 13 Tutorial photoshop.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.

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

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

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

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

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

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

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

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

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

Sebagai contoh nanti dibawah ebook tutorial ini saya akan menyediakan file download psd untuk theme yang saya desain ini.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Dengan Rectangle tool. dan pastikan juga anda memanage group dengan bagus untuk mempermudah pengeditan kembali. Atur warna sesuai selera anda. buatlah sebuah tombol persegi untuk navigasi desain tersebut. wordpress dan desain | http://psdesain. 23 Tutorial photoshop.net/ . 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.

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

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

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

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

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

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

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

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.