24. Tombol Rollover Gelas Buat di CorelDRAW

Jika Anda menemukan diri Anda sendiri berharap bahwa Anda tahu cara membuat mereka, keren tombol transparan seperti gelas populer di desain antarmuka tertentu, keinginan Anda diberikan. I'm talking about those pill-shaped buttons that appear to be made from colored glass or see-though plastic. Aku sedang berbicara tentang tombol-tombol berbentuk pil yang tampaknya terbuat dari kaca berwarna atau melihat-meskipun plastik. At first glance, the effect looks like something created with expensive 3D modeling software, but the truth is, you can come very close to illustrating the same effect by using just two or three carefully adjusted vector shapes. Pada pandangan pertama, efeknya tampak seperti sesuatu yang diciptakan dengan 3D modeling software mahal, tetapi kenyataannya adalah, Anda bisa datang sangat dekat untuk menggambarkan efek yang sama dengan menggunakan hanya dua atau tiga bentuk vektor dengan hati-hati disesuaikan. In this tutorial, I'll show you how to use CorelDRAWâ to create glass objects like those shown below. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menggunakan CorelDRAWâ untuk membuat objek kaca seperti yang ditunjukkan di bawah ini.

Create a Clear Glass Orb Membuat Orb Kaca Clear
Glass effects are influenced by such key factors as lighting direction, light intensity, reflection, focus, and color. Efek Kaca dipengaruhi oleh faktor-faktor kunci seperti arah pencahayaan, intensitas cahaya, refleksi, fokus, dan warna. In any solid transparent object, the color is darker at the outer edges than in the middle. Dalam setiap benda padat transparan, warna lebih gelap pada tepi luar daripada di tengah. Soft overhead lighting bounces off the shiny surface of the glass, creating a reflection of the light source. pencahayaan overhead Soft memantul dari permukaan kaca mengkilat, menciptakan refleksi dari sumber cahaya. The more focused the reflection, the smoother the surface will be. Semakin memfokuskan refleksi, halus permukaan akan.
Using CorelDRAW to simulate glass effects involves carefully applying your vector objects with color and transparency effects. Menggunakan CorelDRAW untuk mensimulasikan efek kaca melibatkan hati-hati menerapkan obyek vektor Anda dengan efek warna dan transparansi. To demonstrate how color and lighting influence the effect, let's start with the simple creation of a colored glass object: Untuk mendemonstrasikan bagaimana warna dan pencahayaan mempengaruhi efek, mari kita mulai dengan penciptaan sederhana dari sebuah benda kaca berwarna:

1. Using the Ellipse Tool draw a circle that is roughly 2 inches in diameter. Menggunakan Perangkat Ellipse menggambar sebuah lingkaran yang kira-kira 2 inci dengan diameter. Holding the Ctrl key constrains the ellipse shape to a circle. Menahan tombol Ctrl membatasi bentuk elips untuk lingkaran.
   
2. For a color mode, use the default CMYK palette. Untuk mode warna, gunakan palet CMYK default. If the color palette isn't in view, you can display it by choosing Window > Color Palettes > Default CMYK palette. Jika palet warna tidak melihat, anda dapat menampilkannya dengan memilih Window> Color Palettes> Default CMYK palet. With the circle still selected, click the Yellow well ( C0, M0, Y100, K0 ) to set the circle's fill color. Dengan lingkaran masih dipilih, klik sumur Kuning (C0, M0, Y100, K0) untuk mengatur's mengisi warna lingkaran. Choose the Interactive Fill tool ( shortcut key G ), and use the property bar options to set the Fill Type to Radial ( see below ). Pilih Isi alat Interaktif (shortcut G kunci), dan menggunakan pilihan properti bar untuk mengatur Isi Ketik untuk Radial (lihat di bawah).

