Buat transisi yang mulus antar gambar. Transisi mulus di Photoshop. Pelajaran mendetail Jenis gradien, mengisi bentuk, dan membuat bintang

1 suara

Selamat siang, para pembaca yang budiman. Hari ini saya memutuskan untuk membuktikan kepada Anda bahwa yang terbaik adalah mempelajari teori dalam praktik. Bahkan jika Anda seorang pemula, Anda dapat mencapai hasil yang bagus hanya dalam waktu satu jam tanpa memahami apa pun tentang Photoshop! Lihat, gambar ini seluruhnya tercipta berkat gradien. Mereka diterapkan pada elemen yang berbeda dan dalam variasi yang bervariasi.

Jika Anda membaca artikel ini sampai akhir, Anda tidak hanya akan mempelajari cara membuat transisi warna yang mulus di Photoshop, tetapi juga menerapkan pengetahuan ini dalam praktik terkait dengan teks, bentuk, membuat berlian berkilauan yang indah, dan banyak lagi.

Saya sudah mengambil gambar ini. Jika mau, Anda dapat membuat sendiri yang persis sama, dan mungkin lebih baik lagi, tetapi saya akan mengajari Anda menggunakan contoh yang berbeda. Yang mana? Cari tahu di akhir artikel. Saya akan menggambar bersama Anda dan sekaligus menjelaskan prosesnya; Saya sendiri masih belum tahu apa yang akan berhasil. Berkat ini, saya dapat melihat masalah apa yang mungkin Anda hadapi dan membantu menyelesaikannya.

Pengetahuan dasar dan satu rahasia selalu menang

Jadi pertama-tama kita perlu membuka Photoshop. Saya sangat menyarankan Anda mengunduh program ini ( Anda dapat membeli versi berlisensi di sini ). Anda tidak akan pernah menemukan yang lebih baik darinya. Jika Anda takut tidak akan menguasainya dan akan membuang-buang uang, benar-benar lupa tentang program ini setelah percobaan pertama, Anda dapat mencobanya layanan daring https://editor.0lik.ru/ . Jauh lebih nyaman untuk memiliki program Anda sendiri dan Anda akan segera memahami alasannya.

Seperti inilah Photoshop versi 2015, jika Anda mempunyai edisi yang berbeda, jangan khawatir. Semuanya akan kurang lebih sama. Anda memiliki lebih sedikit pilihan dan itulah satu-satunya perbedaan.

Kami menciptakan dokumen baru.

Memilih ukuran adalah salah satu masalah tersulit bagi saya. saya ambil sebagai dasar dimensi maksimum gambar untuk diposting jejaring sosial. 800x500, tapi, seperti yang Anda pahami, bukan itu intinya. Itu semua tergantung pada tujuan dan tugas yang ingin Anda capai kapan bantuan photoshop.

Lihat, di panel sebelah kanan terdapat semua tombol utama, termasuk gradien. Namun, saat ini tidak dapat ditemukan. Bagaimana bisa? Saya sendiri mengalami masalah ini ketika saya mulai belajar cara bekerja dengan Photoshop. Anda membaca artikel, tetapi Anda harus mencari setengah informasinya di sumber pihak ketiga. Google, Google, Google.

Semoga pembaca yang sangat cerdas, yang mengetahui segalanya dengan baik, memaafkan saya atas sedikit penyimpangan dari topik. Saya ingin semua pengunjung blog bisa mengikuti pelajaran saya. Mungkin suatu saat ini akan sangat berguna bagi Anda. Akan menghemat banyak waktu.

Di pojok kanan bawah hampir setiap tombol, kecuali kaca pembesar, terdapat sesuatu seperti tanda panah. Ini menunjukkan bahwa ada beberapa alat yang tersembunyi di dalam tombol.

Tahan selama beberapa detik tombol kiri arahkan mouse pada tombol untuk membuka menu tambahan dan pilih gradien.

Menu tambahan lainnya dibuka di bagian atas. Ini digunakan secara eksklusif untuk gradien. Klik pada teks - menu teks khusus akan terbuka di bagian atas, di kuas dan... ya, Anda mengerti.

