Tutorial Cara Membuat Efek Gradasi di Illustrator

Flamingosolution.com | Kali ini Blog ingin berbagi tutorial yaitu bagaimana membuat Efek Gradasi Pada suatu Objek (Lingkaran) pada Adobe Illustrator. Mungkin akan sedikit lebih banyak langkah langkah dibawah namun tidak lah rumit, tujuannya, agar pembaca tetap dapat mengikuti tutorial kali ini dengan baik. Untuk itu Langsung saja mari di simak langkah dibawah :

Step 1 : Buka dan buat layer baru pada illustrator

Step 2 : Setelah itu klik Ellips tool pada tool box lalu buatlah lingkaran pada layer

Step 3 : Kemudian beri warna terang pada ellipse, dengan posisi stroke nonaktif

 

Step 4 : Setelah demikian duplikat Lingkaran dengan cara 

klik lingkaran kemudian "Drag" kebawah sambil menahan ALT

Step 5 : lalu beri warna MERAH pada hasil duplikat lingkaran, (Stroke tetap nonaktif)

Step 6 : Kemudian klik Pen Tool , lalu aktifkan warna pada Fill menjadi "Hitam".

Step 7 : Kemudian Bentuklah sebuah Path hingga berbentuk demikian seperti dibawah :

Step 8 :  Maka selanjutnya seleksi Lingkaran merah dan Path Hitam - Lalu klik Path Finder atau bisa dengan menekan (Ctrl + Sift + F9), - Lalu cari "Minus Front". 

Lihat gambar dibawah ini:

hasilnya seperti dibawah ini

Step 9 : Selesai itu, Klik "Objek" pada panel diatas, lalu cari "Path" lalu klik "offset path.."

Step 10 : Setelah muncul kotak untuk mengatur  offset Path , aturlah ukuran menjadi (-) minus, agar path copy nya menjorok ke dalam, atur lah agar tidak terlalu tebal. Lalu klik OK.

Step 11 :lalu beri warna putih pada offset path yang sudah diatur tadi. terlihat seperti dibawah ini.

Step 12 : Kemudian seret path putih tersebut ke dalam Lingkaran biru seperti dibawah. dan menggantinya menjadi warna Gradient.

 

 Step 13 :Atur "Opacity" warna putih (warna kiri) pada gradient menjadi (0%).

Step 14 : Kemudian ubah warna hitam (warna kanan) menjadi putih, (Opacity tetap 100 %)

Step 15 : Selanjutnya aturlah angle pada gradient menjadi bernilai 90, sehingga gradient pat terlihat seperti dibawah

Step 16: Langkah selanjutnya kita akan mengatur gradient pada Lingkaran Biru dengan cara,

Klik Lingkaran Biru, lalu klik pada pertengahan warna gradient seperti dibawah ini :

tujuan gambar diatas, agar kita dapat mengatur gambar pada gradient.

Step 17 : Atur mulai dari kiri, yaitu mengubah warna PUTIH transparent (bekas dari path sebelumnya) menjadi BIRU MUDA, lalu sebelah kanan BIRU TUA, (lihat gbr dibawah)

Step 18 : Setelah itu tambahkan warna biru tua tepat di tengah tengah gradient, lalu ubahlah warna yang diujung kanan menjadi biru lebih gelap (hitam boleh), 

lalu ubah type nya dari Linear menjadi Radial :

Sampai tahap diatas, kita sudah bisa melihat efek dari gradasi .

Namun agar terlihat lebih Real kita harus menambahkan bayangan (drop Shadow) pada Lingkaran Biru.

Step 20 : Sekarang kita membuat bayangan dengan cara, klik Lingkaran biru, Kemudian cari pada menu panel Effect, - Stylize, - Drop Shadow. (Maka akan keluar kotak untuk mengatur bayangan) :

Keterangan Gambar diatas :

1. Klik dulu Preview agar kita dapat melihat secara langsung pengaturan

2. Lalu atur lah ketebalan bayangan sesuai keinginan, namun ketebalan bayangan dapat mempengaruhi warna putih yang ditengah lingkaran tersebut.

3. Klik OK.

Maka lihat hasil dan simpan

Demikian lah tutorial kali ini, semoga dapat dipahami, dan tentunya dapat menambah refrensi. Namun jika ada yang kurang dipahami, silahkan tinggalkan pertanyaan di kotak komentar.

Klik tombol like dibawah ini, dan silahkan bagikan link apabila ingin memberitahu teman teman.

