• Utama
  • Biodata
  • Hubungi
    • Pengiklanan
  • Dasar Privasi
  • Peta Laman
    • AMP Sitemap

SyahrilHafiz.com

Malaysian Blogger

  • SEO
  • WordPress
  • Info
  • Agro
  • Apple
  • Windows
    • Ubuntu
  • Google
  • Android
  • Perniagaan
  • GST

You are here: Home / Photoshop / Tutorial Membuat Banner Menggunakan Adobe Photoshop CS5 dan versi yang lain.

Tutorial Membuat Banner Menggunakan Adobe Photoshop CS5 dan versi yang lain.

February 16, 2011 oleh Syahril Hafiz45 Comments

Salam 1 Malaysia, dan Salam Perpaduan. Untuk pengguna Windows (ehem, saya triple boot OK) yang membeli Adobe Photoshop original (kalau tak original pun tak pa), boleh lah follow tutorial ni. Didalam tutorial ni, korang akan belajar cara-cara untuk membuat grafik yang sungguh kreatif sekali dalam Adobe Photoshop ini.

Pertama sekali – Fikir apa yang korang nak buat. ๐Ÿ˜‰

Sebagai contoh, untuk membuat banner dengan grafik, pastikan berapa lebar kah yang korang mahukan. Sebagai contoh, untuk design banner yang saya buat kt atas ni, saiznya adalah 600 (lebar) x 216 (tinggi). (Sejak itu, si Syahril membikin banner dengan saiz ni untuk post2 baru dia kihkihkih sebenarnya mamat tu pun otai gak grafik2 ni :-[) ).

Tutorial Bisnes Fotografi Untuk Produk Anda. Dapatkan sekarang sementara masih ada!

Tekan File > New. Dan Kekotak “New” akan terpapar.

Masukkan width: 600 dan height: 216

Seterusnya, korang akan nampak kertas kosong. Bermulalah titik permulaan seorang jurugrafik daripada kertas kosong. ๐Ÿ˜

Ok, terdapatnya layer pada sebelah kanan tu. Kita akan menggunakan beberapa layer pada tutorial ni.

Layers pada sebelah kanan skirn

Sekarang, buat satu lagi layer sebagai background nya. Pergi ke menu “Layer” > New > Layer dan namakan Layer tu “Gambar Latar”.

Dapatkan banyak sumber psd files kat http://downloadpsd.com/

Sekarang, pergi ke File > Place dan cari latar belakang yang korang suka. Contohnya,

Pilih gambar latar yang bersesuaian dengan tema

Ok, sekarang kita dah dapat latar belakang yang cantik. Seterusnya, korang perlu pikir tulisan yang sesuai dengan tema pulak. Contohnya, Helvetica Neue LT Pro. Untuk memasukkan text, tekan papan kekunci huruf “T” dan klik dimana2 dalam gambar latar tu. Suaikan saiznya dan masukkan teks yang lebih besar untuk tajuk. Contohnya:

Memasukkan teks

Ataupun, untuk membuat dia lebih menonjol, buat satu lagi layer. Dan Klik pada Rectangle tool atau tekan pada papan kekunci huruf “U”. Drag pada teks korang, contohnya

Drag rectangle tool tu meliputi teks mcm ni

Seterusnya, drag layer tu ke belakang layer teks korang, contoh

Tarik layer kekotak tu ke belakang layer teks korang

Klik pada “Vector Mask Thumbnail”

Klik pada Vector Mask Thumbnail

Kemudiannya, kita rendahkan opacity kekotak tu. Caranya

Setkan opacity kepada 30% ++

Tambahkan teks jika korang mahu, dan juga masukkan butang yang kalau orang nampak diorang jadik excited, seperti join now! etc etc. Dapatkan sumber psd file untuk butang-butang tu di sini, sbg contoh

Contohnya, korang boleh letak “Sertai Sekarang” sebagai kontra/membuatkan pengunjung rasa nak klik je

Kemudian ada boleh save dan muat naik ke laman web korang, semoga berjaya

