BlogRSS: News Maker

Design bucu lengkung pada gambar

Posted on January 18, 2010 in: Blog, Design Tutorials

Baru kali ini saya perasan berapa ramai di kalangan subscriber saya merupakan orang baru di dalam dunia perekaan grafik.
Jadi saya rasa agak terkilan juga jika nak teruskan dengan tutorial yang over advance namun rupanya ramai yang tak cuba buat kerana tidak tahu menggunakan perisian Adobe Photoshop ini.
Dan lebih lagi apabila ada yang menghantar email kepada [...]

Baru kali ini saya perasan berapa ramai di kalangan subscriber saya merupakan orang baru di dalam dunia perekaan grafik.

Jadi saya rasa agak terkilan juga jika nak teruskan dengan tutorial yang over advance namun rupanya ramai yang tak cuba buat kerana tidak tahu menggunakan perisian Adobe Photoshop ini.

Dan lebih lagi apabila ada yang menghantar email kepada saya dengan pertanyaan-pertanyaan berikut:

Apa kata mereka…

  • Kat mana nak jumpa Marquee Tools ya?
  • Adobe Photoshop ni apa ye? Biasa pakai Paint je.
  • Layer Style tu kat mana ye?

P.S. Soalan di atas tiada kaitan dengan sesiapa baik yang hidup atau yang mati. Kalau sama seperti apa yang anda tanya, itu mungkin tak sengaja. :)

So, bermula kali ini saya akan buat tutorial-tutorial yang basic dahulu sebelum terjun ke dalam dunia advance bersama-sama anda semua.

Ringkas sahaja tutorial kali ini. Di atas permintaan salah seorang subscriber kita iaitu bagaimana untuk membuat bucu gambar menjadi lengkung / rounded edge apabila diedit.

Sebenarnya ada 2 cara sebenarnya untuk membuat rounded edge pada bucu gambar. Dan kalau nak diketahui yang sebenar-benarnya, memang ada lagi banyak! Hehe…

Buka imej aweks dahulu~

rounded edge images

Ea! Gatay ko ea. Belum apa-apa da bukak gambar awek. Haa.. cik adik ni tengah pegang bunga kan? Kalau macamtu kena paham lah kan. DO NOT DISTURB!

Buka canvas baru WEB

rounded edge images

01 Saiz pilihan hati saya adalah 800 x 600 pixel. Ikutlah kesukaan hati hangpa semua.

Cara #01 mencipta rounded edge

rounded edge images

Menggunakan Rounded Rectangle Tool (U) yang boleh anda akses daripada Ps anda seperti di dalam imej di atas. Pilih fungsi seperti di atas ye.

Cara #02 mencipta rounded edge

rounded edge images

Menggunakan fungsi Smooth Modify (Menu >> Select >> Modify >> Smooth) pada imej. Kesannya mungkin tidak sebaik cara #01.

 

Cara #01 Rounded Rectangle Tool

rounded edge images

02 dengan menggunakan Rounded Rectangule Tool (U), bina satu vector dengan radius 30px seperti di atas.

highlight:

Radius di dalam fungsi Rounded Rectangle Tool (U) menentukan berapa besar lengkungan yang bakal dibuat pada penjuru setiap segi empat.

Lebih besar nilai (px) nya maka lebih besar lengkungan yang dibuat.

rounded edge images

03 Gunakan Move Tool (V) untuk memindahkan imej gadis.jpg masuk ke dalam canvas anda tadi.

rounded edge images

04 Pastikan layer gadis ini diaktifkan seperti di atas. Dan dengan menekan kekunci Alt, klik garisan di antara layer 1 (gadis) ini dengan Shape 1.

Bentuk anak panah yang menunjukkan Layer 1 dimasukkan ke dalam layer Shape 1 akan muncul. Anda berjaya.

rounded edge images

05 Langkah terakhir, adjust sahaja imej cik adik ini supaya kedudukannya betul-betul berada di bahagian tengah atau apa sahaja yang anda suka. Eh, cantik juga dia ni. :D

rounded edge images

 

Cara #02 Smooth Modification

rounded edge images

06 Untuk gunakan teknik ini, kita akan masukan dahulu imej cik adik ini tanpa menyediakan apa-apa design lagi.

rounded edge images

07 Adjust kedudukan imej agar TERUS berada pada kedudukan yang anda inginkan.

rounded edge images

08 Bina guide baru untuk mambantu anda mendapat titik tengah keseluruhan imej.

rounded edge images

09 Garisan menegak berada di tengah pada kedudukan 400px dari kiri (saiz canvas 800px).

rounded edge images

10 Garisan melintang berada di tengah pada kedudukan 300px dari atas (saiz canvas 600px).

Menetapkan segi empat marquee tool

rounded edge images

Aktifkan marquee tool (M) anda untuk membuat pilihan mengelilingi imej anda.

rounded edge images

11 Lihat pada titik nombor 02 di atas, mulakan pilihan dari titik tengah tersebut dengan meletakkan cursor anda di situ.

Klik kekunci Alt tanpa lepas dan tarik marquee tool anda ke mana-mana arah keluar daripada titik. Apabila anda klik kekunci Alt, ini akan menyebabkan pilihan anda akan bermula dari titik tengah dengan sekata.

Dan jika anda tarik ke mana-mana arah, ia akan membuat pilihan yang sekata.

rounded edge images

