Dari postingan sebelumnya tentang stroke di Exp. Design, kita sudah berhasil membuat path stroke. Sekarang pertanyaannya adalah bagaimana membuat custom stroke dari suatu gambar, yang nantinya bisa digunakan buat asset brush. Pada bingung stroke apaan? brush apaan? Scroll dulu aja ke bawah biar langsung tau ini tutorial bikin apaan sih :)

Langkah-langkahnya sebagai berikut:

1. Pilih objek yang ingin dibuat menjadi custom stroke dengan tools Selection (V), lalu pada panel Properties, pilih Add Stroke setelah mengklik icon kecil di bawah combobox stroke-selector.

2. Setelah itu akan terbuka tab baru dengan tulisan *NoName di bagian atas. Pada panel tools di sebelah kiri, klik ikon (Repeating) kemudian klik kanan pada path dan pilih Make Repeating.

3. Setelah itu, tutup tab tersebut, lalu akan muncul jendela prompt seperti berikut: 

4. Selesai! Anda baru saja membuat custom stroke sendiri,, semudah itu :p

5. Selanjutnya Anda tinggal mengetes stroke yang baru saja dibuat. Buka file yang sudah ada (atau buat baru), lalu pilih Paintbrush dari toolbox (atau tekan B untuk shortcut), lalu pilih dari pilihan combobox stroke-selector yang ada, cari strokeUme yang baru saja diciptakan.

Setelah berkreasi dan mengubah warnanya menjadi putih, hasilnya seperti berikut:

Sekilas hasilnya tampak seperti penggunaan Text on a Path, (kebetulan karena yang dijadikan custom stroke adalah tulisan ‘ume’). Tapi tentu saja hasil diatas tidak diperoleh dengan mengetikkan kata ‘ume’ berulang-ulang kali, tapi cukup dengan menyimpannya sebagai custom stroke yang diaplikasikan pada paintbrush.

Cheers! Next time we’re gonna talk about Text-on-a-Path itself :)

Sekarang ada file attachmentnya nih, *baru tau caranya :p* thx to ronald!

Share this post: | | | |

Menyambung posting pengenalan Expression Design, kali ini akan dibahas mengenai penggunaan Strokes. Pertama-tama buat sebuah path dengan cara menekan shortcut P untuk Pen, buat ngasal, kemudian select path tersebut (gunakan shortcut V [Selection]), seperti contoh berikut.

Di panel Properties, silakan bereksperimen dengan Joint, Caps, dan Dash yang berada dibawah pilihan judul “Stroke”. Perhatikan perbedaannya pada ketiga kenis Joint yang ada berikut (Miter Join, Bevel Join, dan Round Join):

Kelihatan nggak bedanya? Kalo kurang keliatan dicoba aja ya sendiri :p

Sedangkan pada Caps, juga terdapat 3 macam yaitu Flat Cap, Round Cap, dan Square Cap. Mengubah cap berarti menentukan ujung awal dan akhir path, apakah ingin berbentuk datar, bulat, atau persegi. Silakan dicoba juga yaa.. (yang ngasi tutorial males bikin skrinsyut :))

Yang menarik adalah Dash. Ketika checkbox Dash ditandai, maka terdapat textbox yang dapat diisi dengan value. Value tersebut menandakan panjang dash dan gap (jarak antar garis), yang dipisahkan oleh spasi. Jadi misalnya kita memasukkan dash value=10 3 7, maka pola garis yang terbentuk adalah 10 dash, 3 gap, 7 dash, 10 gap, 3 dash, 7 gap, dst. Hasilnya seperti berikut:

Selanjutnya jika kita ingin memodifikasi path-yang-masih-terlihat-kaku tersebut, gunakan shortcut A (Direct Selection) untuk mengubah-ubah posisi node, dan tekan Shift+C (Convert Anchor Point) untuk mengubah node sesuai bentuk yang Anda inginkan. Dengan sedikit modifikasi maka path saya jadinya seperti berikut: (silakan bereksperimen dengan warna/gradien stroke dan atur ketebalan/width-nya pada panel Properties)