Klik panah di sebelah ikon warna. Transisi standar atau yang Anda unggah disimpan di sini.

Jika Anda tidak menganggap diri Anda seorang jenius desain, saya sarankan Anda mengunduh template gratis dari Internet. Ada banyak dari mereka. Pertama, menghemat waktu, dan kedua, beberapa opsi serupa biasanya digabungkan menjadi tema yang dibuat gaya seragam. Ini dapat diterapkan pada satu gambar tanpa masalah dan hampir selalu terlihat bagus.

Memasang template baru tidak menjadi masalah. Unduh dari Internet, lalu pilih mur di sudut kanan atas dan temukan tautan "Unduh...".

Pilih folder dengan file yang diunduh di komputer Anda dan simpan.

Mereka akan ditambahkan ke daftar paling bawah.

Mengisi

Sekarang mari kita belajar cara mengisinya. Pilih opsi mana pun yang Anda suka (kita akan membuatnya nanti) dan klik opsi tersebut. Tahan tombol kiri mouse di mana saja pada layar dan gerakkan ke segala arah. Lokasi transisi warna bergantung padanya.

Lihat perbedaannya.

Anda dapat memutarnya di mana saja.

Untuk mencegah pergerakan garis Anda bergeser dan gradien menjadi kabur, tahan tombol Shift saat Anda mengatur arahnya.

Soalnya, transisi warna kini terjadi di tengah. Kita akan melihat pengaturannya lebih detail saat kita membuat gradien kita sendiri. Sekarang saya hanya akan berbicara tentang pergeseran pusat. Klik di piring ini.

Klik kiri pada warna di bawah dan pindahkan ke kiri atau kanan.

Inilah yang akhirnya saya dapatkan.

Bagaimana Menerapkan Gradien pada Teks untuk Membuat Huruf Terlihat Modern

Sekarang mari kita menulis sesuatu. Pilih tombol yang sesuai.

Jika Anda perlu mengubah ukuran atau font itu sendiri, perhatikan panel di bagian atas layar. Semuanya sederhana di sana.

Sekarang tekan Ctrl dan pada saat yang sama klik ikon layer teks baru. Hati-hati, Anda tidak perlu mengklik pada teks, tetapi pada persegi panjang, seperti yang ditunjukkan pada gambar di bawah.

Sekarang mari kita berkreasi lapisan baru. Ada tiga opsi untuk menyelesaikan masalah: tahan Shift, ctrl, N secara bersamaan; Kami menggunakan panel di bagian atas, temukan di sana “Layer – new – create”; gunakan tombol di menu cepat di sebelah kanan. Pada gambar di bawah ini saya tunjukkan dengan panah.

Sekarang, untuk menghilangkan sorotan di sepanjang tepi huruf, Anda dapat mengklik pilihannya lalu mengklik bagian mana pun dari gambar. Inilah hasilnya.

Pekerjaan dengan teks tidak berakhir di situ. Lihat, kita memiliki 2 lapisan: satu dengan gradien, dan yang kedua dengan huruf. Mengapa hal itu bisa terjadi di sana? Saya akan menjelaskannya sebaik mungkin. Tulis di kolom komentar jika kurang jelas. Anda telah menulis teksnya. Photoshop menyadari bahwa ini adalah huruf dan bahkan menyarankan agar Anda memperbesarnya, memperkecilnya, mengubah fontnya, dan sebagainya.

Kemudian Anda memilih fragmen ini. Kami membuat layer baru, menggunakan analogi, memotong stensil dari kertas dan mengisinya. Pada titik ini, Photoshop hilang. Dia berhenti melihat suratmu. Baginya, itu hanyalah bagian dari suatu gambar, seperti belah ketupat, persegi atau lingkaran yang bagian tengahnya dipotong. Jika Anda bekerja dengan huruf pada sebuah lapisan, Anda tidak akan berhasil; jika Anda ingin menerapkan gradien pada teks, hal yang sama.