Terima kasih telah berkunjung, 

Salam BLogger.

Baca Juga artikel terkait :
Tutorial Cara Membuat Warna Gradasi Pada Font Teks di Adobe Illustrator
 Cara Insert Gambar Ke Dalam Text di Illustrator 

Cara Memasukkan Gambar Pada Objek Shape di Illustrator
 Tutorial Lengkap Cara Membuat Text 3D Di Illustrator
Tutorial Lengkap Cara Membuat Objek 3 Dimensi di Illustrator 

By: Utomo19 On 3:35:00 PM

Continue Reading

Mengenal Tentang Seputar Portofolio Desainer Grafis

Apa itu Portofolio?

Jika disimpulkan secara singkat, Portofolio adalah sebuah data informasi rangkuman /karya terbaik yang dibuat oleh seseorang, baik itu Perusahaan untuk mengenalkan suatu Objek untuk mencapai tujuan yang telah ditentukan (ex : Produk, Company, Layanan Jasa, bahkan Untuk Promosi Diri sendiri)

Dengan kata lain, Portofolio mengacu pada sebuah tampilan yang merupakan hasil rangkuman terbaik untuk menggambarkan suatu objek tertentu baik dalam bidang apa saja kelebihan dan keuntungan tentunya.

Untuk apakah kegunaannya?

Tentu selain digunakan untuk melamar pekerjaan, atau ingin menyediakan jasa kepada suatu instansi. Portofolio juga dapat membangun sebuah manajemen strategis, sangat berguna untuk pemasaran. Jadi apa bila Sobat hendak membuat tentang kelebihan yang anda miliki, atau jika kamu sedang ingin bekerja, mungkin  Portofolio dapat berperan membantu anda, dimana dalam portofolio yang telah kamu Rangkum/ Desain sebaik mungkin dapat membuat Si Perekrut tertarik.

Bagaimana Portofolio dalam dunia Desain grafis?

Umumnya, dalam dunia seni (Desain Grafis), portofolio adalah salah satu karya sendiri atau yang wajib kita sertakan untuk mendapatkan client atau pemasaran.

Karya itu bisa berupa dari hasil kerja Desain terdahulu kita, atau rekomendasi dari Client.

Dalam Portofolio Desain grafis , sesuatu yang hendak dituangkan ialah merupakan sebuah konten, konten tersebut dapat berupa, Desain Logo, Book Cover, atau berbentuk paper/ atau Koran. Dan tentu tetap harus memiliki isi yaitu deskripsi tentang suatu tujuan yang bersangkutan.

Ex: berupa Clipping, Foto, Brosure, atau berbentuk Majalah dan Koran.

Sejenak kembali lagi, seorang Desain Grafis tidaklah cukup hanya memiliki "gelar" atau "ijazah" (tentu keahlian Desain). Melainkan Desainer grafis bisa saja selebihnya tergantung pada Portofolio mereka.

Mungkin sebagai sebagai refrensi sudah ada banyak situs yang menyediakan contoh Jenis / bentuk yang bagus. Salah satunya mungkin sibat bisa melihat hasil karya para kontestan Desainer Grafis melalui situs ajang kontes seperti 99designs.com , sribulancer.com, dll

Atau  sobat juga bisa sekedar membaca tentang Situs Refrensi klik dibawah ini  :

Situs Situs Freelance Desain Grafis Populer

Bagaimana saja bentuknya?

Secara umum Portofolio haruslah dibuat secara maksimal agar nantinya dapat memukau calon klien si pembuat portofolio, dan portofolio yang dibuat harus berhubungan dengan pekerjaan kita/ atau bisa saja permintaan klien sesuai ketentuan yang diminta.

1. (Contoh Portofolio sebagai promosi "Diri sendiri")
Kita bertugas untuk  merangkum apa saja yang bersangkutan dengan keahlian/pekerjaan kita dan apa saja yang akan kita tawarkan bagi calon yang ingin kita tujukan.

Tentu untuk mencapai "Goal", Maka dituangkanlah Rangkuman tersebut ke dalam sebuah data informasi dengan semenarik mungkin, jadi dapat berupa Data data atau tampilan grafis yang lebih profesional.

2. (Contoh Portofolio sebagai "Permintaan")
Perusahaan si A, telah memberikan deskripsi tentang perusahaanya, baik itu visi dan misinya secara "Detail".

Maka tugas si pembuat Portofolio lah, untuk menuangkan/menggambarkan Deskripsi tersebut kedalam sebuah data/ atau informasi dengan cara yang lebih menarik dan membuat orang terkagum.

