menggambar dengan adobe photoshop …  · web viewmenggambar dengan adobe photoshop untuk membuat...

15
MENGGAMBAR DENGAN ADOBE PHOTOSHOP Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut ini akan ditampilkan beberapa contoh dalam mendisain. Memakai Adobe Photoshop 6.0 Tampilan layout Photoshop 6.0 Tools Navigator dan Info tentang gambar yang dibuka Color, Swatches, dan Style

Upload: others

Post on 10-Mar-2020

23 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

MENGGAMBAR DENGAN ADOBE PHOTOSHOP

Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut ini akan ditampilkan beberapa contoh dalam mendisain.

Memakai Adobe Photoshop 6.0

Tampilan layout Photoshop 6.0 Tools

 

Navigator dan Info tentang gambar yang dibuka Color, Swatches, dan Style

 

Page 2: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Layers Channels

Paths

History

Options

tampilan layers yang digunakanberisi informasi image color mode pada gambar dan dapat membuat channel baru berisi info tentang penggambaran menggunakan pensil berisi info tentang langkah-langkah yang sudah dikerjakan berisi info tentang actions yang sudah dikerjakan

 

Image - Adjust Berfungsi untuk memberi efek pada pewarnaan gambar.

Layer - Layer Style Memberikan efek/ style pada gambar yang berdasarkan layer, seperti blending, drop shadow

(bayangan), bevel and emboss (kesan 3-D), satin, dan lainnya.

Page 3: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Filter Membuat efek pada gambar, seperti Artistik, Blur, dan lainnya.

1. MEMBUAT BUTTON

Tahap 1Pertama Tama Buat file baru fill dengan warna backgorund. kemudian buat layer baru. pilih tool elliptical marquee dan buat sebuaH lingkaran lalu di Fill. Di sini saya menggunakan warna coklat sebagai forEgorund dan background hitam. Anda bebas menentukan warna lainnya.

Tahap 2Kemudian buat layer baru. pilih tool airbrush atur settingnya dengan diameter 18 pixel dan hardness 100% dan cat lah lingkaran tadi dengan warna putih sehingga keliatan seperti gambar di samping.

Tahap 3Kemudian berikan effek Gaussian blur dengan radius pixel. gambar anda skr seharusnya sudah seperti gbr di samping

Page 4: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Tahap 4Langkah terakhir adalah mendeselect selection dan bola anda sudah selesai. anda dapat mengubah warnanya melalui menu Image/Adjust/Hue saturation

 

2. MENGGAMBAR BUTTON (TOMBOL NAVIGASI)

Langkah 1. Buatlah media gambar baru berukuran 100 x 100 pixel dan pilihlah latar belakang putih dengan memilih Content = white pada saat anda membuat document baru ( File - New )

Langkah 2. Buatlah gambar lingkaran dengan ukuran 70 x 70 pixel dengan

mengunakan elipse tools . ( Untuk mendapatkan ukuran 70 x 70 pixel klik

2x icon kemudian pada option Style rubahlah Normal menjadi Fixed Style, Kemudian masukan nilai 70 pada kolom Widht dan 70 pada kolom Height ).

Langkah 3.Tentukan Warna background dan foreground sesuai dengan warna favorite anda. dalam contoh ini gue menggunakan background = hitam dan foreground = abu abu.

Page 5: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Langkah 4. Kemudian pilihlah icon linear gradient

dan click 2x icon untuk meyakinkan bahwa anda telah memilih option Gradient = Foreground to Background. Tariklah sesuai tanda panah di samping kiri ini.

Langkah 5. Kembali seperti langkah 2 dengan membuat circle mask denga ukuran 50 x 50 pixels. Dan tempatkan mask tersebut tepat di tengah lingkaran 70 x 70.Kemudian tarik kembali sesuai tanda panah di samping kiri ini.

Langkah 6. Kini anda telah memiliki satu tombol navigasi yang berbetuk lingkaran. anda tinggal mengembangkan tehnik ini untuk keperluan keperluan lain seperti menambahkan text atau icon di tengah navigasi tersebut. Selamat mencoba.)

 

3. MENGGAMBAR DENGAN EFEK TEKSTUR PLASTIK

Langkah 1. Pertama tama buatlah media gambar baru, sebesar 800x800 pixels. Pilih warna biru RGB (26, 104, 175) sebagai warna foreground. Gunakan Type Tool untuk membuat huruf e, dan buat sebesar media gambar. Lebih besar lebih baik.Saya membuat e dengan huruf Times New Roman Bold + Italic.

