STMIK-MURA DESAIN GRAFIS LANJUT (2013) Novi Lestari, S. Kom, M. Kom

Transkripsi

1 STMIK-MURA DESAIN GRAFIS LANJUT (2013) Novi Lestari, S. Kom, M. Kom novistmikmura@yahoo.com Blog : novilestari.webnode.com MATERI: 1. MENDESAIN ICON DOWNLOAD 2. MENDESAIN ICON TAS BELANJA/KERANJANG BELANJA 3. MENDESAIN TEMPLATE WEBSITE PANTI ASUHAN Sekolah Tinggi Manajemen dan Ilmu Komputer Musi Rawas Lubuklinggau

2 MEMBUAT ICON DOWNLOAD Untuk keperluan membuat website atau blog biasanya membutuhkan beberapa tampilan gambar seperti header, banner atau icon-icon menu agar terlihat tampak bagus dan rapi, pada materi kali ini akan membahas bagaimana membuat icon download dengan Photoshop. Berikut langkah-langkahnya : 1. Langkah pertama buka lembar kerja baru dengan cara klik menu File New, buat dengan ukuran 400px x 400 px. Untuk Background contentnya buat menjadi White dengan 72 Resolution 2. Selanjutnya yaitu Buatlah 3 layer baru dengan cara klik Menu Layer Layer New atau Ctrl+Shift+N 1 3. Dilayer 1 buatlah sebuah lingkaran dengan menggunakan Tool box Elipse Tool (U) 4. Duplicate layer 1 dengan cara klik kanan pilih Duplicate Layeratau Ctrl+J 5. Langkah selanjutnya yaitu untuk gambar lingkaran yang ada dilayer 1 copy pindah dan kecilkan ukuran dengan menggunakan Menu Transfrom (Ctrl+T) 1

3 6. Kembali kelayer 1 silakan klik kanan layer dan pilih Blending Options untuk warna gunakan kombinasi palet warna hitam-putih 2 7. Untuk Outer Glow dan Drop Shadow isikan nilai seperti yang ada gambar dibawah ini 2

4 8. Setelah selesai lanjut kelayer 1 copy klik kanan layer dan pilih Blending Options, untuk warna gradientnya gunakan kombinasi warna merah-merah gelap atau warna lainnya 3 9. Untuk Inner Shadow isikan nilainya seperti yang ada digambar 10. Jika sudah selesai klik OK, dan geser posisi lingkaran yang kedua tadi keposisi ditengah lingkaran pertama nanti hasilnya nampak seperti ini 3

5 11. Langkah selanjutnya yaitu membuat arah panah, posisikan delayer 2 dan gunakan toolbox Custom Shape Tool (U) dan pilihan gambar shapenya akan muncul dimenu drawing pilih gambar shape arrow 9 atau gambar nomer tiga dari atas kiri Buatlah panah seukuran kira-kira seperti digambar 13. Jika sudah Transform (Ctrl+T)lalu klik kanan dan pilih rotate 90 0 CWgambar tersebut 14. Langkah selanjutnya yaitu menggabungkan layer 1, layer 1 copy dan layer 2 klik salah satu layer kemudian diikuti layer berikutnya dengan cara mencentang layer seperti 4

6 yang ada digambar yang sudah ditandai dengan lingkaran merah. Jika sudah selesai tekan tombol keyboard Ctrl+E atau masuk menu Layer Merge Down 15. Langkah selanjutnya masuk kelayer 3 buatlah sebuah seleksi lingkaran dengan menggunakan Elliptical Marquee Tool (M) kemudian gunakan Gradient Tool (G) dan pilih mode Linear Gradient untuk memberi warna Dan untuk optionsnya Foreground to Transparent dan klik OK 17. Lakukan pemberian warna transparasi 18. Jika sudah masuk ke layer untuk Opacity beri nilai 50% agar warna mejadi transparan 5

7 19. Kurang lebih hasilnya akan seperti ini, bisa juga ditambahi dengan kata-kata Download File 6 MENDESAIN IKON TAS BELANJA DI PHOTOSHOP 6

