Membuat Desain Layout Halaman Web Dengan Photoshop CS

13
Membuat desain layout halaman web dengan Photoshop CS Hasil akhir yang ingin dicapai : Layout yang digunakan : Pengerjaan dengan Adobe Photoshop CS Langkah 1 – Membuat Desain Layout dengan Adobe Photoshop CS

description

Photoshop

Transcript of Membuat Desain Layout Halaman Web Dengan Photoshop CS

Page 1: Membuat Desain Layout Halaman Web Dengan Photoshop CS

Membuat desain layout halaman web dengan Photoshop CS

Hasil akhir yang ingin dicapai :

Layout yang digunakan :

Pengerjaan dengan Adobe Photoshop CS

Langkah 1 – Membuat Desain Layout dengan Adobe Photoshop CS

Page 2: Membuat Desain Layout Halaman Web Dengan Photoshop CS

1. Jalankan aplikasi Photoshop, klik menu File > New. Atur ukuran kanvas sesuai ilustrasi di bawah ini, kemudian klik OK.

2. Aktifkan Rounded Rectangle Tool, buat kotak persegi dengan width 675px dan height 860px berwarna putih di dalam kanvas. Radius lengkungan 10 px, untuk mengatur ukuran objek, tekan Ctrl+T, klik kanan pada kolom width maupun kolom height dan pilih satuan pixels.

3. Klik kanan layer Shape 1, pilih Blending Options. Atur gradasi sesuai ilustrasi di bawah ini.

Page 3: Membuat Desain Layout Halaman Web Dengan Photoshop CS

4. Ubah warna foreground ke warna kuning emas (#E0E803), kemudian buatlah sebuah bidang untuk panel menu menggunakan Rounded Rectangle Tool lagi (layer Shape 2). Ukuran untuk panel menu ini adalah 130x235px.

Page 4: Membuat Desain Layout Halaman Web Dengan Photoshop CS

5. Atur Blending Options untuk layer Shape 2 sesuai ilustrasi di bawah ini.

Page 5: Membuat Desain Layout Halaman Web Dengan Photoshop CS

6. Buat group layer atau layer set di atas layer Shape 2, kemudian namakan g-link. Di dalam group ini akan diletakkan layer-layer yang berhubungan dengan link (daftar menu).

7. Buat group layer atau layer set lagi di dalam set g-link, dengan nama g-halaman-utama. Di dalam group ini akan diletakkan layer-layer yang berhubungan dengan daftar menu halaman utama (layer Shape 3 dan layer teks Halaman utama).

8. Ubah warna foreground ke warna hijau muda (#0CFF06), kemudian buatlah sebuah bidang untuk daftar menu menggunakan Rounded Rectangle Tool (layer Shape 3) di dalam set g-halaman-utama. Ukuran untuk daftar menu halaman utama ini adalah 195x35px. Pengaturan Blending Options untuk Stroke dapat dilihat pada ilustrasi di bawah ini.

Page 6: Membuat Desain Layout Halaman Web Dengan Photoshop CS

9. Aktifkan Horizontal Type Tool dengan pilihan warna putih, jenis huruf Comic Sans Ms Bold ukuran 18pt, ketikkan di dalam panel daftar menu, kata Halaman Utama.

10. Panel daftar menu halaman utama (g-halaman-utama) akan dimiringkan -5o, pilih set g-halaman-utama kemudian tekan kombinasi tombol Ctrl+T. Isikan untuk sudut miring panel daftar menu halaman utama tersebut. Pindahkan group menggunakan Move Tool sehingga menempati posisi seperti ilustrasi di bawah ini.

11. Untuk memudahkan membuat daftar menu yang lainnya, aktifkan garis bantu. Caranya aktifkan penggaris dengan mengklik menu View > Rulers. Kemudian klik+drag dari penggaris paling kiri ke posisi yang dikendaki. Lihat ilustrasi di bawah ini.

Page 7: Membuat Desain Layout Halaman Web Dengan Photoshop CS

12. Dengan posisi group set g-halaman-utama terpilih dan Move Tool aktif, tahan tombol Alt disertai klik+drag ke bawah panel daftar menu halaman utama. Hal ini dilakukan untuk menyalin group set beserta konten yang ada di dalamnya. Ulangi langkah ini sehingga di kanvas Anda memiliki tampilan seperti ilustrasi di bawah ini.

13. Ganti warna dan teks masing-masing daftar menu sehingga tampilan di kanvas seperti ilustrasi di bawah ini. Usahakan juga mengganti nama masing-masing group set daftar menu.

Page 8: Membuat Desain Layout Halaman Web Dengan Photoshop CS

14. Lanjutkan dengan membuat logo dan nama website di sebelah kanan kanvas. Buat satu group layer set lagi di atas set g-link, dengan nama g-logo. Di dalam group ini akan diletakkan layer-layer yang berhubungan dengan logo.

15. Tambahkan sebuah garis bantu horizontal sejajar dengan posisi paling bawah dari panel menu. Lihat ilustrasi di bawah ini.

Page 9: Membuat Desain Layout Halaman Web Dengan Photoshop CS

16. Aktifkan Ellipse Tool dengan Foreground terpilih warna putih. Kemudian gambar sebuah lingkaran oval di dalam kanvas dengan ukuran 330x185px. Atur sudut menjadi -9o.

17. Bagian lingkaran di bawah garis bantu akan dihilangkan, Rasterize layer Shape 4 (objek oval) terlebih dahulu dengan cara klik kanan pada layer Shape 4, pilih Rasterize Layer. Aktifkan Rectangular Marquee Tool, lakukan seleksi seperti ilustrasi kemudian tekan tombol Delete.

Page 10: Membuat Desain Layout Halaman Web Dengan Photoshop CS

18. Lepaskan area seleksi dengan menekan kombinasi tombol Ctrl+D.

19. Aktifkan Custom Shape Tool dengan warna foreground emas (#E0E803). Kemudian gambar di kanvas sebuah tangan (Right Hand) dengan ukuran 165x190px seperti ilustrasi di bawah ini.

Page 11: Membuat Desain Layout Halaman Web Dengan Photoshop CS

20. Tambahkan teks “Website Ku”, dengan jenis Comic Sans MS, ukuran 40pt Bold, warna biru muda (#44BBFF), sehingga tampilan kanvas Anda seperti ilustrasi di bawah ini.

21. Terakhir, buat sebuah layer untuk footer. Duplicate layer Shape 1, dengan cara klik kanan pada layer Shape 1, pilih Duplicate Layer. Pada kotak dialog Duplicate Layer klik OK.

22. Dalam keadaan layer Shape 1 copy terpilih, tekan kombinasi Ctrl+T, tarik titik tengah atas ke arah bawah sehingga ukuran layer Shape 1 copy tersisa menjadi 25-26px.

Page 12: Membuat Desain Layout Halaman Web Dengan Photoshop CS
Page 13: Membuat Desain Layout Halaman Web Dengan Photoshop CS

23. Buka settingan Gradient Overlay untuk layer Shape 1 copy, atur sesuai ilustrasi di bawah.

24. Simpan desain layout Anda dengan nama belajarwebsite.psd ke direktori server Apache Anda (dalam contoh ini di E:\xampplite\htdocs folder belajarwebsite.com, alamat yang diakses pada penjelajah web menjadi http://localhost/belajarwebsite.com

25. Sampai tahap ini Anda telah berhasil membuat desain layout website dengan Photoshop CS.