Selasa, 01 Maret 2016

7 Plugin Photoshop Yang Sebaiknya Anda Tahu Selasa, 01 Maret 2016

Apa itu plugin? Plugin adalah software tambahan yang sifatnya menambah kegunaan software induknya. Software induk yang saya bicarakan disini adalah Adobe Photoshop. Maka plugin yang akan kita diskusikan disini berarti software tambahan yang menginduk pada Photoshop dan memiliki kegunaan spesifik, biasanya memudahkan cara kerja kita dalam mengedit sebuah foto atau paling tidak membuat kita lebih mudah mencapai efek tertentu semisal membuat efek bokeh, hitam-putih atau frame yang indah. Kalau anda suka mengutak-atik foto di Photoshop, sudah saatnya anda mengenal beberapa plugin yang saya pilihkan disini.

1. 3D Invigorator


Plugin Photoshop kali ini adalah buatan Digital Anarchy. Plugin ini mampu menyederhanakan proses 3D yang rumit dan kompleks. Aplikasi grafis Photoshop sendiri sebenarnya telah dilengkapi dengan teknologi mesin 3D dan rendering, namun demikian kehadiran plugin ini membuka peluang bagi tangan-tangan kreatif untuk selalu berkarya dengan efek-efek digital kreatif. Plugin ini dilengkapi dengan editor objek yang cukup sederhana. Sebuah tool mirip pensil tersedia guna membantu menggambar dan mengedit bermacam bentuk objek.

Apakah gratis? ya tentu saja dalam versi trial sebelum anda membelanjakan $199 untuk plugin hebat ini.


2. Blow Up 3


Plugin Photoshop yang ditujukan untuk para desaner dan fotografer ini memungkinkan penggunanya membuat pembesaran dalam bentuk pin dari sebuah foto tanpa kehilangan kualitasnya. Kemampuan serupa mungkin dimiliki Photoshop dengan filter bicubisnya, akan tetapi BlowUp memiliki algoritma sendiri yang lebih maju dari filter bawaan Photoshop. Dengan plugin ini pengguna bisa mendapatkan gambar-gambar akurat tanpa ceceran-ceceran kekurangan di sana-sini. Plugin ini bisa disebut sebagai perangkat luar biasa bagi para desainer yang biasanya mengeluh soal kualitas gambar buruk dari klien.

Plugin buatan Alien Skin ini ditawarkan seharga 199 US Dollar. Namun jangan khawatir, anda bisa mencobanya sebelum membelinya, sebab tersedia versi free trial, alias coba-coba gratisannya.


3. CSS Hat


Dengan berslogan “mengubah layer style pada Photoshop menjadi CSS3 secara instan”, plugin keluaran CSS Hat ini ditawarkan cukup tinggi seharga $39.99. Bagi para desainer website tentu tidak asing dengan CSS3, nah kehadiran plugin ini dibuat untuk itu. Cara penggunaannya? Anda pengguna hanya perlu melakukan klik pada sebuah layer yang telah didesain dengan bebera style, sebuah markup akan segera muncul, nah tinggal copy sajalah itu.


4. CSS3PS


Ini adalah plugin gratisan dari CSS3PS yang diperuntukkan bagi para pengguna photoshop yang berkarir di dunia desain website. Menurut pembuatnya, plugin ini akan memudahkan pengguna photoshop mengkonversi layer-layer pada pekerjaan grafis mereka menjadi layer-layer CSS3. Cara kerja plugin ini adalah menggunakan metode cloud untuk melakukan kalkulasi yang dibutuhkan ketika mengkonversi layer-layer pekerjaan grafis Anda menjadi layer-layer CSS3. Plugin Photoshop CSS3PS ini dilengkapi dengan kemampuan efek render yang hidup.

Silahkan gunakan plugin ini dan lihat bagaimana drop-shadows, strokes, outer glows, teks dan rounded corner semuanya terkonversimenjadi CSS3 secara otomatis. Daripada menghabiskan banyak waktu buat coding, plugin ini akan menghemat segalanya.


5. Dream Suite Ultimate


Plugin ini menyediakan hampir semua kebutuhan pembuatan effek-effek tekstur dan 3 Dimensi, koreksi tone warna dan juga efek-efek border. Memang tidak murah, $199 ditawarkan oleh Auto FX Software bagi para fotografer pengguna Photoshop. Sesuai harganya, cakupan effek yang luas akan membuat anda bebas bereksperimen dengan bermacam efek yang anda inginkan.


