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/

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

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

perhatikan bagian grid group 16 Col Grid. 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. Tutorial photoshop.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ 6 . selanjutnya pilih brush dengan Hardness yang rendah.net/ Dengan Rectangle tool. kembali buat sebuah persegi panjang untuk membuat header navigasi. 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.

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

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

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

10 Tutorial photoshop.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Disini untuk header paling atas.net/ . navigasi dan lain-lainnya pada tutorial diatas. wordpress dan desain | http://psdesain. Langkah 5 Selanjutnya kita akan mencoba membuat bagian untuk slideshownya. Buat sebuah group “Slideshow” dibawah group utama. 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. dengan Rectangle tool buatlah sebuah background untuk slideshow tersebut dengan warna #dfe0e2.net/ Pastikan anda menavigasi group sebagus mungkin untuk mempermudah desain dan coding nantinya.

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

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

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

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

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

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

net/ . Posisikan ke layer paling bawah pada bagian header lalu ubah opacitynya menjadi 80%. 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. Beralih ke menu Filter > Blur > Gaussian blur. 17 Tutorial photoshop. buatlah segaris objek bayangan seperti berikut.net/ Sekarang kita akan membuat bayangan untuk slideshow tersebut. Dengan pentool.

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

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

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

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

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

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

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

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

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

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

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

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

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