Dan secara terperinci Portofolio desain grafis memiliki ragam bentuk, ukuran, hingga jenis tampilan desainnya.

Bisa dilihat dari jenis diatas bahwa sipembuat portofolio menjelaskan tentang dari awal isi hingga hasil kerje kerja sebelumnya turut disertakan dalam portofolio.

  

Tentu Portofolio yang disampaikan atau tawarkan bisa dengan cara beragam, 
 Manual (ada bentuk Fisik) 
Jenis yang satu ini mungkin bisa berupa suatu kartu, atau bentuk bentuk paper lainya, dan biasanya disampaikan secara face to face.

Mungkin sobat bisa melihat contoh dibawah ini sebagai bentuk fisik.
 

 

Melalui media Online
Jenis ini mungkin hanya mengandalkan Digital saja, jadi lebih portable atau praktis untuk disampaikan, baik itu melalui situs situs penyedia lowongan, atau media lain bahkan media sosial. 

Berikut Contoh yang mungkin hanya berbasis Digital saja dalam hal penyampaiannya

  

Mungkin yang perlu menjadi "Quote" bagi Sobat diantaranya ;

Fokuslah pada kualitas :
Dalam arti kualitas yaitu, bagaimana menyampaikan kepada si penerima atau sekedar pembaca dengan cara yang lebih mudah namun memiliki konten (Padat dan Jelas). Baik itu dari segi tata letaknya, jenis Desain, Hal hal unik namun kreatif.
Kamu harus mampu membuat penjelasan sesingkat singkat mungkin tentang sebuah deskripsi tersebut, dan tidak memakan banyak kalimat yang bertele tele.

Belajar dari yang berpengalaman
Belajar dari para ahli yang sudah berpengalaman dalam hal ini tidak ada salahnya, dimana untuk mendapat ilmu yang lebih profesional.

Nah, sampai disini sudakah sobat paham apa itu portofolio?
Dan sudahkah terbayangkah dalam benak Sobat sobat sekalian untuk belajar membuat Portofolio sebaik mungkin?  :)

Berikut saran sebagai penambah refrensi untuk membuat portofolion online

www.behance.net
carbonmade.com
portfoliobox.net
crevado.com

Semoga artikel ini bermanfaat dan dapat menambah refrensi tentunya.
Salam BLogger.

By: Utomo19 On 11:46:00 PM

Continue Reading

Tutorial Cara Membuat Flat Design dan Long Shadow di Illustrator

Desain Flat | adalah suatu Desain tren saat ini yang banyak bermunculan di Internet sebagai pendukung tampilan seperti logo produk, aplikasi, bahkan tampilan desain Web. Sedangkan Long Shadow adalah bayangan halus yang dipadukan kedalam desain flat agar tidak terkesan kaku sama sekali. Namun perlu diketahui bahwa tidak semua jenis Desain Flat yang dipadukan dengan Long Shadow.

Dengan kata lain mungkin desain flat ini telah sering kamu jumpai, atau sekedar pengingat mari kita melihat tampilan OS dari Microsoft Windows 8.

Kita bisa melihat segi tampilan desain Windows 8 ini yang biasa disebut (Metro), betapa simpelnya Desain seperti ini, namun tetap enak dan ringan dipandang mata..

Bahkan sering juga kita melihat dari yang mendominasi seperti smartphone, yaitu menggunakan Logo logo Aplikasi yang terkesan flat namun cukup menarik

Seperti contoh lain

 

Nah, sekarang sobat sobat sudah tahu kan, bentuk /konsep desain Flat dan Long Shadow seperti apa?