Jika sekarang Anda ingin memindahkan teks ke suatu tempat dan Anda pergi ke bagian yang sesuai lalu mulai memindahkannya dengan panah, maka semuanya akan menjauh.

Kami menghapus lapisan teks untuk menghindari kebingungan. Klik kanan padanya dan pilih opsi yang diinginkan.

Jenis gradien, mengisi bentuk, dan membuat bintang

Jika Anda memperhatikan panel gradien di bagian atas, Anda mungkin memperhatikan bahwa panel tersebut tersedia dalam berbagai jenis: linier, radial, sudut, cermin, atau berlian. Tidak sulit untuk melihat perbedaannya, tidak perlu membaca artikelnya, cukup buka saja batu tulis kosong dan coba gunakan satu atau opsi lain. Lihat apa yang terjadi.

Satu-satunya hal yang perlu diperhatikan adalah jika Anda ingin melihat hasil sempurna, seperti pada gambar saya, panah harus diarahkan dari tengah.

Sekarang mari kita kembali ke gambar kita. Izinkan saya mengajari Anda satu teknik menarik. Transisi warna dapat digunakan dalam bentuk yang Anda gambar. Ini sangat berguna terutama bagi Anda yang berencana membuat website.

Jadi, pilihlah persegi panjang atau lingkaran. Tidak masalah.

Sekarang warna isiannya.

Mari pergi ke bagian gradien.

Kami membutuhkan belah ketupat di sini.

Soalnya, ternyata efeknya menarik, tapi warna putih merusak segalanya. Perlu transparan. Dapat ditemukan di dalam templat. Jika Anda melihat kisi seperti ini di dalam template, maka inilah yang kita butuhkan.

Mainkan dengan pengaturan dan Anda akan mendapatkan opsi ideal Anda.

Sekarang mari kita kloning flash ini. Pilih gerakan. Cukup klik tombolnya.

Sekarang tahan alt dan seret duplikatnya ke samping.

Inilah hasil yang saya dapatkan.

Buat gradien dan tombol baru untuk situs

Dan terakhir, saya akan memberi tahu Anda cara membuat gradien dari awal sendiri, dan pada saat yang sama kami akan memahami pengaturannya. Mari kita buat tombol yang indah, ya? Saya akan menambahkan persegi panjang dengan tepi membulat ke gambar saya.

Seperti inilah rupanya. Kali ini kita tidak akan menggunakan isian bagian dalam. Sangat tidak nyaman untuk bekerja dengan template baru melaluinya. Biarkan saja menjadi hitam untuk saat ini.

Pilih alat yang familiar dan klik pada dadu.

Gradien baru dibuat berdasarkan gradien lama. Klik salah satu saja. Versi lama tidak akan hilang kemana-mana. Kemudian buatlah nama baru untuknya dan simpan.

Dengan menggunakan titik kontrol atas, Anda dapat mengontrol tingkat transparansi.

Yang lebih rendah digunakan untuk bekerja dengan warna. Untuk memperluas jangkauan, klik di sebelah titik mana pun dan itu akan diduplikasi.

Anda dapat membuat sebanyak yang Anda suka.

Untuk membuat transisi terlihat modern, Anda perlu menghaluskan warnanya. Jangan sentuh indikator ini dan semuanya akan baik-baik saja. Seharusnya 100%. Siap. Anda dapat mengklik "OK" atau "Simpan" - semuanya tergantung keinginan Anda.

Sekarang kita ulangi apa yang telah kita lakukan baru-baru ini dengan teks tersebut. Tahan ctrl, klik tombol gaya yang diinginkan di tengah dan buat yang baru berdasarkan itu.

Sekarang tambahkan transisi dan voila.

Mari tambahkan teks ke tombol dan selesai. Tidak jelas mengapa hal yang diperlukan itu selesai. Omong-omong, Anda dapat mengunduh sumber saya jika Anda mau ( Unduh sumber gradien.psd ). Anda dapat membukanya di Photoshop dan memperbaiki gambar saya. Saya pikir itu tidak akan sulit.