6. Fluid Mask 3


Ini adalah plugin photoshop untuk mempermudah proses masking dari pengembang plugin photoshop Vertus. Editing image apa saja pada software desain grafis apapuun, tidak lepas dari proses dan teknik masking. Demikian juga pada photoshop, masking seolah menjadi seni tersendiri. Meski Photoshop telah diperkaya dengan tool masking bawaan pada versi CS5 dan CS6, tetap saja masih banyak ruang guna menambahkan perangkat-perangkat tambahan guna memperkaya dan meningkatkan efektifitas pekerjaan.

Masking pada bagian objek rambut biasanya selalu rumit. Nah, pada bagian masking inilah, keberadaan plugin yang dibanderol dengan harga $149 ini sangat membantu. Fluid Mask menjadikan proses masking pada area-area rumit menjadi cepat, efisien dan relatif lebih mudah. Coba dulu versi trialnya yang gratis sebelum membeli.


7. Fractalius


Apakah anda pengguna aplikasi Photoshop pecinta model gambar sketsa? Jika iya pasti anda pernah dong bermain-main dengan efek-efek yang menghadirkan gambar menjadi sketsa. Bagi para desainer dan seniman pengguna Photoshop, RedField menghadirkan plugin ini yang mampu memaksimalkan penggunaan pattern-pattern fraktal sehingga menghasilkan karya digital bagai sketsa sebuah pensil saja.

Oh ya, plugin ini dikemas dengan harga 39.90 USD saja.




Apa Itu Framework?

Framework atau bahasa indonesianya kerangka kerja adalah sebuah software untuk memudahkan para programmer membuat aplikasi atau web yang isinya adalah berbagai fungsi, plugin, dan konsep sehingga membentuk suatu sistem tertentu. Dengan menggunakan framework, sebuah aplikasi akan tersusun dan terstruktur dengan2 rapi.

Namun, menggunakan framework bukan berarti kita bebas dari pengkodean. Kita sebagai pengguna/programmer menggunakan variabel dan fungsi-fungsi yang ada di sebuah framework itu. Karena itulah, kerja kita bisa menjadi efektif karena tidak harus membuat fungsi-fungsi lagi. Untuk lebih memahaminya, anda bisa membaca cerita berikut.

Rahman adalah seorang web programmer. Dia menerima pesanan sebuah proyek website. Lalu dia mengerjakannya dari mulai mendesain sampai sistemnya. Semua kode-kode fungsi & konsep yang harus ada di sebuah website semuanya ia buat. Mulai dari kode untuk postingan, menu, paginasi, dan sebagainya. Alhasil, pesanannya pun berhasil diselesaikan.

Perusahaan yang memesan merasa puas dengan hasil website Rahman. Lalu, perusahaan itu membuat kontrak dengan Rahman untuk membuat proyek website lainnya1.

Kemudian, tibalah waktu untuk membuat proyek website yang kedua. Rahman mulai mengerjakannya lagi. Diawal pengerjaannya, Rahman menyadari bahwa ada fungsi-fungsi tertentu yang harus selalu ada dalam sebuah website. Misalnya seperti fungsi postingan, paginasi dan lain-lain.

Karena itulah Rahman kembali membedah proyek website pertama yang telah berhasil dibuat. Lalu dia memeriksa kembali kode-kode untuk fungsi-fungsi tertentu dan mengumpulkannya menjadi satu untuk digunakan di proyek kedua yang akan dikerjakannya.

Nah, kumpulan kode fungsi-fungsi tertentu itulah yang disebut sebagai framework. Setiap bahasa pemrograman bisa dibuat frameworknya, jadi tidak hanya untuk website saja.

Sejauh ini, framework untuk pemrograman website yang sering digunakan adalah framework php dan framework css. Contoh framework php adalah CodeIgniter dan Zend Framework. Sedangkan, contoh framework css adalah Bootstrap

Semoga bermanfaat.

Google Web Designer Untuk Desainer Web

Ada kabar yang sangat baik bagi seorang web designer dan atau web developer. Yaa, Google telah meluncurkan sebuah Software bernama “Google Web Designer” .

