Pos Harian3: Design

Showing posts with label Design. Show all posts

Sunday, December 25, 2016

Membuat efek dispersion di photoshop

Didalam tutorial ini kita akan membuat efek foto dispersion di photoshop. Efek ini sudah sering kita lihat di berbagai situs yang membahas tentang tutorial photoshop yang ada di internet.

Seperti namanya efek dispersion (pembubaran), efek ini akan membuat sebuah gambar yang sebagian dari gambar tersebut menyebar. Dispersion effect bisa dibuat dengan beberapa teknik sederhana di photoshop
Berikut ini adalah efek foto dispersion yang akan kita hasilkan.

efek dispersion, tutorial photoshop, dispersion photoshop

Aplikasi: Adobe Photoshop CS6
Waktu: 25 Menit
Tingkat Kesulitan : Menengah

Membuat Efek Foto Dispersion di photoshop

Langkah 1
Buka foto yang akan kita berikan efek dispersion ini di photoshop (Ctrl+O).
Seleksi gambar model, karena di sini kita menggunakan foto wanita dengan background warna, kita bisa menggunakan Magic Wand Tool (W).
Aktifkan Magic Wand tool, klik pada bagian luar foto untuk mendapatakan seleksi.

Kemudian balikkan seleksi tadi dengan pilih menu Select-Inverse atau menekan Ctrl+Shift+I.

Untuk mendapatkan hasil seleksi yang bagus, gunakan fungsi Refine edge dengan pilih menu Select-Refine edge atau Ctrl+Alt+R.
Sesuaikan komposisi refine edge seperti berikut ini.

Sapukan brush pada bagian yang telah ditandai dengan warna merah untuk merapikan seleksi pada rambut.
Setelah pilih Ok maka kita akan mendapatkan layer baru.

Langkah 2
Aktifkan Move tool (V), lalu geser foto ini ke kanan, karena yang akan kita beri efek dispersion adalah bagian belakang foto.

Langkah 3
Pada langkah ini kita akan memberi background pada foto.
Buat layer baru di atas layer background, kemudian aktifkan Gradient Tool (G)

Tarik tool ini dari kiri ke kanan dengan tipe linier gradient.

Langkah 4
Kembali ke layer model kita, lalu tambahkan layer mask untuk layer ini.

Duplikat layer model ini dengan menekan Ctrl+J di keyboard.

Langkah 5
Pergi ke layer model yang dibawah.
Pilih menu filter-Liquify.
Gunakan Forward Warp tool.
Sapukan tool ini untuk menarik gambar ini.

Setelah itu aktifkan Paint Bucket tool (G) dengan warna hitam.
Lalu kita gunakan untuk untuk mengubah warna mask menjadi hitam, sehingga layer kita akan terlihat seperti berikut ini.

Langkah 6
Aktifkan Brush tool dengan tipe Rough Round Bristle, ukuran menyesuaikan foto.
Pada foto ini ukuran yang saya gunakan 600 Px

Untuk layer yang dibawah gunakan brush dengan warna putih, Untuk menampilkan file yang telah disembunyikan oleh warna hitam tadi. Sapukan secara perlahan pada layer ini.

Sapukan terus sehingga akan terlihat seperti ini.

Jika untuk layer yang dibawah kita menampilkan layer yang tersembunyi dengan warna putih, untuk layer yang diatas masih dengan brush yang sama namun dengan warna hitam.
Sehingga akan terlihat seperti ini.

Tambahkan beberapa adjusment layer untuk memberi kesan warna yang lebih bagus.
Untuk menambahkan adjusment layer klik icon adjusment layer yang ada dibawah layer box.
Adjusment layer yang akan kita tambahkan adalah Hue/saturation, Exposure dan Color balance.

Final.
Inilah hasil akhir yang kita dapatkan.

Friday, December 23, 2016

Cara Mengoptimalkan Desain Website Dengan Foto Potret Berukuran Besar

Web Design Blogger user 10:27 PM

Trik mengoptimalkan desain website dengan foto potret berukuran besar — Apa yang pertama kali anda lihat dan anda ingat ketika bertemu dengan seseorang? persentase paling besar tentulah mukanya, selanjutnya mungkin warna kulit, tinggi, dll. Muka menjadi tembok paling depan, muka yang ramah, muka yang berkarakter tentu sangat mudah untuk di ingat oleh orang yang memandang.
Dalam dunia web desain ternyata muka seseorang juga bisa dimanfaatkan untuk menarik perhatian pengunjung. Dengan kecepatan koneksi internet saat ini yang semakin membaik, penggunaan gambar yang berukuran besar mulai sering diterapkan, penggunaan potret muka seseorang yang di close-up ternyata 2 tahun belakangan ini menjadi trend yang cukup digemari oleh para desainer web dari berbagai penjuru dunia.
Banyak website yang terlihat menarik dengan menerapkan hal tersebut, kita mengetahui bahwa citra yang kuat pada website adalah kunci. Penggunaan gambar muka yang besar bisa menekan penggunaan teks, hal ini bisa menuntun mata pembaca untuk menelusuri halaman dan dapat membuat keseimbangan antara informasi visual dan tertulis.
Gambar yang besar merupakan bagian dari visual desain, dan sebenarnya apa fungsi visual ini dalam sebuah website?

