Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Dalam tutorial ini, kita akan mendesain website sebuah perusahaan. Layout situs ini akan diawali dengan slider berisi penjelasan tentang perusahaan, satu baris kutipan dan tombol call to action, dan diakhiri dengan beberapa informasi tambahan.

Preview


Berikut adalah tampilan desain web yang akan kita hasilkan. Klik gambar untuk melihatnya di perbesaran 100%.

final-large.jpg

Detail Tutorial



  • Tingkat Kesulitan: Pemula, Menengah

  • Software yang Digunakan: Adobe Photoshop

  • Teknik yang Dipelajari: Penggunaan Tekstur, Membuat Tombol, Penggunaan Grid 960.

  • Lama Pengerjaan: 30 menit


Resource yang Dibutuhkan


Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:


Tutorial


Langkah 1: Memilih Warna


Langkah pertama kita adalah menentukan tema warna yang akan digunakan. Ada banyak cara dalam memilih warna. Anda bisa mengambil dari komunitas misalnya dari colourlovr, menentukan sendiri, atau melalui software warna semacam ColorSchemer Studio. Di sini, saya menggunakan ColorSchemer Studio dan memilih warna menggunakan metode Split Complements. Split Complement terdiri dari satu warna utama dan dua warna samping. Kedua warna samping ini memiliki jarak yang sama di roda warna terhadap warna berseberangan dengan warna utama.

Untuk referensi lebih lanjut tentang teori warna, silakan baca artikel di TIGER color.

tutorial-desain-web-corporate-01.jpg

Langkah 2: Menyiapkan File


Ambil file grid 960 dari 960.gs. Buka file action (*.atn) di Photoshop. Di Photoshop, buka panel actions lalu klik ganda action 12 Column Grid.

tutorial-desain-web-corporate-02.jpg

tutorial-desain-web-corporate-03.jpg

Langkah 3


Ambil tool crop lalu buat bingkai crop menutupi semua bagian kanvas. Tahan alt lalu tarik sisi atas dan kanan hingga bingkai crop lebih besar dari ukuran kanvas. Tekan Ctrl + Enter unuk menjalankan proses cropping.

tutorial-desain-web-corporate-04.jpg
Langkah ini akan memperbesar ukuran kanvas secara merata ke semua arah.

tutorial-desain-web-corporate-05.jpg

Langkah 4


Tekan Ctrl + R untuk membuka penggaris. Klik dan geser dari penggaris horizontal ke tengah kanvas untuk membuat guide horizontal. Lakukan hingga kita memperoleh penanda area header, slider, quote, content, dan footer.

tutorial-desain-web-corporate-06.jpg
Silakan lihat hasil akhir layout situs ini untuk memahami pembagian areanya.

tutorial-desain-web-corporate-07.jpg

Langkah 5: Header


Mulai dengan membuat latar header. Buat sebuah persegi dengan warna #ca8548. Beri Pattern Overlay dengan pola pixel dari PSDfreemium.

tutorial-desain-web-corporate-08.jpg

tutorial-desain-web-corporate-09.jpg

tutorial-desain-web-corporate-10.jpg

Langkah 6: Logo


Kita buat logo sederhana saja, kombinasi teks dan shape. Beri Layer Style berikut.

tutorial-desain-web-corporate-11.jpg

tutorial-desain-web-corporate-12.jpg

tutorial-desain-web-corporate-13.jpg

Langkah 7: Menu Utama


Buat persegi hitam dengan Opacity 30% untuk latar menu utama.

tutorial-desain-web-corporate-14.jpg

Langkah 8


Tambahkan teks menu dengan penjelasan singkat di bawahnya. Di sini, saya menggunakan font League Gothic dan Letter Gothic Std.

tutorial-desain-web-corporate-15.jpg

Langkah 9


Buat garis putih 1 px dengan tool pencil lalu turunkan Opacity layer ke 30%. Hapus kedua ujungnya dengan tool eraser lembut. Gandakan garis ini dan simpan di antara setiap menu sebagai pemisah.

tutorial-desain-web-corporate-16.jpg

Langkah 10: Slider


Buat kotak dengan warna #35945a. Beri Layer Style berikut.

tutorial-desain-web-corporate-17.jpg

tutorial-desain-web-corporate-18.jpg

tutorial-desain-web-corporate-19.jpg

tutorial-desain-web-corporate-20.jpg
Di sini, Anda bisa melihat perbedaan latar sebelum dan setelah diberi Layer Style. Perbedaannya sangat sedikit, tapi dalam desain web ini berpengaruh besar. Ingat bahwa ini web bukan cetak! Kita bekerja dengan satuan pixel bukan centimeter, satu pixel sangat berpengaruh.