12 Selesai menetapkan saiz yang sesuai yang anda inginkan, klik Menu >> Select >> Modify >> Smooth. Baik, fungsi ini sebenarnya lebih berfungsi kepada imej dengan pixel yang lebih besar. Jadi, oleh itu hasilnya pada imej yang bersaiz kecil sebegini akan kelihatan rosak.

rounded edge images

Tetapkan Smooth Selection anda pada Radius: 30 pixels. Dan klik OK.

rounded edge images

Lihat hasilnya, pada bahagian bucu pilihan marquee tool anda tadi akan menjadi lengkung (dismoothkan).

Memotong imej mengikut garisan marquee

rounded edge images

13 Pastikan anda memilih imej cik adik tadi. Pada panel layers, anda akan mendapati terdapat ikon add layer mask seperti di atas.

Nota penting:

Apabila anda memilih menggunakan Marquee Tool, maka jika anda mengaktifkan ikon Add Layer Mask tanpa menghilangkan pilihan marquee tool anda, maka
Mask ini akan memotong mengikut pilihan
Marquee tool tersebut.

rounded edge images

Tadaaa~ Inilah hasilnya! Menarik tak? Haa.. memang~ Wajah beliau memang menarik ye. Apatah lagi bila digandingkan dengan bunga yang dipegangnya. :"> Malu I. Hahaha..

Walaubagaimanapun anda boleh mendapati beberapa kecacatan dengan mudah sebenarnya pada teknik ke-2 ini.

Perbezaan Teknik #01 dan #02

rounded edge images

Ini adalah hasil daripada teknik #02. Lihat pada penjuru imej. Kelihatan agak tidak cantik. Dan ia lebih ketara jika anda mengedit imej bersaiz lebih kecil seperti 800×600 px dan ke bawah.

rounded edge images

Dan ini adalah hasil menggunakan teknik #01. Cun kan? Smooth! Dan saiz pada bahagian penjuru ini boleh pula anda ubah pada bila-bila masa TANPA merosakkan imej asal.

Dan sehingga bertemu lagi! Teruskan menghantar email kepada saya menggunakan borang di bawah! Saya akan sentiasa mendengarkan anda untuk terus mengeluarkan post-post berkualiti untuk anda.


  1. Posted January 18, 2010 at 11:44 pm

    nice2.. hehe.. selalunye org edit bhgn dalam jer.. tepi pun ade gak ae..

  2. meh
    Posted January 19, 2010 at 12:22 am

    wah2…bkn main ag koe ye joe…business gempak ea..hee

  3. Posted January 19, 2010 at 12:27 am

    Eh, ada aku kisah? Haa… meh sini.
    meh sini. nak gusti?

    Yang. eh, Mas.. tak tido lagi ke?

  4. Posted January 19, 2010 at 1:20 am

    gmbr awek ko ke joe?? hehe. :) )

  5. Posted January 19, 2010 at 11:05 am

    bagus..bagus…teruskan tutorial sebegini bermula pd tahap beginner sehingga kami semua jadi terer lagi…hahah…

  6. Nor azliana
    Posted January 19, 2010 at 8:20 pm

    Bagus la bro Joe ni….Memahami masalah kami-kami yang baru nak bermula ni..
    Teruskan usaha agar akan beroleh berlipat ganda ilmu kebaikan amin..

  7. kipasnanduang
    Posted January 19, 2010 at 8:56 pm

    Tahniah!

  8. Posted January 19, 2010 at 10:58 pm

    Haha.. ini ikut tahap yek. Haa.. kalau rajin copeklah. Klo x, lombap sokmo. Haha..

  9. Posted January 19, 2010 at 10:58 pm

    Yeah.. welcome. Lets go with me. :)

  10. PakSuLan
    Posted January 20, 2010 at 1:17 am

    teruskan……jgn jemu mendidik kami hingga berjaya ke puncak menara gading!
    haha……go joe!

  11. putra
    Posted January 20, 2010 at 3:30 pm

    trima kasih saudara.skrang saya lbih mmhami tntg grafik ni.sblum ni lngsung saya xtahu apa2.saya hrap saudara dpt beri tunjuk ajar dgn lbih dtail ag..teruskan

  12. kamarul
    Posted January 21, 2010 at 10:00 am

    terima kasih.. kerana sudi berkongsi ilmu

    dulu saya tak tahu apa-apa tentang photoshop

    sekarang sudah pandai guna sikit-sikit

    teruskan niat murni anda

  13. Nurul
    Posted January 22, 2010 at 12:11 am

    nk try nnt..huhu,,,

  14. Posted January 27, 2010 at 2:23 am

    thanks bro..ade gak akhirnya ade gak yg sudi uat tutor dlm BM tuk beginner cam aku ni. huhu…..

    pas ni uat la lg ye…

  15. Posted January 27, 2010 at 6:20 pm

    Hahaha.. of course.. insyallah nak menambah2.

    Lagipun blog ni nanti akan jadi stu library akhirnya nnt. As mudah lah sikit utk aku story kat anak2 aku nak belajar dr aku nnt kan. haha..

    “Ha.. angah bukak je grafik.my papa. belajar semua dari situ.” Wah! Gitu pulak. haha..

Post Comment

About Joe

M. Jauhari Iskandar b Jaafar (Joe) telah mula berkhidmat dalam dunia reka grafik kepada peniaga internet sejak awal tahun 2008. Beliau amat meminati teknologi design menjadikan sehingga kini reka grafik laman web beliau dilengkapi skrip dan sistem canggih dan profesional.

Copyright © 2010 Grafik Artwork Inc.|WordPress Theme Design by Rubiqube.com