7/25/2019 Membuat Website 2
1/38
Membuat Website
Satu contoh kita akan membuat website seperti desain berikut :
Contoh Desain Website Menggunakan Photoshop
Membuat Backgroun Layout
Buat dokumen baru (Ctrl + N) dengan dimensi 1200 x 1.245 dengan background putih #ffffff.
7/25/2019 Membuat Website 2
2/38
Klik kanan pada layer background lalu pilih menu Layer From Background, berikan nama Backgorund
pada layer, kemudian tambahkan Gradient Overlay ikuti pengaturan seperti gambar di bawah ini.
Tutorial Design Web Step 1
Select Elliptical Marquee Tool (M) kemudian tarik keluar elips besar ke atas kanvas.
7/25/2019 Membuat Website 2
3/38
Buat layer baru di atas layer background kemudian beri nama Background Jazz. Sekarang pilih Gradient
Tool dengan pengaturan berikut berikut.
7/25/2019 Membuat Website 2
4/38
Tutorial Design Web Photoshop 3
Tarik gradien sedikit saja dari bagian atas elips ke bagian dalam elips / oval, kita tidak ingin mengisi elips
keseluruhan.
Tutorial Design Web Photoshop 4
Deselect the ellipse (Ctrl + D) maka anda akan mendapatkan hasil seperti berikut
Tutorial Design Web Photoshop 5
Duplikat layer tersebut, putar serta menyesuaikan opacity dari setiap lapisan, atur posisi secara acak
duplikat layer tersebut diatas kanvas. Saya hanya menduplikat layer ini sebanyak 3 kali.
7/25/2019 Membuat Website 2
5/38
Tutorial Design Web Photoshop 6
Membuat Header
Di sisi kiri kanvas tambahkan judul portofolio dan slogan menggunakan Type Tool (T). Font yang
digunakan disebut Vijaya dan dapat mendownload font vijaya disini
Tutorial Design Web Photoshop 7
Select pada bagian judul layer kemudian berikan layer styles seperti dibawah ini.
7/25/2019 Membuat Website 2
6/38
Tutorial Design Web Photoshop 8
Tutorial Design Web Photoshop 9
Dan hasilnya kurang lebih seperti berikut
7/25/2019 Membuat Website 2
7/38
Tutorial Web Design Photoshop 10
Pada sisi kanan judul dan slogan tambahkan navigasi tekstual sederhana dengan menggunakan font yang
sama.
Tutorial Web design Photoshop 11
Tutorial Web design Photoshop 12
Creating The Featured Area
Pilih Rounded Rectangle Tool (U) dengan radius 10px kemudian buatlah persegi panjang dengan ukuran
yang sesuai pada elemen header.
Tutorial Web Desain Photoshop 13
7/25/2019 Membuat Website 2
8/38
Tutorial Web Desain Photoshop 14
Selanjutnya pilih Rounded Rectangle Layer dan beri label Featured kemudian berikan pengaturan layer
styles seperti berikut.
Tutorial Web Desain Photoshop 15
7/25/2019 Membuat Website 2
9/38
Tutorial Web Desain Photoshop 16
Selanjutnya atur opacity hingga 50%, hasil semestinya seperti berikut.
7/25/2019 Membuat Website 2
10/38
Tutorial Web Desain Photosp 17
Kita sekarang perlu menambahkan gambar di dalam persegi panjang, gambar harus sekitar 15px lebih kecil
dari persegi panjang, karena akan di letakkan di dalam persegi panjang.
Tutorial Web Desain Photosop 18
Setelah persegi panjang terseleksi, selanjutnya klik menu Select > Modify > Contract. Contract the
selection by 15px kemudian tekan OK. Masih dalam keadaan ter-select, silahkan download gambar dan
masukkan (open) kedalam photoshop. Download gambar di sini (atau agan bisa menggunakan gambar
sesuai keinginan agan)
Copy (Ctrl+C) gambar tersebut kedalam clipboard kemudian kembali ke kanvas asli agan kemudian klik
menu Edit> Paste Special> Paste Into (Alt + Shift + Ctrl + V. Atur gambar sesuai yang agan inginkan
dan selanjutnya hilangkan tanda seleksi dengan cara Ctrl + D.
Tutorial Web Desain Photosop 19
Select Pen Tool (P) atau Polygonal Lasso Tool (L) dan buat seleksi disekitar gambar seperti gambar
berikut.
7/25/2019 Membuat Website 2
11/38
Tutorial Web Desain Photoshop 20
Fill (G) / beri warna pada selection pada layer baru dengan warna white #ffffff, lalu atur layer opacity
sekitar 35%.
Tutorial Web Desain Photoshop 21
Selanjutnya, kita perlu menambahkan keterangan pada gambar. Cukup pilih Rectangular Marquee Tool
(M) kemudian tarik keluar menjadi persegi panjang di bagian bawah gambar.
Tutorial Web Desain Photoshop 22
Fill (G) / beri warna pada selection dengan warna bebas kemudian atur layer styles dengan aturan seperti
berikut.
7/25/2019 Membuat Website 2
12/38
Tutorial Web Desain Photoshop 23
7/25/2019 Membuat Website 2
13/38
Tutorial Web Desain Photoshop 24
7/25/2019 Membuat Website 2
14/38
Tutorial Web Desain Photoshop 25
Pilih Type Tool (T) kemudian tambahkan beberapa teks keterangan di dalam persegi panjang, hasilnya
kurang lebih seperti berikut.
Tutorial Web Desain Photoshop 26
7/25/2019 Membuat Website 2
15/38
Creating The Featured Gallery Slider
Pilih yang Rounded Rectangle Tool (U) kemudian tarik keluar hingga menjadi sebuah sebuah kotak kecil
di bawah banner.
Totorial Design Web Manual
Ganti warna kotak menjadi putih # ffffff kemudian contract persegi dengan 5-10px seperti yang anda
lakukan ketika membuat banner (lihat tutorial bag. ii). Setelah anda lakukan contract, paste gambar di
dalam portofolio Anda.
dah hasilnya kurang lebih seperti ini
7/25/2019 Membuat Website 2
16/38
Tutorial Desain Web Manual
ulangi langkah diatas hingga 3x sehingga terbentuk seperti di bawah ini
Tutorial Desain web Manual
Di sisi kiri dan kanan dari thumbnail gambar tambahkan dua anak panah dari custom lib rary.
7/25/2019 Membuat Website 2
17/38
Tutorial Desain Web Manual
selanjutnya tambahkan layer style pada kedua anak panah tersebut dengan setting di bawah ini
7/25/2019 Membuat Website 2
18/38
Tutorial Desain Web Manual
7/25/2019 Membuat Website 2
19/38
Tutorial Desain Web Manual
dan hasilnya kurang lebih seperti ini
7/25/2019 Membuat Website 2
20/38
Tutorial Desain Web Manual
Creating The Content
Mulailah dengan menambahkan pembagi sederhana di bawah wilayah fitur.
Tutorial Desain Web Manual
Pembatas diciptakan hanya dengan Type Tool (T) menggunakan Dash Key (-). Setelah Anda
membuat pembatas tambahkan layer style berikut.
7/25/2019 Membuat Website 2
21/38
Tutorial Desain Web Manual
7/25/2019 Membuat Website 2
22/38
Tutorial Desain Web Manual
Finally atur opacity pembatas sampai 50% dan Anda selesai. Sekarang, dengan menggunakan Type
Tool (T) tambahkan baris tag portofolio, font yang digunakan adalah Vijaya yang Anda dapat men-
download melalui tutorial sebelumnya di tutorial i atau tutorial ii
Selanjutnya Akhiri tag line dengan menduplikasi pembabatas yang Anda buat sebelumnya kemudian
menyeretnya di bawah tag line.
dan hasilnya kurang lebih seperti ini
7/25/2019 Membuat Website 2
23/38
Tutorial Desain Web Manual
Download Woofunction Set Icon dari daftar sumbernya kemudian tambahkan dua ikon ke dalam area
konten. Di sisi setiap ikon menambahkan judul utama dan sub judul.
Tutorial Desain Web Manual
Di bawah setiap pos dan sub pos buat sebuah paragraf dengan ukuran ukuran yang sesuai, pisahkan setiap
bagian dengan pembatas yang agan buat sebelumnya, hanya saja dalam hal ini kita membuatnya secara
vertikal.
7/25/2019 Membuat Website 2
24/38
Tutorial Desain Web Manual
Pada bagian ruang yang tersisa di sisi kanan area konten tambahkan feed blog kecil.
Tutorial Desain Web Manual
Finally gandakan pembatas horizontal dan tarik bawah konten yang baru saja kita buat.
7/25/2019 Membuat Website 2
25/38
Creating The Twitter Box
Pilih Rounded Rectangle Tool (U) kemudian tarik keluar buat persegi panjang di bawah pembagi terakhir
agan buat tadi.
Tutorial Desain web Manual
Sekarang tambahkan layer style seperti berikut untuk persegi panjang twitter.
7/25/2019 Membuat Website 2
26/38
Tutorial Desain Web Manual
Tutorial Desain Web Manual
7/25/2019 Membuat Website 2
27/38
Tutorial Desain Web Manual
dan seharusnya agan mendapatkan hasil seperti ini
Tutorial Desain Web Manual
Di dalam persegi panjang tambahkan burung twitter sesuai pilihan Anda kemudian tambahkan teks di
twitter yang biasanya anda lihat pada tweet.
7/25/2019 Membuat Website 2
28/38
Tutorial Desain Web Manual
Creating The Footer
Duplicate tiga Background Jazz Layers (lihat tutorial bag. I ) kemudian drag ketiganya ke bagian
bawah footer area.
Tutorial Desain Web Manual
Finally dalam footer tambahkan teks hak cipta dan mungkin beberapa ikon sosial dari Woofunction Icon
Set.
Tutorial Desain Web Manual
7/25/2019 Membuat Website 2
29/38
Contoh Desain Website Menggunakan Photoshop
Teknik Slice di Photoshop
Aktifkan Ruler / Penggaris pada photoshop dengan cara klik menu View-Ruluers (Ctrl + R), tarik Ruler
sehingga membuat baris panjang di lembar kerja, dan atur posisinya sehingga menjadi gambar seperti
berikut
7/25/2019 Membuat Website 2
30/38
Membuat Website HTML Photoshop
selanjutnya gunakan teknik yang sama seperti diatas yaitu menarik Ruler kedalam lembar kerja pada tiap
bagian lembar kerja sehingga anda akan mendapatkan hasil kurang lebih seperti gambar di bawah ini
7/25/2019 Membuat Website 2
31/38
Membuat Website HTML dengan Photoshop
selanjutnya aktifkan Slice Tool (C) lalu potong / slice layer yang sudah di beri Ruler / garis, menjadi
seperti ini
7/25/2019 Membuat Website 2
32/38
Membuat Website HTML dengan Slice Photoshop
penjelasannya, warna biru kotak kecil dengan tanda nomor 01, menunjukkan teknik slice yang telah aktif
atau agan telah memotong / men-slice bagian tersebut, sedangkan warna kotak yang berwarna coklat
merupakan bagian yang harus di slice berikutnya, lakukan slice pada tiap garis dengan sabar dan teliti pada
lembar kerja agan, sehingga lembar kerja photoshop agan akan menjadi seperti ini
7/25/2019 Membuat Website 2
33/38
Membuat Website HTML dengan Photosahop
setelah semuanya di slice seperti gambar diatas, selanjutnya klik menu File Save for Web & Devices (Alt
+ Ctrl + Shift + S) tentukan jenis format imagenya dalam hal ini admin menggunakan format JPG dan
preview posisi Original, lalu klik save, isi file name dengan nama index.html atau home.html pada pilihan
format pilih HTML dan Images, lalu klik save pada foolder yang sudah anda siapkan sebelumnya, simak
gambar di bawah ini
7/25/2019 Membuat Website 2
34/38
Tutorial Web Desain HTML
7/25/2019 Membuat Website 2
35/38
Tutorial Web Desain HTML
jika agan melakukan dengan benar maka jika dilihat di windows explorer akan nampak seperti ini
7/25/2019 Membuat Website 2
36/38
Tutorial Website HTM Photoshop
7/25/2019 Membuat Website 2
37/38
Tutorial Website HTM Photoshop
semua file yang di edit melalui photoshop sebelumnya menjadi bentuk image atau gambar, dan hasilnya
jika kita buka file index.html akan menjadi website dengan tampilan seperti ini
7/25/2019 Membuat Website 2
38/38
Tutorial Membuat Website HTML
selanjutnya tinggal di edit melalui dreamweaver, dengan sedikit improvisasi, tekun dan sabar maka akan
menghasilkan webiste yang simple tetapi memiliki desain yang tidak kalah dengan website profesional
lainnya