NTERFACE - ijaa.files.wordpress.com · Web viewBentuk paling banyak digunakan untuk membuat logo, karena bentuk dapat membentuk brand pada konsumen. Misal jika kita melihat gambar

By: ijaa.wordpress.com

NTERFACE

A. STANDAR KOMPETENSI

Mengoperasikan Piranti Lunak dan periperal Multimedia

B. KOMPETENSI DASAR

Mengoperasikan Aplikasi Desain dan animasi 2 Dimensi

C. TUJUAN PEMBELAJARANSetelah mengikuti kegiatan pembelajaran, siswa diharapkan dapat :1. Mengenal bentuk dasar2. Mengkombinasikan bentuk dasar3. Membuat berbagai bentuk Interface

D. URAIAN MATERI

Penggunaan bentuk yang efektif akan memberikan motivasi,inspirasi dan memiliki arti tersendiri kepada pengunjung, walaupun ini terjadi tanpa disadari.

Banyak bentuk yang dapat ditemukan dalam desain, tapi kalau kita amati hanya terdapat beberapa bentuk dasar, misal lingkaran, segitiga dan persegi/ persegi panjang. Jika anda sering memperhatikan program aplikasi pengolahan grafik maka bentuk – bentuk dasar tersebut pasti ada. Dan dari bentuk dasar tersebut nantinya akan terbentuk-bentuk lain.

Penggunaan bentuk banyak dipakai dalam berbagai bidang, seperti perusaahaan keuangan, otomotif, bangunan, dll. Bentuk paling banyak digunakan untuk membuat logo, karena bentuk dapat membentuk brand pada konsumen. Misal jika kita melihat gambar jendela terbang pasti otomatis kita akan langsung teringat pada microsoft windows.

Pada modul ini kita akan membuat bentuk-bentuk yang banyak digunakan sebagai elemen dan interface dalam halaman web. Bentuk-bentuk sangatlah beragam tergantung kreatifitas pembuatnya untuk menghasilkan bentuk yang indah dana serasi. Dalam modul ini akan dibahas bentuk-bentuk dari yang sangat sederhanan, kurva,hingga yang cukup rumit.


A.1. Bentuk Garis Pinggir1. Klik tool Rectangular Marquee, lalu buatlah seleksi berbentuk segiempat di

canvas.

Gb. 1.1 seleksi bentuk segiempat2. Klik menu edit > stroke, lalu isikan width : 2px, Color : Merah muda, dan

location : outside.

Gb. 1.2 Dialog stroke

Gb. 1.3 Bentuk garis pinggir

3. Dengan teknik yang sama, kita bisa membuat bentuk-bentuk garis pinggir yang lain.

Gb. 1.4 Variasi bentuk garis pinggir yang lain


A.2. Bentuk Garis Sisipan.

1. Klik tool Line, lalu buatlah garis berwarna hitam pada kanvas berwarna hijau tua.

Gb. 2.1 Garis warna hitam

2. Klik menu Layer > Duplicate Layer untuk menggandakan garis. Pada palet layers, klik layer 1 (bukan hasil duplikasi) lalu klik menu image > adjusment > invert untuk merubah warna garis menjadi putih.

3. Klik tool Move, lalu tekan tombol panah kebawah pada keyboard satu kali, kemudian tekan tombol panah ke kanan satu kali.

Gb. 2.2 garis Sisipan

4. Garis ini banyak digunakan untuk menambah efek yang menarik pada suatu halaman atau objek.

Gb. 2.3 Penerapan garis sisipan pada objek pipa

A.3. Bentuk Lancip

1. Klik tool Eliptical Marquee, lalu buatlah seleksi berbentuk elips di canvas


Gb. 3.1 Selekeis bentuk elips2. Klik menu Select > Transform Selection, lalu isikan pada

bagian Rotate : 50 di Option Bar.

Gb. 3.2 Proses rotasi pada bentuk elips

3. Klik tool Paint Bucket, lalu klik pada seleksi diatas untuk memberi warna.

Gb. 3.3 Pewarnaan pada elips

4. Klikk tool Marquee, lalu tekan tombol SIFT dan panah keatas pada keyboard satu kali. Lakukan hal yang sama untuk menggeser seleksi ke kanan.

Gb. 3.4 Penggeseran seleksi

5. Tekan tombol delete, pada keyboard untuk menghapus bagian yang terseleksi dari bentuk tersebut.


Gb. 3.5 Penghapusan area yang terseleksi

6. Dengan teknik yang sama, kita bisa membuat bentuk lancip yang lain. Lihat gambar dibawah.

Gb. 3.6 Penerapan bentuk lancip

A.4. BENTUK TUMPUL

1. Buatlah bentuk segi empat horizontal dan vertikal. Lihat gambar 4.1

2. Klik tool Eliptical Marquue, lalu buatlah seleksi bentuk lingkaran di ujung objek tersebut. Lihat gambar 4.1


Gb. 4.1 Seleksi bentuk lingkaran di ujugn objek

3. Klik tool Rectangular Marquee, lalu klik tombol Add to Selection pada option bar dan lakukan seleksi lagi pada seleksi berbentuk lingkaran untuk menambah area seleksi.

Gb. 4.2 Hasil penambahan seleksi

4. Klik Menu Select > Invers untuk membalik seleksi, lalu tekan tombol Delete pada keyboard, akan terbentuk sudut tumpul pada objek. Lihat Gb. 4.3

