Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Visuals
Webdesign

Menciptakan Instagram Retro Filter efek

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ade Khairul Umam (you can also view the original English article)

Dalam tutorial ini saya akan melihat dengan tepat bagaimana filter Instagram bekerja, sebelum menciptakan efek serupa di Photoshop. Saya juga akan memperkenalkan Anda ke beberapa properti CSS baru yang menarik yang akan memungkinkan kita untuk membuat filter gaya Instagram langsung di browser.

Ada banyak aplikasi foto vintage yang tersedia di pasar dari Hipstamatic ke kamera + tetapi sejauh ini yang paling terkenal dari semua aplikasi ini adalah Instagram; salah satu pemain asli yang diluncurkan pada September 2010. Tiga bulan kemudian pada bulan Desember telah mendaftar lebih dari 1 juta pengguna.

Lonjakan popularitas ini kemudian menyebabkannya diakuisisi oleh Facebook untuk $ 1 miliar yang dilaporkan. Lumayan untuk startup kecil sebanyak 13 orang.


Bagaimana Instagram filter kerja

Instagram memiliki berbagai filter yang berbeda untuk dipilih, mulai dari 'Lumo-fi' hingga 'Nashville'. Semua yang dibuat menggunakan berbagai metode, filter, dan efek. Kevin Systrom, salah satu pendiri Instagram menambahkan ini:

Ini benar-benar kombinasi dari banyak metode yang berbeda. Dalam beberapa kasus kami menggambar di atas gambar, di lain kami melakukan matematika piksel. Itu benar-benar tergantung pada efek yang kita inginkan. Misalnya, Lomo-fi benar-benar tidak lebih dari gambar dengan kontras yang dikuatkan.

Gambar di bawah ini menunjukkan berbagai efek filter yang digunakan oleh Instagram:

instagram filters
Gambar oleh Jessica Zollman / Creative Commons

Meskipun Setiap filter memiliki penyesuaian yang berbeda, tergantung pada jenis efek, proses sebenarnya untuk sebagian besar filter dapat dibagi menjadi enam langkah:

1. penyesuaian

Penyesuaian warna dan nada mungkin merupakan salah satu langkah paling penting yang membedakan setiap filter. Banyak karakteristik masing-masing filter dapat dicapai dengan menetapkan tingkat penyesuaian yang berbeda.

2. Kedalaman Field

Depth of field dapat didefinisikan sebagai "jarak antara objek terdekat dan terjauh dalam adegan yang tampak cukup tajam dalam gambar". Jika Anda paling terbiasa bekerja dalam desain grafis dibandingkan dengan fotografi, Anda mungkin akan mengenalinya sebagai bit di latar depan yang tampak tajam dan tajam dan sedikit di latar belakang yang tampak buram.

Dengan memfokuskan sedikit tajam pada subjek yang Anda potret dan membuat area sekitarnya buram, ini membantu menarik perhatian ke area yang ingin Anda sorot.

Gambar di atas menggambarkan sebuah contoh yang baik dari kedalaman lapangan. Tanaman di latar depan muncul dalam fokus sementara latar belakang tidak fokus dan tampak buram.

3. lensa suar Film Burn

Pada beberapa filter, Instagram menambahkan lapisan tambahan yang biasanya adalah suar lensa atau film buram. Menambahkan ini dapat menambahkan sedikit faktor wow ditambahkan ke gambar. Namun, ini harus digunakan dengan bijaksana karena terlalu banyak penekanan pada lensa suar / film yang terbakar kadang-kadang dapat membuat efek keseluruhan norak dan amatir.

Lihatlah ini pilihan lensa suar, semua yang menambah gaya vintage efek:

instagram film burn
Gambar oleh CG Arena

4. Goresan Efek Film Tua

Untuk menambahkan gaya vintage ke gambar dan memberinya nuansa kuno, tekstur overlay digunakan. Ini dapat berkisar dari goresan film yang sebenarnya hingga suara yang dihasilkan. Kebisingan terjadi ketika Anda mendapatkan variasi tingkat piksel dalam nilai warna yang mengurangi kejelasan gambar. Komputer yang menghasilkan suara statis adalah contoh ekstrim dari kebisingan.

5. Vinyet

Setelah penyesuaian, kedalaman lapangan dan kebisingan telah ditambahkan ke gambar, sketsa ditempatkan di atasnya, sekali lagi untuk memfokuskan perhatian pada konten utama gambar. Sketsa adalah teknik yang digunakan dalam fotografi yang mengurangi kecerahan atau kejenuhan gambar ke tepi gambar.

instagram Vigniette
Gambar milik Wikipedia

6. Menambahkan Bingkai

Akhirnya, bingkai ditambahkan untuk menambahkan kemewahan ekstra pada gambar. Bingkai sering kali terlihat pada gulungan bingkai lama atau gambar gaya polaroid asli. Mereka juga dapat bertindak sebagai tepi terkikis atau robek yang semuanya menambah kesan bahwa gambar tersebut adalah foto vintage yang otentik.


Filter Instagram biasanya memulai kehidupan di Photoshop. Dari sana mereka kemudian diprogram ke dalam C obyektif sebagai bagian dari aplikasi iPhone asli. Rekan-rekan instruktur memperluas hal ini :.