Ya, itu saja. Sekarang Anda tahu banyak tentang gradien. Jika Anda seorang desainer, desainer tata letak, pembuat situs web, atau ingin menjadi salah satunya, dan pelajaran ini sangat berguna bagi Anda, berlangganan buletin dan pelajari lebih lanjut tentang minat Anda. Anda juga dapat memperhatikan situs ini: https://photoshop-master.org/disc149/ . Di sini Anda dapat menemukan cloud berbayar dan kursus gratis, yang akan mengajari Anda cara kerja nyata dan profesional dengan Photoshop.

Semoga beruntung dan sampai jumpa lagi.

Kami dengan senang hati menyambut Anda di pelajaran berikutnya tentang bekerja Adobe Photoshop. Artikel ini akan membahas tentang cara membuat transisi mulus dalam program di perbatasan antara gambar/warna. Ini adalah keterampilan yang sangat berguna yang pasti Anda perlukan, jadi mari kita mulai!

Membuat transisi mulus antar warna

Karena Photoshop adalah program profesional pemrosesan gambar, seringkali hasil yang sama dapat dicapai dengan beberapa cara. Sama dengan transisi.

Menggunakan alat Gradien

Anda mungkin familiar dengan alat ini. Oleh karena itu, buka toolbar di sebelah kiri dan pilih "Gradien".

Setelah alat dipilih, panel pengaturan Gradien akan muncul di bawah menu utama, di mana Anda dapat memilih template gradien dan mengatur parameter tambahan sesuai keinginan.

Sayangnya, kumpulan gradien standar tidak menyertakan banyak templat, sehingga Anda dapat menggunakan pencarian dan memperluas koleksi Anda, atau membuat versi Anda sendiri.


Agar transisi menjadi berwarna persis dan tidak transparan, Anda juga perlu mengatur pengaturannya titik kontrol opacity (lihat tangkapan layar di bawah):

Setelah semuanya siap, tinggal menerapkan perubahan dengan mengklik "OK" dan mengisi kanvas dengan gradien. Untuk melakukan ini, kita membuat area pilihan yang ingin kita isi, atau menerapkan gradien ke seluruh kanvas. Cukup klik LMB (tombol kiri mouse) di tempat yang diinginkan dan seret sebanyak yang diperlukan.

Penting! Perhatikan jenis pengisian yang dipilih:

Dalam kasus kami “Gradien Linier”.

Melalui Lapisan Masker

Metode ini digunakan oleh pengguna berpengalaman. Semua tindakan akan dilakukan melalui palet lapisan. Mari kita mulai:


Melalui seleksi bulu-bulu

Inti dari metode ini adalah menciptakan transisi yang mulus pada batas objek/gambar yang terisi dan latar belakang. Mari kita mulai!

  1. Kita membutuhkan alat Rectangular Marquee.

  2. Sekarang Anda perlu membuat pilihan:

  3. Saat pemilihan sudah siap, gunakan tombol pintas SHIFT+F6 memanggil jendela di mana Anda perlu memasukkan nilai pada item “Radius bulu”.

  4. Setelah itu, Anda perlu mengisi seleksi yang sudah dibentuk. Untuk melakukan ini, kami akan menggunakan tombol pintas lagi SHIFT+F5 dan pilih warna isian.
  5. Setelah menerapkan perubahan, kami mendapatkan hasil transisi mulus berikut:

  6. Yang tersisa hanyalah menghapus pilihan menggunakan CTRL+D dan Anda selesai:

Seperti yang Anda lihat, tidak ada yang sulit dalam membuat transisi mulus antar warna di Photoshop. Kami telah menyajikan sebanyak 3 cara untuk melakukan ini, yang masing-masing cocok untuk situasi tertentu.

Itu saja! Sampai jumpa di pelajaran kami berikutnya!