5. Sekarang kita akan membuat bentuk tumpul pada bagian tengah dari bentuk tersebut,Klik tool Eliptical Marquee, lalu gambarlah seleksi bentuk lingkaran di bagian tengah. Klik tool Rectangular Marquee, Lalu tombol Add to Selection pada option bar dan lakukan seleksi lagi pada seleksi berbentuk lingkaran untuk menambah area seleksi pada bagian vertikalnya. Lihat Gb. 4.3

Gb. 4.3 Hasil penambahan seleksi pertama

6. Masih menggunakan Tool Rectangular Marquee, lakukan penambahan seleksi lagi pada bagian hoorizontalnya. Lihat Gb.4.4


Gb. 4.4 Hasil penambahan seleksi kedua

7. Klik menu Select > Inverse untuk membalik seleksi, lalu tekan tombol delete pada keyboard, akan terbentuk sudut tumpul di bagian tengah objek.

Gb. 4.5 Bentuk tumpul

8. Dengan teknik yang sama kita bisa membuat bentuk tumpul pada bagian dalam bentuk tersebut. Lihat gambar 4.7

Gb. 4.6 Proses penghapusan area terseleksi


Gb. 4.7 Bentuk tumpul dibagian dalam

A.5. BENTUK KURVA

1. Klik Rectangle , gambar segiempat di kanvas.2. Klik tool Pen, lalu buatlah titik-titik yang berbentuk seperti pada

Gb. 5.1

Gb.5.1 titik –titik yang dibentuk oleh tool pen

3. Klik tool Convert Point, lalu editlah dua buah titik pada bentuk yang telah kita buat dengan tool Pen. Klik dan seret kekanan pada titik 1, lalu klik dan seret juga titik 2 kekanan.

Gb.5.2 Proses pembentukan kurva

4. Klik menu Window > Path, lalu klik segitiga hitam yang terletak dikanan atas palet, akan tampil menu dan pilihlah Make Selection :


Gb.5.3 Palet Path

5. Tekan tombol Delete pada keyboard untuk menghapus area yang terseleksi. Lihat Gb. 5.7

Gb. 5.6 Pengubahan titik kurva menjadi seleksi

6. Buatlah seleksi berbentuk segi empat untuk menyeleksi area yang akan dihapus berikutnya. Lihat Gb. 5.8

Gb.5.7 Penghapusan area terseleksi

Gb. 5.8 Bentuk Kurva

A.6. BENTUK LENGKUNG

1. Klik tool PEN, lalu buatlah titik yang terlihat pada gambar 6.1.


Gb. 6.1 Titik-titik yang dibentuk oleh pen tool2. Klik tool Convert Point, lalu editlah dua buah titik pada bentuk

yang telah kita buat dengan tool PEN . klik dan seret kekanan pada titik 1, lalu klik dan seret titik2 kekanan. Lihat Gb.6.2:

Gb. 6.2 Proses pelengkungan

3. Klik menu Window > Paths, lalu klik segitiga hitam yang terletak dikanan atas palet, akan tampil menu dan pilihlah make Selection. Lihat Gb. 6.3

4. Klik Menu Select > Transform Selection, lalu klik dan seret pada titik disebelah kanan dan lakukan pembesaran dengan menyeret ke arah kanan. Lakukan hal yang sama pada titik sebelah kiri. Lihat Gb. 6.3

Gb. 6.3 Seleksi dan transform selection

5. Beri warna area terseleksi tersebut dengan menggunakan Tool Paint Bucket.

Gb. 6.4 Setelah proses pewarnaan


6. Tambahkan efek layer Style Drop Shadow dan Bevel and Emboss dengan nilai default.

Gb. 6.5 Efek drop shadow dan bevel and emboss

7. Dengan teknnik yang sama kita dapat membuat bentuk lengkung yang lain. Gb. 6.6

Gb. 6.6 Bentuk lengkung yang lain

A.7. BENTUK CINCIN

1. Klik tool eliptical Marquee, Lalu buatlah seleksi berbentuk lingkaran. Klik tool paint bucket, lalu klik pada seleksi lingkaran. Gb. 7.1


Gb. 7.1 Seleksi dan pemberian warna

2. Klik Select > Modify > Contract, isikan nilainya :10 , tekan tombol Delete pada keyboard untuk menghapus bagian tengah lingkaran. Gb. 7.2

Gb. 7.2 Penghapusan bagian tengah lingkaran

3. Pada palet Layer , klik layer 1 sambil menekan tombol CTRL pada keyboard untuk menyeleksi objek tersebut.

4. Klik menu Window > Channels, Klik tombol Create New Channels yang terletak bagian bawah pallet, akan terbentuk channel baru dengan nama Alpha1.

5. Pada chnnel Alpha1, Klik tool Paint Bucket dengan warna Foreground putih, lalu klik pada objek untuk memberi warna putih. Gb. 7.3

Gb. 7.3 Area terseleksi di channel alpha 1

6. Klikk menu Select > Deselect, kemudian menu Filter > Blur > Gausian Blur, isikan nilainya : 4. Gb 7.4


Gb. 7.4 Efek Blur

7. Masih di palet Channel , klik channel RGB, lalu klik menu Filter > Render > Lighting Effect s, Isikan dan aturlah seperti berikut :

Gb 7.5 Kotak dialog lighting Effect

Gb. 7.6 Hasil Akhir

Documents

NTERFACE - ijaa.files.wordpress.com · Web viewBentuk paling banyak digunakan untuk membuat logo, karena bentuk dapat membentuk brand pada konsumen. Misal jika kita melihat gambar