July 24, 2024

Membuat Template Untuk Perusahaan Transportasi

3 min read

Kali ini saya akan menjelaskan pembuatan Template untuk perusahaan transportasi, sebelumnya untuk sebuah website corporate kita harus mengerti beberapa elemen penting dalam Website corporate / perusahaan merupakan perpanjangan tangan secara online dari sebuah perusahaan. Selain fungsinya untuk memberikan informasi, tak jarang juga banyak perusahaan menggunakan websitenya untuk mendapatkan klien baru.

Contoh template yang akan saya buat seperti ini

Namun ada beberapa elemen penting yang harus diperhatikan untuk membuat website corporate bisa dibaca disini

Baiklah kita lanjutkan, Apa yang akan diperlukan dalam tutorial ini?

Langkah 1

Download terlebih dahulu Template 960grid, Grid bukanlah suatu pembatasan kreatifitas terhadap desain. Grid di ciptakan untuk mempermudah kita menjaga konsistensi layout dari halaman satu ke halaman yang lain. Selain itu gird juga membantu programmer yang akan menslicing desain di photoshop. Menggunakan 960 Grid System, karena sudah merupakan standar di jaman sekarang ini. Jika kamu tidak mau menggunakan grid yang sudah ada, silakan gunakan grid kamu sendiri. Yang terpenting lebar area konten tidak boleh melebihi 960 pixel.

Langkah 2

Atur background menjadi #e5e9e9, atur grid horizontalnya seperti ini

Langkah 3

Masukkan icon truck yang sudah di download, dan text untuk bagian header, kemudian masukkan logo icon RSS feed di sebelah kanan

Langkah 4

Sekarang Buatlah Rectangle untuk navigasi link dengan warna #686767

Selanjutnya copy rectangle untuk navigasi, beri nama layer shadow, letakkan di atas rectangle navigasi pertama,

Atur rectangle dalam layer shadow seperti dibawah ini

Langkah 5

Selanjutnya masih pada layer shadow klik edit > transform > Warp , kemudian geser point seperti gambar dibawah ini , usahakan posisi left dan right bentuknya sama

Hasil Akhir

Langkah 6

Kemudian masih di rectangle shadow klik  Filter -> Blur -> Lens blur atur seperti dibawah ini

Radius dibuat 60 dan thresould 0

Langkah 7

Buatlah text  untuk link navigasi, dari home, profil, layanan & servis, relasi, lowongan kerja, informasi, news dan contact us

Tambahkan layer baru, pilih menggunakan rectangle marquee tool, klik kanan pada layer, blending option, atur gradient layer, atur warnanya seperti dibawah ini

Untuk memisahkan setiap navigasi buatlah garis vertical kecil berwarna hitam  menggunakan rectangle tool sehingga tampak seperti gambar berikut

Langkah 8

Buatlah rectangle beri warna yang sama dengan link navigasi namun lebih besar dibawah ini seperti dibawah ini, masukkan truck yang telah di download terlebih dahulu sebelumnya Letakkan disisi sebelah kanan

Dengan direct selection tool ubah menjadi bentuk seperti trapesium

Ubah warnanya menggunakan gradasi oranye

Masukkan beberapa text, dengan ukuran font 16 pt seperti pada gambar

Tambahkan shape menggunakan rounded rectangle tool (U) berwarna #686767

Seperti pada gambar, tambahkan text Baca selanjutnya

Langkah 8

Masukkan gambar airplane dan truk pick up, beri effect  stroke dan drop shadow

Hingga terlihat seperti dibawah ini

Langkah 9

Terakhir untuk bagian footer masukkan rectangle berwarna senada dengan link navigasi

Dan masukkan text seperti dibawah ini

Langkah 10

Yang terakhir kamu  untuk finishing lakukan proses slicing seperti tutorial saya terlebih dahulu disini

Sumber

Bagaimana teman teman, mudahkan??? Ingin belajar tetap pembuatan web lebih lanjut atau Tambah ilmu pengetahuan tentang website design kunjungi www.jurusgrafis.com (http://jurusgrafis.com/category/artikel/website-interface/) Atau gabung di forum kaskus All About Desain Web.

By: Asniar Aznita

0 thoughts on “Membuat Template Untuk Perusahaan Transportasi

  1. Kren banget mbak, ini baru tutorial, hehe mau tanya ukuran tinggi & resolusinya berapa mbak? maklum neubie, mohon petunjuknya ya 😀

    btw, Atas ane junker gan, cuma emoticon & gak ada comment sama sekali :ngakak

  2. – mudah dimengerti
    – ga ribet-ribet amat
    – design dinamis, memukau sipembaca ( saya ) ^^
    – coba ah..
    – ^^.

  3. kalo ada salah tulisan mohon koreksi nya

    oh iya adek adek siswa yang mau buat layout web sumber tutorial udah sy cantumin
    konsep konsepnya juga (http://jurusgrafis.com/category/artikel/website-interface/)
    @ade : resolusinya nggak gede ade kan nggak untuk cetak pake 72 dpi : 72 Dpi adalah resolusi standar untuk tampilan di monitor (jangan pernah membuat desain website di resolusi 100 dpi sekalipun, karena ukuran asli nya akan menjadi besar juga). Dan gunakan warna RGB yang memang di khususkan untuk monitor

  4. @hadi makasih rate nya biar jadi HOT THREAD jangan lupa di like kwkkwkw *ngarep*

    @ade : jangan bilang jungker stttttttttttttttttttt

    @three khan : sudah dibuat langkahnya ….ayooo kumpul ………

  5. @ade : oh iya ade kalo dah download 960grid, udah nggak perlu setting n atur grid emang khusus buat layout kok

  6. upps…gagal pertamax neh…

    wuih dapat rate bintang lima…cuit cuit

    kok sama mbak ya, aku juga belajar ya dari refrensi itu…hehehehehehe ooo kamu ketahuan…

    tapi aku sudah garap buat templates yang make css nyo tunggu bae tertib nyo eh terbit nyo…

    otw :travel dan :tkp

      1. khah sehati…hmmm cak mano ye…
        payo lah…

        btw cak nyo diterapke nian ilmu dari web itu
        make grid line euy, dan pewarnaan nya itu

        cuit cuit…

  7. weks…bener nian, dari situ thoh refrensi nyo…

    sesuai dengan paham kami bu’

    “tidak bisa membuat, maka tirulah, kalau bisa kembangkan”…

    se tubuh dak bu’

    cak mano

    :thanks2

Leave a Reply

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

Copyright © All rights reserved. | Newsphere by AF themes.