Selamat bereksperimen! Mm, mungkin selanjutnya dibahas pengembangan dari strokes, yaitu Custom Strokes :)

*btw cara attach file biar kayak punya orang-orang gitu gimana yah? kok gw attach tapi cupu gitu bentuknya.. ehehe.. maklum pemula community server :p

Share this post: | | | |

Sepertinya belum banyak yang nulis tentang Exp.Design, hehe.. Jadi disini saya akan mencoba memfamiliarkan dunia “design” kepada komunitas yang pada umumnya developer, who loves coding more than anything (berlebihan :p). Tujuannya supaya kita sama-sama bisa punya pengetahuan dasar tentang design, karena “design” sangat penting dan erat kaitannya untuk membangun user interface yang menarik. Dan UI yang bagus juga merupakan hal yang dicari-cari dari aplikasi jaman sekarang, juga menjadi aspek penilaian penting untuk kompetisi-kompetisi kayak Imagine Cup, Next GenUX, atopun WPF Champion Competition. That’s why we all love WPF & Silverlight so much, don’t we? :p

Nah, berangkat dari sana, kita semua tahu bahwa tools designer untuk membuat aplikasi WPF dan Silverlight adalah Expression Blend. Lalu apa gunanya Expression Design dong?

• Apa itu Expression Design

Microsoft Expression Design adalah tool ilustrasi yang powerful untuk membuat grafik vektor maupun bitmap yang digunakan untuk project-project baik di Exp. Blend maupun Exp. Web. Expression Design merupakan bagian dari Microsoft Expression Suite dan bukan aplikasi standalone, dan saat ini cuman bisa diinstall di Windows XP/Vista (for Mac users, install vista di virtual machine-nya yaa..hehe).

• Penggunaan Expression Design

Biasanya Expression Design dipake untuk 2 hal: membuat custom web graphic terus diexport ke .JPG/.GIF/.PNG, serta untuk membuat custom UI control terus diexport ke dalam XAML dan bisa dimasukkan langsung ke dalam kanvas project WPF maupun Silverlight di Expression Blend. Jadi disini peran penting Expression Design adalah sebagai penyedia asset-asset grafik yang dibutuhkan :)

• Kelebihan utama

Seperti yang kita tahu juga, para designer umumnya jarang menggunakan produk Microsoft karena mereka lebih cinta dan lebih biasa menggunakan Photoshop, Illustrator, maupun Corel (ups :p). Nah kalo menurut saya sendiri semua tergantung kita mau belajarnya apa enggak. Karena kan Expression Design munculnya belakangan dan pastinya kalah populer dari tools design yang udah punya nama.

Yang menjadi kelebihan yang cukup ‘handy’ adalah bisa import file dari Photoshop dan Illustrator secara langsung ke kanvas Expression Design, so we have a nice coordination when we move back and forth between these 3 powerful tools :)

Nah tapi kelebihan utamanya menurut saya adalah fitur export ke native XAML secara langsung ke Blend supaya pembuatan aplikasi WPF/Silverlight bisa jadi lebih mudah. Untuk masalah exporting ini dibahasnya ntar aja kali ya :)

OK, diasumsikan udah pada install Expression Design, jadi langsung aja berangkat ke pengenalan main interfacenya:

Kalo udah pernah atau udah biasa megang dokumen .PSD, .AI, ataupun .CDR pasti cukup familiar dengan panel-panel yang ada. Selain itu yang cukup ‘handy’ lagi adalah shortcut yang dimiliki Expression Design kebanyakan sama dengan yang dipake buat di Photoshop, contohnya V untuk Selection , A untuk Direct Selection , P untuk Pen , B untuk Brush ,  T untuk Text , dan buat nge-Zoom tinggal scroll in/out mouse Anda, atau seperti di Expression Blend, tinggal gunakan zoom slider di sisi kiri bawah kanvas.

Selain tools diatas ada juga tools lain seperti shape tools (Rectangle, Ellipse, Polygon, Line), Slice, Gradient Transform, Scissors, Color Dropper, Pan & Zoom.

