Pembuatan Banner Pake Photoshop

28
Pusat Data dan Informasi Pertanian 2008 - 1 - ADOBE PHOTOSHOP POKOK BAHASAN A. Pengenalan Adobe Photoshop Hal - 1 B. Pengenalan Layer Hal - 1 C. Pengenalan Toolbox Hal 1 D. Pengertian Banner Hal 2 E. Latihan Pembuatan Banner-1 Hal 3 F. Latihan Pembuatan Banner-2 Hal - 15 A. Pengenalan Adobe Photoshop : Adobe Photoshop pada dasarnya merupakan aplikasi pengolah gambar, namun seringkali pula ia digunakan untuk mengubah tampilan suatu objek, misalnya teks atau tulisan. Adobe Photoshop bukan pengolah kata, tapi ia dapat membuat beragam efek menarik untuk mempercantik tampilan gambar dan teks. B. Pengenalan Layer Layer berkaitan dengan manajemen layer pada image, seperti menambah layer, menghapus, menambah efek pada layer, serta masking. C. Pengenalan Toolbox Toolbox berisi berbagai macam tools yang digunakan untuk melakukan manipulasi image.

description

Bagi yang belum tau, saya share Pembuatan Banner Pake Photoshop.

Transcript of Pembuatan Banner Pake Photoshop

Page 1: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 1 -

ADOBE PHOTOSHOP

POKOK BAHASAN

A. Pengenalan Adobe Photoshop Hal - 1

B. Pengenalan Layer Hal - 1

C. Pengenalan Toolbox Hal – 1

D. Pengertian Banner Hal – 2

E. Latihan Pembuatan Banner-1 Hal – 3

F. Latihan Pembuatan Banner-2 Hal - 15

A. Pengenalan Adobe Photoshop :

Adobe Photoshop pada dasarnya merupakan aplikasi pengolah gambar,

namun seringkali pula ia digunakan untuk mengubah tampilan suatu

objek, misalnya teks atau tulisan.

Adobe Photoshop bukan pengolah kata, tapi ia dapat membuat beragam

efek menarik untuk mempercantik tampilan gambar dan teks.

B. Pengenalan Layer Layer berkaitan dengan manajemen layer pada image,

seperti menambah layer, menghapus, menambah efek pada layer, serta

masking.

C. Pengenalan Toolbox Toolbox berisi berbagai macam tools yang digunakan

untuk melakukan manipulasi image.

Page 2: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 2 -

Keterangan Gambar :

A. Marquee Tool

B. Move Tool

C. Lasso Tool

D. Magic Wand Tool

E. Crop Tool

F. Slice Tool

G. Patch Tool

H. Brush Tool

I. Stamp Tool

J. History Brush Tool

K. Eraser Tool

L. Paint Bucket Tool

M. Sharpen Tool

N. Burn Tool

O. Path Selection Tool

P. Type Tool

Q. Pen Tool

R. Custom Shape Tool

S. Notes Tool

T. Eyedropper Tool

U. Hand Tool

V. Zoom Tool

Fungsi dari masing-masing tools dijelaskan pada Manual “Image Editing

Menggunakan Adobe Photoshop” halaman 6 – 12.

D. Pengertian Banner Judul dari suatu website yang mencirikan website

tersebut.

Page 3: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 3 -

Contoh Banner-1 yang akan di buat :

LANGKAH – LANGKAH PEMBUATAN BANNER-1 :

1. Jalankan program Adobe Photoshop. Klik Start > All Program > Adobe

Photoshop CS.

2. Buat File baru, Klik File > New (Ukuran untuk Pembuatan Banner) :

Isi >> Width : 775 Pixels

Height : 140 Pixels

Resolution : 100 pixels/inch

Color Mode : RGB Color

Background Contents : White

3. Klik [OK]

Gambar 1. New

4. Simpan File dengan nama "banner-1" dengan cara : Klik File > Save As.

Isikan >> File Name : banner-1

Format : Photoshop(*.PSD).

5. Buka file dengan nama “image-banner1.1.jpg” dari folder banner-1. Klik

File > Open. Buka folder banner-1. Cari nama file “image-banner1.1.jpg”

Klik Open. Lihat gambar 2.

Page 4: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 4 -

