| Blog Sederhana

TUGAS 05 Putri
Yang ini tutorialnya sama aja gan sama yang punyak dani, ok check this out

1. sketch

Dalam sketch ini tumpahkan semua inspirasi yang akan menjadi bayangan website yang akan dibuat. Tanpa batas dan sekreatif mungkin. Sebelum masuk ke tahap photoshop.

2. Penerapan desain di photoshop

Buka photoshop kalian dan mulai buat ukuran yang di inginkan, disini kita akan membuat dalam ukuran maksimal 1900 x 1080 Pixel.

Garis biru adalah guide kita untuk menentukan posisi agar simetris. Dan hal yang tak kalah penting adalah membuat GROUP di layer kita.

GROUPS LAYER

Gambar diatas menunjukan bagian bagian penting dalam komponen desain web kita.

Navbar
Wellcome (home)
Class (pemilihan kelas)
Content (isi konten)

Pada folder navbar biatkan pada posisi visible karena sebagai header web.

Dan langkkah pertama kita membuat homepagenya, sebagai wellcome page harus terlihat menarik dan simple.

Di homepage kita membuat 3 gambar yang di gunakan untuk slide. Dalam mendesain web tampilan slider juga harus diperliatkan gambar apa saja yang akan dimunculkan. Bagaimana caranya ? baca next step ya.

Oke, selanjutnya kita mendesain bagian class.

image normal 1.1

Di bagian Class ini kita harus membuat desain yang interaktif pada layer photoshop agar orang yang akan membuat coding mengerti maksud ketika gambar di hover ataupun di klik. Ataupun membuat slider, cara yang digunakan hampir sama dengan bagian ini, mudah kok begini contaohnya.

<< Layer ketika tampilan default.

Layer ketika on hover pada gambar >>

image hover 1.2

Perhatikan image 1.1 dan 1.2 diatas. Terlihat perbedaaan ketika normal dan hover. Begitu juga dengan image lainya diberikan efek yang sama. Cara ini menggunakan visible dan disable di samping layer photoshop. dengan klik icon mata tsb maka kita bisa mengatur gambar mana yang terlihat dan gambar mana yang tidak terlihat. tinggal diatr saja posisi gambarnya dan tinggal klik icon mata tsb untuk mengubah tampilan efeknya.

Selanjutna memasuki step content,

Kembali ke cara yang sama dengan step sebelumnya. Di page ini kita memberikan efek lightbox pada image gallery nya. ketika di klik pada gambar maka akan muncul tampilan lightboxnya seperti image 2.2.

Berikut penyusunan layer untuk clipping mask thumbnail.