Di panel-panel sebelah kanan hanya ada 2 buah panel, yaitu panel Properties dan panel Layers. Properties dipake untuk mengubah-ubah appearance objek, mulai dari warna, stroke, blending mode yang digunakan, gradient fill, image fill, jenis brush yang digunakan, dsb. Sedangkan panel Layers untuk menampilkan daftar layer yang terdapat pada gambar.

Untuk mulai bermain-main dengan Expression Design, saya sarankan mulailah dari yang simpel-simpel, contohnya membuat strokes, brush, path, shapes, text, sampai nanti baru menanjak ke tingkatan yang lebih tinggi seperti pengaturan layer, clipping path, blending mode, exporting rules, gimana cara membuat UI custom control yang ciamik, dll.

So, bertahap yaa…

Oiya, satu hal lagi. Kalo udah bikin sesuatu di Exp. Design ini maka ekstensi filenya menjadi something.design

Cheers! :)

Share this post: | | | |

Sebenernya udah lumayan lama kebiasaan pake WL Writer alias Windows Live Writer buat nulis blog.. hehe Yang gw suka adalah karena gak perlu buka tab banyak-banyak di browser cuman buat nulis blog, berhubung ada banyak >> account blogger buat posting di Kapedeh (catetan kerja praktek anak IF ITB’05), account WP buat personal blog + blog biro kuliner, terakhir geeks blog. :D Selaen itu bisa langsung preview! manstab..

Tapi dengan noraknya, pemula seperti gw baru nyari nemu plugin-plugin laen yang cukup ga-jelas tapi bermanfaat, haha. Selama ini yang sering dipake paling plugins buat insert video, embedded flash, sama custom smiley. Mana pernah juga pake plugin insert map, kapan2 kali ya kalo lagi penting... hehe.

Ternyata banyak plugin laen, recommendednya:

1. Facebook Photos Plugin : lumayan membantu daripada upload ulang, hehe jadi tinggal gampang milih poto dari account fesbuk gw..

2. Event Plugin : menampilkan event (ya iyalaah..) Nih misalnya conto dibawah ini, hehe.. Ini biasa aja sih, bisa dibikin pake plugin Insert Table bawaannya WL Writer kok..

3. Polaroid Picture Plugin : nah ini lumayan keren nih, jadi tiap mo upload foto bisa dikasih efek polaroid gituh> frame+shadow+caption, diputer tilt-nya, conto:

4. Quote of the day : ini ga penting sih, apalagi gw juga bukan tipe orang yang menggandrungi kuot kuot, hihi.. tapi ya..bolehlah biar keliatan bijaksana skali2 Hasilnya kayak gini nih, ke-generate otomatis gituh...

Quote of the Day:
Life is an onion. You peel it off one layer at a time, and sometimes you weep.
--Carl Sandburg

5. Embedded Flash sama Silverlight Streaming : wuih, ini nih yang gw suka.. kalo embedded flash banyak lah yaa contonya, tapi skrg gw mo nunjukin silverlight streamingnya aja.. hehe the cool thing is, you can embed Silverlight application/videos directly, nih contoh gampangnya aplikasi Grand Piano yang udah jadi bawaan dari Expression aja, hihi..tapi ya ukurannya kepotong gitu..