Google Web Designer adalah sebuah software yang dibuat dengan berbagai fitur untuk memudahkan anda membuat desain web modern dan interaktif tanpa harus 100% memanipulasi desain dengan kode CSS. Alat ini membantu anda untuk seminimal mungkin menggunakan kode CSS.

Tools ini ditujukan untuk para ahli dan menengah dalam membuat konten web berbasis HTML-5, Desain responsive, Iklan dan masih banyak lagi. Google web designer memungkinkan anda dengan mudah membuat iklan untuk tampilan PC dan seluler. Hal ini sangat membantu pengiklan online untuk membuat banner dan animasi iklannya.


Fitur Google Web Designer

1. Modus 2 Animasi (Two Animation Modes)
Modus Langsung : Memungkinkan anda membuat animasi satu demi satu gambar dan secara otomatis akan ada frame diantaranya.
Modus Tingkat lanjut : Menganimasi tiap elemen dengan menggunakan layer, dan dengan mudah mengganti lokasi elemen.

2. Desain 3 Dimensi (Full 3D Authoring Environment)
Membuat dan memanipulasi konten 3D melalui sebuah pengurutan/array dalam tools dan dengan kekuatan CSS3. Memutar objek dan bahkan desain 2D, memvisualisasi transformasi dan translasi 3 dimensi sesuai kebutuhan anda.

3. Tampilan Desain Dan Tampilan Kode (Design View And Code View)
Walaupun alat visual sangat membantu, itu tidak akan pernah dapat mewakili kreatifitas, imajinasi dan visualisasi anda secara penuh. Oleh karena itu, dalam setiap pembuatan desain secara visual, anda dapat melihat kode-kode CSS yang membangun desainnya secara otomatis dan melihat perubahan kode dalam setiap pembaruan desain.

4. Alat Ilustrasi (Illustration Tools)
Untuk menambahkan sebuah elemen atau tag html baru, anda dengan mudah dapat membuatnya dengan menggambarnya dengan menggunakan Tag tool.

5. Mudah Membuat Iklan (Easy Ads Wokrflow)
Anda dapat dengan mudah membuat iklan yang dapat diterbitkan dalam platform atau perangkat apapun (Responsive). Pilih dari DoubleClick Studion atau AdMob, atau dengan Generic Option untuk membuat konten dalam jaringan iklan apapun. Tidak menggunak koding apapun.

Nah, itulah fitur-fiturnya. Anda bisa mendownload softwarenya yang masih versi beta ini di http://www.google.com/webdesigner

Semoga bermanfaat

7 Software Gratis Untuk Design Web

Jika anda menjadi seorang programmer, anda tidak akan terlepas dari yang namanya software & tool (Alat) untuk membantu anda bekerja. Sama seperti tukang bangunan yang membutuhkan palu, paku, sekop dan lain-lain untuk membangun rumah. Tanpa menggunakan alat-alat itu, apakah sebuah bangunan akan selesai ?.
Begitu pula dengan web programmer. Ketika mengerjakan sebuah proyek website, Seorang web developer membutuhkan banyak bantuan software dan tool agar bekerja lebih mudah, efektif dan efisien. Nah, salah satu jenis software yang dibutuhkan seorang web programmer adalah Source Code editor, yaitu software untuk memudahkan anda mengotak-ngatik kode yang membingungkan. Berikut ini adalah software-software pilihan yang saya rekomendasikan.

1.  Notepad++
Notepad++ adalah evolusi dari editor teks notepad biasa yang sudah ada sebagai software bawaan di OS microsoft windows. Notepad++ dikhususkan sebagai software untuk membantu para programmer dalam mengedit kode dengan membedakan kode-kode tertentu dengan warna. Sofware pengedit kode ini mendukung lebih dari 50 bahasa pemrograman yang ada. Silahkan [klik disini] untuk mendownload softwarenya.



2.  Sublime Text
Sublime Text adalah software pengedit skrip yang –menurut saya- paling user friendly, maksudnya mudah digunakan dan membuat anda sangat nyaman ketika mengedit kode. Di Sublime Text, anda juga bisa memilih tema editor dan warna-warna untuk suatu jenis kode/bahasa agar tidak jenuh. Anda juga bisa mengatur agar hanya file dalam sebuah folder saja yang ditampilkan di sidebar untuk diedit. Siapapun akan suka ketika bekerja dengan Sublime Text. Kelemahannya, Sublime Text tidak mendukung bahasa pemrograman sebanyak Notepad++. Untuk Mendownloadnya, silahkan kunjungi situs