Gambar 2. langkah-langkah membuka file. Nama File yang dibuka >> “image-banner1.1.jpg”

6. Buka gambar kunci/gembok pada layer “Background” dengan cara klik dua

kali.

Gambar 3.

7. Pindahkan file gambar “image-banner1.1.jpg” ke jendela “Banner-1” ada

2 cara pilihan yaitu :

Cara 1 : Pada layer “image-banner1.1” klik Move Tool , Klik dan

tahan kemudian tarik file “image-banner1.1.jpg” ke jendela “banner-

1”, atau

Cara 2 :

a) Klik menu select > all (gambar akan terseleksi), kemudian klik

menu Edit > Copy Merge.

Klik dua kali

Page 5: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 5 -

b) Buka jendela “banner-1”, kemudian Klik menu Edit > Paste.

8. Gambar “image-banner1.1.jpg” tidak sesuai dengan ukuran banner, maka

untuk memperbesar atau memperkecil ukuran image dapat menggunakan :

Klik menu Edit > Free Transform. Sesuaikan ukuran image dengan ukuran

banner yang ada. Pada layer ubah nama layer 1 (layer gambar) dengan

nama “back gambar”

Catatan : untuk penggunaan Free Transform, agar ukuran image tetap

proposional tekan tombol [Shift] pada keyboard.

Penamaan pada layer untuk memudahkan pengeditan.

9. Kita ingin menempatkan gambar pohon yang posisi semula terletak di

sebelah kiri diputar ke posisi sebelah kanan. Caranya :

Klik Edit > Transform > Flip Horizontal. Hasilnya letak gambar pohon

akan berpindah ke sebelah kanan.

10. Buat layer baru dengan cara Klik Layer > New > Layer atau klik icon

“Create New Layer” pada “Pallete Layer” dan Beri nama layer baru

tersebut dengan nama “back hijau”.

Gambar 4. Pallete New Layer

Icon “Create New Layer”

Pallete Layer

Page 6: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 6 -

11. Warnai layer “back hijau” dengan warna hijau dengan cara : Pada Tools

