Membuar Form Login pada Website di Adobe Photoshop

Hello teman teman Dumet School, selamat sore semuanya hari ini di hari minggu saya akan berbagi tutorial tentang Membuar Form Login pada Website di Adobe Photoshop nah untuk kalian yang sedang atau yang lagi ada tugas membuat design website bisa menggunakan reverensi tutorial ini untuk membuat form login pada halaman website. tool yang kita gunakan sangatlah sederhana simpel dan ilegan tentunya. membuat design semenarik mungkin dengan teknik yang sederhana.

nah adapun cara membuatnya coba kalian perhatikan step by stepnya seperti berikut ini.

nah sebelumnya jika kalian tidak mengetahui atau belum menentukan untuk ukuran dimensinya boleh menggunakan ukuran berapa saja disini saya contohkan menggunakan ukuran 800px X 800px dengan resolusi 72 dan color mode RGB ya teman teman.

Membuar Form Login pada Website di Adobe Photoshop

kemudian kalian masukkan atau kalian boleh mencari foto gedung apa yang ingin kalian jadikan background pada halaman tampilan form login.

Membuar Form Login pada Website di Adobe Photoshop

setelah itu bisa kita buat warna yang solid dengan menggunakan solid color.

Membuar Form Login pada Website di Adobe Photoshop

disini bisa diatur warnanya ya, coba atur warnya seperti biru muda, setelah memberikan warna biru muda kalian bisa menggunakan blend mode dan opacity untuk merubah warna solid menjadi warna transparan. disini saya menggunakan pengaturan blend mode screen dan opacity 80%.

Membuar Form Login pada Website di Adobe Photoshop

setelah itu buat kota dengan rectangle tool.

Membuar Form Login pada Website di Adobe Photoshop

buat dengan warna hitam ya teman teman, dengan ukuran seperti besar dimensi ukuran yang kita buat untuk form login. kemudian berikan opacity 62%.

Membuar Form Login pada Website di Adobe Photoshop

setelah itu kita dapat membuat tombol yaitu sign in dan Sign up beri warna yang berbeda agar tampilannya lebih menarik serta user friendly.

Membuar Form Login pada Website di Adobe Photoshop

nah untuk memberitahu bahwa ini adalah form sign atau login maka disini kita beri pemanis garis dibawah sign in nya dengan menggunakan rectangle tool.

Membuar Form Login pada Website di Adobe Photoshop

setelah itu didalam form sign in kita harus memasukkan apa saja? nah disini kita masukkan user name.

Membuar Form Login pada Website di Adobe Photoshop

ada juga password.

Membuar Form Login pada Website di Adobe Photoshop

nah untuk membuat kolom kotak nya bisa membuatnya dengan menggunakan rounded rectangle tool dan atur rounded nya pada preoerties seperti pada gambar dibawah ini.

Membuar Form Login pada Website di Adobe Photoshop

setelah itu atur juga untuk layernya, disini gunakan opacity 50%.

Membuar Form Login pada Website di Adobe Photoshop

jika sudah kita akan membuat cek box, dimana kita harus membuat kotak terlebih seukuran keterangan keep me signed in.

Membuar Form Login pada Website di Adobe Photoshop

selanjutnya kita gunakan custom shape untuk membuat ceklis berwarna putih ya teman, untuk ukurannya sesuaikan saja dengan kebutuhan kalian.

Membuar Form Login pada Website di Adobe Photoshop

terakhir masih sama kalian buat tombol sign in dengan teks sign in dan duplicate bentuk shape yang sudah kalian buat. selanjutnya kalian rubah warnanya pada properties.

maka hasilnya akan seperti pada gambar dibawah ini.

Membuar Form Login pada Website di Adobe Photoshop

cukup mudah bukan teman teman Membuar Form Login pada Website di Adobe Photoshop. semoga artikel ini bermanfaat ya teman teman.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *