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/

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

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

kembali buat sebuah persegi panjang untuk membuat header navigasi. buatlah sesuai coloum tersebut. selanjutnya pilih brush dengan Hardness yang rendah. klik brush tool (b) dengan soft brush buatlah sebuah brush dengan warna putih seolah olah ada sedikit cahaya pada bagian header. perhatikan bagian grid group 16 Col Grid.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ 6 . Cara setting brush bisa dengan mengklik kanan pada lembar kerja. wordpress dan desain | http://psdesain. Tutorial photoshop. 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.net/ Dengan Rectangle tool.

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

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

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

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

pastikan gambar tersebut berada di group slideshow.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Kembali dengan warna #ededed buatlah sebuah rectangle. 11 Tutorial photoshop. Tambahkan gambar untuk slideshow tersebut.net/ . wordpress dan desain | 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%. wordpress dan desain | http://psdesain.net/ . 12 Tutorial photoshop. di tempat tersebut kita akan menambahkan sedikit teks untuk mendeskripsikan gambar slideshow tersebut. buat sebuah persegi pada bagian kiri gambar.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Dengan Rectangle tool.

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

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

net/ . 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. Duplicate kembali group tersebut dan buat kembali tombol serupa seperti berikut. wordpress dan desain | http://psdesain. Selanjutnya.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Dengan Ellipse Tool.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful