P. 1
eBook Desain Website Dengan Photoshop

eBook Desain Website Dengan Photoshop

|Views: 19|Likes:
Published by Herlin Riana

More info:

Published by: Herlin Riana on Mar 02, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

08/21/2013

pdf

text

original

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. beralih kemenu Image > Canvas size.net/ Karena sebuah site atau website berbentuk persegi panjang (panjang kebawah) kita akan memperpanjangnya. Hasilnya.net/ .DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Selanjutnya atur seperti berikut. wordpress dan desain | http://psdesain.

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

kembali buat sebuah persegi panjang untuk membuat header navigasi. selanjutnya pilih brush dengan Hardness yang rendah. 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. 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. Cara setting brush bisa dengan mengklik kanan pada lembar kerja.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Tutorial photoshop.net/ 6 . buatlah sesuai coloum tersebut.net/ Dengan Rectangle tool.

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

tambahkan navigasi pada header tersebut seperti Home. 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. link yang sedang aktif dengan yang atau belum diklik.net/ . wordpress dan desain | http://psdesain. Selanjutnya akan keluar window layer style lalu pilih drop shadow dan setting seperti berikut.DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain. Tentang. Tambahkan pula gradient overlay seperti gambar berikut. Blog dan lain sebagainya. Ini menginformasikan kapada pengguna bahwa link tersebut dalam keadaan aktif atau pengguna sedang berada pada link tersebut. Perlu diperhatikan. 8 Tutorial photoshop. Agar lebih user friendly website tersebut. Selanjutnya.

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

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

wordpress dan desain | http://psdesain.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. pastikan gambar tersebut berada di group slideshow.net/ . Tambahkan gambar untuk slideshow tersebut.net/ Kembali dengan warna #ededed buatlah sebuah rectangle. 11 Tutorial photoshop.

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

wordpress dan desain | http://psdesain.net/ Dengan type tool.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 . 13 Tutorial photoshop.net/ . 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.

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

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

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

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

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

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

buatlah sebuah kotak kecil untuk membuat tombol read more atau baca selanjutnya.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. wordpress dan desain | http://psdesain.net/ .

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

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

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

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

25 Tutorial photoshop.net/ Tambahkan juga teks untuk widget tersebut.net/download-icon-website-gratis. Buatlah dengan teratur menggunakan move tool (v) pada toolbar. Anda bisa mendapatkan icon-icon gratis seperti dibawah ini pada postingan saya : http://psdesain.html Download dan tambahkan beberapa tombol social yang anda rasa perlu pada desain anda. wordpress dan desain | http://psdesain. 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/ .

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

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

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

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

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->