Membuat Website 2

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.


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.


3/38

Buat layer baru di atas layer background kemudian beri nama Background Jazz. Sekarang pilih Gradient

Tool dengan pengaturan berikut berikut.


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.


Deselect the ellipse (Ctrl + D) maka anda akan mendapatkan hasil seperti berikut


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.


5/38


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


Select pada bagian judul layer kemudian berikan layer styles seperti dibawah ini.


6/38



Dan hasilnya kurang lebih seperti berikut


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


8/38


Selanjutnya pilih Rounded Rectangle Layer dan beri label Featured kemudian berikan pengaturan layer

styles seperti berikut.



9/38


Selanjutnya atur opacity hingga 50%, hasil semestinya seperti berikut.


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.


11/38


Fill (G) / beri warna pada selection pada layer baru dengan warna white #ffffff, lalu atur layer opacity

sekitar 35%.


Selanjutnya, kita perlu menambahkan keterangan pada gambar. Cukup pilih Rectangular Marquee Tool

(M) kemudian tarik keluar menjadi persegi panjang di bagian bawah gambar.


Fill (G) / beri warna pada selection dengan warna bebas kemudian atur layer styles dengan aturan seperti

berikut.


12/38



13/38



14/38


Pilih Type Tool (T) kemudian tambahkan beberapa teks keterangan di dalam persegi panjang, hasilnya

kurang lebih seperti berikut.



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


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.


17/38


selanjutnya tambahkan layer style pada kedua anak panah tersebut dengan setting di bawah ini


18/38



19/38


dan hasilnya kurang lebih seperti ini


20/38


Creating The Content

Mulailah dengan menambahkan pembagi sederhana di bawah wilayah fitur.


Pembatas diciptakan hanya dengan Type Tool (T) menggunakan Dash Key (-). Setelah Anda

membuat pembatas tambahkan layer style berikut.


21/38



22/38


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


23/38


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.


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.


24/38


Pada bagian ruang yang tersisa di sisi kanan area konten tambahkan feed blog kecil.


Finally gandakan pembatas horizontal dan tarik bawah konten yang baru saja kita buat.


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.


26/38




27/38


dan seharusnya agan mendapatkan hasil seperti ini


Di dalam persegi panjang tambahkan burung twitter sesuai pilihan Anda kemudian tambahkan teks di

twitter yang biasanya anda lihat pada tweet.


28/38


Creating The Footer

Duplicate tiga Background Jazz Layers (lihat tutorial bag. I ) kemudian drag ketiganya ke bagian

bawah footer area.


Finally dalam footer tambahkan teks hak cipta dan mungkin beberapa ikon sosial dari Woofunction Icon

Set.



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


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


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


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


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


34/38

Tutorial Web Desain HTML


35/38

Tutorial Web Desain HTML

jika agan melakukan dengan benar maka jika dilihat di windows explorer akan nampak seperti ini


36/38

Tutorial Website HTM Photoshop


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


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

Membuat Website 2

Documents

Transcript of Membuat Website 2