Langkah 1: Menyiapkan Dokumen
Buka Photoshop dan buka File> New (atau CTRL + N) untuk membuat dokumen baru. Buat 125 piksel x 125 piksel dokumen pada 72 resolusi pixel / inch. Color Mode: RGB 8 bit. Latar Belakang: Transparan.
Pergi ke Edit> Fill. Gunakan: Warna ... # F2F2F2 untuk mengisi latar belakang kita.
Langkah 2: Membuat Area Logo
Pergi ke Layer> New Layer (atau Shift + CTRL + N) dan beri nama topBG kemudian klik OK.
Dengan Rectangular Marquee Tool dipilih, pilih Style: Ukuran Tetap dan mengatur Lebar: 125px dan Height: 30px. Kemudian klik kanan di atas banner untuk membuat pilihan di atas.
Pergi ke Edit> Fill dan Penggunaan: Warna ... # 171717 untuk mengisi seleksi.Lalu pergi ke Pilih> Deselect (atau CTRL + D).
Dengan Alat Elliptical dipilih, pilih Style: Ukuran Tetap dan mengatur Lebar: 186px dan Height: 42px. Sekarang klik di mana saja untuk membuat seleksi kemudian memindahkannya ke tengah kanvas sehingga bagian bawah seleksi bahkan dengan bagian bawah persegi panjang.
Sekarang pergi ke Pilih> Inverse (atau Shift + CTRL + I) dan tekan Delete pada keyboard Anda. Lalu pergi ke Pilih> Deselect (atau CTRL + D) dan Anda harus dibiarkan dengan ini:
Klik kanan layer topBG dan pilih Duplicate Layer ... Sekarang klik kanan layer topBG asli lagi dan pilih Blending Options. Memberikan Overlay Color menggunakan # ff9200.
Sekarang pergi ke Edit> Transform> Warp. Sambil menahan shift klik dan tarik dari antara dua titik bawah tengah sedikit turun untuk menciptakan sesuatu seperti ini:
Tekan enter untuk menerima warp. Terakhir, kita perlu membuka kami logo berkas dan meletakkannya di atas lapisan topBG copy.
Langkah 3: Membuat Teks Background
Pergi ke Layer> New Layer dan beri nama textBG kemudian klik OK. Dengan Rectangular Marquee Tool dipilih, pilih Style: Ukuran Tetap dan mengatur Lebar: 125px dan Height: 37px kemudian klik di bawah area logo untuk menentukan pilihan.
Pergi ke Edit> Fill dan Penggunaan: Warna ... # FFFFFF untuk mengisi seleksi.
Sekarang kita perlu Add vector mask ke lapisan textBG, sehingga dengan textBG dipilih klik pada Add vector mask icon di bagian bawah kelompok lapisan.
Pilih Gradient Tool sekarang dan klik pada gradien di bagian atas untuk mengeditnya. Kemudian kita akan membuat 3 poin sebagai berikut .. Lokasi: 0% - Warna: # 000000 | Lokasi: 50% - Warna: # FFFFFF | Lokasi: 100% - Warna: # 000000
Sekarang sambil menahan Shift, tarik dari sisi kiri persegi panjang ke kanan untuk membuat gradien pada topeng vektor dan Anda harus dibiarkan dengan sesuatu seperti ini:
Klik kanan layer textBG dan pergi ke Blending Options .. Menggunakan pengaturan ini sekarang kita akan menambah gaya:
Drop Shadow - Blend Mode: normal # 000000, Opacity: 18%, Angle: 90, Distance: 2px, Sebarkan: 0px, Ukuran: 3px
Langkah 4: Membuat Layer Teks
Pilih pengaturan Type Tool dan penggunaan Horizontal .. Font Family: Bebas Neue, Font Size: 14px, Anti-aliasing Metode: Sharp, text Pusat Align (penting akan menghemat waktu menyelaraskan). Saya juga mengatur Pelacakan ke 40 untuk memberikan teks beberapa ruang bernapas. Sekarang klik dan ketik lapisan pertama teks yang akan terlihat, saya adalah " Photoshop Tutorial ".
Sekarang kita harus yakin teks kita berpusat horizontal dan vertikal dalam latar belakang teks. Jadi dengan Move Tool dipilih, tahan CTRL dan klik pada gambar thumbnail di samping layer textBG untuk membuat pilihan di sekitarnya. Kemudian klik Sejajarkan pusat vertikal dan horisontal Sejajarkan pusat di bagian atas.
Klik kanan layer teks dan pergi ke Blending Options .. Kita sekarang akan gaya teks menggunakan pengaturan di bawah:
Overlay Gradient: - Blend Mode: Normal, Opacity: 100%, Gradient: Location 0% - Warna # 171717 | Lokasi 100% - Warna # 707070, Angle: 90
Kita sekarang perlu untuk menduplikasi layer teks untuk setiap lapisan sisa teks yang Anda berencana untuk menggunakan. Saya menggunakan 4 lapisan dari total teks (Photoshop Tutorial, Coding Tutorial, Sumber Daya, dan banyak lagi ...) jadi saya akan menduplikasi layer teks 3 kali dan mengubah setiap lapisan copy kepada mereka yang tersisa dengan menggunakan Horizontal Type Tool lagi.Setelah ini dilakukan, menyembunyikan mereka semua untuk sekarang menggunakan ikon bola mata sebelah lapisan kecuali lapisan terlihat pertama teks (Photoshop Tutorial dalam kasus saya).
Sekarang kita punya semua lapisan teks kita dibuat, kita perlu klik kanan masing-masing individu dan duplikat layer. Duplikat ini akan digunakan untuk menciptakan efek warp yang akan kita gunakan nanti saat animasi. Lapisan terlihat terakhir dalam animasi (dan lebih ... dalam kasus saya) tidak perlu digandakan seperti yang kita akan melakukan fade di fade out animasi untuk itu tidak seperti yang pertama 3 lapisan teks. Setelah itu CTRL + Klik pada setiap lapisan copy untuk memilih mereka semua, kemudian klik kanan salah satu dari mereka dan pilih Rasterize Type. Kelompok lapisan Anda sekarang harus terlihat seperti ini:
Pilih layer pertama teks copy sekarang (Photoshop Tutorial copy dalam kasus saya) kemudian pergi ke Blur> Motion Blur dan pengaturan penggunaan .. Angle: 0, Jarak: 15. Sembunyikan layer salinan pertama sekarang kemudian membuat layer copy berikutnya terlihat dan ulangi langkah ini sampai semua ketiganya kabur.
Langkah 5: Membuat Tombol Call to Action
Dengan pengaturan penggunaan dipilih Rounded Rectangle Tool .. Lebar: 101px, tinggi: 28px, Radius: 5px. Kemudian klik di bawah area teks untuk membuat persegi panjang bulat. Pusat dan memindahkannya sekitar 10px turun dari area teks.
Klik kanan layer Rounded Rectangle dan pergi ke Blending Options .. Kita sekarang akan gaya tombol menggunakan pengaturan di bawah:
Stroke: - Ukuran: 1px, Posisi: Di dalam, Blend Mode: Normal, Opacity: 100%, Warna: # f78b00
Inner Shadow: - Blend Mode: normal # ffd39b, Opacity: 100%, Angle: 90, Distance: 2px, Choke: 0px, Ukuran: 0px
Overlay Gradient: - Blend Mode: Normal, Opacity: 100%, Gradient: Location 0% - Warna # f78b00 | Lokasi 100% - Warna # ffb14d, Angle: 90
Mengatur warna latar depan # FFFFFF dan dengan Horizontal Type Tool sekarang kita akan menambahkan teks ke tombol menggunakan pengaturan ..Font-Family: Bebas Neue, Font Size: 19px, Anti-aliasing: Sharp, Tracking: 40.
Klik kanan Gabung Sekarang! layer dan pergi ke Blending Options .. Kita sekarang akan gaya teks menggunakan pengaturan di bawah:
Jatuhkan Bayangan: - Blend Mode: normal # c67711, Opacity: 100%, Angle: 90, Distance: 1px, Sebarkan: 0px, Ukuran: 1px
Pergi ke Layer> New Layer (atau Shift + CTRL + N) dan beri nama bayangan.Menggunakan pengaturan penggunaan Elliptical Marquee Tool .. Style: Fixed Size, Lebar: 114px, tinggi: 11px dan klik di mana saja untuk membuat seleksi.
Berikutnya pergi ke Edit> Fill dan pilih warna ... # 000000 untuk mengisi seleksi.Lalu pergi ke Pilih> Deselect (atau CTRL + D).
Berikutnya pergi ke Filter> Blur> Gaussian Blur dan set Radius ke 2,0 Pixels.
Akhirnya memindahkan bayangan lapisan di balik lapisan Rounded Rectangle dan mengatur Opacity menjadi sekitar 44%. Anda akan perlu untuk menyelaraskan bayangan berpusat dengan tombol setengah bayangan harus berada di balik tombol seperti ini:
Langkah 6: Membuat Animasi
Pertama kita perlu membuka Timeline. Jadi pergi ke Window> Timeline untuk menariknya ke atas. Menggunakan panah dropdown pada Timeline, kita perlu memeriksa Buat Bingkai Animation, kemudian klik tombol Create Animation Bingkai.
Kita juga perlu mengatur pilihan Looping untuk Selamanya dengan menggunakan dropdown juga.
Sekarang kita harus yakin semua lapisan teks dan salinan yang tersembunyi kecuali untuk lapisan pertama dari teks yang ingin terlihat (Photoshop Tutorial dalam kasus saya). Kemudian mengatur waktu tunda Bingkai 1,5 detik dengan memilih Lainnya ... dari dropdown.
Berikutnya klik Duplicate Selected Frames icon di bagian bawah. Kemudian menyembunyikan lapisan pertama teks dan menunjukkan itu lapisan copy (versi kabur). Kemudian mengatur itu Bingkai Waktu tunda sampai 0,1 detik.
Ulangi dua langkah terakhir untuk sisa dua lapisan teks yang kita akan menerapkan animasi untuk warp. Ingat lapisan terakhir dari teks kita akan memudar dalam dan keluar bukan jadi kita hanya akan menerapkan langkah pertama di sini untuk itu. Jadi, Anda harus memiliki 7 frame sekarang, berakhir dengan lapisan terakhir dari teks yang dapat dilihat (dan lebih ... dalam kasus saya).
Berikutnya Gandakan Frames Dipilih lagi, pada frame ini menyembunyikan semua lapisan teks.
Selanjutnya klik ikon Tween pada pengaturan dasar dan penggunaan .. Tween dengan: Frame Sebelumnya, Bingkai untuk Tambah: 5, Layers: All Layers, Parameter: Semua diperiksa. Lalu klik OK.
Sekarang dari Bingkai 8-13 adalah efek memudar dan kita perlu ini menjadi halus sehingga kita perlu mengatur semua Bingkai mereka Penundaan Times untuk 0 detik. Dengan Bingkai 13 dipilih tahan tombol Shift dan kemudian klik Bingkai 8 untuk memilih mereka semua. Kemudian klik salah satu Bingkai Keterlambatan Waktu dropdown dan mengubah No Delay dan mereka semua akan berubah.
Sekarang pilih frame 13, lalu klik Duplicate Selected Frames lagi. Pada Bingkai 14 kita perlu membuat lapisan pertama teks terlihat lagi (Photoshop Tutorial dalam kasus saya).
Akhirnya, kita perlu mengulang Tween yang sama kita hanya melakukan satu menit yang lalu untuk menciptakan memudar berlaku kembali ke Frame 1. Jadi dengan Frame 14 dipilih klik ikon Tween lagi dan menggunakan pengaturan .. Tween Dengan: Frame Sebelumnya, Bingkai untuk Tambah: 5, Layers: All Layers, Parameter: Semua Checked. Setelah kita melakukan ini, kita akan memiliki 19 Frames dan animasi selesai.
Langkah 7: Menyimpan Dokumen Web
Buka File> Save for Web .. Di sini kita perlu menyimpan dokumen sebagai GIF. Dan kita sudah selesai!
No comments:
Post a Comment