Detail Tutorial
- Perkiraan Waktu Penyelesaian: 30 - 60 Menit
- Kesulitan: Pemula
- Apps Digunakan: Adobe Photoshop
Download Source Files
- Sumber file untuk tutorial ini tersedia untuk anggota premium.
Dapatkan Keanggotaan Premium
Lihat posting pada tuts + Betatuts + Beta adalah dioptimalkan, dibaca mudah mobile version-ramah dan tuts + jaringan.
Produk akhir Apa yang Anda akan Menjadi Membuat
Bagian dari baru-baru ini, "desain datar" trend, efek bayangan panjang adalah fenomena populer tetapi belum tentu baru. Dampak terkuat tren tampaknya berada di elemen desain antarmuka dan ikon tetapi semakin banyak digunakan sebagai bagian dari desain web, juga. Dalam tutorial ini, kami akan menunjukkan 4 cara yang dapat Anda membuat efek bayangan panjang di Photoshop menggunakan beberapa alat yang berbeda. Mari kita lihat!
Aset Tutorial
Anda akan membutuhkan aset berikut untuk menyelesaikan tutorial ini. Silahkan download mereka sebelum Anda mulai, atau mencari alternatif.
Karakteristik Bayangan Panjang Efek
Ada 2 karakteristik utama dari efek bayangan panjang.
- Setiap obyek desain harus memiliki datar, bayangan 2 dimensi yang meluas untuk setidaknya 2,5 kali diagonal dari objek, yang membuat bayangan yang sangat panjang, ini menambah penekanan dan drama untuk desain.
- Bayangan itu harus dilemparkan pada sudut 45 derajat, sebaiknya ke arah kanan.
Warna bayangan dapat bervariasi dalam kegelapan dibandingkan dengan warna latar belakang, dan dalam beberapa kasus, fade out ke fill transparan. Ada banyak tweak yang dapat ditambahkan ke efek, dan itu semua terserah Anda untuk memutuskan apa hasil akhir yang akan Anda bagi.
1. Siapkan Artwork Anda
Langkah 1
Buat 750 x 750 px dokumen baru, dan mengisi Background dengan warna # cf3f30.
Langkah 2
Mengatur warna Foreground ke # e74c3c, Pilih Rounded Rectangle Tool, pilih opsiShape di Options bar, dan set Radius sampai 10.
Tekan dan tahan tombol SHIFT, lalu klik dan drag untuk membuat 450 x 450 px bulat persegi panjang.
Langkah 3
Buat teks di White. Dalam tutorial ini, dua font yang berbeda digunakan, tetapi Anda dapat menggunakan teks apapun dan font yang Anda suka.
Langkah 4
Adapun baris pertama dari teks, font yang digunakan adalah Bebas, dan Ukuran font 100pt. Sementara baris kedua dibuat menggunakan font Pacifico, font Ukuran 100, dan nilai Memimpin diatur ke 100 juga.
Perlu diingat bahwa Desain datar pada umumnya menggunakan font yang sederhana, berani dan renyah.
Langkah 5
Pilih tiga lapisan yang Anda miliki sejauh ini, memilih Move Tool, dan klik Align pusat horisontal icon di bar Pilihan untuk memastikan semua elemen yang benar berpusat dalam dokumen.
2. Buat Background Bayangan Panjang Menggunakan Shape Layers
Langkah 1
Mengatur warna Foreground to Black dan memilih Rectangle Tool. SHIFT + klik dan drag untuk membuat sebuah persegi panjang yang menutupi hampir seluruh latar belakang. Lapisan bentuk baru harus ditempatkan tepat di atas layer Background.
Langkah 2
Pergi ke Edit> Free Transform (CTRL / CMD + T) untuk memasuki Free Transform Mode. Kemudian, tekan dan tahan tombol SHIFT dan memutar persegi panjang hitam -45 ° (berlawanan).
Langkah 3
Sekarang klik dan tarik sisi persegi panjang hitam sampai mereka mencapai sudut-sudut persegi panjang merah.
Langkah 4
Klik dan tarik bagian kiri dari persegi panjang hingga mencapai pusat persegi panjang merah (diagonal). Setelah selesai, tekan ENTER / RETURN untuk menerima perubahan.
Langkah 5
Mengubah nilai hitam persegi panjang layer Fill ke 0.
Langkah 6
Klik layer persegi panjang hitam untuk menerapkan efek Gradient Overlay ganda.Mulailah dengan memilih Hitam untuk Transparan gradien. Kemudian, mengubah Angleke -45, dan Opacity ke nilai yang Anda suka, tergantung pada seberapa halus atau intens Anda ingin bayangan menjadi. Nilai yang digunakan di sini adalah salah satu yang cukup halus, yaitu 15%.
Langkah 7
Ini adalah cara paling dasar untuk menciptakan bayangan panjang untuk bentuk sederhana.
3. Buat Long Shadows Menggunakan Pen Tool
The Pen Tool adalah cara yang rumit untuk menciptakan efek bayangan panjang.Sementara yaitu mungkin lebih rumit daripada teknik lain yang disebutkan dalam tutorial ini, hal yang besar tentang teknik ini adalah bahwa hal itu memberi Anda banyak kontrol atas tampilan efek.
Langkah 1
Buat layer baru antara lapisan teks dan lapisan persegi panjang merah, kemudian pilihPen Tool (dengan opsi Shape dipilih di Options bar).
Langkah 2
Sebelum Anda mulai menambahkan jangkar poin, Anda perlu menambahkan panduan untuk menambahkan semua titik-titik pada tingkat yang sama. Untuk melakukannya, klikView> Rulers (jika Anda tidak memiliki pilihan diperiksa sudah), kemudian klik penguasa di bagian atas dan tarik panduan dan meletakkannya di tepi atas dari surat-surat.
Ini bekerja hanya untuk baris pertama dari teks karena huruf memiliki ketinggian yang sama. Tapi untuk baris kedua, poin akan ditambahkan tanpa perlu untuk panduan.
Langkah 3
Klik sekali untuk menambah poin di setiap sudut atas surat-surat, dan di antara mereka, mulai dari sudut kiri atas dari huruf pertama.
Langkah 4
Ketika Anda mencapai sudut kanan atas huruf terakhir, memindahkan paralel Pen Tool untuk persegi panjang bayangan merah, dan memperluasnya sehingga mencakup persegi panjang merah sudut kanan bawah dan menambahkan titik di sana. Kemudian, lanjutkan bentuk melewati pojok kiri bawah huruf pertama, dan menutup bentuk dengan kembali ke titik anchor pertama Anda tambahkan.
Langkah 5
Pilih Direct Selection Tool, kemudian, SHIFT + klik jangkar poin Anda tambahkan antara huruf.
Langkah 6
Pilih Move Tool, kemudian tekan tombol Panah Bawah keyboard untuk memindahkan titik yang dipilih ke bawah.
Kemudian, tekan tombol Panah Kanan untuk memindahkan poin ke kanan, sampai garis yang dihasilkan menjadi sejajar dengan tepi bayangan asli. (Yang Anda dapat memperbaiki menggunakan Direct Selection Tool serta jika diperlukan).
Langkah 7
Anda mungkin perlu mengubah beberapa poin individu setelah itu, untuk menghapus beberapa daerah kosong, atau mengatur sudut yang mereka buat. Untuk melakukannya, cukup gunakan Direct Selection Tool untuk memilih titik, kemudian memindahkannya sesuai kebutuhan.
Langkah 8
Pastikan bahwa semua garis bayangan terlihat paralel sebanyak mungkin. Anda dapat membuat garis menggunakan Line Tool, putar di Angle bayangan yang ingin Anda ciptakan, kemudian memindahkannya di sudut setiap huruf untuk melihat di mana Anda benar-benar perlu menempatkan jangkar poin.
Ini adalah metode yang memakan waktu, tapi seperti yang disebutkan, memberikan Anda kontrol lebih besar atas hasil akhir. Jadi, Anda perlu mengambil waktu Anda menciptakan dan menyempurnakan itu.
Langkah 9
Setelah Anda memiliki bentuk siap, menerapkan efek yang sama Gradient Overlayyang digunakan untuk persegi panjang bayangan merah (Langkah 2.6).
Langkah 10
Untuk menghapus bagian tambahan dari bayangan memperluas luar persegi panjang merah, klik kanan layer teks bayangan, kemudian klik Create Clipping Mask.
Tip: Untuk membuat bayangan baris kedua itu, pilih Pen Tool sekali lagi, dan pilih Combine icon Shapes di bar Pilihan untuk menambahkan bayangan ini dengan yang sebelumnya.
Jika Anda menggunakan versi CS6, Anda dapat membuat bayangan baru dalam lapisan yang terpisah, kemudian pilih kedua layer teks shadow, dan menggabungkan mereka dengan pergi ke Layer> Merge Layers, yang adalah apa yang saya akan lakukan dalam tutorial ini, sebagai lebih baik menggambarkan proses menciptakan bayangan untuk teks dengan tinggi huruf yang berbeda.
Jika Anda membuat dua bayangan dalam dua lapisan yang terpisah, Anda masih bisa mendapatkan versi yang berbeda baik dari efek Bayangan Panjang, dan akan terlihat seperti versi dijelaskan pada Langkah 4.8.
Langkah 11
Sekarang untuk teks dengan huruf ketinggian yang berbeda, Anda harus membuat bayangan segera. Jika Anda ingin bayangan yang akan digabungkan, Anda harus menambahkan jangkar poin saja di mana dua bayangan tidak tumpang tindih. Tapi untuk tutorial ini, proses lengkap akan dijelaskan jika anda ingin membuat bayangan secara terpisah.
Dan karena baris kedua font teks adalah kursif / bulat font, Anda harus hanya satu titik anchor di bagian paling atas dari setiap huruf, dan titik anchor di antara setiap dua huruf.
Yang penting sekali lagi, adalah untuk memastikan bahwa garis-garis sejajar dengan tepi bayangan asli.
Hal ini melibatkan lebih merinci di mana bayang-bayang tidak tumpang tindih, seperti bagian kiri bawah huruf S. Jadi pada dasarnya Anda tidak dapat menghubungkan titik akhir ke titik awal langsung. Sebaliknya, Anda perlu untuk memisahkan mereka dengan cara yang masih mengikuti arah asli dari bayangan.
Hal ini mungkin terdengar lebih rumit daripada yang sebenarnya, tetapi memiliki bayangan asli sebagai referensi akan membuat segalanya jauh lebih mudah.
Langkah 12
Pilih Tambahkan Anchor Point Tool, dan klik untuk menambahkan titik di mana ada daerah kosong yang harus diisi dengan bayangan, kemudian pindah titik-titik untuk menutupi daerah tersebut. Bagian atas kiri huruf kedua S dan l disesuaikan sini.
Langkah 13
Jika Anda membuat bayangan dalam lapisan yang terpisah, menerapkan efek Gradient Overlay, dan klip ke lapisan bayangan lain (dengan membuat Clipping Mask).
Langkah 14
Itu saja untuk metode pertama. Ini membutuhkan banyak presisi dan membayar perhatian ekstra ke banyak detail, tapi itu adalah cara non-3D untuk mengontrol sudut bayangan dalam bentuk lapisan.
Tip: Sebuah variasi keren dari efek Bayangan Panjang adalah versi mana bayangan memudar bukan versi warna solid.
Untuk mencapai itu, Anda hanya perlu bermain-main dengan nilai Skalaefek Gradient Overlay. Di sini, sudah diatur untuk 30%
Sehingga Anda dapat melihat bagaimana bayangan memudar ke fill transparan.
Anda juga dapat memindahkan bayangan di sekitar sampai Anda suka dengan tampilannya.
Opacity dan Skala nilai adalah nilai-nilai yang mengontrol penampilan bayangan. Anda juga dapat menggunakan efek Color Overlay bukannya Gradient Overlay jika Anda tidak ingin bayangan memudar sama sekali.
4. Buat Long Shadows Menggunakan Duplikasi dan Sikut
Ini adalah cara super mudah untuk mendapatkan yang sempurna 45 ° efek bayangan panjang.
Langkah 1
Mulailah dengan menduplikasi layer teks yang Anda miliki, kemudian tarik salinan bawah lapisan teks asli.
Langkah 2
Mengubah warna copy text layer font Hitam.
Langkah 3
Pergi ke Edit> Free Transform, kemudian gunakan tombol Panah Bawah dan tombolpanah kanan menyenggol copy layer teks satu pixel ke bawah dan satu ke kanan. Tekan ENTER / RETURN untuk menerima perubahan.
Langkah 4
Sekarang tekan CMD / CTRL + ALT + SHIFT + T untuk duplikat layer dengan transformasi. Anda harus mengulangi bahwa sampai bayangan meliputi ujung kanan bawah kotak merah.
Langkah 5
Pilih semua layer copy, dan pergi ke Layer> Merge Layers.
Langkah 6
Terapkan efek Gradient Overlay mau (Langkah 2.6).
Langkah 7
Klik kanan layer digabung dan pilih Create Clipping Mask. Dan di sana Anda memilikinya!
Langkah 8
Anda dapat menggunakan metode yang sama untuk membuat bayangan terpisah untuk setiap teks, dan mereka akan overlay dengan baik menciptakan variasi keren dari efek.
Untuk melakukan itu, membuat setiap baris teks dalam lapisan teks terpisah. Kemudian pilih kedua layer teks, duplikat mereka sekali, memindahkan lapisan di bawah salinan yang asli, dan mengubah warna font menjadi Black.
Langkah 9
Pilih lapisan menyalin teks baris pertama, masukkan Free Transform mode (CTRL / CMD + T), kemudian memindahkannya 1px 1px ke bawah dan ke kanan, dan tekanENTER / tombol RETURN untuk menerima perubahan.
Langkah 10
Tekan CMD / CTRL + ALT + SHIFT + tombol T untuk menduplikasi layer dan transformasi sampai bayangan meliputi ujung kanan bawah kotak merah. Kemudian pilih semua layer copy dan menggabungkan mereka (Layer> Merge Layers).
Langkah 11
Ulangi bahwa untuk copy layer teks baris kedua itu.
Langkah 12
Terapkan sama efek Gradient Overlay, dan membuat clipping mask untuk setiap lapisan bayangan.
Langkah 13
Anda juga dapat membuat bayangan memudar seperti yang dijelaskan dalam Tips Cepat di akhir Langkah 3.
5. Buat Bayangan Panjang Efek Menggunakan Peralatan 3D Photoshop
Ini adalah cara tercepat dan paling efisien, karena sederhana, dan dapat diedit sepenuhnya.
Langkah 1
Pilih layer teks kemudian pergi ke 3D> New 3D Ekstrusi dari Dipilih Layer. Ini akan mengkonversi layer teks ke layer 3D.
Langkah 2
Untuk mengedit pengaturan Anda perlu membuka dua panel: The 3D panel, dan panelProperties (keduanya di bawah menu Window). Panel 3D memiliki semua unsur Scene 3D, sedangkan panel Properties menampilkan Pengaturan dari elemen yang dipilih dalam panel 3D.
Mulailah dengan memilih tab View Current dalam panel 3D, kemudian pilih Top Viewdari menu drop down di panel Properties.
Langkah 3
Pilih nama teks mesh, klik ikon Koordinat di bagian atas panel Properties, dan mengubah X Rotasi Angle 90 ° sehingga teks wajah ke atas juga.
Langkah 4
Klik ikon Mesh di bagian atas panel Properties, kemudian mengubah Kedalaman Ekstrusi ke nilai cukup besar, dan yang digunakan di sini adalah 300.
Idenya adalah untuk menciptakan ekstrusi yang sangat panjang, yang akan menciptakan bayangan panjang ketika cahaya hits dari sudut tertentu. Jadi tergantung pada teks dan sudut cahaya, Anda mungkin perlu menggunakan nilai Extrusion Depth berbeda. Tapi biasanya Anda bisa mulai dengan nilai sekitar 200 atau 300.
Sebuah hal penting yang perlu diingat meskipun, adalah pergi ke 3D> Snap Obyek ke Ground Plane setelah setiap kali Anda mengubah nilai Depth Ekstrusi. Jika tidak, objek akan memperpanjang dalam Ground Plane dan Anda tidak akan melihat bahwa besar perbedaan.
Langkah 5
Jika Anda perlu skala teks atas atau bawah, lakukan selain dengan memperbesar atau memperkecilnya. Untuk melakukannya, pilih tab View Current dalam panel 3D, memilihMove Tool, dan memilih Skala ikon Object 3D dari 3D Mode diatur ke kanan Optionsbar. Kemudian klik dan tarik di mana saja di tempat kejadian. Tarik ke bawah untuk memperbesar, dan sampai zoom out.
Langkah 6
Setelah Anda suka bagaimana adegan terlihat, klik Infinite Cahaya 1 tab di panel 3D.Kemudian, Anda dapat melanjutkan dan mengubah nya Y Rotasi Angle 45 ° di panelProperties (setelah mengklik ikon Koordinat di bagian atas panel Properties).
Langkah 7
Atau Anda dapat menggunakan Move Tool untuk klik dan tarik cahaya yang Anda inginkan dalam adegan. Anda dapat melihat bagaimana bayangan tampak seolah Anda sedang bergerak ringan, sehingga terus bergerak di sekitar sampai Anda suka dengan tampilannya.
Langkah 8
Untuk mendapatkan warna yang tepat dari teks asli, yang putih, Anda harus menyesuaikan pengaturan Inflasi Bahan depan. Jadi mengubah warna specular ke White, dan kedua Penerangan dan warna Ambient Black. Kemudian mengubah nilaiPembersih menjadi 0.
Setelah Anda melakukannya, itu adalah ide yang baik untuk pergi ke 3D> Render untuk melihat bagaimana semuanya terlihat. Anda mungkin perlu mengubah beberapa nilai-nilai tergantung pada warna teks dan sudut cahaya. Sebagai contoh, jika warna teks agak gelap, Anda mungkin perlu mengubah nilai Pembersih sampai 100%.
Langkah 9
Setelah selesai dengan pengaturan Material Inflasi Front, klik tab Lingkungandalam panel 3D, dan gulir ke bawah panel Properties sampai Anda melihat bagianGround Plane. Ubah nilai Bayangan Opacity ke nilai yang Anda suka. Di sini, sudah diatur untuk 14.
Langkah 10
Pergi ke 3D> Render, untuk membuat adegan terakhir.
Langkah 11
Anda tidak dapat membuat Clipping Mask untuk layer 3D. Jadi kita akan mengubahnya menjadi Smart Object dengan pergi ke Filter> Convert for Smart Filter.
Langkah 12
Kemudian klik kanan Object lapisan Smart dan pilih Create Clipping Mask.
Langkah 13
Jika Anda perlu mengedit layer 3D, Anda perlu klik dua kali thumbnail Smart Objectlayer.
Langkah 14
Ini akan membuka file baru yang memiliki lapisan 3D asli. Anda kemudian dapat mengklik nama 3D mesh dalam panel 3D, kemudian klik tombol Edit Sumber bawah panelProperties.
Langkah 15
Ini akan membuka lagi file lain, dan file baru berisi layer teks. Anda dapat membuat perubahan yang Anda inginkan di sana, seperti mengubah teks, font, ukuran, warna dll, bagaimanapun, harus diubah dalam adegan 3D seperti yang akan Anda lihat berikutnya.
Setelah selesai, simpan file (File> Save), kemudian tutup (File> Close).
Langkah 16
Yang akan membawa Anda kembali ke file 3D, dan akan diperbarui dengan perubahan yang baru saja dibuat.
Jika Anda ingin mengubah warna, gunakan kotak warna Diffuse untuk melakukannya, dan kemudian Anda mungkin perlu menyesuaikan nilai Shine.
Ketika Anda selesai, membuat file sekali lagi, kemudian simpan file tersebut dan menutupnya.
Langkah 17
Smart Object akan diperbarui dalam file asli sekarang.
Selamat! Anda sudah selesai.
Dalam tutorial ini, kami menjelaskan beberapa metode yang dapat Anda gunakan untuk menciptakan efek bayangan panjang di Photoshop. Metode pertama menunjukkan cara membuat bayangan latar belakang menggunakan lapisan bentuk, maka kita menunjukkan kepada Anda bagaimana menggunakan pen tool untuk membuat bayangan panjang untuk teks, setelah itu, kami menunjukkan Anda bagaimana menggunakan duplikat dan teknik dorongan, akhirnya, kita menunjukkan kepada Anda bagaimana menggunakan alat 3D Photoshop untuk dengan cepat menciptakan efek bayangan panjang untuk karya seni Anda. Kami berharap bahwa Anda belajar sesuatu dalam tutorial ini dan dapat menggunakan tips ini untuk membantu menciptakan desain bayangan panjang Anda sendiri.
