fbpx
FILEMagz
  • Tech Corner
    • Tech News
    • Knowledge
  • Business
    • Finance
  • Productivity
  • Hobby
  • Tips & Trick
  • Inspiration
  • Event News
No Result
View All Result
  • Tech Corner
    • Tech News
    • Knowledge
  • Business
    • Finance
  • Productivity
  • Hobby
  • Tips & Trick
  • Inspiration
  • Event News
No Result
View All Result
FILEMagz
Home Tech Corner Knowledge

Tips-Tips Membuat Mockup Website pada Adobe Photoshop

Apolos Avrialdo by Apolos Avrialdo
April 21, 2018
in Knowledge, Tech Corner, Tips & Trick
0
FILEMAGZ_Tips-Tips Membuat Mockup Website pada Photoshop

Tips-Tips Membuat Mockup Website pada Photoshop

Halo, Sobat FILE, kamu pernah tidak, terpikirkan untuk membuat website kamu sendiri, tapi kamu bingung harus memulainya dari mana? Jawabanya simple! Kamu dapat memulainya dengan membuat design impian website kamu, yang disebut dengan mockup. Nah, kali ini FILE akan memberikan kamu tips-tips membuat design mockup website menggunakan software Adobe Photoshop.

 

Grid System

Filemagz_Grid System Tips-Tips Membuat Mockup Website pada Photoshop

Grid System atau yang biasa dikenal dengan garis bantu yang dapat digunakan untuk membantu kamu membuat lebih rapih dan konsisten setiap section pada website-mu. Untuk menggunakannya, kamu dapat langsung ketik pada Google Search, “1200 Grid System PSD” atau “12 Column Grid System” . Jumlah grid ini dapat ditambahkan atau dikurangkan sesuai kebutuhkan kamu akan membuat website desktop ataupun mobile device. Grid System ini nantinya akan membantu kamu mengembangkan website menjadi responsif nantinya saat proses coding.

 

Web Safe Fonts

FILEMAGZ_Font safe Tips-Tips Membuat Mockup Website pada Photoshop

Pemilihan font merupakan bagian terpenting dalam membuat sebuah website. Tentu saja hal ini dilakukan mulai dari proses pembuatan mockup website-mu. Tentukan font untuk heading, navigasi, judul laman, ataupun konten website kamu. Akan tetapi, kamu tidak bisa sembarangan memasukan font begitu saja, karena setiap Operation System (OS) seperti Windows, Linux, iOS, Android, dan lainnya, menjalankan sistem yang berbeda-beda.

Saat dijalankan pada Android, font ini akan berjalan, tapi mungkin saja di iOS tidak dapat berjalan sehingga website-mu nanti akan digantikan oleh random font yang mungkin akan membuat website-mu jadi buruk. Oleh karena itu, kamu memerlukan web safe fonts atau font yang sudah pasti berjalan di semua perangkat seperti Arial, Verdana, Bookman, Arial, dan font lainya yang biasa digunakan dalam pembuatan website.

 

Warna yang Konsisten

Filemagz_ Warna Kosisten Tips-Tips Membuat Mockup Website pada Photoshop

Warna pada website bisa kamu tentukan dengan warna kesukaanmu ataupun logo dari website-mu. Warna yang kamu pilih harus bisa menggambarkan logo website-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 rule pada Color Wheel. Hal tersebut dapat membantu kamu memberikan 3-5 warna yang menjadi konsistensi pewarnaan website-mu.

 

Kompres Foto atau Gambar Dari Mockup Website

FILEMAGZ_Kompes foto gambarTips-Tips Membuat Mockup Website pada Photoshop

Setiap gambar HD pastilah memilih ukuran 3-5 MB atau lebih, agar nanti website tidak berjalan sangat berat ketika diakses, setiap foto atau gambar perlu melewati tahap kompres gambar. Kamu dapat lakukan hal ini mulai dari mockup website kamu, kompres terlebih dahulu dengan cara “FILE > Export > Save for Web (Legacy)” ataupun shortcut menggunakan “CTRL+Alt+Shift+S” pada Adobe Photoshop.

 

Gunakan Icon

Filemagz_Fontawsome Tips-Tips Membuat Mockup Website pada Photoshop
Fontawsome

Gunakan icon untuk mempercantik website kamu agar pengunjung website-mu dapat melihatnya lebih nyaman dan lebih digunakan. Icon tersebut juga dapat kamu buat sendiri menggunakan Adobe Illustrator ataupun pada Adobe Photoshop sendiri. Tapi jika kamu kesulitan membuatnya, kamu dapat menggunakan Flaticon ataupun langsung menggunakan Font Awsome. Font yang berbentuk icon yang dapat kamu gunakan saat proses coding agar nanti website-mu berjalan lebih ringan dibandingkan menggunakan gambar.

 

Tambahan

Filemagz_Tambahan Tips-Tips Membuat Mockup Website pada Photoshop