Potret bertanggung jawab untuk mendukung konten website. Mereka mengkomunikasikan ide-ide bisnis dan membantu membangun hubungan visual yang kuat dengan pengunjung.
Prioritaskan Informasi. Aksen visual banyak digunakan untuk menggaris bawahi poin-poin kunci.
Panduan Melalui Website – Visual yang baik dan terorganisir merupakan bagian dari kemudahan navigasi karena dapat menunjukan kepada pengunjung cara untuk mengikuti alur website.

Dukungan visual yang baik dari setiap desain dapat membuat website tampil lebih menarik dan menciptakan rasa pada pengunjung dan itu bisa menawarkan pada pengunjung untuk menikmati nya. Foto, ikon, tombol, latar belakang – semua elemen tersebut menyusun bagian visual dari tata letak.
Memasukan gambar latar belakang besar pada website adalah salah satu teknik yang sudah berkembang luas. Mereka dapat diimplementasikan dalam header website, konten website (bagian dari postingan pada sebuah blog) atau diseluruh bagian website (full satu layar komputer).
Foto potret close-up adalah salah satu trend desain website saat ini. Anda salah jika berfikir bahwa hanya fashion atau foto proyek yang memanfaatkan ini. Website bisnis, pendidikan, kesehatan, dan website bertema seni sukses menerapkan gambar potret untuk membuat desain mereka lebih personal, memberikan sentuhan unik yang bagus untuk mereka dan meningkatkan hubungan dengan pengunjung. Sebenarnya itu adalah tujuan utama (bersama dengan efek visual) menggunakan close-up potret. Ketika desainer memilih potret yang bagus dan sesuai dengan keseluruhan tampilan website, yang disebutkan diatas maka misi dianggap tercapai. Mari kita lihat hal tersebut dilakukan di beberapa website dibawah ini.

David Hellmann

The Green Soccer Journal

Beards

Paintbox

Code42

Kennedy

Eazers

Locals Appare

Edita’s Casting

Julia Gavrilova

Van Schnider

Bryter

Daniella Draper

Sudah anda lihat satu per satu demo website nya? Luar biasa keren bukan? gambar yang baik memang pemikat yang baik pada sebuah website, tapi perlu dipertimbangkan untuk membuat gambar besar tersebut menjadi lebih kecil ukuran file nya, mungkin di kompres atau pemilihan format gambar juga bisa mempengaruhi ukuran file. Diperlukan kebijakan web designer agar website tampil oke namun tetap tidak menyusahkan pengunjung dengan load website yang berat.
Satu hal lagi yang perlu diperhatikan dari contoh-contoh website diatas adalah, penggunaan gambar yang besar akan terlihat sangat baik jika menggunakan font yang baik pula. Anda bisa menggunakan Font Terbaik dan Populer Untuk Website, atau bisa juga membuat font anda sendiri dengan Software dan Alat Gratis Untuk Membuat Font Sendiri ini.
Jadi apakah anda sudah siap dengan kamera anda? kalau sudah siap mari ambil gambar terbaik untuk proyek website yang sedang anda kerjakan :) Semoga membuat website anda tampil lebih mewah, lebih memikat, memberi pengalaman kepada pengunjung dan lebih mudah untuk di ingat, website yang mudah di ingat mudah untuk dikunjungi kembali dilain waktu, contohnya seperti website posharian.tk ini, semoga anda mudah mengingatnya dan sering berkunjung kesini :)

Inilah! Font Paling Populer Di Dunia

Typography Blogger user 10:25 PM

Font paling populer di dunia — Anda tentu bertanya-tanya, dari sekian banyak font yang ada di internet, font apakah yang paling banyak digunakan oleh website-website yang ada di dunia maya tersebut.
Bonfx men-trace hampir 2000 web font paling populer dari 10.000 website yang paling banyak di kunjungi berdasarkan peringkat alexa.
Data ini sangat menarik, ternyata Arial merajai penggunaan font dihampir sebagian website yang ada. Namun apakah arial akan menjadi font paling populer untuk selamnya? Hm…semua mungkin saja berubah, seiring dengan samakin meluasnya penggunaan web font, serta banyak nya layanan web font saat ini seperti google font, atau typekit. Namun seperti nya perubahan tersebut tidak akan terjadi dalam waktu dekat, mengingat arial sudah sangat masif digunakan oleh sebagian besar website.
Berikut adalah gambaran peringkat font teratas yang kami capture dari website Bonfx.

