1.1 PHOTOSHOP INTRODUCTION Photoshop adalah program atau aplikasi untuk membuat dan memanipulasi atau mengedit objek atau gambar untuk dijadikan model design. Contohnya dalam dunia photography, photoshop dapat digunakan untuk mengedit cahaya, kotoran pada wajah, design latar belakang, dsb. Photoshop juga dapat digunakan untuk web design, biasanya kita dapat mendesign logo, banner, bahkan webslicing. Web designer biasanya mendesign terlebih dahulu bentuk template website yang ingin dibuat sebelum diaplikasikan menjadi website yang seutuhnya. Kita dapat membuat desaign seperti dibawah ini dengan menggunakan Photoshop.
Sebelum memulai belajar mendesign, sebelumnya kita harus tau Tools yang ada pada Photoshop. 1. Toolbox. Toolbox adalah palet yang berisi tombol-tombol perintah yang berguna untuk menggambar, member warna, menyeleksi, menulis teks, dan lain-lain. Pada Toolbox terdapat tombol Move Tool (V) yang artinya icon terebut bernama Move Tool dan memiliki shortcut V. begitu juga pada tools yang lain, memiliki shortcut masing-masing dengan fungsi yang berbeda-beda..
Pada beberapa icon memiliki tanda segitiga kecil pada pojok kanan, yang menandakan icon memiliki type tools masing-masing yang berbeda. Cara melihatnya silakan klik kanan pada icon yang memiliki tanda segitiga. Jika tidak memiliki lambang segitiga, icon tidak dapat di klik kanan. 2. Option Tools Pada Option Tools, icon akan berubah setiap kita memencet icon pada Toolbox. Jadi setiap tools pada Option Tools memiliki fungsi yang berbeda-beda.
Pada sebelah kanan banyak menu-menu yang akan kita pakai nantinya. Yang pertama kita pelajari terlebih dahulu yaitu segitiga yang ada di sebelah kanan, gunanya untuk collapse panel-panel. Collapse : merubuhkan dalam hal ini artinya menyembunyikan atau menampilkan kembali sesuai dengan keinginan kita. Pada panel sebelah kanan ada hubungannya dengan tombol Window yang pada Menu Bar. Contohnya, Misalkan kita akan menampilkan History, dapat kita klik pada Window pilih History.
Maka History akan muncul pada sebelah kanan Kita akan membuat file baru dengan cara klik File > New. Biasanya Photoshop menggunakan ukuran centimeters, namun karena kita akan mendesign untuk web, kita dapat mengubah centimeters ke pixels dan ukuran sesuai dengan kebutuhan. Misalkan website membutuhkan ukuran 800 x 340
untuk membuat banner. Setelah kita atur untuk ukuran, Klik Ok. Maka akan keluar document baru yang akan kita design nantinya. Lembar kerja Photoshop
2.1 GRADIENT COLOR Dari ukuran dokumen yang telah kita buat sebelumnya misalkan kita tidak jadi menggunakannya, silakan klik pada Tombol (X), maka dokumen akan close dengan sendirinya. Kita akan mempelajari bagian dari membuat dokumen baru. Silakan klik File > New. Pada New terdapat Width, Height, Resolution, Color Note, Background Contents yang memiliki arti masing-masing. Width = Lebar Pixel Height = Tinggi Pixel
Kita akan membuat dokumen baru Klik File > New Width 900, Height 300 Resolusi 72 Pixels/ Inch Color Mode RGB RGB adalah perpaduan warna Red Green dan Blue. Dengan bit standart yaitu 8 bit. Lembar kerja Photoshop
1. Pertama kita akan belajar apa itu GRADIENT dan bagaimana cara menerapkannya. Terlebih dahulu silakan klik Gradient Tool Pada Option Tool ada berbagai macam tipe Gradient. Misalkan kita coba Linear Gradient Pada set Foreground Color kita pilih warna biru. Foreground Color merupakan warna utama yang akan kita gunakan
Pada Background Color kita ubah warna putih dengan warna abu-abu. Dengan cara klik pada set Background Color.
A. Cara membuat Linear Gradient : >>Klik Linear Gradient pada Option Tool >Klik kiri dan tahan >Tarik dari kiri ke kanan
Maka akan terlihat gradasi warna antara Foreground Color dan Background Color yang kita pilih Misalkan kita ingin mengubah model gradasi, kita mau Undo. Undo dapat kita lihat pada History. Panel History adalah kumpulan langkah kerja dalam Photoshop, dan dapat kembali ke langkah sebelumnya sesuai keinginan kita. Misalkan kita ingin kembali ke New, silakan anda klik New yang ada di Panel History.
Jika kita ingin kembali ke pekerjaan kita sebelumnya silakan klik pada Gradient pada Panel History. B. Mengubah Linear Gradient menjadi Radial Gradient >Klik New pada Panel History >Klik Radial Gradient pada Option Tool Cara membuat Radial Gradient : Klik kiri dan tahan > Tarik dari kiri ke kanan.
Maka akan terlihat Gradiasi yang berfokus pada lingkaran C. Membuat Angle Gradient >Klik New pada Panel History
Cara membuat Angel Gradient : > Klik Angel Gradient pada Option Tool >Klik kiri dan tahan >Tarik dari kiri ke kanan Tampak seperti ini
D. Membuat Reflected Gradient >Klik New pada Panel History > Klik Reflected Gradient pada Option Tool >Klik kiri dan tahan > Tarik dari kiri ke kanan
Tampak seperti ini E. Membuat Diamond Gradient >Klik New pada Panel History > Klik Diamond Gradient pada Option Tool
Klik kiri dan tahan > Tarik dari kiri ke kanan. Diamond Gradient memiliki fokus seperti berlian. Tampak seperti ini hasilnya
2.2 BANNER WITH SHAPE Kita akan membuat banner seperti gambar dibawah ini. 1. Membuat Shape Pertama untuk membuat Shape : >Pilih Toolbox Custom Shape Tool >Klik kanan untuk memilh iocn (Saat ini kita akan memilih Talk 1)
>Klik kiri, tahan dan tarik Agar ukuran menjadi proposional silakan tekan tombol Shift. Ubah warna Shape : >Dengan cara double klik pada Layer Shape 1 Double Klik
Warna dapat diganti sesuai dengan keinginan Di sini akan kita coba ganti dengan warna Biru (#038aff) Hasilnya biru muda Kita akan membuat lagi Shape 2 dengan cara seperti di awal Dan pastikan pada Option Tool menunjukkan ke arah Shape Tujuannya kita tidak perlu membuat layer-layer baru lagi, karena dalam mendesign Shape ini otomatis mempunyai Layer masing-masing.
Layer Shape 2 Untuk menyamakan ukuran : >Klik Edit > Free Transform Free Transform berguna untuk memperbesar atau memperkecil objek
>Klik, tahan dan geser timpa ke Shape 1 kanan atur sampai ukuran sekiranya sesuai >Jika ukuran sama geser Shape 2 ke kiri ke tempat semula >Shape 2 menempati posisi semula
Untuk merubah warna anda dapat melakukan sama seperti diawal dengan double klik Shape 2 dan seperti itu seterusnya. Double Klik Layer Shape 2 Beri warna Merah (#ff3334)
Tampak hasilnya Karena Shape yang akan kita buat banyak (8 Shape), kita dapat mempersingkat waktu pengerjaan dengan copy paste Shape yang sudah ada. >Aktifkan Layer Shape 2 lalu arahkan Corusor ke Shape di lembar kerja yang akan kita copy lalu tekan ALT + Drag mouse untuk mengcopy layer Double Klik Layer Shape 2 tersebut.
Untuk merubah arah Layer : >Klik Edit >Transform Path >Flip Horizontal Seperti itu seterusnya.
Tampak hasilnya Warna kita ubah : >Double Klik Layer >Ubah warna Orange (#FF9900)
>Shape geser ke kanan Geser ke kanan Copy Shape dan geser ke tengah dengan cara : >Klik Shape + Tekan Alt drag ke tengah Ubah warna Shape >Double Klik Layer
>Beri warna Putih (#ffffff) Tampak hasilnya Selanjutnya buat Shape baru lagi seperti langkah sesudahnya : >Klik Shape warna putih selanjutnya + Alt drag ke kiri
Untuk memberikan warna seperti langkah sesudahnya : >Double klik Layer >Beri warna Biru (#34fefe)
Tampak hasilnya Kita dapat mencopy beberapa Layer sekaligus dengan cara : >Tekan CTRL + klik Layer yang akan kita copy (Dapat anda perhatikan pada Shape yang berwarna hijau, putih, dan orange) >Arahkan cursor pada gambar >Tekan ALT + drag Layer untuk copy tiga Shape tersebut Dan untuk merubah warna dapat anda ikuti langkah seperti diawal.
Kita buat Shape baru lagi di sebelahnya, kita lakukan seperti langkah sesudahnya : >Klik Shape yang di tengah + Alt tahan dan drag ke kiri Shape yang sudah tercopy Secara otomatis 3 Layer bertambah
Tinggal kita ganti warna masing-masing Shape. Warna di ubah seperti langkah-langkah sebelumnya : Kita beri warna Shape atas kanan : >Double klik Layer
>Ubah warna Kuning (#ffff33) Tampak hasilnya Ubah warna Shape atas tengah : >Double klik Layer
>Beri warna Ungu (#fd69cb)
Tampak hasilnya Kemudian kita ubah warn Shape atas paling kiri : >Double klik Layer >Ubah warna Hijau (#76cb33)
Tampak hasilnya setelah Shape di ubah warna Pada contoh gambar, dapat anda lihat : 1. Layer biru mengarah ke kanan sementara Shape yang kita buat masih mengarah ke kiri. 2. Layer warna putih berada di posisi paling atas Kita akan mengkondisikan seperti Shape di atas Cara merubah arah Shape Layer Biru :
>Double klik Layer Shape Biru >Edit > Transform > Flip Horizontal
Flip Horizontal
Kemudian yang ke dua memposisikan Shape Putih paling atas : >Klik Layer Shape Putih, tahan dan geser paling atas Klik tahan Geser paling Tampak Shape Putih sudah berubah posisi
Cara merapikan Layer dengan Group Layer Layer-layer di bawah ini kita rapikan dengan Folder-folder supaya lebih mudah pengerjaannya Buat Group : >Klik icon yang berbentuk Folder
Otomatis keluar Folder Group posisi paling atas
>Tekan Shift dan tahan sambil klik Shape paling atas dan Shape paling bawah (kecuali Background) >Lepas Shift drag masukan ke dalam Group Untuk membuka layer dalam Group, Folder Group Maka Folder Group yang terbuka berisi Layer-layer Shape
Layer Group digunakan untuk mengelompokkan beberapa Layer menjadi satu kumpulan Layer, agar mempermudah proses pekerjaan yang menggunakan banyak sekali Layer. Dan kita pun dapat merubah nama Group dengan cara double klik pada Group yang akan diubah namanya. Double Klik
Kita dapat memindahkan semua layer secara langsung dengan cara mengaktifkan Group. Layer juga bisa di artikan ruang kontrol lembar kerja. Jadi misalkan, jika warna putih saja yang diaktifkan maka yang perlu diatifkan hanya layer putih saja. Tadi masih ada yang ketinggalan kita rubah lagi posisi Shape warna Hijau dan Kuning. >Klik Layer Shape Hijau
>Edit > Transform > Flip Horizontal Untuk Shape warna Kuning sama juga langkahnya : >Klik Layer Shape Hijau >Edit > Transform > Flip Horizontal
Hasil tampilannya
Shape dapat kita pindahkan secara bersamaan dengan mengaktifkan Folder Group. Bisa juga dipindahkan satu-persatu dengan mengguakan Layer. Shape sekaligus kita geser ke atas secara bersamaan dengan mengaktifkan Folder Group. Geser ke atas
Jika ukuran dirasa kurang besar atau kecil, dapat anda edit dengan cara >Klik aktifkan Group > klik Edit > Free Transform
Maka akan tampak garis seperti ini
>Klik dan tahan Shift biar ukuran proposional secara bersamaan klik di ujung dan tarik Tampak hasilnya seperti ini Kemudian kita akan membuat Background untuk Background Banner : >Pilih Gradient Tool >Aktifkan Background Klik di ujung Sambil tekan Shift
Seperti yang pernah dijelaskan anda dapat mengubah Color sesuai dengan yang anda inginkan Pilih Option Gradiasi > klik dan tahan > tarik Cursor pada Background Tampak hasilnya
2. Membuat Teks Selanjutnya kita akan membuat tulisan Campus, Skill, Where, dan Program. klik icon Text (T) pada Toolbox. Maka disebelah kanan akan muncul kotak Character Huruf.
>Ketik CAMPUS? >Move Tool untuk memindahkan tulisan ke dalam Layer Teks setelah di pindah di Shape Putih Lalu kita akan membuat tulisan Program. Seperti sebelumnya arahkan cursor keluar dari Layer dan klik untuk memulai mengetik
Kemudian klik Move Tool untuk memindahkan tulisan ke dalam Layer Biru Muda
Terlihat tulisan PROGRAM? tanda tanya? berada di atas Shape Putih Kita pindahkan di bawah Shape Putih. >Klik Layer PROGRAM geser ke bawah letakkan atas Layer Shape Biru Muda
Tampak hasilnya Kemudian ketik lagi WHERE? Kemudian klik Move Tool untuk memindahkan tulisan ke dalam Layer Biru
Untuk memudahkan pengerjaan kita pindah Layer WHERE di atas Layer Shape Biru >Klik Layer WHERE >Geser ke bawah atas Layer Shape Biru
Terakhir kita buat tulisan SKILL? >Ketik SKILL? di atas Shape Kuning Sebelumnya kita ubah posisi untuk Shape Pink di atas Shape Hijau dan Shape Kuning >Klik Shape Pink
>Tahan dan geser pindahkan di atas Layer Shape Hijau Tampak hasilnya
Selanjutnya kita akan membuat tulisan CAMPUS EXPO 2014 >Klik icon T pada Toolbox >Pilih Font Arial >Klik warna pada Option Tool
>Pilih warna Putih >Klik OK Anda dapat merubah ukuran font sesuai dengan kebutuhan anda dengan memilih ukuran pada Option Tool.
>Ketik CAMPUS EXPO2014 Kita ingin merubah warna pada 2014 nya saja : >Blok tulisan 2014 >Klik warna pada Option Tool
>Pilih warna Merah (#ff3334) pada Option Tool Kemudian kita tebalkan tulisan dengan memilih bold pada Option Tool Tampak hasilnya
Kita akan tuliskan 9 FEB Pada gambar dibawah ini tulisan tak terlihat karena warna tulisan adalah hitam. Maka kita perlu menggantinya dengan warna yang lain, dengan cara : >Blok tulisan >Klik warna pada Option Tool
>Jika kita ingin menggunakan warna yang sudah ada pada banner, arahkan Cursor pada warna yang kita inginkan >Klik OK Kita akan merubah font 9-FEB sama seperti sebelumnya, >Blok tulisan
>Pilih Font pada Option Tool >Font yang kita pilih Forte Tampak hasilnya
Selanjutnya kita akan merapikan jarak antara CAMPUS dengan EXPO2014 karena dilihat jaraknya terlalu jauh. Langkah yang harus kita lakukan adalah : >Double klik pada Layer CAMPUS EXPO2014 >Klik Window pada Menu Bar
>Klik Character maka akan muncul Tool dipojok kanan >Atur Set The Leading yang berfungsi untuk mengatur jarak baris atas dengan bawah >Kita ketika manual saja 70 pt Tampak hasilnya jarak antara CAMPUS dengan EXPO 2014
1. Memasukkan Foto ke Program Photoshop Selanjutnya kita akan memasukkan foto pada Photoshop. >Buka Folder foto anda >Drag ke Photoshop >Perbesar klik + tahan lalu geser Cursor tekan Shift agar menjadi proposional
Sebelum anda menggeser gambar yang telah perbesar, >Silakan klik Move Tool terlebih dahulu >Aarahkan Cursor pada gambar yang akan dipindahkan >Klik + tahan dan drag ke bawah
Yang terakhir kita akan buat Shape yang berbentuk persegi, dapat anda temukan pada Toolbox. Lalu kita akan menggunakan warna Kuning seperti yang ada di layer >Klik warna yang ada di Toolbox >Arahkan Cursor pada warna yang diinginkan >Klik OK Kita akan membuat persegi dengan klik + tahan dan drag, buat sesuai dengan yang anda inginkan.
Tampak hasilnya Kita akan member tulisan pada kotak yang berwarna kuning dengan cara seperti sebelumnya : >Klik icon T pada Toolbox >Ubah Font Bradley Hand ITC
>Ubah warna Font menjadi Hitam >Klik OK >Ketik Ikatan Alumni Babastudio.com >Blok tulisan
>Ubah Font menjadi 18 pt >Klik Move Tool >Klik teks dan geser ke Shape Kuning
Kemudian kita pertebal huruf Pertebal tulisan SKILL? >Double Klik Layer Text SKILL >Klik type huruf Bold Italic >Ubah ukuran Font 24 pt
Tampak hasilnya Pertebal tulisan CAMPUS? >Double Klik Layer Text CAMPUS >Klik type huruf Bold Italic
>Ubah ukuran Font 24 pt Tampak hasilnya Pertebal tulisan PROGRAM? >Double Klik Layer Text PROGRAM
>Klik type huruf Bold Italic >Ubah ukuran Font 24 pt Tampak hasilnya
Pertebal tulisan WHERE? >Double Klik Layer Text WHERE >Klik type huruf Bold Italic >Ubah ukuran Font 24 pt
Tampak hasilnya Banner selesai di buat tampak dengan hasil keseluruhan
3.1 LAYER, FILL, OPACITY Kita akan belajar membuat banner yang memiliki bayangan atau Opacity dan membuat Layer, Fill seperti gambar dibawah ini. 1. Buat Lembar Kerja Baru >Pertama kita buka Photoshop >File > New
>Beri Nama >Width 1000 pixels >Height 338 pixels >Resolution 72 pixels/inch >Color Mode RGB 8bit >Klik Ok.
2. Import Gambar dan Membuat Bayangan Pertama kita akan mengambil gambar dari folder kemudian drag gambar yang akan digunakan ke Photoshop.
>Tekan tombol Shift >Klik + kecilkan ukuran gambar >Setelah ukuran sesuai tekan tombol Enter.
Copy Layer web banner tersebut : >Arahkan Cursor pada gambar yang akan di copy >Tekan tombol ALT + drag ke bawahnya. Tujuan kita mengcopy karena ingin membuat seolah-olah gambar tersebut memiliki bayangan. Kita akan mengubah nama layer yang akan kita jadikan bayangan dengan cara: >Double klik pada Layer yang akan kita ubah namanya >Beri nama bayangan >Enter.
Setelah itu Layer bayangan tersebut kita letakkan dibawah web banner. Bayangan tersebut akan kita putar balikkan dengan cara : >klik Edit > Transform > Flip Vertical Maka gambar tersebut akan berputar melawan arah. Untuk membentuk banyangan dapat kita lihat pada panel sebelah kanan dan pastikan Layer banyangan telah aktif.
Pada Panel tersebut terdapat Opacity yang dapat anda atur sesuai keinginan anda. Untuk membuat bayangan silakan anda kurangi Opacity anda menjadi 12%. Maka hasilnya gambar akan menipis seakan-akan membentuk sebuah bayangan. Setelah itu bayangan akan kita edit dengan cara : klik Edit > Free Transform > kecilkan bayangan tersebut.
Untuk memperbesar kedua gambar tersebut, kita harus mengaktifkan kedua Layer tersebut dengan cara tekan tombol CTRL + klik kedua Layer tersebut. Kemudian kita edit kembali dengan cara klik Edit > Free Transform.
Lalu kita perbesar ukurannya dan letakkan pada posisi yang diinginkan. Jika sudah sesuai dengan yang diinginkan klik tombol Enter. Dan bayangannya akan kita perkecil kembali dengan cara aktifkan Layer bayangan kemudian klik CTRL+ T (shortcut dari Free Transform). Ini yang dinamakan Opacity. Opacity adalah ketebalan gambar. Jadi antara 0-100 dapat diukur ketebalannya. Misalkan 0% gambar tidak akan terlihat atau hilang.
3. Membuat Teks CARI GADGET? >Klik Tool Teks (T) >Font 48pt > Ketik CARI GADGET?
> Font Tahoma >Pertebal tulisan dengan Bold
Tampak hasilnya 4. Membuat Teks Bagus, murah dan terpercaya Kita akan buat tulisan Bagus, murah dan terpercya hanya di gadget.co.id dengan ukuran Font 24 pt >Font Tahoma
Ketik tulisan Buat Tulisan gadget.co.id jadi Italic >Blok tulisan gadget.co.id >Pertebal tulisan dengan Bold
Pada tulisan gadget.co.id, akan kita beri efek Italic dengan cara blok tulisan > klik Window > Character > pilih Italic, maka tulisan akan berubah. Tampak hasilnya
Kita akan merubah warna tulisan gadget.co.id dengan cara : >Seleksi tulisan klik warna pada Option Tool
> Pilih warna merah yang tertera pada gambar dengan mengarahkan Cursor ke warna yang diinginkan >klik OK Tampak hasilnya
Selanjutnya kita akan memperkecil tulisan bagus murah dan terpercaya dengan cara : >Klik Edit > Free Transform. >Tekan Shift agar ukuran tulisan menjadi proposional
>Drag tulisan untuk memperkecil. Kemudian kita akan membuat Buttom > Klik Rounded Rectangle Tool >Klik + tahan dan drag untuk membuat persegi pada banner.
5. Membuat Efek Layer CARI GADGET? >Aktifkan Layer tersebut Untuk membuat efek dari Layer tersebut, kita dapat melihat pada panel dibawah yang berbentuk fx yang berfungsi untuk memberi efek tambahan pada Layer yang akan kita pilih.
Klik pada fx > Pilih Blending Options, maka akan muncul tampilan Layer Style pada Layer anda. >Pilih Inner Glow. >Opacity 40% >Berikan warna Color Overlay (Color Overlay ini memberikan warna pada seluruh yang terkandung pada layer tersebut)
>Ubah warna merah menjadi biru muda
>Berikan efek bayangan dengan Drop Shadow >Opacity 16% >Klik OK. 6. Membuat Efek Buttom >Aktifkan Layer Buttom
>Klik fx >Blending Options >Bevel & Emboss >Depth 52% >Size 24px >Soften 13px
>Angle 90⁰ >Unceklist pada Use Global Light (Use Global Light digunakan jika seluruh Layer Style ingin menggunakan satu Angle yang sama) >Contour Range 92% >Inner Shadow >Opacity 16% >Distance 46 px >Choke 25%
>Size 92 px >Satin warna abu-abu >Blend Mode Overlay >Angel 90⁰ >Distance 151 px >Size 158 px Pada Color Overlay, kita akan memilih warna : >Pilih warna kuning dengan klik Set Color
>Arahkan Cursor pada warna yang akan digunakan >Klik OK >Pada Inner Shadow kita akan mengubah warnanya menjadi abu-abu >Klik OK.
7. Menabhakan Tulisan KLIK DISINI
Untuk menambahkan tulisan seperti yang sudah pernah dijelaskan. >klik T pada Toolbox >Ketik diluar Buttom KLIK DISINI Kemudian kita akan memperkecil Font dengan cara : >Blok tulisan >Pilih Size Font pada Option Tool
>Opacity 92% Kita akan pindahkan tulisan tersebut ke dalam Buttom dengan cara :
>Klik Move Tool >Klik + tahan dan geser tulisan ke dalam Buttom. Untuk mengubah Font : >Aktifkan Layer KLIK DISINI >Pilih font pada Option Tool.
Untuk tulisan Bagus Murah akan kita ubah ketebalannya menjadi Regular >Aktifkan Layer Bagus Murah >Pilih ketebalan Font pada Option Tool
>Pilih Regular Kemudian kita besarkan menggunakan Free Transform dan menekan Shift agar ukuran menjadi proposional. Atur sesuai kebutuhan anda
Maka Banner telah selesai kita buat