Jika kamu bekerja dalam tim saat membuat wesbite tersebut, dan kamu kebetulan menjadi seorang yang membuat mockup, kamu dapat membuat ukuran mockup itu jadi lebih kecil dengan cara meletakan 1 fill layer putih paling atas sehingga menutupi semua bagian mockup. Lalu tekan save saja, maka size-nya akan lebih kecil dan akan lebih ringan untuk di-upload dan dibuka nanti.

 

Jadi itu dia, tips dan trik bagaimana membuat design mockup website-mu sendiri menggunakan Adobe Photoshop. Langkah ini juga digunakan oleh para web designer professional sebelum mereka melanjutkan ke tahap proses coding sebuah website menggunakan bahasa pemerograman seperti HTML, CSS, Javascript, dan lain-lain sebagai seorang Front End Developer.

5 ALASAN MENGGUNAKAN LARAVEL SEBAGAI FRAMEWORK PHP

Memang, ini masih langkah awalmu untuk memulai membuat website-mu sendiri, tapi buat kamu yang baru belajar coding, dengan adanya mockup website yang telah kamu buat, dapat menjadi sebuah motivasi kamu untuk kamu bisa, dan kamu dapat mewujudkanya website tersebut menjadi nyata. Good luck dan do the best!!

Bagikan ke sesama!
Tags: anak ITanak SIdesignerfront endgraphic designermembuat websitemockup websitephotoshopwebsite
Previous Post

Berikut 4 Pencapaian Stephen Hawking yang Perlu Kamu Tahu!

Next Post

Berikut 3 Cara Ide Bisnis Bisa Muncul!

Apolos Avrialdo

Apolos Avrialdo

Related Posts

8 Tips Membeli Handphone Baru di Tahun 2021
Tips & Trick

8 Tips Membeli Handphone Baru di Tahun 2021

April 10, 2021
5 Plugin WordPress yang Wajib Kamu Miliki
Knowledge

5 Plugin WordPress yang Wajib Kamu Miliki

April 7, 2021
4 Rekomendasi Website Builder
Tech Corner

4 Rekomendasi Website Builder

April 5, 2021
komputer vs laptop
Knowledge

Komputer vs Laptop, Manakah yang Terbaik untuk Kamu?

March 25, 2021
Hal yang Kamu Perlu Ketahui Sebelum Membeli Laptop Gaming!
Knowledge

Hal yang Kamu Perlu Ketahui Sebelum Membeli Laptop Gaming!

March 14, 2021
5 Rekomendasi Aplikasi Menggambar pada PC
Knowledge

5 Rekomendasi Aplikasi Menggambar pada PC

March 14, 2021
Next Post
Berikut 3 Cara Ide Bisnis Bisa Muncul!

Berikut 3 Cara Ide Bisnis Bisa Muncul!

Leave a Reply Cancel reply

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

  • Trending
  • Comments
  • Latest
MIUI 12 (Sumber: whooptous.com)

10 Fitur Keren dari MIUI 12 yang Nggak Boleh Kamu Lewatkan!

March 25, 2021
8 Rekomendasi Film Anime Terbaik untuk Menemani Kamu WFH

8 Rekomendasi Film Anime Terbaik untuk Menemani Kamu WFH

August 5, 2020
7 Hal yang Harus Diperhatikan dalam Membuat Logo

7 Hal yang Harus Diperhatikan dalam Membuat Logo

March 15, 2021
Perkembangan Bahasa Pemrograman dari Generasi ke Generasi!

Perkembangan Bahasa Pemrograman dari Generasi ke Generasi!

December 22, 2020
8 Tips Membeli Handphone Baru di Tahun 2021

8 Tips Membeli Handphone Baru di Tahun 2021

0
cute-girl-with-laptop-internet

Nikmatnya Berkomunikasi dengan Internet

0
Aplikasi Unik

4 Aplikasi Unik Untuk Smartphone Kamu

0
Startup-Branding-Tips

Mencari dan Menemukan Ide Bisnis Startup

0
8 Tips Membeli Handphone Baru di Tahun 2021

8 Tips Membeli Handphone Baru di Tahun 2021

April 10, 2021
5 Plugin WordPress yang Wajib Kamu Miliki

5 Plugin WordPress yang Wajib Kamu Miliki

April 7, 2021
4 Rekomendasi Website Builder

4 Rekomendasi Website Builder

April 5, 2021
BINA NUSANTARA COMPUTER CLUB (@bnccbinus) PROUDLY PRESENT BNCC TECHNO TALK II

BINA NUSANTARA COMPUTER CLUB (@bnccbinus) PROUDLY PRESENT BNCC TECHNO TALK II

April 10, 2021
FILEMagz Logo

Newsletter

Categories

  • Business
  • Design
  • Event News
  • Finance
  • Games
  • Hobby
  • Inspiration
  • Knowledge
  • Lifestyle
  • Movies
  • Productivity
  • Tech Corner
  • Tech News
  • Tips & Trick
  • Trivia
  • Video
  • Home
  • Articles
  • About
  • Contacts

© 2021 FILEMagz

No Result
View All Result
  • Articles
    • Event News
    • Hardware Review
    • Inspiration
    • IT News
    • Knowledge
    • Tips & Trick
  • Contacts
  • Home
  • About

© 2021 FILEMagz