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.
Berikut adalah tampilan desain web yang akan kita hasilkan. Klik gambar untuk melihatnya di perbesaran 100%.
Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:
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.
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.
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.
Langkah ini akan memperbesar ukuran kanvas secara merata ke semua arah.
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.
Silakan lihat hasil akhir layout situs ini untuk memahami pembagian areanya.
Mulai dengan membuat latar header. Buat sebuah persegi dengan warna #ca8548. Beri Pattern Overlay dengan pola pixel dari PSDfreemium.
Kita buat logo sederhana saja, kombinasi teks dan shape. Beri Layer Style berikut.
Buat persegi hitam dengan Opacity 30% untuk latar menu utama.
Tambahkan teks menu dengan penjelasan singkat di bawahnya. Di sini, saya menggunakan font League Gothic dan Letter Gothic Std.
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.
Buat kotak dengan warna #35945a. Beri Layer Style berikut.
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.
Beri teks dengan Drop Shadow seperti berikut.
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.
Buat layer vektor terdiri dari dua segitiga bertumpukan dengan warna putih. Atur mode salah satu segitiga ini ke Subtract untuk memperoleh bentuk panah.
Beri layer style berikut.
Turunkan Fill layer ke 30%.
Buat juga panah yang sama di sisi sebelahnya.
Buat persegi dengan warna #ca8548 untuk latar kutipan. Beri Pattern Overlay.
Berikut tampilan latar di perbesaran 100%.
Beri teks kutipan menggunakan font League Gothic.
Beri Layer Style berikut.
Buat shape rounded rectangle dengan warna #bd4469.
Beri layer style berikut.
[gallery ids="13221,13222,13223,13224" type="rectangular"]
Bentuk tombol yang diperoleh.
Beri teks pada tombol.
Beri Layer Style berikut.
Di bagian ini kita akan menyiapkan beberapa poin tentang perusahaan. Siapkan persegi dengan warna #df9c61 untuk latar.
Buat layer baru di atas latar dan isi dengan putih. Klik Filter > Noise Add Noise.
Ubah blend mode layer ke Multiply untuk menambahkan noise ringan pada latar. Di bawah Anda bisa melihat perbedaan latar sebelum dan setelah diberi noise.
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.
Buat poin penjelasan singkat disertai ikon di samping teks. Di sini, ikon yang digunakan adalah seri This is Art vol. 3 dari WeGraphics.
Beri teks Drop Shadow dengan setting seperti di bawah agar lebih mudah dibaca.
Ulangi proses ini hingga seperti terlihat di bawah.
Buat persegi untuk latar footer dengan warna #bb8759.
Beri Layer Style berikut.
Di bawah adalah tampilan footer sebelum dan setelah diberi Layer Style.
Akhirnya, tambahkan teks untuk link menu.
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.
Download File PSD
Preview
Berikut adalah tampilan desain web yang akan kita hasilkan. Klik gambar untuk melihatnya di perbesaran 100%.
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:
- 26 Repeatable Pixel Patterns dari PSDfreemium
- Grid 960 dari Nathan Smith
- Font League Gothic dari The League of Moveable Type
- 3D Screenshots Display PSD – Part II dari Vandelay Premier
- This is Art vol. 3 dari WeGraphics
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.
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.
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.
Langkah ini akan memperbesar ukuran kanvas secara merata ke semua arah.
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.
Silakan lihat hasil akhir layout situs ini untuk memahami pembagian areanya.
Langkah 5: Header
Mulai dengan membuat latar header. Buat sebuah persegi dengan warna #ca8548. Beri Pattern Overlay dengan pola pixel dari PSDfreemium.
Langkah 6: Logo
Kita buat logo sederhana saja, kombinasi teks dan shape. Beri Layer Style berikut.
Langkah 7: Menu Utama
Buat persegi hitam dengan Opacity 30% untuk latar menu utama.
Langkah 8
Tambahkan teks menu dengan penjelasan singkat di bawahnya. Di sini, saya menggunakan font League Gothic dan Letter Gothic Std.
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.
Langkah 10: Slider
Buat kotak dengan warna #35945a. Beri Layer Style berikut.
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.
Langkah 11
Beri teks dengan Drop Shadow seperti berikut.
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.
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.
Beri layer style berikut.
Langkah 14
Turunkan Fill layer ke 30%.
Langkah 15
Buat juga panah yang sama di sisi sebelahnya.
Langkah 16: Quote
Buat persegi dengan warna #ca8548 untuk latar kutipan. Beri Pattern Overlay.
Berikut tampilan latar di perbesaran 100%.
Langkah 17
Beri teks kutipan menggunakan font League Gothic.
Beri Layer Style berikut.
Langkah 18
Buat shape rounded rectangle dengan warna #bd4469.
Beri layer style berikut.
[gallery ids="13221,13222,13223,13224" type="rectangular"]
Bentuk tombol yang diperoleh.
Langkah 19
Beri teks pada tombol.
Beri Layer Style berikut.
Langkah 20: Isi
Di bagian ini kita akan menyiapkan beberapa poin tentang perusahaan. Siapkan persegi dengan warna #df9c61 untuk latar.
Langkah 21
Buat layer baru di atas latar dan isi dengan putih. Klik Filter > Noise Add Noise.
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.
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.
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.
Langkah 25
Beri teks Drop Shadow dengan setting seperti di bawah agar lebih mudah dibaca.
Langkah 26
Ulangi proses ini hingga seperti terlihat di bawah.
Langkah 27: Footer
Buat persegi untuk latar footer dengan warna #bb8759.
Beri Layer Style berikut.
Di bawah adalah tampilan footer sebelum dan setelah diberi Layer Style.
Langkah 28
Akhirnya, tambahkan teks untuk link menu.
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.
Download Link
Download File PSD