3. For precise adjustment of the fountain fill colors and color positions in this example, I recommend using the Fountain Fill dialog ( press F11 ). Untuk penyesuaian yang tepat dari air mancur warna dan mengisi posisi warna dalam contoh ini, saya sarankan menggunakan Isi dialog Fountain (tekan F11). To specify your fountain colors, click the Custom radio button. Untuk menentukan warna air mancur Anda, klik tombol radio Custom. Click the far left ( 0 percent position ) color marker ( it's black when selected ), and click the Others button to access more color options. Klik (0 persen posisi warna) marker tertinggal jauh (itu hitam bila dipilih), dan klik tombol lain untuk mengakses lebih banyak pilihan warna. Set the CMYK values to C40, M50, Y100, K20. Mengatur nilai CMYK untuk C40, M50, Y100, K20. Set the far right ( 100 percent position ) color marker to C0, M0, Y100, K0. Mengatur (100 persen posisi warna) marker kanan jauh ke C0, M0, Y100, K0. Double-click to add two more color markers at 25 percent and 80 percent, and set these to C0, M5, Y100, K20 and C0, M0, Y100, K0, respectively ( as shown below ). Double-klik untuk menambahkan dua spidol warna yang lebih di 25 persen dan 80 persen, dan menyetelnya ke C0, M5, Y100, K20 dan C0, M0, Y100, K0, masing-masing (seperti yang ditunjukkan di bawah).

4. To finish the color effect, set the Edge Pad option on the Property Bar to 5 percent, and remove any outline properties applied to the circle by right-clicking the None color well in the onscreen color palette. Untuk menyelesaikan efek warna, atur pilihan Edge Pad pada Property Bar sampai 5 persen, dan menghapus sifat garis yang ditetapkan untuk lingkaran dengan mengklik kanan warna Tidak ada baik dalam palet warna pada layar. Your custom fill is now complete ( see below ). mengisi kustom Anda sekarang lengkap (lihat di bawah).

5. For the reflection effect, create a second circle that's roughly 1.5 inches in diameter, fill it with white, and position it to be centered and slightly below the top of the first circle. Untuk efek refleksi, membuat lingkaran kedua yang kira-kira berdiameter 1,5 inci, isi dengan putih, dan posisi itu menjadi terpusat dan sedikit di bawah bagian atas lingkaran pertama. With the circle still selected, choose the Interactive Transparency Tool and drag from the top to the bottom of the shape. Dengan lingkaran masih dipilih, pilih Interactive Transparency Tool dan drag dari atas ke bawah bentuk. Remove any outline from the new circle. Hapus semua garis dari lingkaran baru.
   
6. Position the white, black, and midpoint nodes of the transparency slider precisely, as shown below. Posisi node putih, hitam, dan titik tengah slider transparansi tepat, seperti yang ditunjukkan di bawah ini. Drag the black marker to the center of the yellow circle, drag the white marker slightly below the circle's top edge, and drag the midpoint marker upward, three quarters of the way between the two. Tarik spidol hitam ke pusat lingkaran kuning, tarik penanda putih sedikit di bawah tepi atas lingkaran, dan tarik penanda titik tengah ke atas, tiga perempat dari cara antara keduanya.

With just two objects, you've created a realistic-looking glass object. Dengan hanya dua benda, Anda telah membuat objek kaca yang tampak realistis. Note that the custom colors I specified provide the illusion that the edges of the shape let less light through than the middle portion, giving the shape the impression of flatness. Perhatikan bahwa warna kustom saya ditentukan memberikan ilusi bahwa tepi bentuk membiarkan kurang cahaya melalui dari bagian tengah, memberikan bentuk kesan kerataan. The more pronounced the darkened edges are, the flatter the shape appears to be. Semakin lebih jelas tepi gelap, semakin datar bentuk tampaknya.
The same steps can be used to turn virtually any simple shape into glass. Langkah-langkah yang sama dapat digunakan untuk mengubah hampir semua bentuk yang sederhana ke dalam gelas. Just keep in mind that you need to pay close attention to both the custom fountain fill and the transparency marker positions for the effect to appear realistic. Hanya perlu diingat bahwa Anda perlu memperhatikan baik mengisi air mancur adat dan posisi penanda transparansi untuk efek untuk tampil realistis.
Draw Glassy Buttons Draw Tombol Gelas
The same basic effect can be used to simulate the cool 3D appearance of glass pill-shaped buttons. Efek dasar yang sama dapat digunakan untuk mensimulasikan tampilan 3D dingin tombol kaca berbentuk pil. The steps involve rounding the corners of a rectangle filled with a specific linear fountain fill and applying resized white copies of the rectangle with transparency to simulate the reflection. Langkah-langkah melibatkan pembulatan sudut persegi panjang diisi dengan air mancur linier khusus mengisi dan menerapkan salinan putih ukurannya persegi panjang dengan transparansi untuk mensimulasikan refleksi. Although there are several ways to construct glass pill-shaped buttons, this method is perhaps the quickest and uses the fewest shapes: Meskipun ada beberapa cara untuk membangun tombol kaca berbentuk pil, metode ini mungkin yang tercepat dan menggunakan bentuk paling sedikit:

1. Using the Rectangle Tool ( F6 ), draw a rectangle roughly 1 inch high by 4.5 inches wide. Menggunakan Rectangle Tool (F6), menggambar persegi panjang sekitar 1 inci tinggi sebesar 4,5 inci. ( Use different proportions for larger or smaller text button labels if needed. ) (Gunakan proporsi berbeda untuk tombol kecil teks atau label yang lebih besar jika diperlukan.)
   
2. With the rectangle selected, use the Rectangle Corner Roundness and Round Corners Together options on the Property Bar to round all four corners by 100 percent, as shown below. Dengan persegi panjang dipilih, gunakan Persegi Panjang Sudut bundar dan Round Corners Bersama pilihan pada Property Bar untuk babak keempat sudut sebesar 100 persen, seperti yang ditunjukkan di bawah ini. You can also do this interactively by using the Shape Tool ( F10 ). Anda juga dapat melakukan ini secara interaktif dengan menggunakan Shape Tool (F10).

Note: To preserve the symmetry of your rounded rectangle corners, create the shape at the exact size you need it to be instead of adjusting it vertically or horizontally through scaling. Catatan: Untuk menjaga simetri persegi panjang sudut bulat Anda, menciptakan bentuk pada ukuran yang tepat yang Anda butuhkan untuk menjadi bukan menyesuaikan secara vertikal maupun horizontal melalui scaling. Scaling operations affect the proportions of rounded rectangle corners. operasi Scaling mempengaruhi proporsi sudut persegi panjang bulat.

3. Choose the Interactive Fill Tool and drag vertically from the top to the bottom of the shape to apply a default linear fountain fill. Pilih Interactive Fill Tool dan tarik vertikal dari atas ke bawah untuk menerapkan bentuk air mancur default linier mengisi. To add colors at precise points, open the Fountain Fill dialog ( F11 ), and click Custom. Untuk menambahkan warna pada titik-titik yang tepat, membuka dialog Fountain Fill (F11), dan klik Custom. In this example, I've used a cyan blue color scheme. Dalam contoh ini, saya telah menggunakan skema warna biru cyan. Set the 0 percent marker to C100, M20, Y0, K80 and the 100 percent marker to C10, M0, Y0, K0. Mengatur 0 persen tanda untuk K80 C100, M20, Y0, dan 100 penanda persen menjadi K0 C10, M0, Y0,. Add a third color marker at the 40 percent position, and set it to C100, M20, Y0, K20 ( as shown below ). Tambahkan penanda warna ketiga pada posisi 40 persen, dan mengaturnya agar C100, M20, Y0, K20 (seperti yang ditunjukkan di bawah). Before closing the dialog, set the Edge Pad option to 5 percent. Sebelum menutup dialog, atur pilihan Edge Pad sampai 5 persen. Remove any outline properties from the shape. Hapus properti garis apapun dari bentuk.

4. Create a second rectangle roughly 0.4 inches high ( slightly less than half an inch ) by 4 inches wide, and round the corners by 100 percent. Buat persegi panjang kedua sekitar 0,4 inci tinggi (kurang sedikit dari setengah inci) dengan 4 inci lebar, dan bulat sudut sebesar 100 persen. Fill the new rectangle with white, remove any outline properties, and position it to center vertically with the first rectangle and slightly below the top edge (see below). Isi kotak baru dengan putih, menghapus properti outline, dan posisi ke pusat vertikal dengan persegi panjang pertama dan sedikit di bawah tepi atas (lihat di bawah).

5. Choose the Interactive Transparency Tool and drag vertically from the top edge to the bottom of the white rectangle to apply a default linear transparency effect ( see below ). Pilih Interactive Transparency Tool dan tarik vertikal dari tepi atas ke bawah persegi panjang putih untuk menerapkan transparansi efek linear default (lihat di bawah). Use the Property Bar to set the Edge Pad value to 8 percent. Gunakan Property Bar untuk mengatur nilai Edge Pad hingga 8 persen.

6. Choose the Pick Tool and duplicate the transparent rectangle by pressing the plus sign ( + ) key on your numeric keypad. Pilih Pick Tool dan duplikat persegi panjang transparan dengan menekan tanda plus (+) tombol pada keypad numerik Anda. Scale this new copy by dragging the center-bottom handle downward to just above the bottom edge of the arrangement. Skala ini salinan baru dengan menarik pusat-bawah ke bawah untuk menangani tepat di atas tepi bawah pengaturan. Set the fill color of this new object to 100 percent Cyan by clicking the Cyan well in the onscreen color palette. Mengatur warna mengisi obyek baru untuk 100 persen Cyan dengan mengklik Cyan baik dalam palet warna pada layar.
   
7. Choose the Interactive Transparency Tool and drag upward vertically from slightly below the bottom edge to a point halfway up the shape's height. Pilih Interactive Transparency Tool dan tarik ke atas secara vertikal dari sedikit di bawah tepi bawah ke titik tengah sampai tinggi bentuk itu. To soften the effect slightly, drag from your CMYK palette 60 percent black well onto the white transparency marker. Untuk melunakkan efek sedikit, drag dari palet CMYK Anda 60 persen hitam baik ke penanda transparansi putih. To complete the effect, set the Transparency Operation option on the Property Bar to Add. Untuk menyelesaikan efek, atur pilihan Transparansi Operasi pada Property Bar untuk Tambah. Select, and group your objects together ( Ctrl+G ). Pilih, dan kelompok Anda objek bersama-sama (Ctrl + G). The button is virtually complete ( see below ). tombol ini hampir lengkap (lihat dibawah).

Although this example uses a blue theme, you can customize it to virtually any color theme you wish by editing each of the four color markers of the custom fountain fill to create variations ( see below ). Meskipun contoh ini menggunakan tema biru, Anda dapat menyesuaikan untuk hampir semua tema warna yang Anda inginkan dengan mengedit masing-masing dari empat spidol warna air mancur adat mengisi untuk menciptakan variasi (lihat di bawah).

As an alternative to creating a custom color fill button, you can apply a lens effect to create the illusion of clear glass distorting an underlying surface pattern ( see below ). Sebagai alternatif untuk menciptakan warna kustom isi tombol, Anda dapat menerapkan efek lensa untuk menciptakan ilusi kaca jelas mendistorsi pola permukaan dasar (lihat di bawah). To do this, first create a larger rectangular shape to serve as a background for the button. Untuk melakukan ini, pertama membuat bentuk persegi panjang yang lebih besar untuk melayani sebagai latar belakang untuk tombol. In this example, a bitmap fill was used. Dalam contoh ini, mengisi bitmap digunakan. To apply a bitmap fill to any selected object, choose the Interactive Fill Tool and set the Property Bar Fill Type option to Bitmap Pattern. Untuk menerapkan bitmap mengisi untuk setiap objek yang dipilih, pilih Interactive Fill Tool dan mengatur Bar Isi pilihan Ketik untuk Bitmap Pola. Create your rounded rectangle shape for the button on top of the background, then open the Lens docker ( Alt+F3 ), and choose Fish Eye. Buat bentuk persegi panjang dibulatkan Anda untuk tombol di atas latar belakang, kemudian buka buruh pelabuhan Lens (Alt + F3), dan pilih Fish Eye. Increase the Rate option to distort the underlying surface, and click the Apply button. Meningkatkan pilihan Rate mendistorsi permukaan yang mendasari, dan klik tombol Apply. The higher the rate, the more distortion is applied. Semakin tinggi tingkat, distorsi lebih banyak diterapkan. After applying the lens to the first shape, create and align the two smaller rounded rectangle shapes, set their fill color to white, and apply a transparency ( top to bottom for the smaller shape, bottom to top for the bigger shape ) to create the fountain effect. Setelah menerapkan lensa dengan bentuk pertama, membuat dan menyelaraskan dua bentuk persegi panjang kecil bulat, mengatur warna mengisi mereka menjadi putih, dan menerapkan transparansi (atas ke bawah untuk bentuk yang lebih kecil, bawah ke atas untuk bentuk yang lebih besar) untuk membuat efek air mancur.

Add artistic text to your buttons by using the Text tool. Tambahkan teks artistik untuk tombol anda dengan menggunakan alat Teks. Set your text to a centered alignment. Mengatur teks Anda ke penyelarasan berpusat. If you select the text and the grouped button shapes, you can use the alignment hot keys in CorelDRAW to center-align the text and the button group vertically ( press C ) and horizontally ( press E ). Jika Anda memilih teks dan bentuk tombol dikelompokkan, Anda dapat menggunakan tombol panas keselarasan dalam CorelDRAW ke pusat-align teks dan kelompok tombol vertikal (tekan C) dan horizontal (tekan E). If you need to create multiple buttons with different text but the same design, you can use this first version as a template ( see below ). Jika Anda perlu untuk membuat beberapa tombol dengan teks yang berbeda namun desain yang sama, Anda dapat menggunakan versi pertama sebagai template (lihat di bawah).

Create Button Rollover States Buat Amerika Rollover Button
To make the button interactive, you can add a realistic rollover effect. Untuk membuat tombol interaktif, Anda dapat menambahkan efek rollover realistis. Because you're simulating the effect of three-dimensional objects with realistic lighting, adding shadows is the next logical step. Karena Anda mensimulasikan efek dari benda tiga dimensi dengan pencahayaan yang realistis, menambahkan bayangan adalah langkah logis berikutnya. In these next steps, we'll use the Internet Toolbar to convert the button to a rollover and edit the button states. Dalam langkah selanjutnya, kita akan menggunakan Internet Toolbar untuk mengubah tombol untuk rollover dan mengedit tombol negara.

1. Using the button design you created in the previous step sequence, choose the Pick Tool, and ungroup ( Ctrl+U ) the button shapes you grouped together in the previous steps. Menggunakan desain tombol yang Anda buat dalam urutan langkah sebelumnya, pilih Pick Tool, dan ungroup (Ctrl + U) tombol bentuk yang dikelompokkan bersama dalam langkah sebelumnya.
   
2. Choose the Interactive Drop Shadow Tool, and click your pill-shaped rectangle. Pilih Interactive Drop Shadow Tool, dan klik kotak berbentuk pil Anda. Hold Ctrl, and drag from the center of the shape downward to apply a drop shadow at default settings. Terus tombol Ctrl, dan tarik dari pusat bentuk ke bawah untuk menerapkan drop shadow pada setelan default. Use the Property Bar options to set the shadow X offset to 0 and the Y offset to –0.03 inches ( a negative value ). Gunakan pilihan Properti Bar untuk mengatur bayangan X offset ke 0 dan Y offset untuk -0,03 inci (nilai negatif). Set your Drop Shadow Opacity to 80 and the Feathering to 7. Tetapkan Drop Shadow Opacity menjadi 80 dan bulu sampai 7. Set the shadow color to the base color of your button — in this case, cyan ( see below ). Mengatur warna bayangan dengan warna dasar tombol Anda - dalam hal ini, cyan (lihat di bawah).

3. Select all objects in the arrangement, and open the Internet Toolbar by choosing Window > Toolbars > Internet. Pilih semua objek dari pengaturan tersebut, dan buka Internet Toolbar dengan memilih Window> Toolbars Internet>. Click the Create Rollover button ( shown below ) to convert the entire button arrangement into a rollover button. Klik tombol Buat Rollover (ditampilkan di bawah) untuk mengubah pengaturan tombol tersebut ke dalam sebuah tombol rollover. Be sure the Live Preview of Rollovers button is toggled to the "off" state. Pastikan tombol Pratinjau Live Rollover adalah toggle ke negara "off".

4. Click the Edit Rollover button on the Internet toolbar to set the active rollover state to Normal, as indicated by both the toolbar option and the page tabs at the bottom of your document window ( see below ). Klik tombol Edit Rollover pada toolbar Internet untuk mengatur negara rollover aktif ke Normal, seperti ditunjukkan oleh kedua pilihan toolbar dan halaman tab di bagian bawah jendela dokumen Anda (lihat di bawah). We've already created the basic button, so we're going to leave the Normal state unchanged. Kami telah membuat tombol dasar, jadi kita akan meninggalkan negara Normal berubah.

5. To switch to the mouse-over state, choose Over from the Active Rollover State selector on the Internet Toolbar. Untuk beralih ke mouse-atas negara, pilih Lebih dari pemilih Rollover Aktif Negara di Internet Toolbar. Select your button text, and change its color. Pilih teks tombol Anda, dan mengubah warna. In my case, I've simulated a brightening effect by changing the text fill from black to white, as shown below. Dalam kasus saya, saya telah simulasi efek cerah dengan mengubah teks isi dari hitam menjadi putih, seperti yang ditunjukkan di bawah ini.

6. Switch to the mouse-down editing state by choosing Down from the Active Rollover State selector. Beralih ke negara mengedit mouse-down dengan memilih Down dari pemilih Rollover Aktif Negara. Using the Pick Tool, click to select the drop shadow, and choose Effects > Clear Drop Shadow to remove it. Menggunakan Perangkat Pick, klik untuk memilih drop shadow, dan pilih Efek> Hapus Drop Shadow untuk menghapusnya.
   
7. While still in the Down editing state, select all objects in the arrangement, and open the Transformation docker to the Position tab by choosing Arrange > Transformations > Position ( Alt+F7 ). Sementara masih dalam keadaan Down mengedit, pilih semua objek dari pengaturan tersebut, dan buka buruh pelabuhan Transformasi ke tab Posisi dengan memilih Atur> Transformasi> Posisi (Alt + F7). Enter 0 in the H box and -0.03 in the V box ( see below ), and click the Apply button. Masukkan 0 di kotak H dan -0,03 di kotak V (lihat di bawah), dan klik tombol Apply. This action offsets the entire button by the same offset as the shadow. Tindakan ini offset tombol seluruh oleh offset yang sama seperti bayangan.

8. Close the Transformation docker, and click the Finish Editing Rollover button on the Internet Toolbar. Tutup Transformasi buruh pelabuhan, dan klik tombol Finish Editing Rollover di Internet Toolbar. Your rollover is complete. rollover Anda selesai.

Temporarily activate the rollover preview by toggling the Live Preview of Rollovers button to the "on" state, and test-drive your new rollover button. Sementara mengaktifkan preview rollover oleh Toggling Pratinjau Live tombol Rollover ke "on" negara, dan uji coba tombol rollover baru Anda. Passing your cursor over the button causes the text label to change color. Melewati kursor di atas tombol menyebabkan label teks untuk mengubah warna. When clicked, the button is offset vertically, and the shadow is displaced. Ketika di-klik, tombol offset vertikal, dan bayangan tersebut dipindahkan.