Filter kami adalah kombinasi efek - profil kurva, mode pencampuran, warna warna, dll. Bahkan, saya biasanya membuatnya di Photoshop sebelum membuat algoritme untuk melakukannya di telepon.


Menciptakan Instagram filter di Photoshop

Inilah yang akan kami buat - Anda dapat melihat efek sebelum dan sesudah menambahkan filter gaya Instagram kami:

Creating Instagram style filters with photoshop

Langkah 1: Buat Kanvas

Mulai dengan membuat kanvas persegi 600x600px dan beri warna latar belakang. Saya telah memilih untuk menggunakan warna biru Instagram asli untuk latar belakang saya. Tempelkan gambar yang Anda pilih ke kanvas Anda, kemudian ubah ukurannya dan pangkas gambar Anda jika perlu.

Langkah 2: Sesuaikan Warna

Sekarang saatnya untuk membuat warna dan nada penyesuaian untuk gambar. Melakukan hal ini dengan pergi ke 'Gambar' di menu atas dan memilih penyesuaian > kurva. Anda kemudian akan disajikan dengan pop up kotak di mana Anda dapat mengubah nilai-nilai ini.

Mulai dengan meningkatkan level hijau. Ubah hasilnya ke '30', misalnya. Gambar Anda sekarang seharusnya terlihat sedikit lebih hijau. Kami juga akan meningkatkan blues dalam gambar. Ubah output biru ke '100'. Gambar Anda sekarang harus terlihat cukup dicuci.

Harap dicatat bahwa ketika mengubah penyesuaian ini Anda dapat bermain di sekitar sampai Anda mendapatkan efek yang diinginkan untuk foto Anda. Setelah Anda melakukan ini, gandakan gambar yang baru Anda buat. Anda dapat melakukan ini dengan mengklik kanan pada layer gambar dan memilih 'Duplicate layer'.

Langkah 3: Membuat Kedalaman Field

Dengan layer duplikat Anda terpilih pergi ke Filter> Blur> Gaussian Blur, tingkatkan 'Radius' menjadi 5px dan klik 'OK'. Sekarang, ambil alat tenda bundar dan gambar lingkaran di sekitar area foto Anda yang ingin Anda fokuskan.

Setelah Anda melakukannya, buka Layer> Layer Mask> Hide Selection. Seharusnya sekarang telah membuat lingkaran topeng lapisan dari gambar buram.

Di panel lapisan, buka layer mask, tekan 'alt' dan klik pada layer mask. Kanvas Anda sekarang harus berubah ke layer mask. Pergi ke Filter> Blur> Gaussian blur dan blur mask dengan 30px. Sekarang ini harus membuat efek kedalaman bidang dengan subjek foto Anda dalam fokus dan latar belakang tidak fokus.

Langkah 4: Membakar Film dan Lens Flare

Lihatlah gambar Google atau situs gambar stok lainnya untuk pilihan suar lensa dan film yang terbakar. Setelah memilih flare / burn atau keduanya maka Anda dapat melapisinya di atas yang asli, pengaturan mode campuran film burn ke 'Overlay' atau mode lain seperti 'Screen'. Sekali lagi, bereksperimenlah dengan ini untuk melihat mana yang paling sesuai dengan foto Anda ..

Lensa flare juga dapat dicapai secara native di Photoshop dengan masuk ke Filter> Render> Len flare ... dan menentukan efek yang Anda inginkan.

Step 5: Membuat goresan Film

Tambahkan beberapa goresan film saham, atau buat suara Anda sendiri dengan pergi ke Filter> Noise> Add Noise kemudian bermain-main dengan blending mode untuk mendapatkan efek yang diinginkan.

Dalam hal ini saya memilih untuk mengatur gambar stok saya ke 'Multiply' dan telah menurunkan opacity menjadi 14%

Langkah 6: Menciptakan gambaran

Kami hampir pada akhir menciptakan efek filter gaya Instagram. Sebelum itu terjadi kita hanya perlu menambahkan sentuhan akhir. Untuk membuat vignette, tambahkan layer baru dan isi dengan warna hitam solid. Kemudian mengambil alat tenda bundar dan menggambar bentuk oval besar di tengah gambar dengan tepi oval hampir menyentuh sisi-sisi gambar.

Potong seleksi marquee dari hitam dengan menekan tombol 'delete' pada keyboard Anda. Kemudian, sekali lagi pergi ke Filter> Blur> Gaussian blur dan buramkan layer vinyet. Perbaiki vignette untuk memastikan bahwa sisi-sisinya sepenuhnya hitam dan tidak transparan. Setelah ini dilakukan, kurangi opacity yang sesuai. Saya telah menurunkan tambang menjadi 63%

Langkah 8: Tambahkan Frame

Bagian terakhir adalah menambahkan bingkai. Saya telah memilih untuk menambahkan tampilan gulungan film lama menggunakan kombinasi menciptakan perimeter persegi panjang gambar dan menggabungkannya dengan beberapa angka, huruf dan panah dari beberapa cuplikan stok gulungan film lama.

