WEB Desain Pemula

Desain WEB Menggunakan Adobe Photoshop

1.       Buka aplikasi photoshop

2.       Rubahlah jenis desain menjadi typografi

3.       Kemudian pilih menu file -> new  dan atur seperti dibawah ini

4.       Kemudian select button save present dan atur seperti beriku

5.       Setelah selesai klik Ok dan OK, jika berhasil anda akan menjumpai halaman seperti berikut

6.       Jika garis pada pinggir halaman tidak muncul, tekan ctrl R, dan atur ruler menjadi ukuran pixel dengan cara klik kanan pada ruler dan pilih pixel seperti berikut

7.       Kemudian kita coba membuat grid pada halaman dengan menambahkan new guide pada halaman tersebut. Caranya settingnya pilih menu edit -> keyboard shortcuts and menus -> view -> new guide -> tekan alt+ctrl+H kemudian tekan tombol add shortcut dan tombol Ok. Sepert dibawah

8.       Cobalah tekan alt+ctrl+H pada keyboard anda, jika berhasil akan muncul seperti berikut

Jika kalian memiih vertical maka akan membentuk guide vertical, begitu juga sebaliknya jika kalian memilih horizontal maka akan membentuk guide horizontal.

9.       Pada awal pembuatan halaman kita telah setting Width : 1000 Height 1600. Kemudian kita akan membuat guide horizontal berukuran 50 pada seperti dibawah:

10.   Jika kalian menjumpai halaman seperti dibawah, maka kalian berhasil membuat satu guide

11.   Kita akan pasang guide tersebut di atas, bawah, kanan dan kiri berukuran 50 seperti berikut. Caranya tekan

alt+ctrl+H -> Horizontal -> 50 (membentuk guide bagian atas)

alt+ctrl+H -> Horizontal -> 1550 (membentuk guide bagian bawah) karna pada awal kita setting Height 1600 – 50 untuk guide bagian atas.

alt+ctrl+H -> vertical -> 50 (membentuk guide bagian kiri)

alt+ctrl+H -> Horizontal -> 950 (membentuk guide bagian kanan) karena pada awal kita setting Width : 1000 -50 untuk guide bagian kiri

Jika berhasil, kalian akan menjumpai halaman seperti berikut.

12.   Kemudian buatlah guide pada pinggir-pinggir kanan, kiri, atas dan bawah dengan cara menggeret ruler hingga terbentuk halaman seperti berikut.

13.   Sekarang kita akan membuat guide untuk grid dengan ukuran 300 pixel

alt+ctrl+H -> Vertical -> 50 + 300 = 350 pixel

alt+ctrl+H -> Vertical -> 50 +300 + 300 = 650 pixel

Kemudian buatlah giude vertical lagi dengan ukuran 200, 500 dan 800 pixel. Caranya

alt+ctrl+H -> Vertical -> 200 pixel

alt+ctrl+H -> Vertical -> 500 pixel

alt+ctrl+H -> Vertical -> 800 pixel 
jika berhasil, kalian akan menjumpai halaman seperti berikut

Dengan begini kita telah mendapatkan garis tengan untuk pembuatan website ini. Tekan Save dengan ctrl + S

14.   Selanjutnya kita akan membuat wireframe pada halaman ini. Caranya pilih rectangle tool kemudian gambarlah seperti berikut

selesai.
kalian telah berhasil membuat desain web pertama