(in case it's not working, you can see it from here)

kalo yang ini contoh video streamingnya, (*warning!! ini video tutorial hands-on-lab ttg ASP.Net sama silverlight 1,, berhubung ini video percobaan gw, jangan lama2 dengerin suaranya, kaco berat.. :D*)

6. InkBlog Plugin deh.. lumayan nih kalo misalnya lagi ga da kerjaan dan pengen keliatan keren gituh, ngeblog isinya coret2an tangan.... *halahh* :D

All plugins can be downloaded here, FREE.

Share this post: | | | |

Well, kurang lebih dalam 2 bulan ke depan gw akan magang jadi graphic designer plus plus (halah) di Microsoft Indonesia..

Okeh, hari ini memasuki hari ke-5 internship gw, dan kesimpulannya: super mantabb! haha.. Hari pertama, masih dengan culunnya berangkat dari rumah jam 1/2 7 (FYI work hour-nya mustinya 8.30-17.30),, dan jam 7 pagi gw udah nyampe di BEJ. Fuih, pacific place aja satpamnya belon pada dateng kali ya,, hehe.. So lesson number one: datengnya jam 9an aja, hihi.

Dan di hari pertama-kedua kerjaan gw cuman donlot-donlot tutorial silverlight 2 beta 2 dan update program-program SP1 sampe gedenya 1.5 GB. (btw waktu itu baru tau juga kalo udah launch Blend 2008 June preview sama deep zoom composer yang baru, dan chainernya makin membengkak ajah) haha, lama-lama bisa didepak kali ya kalo gini terus.. :p

Hari ketiga, sangat melelahkan rupanya. Soalnya ternyata ada latihan evakuasi se-tower-II BEJ. Which means going downstairs from the 18th floor! huee.. udah kaya olahraga massal, untung ga pake heels waktu itu..

Hmm.. it really is a nice experience though.

Minuman, pasti terjamin. makanan, wew janga ditanya. Ada yang rajin supply cemilan, sampe bilik kerja disini udah kaya warung :)

Kebetulan juga minggu depan si bos dan rekannya akan roadtrip keliling pulau jawa, jadi gw sempat membantu buat bikinin poster2 dan lainnya. Intinya sih minggu depan bisa kerja remote dari rumah, hehe.

Sounds like fun, terlebih dapetnya se-cubicle sama orang-orang hebat and the atmosphere's great! Terimakasiii...:)

Okeehh ga enak juga nih kadang2 kalo orang2 lagi pada serius kerja dan kerjaan gw malah blogging & chatting, hehehe. Let's get back to work...

Share this post: | | | |

Maksud sebenarnya sih, tadi gw abis salaman sama orang2-yang-beruntung-salaman-sama-Bill-G-dan-SBY. Jadi begitu ketemu tim Aksara diluar, langsuung deh dengan semangat salaman ama Desi, kak Octa, ka'Budi ama Rija. hahah.. mungkin mereka ga akan cuci tangan for the next 24 hours yaa (halah, berlebihan). Huaa.. jadi iri.. iri pengen makan di Sato shangrila :)) 

Tapi semogaa.. ketularan jadi jago coding+bisnis seperti Oom Bill, he3x.. Ini juga pertama kalinya sih ngeliat Bapak Presiden kita.. Masih sama kaya yang di TV kok, hi3x.

Anyway I like his opinion about open source, "The point is, you have to take a look at the whole thing. It's priceless, compared to the high quality product, the support we provided, and what makes you feel secure when using it" 

Gak persis gitu sih, apa gw salah denger ya? sebenernya tadi sempet merekam bentar, tapi kok gaptek ya minjem kamera orang,malah keapus rekamannya.. :(

Such a day. Excited, and exhausted at the same time.

Share this post: | | | |

Hoho, akhirnya menulis lagi disini, setelah kmarin akhirnya hanya berhasil cari pengalaman sampai di 10 besar ICup, huhu (oiya, selamat buat Arief dkk yang akan ke Paris!! whoaa.. envy you guys a lot :D ),, well.. there's nothing really new.. back to normal life, and i've got some new book cover project, hehe. Yup, dalam rangka membantu Himpunan tercinta yang tumben-tumbennya nulis buku (kereen.. kerenn..), dan tentunya sama kita-kita kru MIC itb.. ahaha..

Buku kali ini desainnya mirip-mirip sama yang Office PerformancePoint Server 2007 kmaren, karena emang setipe, jadi males memikirkan konsep baru lagi :) Pada download yaa..  

*gambarnya masi ngambil dari link blognya ka'Naren :))* 

 Dan doakan..doakan.. supaya buku Blend-bible-nya segera jadi.. (masih mengumpulkan niat :)

Share this post: | | | |

Yippiee.. hari ini gw terbangun dan mendapati ada 3 sms masuk. Pertama, ajakan buat dateng sidang LPJ & pelantikan kepengurusan HMIF (Himpunan Mahasiswa Informatika) ITB '08/'09, kedua, peringatan biar gak telat dateng LPJnya, ketiga, caci-maki buat dateng ke LPJ.