Page 6: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Langkah 2. Tekan Ctrl, dan click di layer e, dalam Layers window, untuk memilih transparansi. Lalu buat Layer baru, contract seleksi sebesar 16 pixels.

Select > Modify > Contract... 16 Pixels

Langkah 3. Pilih warna putih sebagai warna foreground, dan isi seleksi. Alt+Delete. Hilangkan seleksi Ctrl+D, dan Gaussian Blur layer sebesar 16 pixels.Filter > Blur > Gaussian Blur... 16 Pixels. Lalu, Gaussian Blur lagi sebesar 8 pixels, dan 4 pixels.Set Opacity Layer menjadi 52%, dan ubah Blending Mode menjadi Color Dodge.

Langkah 4. Sekarang, tekan Ctrl dan di Layers window, click di layer e, untuk memilih transparasinya. Dalam Channels window, tekan Save Selection sebagai channel tombol. Sekarang, click pada Channel yg baru dibuat Filter > Blur > Gaussian Blur... 16 Pixels. Kemudian, Gaussian Blur lagi sebesar 8 pixels, 4 pixels, dan terakh ir 2 pixels.Invert seleksi Ctrl+Shift+I, bersihkan seleksi dengan warna hitam Del, setelah itu Deselect Ctrl+D

Page 7: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Langkah 5. Kembali ke Layers window. Tekan Ctrl, dan click di Layer e, untuk memilih transparasi.Buat new layer dan drag keatas Inner Glow Layer.Pilih layer yg baru, isi seleksi dengan warna hitam, dan ubah nama layer menjadi Highlights.

Check pada Preserve Transparency, dan ubah blending mode menjadi Screen.

Langkah 6. Dengan layer Highlights yg terpilih: Filter > Render > Lighting Effect...Set Material Properties menjadi:Gloss: 79Material: -37Exposure: 56Ambiance: -100Ubah Texture Channel menjadi Alpha 1, atau pada channel yang anda buat sebelumnya, dan ubah Height menjadi 100. Buat arah datang sinar, Intensity 32.Setelah Lighting Effect selesai, Gaussian Blur pada layer sebesar 3 pixels.

Langkah 7. Pada step ini anda dapt menggunakan kebebasan kreativitas anda.

Image > Adjust > Curves...

Page 8: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Langkah 8. Buat dropshadow agar tampak lebih bagus.

4. MENGGABUNGKAN GAMBAR

Langkah1. Kadang kita ingin menyatukan dua gambar menjadi satu, namun transisinya tidak mudah untuk dibuat halus. Di tutorial ini saya akan menyatukan dua buah gambar kota yang diambil dari library master.web.id (tolong kasih info kalau pemegang copyright gambar2 ini keberatan, supaya bisa saya ganti dengan gambar lain), gambar2 tersebut bisa didownload dengan klik kanan dan save as. Gambar2 tersebut sudah saya resize supaya bisa dipakai dalam tutorial ini.Langkah 2. Buka dokumen baru, ukuran 200x150 pixel dengan background hitam. Pemilihan background hitam saya dasarkan atas background kedua gambar kota tersebut juga hitam/gelap.Paste kedua gambar tersebut ke dokumen baru ini, dan beri nama masing2 "kota1" dan "kota2". Window "Layers" anda seharusnya terlihat seperti disebelah.

Page 9: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Langkah 3. Pastikan bahwa foreground dan background color anda adalah putih dan hitam (tombol D-X). Switch warnanya, agar background menjadi putih dan foreground menjadi hitam (tombol X). Pilih tool gradasi (Gradient Tool).Pastikan bahwa gradasi yang

terpilih adalah linear , dan foreground to background. Enter Quick mask mode (yang saya beri kotak

merah) .

Langkah 4. Matikan Layer visibility "kota2" dengan cara klik icon mata yang ada di depannya. Layer itu akan kita aktifkan nanti. Dengan layer "kota1" aktif dan bekerja dalam quick mask mode, buat gradasi dari kiri ke kanan, menutupi 3/4 bagian dari image. Exit Quickmask mode (kembali ke standard mode)

dengan tombol . Tekan tombol delete. Setengah dari gambar kota1 hilang, tetapi tidak langsung (gradually).

