{"id":547,"date":"2018-04-12T22:58:50","date_gmt":"2018-04-12T15:58:50","guid":{"rendered":"http:\/\/student-activity.binus.ac.id\/bncc\/?p=547"},"modified":"2018-05-02T23:02:00","modified_gmt":"2018-05-02T16:02:00","slug":"tips-tips-membuat-mockup-website-pada-adobe-photoshop","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/bncc\/2018\/04\/12\/tips-tips-membuat-mockup-website-pada-adobe-photoshop\/","title":{"rendered":"TIPS-TIPS MEMBUAT MOCKUP WEBSITE PADA ADOBE PHOTOSHOP"},"content":{"rendered":"

Halo, Sobat FILE, kamu pernah tidak, terpikirkan untuk membuat\u00a0website<\/em>\u00a0kamu sendiri, tapi kamu bingung harus memulainya dari mana? Jawabanya\u00a0simple<\/em>!\u00a0Kamu dapat memulainya dengan membuat\u00a0design<\/em>\u00a0impian\u00a0website<\/em>\u00a0kamu, yang disebut dengan\u00a0mockup<\/em>. Nah, kali ini FILE akan memberikan kamu tips-tips membuat design\u00a0mockup<\/em>\u00a0website<\/em>\u00a0menggunakan software Adobe Photoshop.<\/p>\n

 <\/p>\n

Grid System<\/h2>\n

\"Filemagz_Grid<\/p>\n

Grid System atau yang biasa dikenal dengan garis bantu yang dapat digunakan untuk membantu kamu membuat lebih rapih dan konsisten setiap section pada\u00a0website-<\/em>mu. Untuk menggunakannya, kamu dapat langsung ketik pada Google Search, \u201c1200 Grid System PSD<\/em>\u201d atau \u201c12 Column Grid System<\/em>\u201d . Jumlah\u00a0grid<\/em>\u00a0ini dapat ditambahkan atau dikurangkan sesuai kebutuhkan kamu akan membuat\u00a0website<\/em>\u00a0desktop<\/em>\u00a0ataupun\u00a0mobile device<\/em>. Grid System ini nantinya akan membantu kamu mengembangkan\u00a0website<\/em>\u00a0menjadi responsif nantinya saat proses\u00a0coding<\/em>.<\/p>\n

 <\/p>\n

Web Safe Fonts<\/h2>\n

\"FILEMAGZ_Font<\/p>\n

Pemilihan\u00a0font<\/em>\u00a0merupakan bagian terpenting dalam membuat sebuah\u00a0website.\u00a0<\/em>Tentu saja hal ini dilakukan mulai dari proses pembuatan\u00a0mockup<\/em>\u00a0website-<\/em>mu. Tentukan\u00a0font<\/em>\u00a0untuk\u00a0heading<\/em>, navigasi, judul laman, ataupun konten\u00a0website<\/em>\u00a0kamu. Akan tetapi, kamu tidak bisa sembarangan memasukan\u00a0font<\/em>\u00a0begitu saja, karena setiap Operation System (OS) seperti Windows, Linux, iOS, Android, dan lainnya, menjalankan sistem yang berbeda-beda.<\/p>\n

Saat dijalankan pada Android,\u00a0font<\/em>\u00a0ini akan berjalan, tapi mungkin saja di iOS tidak dapat berjalan sehingga\u00a0website-<\/em>mu nanti akan digantikan oleh\u00a0random font<\/i>\u00a0yang mungkin akan membuat\u00a0website<\/em>-mu jadi buruk. Oleh karena itu, kamu memerlukan\u00a0web safe fonts<\/em>\u00a0atau\u00a0font\u00a0<\/em>yang sudah pasti berjalan di semua perangkat seperti Arial, Verdana, Bookman, Arial, dan\u00a0font<\/em>lainya yang biasa digunakan dalam pembuatan\u00a0website<\/em>.<\/p>\n

 <\/p>\n

Warna yang Konsisten<\/h2>\n

\"Filemagz_<\/p>\n

Warna pada\u00a0website<\/em>\u00a0bisa kamu tentukan dengan warna kesukaanmu ataupun logo dari\u00a0website-<\/em>mu. Warna yang kamu pilih harus bisa menggambarkan logo\u00a0website<\/em>-mu tersebut baik itu logo yang menggambarkan personalmu ataupun produk dan usahamu. Pemilihan warna juga tidak dapat dilakukan secara sembarangan, banyak pertimbangan yang dapat kamu pikirkan. Salah satunya menggunakan\u00a0rule<\/em>\u00a0pada\u00a0Color Wheel<\/a><\/em>. Hal tersebut dapat membantu kamu memberikan 3-5 warna yang menjadi konsistensi pewarnaan\u00a0website-<\/em>mu.<\/p>\n

 <\/p>\n

Kompres Foto atau Gambar Dari Mockup Website<\/h2>\n

\"FILEMAGZ_Kompes<\/p>\n

Setiap gambar HD pastilah memilih ukuran 3-5 MB atau lebih, agar nanti\u00a0website<\/em>\u00a0tidak berjalan sangat berat ketika diakses, setiap foto atau gambar perlu melewati tahap kompres gambar. Kamu dapat lakukan hal ini mulai dari\u00a0mockup<\/em>\u00a0website<\/em>kamu, kompres terlebih dahulu dengan cara \u201cFILE > Export > Save for Web (Legacy)\u201d ataupun shortcut menggunakan \u201cCTRL+Alt+Shift+S\u201d pada Adobe Photoshop.<\/p>\n

 <\/p>\n

Gunakan Icon<\/h2>\n
\"Filemagz_Fontawsome<\/p>\n

Fontawsome<\/p>\n<\/div>\n

Gunakan\u00a0icon<\/em>\u00a0untuk mempercantik\u00a0website<\/em>\u00a0kamu agar pengunjung\u00a0website-<\/em>mu\u00a0dapat melihatnya lebih nyaman dan lebih digunakan.\u00a0Icon<\/em>\u00a0tersebut juga dapat kamu buat sendiri menggunakan Adobe Illustrator ataupun pada Adobe Photoshop sendiri. Tapi jika kamu kesulitan membuatnya, kamu dapat menggunakan\u00a0Flaticon<\/a>\u00a0ataupun langsung menggunakan\u00a0Font Awsome<\/a>.\u00a0Font<\/em>\u00a0yang berbentuk\u00a0icon<\/em>\u00a0yang dapat kamu gunakan saat proses\u00a0coding<\/em>\u00a0agar nanti\u00a0website-<\/em>mu berjalan lebih ringan dibandingkan menggunakan gambar.<\/p>\n

 <\/p>\n

Tambahan<\/h2>\n

\"Filemagz_Tambahan<\/p>\n

Jika kamu bekerja dalam tim saat membuat\u00a0wesbite<\/em>\u00a0tersebut, dan kamu kebetulan menjadi seorang yang membuat\u00a0mockup<\/em>, kamu dapat membuat ukuran\u00a0mockup<\/em>\u00a0itu jadi lebih kecil dengan cara meletakan 1\u00a0fill<\/em>\u00a0layer<\/em>\u00a0putih paling atas sehingga menutupi semua bagian mockup. Lalu tekan\u00a0save<\/em>\u00a0saja, maka\u00a0size<\/em>-nya akan lebih kecil dan akan lebih ringan untuk di-upload\u00a0<\/em>dan dibuka nanti.<\/p>\n

 <\/p>\n

Jadi itu dia, tips dan trik bagaimana membuat\u00a0design<\/em>\u00a0mockup<\/em>\u00a0website-<\/em>mu sendiri menggunakan Adobe Photoshop. Langkah ini juga digunakan oleh para\u00a0web designer<\/em>\u00a0professional<\/em>\u00a0sebelum mereka melanjutkan ke tahap proses\u00a0coding<\/em>\u00a0sebuah\u00a0website<\/em>\u00a0menggunakan bahasa pemerograman seperti HTML, CSS, Javascript, dan lain-lain sebagai seorang Front End Developer.<\/p>\n

\n

5 ALASAN MENGGUNAKAN LARAVEL SEBAGAI FRAMEWORK PHP<\/a><\/h1>\n<\/blockquote>\n

Memang, ini masih langkah awalmu untuk memulai membuat\u00a0website-<\/em>mu sendiri, tapi buat kamu yang baru belajar\u00a0coding<\/em>, dengan adanya\u00a0mockup\u00a0<\/em>website<\/em>\u00a0yang telah kamu buat, dapat menjadi sebuah motivasi kamu untuk kamu bisa, dan kamu dapat mewujudkanya\u00a0website\u00a0<\/em>tersebut menjadi nyata.\u00a0Good luck<\/em>\u00a0dan\u00a0do the best<\/em>!!<\/p>\n","protected":false},"excerpt":{"rendered":"

Halo, Sobat FILE, kamu pernah tidak, terpikirkan untuk membuat\u00a0website\u00a0kamu sendiri, tapi kamu bingung harus memulainya dari mana? Jawabanya\u00a0simple!\u00a0Kamu dapat memulainya dengan membuat\u00a0design\u00a0impian\u00a0website\u00a0kamu, yang disebut dengan\u00a0mockup. Nah, kali ini FILE akan memberikan kamu tips-tips membuat design\u00a0mockup\u00a0website\u00a0menggunakan software Adobe Photoshop.   Grid System Grid System atau yang biasa dikenal dengan garis bantu yang dapat digunakan untuk membantu […]<\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-547","post","type-post","status-publish","format-standard","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/posts\/547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/comments?post=547"}],"version-history":[{"count":1,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/posts\/547\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/posts\/547\/revisions\/549"}],"wp:attachment":[{"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/media?parent=547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/categories?post=547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/tags?post=547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}