Desain website dengan photoshop · PDF fileDESAIN WEBSITE DENGAN PHOTOSHOP Tutorial...

DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

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

1

Mendesain website dengan photoshop

Oleh : Jaka Zulham

http://psdesain.net/




2

Kata pengantar

Dengan rahmat dan dalam naungan Allah yang maha esa, Alhamulillah saya telah menyiapkan E-

book (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/




3

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



4

Karena sebuah site atau website berbentuk persegi panjang (panjang kebawah) kita akan

memperpanjangnya, beralih kemenu Image > Canvas size, Selanjutnya atur seperti berikut.

Hasilnya, (gambar dibawah ini tampak setelah saya zoom out (ctrl + -))



5

Buka kunci untuk grup 16 Col Grid tarik gambar pembantu untuk proses desain website seperti gambar

dibawah ini. Anda juga bisa menghapus garis-garis grid hijau dengan menekan Ctrl + ; pada keyboard.

Jangan lupa kunci kembali group 16 Col Grid agar tidak teredit saat proses mendesain web.

Perlu anda ketahui, grup 16 Col Grid hanya grup pembantu untuk proses mendesain web. Tampak objek

panjang merah pada grup tersebut, pastikan anda mengkunci grup tersebut agar tidak teredit dan tidak

terganggu.

Langkah 3

Ubah nama group Layer 1 menjadi Header, tempatkan grup tersebut dibawah group 16 Col Grid,

Kita akan membuat header untuk bagian ini, untuk background warna header buatlah sebuah

background dengan menggunakan Rectangle tool (U) memenuhi bagian atas lembar kerja. Buatlah

dengan warna #131313 seperti penampakan dibawah.



6

Dengan Rectangle tool, kembali buat sebuah persegi panjang untuk membuat header navigasi,

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, 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, selanjutnya pilih brush dengan

Hardness yang rendah.



7

Tambahkan juga teks pada header tersebut, Teks tersebut bisa title atau judul blog atau web. Sebagai

contoh saya memberi titlenya blog desain saya http://psdesain.net/ atau PSD Desain.net, Juga

menambah deskripsi dibawah title tersebut.




8

Tambahkan layer style pada title PSD Desain tersebut dengan cara klik 2 kali pada layer teks. Selanjutnya

akan keluar window layer style lalu pilih drop shadow dan setting seperti berikut.

Tambahkan pula gradient overlay seperti gambar berikut.

Selanjutnya, tambahkan navigasi pada header tersebut seperti Home, Tentang, Blog dan lain sebagainya.

Perlu diperhatikan, 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. Ini

menginformasikan kapada pengguna bahwa link tersebut dalam keadaan aktif atau pengguna sedang

berada pada link tersebut.



9

Langkah 4

Ubah warna background menjadi warna #f4f5f7



10

Pastikan anda menavigasi group sebagus mungkin untuk mempermudah desain dan coding nantinya.

Disini untuk header paling atas, navigasi dan lain-lainnya pada tutorial diatas, untuk bagian paling atas

saya menggroupnya menjadi group Utama.

Langkah 5

Selanjutnya kita akan mencoba membuat bagian untuk slideshownya, pasti anda tau kan dengan

slideshow? Banyak blog juga website yang memanfaatkan fasilitas jQuery ini untuk membuat slideshow.

Buat sebuah group “Slideshow” dibawah group utama, dengan Rectangle tool buatlah sebuah

background untuk slideshow tersebut dengan warna #dfe0e2.



11

Kembali dengan warna #ededed buatlah sebuah rectangle, jangan lupa memanfaatkan fasilitas dari 16

Col Grid agar desain tersusun rapi dan mudah saat pengkodingan oleh web developers.

Tambahkan gambar untuk slideshow tersebut, pastikan gambar tersebut berada di group slideshow.



12

Dengan Rectangle tool, buat sebuah persegi pada bagian kiri gambar, di tempat tersebut kita akan

menambahkan sedikit teks untuk mendeskripsikan gambar slideshow tersebut. Ubah opacity yang telah

dibuat sebesar 25%.



13

Dengan type tool, buat sedikit teks untuk mendeskripsikan gambar slideshow tersebut.

Kembali, 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.



14

Dengan rounded rectangle tool, buat sebuah objek untuk navigasi slideshow tersebut.

Buat juga objek < dengan pen tool,

Berikut contoh sementara yang telah kita desain, untuk teks dan sebagainya anda bisa mengubah sesuai

selera dengan manage group yang sesuai tentunya.



15

Anda bisa menggoupnya menjadi Prev atau Next untuk memudahkan, Duplicate kembali group tersebut

dan buat kembali tombol serupa seperti berikut.

Selanjutnya, masih pada bagian slideshow kita akan membuat navigasi kecil berupa lingkaran kecil pada

bagian kanan slideshow. Dengan Ellipse Tool, buatlah sebuah lingkaran kecil.



16

Beri layer style stroke seperti berikut.

Duplicate lingkaran kecil tersebut (Ctrl + J), selanjutnya geser ke kiri atau ke kanan dan ubah warnanya

menjadi putih. Atur juga ubah warnanya seperti penampakan berikut.

Seperti slideshow pada umumnya, ini berfungsi untuk navigasi lembar-lembar slideshow.

Ubah juga Opacity lingkaran-lingkaran tersebut menjadi 80%.



17

Sekarang kita akan membuat bayangan untuk slideshow tersebut. Dengan pentool, buatlah segaris

objek bayangan seperti berikut.

Beralih ke menu Filter > Blur > Gaussian blur, isi radius sebesar 7 pixel dan akhiri dengan menekan OK

pada lembar gaussian blur tersebut.

Posisikan ke layer paling bawah pada bagian header lalu ubah opacitynya menjadi 80%.



18

Langkah 6

Buatlah sebuah group baru, sekarang kita akan mencoba membuat bagian body atau isi website. Dengan

warna putih buatlah bagian dengan Rectangle tool seperti berikut.



19

Dengan Type tool buat teks welcome atau bagian lain dari selamat datang seperti gambar berikut.

Dengan pencil tool, buatlah sebuah garis sebesar 1 px dibawah teks tersebut.



20

Buka sebuah gambar dan tempatkan pada objek desain seperti gambar berikut, tambahkan pula teks

dengan type tool seperti gambar.

Dengan Rectangle Tool, buatlah sebuah kotak kecil untuk membuat tombol read more atau baca

selanjutnya.



21

Beri layer style pada tombol yang kita buat dengan rectangle tool seperti berikut.



22

Tambahkan juga teks dan juga sebuah shape pada tombol tersebut.

Anda juga bisa mempelajari pembuatan tombol-tombol yang bagus pada postingan blog saya

(psdesain.net) berikut.

http://psdesain.net/membuat-tombol-website-dengan-photoshop.html

http://psdesain.net/membuat-tombol-dengan-photoshop.html

http://psdesain.net/membuat-icon-berteksture-dengan-photoshop.html

http://psdesain.net/membuat-tombol-download-dengan-photoshop.html

Atau silahkan kunjungi http://psdesain.net/ untuk melihat tutorial photoshop terbaru.

Lakukan secara berulang sebanyak yang anda mau untuk halaman utama desain theme ini, saya

membuat 4 postingan pada desain halaman utama ini maka buatlah kembali 4 buah postingan seperti

pada langkah diatas.

Untuk mempermudah, anda bisa melakukannya dengan cara klik kanan pada group dan pilih Duplicate

Group, dengan cara ini anda tidak perlu repot untuk membuat beberapa postingan halaman utama.

Anda hanya perlu menduplicate dan menyeretnya di tempat yang layak.

http://psdesain.net/membuat-tombol-website-dengan-photoshop.html

http://psdesain.net/membuat-tombol-dengan-photoshop.html

http://psdesain.net/membuat-icon-berteksture-dengan-photoshop.html

http://psdesain.net/membuat-tombol-download-dengan-photoshop.html




23

Dengan Rectangle tool, buatlah sebuah tombol persegi untuk navigasi desain tersebut.

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.

Atur warna sesuai selera anda, 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.



24

Langkah 7

Selanjutnya kita akan membuat bagian footer atau kaki sebuah website. Disini saya menggunakan 2

footer, yakni 1 footer untuk bagian widget dan satunya lagi untuk copyright atau registered website

tersebut.

Dengan Rectangle tool, buatlah sebuah objek untuk background witget 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.



25

Tambahkan juga teks untuk widget tersebut, perhatikan bahwa desain anda masih dalam naungan 16

Col Grid untuk mempermudah orang yang ingin mengcoding desain anda.

Tambahkan pula sedikit tombol-tombol social untuk desain anda.

Anda bisa mendapatkan icon-icon gratis seperti dibawah ini pada postingan saya :

http://psdesain.net/download-icon-website-gratis.html

Download dan tambahkan beberapa tombol social yang anda rasa perlu pada desain anda. Buatlah

dengan teratur menggunakan move tool (v) pada toolbar.

http://psdesain.net/download-icon-website-gratis.html



26

Buka beberapa gambar pilihan anda, karena selanjutnya kita akan membuat widge flickr sebagi contoh.

tambahkan gambar-gambar widget untuk flickr anda.

Pastikan gambar-gambar tersebut berukuran sama, anda bisa membuatnya dengan ukuran 100px x

100px, atau perkecil lagi jika anda ingin menambahkan lagi beberapa gambar dari kumpulan flickr anda.

Juga arsip dan category untuk widget anda.



27

Anda bisa menambah garis garis pada bagian arsip atau category dengan pencil tool. Buat dengan

ukuran 1 pixels.

Langkah 8

Kembali dengan Rectangle tool, buatlah sebuah bagian lagi untuk footer paling bawah, disini saya

memberikan namanya footer 2



28

Jika sebelumnya untuk background footer, buat lagi sebuah gambar untuk footer tersebut dengan

warna yang lebih terang.

Sama seperti bagian header, buatlah dengan warna serupa seperti langkah membuat header utama.

Tambahkan teks untuk footer tersebut, anda bisa membuat copyright © atau registered ®



29

Selesai.

Download file psd yang telah saya desain di link berikut (ziddu) :

http://www.ziddu.com/download/15980028/Desain_website_dengan_Photoshop.rar.html



30

Desain website dengan photoshop · PDF fileDESAIN WEBSITE DENGAN PHOTOSHOP Tutorial...

Documents

Transcript of Desain website dengan photoshop · PDF fileDESAIN WEBSITE DENGAN PHOTOSHOP Tutorial...