8 Dalam tutorial ini Anda akan belajar bagaimana untuk mendesain ikon tas belanja/keranjang belanja merah. Tutorial ini akan mencakup teknik-teknik dasar menggambar seperti membuat shape(bentuk), shading, dan adding shadows (menambahkan bayangan). Preview Hasil Akhir 7 Step 1 Buka dokumen baru Step 2 Buat layer baru, dan beri nama "main bag". Kemudian gunakan Pen Tool untuk menggambar bentuk seperti ditunjukkan di bawah ini. Caranya setelah membuat path klik kanan dan pilih make selections dan beri warna merah. Step 3 7

9 Gunakan Pen Tool untuk membuat seleksi seperti ditampilkan di gambar di bawah ini dan tekan Ctrl + J untuk menduplikasi pilihan ini untuk layer baru. Rename layer baru menjadi "top bag ". Step 4 Kembali ke "main bag" layer. Gunakan Pen Tool untuk membuat seleksi seperti ditampilkan di gambar di bawah ini dan tekan Ctrl + J untuk menduplikasi pilihan ini untuk layer baru. Rename layer baru menjadi "front bag". 8 Step 5 Pilih Burn Tool (O), kemudian di option bar mengatur pengaturan untuk berikut Step 6 8

10 Gunakan alat Burn pada daerah ditunjukkan pada gambar di bawah Step 7 Gunakan Pen Tool untuk membuat seleksi seperti ditunjukkan dalam gambar di bawah. Posisi pada main bag 9 Step 8 Pilih Burn Tool (O), kemudian di option bar mengatur pengaturan untuk berikut Step 9 9

11 Gunakan alat Burn pada daerah ditunjukkan pada gambar di bawah. Posisi pada main bag. Step 10 Ulangi langkah 7 sampai langkah 9 sampai gambar Anda akan terlihat seperti di bawah ini. 10 Step 11 Ikuti gambar seperti di bawah Step 12 10

12 Gunakan Burn Tool dengan pengaturan Master Diameter dari 80px sampai 120 px untuk menambahkan rincian lebih lanjut pada daerah ditunjukkan pada gambar di bawah. 11 Step 13 Pada "top bag" layer menggunakan Pen Tool untuk membuat seleksi seperti ditunjukkan dalam gambar di bawah. Lalu tekan Ctrl + J untuk menduplikasi pilihan ini untuk layer baru. Ubah nama layer baru "inside bag" dan beri warna putih. Step 14 Kembali ke "top bag". Gunakan Burn Tool dengan pengaturan Master Diameter sekitar 80px untuk menambahkan rincian lebih lanjut. Step 15 11

13 Ikuti gambar di bawah ini untuk mengoreksi rincian untuk "top bag". 12 Step 16 12

14 Pada "inside bag" menggunakan Burn Tool dengan pengaturan Master Diameter sekitar 50px untuk menambahkan detail apa gambar akan terlihat seperti di bawah ini. Step 17 Membuat seleksi seperti ditunjukkan di bawah dan menggunakan Burn Tool untuk menambahkan rincian untuk "top bag" dan inside bag". 13 Step 18 Buat layer baru di atas " front bag", rubah menjadi "front holds dan buat 2 lubang menggunakan Elliptical Marquee Tool (M) dan beri warna hitam seperti ditunjukkan di bawah Step 19 13

15 Buka Blending Options untuk menambahkan style untuk lapisan ini 14 Step 20 Buat layer baru di atas "front Holes", rubah menjadi "front string". Gunakan Pen Tool untuk menggambar Path seperti ditunjukkan di bawah ini. Step 21 14

16 Sementara memilih Pen Tool klik kanan pada Path dan pilih Stroke Path dengan Brush Setting warna putih, 8px dan Hard Brush. Step 22 Mengatur Style gambar sebagai di bawah 15 Step 23 15

17 Use to add more details to front string. Gunakan Burn Tool untuk menambahkan rincian untuk "front string". Step 24 Buat layer baru di atas "front string", rubah menjadi "black line". Gunakan PenTool untuk menggambar seperti ditunjukkan di bawah ini. 16 klik kanan pada Path dan pilih Stroke Path dengan Brush Setting warna hitam, 1px dan Hard Brush. 16

