belajar desain halaman depan web profil
TRANSCRIPT
![Page 1: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/1.jpg)
Membuat Desain Halaman Depan Website !!
Sobat ! kita akan membuat desain halaman depan website profil, dan yang akan kita desain adalah perusahaan pariwisata yang ada di Bali, Nusa Dua(Bali Tourism Development Corporation). Langsung saja ya..
Buka Adobe Photoshop sobat , di sini saya memakai cs3 ..
Lalu buka gird 960pixel, CTRL+O lalu pilih gambarnya sobat.
![Page 2: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/2.jpg)
Setelaah itu kita buka filenya sobat.
Hapus creds dan guides yg ada di kolom layers (pojok kanan bawah)
![Page 3: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/3.jpg)
Buat garis bantu seperti ini untuk membantu pekerjaan kita sobat. Caranya tarik garis dari penggaris di bagian atas. Garis-garis inilah yang akan mempermudah pekerjaan kita sobat.
Buat kolom-kolom seperti ini untuk layoutnya sobat. Jika ingin langsung membuat desain halaman webnya, layoutnya bisa kita buat di buku ataupun kertas, sebagai panduan kita mendesain.
![Page 4: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/4.jpg)
Seperti ini layout yang sudah selesai dibuat sobat.
Beri keterangan pada setiap kolom sobat.
![Page 5: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/5.jpg)
Masukan logo dari perusahan tersebut sobat .
Setelah logo dimasukan. Kita buat kolom-kolom seperti ini, untuk contact us perusahaan.
![Page 6: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/6.jpg)
Isi kolom-kolom tadi dengan informasi apa yang di butuhkan, misalnya latar belakang, visi &misi, history, other office, dll.. tergantung apa yang di butuhkan perusahaan.
Masukan gambar yang di inginkan.
![Page 7: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/7.jpg)
Atur posisi gambar pada kolom slider yang sudah di buat tadi sobat.
Lalu beri warna kolom untuk project, product dan artikel yang sudah kita buat tadi. Caranya klik kolomnya lalu ganti warnanya (tnda panah), atau kita ingin memeberi efek gradient overlay atau efek lainnya, sobat bisa mengaturnya di kolom layer ada tulisan fx.
![Page 8: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/8.jpg)
Lalu masukan gambar dari perusahaan tersebut, dan beri keterangan gambar tersebut.
Setelah itu, ganti warna backgroundnya. Caranya klik tulisan fx. Ada Colour overlay dan masih banyak efek-efek yang lainnya. Silahkan sobat bereksperimen sendiri yaa..
![Page 9: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/9.jpg)
Setelah itu, isi menu dengan info yang di yang ingin di tampilkan oleh perusahaan tersebut.
Lalu isi footer dengan nama sobat atau perusahaan sobat (kalau sudah ada ya , hehe), karna sobat yang membuat desainnya.
![Page 10: belajar desain halaman depan web profil](https://reader033.vdocuments.site/reader033/viewer/2022052410/55513117b4c905325d8b4e18/html5/thumbnails/10.jpg)
Dan inilah hasil desain yang di buat sobat.
Namun ini baru pada halaman depan website loh sobat. Untuk halaman berikutnya di tunggu ya sobat.. ok ? hehe :DHmm, oyaaah sobat ini adalah postingan pertama yang saya buat sendiri. Soo, kalo banyak kesalahan yaa di maklumin aja yaaa .. cs baru belajar nulis di blog , hehehe :D