3. Adobe Dreamweaver
Dari segi fitur dan fasilitas, Adobe Dreamweaver lebih lengkap dari semua editor yang saya tulis disini. Adobe Dreamweaver adalah sebuah software milik Adobe yang memang dikhususkan untuk membuat website. Bahkan, dengan software ini anda bisa mendesain sebuah website tanpa harus menyentuh kode HTML dan CSS. Dreamweaver membedakan kode dengan warna-warna terang. 

Dreamweaver juga mendukung sangat banyak bahasa pemrograman, lebih banyak dari notepad++.
Sebenarnya, Adobe Dreamweaver tidak bisa disebut hanya sekedar editor kode. Adobe Dreamweaver lebih cocok jika kita sebut sebagai software website builder (Software pembuat website). Namun, karena kelengkapan fasilitas itulah, software ini menjadi berat. Tidak cocok untuk komputer dengan spek Processor dan RAM atau memori yang kecil.

Sebenarnya Adobe Dreamweaver tidak digratiskan, tapi sudah ada banyak sekali crack-annya yang tersebar. Silahkan [klik disini]. Jika tidak bisa, silahkan cari di google dengan keyword “Adobe Dreamweaver with full crack”


4. Komodo Edit
Komodo edit adalah software pengedit kode yang mendukung berbagai bahasa pemrograman seperti PHP, Python, Ruby, JavaScript, Perl, Tcl, XML, HTML 5 dan CSS 3. Komodo edit juga dilengkapi dengan pewarnaan tiap kode yang bisa dirubah-rubah, pengecekan latar belakang kode, dan auto-complete. Komodo edit juga menyediakan versi berbayar untuk fitur yang lebih lengkap. 


5. KompoZer
KompoZer adalah Software pengedit kode yang diberdayakan oleh Mozilla. KompoZer merupakan sebuah sistem autorisasi web lengkap yang menggabungkan manajemen file web dan pengedit halaman web WYSIWYG yang mudah digunakan. KompoZer juga diarahkan untuk pengguna non-teknis yang kurang ahli dalam HTML dan kode web lainnya.

Walaupun tidak selengkap Adobe Dreamweaver, Software ini juga menyediakan fitur mendesain sebuah halaman web secara otomatis. KompoZer mendukung 21 bahasa pemrograman, integrasi manajemen file via FTP, tab pengeditan, Color picker dan dukungan untuk form, table dan template.



6.  JEdit
Pengedit kode yang satu ini lebih dikhususkan untuk para programmer yang sudah mapan, alias sudah cukup ahli. Kurang cocok untuk pemula. JEdit menghighlight sampai 130 bahasa pemrograman. JEdit juga menyediakan fitur yang memungkinkan anda mengkostumisasi tampilan toolbar dan statusbar sesuka hati anda. 

Anda juga bisa copy dan paste kode dengan clipboard yang tak terbatas. 


7.  TouchCode
TouchCode adalah pengedit kode pemrograman yang dikhususkan untuk smartphone. Pengedit kode ini memungkinkan anda bekerja sebagai web programmer kapanpun dan dimanapun. Sekarang, TouchCode baru tersedia hanya untuk Android. Untuk tingkat smartphone editor, TouchCode mempunyai Fitur-fitur keren seperti Highlighting kode, kemampuan untuk menjalankan skrip, integrasi sebuah akun FTP, sinkronisasi file, dan masih banyak lagi.


Itulah alat-alat yang bisa anda gunakan untuk mengedit kode pemrograman, terutama pemrograman web. Selain yang terakhir, Semuanya insyaalah cocok di OS manapun karena sebelum saya tulis, saya cek dulu compability-nya. Silahkan pilih yang lebih anda sukai. Saya pribadi lebih senang menggunakan Sublime Text karena lebih ramah pengguna. Bila anda masih seorang pemula web programmer, saya sarankan untuk menggunakan Adobe Dreamweaver karena fasilitasnya yang lengkap akan sangat membantu anda.

Namun, jika ingin yang lebih cocok dan klop dengan anda, silahkan coba satu persatu. Semoga bermanfaat.

Mengenal Apa Itu CSS Dan Bagaimana Menggunakannya