18 17 Step 25 Buka dokumen baru dengan ukuran 5px x 5px dan gambar diagonal seperti di bawah. Lalu pilih menu Edit DefinePattern dan simpan dengan nama yang Anda inginkan. Tutup dokumen ini dan kembali ke dokumen utama. Step 26 17

19 Buat layer baru di atas "front string", menyebutnya "front diagonal". Masuk ke menu Edit Fill dan pilih Pattern yang baru saja Anda simpan. Step 27 Tekan Ctrl + T untuk mengubah sebagai gambar di bawah. 18 Step 28 Sambil menahan Ctrl klik pada "front string" untuk mendapatkan seleksi. Tekan Ctrl+Shift+I untuk membalikkan seleksi dan tekan Delete. Kemudian mengubah Blending Mode untuk Multiply dan kurangi Opacity menjadi sekitar 40 %. Step 29 18

20 Buat layer baru dibawah front string, sebut saja "front String shadown". Gunakan Pen tool untuk menggambar berikut sebagai ditunjukkan di bawah ini. Dan klik kanan pada Path dan pilih Stroke Path dengan Brush Setting warna hitam, 5px dan Hard Brush. Step 30 Kemudian pilih menu Filter Blur Gaussian Blur 19 Step 31 Kemudian pilih menu Filter Blur Motion Blur Step 32 19

21 Kemudian hapus menggunakan Eraser Tool (E) seperti tampak pada gambar berikut 20 Step 33 Buat layer baru di atas "inside bag", menyebutnya "back holes". Menggambar 2 lubang menggunakan Elliptical Marquee Tool (M) dan beri warna hitam dan menambahkan untuk style yang sama seperti "front holes". Step 34 Buat layer baru di atas "back holes", menyebutnya "back string". Gunakan Pen Tool untuk menggambar string. Sementara memilih Pen Tool klik kanan pada Path dan pilih Stroke Path dengan Brush Setting warna putih, 8px dan Hard Brush.sebagai gambar di bawah ini. Step 35 20

22 Tambahkan layer style untuk itu. 21 Step 36 21

23 Buat layer baru di atas "back string", beri nama "back diagonal" dan buat "back diagonal" dengan cara yang sama untuk membuat front diangonal. Tapi kurangi Opacity menjadi 30%. Step 37 Buat layer baru di bawah "back string", rubah menjadi "back string shadow" dan menggunakan Pen Tool.Sementara memilih Pen Tool klik kanan pada Path dan pilih Stroke Path dengan Brush Setting warna hitam, 8px dan Hard Brush.sebagai gambar di bawah ini.menggambar sebagai gambar berikut di bawah ini. 22 Step 38 Kemudian pilih menu Filter Blur Gaussian Blur Step 39 22

24 Kemudian hapus menggunakan Eraser Tool (E) seperti tampak pada gambar berikut Step 40 Buat layer baru di paling atas, sebut saja "white line" dan menggunakan Pen Tool untuk menggambar jalan seperti ditunjukkan di bawah. 23 Step 41 Atur Brush sebagai gambar di bawah. Sementara memilih Pen Tool klik kanan pada path dan pilih Stroke Path dengan Brush 1px warna putih. Kemudian mengurangi Opacity menjadi sekitar 70 %.. Step 42 23

25 Ulangi langkah 40 dan 41 langkah untuk membuat garis-garis putih yang lain. 24 Step 43 Buat layer baru di atas "main bag", buat nama menjadi "refleksi". Buat seleksi pada gambar seperti yang ditunjukan pada gamabr bawah ini dan beri warna merah #c00000 Step 44 24

26 Gambarkan "white lines" dengan warna #e31d1d. Kemudian kurangi Opacity dari "refleksi" sampai 25%. 25 Step 45 Buat Seleksi seperti ditunjukkan di bawah ini. Tekan Shift+F6 untuk membuka Feather Selection dan atur Feather Radius 20px. Kemudian tekan Delete 2 kali. Step 46 25