tutorial-desain-web-corporate-21.jpg
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 11


Beri teks dengan Drop Shadow seperti berikut.

tutorial-desain-web-corporate-22.jpg

tutorial-desain-web-corporate-23.jpg

Langkah 12


Ambil file PSD Screenshot Web 3 Dimensi yang saya desain untuk Vandelay Premier. Anda bisa mengedit screenshot situs di dalam file PSD dengan mengikuti instruksi yang tersedia.

tutorial-desain-web-corporate-24.jpg

Langkah 13


Buat layer vektor terdiri dari dua segitiga bertumpukan dengan warna putih. Atur mode salah satu segitiga ini ke Subtract untuk memperoleh bentuk panah.

tutorial-desain-web-corporate-25.jpg
Beri layer style berikut.

tutorial-desain-web-corporate-26.jpg

tutorial-desain-web-corporate-27.jpg

Langkah 14


Turunkan Fill layer ke 30%.

tutorial-desain-web-corporate-28.jpg

Langkah 15


Buat juga panah yang sama di sisi sebelahnya.

tutorial-desain-web-corporate-29.jpg

Langkah 16: Quote


Buat persegi dengan warna #ca8548 untuk latar kutipan. Beri Pattern Overlay.

tutorial-desain-web-corporate-30.jpg

tutorial-desain-web-corporate-31.jpg
Berikut tampilan latar di perbesaran 100%.

tutorial-desain-web-corporate-32.jpg

Langkah 17


Beri teks kutipan menggunakan font League Gothic.

tutorial-desain-web-corporate-33.jpg
Beri Layer Style berikut.

tutorial-desain-web-corporate-34.jpg

tutorial-desain-web-corporate-35.jpg

Langkah 18


Buat shape rounded rectangle dengan warna #bd4469.

tutorial-desain-web-corporate-36.jpg
Beri layer style berikut.

[gallery ids="13221,13222,13223,13224" type="rectangular"]
Bentuk tombol yang diperoleh.

tutorial-desain-web-corporate-41.jpg

Langkah 19


Beri teks pada tombol.

tutorial-desain-web-corporate-42.jpg
Beri Layer Style berikut.

tutorial-desain-web-corporate-43.jpg

tutorial-desain-web-corporate-44.jpg

Langkah 20: Isi


Di bagian ini kita akan menyiapkan beberapa poin tentang perusahaan. Siapkan persegi dengan warna #df9c61 untuk latar.

tutorial-desain-web-corporate-45.jpg

Langkah 21


Buat layer baru di atas latar dan isi dengan putih. Klik Filter > Noise Add Noise.

tutorial-desain-web-corporate-46.jpg

Langkah 22


Ubah blend mode layer ke Multiply untuk menambahkan noise ringan pada latar. Di bawah Anda bisa melihat perbedaan latar sebelum dan setelah diberi noise.

tutorial-desain-web-corporate-47.jpg

Langkah 23


Buat layer baru dan turunkan Opacity-nya ke 10%. Ambil tool pencil lalu buat garis hitam dan putih 1 px, tepat di bagian atas latar. Di bawah Anda bisa melihat sebelum dan setelah pemberian detail garis 1 px.

tutorial-desain-web-corporate-48.jpg

Langkah 24


Buat poin penjelasan singkat disertai ikon di samping teks. Di sini, ikon yang digunakan adalah seri This is Art vol. 3 dari WeGraphics.

tutorial-desain-web-corporate-49.jpg

Langkah 25


Beri teks Drop Shadow dengan setting seperti di bawah agar lebih mudah dibaca.

tutorial-desain-web-corporate-50.jpg

Langkah 26


Ulangi proses ini hingga seperti terlihat di bawah.

tutorial-desain-web-corporate-51.jpg

Langkah 27: Footer


Buat persegi untuk latar footer dengan warna #bb8759.

tutorial-desain-web-corporate-52.jpg
Beri Layer Style berikut.

tutorial-desain-web-corporate-53.jpg

tutorial-desain-web-corporate-54.jpg
Di bawah adalah tampilan footer sebelum dan setelah diberi Layer Style.

tutorial-desain-web-corporate-55.jpg

Langkah 28


Akhirnya, tambahkan teks untuk link menu.

tutorial-desain-web-corporate-56.jpg

Hasil Akhir


Di bawah adalah hasil akhir desain web perusahaan yang kita peroleh. Klik gambar untuk melihatnya di perbesaran 100%. Saya harap Anda belajar satu atau dua teknik baru dari tutorial ini. Jika ada pertanyaan, silakan tanyakan di kolom komentar.

final-large.jpg

Download Link


Download File PSD