Anda juga dapat membuat beberapa efek robek yang menarik dengan mengunduh beberapa brush photoshop yang robek dan menggunakan tool layer mask dengan ini.

... Dan begitulah cara Anda membuat ulang filter gaya Instagram di Photoshop. Sekarang mari kita lanjutkan untuk membuat mereka dengan CSS.


Menerjemahkan Filter Instagram untuk Web

Meskipun saya tidak akan mengatakan bahwa menciptakan filter asli Instagram dalam CSS saat ini dimungkinkan, ada beberapa perkenalan ke dunia CSS baru-baru ini yang membuatnya hampir mungkin. Dengan bermain-main dengan sifat-sifat ini dapat dicapai untuk menciptakan efek serupa dengan sedikit eksperimen.

Saya akan memperkenalkan Anda kepada beberapa dari mereka yang mudah-mudahan akan membantu Anda memulai dan dalam perjalanan Anda.

Filter

Saat ini browser berbasis webkit yang hanya mendukung properti ini, walaupun dengan sedikit keberuntungan akan dilaksanakan di semua Mayor browser modern segera. Filter memberi kemampuan untuk menambahkan efek gaya Photoshop ke gambar apa pun melalui kekuatan CSS. Filternya adalah sebagai berikut:

  • Mengaburkan
  • Skala abu-abu
  • Sepia
  • Kecerahan
  • Kejenuhan
  • Rona putar
  • Kontras
  • Membalikkan

Meskipun salah satu dari efek di atas dapat berguna untuk jenis ini, saya akan melihat dua yang paling efektif ketika meniru gambar gaya Instagram. Untuk detail lengkap tentang markup karena menggunakan properti ini, Anda dapat melihat posting blog CSS3 filter ini.

Kontras

Kontras adalah perbedaan warna dan cahaya antara bagian-bagian suatu gambar. Peningkatan ini sering dapat menghasilkan gambar yang lebih cerah dan lebih hidup, sedangkan mengurangi gambar dapat menyebabkan gambar yang lebih pudar.

Mengaburkan

Filter blur sangat berguna saat membuat ulang bidang dalam gambar. Hamparkan dua salinan dari gambar yang sama dan kemudian tambahkan blur sekitar 5 atau 6 piksel ke gambar terdepan. Kami kemudian dapat menggunakan CSS masking untuk menutupi bit yang ingin kami lebih fokus, dengan mengungkapkan gambar tajam yang mendasari.

CSS Masking

CSS Masking memungkinkan untuk menentukan elemen grafis, bentuk atau file lain untuk digunakan sebagai wilayah kliping. Digunakan bersama dengan filter blur Anda dapat membuat beberapa efek medan yang sangat menarik.

Compositing

Kembali pada tahun 2012 saya melihat tweet yang menyebutkan bagaimana itu akan luar biasa jika Anda bisa menerapkan mode warna gaya Photoshop ke gambar menggunakan CSS. Nah, sekarang, berkat proposal yang diajukan oleh Adobe, mungkin segera mungkin! Proposal untuk 'CSS compositing' dan digambarkan sebagai 'Blending and compositing for the web'.

Ini belum diterapkan di semua browser, tetapi Adobe telah mengumpulkan contoh browser yang mengimplementasikannya dan memungkinkan Anda untuk bermain-main dengan proposal mereka. Anda dapat mengetahui lebih lanjut di Adobe Compositing. Dengan ini datang semua mode pencampuran Adobe akrab, seperti layar, overlay dan berkembang biak.

Gradien CSS

Gradien CSS dapat digunakan untuk membuat nada overlay yang benar-benar bagus untuk foto bergaya Instagram Anda. Menggunakan gradien seperti kuning ke transparan ke merah muda dan kemudian mengubah opacity ini kadang-kadang dapat memberikan warna yang bagus, membuatnya terasa retro dan bertindak dengan cara yang mirip dengan film terbakar.


kesimpulan

Sepertinya semua orang saat ini menggunakan aplikasi seperti Instagram untuk memberikan foto mereka sihir retro. Tidak ada keraguan tentang itu; mereka membuat foto Anda terasa lebih hangat dan menambahkan lebih banyak karakter ke gambar yang biasanya membosankan.

Ketika popularitas terus meningkat, lebih banyak efek dan filter akan diperkenalkan. Dengan memahami konsep dasar tentang bagaimana efek ini tercapai, Anda sekarang harus dapat membuatnya untuk situs web atau aplikasi Anda menggunakan Photoshop. Pada waktunya, saya harus membayangkan CSS akan memiliki berbagai macam properti yang akan memungkinkan kita memanipulasi gambar dengan cara yang sama. Kabar baiknya adalah bahwa dengan menggunakan beberapa properti yang telah saya sebutkan hari ini, Anda pasti dapat mulai bermain-main dengan beberapa efek gaya Instagram yang menarik sekarang.

Apakah Anda tahu tentang properti CSS lainnya yang mungkin berguna untuk membuat efek Instagram? Beri tahu saya di komentar di bawah ini!


Tautan, Bacaan, dan Sumber Daya Lebih Lanjut

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.