27 Buat layer baru di atas "reflection, dengan nama "bag shadow" dan lakukan langkahlangkah berikut untuk membuat bayangan tas. 26 Hasil Akhir MENDESAIN TEMPLATE WEBSITE PANTI ASUHAN 26

28 27 Pada desain website kali ini, kita membuat template dari website panti asuhan. Maka, elemen yang harus ditonjolkan adalah tombol donasi yang seharusnya bisa ditemukan dengan mudah. Langkah 1. Kita akan mulai dengan membuat canvas yang cukup besar. Buka Photoshop anda, kemudian atur canvas baru dengan rasio Width x Height : 1020 x 1725 piksel. Langkah 2. Selanjutnya, kita buat background. Fill Layer dari background dengan warna abu-abu solid (#e6e6e6). Caranya, pilih menu Layer New Fill Layer Solid Color. Kemudian, buat Shape lagi berwarna kuning cerah (#ffcb05) dengan tinggi 70 px untuk bagian navigasi header. Terakhir, buat sebuah Shape dengan tinggi 500 px untuk background slider. Beri warna merah velvet (#c73047). Langkah 3. Sekarang kita fokuskan pada pembuatan bagian header. Untuk menu-menu navigasi, kita bisa gunakan font Arial Bold dengan ukuran 12px. Sedangkan untuk logo 27

29 panti, kita bisa gunakan LogoType dengan font Arial Regular ukuran 24px. Agar lebih sinergi, warna font bisa kita set jadi merah velvet seperti warna background slider. Langkah 4. Berikutnya kita buat tombol di samping kanan menu navigasi. Melalui Rounded Rectangle Tool (U), buat bentuk memanjang. Kemudian tambahkan Layer Style berupa Gradient Overlay pada shape pertama yang telah kita buat. Warna 1 isi dengan #b82031, sedangkan warna 2 isi dengan #c Langkah 5. Tambahkan teks Unduh Proposal di atas tombol. Untuk memberi kesan detail, beri Layer Style berupa Drop Shadow warna hitam (#000000) dengan Distance 1 px dan Opacity 30% pada teks tersebut. Sekarang buat 1 lagi tombol dengan Gradient Overlay, di mana warna 1 #1f1f1f dan warna 2 #2e2e2e. Tambahkan teks Detail Program. Langkah 6. Gunakan Rounded Rectangle Tool (U) untuk membuat bentuk baru dengan tinggi 340 px dan lebar 700 px. Warnai dengan abu-abu gelap (#2d2d2d). 28

30 Langkah 7. Sekarang, kita akan menambah pita (ribbon) untuk mempercantik background slider. Buat shape baru dengan Rectangle Tool, tinggi 40 px dan lebar 716 px. Beri warna kuning (#ffcb05) yang selaras dengan warna background header. 29 Langkah 8. Kemudian buat shape lagi untuk efek lipatan pita. Atur tinggi 40 px dan lebar 8 px. Beri warna kuning yang lebih gelap (#a68500), kemudian taruh di belakang shape kotak kuning pertama. Terakhir, Transform Path kemudian Skew shape ke bawah (lihat contoh gambar). Duplikat layer shape tersebut dan pindahkan ke bagian pita paling kanan, kemudian Transform Path dan Flip Horizontal. Langkah 9. Isi background slider dengan konten. Untuk bagian ribbon, tambahkan teks judul. Gunakan font Arial Bold 18 px dengan warna abu-abu gelap (#333333). Kemudian 29

31 masukkan gambar dengan ukuran piksel. Tambahkan pula satu paragraf teks di sebelah gambar dengan font Arial Regular 12 px. Beri warna putih (#ffffff). 30 Langkah 10. Buat tombol Read More untuk konten slider. Caranya, duplikat tombol yang sudah kita buat pada langkah 4, kemudian ganti warna Gradient Overlay dengan warna 1 (#c79f00) dan warna 2 (#ffcb05). Taruh tombol di bawah paragraf slider. Langkah 11. Tambahkan teks di bawah slider untuk menonjolkan langkah langkah melakukan donasi. Gunakan font BebasNeue ukuran 70px dengan warna abu-abu gelap (#2d2d2d) sebagai judulnya. Jika Anda belum mempunyai font BebasNeue, Anda bisa download dulu di situs DaFont.com. Langkah 12. Tambahkan 3 shape persegi panjang berukuran 250 x 150 piksel berwarna merah velvet (#c73047). Buat shape tersebut sejajar dengan jarak yang sinergi. Kemudian 30

32 tambahkan garis penghubung antara persegi panjang tersebut. Gunakan warna abu-abu gelap (#2d2d2d). Langkah 13. Sekarang tambahkan teks ke dalam kotak merah velvet. Gunakan font Arial Regular 12px berwarna putih. Kotak pertama isi dengan teks sederhana. Kotak yang kedua akan kita isi dalam bentuk list. Melalui Ellips Tool (U), buat beberapa lingkaran kecil berwarna putih (#ffffff) sebagai bullet. Terakhir tambahkan angka di kanan bawah kotak. Gunakan font Georgia Italic ukuran 60px dengan warna pink gelap (#992536). 31 Langkah 14. Pada kotak terakhir, tambahkan teks dan angka 3 di pojok kanan bawah. Kemudian buat tombol donasi menggunakan Rounded Rectangle Tool. Panjang 200 px, dan lebar 48 px. Kemudian tambahkan Layer Style berupa Gradient Overlay dengan warna 1 (#c79f00) dan warna 2 (#ffcb05). Tambahkan Drop Shadow warna hitam (#000000) dengan Distance 1 px, Angle 90, Opacity 50%. Langkah 15. Tambahkan icon Coin. Anda bisa mencarinya dulu di situs IconFinder.com. Kemudian masukkan teks atas dengan font Arial Bold 18px dan teks bawah dengan font Arial regular ukuran 12px. Beri keduanya warna abu-abu 31

33 gelap (#2d2d2d2). Tambahkan Layer Style berupa Drop Shadow seperti pada langkah 5. Tambahkan juga efek Color Overlay dengan warna abu-abu gelap (#2d2d2d) pada icon Coin agar lebih selaras. Langkah 16. Buat 2 tombol lagi dan posisikan keduanya di bawah kotak merah velvet kedua (di tengah halaman). Sama seperti langkah 4 dan Langkah 17. Ayo kita ulas sejenak. Praktek desain website pada kanvas 1020 x 1725 kita yang lalu telah menghasilkan tampilan seperti pada gambar berikut. Langkah 18. Maka berikutnya kita tinggal lengkapi bagian yang masih kosong. Kami memilih untuk mengisinya dengan bagian pelengkap, yaitu Article Update. Kenapa? karena jika kita mengingat salah satu syarat SEO (Search Engine Optimization) yaitu 32

34 konten tulisan yang fresh, maka Article Update merupakan solusi yang paling pas. Maksud kami, konten apalagi yang lebih fresh dibandingkan denganarticle Update yang bisa dirilis setiap hari? Jadi mari kita mulai dengan membuat tulisan Article Update seperti gambar di bawah ini. Gunakan jenis huruf BebasNeue 36px dengan warna #2d2d2d. Seperti biasa, jenis huruf ini bisa di download dulu di situs DaFont.com. Kemudian buat garis 1 px pada bagian kiri kanan dengan Line Tool. 33 Langkah 19. Bagian Article Update sendiri rencananya akan terdiri dari judul, separuh konten artikel, gambar, dan tanggal artikel tersebut dibuat. Jadi sekarang kita buat dulu desain judul artikel dengan font Arial Bold 20px warna pink (#c73047). Kemudian untuk konten artikel, gunakan font Arial Regular 12px warna abu-abu gelap (#333333). Langkah 20. Kemudian tambahkan gambar untuk ilustrasi konten artikel pada Article Update. Dan terakhir, tambahkan Date Post untuk menunjukkan waktu artikel tersebut di rilis. Untuk elemen tanggal, gunakan font Georgia Italic 55px warna abu-abu gelap (#333333).Untuk bulan dan tahun gunakan font Georgia Regular ukuran 20px dengan warna abu-abu yang lebih terang (#666666). Posisikan semuanya seperti Gambar di bawah ini. Langkah 21. Tambahkan 3 lingkaran kecil di bawah Article Update. Gunakan Ellipse Tool dan beri warna abu-abu gelap (#2d2d2d). Lingkaran kecil ini berfungsi untuk memberitahu pada programmer bahwa anda ingin menambah JavaScript pada website. Jadi jika bagian 33

35 lingkaran kecil ini diklik, maka akan muncul artikel selengkapnya melalui teknik JavaScript. Langkah 22. Kemudian tambahkan desain untuk tombol See All Article dengan Rounded Rectangle Tool (U). Tambahkan efek Layer Style berupa Gradient Overlay dengan warna 1 #d9d9d9 dan warna 2 #e5e5e5, dan efek Layer Style Stroke dengan size 1 px dan beri warna abu-abu (#bfbfbf). 34 Langkah 23. Selanjutnya, kita buat bagian lain yang tidak kalah penting dari Article Update. Yaitu Event&Contact. Di dalamnya akan diisi informasi tentang Event Update, Contact, dan icon-icon akun jejaring sosial. Prosedurnya sama seperti Langkah 18. Bikin dulu teks judul Event&Contact sama seperti membuat teks Article Update. Langkah 24. Pada gambar di atas anda bisa melihat ada sebuah desain dropcap tanggal. Caranya, gunakan Ellips Tool (U) untuk membuat sebuah lingkaran berwana pink (#c73047). Jenis huruf bisa kita gunakan BebasNeue 30px. Sedangkan untuk nama bulan, 34

36 kita gunakan font Arial Bold 10px. Beri warna putih (#ffffff) untuk keduanya dengan tambahan Layer Style berupa Drop Shadow warna hitam (#000000), Opacity 30%, Angle 90%, dan Distance 1px. 35 Langkah 25. Duplikat dua desain dropcap tanggal. Kemudian tambahkan teks untuk tempat dan alamat Event. Gunakan font Arial Bold 14px untuk tempat event dan Arial Regular 12px untuk alamat event. Berikan warna abu-abu gelap (#272727) untuk keduanya. Terakhir, tambahkan tombol abu-abu sama seperti Langkah 22. Namun kali ini tulisannya See All Event. Langkah 26. Dapatkan ikon Pin dan Telephone di IconFinder.com. Kemudian styling kedua icon tersebut dengan Color Overlay warna #c6c6c6. Tambahkan beberapa teks untuk informasi contact. Untuk teks judul gunakan Arial Bold 14px warna pink dan Arial Bold 12px warna abu-abu tua sebagai teks di bawahnya. Langkah 27. Tambahkan screen shot Google Maps, kemudian styling dengan Layer Style berupa Stroke dan Outer Glow. 35

37 Langkah 28. Langkah selanjutnya adalah menambahkan Icon Social Network. Dengan Ellipse Tool (U), buatlah 6 lingkaran dengan ukuran yang sama. Lima dari enam lingkaran tersebut beri warna abu-abu. Untuk yang satu lingkaran tersisa berikan warna pink, hal ini akan memberitahukan programmer agar menggunakan efek Hover pada CSS website. 36 Langkah 29. Terakhir, tambahkan informasi Copyright dengan font Georgia Italic 12px. Beri warna putih (#ffffff). Sedangkan untuk background footer, gunakan Rectangle Tool dan beri warna abu-abu gelap (#2d2d2d) dengan tinggi 70 px dari bagian paling bawah halaman. Langkah 30. Selesai! Seperti apa desain kita jadinya, bisa dilihat pada Gambar di bawah ini. anda bisa klik untuk memperbesar. 36

38 37 Langkah yang terakhir sebagai desainer, anda tinggal berikan desain tersebut ke programmer anda untuk dilakukan proses slicing dan coding website. Nah, untuk artikel artikel selanjutnya, 37