Bisa kita lihat arial menguasari dengan 2009, dibawahnya ada verdana dengan 960, lalu Georgia dengan 612.
Pengguna font arial paling terkenal yaitu Google, sedangkan Verdana digunakan oleh Taobao, Georgia oleh Yahoo.
Font ternama lain seperti Helvetica berada di peringkat 5 dengan nilai 556 dan pengguna nya adalah Facebook.
Data selengkapnya bisa anda lihat di website bonfx

10 Tutorial Membuat Efek Teks Dengan Illustrator

Typography Blogger user 10:21 PM

Tutorial membuat efek teks / tulisan dengan Adobe Illustrator — Membuat efek teks yang keren memiliki kalangan penggemarnya sendiri, banyak desainer yang menyukai seni pembuatan teks (typography) ini. Hal tersebut wajar saja karena seni desain tulisan memang sungguh menarik dan memiliki keberagaman.
Anda yang sampai saat ini belum menyukai seni efek teks ini mungkin perlu mencoba terlebih dahulu, karena jika tidak pernah mencoba tentu tidak pernah suka.
Berikut ini ada beberapa tutorial pembuatan efek teks dengan mengguakan illustrator yang bisa Anda ikuti dan pelajari.

1. Membuat variasi teks dengan illustrator

2. Membuat teks yang eye-catching dengan illustrator

3. Membuat teks bergaya kotor dengan Illustrator

4. Membuat teks retro dengan Adobe Illustrator

5. Membuat efek tesk tarikan dan melingkar dengan Illustrator

6. Membuat efek teks sambung dengan Illustrator

7. Membuat efek tulisan gradien dengan Illustrator

8. Membuat efek teks kartun dengan Illustrator

9. Membuat efek teks dengan dekorasi glamor pada script font

10. Membuat efek tulisan didalam gambar love dengan Illustrator

Itulah beberapa tutorial pembuatan efek teks / tulisan dengan Adobe Illustrator, semoga berguna untuk Anda dan membuat Anda semakin mahir menggunakan Illustrator.

26 Font Google Terbaik Ini Akan Mempercantik Website Anda

Web Design Blogger user 10:18 PM

Font Google terbaik yang kita pilih untuk website tentu akan memberikan dampak yang sangat signifikan untuk menambah keindahan tampilan website termasuk juga keterbacaan tulisan di halaman web.
Tipografi adalah salah satu faktor penting dalam desain website, desain serta pemilihan font atau jenis huruf akan menciptakan kesan tersendiri bagi pengguna atau pengujung website Anda.
Jadi tidak heran ada orang yang menghabiskan waktu berjam-jam untuk memilih font yang sesuai untuk website nya, semua tentu demi tampilan baik dan membantu tercapainya tujuan dari website tersebut.
Salah satu sumber yang biasa digunakan oleh desainer web dalam mencari font untuk website yang dibuatnya adalah Google Web Font.

Font Playfair Display (Image: theultralinx.com)

Di Google Web Font tersedia banyak sekali font yang bisa digunakan secara gratis, bisa dengan mengembed font dari server Google atau bisa juga dengan mendownload font tersebut ke komputer.
Untuk Anda yang bingung memilih font yang begitu banyak di Google Web Font, berikut ini ada beberapa font google terbaik yang bisa Anda gunakan. Tulisan ini terlalu banyak gambar, jadi kami buat jadi beberapa halaman agar tidak berat ketika diakses.

Sunday, December 25, 2016

Membuat Efek Foto Dispersion di photoshop

Friday, December 23, 2016

1. Membuat variasi teks dengan illustrator

2. Membuat teks yang eye-catching dengan illustrator

3. Membuat teks bergaya kotor dengan Illustrator

4. Membuat teks retro dengan Adobe Illustrator

5. Membuat efek tesk tarikan dan melingkar dengan Illustrator

6. Membuat efek teks sambung dengan Illustrator

7. Membuat efek tulisan gradien dengan Illustrator

8. Membuat efek teks kartun dengan Illustrator

9. Membuat efek teks dengan dekorasi glamor pada script font

10. Membuat efek tulisan didalam gambar love dengan Illustrator

1. Playfair Display

2. Work Sans

3. Alegreya

4. Fira Sans

5. Inconsolata

6. Source Sans Pro

7. Source Serif Pro

8. Lora*

9. Neuton

10. Poppins

11. Crimson Text

12. Open Sans

13. Merriweather

14. Roboto

15. Lato

16. Anonymous Pro

17. Archivo Narrow

18. Libre Baskerville

19. Karla

20. Montserrat

21. Chivo

22. Domine

23. Varela Round

24. Bitter

25. Cardo

26. PT Serif

Labels

Subscribe to Newsletter

Search Engine

Popular Posts

Fanspage

Labels