Namun Blog ingin memberi sedikit cara bagaimana membuat sebuah logo sederhana dengan Flat Desain dan Long Shadow menggunakan Illustrator. (Namun bukan berarti selain Illustrator tidak bisa melainkan Aplikasi yang lain Seperti (corelDraw, Inkscape, bahkan Photoshop) juga bisa namun caranya berbeda. Baik, mari di simak.


STEP 1 : Membuat Kotak Persegi
Buka Illustrator  dan buat file baru dengan berukuran (800x800 pt)

Buat Objek dengan menggunakan Rectangle Tool (M), Buat Persegi pada layer dengan sambil menekan Sift + Alt (agar Proporsi ukuran sama)

 

STEP 2 : Ubah Persegi jadi Shape  Rounded
Klik Persegi tadi kemudian Klik "Effect" pada panel atas, lalu cari "Convert to Shapes", dan klik "Rounded Rectangle".

 

Maka akan muncul kotak "Shape Option" , centang "Preview" lalu aturlah "Corner radius" menjadi 80 (80 dikarenakan persentase layer 800x 800). Sehingga bisa saja kamu berbeda, tinggal disesuaikan.

 

Namun karena garis Bingkainya belum mengikuti lekukan alias masih kotak, maka harus diubah ;

Klik "Objek" lalu "Expand Appearance".

kemudian lihat hasilnya garis telah mengikuti lekukan "shape" yang telah di rounded

STEP 3 : Ubah Warna
Selanjutnya Ubahlah Rectangle "Shape" tersebut dengan memberi Fill Warna Cerah.
 (Strokenya di silang/putih).

STEP 4 : Cangkir pada Shape 

Selanjutnya Klik Objek Tool , pilih Ellipse kemudian tempatkan tepat di tengah objek sebelumnya (Shape Biru).

Setelah itu Beri (Fill)  Warna Gelap pada Ellipse, dan (Stroke) Putih, dan aturlah stroke Elipse tersebut dengan ketebalan kira kira 30, untuk lebih jelasnya lihat gambar dibawah ini

(Klik untuk memperbesar)

 

beri sedikit polesan sebagai tanda tangkai cangkir nantinya;

dengan menggunakan Pentool, Lalu tarik dari garis Stroke Putih Ellipse

Sampai tahap ini logo yang kita buat sudah tergolong Flat Desain, Namun Sesuai Judul yaitu kita masih harus membuat Long Shadow.

STEP 5 : Membuat Long Shadow

 Gunakan Pen Tool Untuk membuat suatu bayangan cangkir tersebut, buat titik anchor hingga membentuk seperti bayangan ke sudut pojok kanan, lebih jelas lihat gambar dbawah ;

Setelah itu kembali klik bayangan tadi, ambil warna dari shape biru menggunakan Eye Dropper pada tool box 

 1. klik Eye Dropper Klik Shape Biru, sehingga warna  warna bayangan pun menjadi sama dengan shape pertama.

2. setelah itu klik ikon Fill Warna, lalu Ganti Warna Menjadi sedikit lebih gelap daripada Shape pertama. Lihat gambar dibawah

STEP 6 : Menyatukan bayangan dengan shape.

Kita harus membuat bayangan berada dibawah posisi cangkir tersebut dengan cara ;

Klik kanan pada Shadow  - lalu pilih "Arrange" - kemudian "Send Backward".

 

Selanjutnya posisi bayangan sudah berada dibelakang cangkir seperti dibawah

Selanjutnya klik Shape biru terang (Kotak), lalu copy dengan cara Ctrl + C, Duplicate       Ctrl + f. Sehingga di layer Shape (Persegi menjadi 2)

 

Klik Shape Biru dan Shadow bersamaan (pakai SIFT) Kemudian cari "Pathfinder" atau bisa dengan CTRL + SIFT + F9 - Tekan Intersect.

Lihat Gbr ini (klik Perbesar)

Maka Jadilah Hasil Sederhananya seperti ini

Nah, Demikian seperti inilah cara membuat Logo sederhana bertema "Flat Design dan Long Shadow",mungkin jika masih ada yang kurang jelas boleh meninggalkan pesan di kotak komentar,

Jangan lupa klik tombol Like Facebook dibawah ini, atau bagikan ke sobat sobat lain, jika perlu.

Baca Juga Tutorial Desain Lainnya : DISINI

Tipografi Poster 

Membuat Text 3D Di Illustrator 

Membuat Objek 3 Dimensi di Illustrator

Membuat Warna Gradasi Pada Font Teks

Desain Karakter Angry Birds Di Illustrator

Membuat Latar Background Abstrak

Atau Baca Artikel ini : Situs Situs Freelance Buat Desainer Grafis

Semoga bermanfaat dan dapat menambah refrensi Ilmu kamu, 

Sekian dan terima kasih telah berkunjung,

Salam.

By: Utomo19 On 1:54:00 AM

Continue Reading

Dasar HTML Membuat Tabel

Kesempatan kali ini blog membahas yaitu cara membuat tabel di HTML, kegunaanya tentu sangat penting seperti contoh ingin membuat Form, tampilan sebuah database, atau untuk data data perbandingan, dll. Biasanya untuk penggunaan dalam membuat tabel akan lebih dipermudah jika menggunakan Aplikasi Dreamweaver (Adobe/ Macromedia) yaitu langsung dari tahap desainnya.

Namun perlu diketahui bahwa untuk awal, kamu juga harus perlu mengetahui dasar membuat tabel sederhana dengan menggunakan tool biasa (NOTEPAD).

Hal ini ditujukan agar dapat paham konteks, bentuk Tag yang dipakai dalam membuat tabel.

NB. Maka dalam pembahasan kali ini pun kita tetap menggunakan Notepad.

Tentu dalam tabel dalam tabel ada "baris" dan "kolom".

Berikut Tag membuat Tabel adalah <table> </table>

Penulisan Tag tabel berada di antara <body> seperti ini

<body>

                 <table>

                 </table>

 </body>

Namun Bentuk diatas belumlah cukup, yang mana tag <table> masih hanya membuat garis kosong.

Sedangkan Tag membuat Baris adalah <tr> </tr>
Penulisan Tag Baris berada diantara tag <table>

<table>
                    <tr>
                    </tr>
</table>

 Dan Tag membuat Kolom adalah <td> </td>
Penulisan Tag Kolom berada di dalam antara tag baris <tr>

Contoh Kolom 1.
<table>
                    <tr>                                        
                         <td>ISI KOLOM</td>
                    </tr>
</table>

Sehingga secara otomatis jika kita ingin membuat tabel berisi 2 kolom akan seperti ini

            Contoh Kolom 2

<table>
                    <tr>                                        
                         <td>ISI KOLOM</td>

                                <td>ISI KOLOM</td>

                    </tr>
</table>

Kode diatas adalah sebuah tabel yang berisi dua kolom seperti gambar dibawah ini

Jika ingin menambahkan baris kebawah berarti kita harus duplikasi tag <tr> tersebut seperti ini ;

 

<table>
                    <tr>                                        
                       <td>ISI KOLOM</td>

                                <td>ISI KOLOM</td>

                    </tr>

                         <tr>                                        
                                <td>ISI KOLOM</td>
                                <td>ISI KOLOM</td>

                    </tr>

</table>

Sehingga menghasilkan seperti ini ;

Demikian selanjutnya jika ingin menambah baris dan kolom misalknya 8 Baris 2 kolom,

lakukan duplikat tag <tr> baris sebanyak 8 kali, 
dan setiap 1 tag <tr> berisi 2 duplikat tag kolom <td>

Bagaimana sobat kira kira paham kan.. (hehe)


Attribut Attribut Dalam Tag Tabel Dalam tabel penggunaan Attribut berfungsi disaat seperti colntoh kita ingin memperlebar ukuran Kolom, mengganti latar tabel. Berikut attribut nya ;

Untuk mengatur lebar kolom colspan = " "
Untuk mengatur jarang antar cell cellspacing =""
Mengatur jarak pinggiran Bingkai dengan isi cellpadding =""
Mengatur latar Tabel Background =""


Sehingga Penulisan dalam Html demikian ;

 <html>

<head>
   <title>Untitled Document</title>
</head>

        <body>
           <table width="200" border="1">
                <tr>
                      <td colspan="50">ISI</td>
                       <td>ISI</td>
                </tr>
                <tr>
                      <td cellspacing="30">ISI</td>
                       <td>ISI</td>
                </tr>
           </table>
        </body>
</html>

Penjelasannya demikian :
1. Attribut yang ada pada kode tag <table> yaitu
     width="200"  berfungsi untuk menambah lebar bingkai tabel
     border="1"  berfungsi untuk menambah ketebalan Garis Bingkai agar lebih terlihat jelas

2. Attribut yang ada pada kode tag <td> (kolom) yaitu
   colspand="50" berfungsi untuk mengatur lebar pada kolom
   cellspacing="30" berfungsi mengatur jarak antar cell

demikian selanjutnya sehingga menghasilkan tabel seperti dibawah

 


Sekian mengenai cara Membuat Tabel dengan Tools sederhana, untuk postingan pembahasan selanjutnya akan segera ditambahkan di kotak komentar, atau klik Halaman Kategori DESAIN WEB diatas. Semoga Bermanfaat, dan dapat menambah refrensi kamu sobat, Terima kasih telah berkunjung.

Salam BLogger.


Klik Like atau bagikan ke teman yang ingin belajar HTML. Silahkan tinggalkan komentar jika ada yang sulit dipahami.

By: Utomo19 On 9:53:00 PM

Continue Reading