ย Muaturun Sumber Tutorial dalam format psd

Artikel Berkaitan:

Filed Under: Photoshop, Template, TutorTagged With: adobe photoshop, buat banner, buat banner dengan adobe photoshop, cara-cara guna photoshop, dapatkan lebih pelanggan dengan grafik bertaraf professional, grafik

NAK TAHU TEKNIK PEMASARAN DI INSTAGRAM 2019?

Daftar sekarang untuk dapatkan Preview Copy PERCUMA teknik pemasaran No. 1 di Instagram.

About Syahril Hafiz

Pengasas blog SyahrilHafiz.com. Suka bertani & web enthusiast yang bercucuk tanam di laman maya. Jika anda ingin upah blogger untuk produk laku keras anda hubungi saya di halaman Pengiklanan. Biodata penuh tentang Penulis


Comments

  1. Easy Design says

    February 8, 2016 at 11:20 pm

    Ohhh macam tu je rupanya.
    Selama ni susah-susah je buat.
    Huhuh teirma kasih atas tunjuk ajar ๐Ÿ˜€

    Reply
    • Syahril Hafiz says

      February 15, 2016 at 3:49 pm

      Terima kasih. Design cantik2 ๐Ÿ™‚

      Reply
  2. azizi says

    February 28, 2015 at 10:25 am

    ada kawan2 yg pandai photoshop x yg nak berkerja boleh hubungi saya 018-3137937

    Reply
  3. Foredi says

    May 21, 2012 at 3:34 am

    Mantap saya coba dulu bos….

    Reply
  4. Mohd Isa says

    February 26, 2011 at 8:32 am

    pergh…mantop…nak kena belajar gak ni..hehe

    Reply
  5. PakarBuahPinggang says

    February 20, 2011 at 3:56 am

    Salam bro,

    Terima kasih sebab berkongsi artikel di atas.Bolehlah belajar-belajar untuk buat banner sendiri lepas ni.

    Reply
  6. Ali ridha says

    February 19, 2011 at 11:36 pm

    Sekarang ni aku masih biasa
    guna PS 7.cs3 tu aku pernah guna.
    tapi hilang dah.huuu..

    Reply
  7. Ali ridha says

    February 19, 2011 at 11:28 pm

    Guna photoshop juga senang.
    harga photoshop je tak adil langsung.
    mana la aku nak cari duit.

    Reply
  8. Ali ridha says

    February 19, 2011 at 11:24 pm

    sama la aku tak faham guna
    Gimp lagi…kena la guna
    windows dan Photoshop juga.
    bukan guna selalu.sebab dalam
    windows senang nak kena virus.huuu.. :[

    Reply
    • Syahril Hafiz says

      February 20, 2011 at 8:07 am

      hehe, betul tu bro
      GIMP aku tak berapa expert sangat
      tak pasti la yang si Fariz ni boleh tunjuk kan ke tidak lepas ni *peace*

      Reply
  9. informationaboutX says

    February 19, 2011 at 1:57 pm

    tutorial yang berguna..terima kasih banyak..

    Reply
  10. MDHAFiZ.NET says

    February 18, 2011 at 10:54 pm

    masih lg tengah nak belajar cs5 nih…
    info menarik bro.. ๐Ÿ™‚

    Reply
  11. madlut says

    February 18, 2011 at 4:39 pm

    weyhhhh..mana button like nie..aku nak like…haha, link ko share tu pun aku suka..thanks…:)

    Reply
    • Syahril Hafiz says

      February 19, 2011 at 9:37 pm

      share je..terima kasih bro..

      Reply
  12. fikryn says

    February 18, 2011 at 3:40 pm

    Oh terima kasih.. tapi aku masih guna CS3 jer.. eheks

    Reply
    • Fariz Luqman says

      February 18, 2011 at 3:54 pm

      sama je.. boleh jugak

      Reply
  13. Fariz Luqman says

    February 18, 2011 at 1:13 pm

    to everybody – hehehehe thanks semua!! nantikan lebih banyak tutorial untuk GIMP, Photoshop etc etc.. hihihi ๐Ÿ˜€

    Reply
  14. aried says

    February 18, 2011 at 12:14 pm

    terima kasih bro… penjelasan yg mnarik.. lagi satu, aried suka cara bro komen di blog2 lain.. telus dan ada yg luar pndangan orang lain.. so, aried amik peluang ni datang ke blog bro n ucapkan tahniah… like the way u ar…

    Reply
    • Syahril Hafiz says

      February 19, 2011 at 9:42 pm

      sama2 aried.
      kena ikhlas nak komen ni walaupun pelik bunyinya
      biar ikut gaya kita tersendiri
      make fun with comment~ yeah!!

      Reply
  15. Pejuang Kesenian Extreme says

    February 18, 2011 at 3:43 am

    Biasa guna cs3 je…
    Tutorial ni senang dan ringkas…
    mudah untuk diikuti….terima kasih ya…

    Reply
  16. faizal says

    February 18, 2011 at 12:37 am

    terbaek la tip2 nye, ble di tiru he2, yg pntg kne kreatif, keep it up bro thanks….

    Reply
    • Syahril Hafiz says

      February 19, 2011 at 9:41 pm

      setuju tu
      kena kreatif~

      Reply
  17. akubiomed says

    February 17, 2011 at 10:22 pm

    Tangan perlu dilembut untuk guna PhotoShope kalau keras tak jadi nanti ๐Ÿ™‚

    Reply
  18. suffer8zine says

    February 17, 2011 at 6:21 pm

    bookmark entri ni bro

    Terkini : 700 Ribu Kondom Hilang

    Reply
    • Syahril Hafiz says

      February 19, 2011 at 9:36 pm

      thanks!!

      Reply
  19. RozaniGhani says

    February 17, 2011 at 2:23 pm

    gunalah font lain bro. kan google font ada banyak font boleh download. ๐Ÿ™‚

    Reply
  20. suri says

    February 17, 2011 at 2:22 pm

    ps/:baner kt ats tu blogspot punya huu..skrg blog cahayacinta.dah ok .tq sb ada baner ๐Ÿ™‚ mmg ctik heee :8

    Reply
    • Syahril Hafiz says

      February 19, 2011 at 9:32 pm

      hehe, banner biasa je tu

      Reply
  21. suri says

    February 17, 2011 at 2:20 pm

    menarik utk di pejari..pasni klu ada masa free mau kesini lagi heee..

    terima kasih atas ilmu yg d beri..blog cinta pun blum ada baner lagu ..alahai.. :p ๐Ÿ™‚

    Reply
  22. azizan4444 says

    February 17, 2011 at 12:27 pm

    aku x bpe power photoshop ni..setakat edit skit2 bole la..hehe

    Reply
    • Syahril Hafiz says

      February 19, 2011 at 9:31 pm

      sama la kita bro
      sikit2 je
      tapi kalau banyak belajar mudah la

      Reply
  23. Ismail N says

    February 17, 2011 at 9:23 am

    tips yang amat berguna. bukan senang pakai photoshop ni kalau tak biasa.

    Reply
  24. Anip says

    February 17, 2011 at 1:10 am

    huh! boleh buat kat aku satu nie, aku langsung tk pandai gune..sikit boleh la

    Reply
    • Syahril Hafiz says

      February 19, 2011 at 9:28 pm

      haha, memang terbaik kan? aku pun gagap nak cuba benda ni

      Reply
  25. arrizz says

    February 17, 2011 at 1:01 am

    waa bro terbaik punya sharing nie..boleh praktik nanti,,thanks alot..kongsi lagi banyak nanti ye..

    Reply
    • Syahril Hafiz says

      February 19, 2011 at 9:27 pm

      abang kita ni buat tutor kan
      mesti menarik punya.

      Reply
  26. wazy says

    February 17, 2011 at 12:00 am

    perghhhh
    lagi satu tutorial yang mantap

    Reply
  27. zuar says

    February 17, 2011 at 12:00 am

    wahhh!!!tutorial lengkap nak buat header ni..i loike…Thank tuan rumah..hehe

    Reply
  28. zik says

    February 16, 2011 at 11:57 pm

    huyyo.. memang cantik lah… aku kana cuba praktikkan…

    Reply
  29. Fazreen says

    February 16, 2011 at 11:29 pm

    tuts budak2 but nice try…aku impress dgn screenshot… software apa guna untuk capture screenshot ni? or sekadar printscreen?

    Reply
  30. kulanz says

    February 16, 2011 at 11:01 pm

    menarik tutorial ni..
    tapi akupun belum pakai cs5.. masih setia dengan cs3..
    tak tau bila dapat pakai cs5 ni

    Reply
  31. Wan Perlis says

    February 16, 2011 at 10:42 pm

    aku x blh guna cs5 lagi
    coz grafik kad build in ja..x support
    still cs3

    Reply
    • Fariz Luqman says

      February 16, 2011 at 10:58 pm

      sama je bro.. cs3 ke.. paling teruk 7.0 pon still boleh ahhahaha

      Reply
  32. syahrilhafiz says

    February 16, 2011 at 10:27 pm

    aku still pakai version 7 tuh.. =( =(
    tool baru tak sempat nak merasa :aie:

    Reply

Trackbacks

  1. Tweets that mention Tutorial Membuat Banner Menggunakan Adobe Photoshop CS5. via -- Topsy.com says:
    February 16, 2011 at 11:44 pm

    […] This post was mentioned on Twitter by syahrilhafiz, syahrilhafiz. syahrilhafiz said: Tutorial Membuat Banner Menggunakan Adobe Photoshop CS5. http://t.co/dZvPEKb via @CaenZ […]

    Reply

Leave a Reply Cancel reply

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

NAK TAHU TEKNIK PEMASARAN DI INSTAGRAM 2019?

Daftar sekarang untuk dapatkan Preview Copy PERCUMA teknik pemasaran No. 1 di Instagram.

Tentang Penulis

Untuk biodata penuh boleh lihat di Biodata Syahril Hafiz. Follow saya di Media Sosial
SyahrilHafiz.com
  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
  • YouTube

Mesti Baca



Artikel Terbaru

  • 3 Tips Terbaik Membeli Di Shopee, Lazada & 11Street.my Jualan Murah
  • 5 Langkah Mudah Renew Kad KTM I-Card Student Secara Online
  • 7 Pemasaran Instagram – Cara Buat Duit Online Letupkan Jualan Di Instagram!
  • DIY Cara Tukar Air Radiator Kereta Kancil
  • Cara Semak Amanah Saham Berhad ( ASB ) Secara Online Melalui Portal MyASNB
  • Cara Mudah Pembayaran Bil Digi Online
  • Susah Close Sale Bisnes Online? Ikut Langkah Simple Close Sale Guna WhatsApp
  • Cara Beli Barang Online Di Lazada Malaysia
  • Kelebihan Chia Seed Untuk Kesihatan & Diet Harian
  • Cara Mudah & Paling Cepat Renew SSM – Kiosk Ez Biz SSM dan Online

RSS Resepi Menarik

  • Resepi Mee Goreng by RESEPIADIK
  • Resepi Cucur Labu Sedap
  • Resepi Kuih Sagu Kelapa Parut
  • Resepi Sotong Celup Tepung Bestari
  • Resepi Kek Basque Burnt Cheesecake

Pilih Arkib

Pilih Kategori

PRODUK UNTUK DIJUAL

Minyak Enjin Kereta Terbaik

Anak Pokok Limau Nipis

Anak Pokok Betik Sekaki

Susu Kambing Segar Dari Ladang

Susu Lembu Segar Dari Ladang

Chia Seed Murah & Organik

ANDA PERASAN BLOG INI LAJU?

Hosting yang disarankan adalah [1]. Rakan kerjasama Laman Rujukan Kerjaya & Minyak Enjin XRA Power

Hakcipta Terpelihara © 2023 SyahrilHafiz.comยท Kembali ke Atas