SlametRiyanto.Net | Free Tutorial, Ebook, Video Training: Graphic Design, Multimedia, Open Source, eLearning, eCommerce, & Programming » photoshop

Ebook: The Best Practice Adobe Photoshop CS4

slametriyanto.net — Fri, 26 Nov 2010 04:35:13 +0000

Alhamdulillah modul untuk training yang diadakan di Pusdiklat Kementerian Luar Negeri RI pada tanggal 22-26 Nopember 2010 dan 29 Desember 2010 – 3 Januari 2011 telah rampung, meskipun tidak semua yang saya ajarkan ditulis dalam ebook tersebut. Namun minimal dapat membantu para alumni training untuk mempraktekkan di rumah dan di kantor.

Mudah-mudahan tutorial yang sangat terbatas ini dapat membantu masyarakat Indonesia, khususnya yang ingin belajar desain grafis menggunakan Adobe Photoshop CS4. Maju terus, para desainer Indonesia.

Dalam tutorial tersebut berisi beberapa panduan untuk menghasilkan karya-karya sederhana seperti nampak pada gambar berikut:

Download Tutorial

Video Training: Menghilangkan Noda

slametriyanto.net — Sat, 21 Mar 2009 04:51:07 +0000

Teknik menghilangkan noda sangat mudah dan simpel. Dengan memanfaatkan Healing Brush tool, maka dalam sekejap segala noda, jerawat, keriput, maupun bercak lain akan hilang. Caranya: Aktifkan Healing Brush tool atau, kemudian pilih ukuran brush yang sesuai. Klik pada daerah yang akan dihilangkan.

The Flash plugin is required to view this object.

Video Training: Mewarnai Bibir

slametriyanto.net — Sat, 21 Mar 2009 03:08:43 +0000

Teknik ini mungkin sudah sering digunakan dalam memperbaiki warna rambut, baju, dan warna lainnya. Nah berikut ini cara mewarnai bibir agak lebih natural. Cara? Perhatikan video tutorial di bawah ini.

The Flash plugin is required to view this object.

Video Training: Menambal Gigi Ompong

slametriyanto.net — Thu, 12 Mar 2009 00:38:09 +0000

Teknik ini sama dengan teknik memperbaiki rambut yang (maaf) botak, atau kumis berantakan. Dengan hanya menggunakan Stamp tool, semuanya dapat diperbaiki dengan mudah.

Caranya: aktifkan Stamp tool, lalu pilih ukuran brush sesuai area yang akan ditutup, pilih tipe brush yang halus. Pada bagian Option bar, kurangi Opacitynya sesuai kebutuhan.

The Flash plugin is required to view this object.

Video Training: Memperbaiki Rambut

slametriyanto.net — Thu, 14 Aug 2008 08:59:26 +0000

Teknik sering digunakan untuk memperbaiki bagian-bagian yang tidak tertutup dengan baik, misal: (maaf) rambut botak, atau kumis berantakan. Dengan hanya menggunakan Stamp tool, semuanya dapat diperbaiki dengan mudah.

Teknik: aktifkan Stamp tool, lalu pilih ukuran brush sesuai area yang akan ditutup, pilih tipe brush yang halus. Pada bagian Option bar, kurangi Opacitynya sesuai kebutuhan. Untuk lebih jelasnya, silakan perhatikan video training berikut ini atau silakan Download filenya.