Setuju, salah satu hadiah yang paling tidak biasa adalah kolase. Mereka dapat mendekorasi interior, membuat teman tertawa, dan menyenangkan orang terkasih. Foto asli biasanya dipesan dari studio foto atau Anda coba mengambilnya sendiri di komputer. Untuk membuat overlay satu foto ke foto lain terlihat organik, Anda perlu mempelajari beberapa kombinasi sederhana. Yang terpenting adalah tidak ada kontras antar frame. Saat memilih latar belakang untuk kolase, pastikan untuk mempertimbangkan warna dan arah cahaya pada kedua foto, serta ukuran objek dan objek utama. Untuk memahami cara membuat transisi yang mulus di Photoshop, pelajari saja prosedur yang disajikan dalam artikel ini.

Tentang prosedurnya

Cobalah untuk mempraktikkan urutan tindakan berikut.


Mempelajari editor grafis akan memungkinkan Anda membuat karya yang tidak biasa, mengoreksi gambar, mengeditnya, dan membuat komposisi menakjubkan dengan bahan fotografi apa pun!

Kami berharap artikel kami akan memungkinkan Anda menyelesaikan tugas dengan sukses dan juga mendapatkan kesenangan nyata dari proses yang menarik dan kreatif ini.

Membuat kolase bukan hanya sekedar menggabungkan beberapa foto menjadi satu. Kolase yang tepat menunjukkan kepiawaian penulisnya, sekaligus menunjukkan kemampuannya dalam menata foto dengan indah dan kompeten sehingga terlihat gaya dan menarik. Kolase yang berhasil dan mencolok adalah kolase yang tidak memiliki batas mencolok di antara foto-fotonya - sebaliknya, foto-foto tersebut tampak mengalir satu sama lain. Efek ini dapat dicapai dengan melakukan operasi sederhana di Adobe Photoshop.

Anda akan membutuhkannya

