Desain dan Pemrograman Web 1

Presentasi berjudul: "Desain dan Pemrograman Web 1"— Transcript presentasi:

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 PENGENALAN ADOBE PHOTOSHOP
Bagian 1 PENGENALAN ADOBE PHOTOSHOP

5 Adobe Photoshop CS2 Merupakan sebuah software yang berfungsi sebagai image editor. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

6 Mode Warna pada Gambar (1)
Mode Warna RGB (Red, Green, Blue) Biasa digunakan untuk menampilkan warna dalam layar monitor, karena hampir semua jenis monitor menggunakan kombinasi warna merah, hijau dan biru. Mode Warna Bitmap Mode warna ini terdiri atas 1 bit warna (hitam atau putih) per pixel. Apabila gambar berwarna diubah menjadi mode warna bitmap, warna asli image tersebut akan berubah menjadi hitam dan putih. Biasa digunakan untuk mencetak image dengan hasil pencetakan hitam dan putih. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

7 Mode Warna pada Gambar (2)
Mode Warna CMYK (Cyan, Magenta, Yellow, Black) Gambar yang menggunakan mode warna ini terbentuk dari empat warna yaitu Cyan, Magenta, Yellow, Black. Mode warna ini biasa digunakan pada alat pencetakan gambar seperti printer. Mode Warna Grayscale Mode warna ini hamper sama dengan mode warna bitmap, namun memiliki nilai sampai 8 bit. Mode Warna Duotone Mode warna ini menggunakan dua buah kanal warna dan dapat ditentukan warnanya sesuai dengan keinginan Anda. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

8 Format File Gambar (1) PSD (Photoshop Document) BMP (Bitmap Image)
Merupakan format asli dokumen Adobe Photoshop. Mampu menyimpan informasi layer dan alpha channel yang terdapat pada sebuah gambar, sehingga suatu saat dapat dibuka dan diedit kembali. Mampu menyimpan gambar dalam beberapa mode warna yang disediakan Photoshop. BMP (Bitmap Image) Merupakan format grafis yang fleksibel sehingga dapat dibaca oleh program grafis manapun. Mampu menyimpan informasi dengan kualitas tingkat 1 bit sampai 24 bit. Tidak mampu menyimpan alpha channel Mampu menyimpan gambar dalam mode warna RGB, Grayscale, Indexed Color, dan Bitmap. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

9 Format File Gambar (2) JPG/JPEG (Joint Photographic Expert Group)
Mampu mengkompres objek dengan tingkat kualitas sesuai dengan pilihan yang disediakan. Sering dimanfaatkan untuk menyimpan gambar yang akan digunakan untuk keperluan halaman web, multimedia, dan publikasi elektronik lainnya. Mampu menyimpan gambar dengan mode warna RGB, CMYK, dan Grayscale. Mampu menyimpan alpha channel, namun karena orientasinya ke publikasi elektronik maka format ini berukuran relatif lebih kecil dibandingkan dengan format file lainnya. GIF (Graphic Interchange Format) Hanya mampu menyimpan dalam 8 bit (hanya mendukung mode warna Grayscale, Bitmap dan Indexed Color). Merupakan format standar untuk publikasi elektronik dan internet. Mampu menyimpan animasi dua dimensi yang akan dipublikasikan pada internet, desain halaman web dan publikasi elektronik. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

10 Format File Gambar (3) TIFF (Tagged Image Format File)
Mampu menyimpan gambar dengan kualitas hingga 32 bit. Dapat digunakan untuk keperluan pertukaran antar platform (PC, Machintosh, dan Silicon Graphic). Merupakan salah satu format yang dipilih dan sangat disukai oleh para pengguna komputer grafis terutama yang berorientasi pada publikasi (cetak). Hampir semua program yang mampu membaca format file bitmap juga mampu membaca format file TIF. PNG (Portable Network Graphic) Berfungsi sebagai alternatif lain dari format file GIF. Digunakan untuk menampilkan objek dalam halaman web. Mampu menyimpan file dalam bit depth hingga 24 bit serta mampu menghasilkan latar belakang (background) yang transparan dengan pinggiran yang halus. Mampu menyimpan alpha channel. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

11 Format File Gambar (4) EPS (Encapsuled Postcript)
Merupakan format yang sering digunakan untuk keperluan pertukaran dokumen antar program grafis. Menggunakan bahasa postscript sehingga format file ini dikenali oleh hampir semua program persiapan cetak. Tidak mampu menyimpan alpha channel, sehingga banyak pengguna Adobe Photoshop menggunakan format file ini ketika gambar yang dikerjakan sudah final. Mampu menyimpan gambar dengan mode warna RGB, CMYK, Lab, Duotone, Grayscale, Indexed Color, serta Bitmap. Format yang bisa dipakai dalam sebuah halaman web adalah JPG, GIF, BMP dan PNG FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

12 ToolBox (1) Marquee Tool
Digunakan untuk melakukan seleksi pada image dengan bentuk yang sudah tersedia. Ketika menggunakan marquee tool, maka pada optionbar akan tampak seperti di bawah ini : FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

13 ToolBox (2) FAKULTAS TEKNOLOGI INFORMASI
DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

14 ToolBox (3) Move Tool Digunakan untuk memindahkan sebagian gambar pada layer yang sedang aktif ke tempat lain. Lasso Tool Digunakan untuk melakukan seleksi pada gambar secara bebas. Bebas di sini maksudnya adalah bentuk seleksi dapat diatur sesuai keinginan dengan cara menggerakkan mouse pada area yang akan diseleksi. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

