1 / 53

Desain dan Pemrograman Web 1

Desain dan Pemrograman Web 1. PG110 – 3 SKS. PERTEMUAN 12. Manipulasi Gambar. Materi. Pengenalan Adobe Photoshop Contoh Membuat Header Sederhana Contoh Membuat Efek Teks dengan Photoshop Contoh Membuat Efek Tombol dengan Photoshop. Bagian 1. PENGENALAN ADOBE PHOTOSHOP.

lenore
Download Presentation

Desain dan Pemrograman Web 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Desain dan Pemrograman Web 1 PG110 – 3 SKS

  2. PERTEMUAN 12 Manipulasi Gambar

  3. Materi Pengenalan Adobe Photoshop Contoh Membuat Header Sederhana Contoh Membuat Efek Teks dengan Photoshop Contoh Membuat Efek Tombol dengan Photoshop

  4. Bagian 1 PENGENALAN ADOBE PHOTOSHOP

  5. Adobe Photoshop CS2 Merupakansebuah software yang berfungsisebagai image editor. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  6. Mode Warna pada Gambar (1) • Mode Warna RGB (Red, Green, Blue) Biasadigunakanuntukmenampilkanwarnadalamlayar monitor, karenahampirsemuajenis monitor menggunakankombinasiwarnamerah, hijaudanbiru. • Mode Warna Bitmap Mode warnainiterdiriatas 1 bit warna (hitamatauputih) per pixel. Apabilagambarberwarnadiubahmenjadi mode warna bitmap, warnaasli image tersebutakanberubahmenjadihitamdanputih. Biasadigunakanuntukmencetak image denganhasilpencetakanhitamdanputih. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  7. Mode Warna pada Gambar (2) • Mode Warna CMYK (Cyan, Magenta, Yellow, Black) Gambar yang menggunakan mode warnainiterbentukdariempatwarnayaitu Cyan, Magenta, Yellow, Black. Mode warnainibiasadigunakanpadaalatpencetakangambarseperti printer. • Mode Warna Grayscale Mode warnaini hamper samadengan mode warna bitmap, namunmemilikinilaisampai 8 bit. • Mode Warna Duotone Mode warnainimenggunakanduabuahkanalwarnadandapatditentukanwarnanyasesuaidengankeinginanAnda. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  8. Format File Gambar (1) • PSD (Photoshop Document) • Merupakan format aslidokumen Adobe Photoshop. • Mampumenyimpaninformasi layer dan alpha channel yang terdapatpadasebuahgambar, sehinggasuatusaatdapatdibukadandieditkembali. • Mampumenyimpangambardalambeberapa mode warna yang disediakan Photoshop. • BMP (Bitmap Image) • Merupakan format grafis yang fleksibelsehinggadapatdibacaoleh program grafismanapun. • Mampumenyimpaninformasidengankualitastingkat 1 bit sampai 24 bit. • Tidakmampumenyimpan alpha channel • Mampumenyimpangambardalam mode warna RGB, Grayscale, Indexed Color, dan Bitmap. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  9. Format File Gambar (2) • JPG/JPEG (Joint Photographic Expert Group) • Mampumengkompresobjekdengantingkatkualitassesuaidenganpilihan yang disediakan. • Seringdimanfaatkanuntukmenyimpangambar yang akandigunakanuntukkeperluanhalaman web, multimedia, danpublikasielektroniklainnya. • Mampumenyimpangambardengan mode warna RGB, CMYK, dan Grayscale. • Mampumenyimpan alpha channel, namunkarenaorientasinyakepublikasielektronikmaka format iniberukuranrelatiflebihkecildibandingkandengan format file lainnya. • GIF (Graphic Interchange Format) • Hanyamampumenyimpandalam 8 bit (hanyamendukung mode warna Grayscale, Bitmap dan Indexed Color). • Merupakan format standaruntukpublikasielektronikdan internet. • Mampumenyimpananimasiduadimensi yang akandipublikasikanpada internet, desainhalaman web danpublikasielektronik. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  10. Format File Gambar (3) • TIFF (Tagged Image Format File) • Mampumenyimpangambardengankualitashingga 32 bit. • Dapatdigunakanuntukkeperluanpertukaranantar platform (PC, Machintosh, dan Silicon Graphic). • Merupakansalahsatu format yang dipilihdansangatdisukaiolehparapenggunakomputergrafisterutama yang berorientasipadapublikasi (cetak). • Hampirsemua program yang mampumembaca format file bitmap jugamampumembaca format file TIF. • PNG (Portable Network Graphic) • Berfungsisebagaialternatif lain dari format file GIF. • Digunakanuntukmenampilkanobjekdalamhalaman web. • Mampumenyimpan file dalam bit depth hingga 24 bit sertamampumenghasilkanlatarbelakang (background) yang transparandenganpinggiran yang halus. • Mampumenyimpan alpha channel. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  11. Format File Gambar (4) • EPS (EncapsuledPostcript) • Merupakan format yang seringdigunakanuntukkeperluanpertukarandokumenantar program grafis. • Menggunakanbahasa postscript sehingga format file inidikenaliolehhampirsemua program persiapancetak. • Tidakmampumenyimpan alpha channel, sehinggabanyakpengguna Adobe Photoshop menggunakan format file iniketikagambar yang dikerjakansudah final. • Mampumenyimpangambardengan mode warna RGB, CMYK, Lab, Duotone, Grayscale, Indexed Color, serta Bitmap. • Format yang bisadipakaidalamsebuahhalaman web adalah JPG, GIF, BMP dan PNG DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  12. ToolBox (1) Marquee Tool Digunakanuntukmelakukanseleksipada image denganbentuk yang sudahtersedia. Ketikamenggunakan marquee tool, makapadaoptionbarakantampaksepertidibawahini : DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  13. ToolBox (2) DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  14. ToolBox (3) Move Tool Digunakanuntukmemindahkansebagiangambarpada layer yang sedangaktifketempat lain. Lasso Tool Digunakanuntukmelakukanseleksipadagambarsecarabebas. Bebasdisinimaksudnyaadalahbentukseleksidapatdiatursesuaikeinginandengancaramenggerakkan mouse pada area yang akandiseleksi. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  15. ToolBox (4) Magic Wand Tool Digunakanuntukmelakukanseleksipadagambarberdasarkankesamaanwarna. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  16. ToolBox (5) Crop Tool Digunakanuntukmemotongataumengambilsebagiangambar yang akandijadikansebagaigambarbaru yang berdirisendiri. Slice Tool Digunakanuntukmembuatpotongan-potongan image darisebuah image. JugaadaSlice Select Tool yang digunakanuntukmemilihpotonganpadasebuahgambar. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  17. Bekerja dengan Photoshop (1) Membuat File Baru Andadapatmembuat file image barudenganmenekan menu File -> New DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  18. Bekerja dengan Photoshop (2) Beberapa option yang bisadiaturpadasaatmembuat file baru Name : Menentukannamajendelakerjabaru yang akandibuat Preset : Menentukanukurangambar yang akandibuat Width : Menentukanlebargambar Height : Menentukantinggigambar Resolution : Menentukanresolusigambar Color Mode : Menentukan mode warnagambar Background Contents : Menentukanisi background, apakahtransparanatauberwarna DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  19. Bekerja dengan Photoshop (3) Menyimpan File Untukmenyimpan file dapatmenggunakan menu File -> Save. Pilih format file PSD agar file tersebutdapatdieditkembalidi lain waktu. Jika file gambar yang disimpanuntuksebuah website, gunakan menu File -> Save for Web. Pilih format file yang diinginkan. Perhatikanjugaukuran file danwaktu download yang diperlukan. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  20. Bekerja dengan Photoshop (4) • Menggunakan Layer • Layer merupakanlapisantempatgambardiletakkan. • Layer dapatdiibaratkansebagaisebuahlapisanplastiktransparan yang dapatdigambar. • Layer diletakkansecaraberlapissehinggamembentukgambarbaru. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  21. Bekerja dengan Photoshop (5) Keterangan : A. Layers palette menu B. Group C. Layer D. Expand/Collapse Layer effects E. Layer effect F. Layer thumbnail Palet Layer Adobe Photoshop menyediakanpalet layer untukmemudahkanpenggunaandanpengaturan layer. Palet layer dapatdimunculkanmelalui menu Window -> Layers DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  22. Bekerja dengan Photoshop (6) • Membuat Layer Baru Untukmembuatsebuah layer baru, dapatdiklik icon yang beradadibagianbawahpalet layer. Ataudapatjugamelalui menu Layer -> New Layer • Membuat Group Baru • Group digunakanuntukmengelompokkan layer. • Group berfungsiseperti folder. • Untukmembuatsebuah group baru, dapatdiklik icon yang beradadibagianbawahpalet layer. Ataudapatjugamelalui menu Layer -> New Group DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  23. Bekerja dengan Photoshop (7) Menghapus Layer Untukmenghapus layer yang tidakdiperlukanlagi, dapatdiklik icon yang beradadibagianbawahpalet layer. Ataudapatjugamelalui menu Layer -> Delete Layer Menampilkan / Menyembunyikan Layer Layer yang adapadapalet layer dapatditampilkanmaupundisembunyikan. Biasanya layer disembunyikankarena layer tersebuttidakdigunakanlagidalamsebuahgambar. Untukmenampilkanmaupunmenyembunyikan layer, dapatdiklik icon mata yang adadisebelahkirimasing-masing layer. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  24. Bekerja dengan Photoshop (8) • Layer Style Untukmemberikanefekpada layer, klikpada layer yang akandiberikanefek, kemudianpilih icon yang beradadibagianbawahpalet layer. Ataudapatjugamelakukanklikkananpada layer yang akandiberikanefek. KemudianpilihBlending Options DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  25. Bagian 2 MEMBUAT HEADER SEDERHANA

  26. Gambar Header Sederhana (1) Buatlahsebuahdokumenbarudenganukuran 700 x 150 (Andadapatmenyesuaikanukuransesuaiselera) DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  27. Gambar Header Sederhana (2) • BuatlahsebuahkotakdenganRounded Rectangle Tool. Padaoptionbarmasukkanangka 20 padakotak radius danaturwarnasesuaipilihan. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  28. Gambar Header Sederhana (3) • Buatlahsebuah layer baru, danpilihHorizontal Type Tool untukmenuliskankata-katapada layer. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  29. Gambar Header Sederhana (4) • Klikkananpada layer tersebutdanpilihBlending Options. Pilih style sesuaiselera. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  30. Gambar Header Sederhana (5) • Ulangilangkah 3 dan 4, untukmenuliskanalamatsitus. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  31. Gambar Header Sederhana (6) PilihCustom Shape Tool untukmembuat logo berdasarkanbentuk yang sudahdisediakan Photoshop. Pada option bar, pilih shape yang diinginkan. Kemudiansimpandenganekstension PSD danjugasimpandengan format JPG maupun GIF. DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

  32. Bagian 3 MEMBUAT EFEK TEKS

  33. Membuat File Baru • File > New • Width = 500 px, Height = 200 px • Background = White (putih)

  34. Membuat Tulisan • Buat tulisan dengan Horizontal Type Tools • Atur Font , Warna dan Ukurannya

  35. Duplicate Layer • Pada panel layer, klik kanan pada layer tulisan dan pilih sub menu Duplicate Layer…

  36. Move Tulisan • Geser tulisan pada kanvas ke bawah dengan Move Tool .

  37. Balik Tulisan • Balik tulisan yang dibawah dengan menu Edit > Transform > Flip Vertical dan sesuaikan posisi tepat di bawah tulisan.

  38. Rasterize Layer • Pada layer tulisan bawah, klik kanan dan pilih sub-menu Rasterize Type.

  39. Marquee Tools • Pilih Marquee Tool dan pilih (select) tulisan bawah (lihat gambar).

  40. Feather • Pilih menu Select > Feather dan masukkan nilai 8px.

  41. Delete • Tekan tombol Delete dan lihat hasilnya.

  42. Create your Own Kreasikan sesuai dengan keinginan Anda Teknik ini juga dapat diterapkan untuk membuat efek bayangan (reflection) pada gambar (image)

  43. Bagian 4 MEMBUAT EFEK TOMBOL

  44. Buat File Baru • Buat File Baru dengan File > New. Ukuran Width 200px, Height 90px dan Background = White (putih)

  45. Rounded Rectangle Tool • Buatlah sebuah shape dengan Rounded Rectangle Tool. Untuk mengatur kelengkungan, ubahlah nilai Radius yang berada di menu sebelah atas

  46. Atur Style (1) • Atur style Gradient Overlay, Stroke dan Drop Shadow dari shape melalui menu Layer > Layer Style > Blending Options… (lihat gambar).

  47. Atur Style (2) • Atur style Gradient Overlay, Stroke dan Drop Shadow dari shape melalui menu Layer > Layer Style > Blending Options… (lihat gambar).

  48. Atur Style (3) • Atur style Gradient Overlay, Stroke dan Drop Shadow dari shape melalui menu Layer > Layer Style > Blending Options… (lihat gambar).

  49. Shape Baru • Buat sebuah shape baru dengan Rounded Rectangle Tool dan letakkan di bagian atas shape yang pertama (lihat gambar)

  50. Gaussian Blur • Buka menu Filter > Blur > Gaussian Blur… dan atur Radiusnya menjadi 5px atau sesuai keinginan.

More Related