instruksi

  • Buka dua foto dengan ukuran kurang lebih sama yang ingin Anda gabungkan menjadi kolase.
  • Tekan tombol V untuk mengaktifkan alat pindahkan dan seret satu foto ke foto lainnya sehingga keduanya berada di jendela yang sama pada dua lapisan berbeda.
  • Pilih yang teratas dari daftar dua lapisan yang muncul, lalu tambahkan masker vektor ke dalamnya (Tambahkan masker lapisan).
  • Ikon topeng berbentuk kotak putih akan muncul di dekat ikon foto pada baris lapisan. Klik di atasnya untuk mengaktifkan lapisan. Ikon tersebut akan dikelilingi bingkai hitam untuk menunjukkan aktivitasnya.
  • Pada toolbar, pilih gradien dan tentukan arah gradien dengan menggambar garis dari sudut kanan bawah ke sudut kanan atas. Anda akan melihat bagaimana salah satu gambar mulai muncul melalui gambar lain tempat Anda menggambar gradien sudut.
  • Bereksperimenlah dan ubah panjang dan lebar gradien hingga Anda puas dengan hasilnya dan gambar mengalir dengan lancar dan indah satu sama lain di tempat yang Anda inginkan untuk memunculkan transisi.
  • Untuk mencapai efek yang diinginkan, gunakan gradien hanya ketika modus diaktifkan layer mask - jika tidak, tidak ada yang akan berhasil.
  • Keluar dari mode topeng dengan mengklik ikon foto di lapisan setelah kolase Anda siap.
  • Gabungkan lapisan dan simpan kolase dalam format yang diinginkan.
  • Halo para webmaster pemula yang terhormat. Lagi .

    Pada artikel ini saya akan memberi tahu Anda cara melakukan transisi dari warna gelap ke warna lebih terang, serta dari satu warna ke warna lainnya.

    Tindakan ini disebut gradien, dan karena pada dasarnya memang demikian gambar latar belakang, lalu dieksekusi oleh properti background dengan mengambil dua nilai:

    1. gradien linier - transisi warna dari satu sisi atau sudut ke sisi lainnya.

    2. gradien radial - transisi warna dari tengah ke tepi.

    Tertulis sebagai berikut:

    latar belakang : -moz-linear-gradient (atas, #ff0000, #ffcfcf );
    atas, #ff0000, #ffcfcf );

    Di bawah ini, dengan menggunakan contoh, kami akan memeriksa secara rinci setiap elemen dari catatan ini.

    Sayangnya, gradien masih bermasalah dengan tampilan di browser dan spesifikasi W3C, sehingga nilainya masih harus diawali.

    Awalan ditempatkan di awal nilai, dan diawali dengan tanda hubung.

    Kita harus memasukkan daftar seperti itu ke dalam pemilih elemen, membuat gradien untuknya, sehingga latar belakang Anda yang sangat indah akan tercermin dengan benar di semua browser. Kecantikan membutuhkan pengorbanan.





    Dokumen tanpa judul





    Это самый простой, двухцветный градиент. Разберём подробно значения свойства background

    В первой строке задаётся фон для браузеров не поддерживающих линейный градиент.

    Следующие 5 строк — для отображения фона в разных браузерах. Сначала пишется значение градиента с префиксом в начале.

    Затем, в круглых скобках:

    top — направление от которого начинается первый цвет (может быть bottom , left , right )

    #ff0000 — через запятую первый цвет;

    #ffcfcf — через запятую второй цвет;

    У Safari, до 5-ой версии, и у Chrome до десятки был свой собственный синтаксис, заметно увеличивающий код. Наверное поэтому, градиент для этих версий, зачастую, не указывается, особенно при наличии большого количества цветов.

    Можно сделать переход цвета не горизонтально, или вертикально, а из угла в угол. Для этого существуют следующие направления:

    bottom right — от правого нижнего угла к левому верхнему;

    bottom left — от левого нижнего к правому верхнему;

    top right — от правого верхнего к левому нижнему;

    top left — от левого верхнего к правому нижнему;

    Можно сделать переход цвета от центра блока к краям. Тогда в значении вместо слова linear (линейный), ставиться radial (радиальный)

    #gradient {
    background : #ff0000 ;
    background : -moz-radial-gradient (center, ellipse cover, #ff0000, #ffcfcf );
    background : -webkit-radial-gradient (center, ellipse cover, #ff0000, #ffcfcf );
    center, ellipse cover, #ff0000, #ffcfcf );
    center, ellipse cover, #ff0000, #ffcfcf );
    width : 600px ;
    height : 400px ;
    border : 1px solid #333 ;
    }

    А теперь давайте сделаем, так сказать, что-то типа радуги. Для этого добавим в вышеприведённый код ещё пару цветов, и зададим в процентах объём каждого цвета (количество цветов не ограничивается)

    Объём цвета задаётся от 0% до 100%, (первый — 0%, последний — 100%, остальные между ними в порядке следования). Рассмотрим этот вариант на радиальном градиенте. На линейном делается всё аналогично.

    #gradient {
    background : #ff0000 ;
    background : -moz-radial-gradient ();
    background : -webkit-radial-gradien t(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100% );
    background : -o-radial-gradient (center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf1005 );
    background : -ms-radial-gradient (center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100% );
    width : 600px ;
    height : 400px ;
    border : 1px solid #333 ;
    }

    Принцип, я думаю, понятен. Так что строку для Safari до пятой версии, и Chrome до десятой, попробуйте написать самостоятельно.

    Градиент задаётся любому блоку HTML (body, div, h1-6, p, ul, ol), и как глобальным, так и встроенным стилем (это для сайта на WordPress).

    Теперь несколько слов о том, как и где подбирать цвета. Есть сервисы по созданию градиентов, предлагающие и цвет, и процент объёма, и код градиента, но выбор у них ограничен предложением.

    Поэтому я пользуюсь инструментом colorscheme.ru , в котором можно подобрать цвет в неограниченном диапазоне, и оптимально подобранных последовательностях и сочетаниях.

    В верхнем ряду панели выбирается количество сочетаемых цветов. Пройдя по «Угол 30°» меняется диапазон выбора.

    В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.

    В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.

    Желаю творческих успехов.

    — Рабинович! У вас есть разменять сто долларов?
    — Нет, но спасибо за комплимент!

    Две одесситки:
    — Роза, как тебе нравится моё новое платье?
    — Извини, Сара, я спешу, мне сейчас не до скандалов!