pilih “Set Foreground Color” pilih warna hijau (kode warna = #003300).

Lihat gambar 5.

Gambar 5.

12. Setelah gambar dipilih, untuk mewarnai layer pada tools pilih “Paint

Bucket Tool”. Klik pada layer maka gambar image tersebut akan tertutupi

dengan warna hijau.

13. Kemudian pada Tool pilih “Rectangel Marquee Tool” untuk membuat

seleksi. Tekan [delete] pada keyboard untuk menghapus bagian tengah

yang terseleksi. Lihat gambar 6.

Gambar 6. Hasil seleksi

gambar yang sudah di

delete.

Catatan :

Klik Menu Select > Deselect atau tekan [Ctrl]+[D] untuk

mehilangkan garis terputus-putus pada gambar.

Untuk memudahkan seleksi pada gambar sesuai keinginan, dengan

cara menarik Rulers ke layer "back hijau". Cara menarik Rulers :

Klik kemudian akan muncul

pilihan warna.

Letak kode

warna.

Page 7: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 7 -

pada Tools pilih "Move Tools", setelah itu pada Rulers klik

tahan dan tarik.

Untuk memunculkan Rulers jika tidak muncul pada jendela kerja

kita yaitu dengan Klik View > Rulers.

14. Klik menu Layer > Layer Style > Pilih Blending Options atau pada layer

“back hijau” klik kanan > Pilih Blending Options, pilih Outer Glow.

Pada Blend Mode = screen, atur nilai Opacity = 100%, Noise = 0%, Color

of Glow = pilih warna putih, Technique = Softer, Spread = 40%, dan Size

= 10 px. Setelah selesai klik OK. Hasilnya batas antara bagian tengah

dengan tepi atas dan bawah akan tampak kemilau. Lihat gambar 7.

Gambar 7. Setting Outer Glow untuk “back hijau”.

15. Atur nilai Opacity layer “back hijau” menjadi 40%. Hasilnya fill layer

“back hijau” berubah menjadi transparan.

16. Klik File > Open. Buka folder “banner-1” cari file dengan nama “sapi-

besar.gif” kemudian klik Open.

Page 8: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 8 -

17. Pada Tools pilih “Move Tool” untuk memindahkan gambar “sapi-

besar” ke jendela kerja “banner-1”. Klik gambar “sapi-besar” kemudian

tahan dan tarik ke jendela kerja “banner-1”.

18. Klik Edit > Free Transform untuk menyesuaikan ukuran gambar. Untuk

menyesuaikan ukuran gambar jangan lupa menekan [Shift] pada keyboard

agar gambar yang dihasilkan proposional. Setelah gambar sesuai dengan

ukuran banner, putar gambar “sapi-besar” dengan Klik menu Edit >

Transform > Flip Horizontal. Pindahkan gambar “sapi” tersebut ke posisi

sebelah pojok kiri.

19. Beri nama layer dengan “sapi besar”.

20. Sekarang kita akan memasukkan gambar logo, dengan cara klik File >

Open. Jika ada logo, masukkan gambar logo sesuai dengan logo masing-

masing instansi kerja. Contoh logo yang dipakai untuk latihan “logo-

ende.gif”.

21. Pada jendela kerja “logo” Klik Select > All, kemudian Klik Edit > Copy.

22. Klik jendela kerja “banner-1” kemudian Klik Edit > Paste. Beri nama layer

dengan nama “Logo”.

23. Atur ukuran logo sesuai dengan keinginan dengan Klik Edit > Free

Transform. Jika ukuran sudah sesuai, atur letak logo di samping gambar

“sapi-besar”.

24. Pada jendela kerja “banner-1” layer “logo” kita akan memberikan effects.

Caranya : Pada menu Layer > Layer Style > Pilih Blending Options atau

pada layer “logo” klik kanan > Pilih Blending Options pilih Outer Glow

Pada Blend Mode = screen, atur nilai Opacity = 100%, Noise = 0%, Color

of Glow = pilih warna putih, Technique = Softer, Spread = 5%, dan Size

= 15 px. Setelah selesai klik OK. Hasilnya akan tampak kemilau

mengelilingi logo. Lihat gambar 8.

Page 9: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 9 -

Gambar 8. Setting Outer Glow

untuk “Logo”

25. Sekarang kita akan membuat layer teks dengan nama “DINAS

PETERNAKAN”, caranya :

Pada Tools pilih “Horizontal Type Tool”, pada options bar pilih:

Gambar 9. Optins Bar “Horizontal Type Tool”

Jenis Huruf = Trebuchet MS, Type = Bold, Besar Huruf = 18 pt, Set

the anti-aliasing method = Strong, Warna Huruf = Orange (kode

warna = # ff9933).

Catatan : Option Bar “Horizontal Type Tool” muncul jika kita

memilih icon pada Tools.

Setelah teks dibuat, beri effects dengan cara : Pada menu Layer >

Layer Style > Blending Options atau pada layer “DINAS

PETERNAKAN” klik kanan > Pilih Blending Options. Pilih Effects

“Stroke”, isikan :

Pada Size = 3 px, Position = Outside, Blend Mode = Normal,

Opacity = 100%, Fill Type = Color, Color = abu-abu tua (kode

warna = # 333333).

Page 10: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 10 -

Gambar 10. Setting

Effects “Stroke”

untuk teks

“DINAS

PETERNAKAN”

Klik OK.

26. Buat teks keduan dengan nama “Kabupaten Ende”, caranya :

Pada Tools pilih “Horizontal Type Tool”, pada options bar pilih

:

Gambar 10. Optins Bar “Horizontal Type Tool”

Jenis Huruf = Trebuchet MS, Type = Bold, Besar Huruf = 14 pt, Set

the anti-aliasing method = Strong, Warna Huruf = Orange muda

(kode warna = # ffcc33).

Catatan :

a) Option Bar “Horizontal Type Tool” muncul jika kita memilih

icon pada Tools.

b) Jika Tool tidak muncul Klik kanan pada tool atau klik dan

tahan (lihat gambar berikut)

Page 11: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 11 -

Setelah teks dibuat, beri effects dengan cara : Pada menu Layer >

Layer Style > Blending Options atau pada layer “Kabupaten Ende”

klik kanan > Pilih Blending Options. Pilih Effects “Stroke”, isikan :

Pada Size = 3 px, Position = Outside, Blend Mode = Normal,

Opacity = 100%, Fill Type = Color, Color = abu-abu tua (kode

warna = # 333333). Klik OK.

Gambar 11. Setting Effects

“Stroke” untuk teks

“Kabupaten Ende”

27. Atur kedua teks

tersebut di samping kiri Logo.

28. Sekarang kita akan membuat lingkaran yang didalamnya terdapat gambar

yang mewakili tentang peternakan. Di contoh gambar banner-1 kita akan

membuat 5 lingkaran. Berikut urutan pembuatannya :

Pada Tools pilih

Gambar 12. Cara memunculkan Tool “Elliptical

Marquee Tool”

Catatan : cara memilih “Elliptical Marquee Tool” apabila tidak

terlihat pada tools adalah dengan mengklik kanan atau klik dan tahan

pada Tools (lihat gambar diatas).

Jika kita sudah memilih Tool maka akan muncul pada options Bar

seperti :

Elliptical Marquee

Tool

Page 12: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 12 -

Gambar 13. Options Bar “Elliptical Marquee Tool”

Atur pada Style = Fixed Size, Width = 50 px, Height= 50 px.

Atur posisi lingkaran, letakkan di bawah dan setelah teks “Kabupaten

Ende” (lihat contoh gambar “banner-1”).

Sesudah pengaturan pada letak dan option bar, klik pada area gambar

untuk menempatkan seleksi lingkaran.

Kemudian buka file “kuda.jpg” dari folder “banner-1”. Buka gambar

kunci atau gembok pada gambar kuda dengan cara klik dua kali.

Klik menu Select > All, setelah gambar terseleksi klik menu Edit >

Copy Merge, buka jendela kerja “banner-1” kemudian klik menu Edit >

Paste Into untuk menampilkan duplikat gambar “kuda” didalam

seleksi.

Klik menu Edit > Free Transform untuk mengatur ukuran gambar dan

pastikan posisi dan ukuran gambar ”kuda” ditengah seleksi.

Setelah selesai klik Enter.

Pada Palet layer klik kanan pada layer mask “kuda” lalu pilih “Apply

Layer Mask”

Setelah layer gambar disatukan dengan layer mask, kita akan

memberikan effects, dengan cara : Klik Menu Layer > Layer Style >

Blending Option atau Klik Kanan pada layer “kuda” > pilih Blending

Option.

Pilih Outer Glow, isi pada Blend Mode = Screen, atur nilai Opacity =

100%, Noise = 0%, Color of Glow = putih, Technique = Softer, spread

= 5% dan Size = 15 px. Setelah selesai klik OK. Lihat gambar 14.

Page 13: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 13 -

Gambar 14. Setting

Effect “ Outer

Glow”

Setelah selesai di bagian kiri pilih style “Stroke”.

Atur nilai Size = 4 px, Position = Outside, Blend Mode = Normal,

Opacity = 100%, Fill Type = Color, dan pilih Color = putih. Setelah

selesai Klik OK. Lihat gambar 15.

Gambar 15. Setting

Effect “ Stroke”

Hasilnya akan tampak seperti gambar 16.

Gambar 16. Gambar kuda setelah diberi style Outer Glow

dan Stroke.

29. Ulangi langkah di point 28 utnuk membuat 4 lingkaran yang tersisa.

30. Simpan “banner-1” dengan klik menu File > Save.

Page 14: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 14 -

31. Kemudian simpan ulang dengan format .jpg atau .png agar banner-1 ini

dapat di tempatkan pada website yang akan anda dibuat, dengan cara :

Klik menu File > Save As. Lihat gambar 17.

Gambar 17. Save As

dengan format .png

Catatan :

Biasakan jika membuat banner, penyimpanan file dibuat 2 kali.

Yang pertama simpan dengan format = .psd, ini dimaksudkan jika anda

ingin merubah atau mengedit effect atau teks yang sudah dibuat.

Yang Kedua simpan dengan format = .png atau .jpg, hal ini dimaksudkan

untuk menempatkan “banner-1” ini di pada web yang akan anda buat.

Page 15: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 15 -

Contoh Banner-2 yang akan di buat :

LANGKAH – LANGKAH PEMBUATAN BANNER-2 :

1. Jalankan program Adobe Photoshop. Klik Start > All Program > Adobe

Photoshop CS.

2. Buat File baru, Klik File > New (Ukuran untuk Pembuatan Banner) :

Isi >> Width : 775 Pixels

Height : 140 Pixels

Resolution : 100 pixels/inch

Color Mode : RGB Color

Background Contents :

White

Gambar 1. New

3. Klik [OK]

4. Simpan File dengan nama "banner-2" dengan cara : Klik File > Save As.

Isikan >> File Name : banner-2

Format : Photoshop(*.PSD).

5. Pada tools pilih “Pen Tool”, digunakan untuk membuat path dengan

lengkung-lengkung yang halus. Untuk hasil yang rapi untuk membuat list

atas anda dapat menggunakan “Rulers” untuk memberi garis path yang

akan anda buat. Lihat gambar 2.

Page 16: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 16 -

Gambar 2. Penggunaan

Rulers untuk path.

6. Pada tools pilih “Set Foreground Color” dengan warna hijau

(kode warna = #00cc33). Ada 7 titik untukmembuat path seperti contoh

gambar banner-2. Lihat Cara berikut :

Gambar 3. Membuat path dan yang

tercatat pada Pallete Layers

Catatan :

Untuk menghilangkan “Rulers” pada jendela kerja tanpa

menghilangkan bekas rulers tersebut dengan cara : Pada Menu Klik

View > Extras.

Untuk menghasilkan path garis lurus yang rapi jangan lupa untuk

menekan [Shift] pada Keyboard.

Pada Pallete Layers akan tercatat seperti ini.

Page 17: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 17 -

7. Gabungkan shape yang telah anda buat dengan layer background warna

hijau, caranya :

Klik kanan pada layer “Shape” kemudian Pilih “Rasterize Layer”.

Hasilnya layer akan berubah nama menjadi “Shape 1”, untuk lebih

jelasnya dapat dilihat pada gambar 4.

Gambar 4. Rasterize Layer

8. Setelah layer “Shape 1” berhasil digabungkan, beri effect shape tersebut.

Pada layer “shape 1” klik menu Layer > Layer Style > Blending Options

atau Klik kanan pada layer “Shape 1” pilih Blending Options. Effect yang

dipakai yaitu “Drop Shadow” dan “Bevel dan Emboss”.

Pada Effect “Drop Shadow”, isikan :

Pada Blend Mode = Multiply, warna = abu-abu tua (kode warna =

#333333), Opacity = 100%, Angle = 120, Distance = 5 px, Spread = 0%,

Size = 5 px.

Page 18: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 18 -

Gambar 5. Setting Effect

“Drop Shadow”

Pada Effect “Bevel and Emboss”, isikan :

Pada Structure, Style = Inner Bevel, Techique = Smooth, Depth = 100%,

Direction = Up, Size = 5 px, Soften = 0 px. Lihat gambar 6.

Gambar 6. Setting

Effect “Bevel and

Emboss”

9. Setelah di beri effect, duplikat layer “shape 1” ada 2 pilihan cara :

Cara 1 : Klik Menu Layer > Duplicate Layer, atau

Cara 2 : Pada layer “Shape 1; klik kanan > pilih Duplicate Layer.

Page 19: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 19 -

10. Hasilnya “duplicate layer” akan menambah layer dengan nama “shape 1

copy”. Karena “Shape 1” sudah di beri effects maka otomatis effects

tersebut juga terdapat pada “Shape 1 copy”. Lihat gambar 7.

Gambar 7. Hasil Layer yang sudah di “Duplicate Layer”

11. Langkah berikutnya buka 6 file sekaligus diantaranya : “teh.jpg”,

“kelapa.jpg”, “karet.jpg”, “coklat.jpg”, “kopi.jpg”, “kapas.jpg” dari

folder “banner-2”. Klik Menu File > Open, buka folder “banner-2” dan

buka file “.jpg” yang disebutkan diatas.

Teh .jpg kelapa.jpg karet.jpg

Kopi.jpg kapas.jpg

12. Setelah semua file terbuka, pindahkan salah satu file gambar tersebut ke

jendela kerja “banner-2”, sebelum dipindahkan lambang kunci atau

gembok di buka terlebih dahulu dengan cara klik 2 kali, layernya akan

berubah menjadi nama layer 0 kemudian untuk memindahkan gambar ada

2 pilihan cara :

Hasil layer yang sudah

di “Duplicate Layer”

Page 20: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 20 -

Cara 1 : Layer “teh.jpg” Pada Tools klik Move Tool , Klik dan

tahan kemudian tarik file ke jendela kerja “banner-2”, atau

Cara 2 :

a) Klik menu select > all (gambar akan terseleksi), kemudian klik

menu Edit > Copy Merge.

b) Buka jendela “banner-2”, kemudian Klik menu Edit > Paste.

Lakukan ulang cara tersebut sampai ke 6 file tersebut berhasil

dipindahkan ke jendela kerja “banner-2”

13. Sesuaikan ukuran ke 6 gambar tersebut dengan ukuran Layer “Shape 1”

dan “Shape 1 Copy” dengan cara pada Menu Klik Edit > Free Transform,

jangan lupa menekan [shift] pada keyboard agar gambar yang dihasilkan

proposional.

14. Pindahkan ke 6 layer gambar tersebut ke bawah Layer “Shape 1” dan

“shape 1 copy”, agar gambar tersebut berada di belakang layer “Shape

1” dan “Shape 1 copy”. Berikut urutan layer setelah dipindahkan dan hasil

yang Lihat gambar 8.

Gambar 8. Urutan Layer dan hasilnya pada “banner-2”

15. Pada Layers pilih “Create New Layer” atau Layer > New > Layer

kemudian pada tools pilih “Rounded Rectangel Tool” (=digunakan

untuk menggambar segi empat melengkung).

Page 21: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 21 -

16. Pada Tools pilih “Set Foreground Color”. Pilih warna kuning

(kode warna = #ffff00). Atur opacity = 75 % agar tampak transparan.

Hasilnya lihat gambar 9.

Gambar 9. Hasil penggunaan “Rounded Rectangel Tool”

17. Sekarang kita akan memasukkan gambar logo, dengan cara klik File >

Open. Jika ada logo, masukkan gambar logo sesuai dengan logo masing-

masing instansi kerja. Contoh logo yang dipakai untuk latihan “logo-

lotim.gif”.

18. Pada jendela kerja “logo” Klik Select > All, kemudian Klik Edit > Copy.

19. Klik jendela kerja “banner-2” kemudian Klik Edit > Paste. Beri nama layer

dengan nama “Logo”.

20. Atur ukuran logo sesuai dengan keinginan dengan Klik Edit > Free

Transform. Jika ukuran sudah sesuai, atur letak logo di samping kiri

“Rounded Rectangel Tool”.

21. Pada jendela kerja “banner-2” layer “logo” kita akan memberikan effects

“Outer Glow” dan “Stroke”. Caranya : Pada menu Layer > Layer Style >

Pilih Blending Options atau pada layer “logo” klik kanan > Pilih Blending

Options.

Effect “Outer Glow”, isikan :

Pada Blend Mode = Screen, Opacity = 100%, Noise = 0%, Technique =

Softer, Spread = 5%, Size = 10 px. Kemudian Klik OK.

Page 22: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 22 -

Gambar 10. Setting

“Outer Glow” pada Logo”

Effect “Stroke”, isikan :

Pada Structure Size = 1 px, Position = Outside, Blend Mode =

Normal, Opacity = 100%, Fill Type = Color, pilih warna putih. Setelah

selesai klik OK. Hasilnya akan tampak kemilau mengelilingi logo.

Gambar 11. Setting

Effect “Stroke” pada

logo

Page 23: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 23 -

Hasil dari kedua effect tersebut dapat dilihat pada gambar 12.

Gambar 12.

Logo yang sudah

diberi effect

“Outer Glow” dan

“Stroke”

22. Sekarang kita akan membuat layer teks dengan nama “DINAS

PERKEBUNAN”, caranya :

Pada Tools pilih “Horizontal Type Tool”, pada options bar pilih:

Gambar 13. Optins Bar “Horizontal Type Tool”

Jenis Huruf = Trebuchet MS, Type = Bold, Besar Huruf = 22 pt, Set

the anti-aliasing method = Strong, Warna Huruf = putih.

Catatan : Option Bar “Horizontal Type Tool” muncul jika kita

memilih icon pada Tools.

Setelah teks dibuat, beri effects dengan cara : Pada menu Layer >

Layer Style > Blending Options atau pada layer “DINAS

PERKEBUNAN” klik kanan > Pilih Blending Options. Pilih Effects

“Bevel and Emboss” dan “Stroke”, isikan :

Page 24: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 24 -

Effect “Bevel and Emboss”, isikan :

Pada Style = Inner Bevel, Technique = Smooth, Depth = 100%,

Direction = Up, Size = 5, Soften = 0.

Gambar 14. Setting

Effects “Bevel and

Emboss” untuk teks

“DINAS PERKEBUNAN”

Effect “Stroke”, Isikan :

Pada Size = 3 px, Position = Outside, Blend Mode = Normal,

Opacity = 100%, Fill Type = color, pilih warna = abu-abu tua (kode

warna = # 333333)

Gambar 15. Setting Effect “Stroke” untuk Teks “DINAS PERKEBUNAN”

Page 25: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 25 -

Setelah diberi kedua effect tersebut, klik OK.

23. Buat teks kedua dengan nama “Kabupaten Lombok Timur - NTB”,

caranya :

Pada Tools pilih “Horizontal Type Tool”, pada options bar pilih:

Gambar 16. Optins Bar “Horizontal Type Tool”

Jenis Huruf = Arial, Type = Bold, Besar Huruf = 20 pt, Set the anti-

aliasing method = Strong, Warna Huruf = Merah (kode warna = #

ff3300).

Catatan :

c) Option Bar “Horizontal Type Tool” muncul jika kita memilih

icon pada Tools.

d) Jika Tool tidak muncul Klik kanan pada tool atau klik dan

tahan (lihat gambar berikut)

Setelah teks dibuat, beri effects dengan cara : Pada menu Layer >

Layer Style > Blending Options atau pada layer “Kabupaten Lombok

Timur - NTB” klik kanan > Pilih Blending Options. Pilih Effects “Drop

Shadow”, “Inner Shadow’ dan “Outer Glow”.

Isikan pada Effect “Drop Shadow” :

Pada Blend Mode = Multiply, warna hitam (kode warna = # 000000),

Angle = 120, Distance = 5 px, Spread = 0%, Size = 5 px. Lihat

gambar 17.

Page 26: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 26 -

Gambar 17. Setting

Effect “Drop Shadow”

Isikan pada Effect “Inner Shadow” :

Pada Blend Mode = Multiply, pilih warna hitam (kode warna = #

000000), Opacity = 75%, Angle = 120, Distance = 5 px, Choke =

0%, size = 5 px.

Gambar 18. Setting

Effects “Inner

Shadow”

Page 27: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 27 -

Isikan pada Effect “ Outer Glow” :

Pada Blend Mode = Screen, opacity = 100%, Noise = 0 %, Color

mode = Putih, Techique = softer, spread = 0 %, Size = 5 px.

Gambar 19. Setting

Effect “Outer Glow”

24. Setelah di beri ketiga effect tersebut klik OK.

25. Atur kedua teks tersebut di samping kiri Logo.

26. Hasil pembuatan banner dapat dilihat pada contoh banner-2.

27. Simpan “banner-2” dengan klik menu File > Save.

32. Kemudian simpan ulang dengan format .jpg atau .png agar banner-2 ini

dapat di tempatkan pada website

yang akan anda dibuat, dengan

cara:

Klik menu File > Save As. Lihat

gambar 20.

Gambar 20. Save As dengan Format .png

Page 28: Pembuatan Banner Pake Photoshop

Pusat Data dan Informasi Pertanian 2008 - 28 -

Catatan :

Biasakan jika membuat banner, penyimpanan file dibuat 2 kali.

Yang pertama simpan dengan format = .psd, ini dimaksudkan jika anda

ingin merubah atau mengedit effect atau teks yang sudah dibuat.

Yang Kedua simpan dengan format = .png atau .jpg, hal ini dimaksudkan

untuk menempatkan “banner-1” ini di pada web yang akan anda buat.

SELAMAT MENCOBA …… !!!!!!

SUYATI Staf Subbid Aplikasi Multimedia

Telp. Kantor (021) 782 2803 Email : [email protected]

[email protected]