Langkah 5.Aktifkan layer visibility layer "Kota2" dengan klik kotak iconnya. Masuk kembali ke quickmask mode, dan gunakan gradient tool. Kali ini mulai dari kanan ke arah kiri menutupi 3/4 bagian dari image. Kembali ke standard mode dan delete. Kedua gambar tersebut sekarang sudah jadi satu dengan transisi yang halus.Langkah 6. Di gambar samping saya memodifikasi gambar tersebut lebih jauh dengan hue/saturation, contrast dan sedikit permainan text.Trik diatas menggunakan gradation dan quick mask untuk menghapus sebagian dari gambar secara gradually bisa dipakai di banyak cara dan variasi. Cobalah bereksperimen dengan type gradation yang lain, misalnya radial dan reflected.

Page 10: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

 

6. MENGGANTI BACKGROUND GAMBAR

Langkah 1.Tool Pen cocok untuk lakukan halus, seperti benda yang bergerak dan bentuk tubuh manusia, tetapi tetap memberi dampak tepian yang kasar, sehingga diputuskan untuk tidak menggunakannya pada kasus ini. Diputuskan untuk menghapus bagian yang tidak diinginkan dengan tool Erase. Set tool Erase pada paintbrush (100%) atau airbrush (50%), kedua jenis brush itu baik digunakan.

Langkah 2.Sebelum proses penghapusan dimulai, gandakan layer background kemudian tutup (hilangkan gambar mata) dan hidupkan layer baru.

Alasan untuk menggandakannya adalah untuk menghindari kemungkinan terjadi kesalahan dan gambar asli masih ada.

Page 11: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Langkah 3.Sebelum penghapusan dimulai, pastikan gambar sudah diperbesar untuk memudahkan penghapusan.Pilihlah pen hard-edged untuk menghapus background disekitar baju dan mulailah menghapus. Bila ditemukan bagian kecil, gunakan ukuran pen yang lebih kecil lagi.

Langkah 4.Hapus semua bagian hingga bagian rambut, bagian inilah yang terberat karena warna begitu susah dibedakan. Sering kali hal termudah yang dapat dilakukan adalah memisahkannya. Pada gambar RGB, Photoshop memberikan 3 pemisah warna (channel merah, hijau, dan biru) dan dapat digunakan channel alpha. Lakukan test sederhana pada setiap channel untuk melihat channel mana yang baik untuk digunakan dan pada kasus ini adalah channel green.Kemudian channel ini di-drag menjadi channel alpha (baru). Pastikan bahwa channel greenlah yang digandakan dan bekerja pada channel baru ini.

Langkah 5.Penghapusan tergantung pada kekontrasan warna hitam-putih, sehingga harus lebih dipertajam dengan menggunakan adjust - Levels. Hati-hati, jangan terlalu kontras karena malah tidak akan terlihat bedanya.

Page 12: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Langkah 6.Agar terlihat perbedaannya, gunakan color range pada menu Select. Invert warna dengan seleksi grayscale hingga benar-benar terlihat perbedaannya, yaitu gelap pada rambut dan terang pada latarnya.

Hapuslah bagian yang tidak diinginkan menggunakan tool Erase soft-brush Airbrush.

Langkah 7.Kembalikan channel pada Channel RGB. Sekarang sudah terseleksi bagian yang akan dihapus. Hapurlah bagian yang tidak diinginkan dengan menggunakan tool Erase yang soft-brush. Setelah selesai, deselect.

Untuk menghapus bagian lainnya, gunakan tool Lasso dan kemudian cut. Cara ini lebih mudah dibandingkan dengan harus menghapusnya dengan manual tangan.

Langkah 8.Sekarang gambar kedua anak sudah terpisah dari gambar background.

Buat layer baru dengan posisi di tengah dan fill dengan warna putih.

Page 13: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut

Langkah 9.Setiap ujung rambut haruslah benar-benar sudah terhapus dengan baik. Untuk memperbaikinya, ulangi lagi seleksi warna dengan color range. Kali ini, pilihlah warna rambut dan set hingga 40.

Aktifkan layer background copy dan mulailah menghapus dengan tool Erase memakail soft-brush.

Langkah 10.Setelah selesai, buanglah layer puith, layer backround yang asli, dan channel alpha.

Tambahkan layer baru di bawah layer backround copy sebagai backround baru menggantikan background putih.

SELAMAT MENCOBA

 

 

 

Back to Top of Page

PT Asiamaya Dotcom Indonesia Kompleks Taman Setia Budi IndahBlok C, No. 51, MedanEmail: [email protected] Company Profile / Privacy Policy - Catalog

 

Page 14: MENGGAMBAR DENGAN ADOBE PHOTOSHOP …  · Web viewmenggambar dengan adobe photoshop Untuk membuat gambar pada halaman Web Anda, dapat digunakan Adobe Photoshop. Pada Tutorial berikut