Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

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%.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah ini akan memperbesar ukuran kanvas secara merata ke semua arah.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Silakan lihat hasil akhir layout situs ini untuk memahami pembagian areanya.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 5: Header

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 6: Logo

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 7: Menu Utama

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 8

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 10: Slider

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 11

Beri teks dengan Drop Shadow seperti berikut.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Beri layer style berikut.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 14

Turunkan Fill layer ke 30%.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 15

Buat juga panah yang sama di sisi sebelahnya.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 16: Quote

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Berikut tampilan latar di perbesaran 100%.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 17

Brei teks kutipan menggunakan font League Gothic.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Beri Layer Style berikut.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 18

Buat shape rounded rectangle dengan warna #bd4469.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Beri layer style berikut.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Bentuk tombol yang diperoleh.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 19

Beri teks pada tombol.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Beri Layer Style berikut.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 20: Isi

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 21

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 25

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

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 26

Ulangi proses ini hingga seperti terlihat di bawah.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 27: Footer

Buat persegi untuk latar footer dengan warna #bb8759.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Beri Layer Style berikut.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Di bawah adalah tampilan footer sebelum dan setelah diberi Layer Style.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Langkah 28

Akhirnya, tambahkan teks untuk link menu.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

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.

Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Download Link

Download File PSD