15 ToolBox (4) Magic Wand Tool
Digunakan untuk melakukan seleksi pada gambar berdasarkan kesamaan warna. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

16 ToolBox (5) Crop Tool Slice Tool
Digunakan untuk memotong atau mengambil sebagian gambar yang akan dijadikan sebagai gambar baru yang berdiri sendiri. Slice Tool Digunakan untuk membuat potongan-potongan image dari sebuah image. Juga ada Slice Select Tool yang digunakan untuk memilih potongan pada sebuah gambar. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

17 Bekerja dengan Photoshop (1)
Membuat File Baru Anda dapat membuat file image baru dengan menekan menu File -> New FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

18 Bekerja dengan Photoshop (2)
Beberapa option yang bisa diatur pada saat membuat file baru Name : Menentukan nama jendela kerja baru yang akan dibuat Preset : Menentukan ukuran gambar yang akan dibuat Width : Menentukan lebar gambar Height : Menentukan tinggi gambar Resolution : Menentukan resolusi gambar Color Mode : Menentukan mode warna gambar Background Contents : Menentukan isi background, apakah transparan atau berwarna FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

19 Bekerja dengan Photoshop (3)
Menyimpan File Untuk menyimpan file dapat menggunakan menu File -> Save. Pilih format file PSD agar file tersebut dapat diedit kembali di lain waktu. Jika file gambar yang disimpan untuk sebuah website, gunakan menu File -> Save for Web. Pilih format file yang diinginkan. Perhatikan juga ukuran file dan waktu download yang diperlukan. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

20 Bekerja dengan Photoshop (4)
Menggunakan Layer Layer merupakan lapisan tempat gambar diletakkan. Layer dapat diibaratkan sebagai sebuah lapisan plastik transparan yang dapat digambar. Layer diletakkan secara berlapis sehingga membentuk gambar baru. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

21 Bekerja dengan Photoshop (5)
Palet Layer Adobe Photoshop menyediakan palet layer untuk memudahkan penggunaan dan pengaturan layer. Palet layer dapat dimunculkan melalui menu Window -> Layers Keterangan : A. Layers palette menu B. Group C. Layer D. Expand/Collapse Layer effects E. Layer effect F. Layer thumbnail FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

22 Bekerja dengan Photoshop (6)
Membuat Layer Baru Untuk membuat sebuah layer baru, dapat diklik icon yang berada di bagian bawah palet layer. Atau dapat juga melalui menu Layer -> New Layer Membuat Group Baru Group digunakan untuk mengelompokkan layer. Group berfungsi seperti folder. Untuk membuat sebuah group baru, dapat diklik icon yang berada di bagian bawah palet layer. Atau dapat juga melalui menu Layer -> New Group FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

23 Bekerja dengan Photoshop (7)
Menghapus Layer Untuk menghapus layer yang tidak diperlukan lagi, dapat diklik icon yang berada di bagian bawah palet layer. Atau dapat juga melalui menu Layer -> Delete Layer Menampilkan / Menyembunyikan Layer Layer yang ada pada palet layer dapat ditampilkan maupun disembunyikan. Biasanya layer disembunyikan karena layer tersebut tidak digunakan lagi dalam sebuah gambar. Untuk menampilkan maupun menyembunyikan layer, dapat diklik icon mata yang ada di sebelah kiri masing-masing layer. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

24 Bekerja dengan Photoshop (8)
Layer Style Untuk memberikan efek pada layer, klik pada layer yang akan diberikan efek, kemudian pilih icon yang berada di bagian bawah palet layer. Atau dapat juga melakukan klik kanan pada layer yang akan diberikan efek. Kemudian pilih Blending Options FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

25 MEMBUAT HEADER SEDERHANA
Bagian 2 MEMBUAT HEADER SEDERHANA

26 Gambar Header Sederhana (1)
Buatlah sebuah dokumen baru dengan ukuran 700 x 150 (Anda dapat menyesuaikan ukuran sesuai selera) FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

27 Gambar Header Sederhana (2)
Buatlah sebuah kotak dengan Rounded Rectangle Tool. Pada optionbar masukkan angka 20 pada kotak radius dan atur warna sesuai pilihan. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

28 Gambar Header Sederhana (3)
Buatlah sebuah layer baru, dan pilih Horizontal Type Tool untuk menuliskan kata-kata pada layer. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

29 Gambar Header Sederhana (4)
Klik kanan pada layer tersebut dan pilih Blending Options. Pilih style sesuai selera. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

30 Gambar Header Sederhana (5)
Ulangi langkah 3 dan 4, untuk menuliskan alamat situs. FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110- 3

31 Gambar Header Sederhana (6)
Pilih Custom Shape Tool untuk membuat logo berdasarkan bentuk yang sudah disediakan Photoshop. Pada option bar, pilih shape yang diinginkan. Kemudian simpan dengan ekstension PSD dan juga simpan dengan format JPG maupun GIF. FAKULTAS TEKNOLOGI INFORMASI 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.

51 Buat Teks Buatlah sebuah teks di dalam shape. Warna dan style dapat diatur sesuai keinginan.

52 Kreasi dan Efek Photoshop

53 Terima Kasih Fakultas Teknologi Informasi Universitas Budi Luhur Jakarta Selatan