Haha.. yang terakhir boong deeng.. Sms terakhir dari temen sklompok gw, si Simon, nyuruh coding ternyata. Akh,,, tapiiiiii... codingnya sangat membuat semangat, karena tim gw, berhasil lolos jadi finalis 10 besar ImagineCup Indo kategori Software Design.

Uhuihihihi... hal itu berartii.. Kamis kita akan ke Jakarta, untuk presentasi, terus disaring jadi 4 besar, n then.... finally who's going to France?? Hyaa.. Semoga presentasinya nanti gak mengecewakan. Duh, jadi excited plus grogi bertemu finalis lain (halahh.. :p)

Oiya, FYI sebenernya agak2 kecewa, karena dari 8 tim yang dikirimkan ITB, yang masuk hanya 3 :( Penurunan dari tahun sebelumnya, huhu. Tim lainnya dari ITB adalah Tim Antarmuka (Arief, Dimas, Ella, Erga), dan Tim Screaming Tree (Oon, Shieny, Tina, Alsa). Selamat ya buat para finalis lain juga! hoho.. 

Keterangan lengkap pengumuman top 10 finalist bisa diliat di situs resmi icup indonesia, eniwei nama tim gw SYLALA Team, dengan project judulnya Grindawn.

Share this post: | | | |

Udah sekitar 2 bulanan ini gw dapet job baru, jadi tukang desainin cover buku. hehehe.. Sementara baru ngedisain doang sih, mungkin kapan2 gw yang akan nulis bukunya sendiri (halahh gaya, haha)

Well, dari judul pengarangnya aja udah jelas dari siapa gw dapet nih kerjaan, apalagi kalo bukan si bos yang makin lama makin lebih doyan Ms. Word daripada ama Visual Studio :D

Buku pertama, yang di sebelah kiri, desainnya emang sengaja bertema 'kartun' gitu, karena dalam buku yang overall ngebahas introduction to LINQ ini, eksplorasinya dianalogikan sama perjalanan ke sebuah 3 desa, yaitu LINQ to Object, LINQ to SQL, sama LINQ to XML. Terus dalam perjalanannya ituh, kita naek sebuah kereta kuda, maksudnya pake C#. (Liat gimana anehnya gambar kereta kuda bikinan gw, hahaha..)

Buku kedua, baru rilis 3 hari yang lalu, tentang Office PerformancePoint Server 2007. Pokoknya buku ini membahas penerapan business intelligence gitu, pake pemodelan, reporting, dsb yang gw-juga-gak-gitu-ngerti. hehe.. Mantaplah pokoknya :D

Semoga lain kali gw bisa dengan bangga memamerkan bukan hanya hasil desain cover doang, tapi buku bikinan gw,, doakan saja silverlight ato WPF, hihi.. Masa koord. divisi desain mic ga ada hasilnya, haha. Amiiiin....

Share this post: | | | |

Pertama-tama perkenalkan nama saya Umi Fadilah, biasa dipanggil umi, ume. Saat ini saya adalah mahasiswi tingkat 3 di Teknik Informatika ITB, dan sejak 2007 tergabung menjadi salah satu kru di Microsoft Innovation Center (MIC) ITB. Saat ini saya menjabat sebagai Head of Design Divison, salah satu dari 3 divisi utama di MIC selain Developer Division (dipimpin Anggri) dan IT Pro Division (dipimpin Fajar). Oleh karena itu, saya sangat tertarik di bidang desain, khususnya Expression Suite (prime focus on Exp. Design + Blend), WPF, dan Silverlight :)

Meskipun ternyata saya telah membuat blog ini sejak Desember 2007, namun nyatanya saya baru ingat sekarang, jadi inilah postingan pertama saya :p Semoga ke depannya blog ini bisa terisi dengan beberapa pengalaman bermain-main dengan salah satu diantaranya. Oke cukup segitu dulu perkenalannya, salam kenal!

Share this post: | | | |