14 Responses to Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

  1. ardianzzz 10 June 2011 at 10:34 am #

    Hi, Mas Jeprie..
    Saya lihat previewnya bagus, simpel dan sudah menerapkan beberapa teori usability untuk landing page. :D

    Saya tertarik membahas penggunaan ‘dummy text’. Seperti kita ketahui, ‘content’ itu adalah bagian dari desain. Jadi teringat jargon ‘content is king’, dan sudah seharusnya dekorasi itu mengikuti konten. Asumsi pragmatisnya, ketika kita menggunakan ‘dummy content’ secara tidak langsung desain kita menjadi ‘dummy design’. :)

    Mungkin artikel berikut bisa lebih menjelaskan: Lorem Ipsum Killing Design (designinformer).

    Mengenai desain situs perusahaan dengan tema yang cerah, contoh yang saya suka: http://litmus.com/.

    • Jeprie 10 June 2011 at 11:05 am #

      Terima kasih.

      Terus terang, saya belum mengerti aspek usability situs. Desain ini banyak meniru trend layout situs-situs perusahaan saat ini.

      Saya sudah membaca pendapat kontra tentang penggunaan Lorem Ipsum dalam desain. Untuk desain yang memang memiliki konteks tertentu, misalnya desain blog personal pesanan klien, penggunaan lorem ipsum harus dihindari. Lorem Ipsum terlalu generik dan menjauhkan kesan desain dari tema yang diharapkan.

      Tapi, untuk desain yang sifatnya umum, misalnya theme wordpress premium dan juga tutorial ini, saya rasa Lorem Ipsum malah lebih baik. Dengan Lorem Ipsum, desain akan memiliki kesan umum dan tidak condong pada tema tertentu. Misal, jika di tutorial ini teksnya tentang berita-berita produk Apple, pembaca akan beranggapan bahwa desain ini spesifik untuk situs penjual produk Apple. Dengan Lorem Ipsum, saya membebaskan pembaca untuk memberi tafsiran sendiri. Bisa jadi dia akan berpendapat ini cocok untuk studio web desain, penjual software, atau jasa lain. Ini alasannya semua penjual theme wordpress terbiasa menggunakan Lorem Ipsum dalam preview theme mereka, memperluas jangkauan tema.

      Ada komentar menarik dalam artikel itu.

      “It’s filler text. It’s to show you how the page will look once we plug in the actual content”

      • ardianzzz 10 June 2011 at 11:24 am #

        Menganai ‘meniru’,
        Mungkin tepatnya, kita meniru konsep. Ketika kita meniru layout yang lagi ngetrend, kita bisa memperjelasnya. Yang kita tiru adalah value dalam konsep tersebut dan bukan pixel-nya.

        Trend dalam desain itu berasal dari hasil studi dan pengalaman. Kita tidak perlu mempelajari mendalam tentang sisi ilmiah usability dan semacamnya. Berdasarkan pengalaman, kita bisa tahu konsep desain tersebut memang sudah terbukti bagus & usabel. Jadi kita pakai saja. :D

        Mengenai ‘lorem ipsum’, sepertinya memang cukup tergantung pada situasi dan kondisi yah. :)

      • Jeprie 10 June 2011 at 1:32 pm #

        Menarik sekali, meniru konsep. Sangat melegakan untuk desainer karbitan seperti saya… :)

  2. Kaget 10 June 2011 at 4:12 pm #

    Sekarang, saya dapet ilmu baru lagi soal grid 960gs. Hasilnya keren, apalgi untuk pemula ini jadi suatu trik yang ringkas :D

  3. faiz al-qurni 11 June 2011 at 8:53 am #

    wah, tutorial komplit dan bermanfaat.
    Terus terang saat mendesain sebuah website saya seringkali kesulitan dalam menentukan komposisi warna (maklum..otodidak).
    Apa bang jeprie punya solusi?

    • Jeprie 11 June 2011 at 12:21 pm #

      Saya biasa mengambil komposisi warna dari software seperti dalam tutorial ini atau melalui komunitas. Jika menggunakan Adobe Photoshop, cara paling mudah adalah menggunakan Kuler (Window > Extensions > Kuler).

  4. jaka @psdesain.net 11 June 2011 at 6:26 pm #

    Mas jep, link situs http://960.gs salah tuh…
    check aja…

    Pewarnaannya bagus..
    unik :D

    • Jeprie 11 June 2011 at 7:32 pm #

      Terima kasih, sudah diperbaiki.

  5. Arif Riyanto 12 June 2011 at 12:01 am #

    Terlepas dari yang disampaikan mas ardianzzz, ini tutorial yang bagus mas Jeprie.Mengajarkan bagaimana menggunakan Photoshop dengan baik :)

  6. ifliandry 15 June 2011 at 2:31 pm #

    Saya pemula dalam bidang desain mock up website. terima kasih atas tutorialnya. saya masih berharap bang Jeprie mau bikin buku tentang desain mock up web. misalnya berisi tentang trik pembuatan garis (seperti dalam web ini), background, penggunaan shadow yg baik, pemilihan warna, mungkin juga tentang golden ratio pada web (hal ini juga saya baru denger :), pembuatan layout utuh , penyusunan struktur group pada layer. mungkin kasih bonus mengenai teknik slicing pada layout , tidak usah sampai css (tapi kalo mau kasih juga tidak nolak ..hehehe), tapi mungkin melihat dari cara pandang web designer melakukan slicing, misalnya untuk background, hanya ambil 100px x 100px, untuk header mungkin diambil 1 px, karena akan dibuat repeat-x.

    terima kasih atas tutorialnya, ini sangat bermanfaat :)

  7. aaN 18 June 2011 at 10:32 am #

    Saya sangat beruntung bisa dapat tutorial design mockup website dr mas Jepri.. Penjelasannya sangat detil dan mudah dipahami. Saya masih pemula dlm penggunaan 960gs. Masih “meraba-raba” istilahnya. Soalnya selama ini desainnya masih gak rapi. Oya, sy minta rekom situs luar negeri tutorial web design dr mas Jepri klu boleh ya :)

    Terima kasih mas Jepri.. Salam sukses selalu :)

Trackbacks/Pingbacks

  1. Free HTML Template: Clean Corporate Site | Cekerholic - 28 June 2011

    [...] melihat tutorial desain web situs perusahaan di situs Desain Digital, saya sangat tertarik melihat hasil akhirnya. Alhasil, ketika ada waktu [...]

Tinggalkan komentar Anda.