CSS3Ps - Convert Objek di Photoshop menjadi CSS3

Hai sobat,Mau tau bagaimana caranya Costum shape/verktor yang kita buat di photoshop yang kita buat,di Convert menjadi CSS3? ini dia CSS3ps.


CSS3Ps adalah web/ sebuah cloud berbasis plugin photoshop yang dapat memproses sebuah layer dari photoshop menjadi CSS3. kita dapat memilih beberapa layer dan group layer dan mengkonversi objek pada layer tersebut. Apa saja yang dapat di convert?

---

-Color overlay
-Stroke/border
-Inner Shadow
-Inner Glow
-Drop Shadow
-Outer Glow
-Gradient Overlay
-Border-radius
-Box-size
-Multi layer

---

(sejauh yang saya coba hanya itu yang berfungsi)
menggunakan gambar,text dan efek menggunakan pattern/pola tidak akan berfungsi saat kita konversi.

hanya sebatas itukah? ya karena sayapun baru mencoba,yang pasti berhasil adalah vektor yang menggunakan pen tool dan costum shape,jika kita coba menggunakan brush, pencil,text atau objek gambar yang ukuran'a tidak pasti(tidak beraturan),maka akan gagal dan yang css keluar hanya tinggi dan lebar(height and width).fail =__=v

Untuk costum shape,masih ada syaratnya,yaitu bentuk beraturan dan masih masuk akal oleh css3.
Misalkan saya buat sebuah objek bintang dan segilima,setelah saya konversi menjadi css3 hasilnya malah menjadi percegi panjang.jadi intinya hanya objek yang ukuranya beraturan dan dapat dihitung oleh script yang dibuat oleh CSS3ps.

Untuk hasilnya support pada semua browser yang mendukung CSS3 serta mendukung pada Windows atau Mac OS X dan Photoshop CS3,CS4,CS5 dan CS6.

Dan perlu saya beritahu,menggunakan plugin ini GRATIS dan memerlukan Koneksi Internet untuk mengconvertnya pada photoshop CS3 dan CS4,sedangkan untuk versi CS5 dan CS6 saya kurang tahu dia sifat'a online,atau langsung di photoshop'a.


Penasaran bagaimana cara menggunakan Plugin ini?

kamu bisa langsung lihat tutorial'a disini
Atau mengikuti petunjuk dari saya dibawah ini.

---

Karena saya sendiri masih menggunakan CS4,jadi saya buat tutorial untuk versi CS3 dan CS4 saja.

Pertama,sobat Download plugin'a sesuai dengan versi photoshop yang kamu punya.

Download untuk Adobe Photoshop CS5 and CS6
Download untuk Adobe Photoshop CS3 and CS4


Kalau sudah,segera buka photoshop,buat sebuah layer dengan ukuran apa saja,lalu buatlah sebuah objek menggunakan costum shape (bebas,mau 1,2,3 atau lebih)

Setelah itu tambahkan Style pada objek tersebut(drop shadow,border,gradient,dll)

kalau sudah, klik menu "

File -> Scripts -> Browse...

Setelah itu Pilih File yang tadi kita download,lalu klik Load

Setelah itu akan otomatis membuka default browser kamu,dan menunggu prosesnya selama 20 detik

Dan untuk hasilnya bisa kamu lihat seperti gambar dibawah ini.sudah ada preview kode CSS3 lengkap serta bentuk objeknya.

Pada hasil contoh dibawah pada objek yang bewarna hijau,semula saya buat bentuk segilima,tapi hasilnya menjadi persegi panjang TTATT.#fail

Selesai deh,mudah bukan?


Kalau menurut saya plugin ini hanya media alternatif /mirip CSS3 generator untuk membantu kita dalam membuat style,bukan membuat bentuk" aneh/sulit sesuka kita,tapi bedanya disini kita menggunakan Photoshop,jadi yang memang sudah terbisasa menggunakan photoshop,pastinya lebih mudah untuk membuat style CSS3 yang kita inginkan.

Sekian trik dari saya,semoga bermanfaat,terima kasih :)