By : ijaa.wordpress.com MEMBUAT VARIASI BACKGROUND Background memiliki kontribusi yang penting dalam tingkat kemampuan baca halaman dan penampakan visual yang lebih menarik. Hal Penting yang perlu diperhatikan dalam pembuatan background, yaitu kontras (perbedaan warna) harus tinggi antara background dengan teks atau object lainnya. Misal : Teks warna Hitam akan jelas terbaca dengan baik jika berada di background warna putih. Pada modul ini akan mempelajari bagaimana membuat berbagai macam variasi background yang dapat digunakan dalam halaman web. KERJAKAN POIN A-E. alokasi waktu 60’ Penilaian Setelah mengerjakan poin A-E lanjutkan latihan no 1(a,b,c) dan no 2 A. BACKGROUND BERWARNA Langkah Untuk membuat background berwarna : 1. Klik menu File > New, Aturlah halaman dengan nilai Width(Lebar) x Height(Tinggi) : 800 px X 600 px. Resolution : 72 px/inch, Mode : RGB color dan pilihlah transparen pada bagian content
Transcript
By : ijaa.wordpress.com
MEMBUAT VARIASI BACKGROUND
Background memiliki kontribusi yang penting dalam tingkat kemampuan baca halaman dan penampakan visual yang lebih menarik.
Hal Penting yang perlu diperhatikan dalam pembuatan background, yaitu kontras (perbedaan warna) harus tinggi antara background dengan teks atau object lainnya.
Misal : Teks warna Hitam akan jelas terbaca dengan baik jika berada di background warna putih.
Pada modul ini akan mempelajari bagaimana membuat berbagai macam variasi background yang dapat digunakan dalam halaman web.
KERJAKAN POIN A-E. alokasi waktu 60’ PenilaianSetelah mengerjakan poin A-E lanjutkan latihan no 1(a,b,c) dan no 2
A. BACKGROUND BERWARNA
Langkah Untuk membuat background berwarna :1. Klik menu File > New, Aturlah halaman dengan nilai Width(Lebar) x
Height(Tinggi) : 800 px X 600 px. Resolution : 72 px/inch, Mode : RGB color dan pilihlah transparen pada bagian content
Gb. 1.1 Kotak Dialog New
2. Klik tool paint bucket, Pilih warna Cyan, atau warna yang anda suka.3. Klik pada canvas transparan untuk memberi warna background.
By : ijaa.wordpress.com
Gb. 1.2 Canvas Transparan yang akan diberi warna
B. BACKGROUND BERGRADASI
Langkah Untuk membuat background bergradasi :1. Buat Halaman Baru2. Klik Tool Gradient, Pilih warna sesuai selera. 3. Klik dan seret mengikuti tanda panah dari atas ke bawah, atau sebeliknya serta
dari kiri kekanan atau sebaliknya.
Gb 2.1 Halaman background bergradasi
C. BACKGROUND STYLE
Langkah untuk membuat background style:
By : ijaa.wordpress.com
1. Buka Halaman Baru, atau gunakan file sebelumnya.2. Pastikan bahwa layer background sudah berubah menjadi layer style. Caranya
double klik pada layer background.
Gb 3.1 Dialog Box
Gb. 3.2 Layer Background Gb. 3.3 Layer style
3. Pilih pada palet Style, pilih sesuai selera.
Gb. 3.4 Palet Style
4. Hasil background style
Gb. 3.5 Style puzzle Gb. 3.6 Style Water Reflection
By : ijaa.wordpress.com
D. BECKGROUND BERPOLAD.1. Pola JaringLangkah untuk membuat pola jaring :1. Buat file baru dengan ukuran 15px X 15px. Background White2. Klik menu Select > all
Gb. 4.1 Menyeleksi Seluruh Area
3. Klik Tool Marquee, Tekan 1 langkah ke kanan dan 1 langkah ke bawah pada tombol keyboard.
Gb. 4.2 Memindah seleksi sebesar 1 pixel
4. Klik Paint Bucket, pilih warna biru. Klik pada area yang terseleksi.
Gb. 4.3 Mewarnai Area yang terseleksi
5. Select semua bagian, dengan cara klik menu Select > All.6. Klik menu edit > Define Patern untuk menyimpan pola. Isikan pada bagian Name :
Pola.7. Buat Halaman Baru yang transparant.8. Klik Edit > Fill untuk menerapkan pola, pilih patern pada bagian Use dan pilih pola
pada bagian Custom Patern.
Gb. 4.4 Kotak Dialok Fill
By : ijaa.wordpress.com
9. Buka File Gambar, terapkan pola jaring pada gambar tersebut.
Gb. 4.5 Penerapan pola Jaring pada gambar
D.2. Pola Garis TVLangkah Untuk membuat pola Garis TV:1. Buat halaman baru dengan ukuran 1px X 2px. Transparan2. Klik tool zoom (Ctrl +)untuk memperbesar tampilan hingga ukuran 1600%.
Gb 5.1 Hasil Perbesaran
3. Klik tool Pencil, Lalu pilih warna foreground : Hitam dan klik pada bagian atas area.
Gb 5.2 Pemberian warna pada atas area
4. Klik menu Select > All. Untuk menyeleksi seluruh area5. Klik menu Edit > Define Patern. Untuk menyimpan pola. Keitk name : Garis TV.6. Buat Halaman Baru. Klik Edit > Fill untuk menerapkan pola pilih patern bagian
Use dan pilih Garis TV pada bagian Custom Patern.
By : ijaa.wordpress.com
Gb. 5.3 Halaman background dengan pola Garis TV
7. Jika diterapkan pada sebuah gambar. Bukalah gambar yang akan diberi pola garis TV.
Gb. 5.4 Create New layer
8. Pastikan leyer 1 yang terpilih. Klik Edit > Fill untuk menerapkan pola pilih patern bagian Use dan pilih Garis TV pada bagian Custom Patern.
Gb. 5.5 Penerapan pola garis TV pada gambar
Aktif
Create new layer
By : ijaa.wordpress.com
E. BACKGROUND BERGAMBARLangkah untuk membuat background bergambar :
1. Buka gambar yang akan dijadikan background.2. Buka file background Berwarna atau Style yang telah kita buat sebelumnya.3. Pada palet layers di layer background (gambar hutan). Seret ke halaman
background berwarna.
Gb. 6.1 Proses Drag gambar hutan ke background berwarna
4. Atur skala hingga didapat hasil sebagai berikut :
Gb 6.2 Menyesuikan ukuran gambar dengan background5. Pada palet Layers, Klik tombol Add Layer Mask.
Gb. 6.3 Add Layer Mask
DRAG
Add layer mask
layer mask
By : ijaa.wordpress.com
6. Klik tool Brush. Pada option bar , bagian brush pilih : AirBrush Soft Round 100. pastikan foreground berwarna Hitam, lalu klik dan seret di pinggir gambar hutan untuk melembutkan sisi-sisinya.
Gb. 6.4 Melembutkan sisi gambar hutan
7. Ubah mode blend dari Normal menjadi Screen, dan turunkan nilai Opacity : 50%