[swfobj src=”http://slametriyanto.net/wp-content/uploads/2008/08/memperbaiki-rambut.swf” align=”center”>

Video Training : Membuat Efek Cahaya

slametriyanto.net — Wed, 13 Aug 2008 08:32:59 +0000

Video Tutorial ini membahasa tentang teknik membuat efek cahaya pada teks. Cahaya berasal dari belakang teks dengan spektrum cahaya yang berwarna.

Teknik: Membuat teks lalu diduplikasi, hasil duplikasi dikonversi dengan cara Layer > Rasterize > Type. Selanjutnya, dibuat efek Wind (Filter > Stylize > Wind). Agar menghasilkan efek cahaya yang bagus, ditambahkan Wind beberapa kali. Setiap sisi (kiri, kanan, atas, dan bawah) diberi efek Wind. Selanjutnya, tinggal memperhatikan video training berikut:

Download

The Flash plugin is required to view this object.

Ebook: Tips dan Trik Photoshop 6, 7, CS, CS2, CS3

slametriyanto.net — Thu, 03 Apr 2008 10:06:52 +0000

Perkembangan software begitu cepat, hampir setiap tahun terjadi perubahan baik fitur yang disediakan maupun tampilan. Begitu pula dengan Adobe Photoshop, saat ini sudah memasuki versi yang ke 10 atau lebih dikenal dengan Adobe Photoshop CS3. Meski begitu, beberapa tool pada versi sebelumnya tetap dipertahankan pada versi terbarunya.

Ketika buku ini dibuat masih menggunakan versi 6, yang pada masa itu masih sangat baru (tahun 2003). Beberapa pekerjaan yang saat itu menggunakan tools versi 6, tidak terjadi perubahan yang berarti ketika menggunakan versi terbaru (7-10). Untuk itu, meskipun pembahasan pada buku ini menggunakan versi 6 tidak menjadi masalah ketika menggunakan versi 6 ke atas.

Mudah-mudahan ebook ini berguna dan bermanfaat bagi yang membutuhkan.
Salam,
Slamet Riyanto

BAB 1. TINGKAT PEMULA
1. Teks Efek Plastik (Download)
2. Bayangan di Depan secara Perspektif (Download)
3. Tombol Glossy (Download)
4. Bendera Berkibar (Download)
5. Rokok (Download)
6. Halilintar (Download)
7. Terisolasi (Download)
8. Mengubah warna secara digital -1 (Download)
9. Mengubah warna secara digital -2 (Download)
10. Foto Hitam Putih menjadi Warna (Download)

BAB 2. TINGKAT LANJUT (Download)
1. Teks berkilau
2. Efek Sinar X1
3. Efek Sinar X2
4. Multiple Inline/Outline Teks
5. Membuat Kotak 3D
6. Membuat Kartun 1
7. Membuat Kartun 2
8. Menggunakan Layer Mask
9. Membuat Web Photo Gallery
10. Liquify Filter

BAB 3. TINGKAT MAHIR (Download)
1. Membuat Seterika
2. Membuat Teko Plastik
3. Membuat Ponsel
4. Membuat Sepatu
5. Membuat Jam Tangan Emas
6. Membuat Guitar Listrik
7. Membuat Mobil VW
8. Membuat Mata
9. Membuat Bibir
10. Efek Billboard Televisi

Ebook: Web Professional dengan Photoshop & Dreamweaver

slametriyanto.net — Mon, 31 Mar 2008 02:25:52 +0000

Alhamdulillah, setelah menunggu beberapa bulan akhirnya buku tentang Web Professional dengan Photoshop dan Dreamweaver terbit dan telah beredar di beberapa toko buku sekitar bulan Februari 2008.

Buku tersebut membahas secara tutorial dalam mendesain web professional dengan Adobe Photoshop kemudian diolah menggunakan Macromedia Dreamweaver. Teknik pembuatannya diawali dengan sketsa kemudian diolah menggunakan Adobe Photoshop. Selanjutnya memasukkan isi (content), membuat menu rollover, dan membuat pop-up menu dilakukan di dalam Macromedia Dreamweaver. Buku ini sangat cocok untuk web designer pemula maupun yang merasa sudah mahir dan ingin mengetahui cara pembuatan web professional menggunakan Adobe Photoshop dan Macromedia Dreamweaver.

Untuk mengetahui isi buku tersebut, berikut ini daftar isi lengkap.

Bab 1. Pengantar Web Design (bab-1-pengantar-web-design.pdf)
1.1. Tips Membuat Web Profesional
1.2. Prinsip dalam Mendesain Website
1.3. Software Desain Grafis
1.4. Format Grafis

Bab 2. Konsep Dasar Pembuatan Website (bab-2-konsep-dasar.pdf)

Bab 3. Merancang Web (merancang-web.pdf)
3.1. Kategori Web
3.2. Dasar-dasar Pemilihan Warna
3.3. Mengatur Layout

Bab 4. Proses Pengembangan (proses-pengembangan.pdf)
4.1. Situs Pribadi
4.1.1. Membuat Dokumen Baru
4.1.2. Membuat Interface
4.1.3. Membuat Tombol
4.1.4. Menambahkan Efek Khusus
4.1.5. Membuat Heading
4.1.6. Menambahkan Image/Gambar
4.1.7. Menambahkan Teks untuk Menu
4.1.8. Memotong Gambar (Slice)

4.2. Situs Bisnis
4.2.1. Membuat Dokumen Baru
4.2.2. Membuat Interface
4.2.3. Menambahkan Efek pada Interface
4.2.4. Membuat Tombol
4.2.5. Membuat Heading
4.2.6. Teknik Slice

Bab 5. Proses Editing (bab-5-proses-editing.pdf)
5.1. Editing Awal
5.1.1. Mengubah Objek menjadi Background
5.1.2. Memasukkan Objek
5.2. Membuat Link dan Navigasi
5.2.1. Membuat Pop-up Menu
5.2.2. Membuat Rollover Image

Drawing and Type Tools

slametriyanto.net — Thu, 11 Oct 2007 00:09:56 +0000

PATH SELECTION (A): Untuk memilih dan mengedit path yang dinginkan.

Caranya: aktifkan Path Selection tool, klik pada path yang telah dimaksud. Teknik ini biasa digunakan jika memiliki beberapa path.

Type Tool : Untuk mengetik teks pada sebuah image secara vertikal maupun horizontal.

Caranya: pilih salah satu tipe Type tool (horizontal atau vertikal), pilih jenis font, warna font, dan ukuran font. Anda dapat pula membuat efek teks warped dengan beberapa bentuk pilihan.

Type Mask Tool : Untuk membuat seleksi berbentuk huruf.

Caranya: sama dengan Type tool.

Pen Tool : Untuk membuat path yang dapat digunakan sebagai seleksi maupun alat gambar.

Caranya: aktifkan Pen tool, dan aturlah Option bar untuk menentukan tipenya (Pen tool atau Freeform Pen tool), dan pilih salah satu bentuknya (Shape Layers, Path atau Fill Pixel).

Custom Shape Tool : Untuk membuat bentuk shape tertentu dari daftar yang ditampilkan.

Caranya: sama dengan Pen tool, dan dapat menentukan salah satu bentuk Shape yang diinginkan (Dingbats).

Notes tool : Untuk membuat catatan dan suara yang dapat disertakan dalam image.

Caranya: aktifkan Annotation tool untuk membuat catatan lalu klik dan drag untuk membuat tempat catatan (note). Mulailah mengetikkan beberapa catatan. Perlu diperhatikan, teks dalam catatan tersebut tidak akan tercetak dalam dokumen gambar Anda. Sedangkan untuk membuat notasi berbentuk suara, aktifkan Audio Annotation tool.

Eyedropper Tool : Untuk mengambil sampel warna dalam sebuah image.
Caranya: aktifkan Eyedropper tool, lalu klik pada daerah yang ingin diambil sampel warnanya. Umumnya, Anda hanya dapat mengambil sampel satu warna, namun Anda dapat pula mengambil beberapa sampel warna dengan cara menekan tombol Shift saat memilih warna. Maksimal sampel warna yang diambil secara bersamaan adalah 4.

Hand Tool : Untuk memindahkan sebuah gambar bersama-sama dengan windows.

Caranya: aktifkan Hand tool dan letakkan pada sebuah image. Geser tampilan windows untuk melihat daerah yang tak tampak.

Zoom Tool : Untuk mengatur tampilan (perbesar atau perkecil) image.

Caranya: aktifkan Zoom tool, dan buatlah seleksi untuk memperbesar daerah yang dimaksud. Untuk memperkecil tampilan, tekan tombol Alt sambil mengklik pada daerah yang dimaksud.

Foreground & Background Color : Untuk menentukan warna foreground dan background.

Caranya: klik pada ikon tersebut untuk memilih warna. Secara default, warna foreground & background adalah hitam dan putih. Untuk menukar posisinya, tekan huruf X pada keyoard.

Tutorial: Mengedit Web dengan Dreamweaver

slametriyanto.net — Fri, 25 May 2007 06:16:33 +0000

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.

Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
Ketikkan images/index_26.gif pada kolom Bg.
Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

2. Memasukkan Objek

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

Letakkan kursor pada tempat yang akan ditambahkan teks.
Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

1. Membuat Pop-up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.

Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

Pertama kali, klik menu PC.
Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
Selanjutnya pilih Show Pop up Menu.
Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
Kemudian masukkan alamat URL pada kolom Link.
Selanjutnya pada kolom Target, pilih _parent.
Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
Klik Tab Position untuk menentukan posisi pop up menu.
Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

Buatlah duplikasi gambar tombol yang telah ada.
Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
Untuk melihat hasilnya, tekan tombol F12.