Tutorial Singkat Desain Web dengan Photoshop untuk Single Page

Tutorial Singkat Desain Web dengan Photoshop untuk Single Page

Untuk membuat desain untuk tampilan website, Anda bisa menggunakan aplikasi seperti photoshop lho. Namun, sebelum Anda merancang desain web dengan photoshop, maka Anda harus menginstal photoshop terlebih dahulu.

Kenapa photoshop? Karena aplikasi ini merupakan aplikasi desain sehingga bisa Anda gunakan sebagai alternatif untuk membuat desain website.

Sebelum Anda membuat desain web dengan photoshop, akan lebih baik jika Anda memiliki pattern 12 column grid dan logo agar proses lebih cepat. Setelah itu, lakukan cara berikut ini:

Tutorial Singkat Desain Web dengan Photoshop untuk Single Page
Tutorial Singkat Desain Web dengan Photoshop untuk Single Page
  • Buka photoshop Anda dan masukkan pattern tersebut. Pastikan jika pattern tersebut menutupi seluruh canvas.
  • Untuk menambahkan pattern di layar background, klik 2x terlebih dahulu, agar background tidak tergembok. Setelah itu, pilih Add Layer Styles di bagian bawah > pattern overlay > grove paper. Ok.
  • Jika Anda sudah memiliki logo, Anda tinggal import logo tersebut ke photoshop. Kemudian sesuaikan besarnya dengan yang Anda inginkan. Cara ini dilakukan agar Anda lebih mudah dan cepat dalam mendesain dan logo bisa Anda aplikasikan ke media yang lainnya.

Menu

  • Untuk membuat menu, pastikan jika menu sederet atau 1 baris dengan logo, sehingga lebih rapi. Anda bisa menuliskan menu sesuai keinginan Anda. misalnya Home Blog Contact Us.
  • Jika sudah, buat konten utamanya dengan menggunakan rectangle tool atau tekan U pada keyboard. Pastikan jika Anda membuatnya di layar baru ya. Lalu buat dari bawah menu hingga bawah sesuai keinginan Anda. ubah namanya menjadi Konten Utama.

Konten Utama dan Fitur

  • Untuk konten utama, Anda bisa membuat area tersebut sesuai dengan style Anda. misalnya dengan menambahkan style lewat add layer style. Jadi, di bagian ini Anda bisa berkreasi sesuka hati Anda.
  • Setelah selesai, Anda Bisa menambahkan beberapa fitur seperti heading, slider.
  • Seperti untuk slider, di bagian ini, akan digunakan untuk menampilkan slide show misalnya portofolio yang Anda miliki. Caranya, buat tulisan dengan nama latest project atau bisa disesuaikan dengan keinginan Anda. Tempatnya akan lebih bagus di bagian atas, namun Anda bisa menyelesaikannya dengan kebutuhan.
  • Buat bentuk kotak dengan rectangle tool di bagian bawah.
  • Anda juga bisa menambahkan fitur lain misalnya footer untuk di bagian paling bawah.
  • Di bagian footer, Anda bisa menambahkan logo, media sosial yang Anda miliki ataupun alamat kantor Anda.
  • Setelah selesai, Anda bisa mengecek lagi, apa ada yang perlu dirubah atau tidak.
  • Jika tidak ada, jangan lupa untuk merapikan bagian layernya agar mempermudah Anda saat Anda hendak merealisasikan desain tersebut untuk menjadi sebuah website.

Itulah cara singkat untuk desain web dengan photoshop yang perlu diketahui juga. Jangan lupa untuk kunjungi informasi menarik seputar apa itu private blog network agar Anda semakin mengenal teknologi khususnya website. 

About the author