Apa Itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke  CSS3.

CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.

Sebagai blogger, Anda juga harus tahu apa itu CSS dan bagaimana menggunakannya agar mudah untuk merancang blog anda. Kode CSS membuat pembaca blog kita menjadi nyaman dan betah berlama-lama di blog kita sehingga pageviews situs kitapun meningkat. Namun, itu semua tergantung bagaimana kita menggunakannya sehingga bisa memikat pengunjung. Untuk itulah serial tutorial ini dibuat :) .

PENGENALAN DASAR
Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :

Body {background-color: white;}
‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.

CARA-CARA PENGGUNAAN CSS
Untuk latihan penggunaan CSS, langkah pertama yang harus anda lakukan adalah membuat file  dengan menggunakan Software kode editor seperti Notepad, lalu namai file dengan format ‘.html’. Lalu praktekkanlah cara-cara berikut ini. Ada 3 cara untuk menggunakan kode CSS di situs Anda.

1. CSS sebagai atribut/elemen/bagian dari tag HTML.

Oke, sebagai contoh, lihat gambar screenshoot kode CSS di bawah ini:

Div’ adalah tag html/Mark up yang dihiasi oleh kode css. kode cssnya adalah ‘style =’ padding: 5px 20px; … ‘. Cara ini biasanya dipakai jika kode cssnya sedikit.

2. CSS dalam tag <style type=”text/css”> (Kode CSS) </ style>.


Kode css terletak antara tag ‘style’ yang biasanya diletakkan dibawah elemen <title></title>(Tapi, tidak untuk gambar ini). Dengan cara ini anda harus menentukan nama selektor. Pada gambar diatas, selektornya adalah ‘.download’.

3. CSS sebagai file terpisah.

Kode pada gambar diatas adalah kode html untuk memanggil kode css yang terpisah. Kode itu biasanya diletakkan dibawah elemen <title></title> pada sebuah file html. Dalam cara 3 ini, kode css berada pada file .css yang dibuat dengan cara yang sama yaitu dengan sofware notepad, namun diberi format .css.

Untuk Latihan cara 3 ini silahkan anda buat folder. Dalam folder itu anda buat lagi file .html, misalnya latihan.html . Lalu buat file css-nya misalnya style.css.

Dalam file latihan.html, silahkan ketikkan kode dibawah ini :
<html>
<head>
<title>Latihan</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
</head>
<body>
<div class=”download”>
<a href=”#”>Download</a>
</div>
</body>
<html>
Simpan, lalu buka di browser. File .html anda belum dihias karena kita belum menambahkan kode css kedalam file style.css. Jadi, silahkan masukkan kode seperti dibawah ini, tentu anda bisa merubah-rubahnya :

 
.download {
padding:5px 20px;
background:#000;
border:1px solid auto;
text-transform:uppercase;
font-size:20px;
}
setelah itu simpan, lalu refresh file latihan.html yang sedang dibuka di browser

Keterangan :
Cara 1 dan 2 sebagian besar digunakan dalam blog blogspot/blogger. Sedangkan, Cara 3  biasanya digunakan dalam situs web berbasis wordpress ataupun yang lainnya, karena membutuhkan ruang untuk menyimpan file css.

Jika menggunakan cara2 dan 3, Anda harus melengkapi tag html yang akan anda hias dengan atribut ‘id’ atau ‘class’. Ini adalah  2 cara untuk penamaan selektor pada kode css. Jika menggunakan atribut ‘id’ (misal: <div id=”download”></div>), maka selektor dalam kode cssnya adalah sebagai berikut :
#download {
Properti:nilai;
}
Sedangkan, jika menggunakan atribut ‘class’ (misal:<div class=”download”></div>), maka selektor dalam kode cssnya adalah sebagai berikut :
.download {
Properti:nilai;
}
Dengan kata lain, hanya dibedakan dengan tanda “#” dan “.” .

Nah, lalu jika anda ingin menghias tag tertentu dalam file html, misalnya seluruh tag h1 yang ada, Maka anda dapat menuliskan selektornya tanpa menggunakan tanda apapun. Seperti ini :
h1 {
properti:nilai;
}
Jika anda masih ada yang belum ngerti dengan penjelasan saya diatas, silahkan ditanyakan lewat komentar.

Sekian dari saya. Semoga bermanfaat dan selamat belajar