Pertemuan 5

• Href merupakan kepanjangan dari hypertext refence.
• Jika di html kita menggunakan atribut "id", maka pada cssnya di awali dengan (#), sedangkan jika pada html kita menggunakan atribut "class", maka pada cssnya akan di awali dengan tanda (.).
• dalam href, ada yang nama <a href="#"></a>
  biasanya ini digunakan untuk memberikan link.
• <span></span>, biasanya digunakan untuk memberikan efek khusus pada suatu objek, misalnya tulisan. Penggunaan span, pada cssnya juga di awali dengan tanda (#), sama halnya seperti "id"

Link download Web Design :

Silahkan disedot

Baca selengkapnya … Pertemuan 5

Pertemuan 4

• Folder Group

Untuk mempermudah dalam menghidden layer saat pemotongan, maka gunakkan Fitur Group untuk mengelompokkan layer-layer dalam Folder Group. Fitur group terletak di panel layer, perhatikan gambar di bawah :

Untuk memberikan nama pada group, double klik group tersebut dan geser layer-layer yang ingin dikelompokkan pada group tersebut.

Untuk memperingan website, maka gunakkan fitur repeat pada CSS. Ada 2 jenis repeat, yaitu :

1. Repeat-x : atribut css untuk mengulang gambar ke samping kanan-kiri saja.
2. Repeat-y : atribut css untuk mengulang gambar ke atas dan ke bawah.

• Merge Visible

Merge Visible (Ctrl+Shift+E) dapat menormalkan efek yang dimiliki suatu layer. Merge Visible akan menyatukan seluruh layer yang terlihat menjadi sebuah layer. Setelah pemotongan selesai, diharapkan meng-undo layer ke history dimana layer terpisah. Kita harus ingat meng-undo karena jika lupa, selamanya layer tidak dapat dipisahkan.

1. Image->crop : untuk memotong daerah seleksi.
2. File->save for web : untuk memunculkan fitur penyimpanan dengan konfigurasi web.
3. Atur terlebih dahulu kualitas gambar, perhatikanlah kualitas dan ukuran gambar.

 Biasanya untukbackground web, extensi yang sering digunakan ada 2, yaitu :

1. JPEG (Joint Photographic Experts Group) : untuk keperluan background dengan ukuran rendah.
2. PNG (Portable Network Graphics) : untuk keperluan background yang memiliki transparansi gambar.

Link Downloadnya :

Silahkan disedot

Baca selengkapnya … Pertemuan 4

Rancangan Web Design

Baca selengkapnya … Rancangan Web Design

Tugas Pertemuan Ketiga

• Fungsi-fungsi atribut pada CSS

1. Float : right : untuk membuat suatu objek berada di sebelah kanan

Cara penggunaan Float : right

Hasilnya

 2. Float : left : untuk membuat suatu objek berada di sebelah kiri

Cara penggunaan Float : left

Hasilnya

3. Clear : both : mematikan fungsi float kiri dan kanan
Penggunaan :
#bg1{
clear : both ;
}

Materi

1. Image (img) merupakan objek yang dapat berdiri sendiri dimana memiliki atribut panjang dan lebar.
2. Background adalah suatu atribut yang dimiliki suatu objek CSS dimana memiliki kemampuan dupiklasi diri dan dapat ditumpuk dengan tulisan diatasnya.
3. Tag <div> merupakan salah satu objek yang sering digunakan untuk menginduki atribut background.
4. Sintak background akan dibuat pada CSS, dan tulisan atau objek yang akan dibuat ditengah div tersebut.

Tambahan :

- Jika mau gambar dengan jumlah warna yang banyak dan ukurannya kecil gunakan format .jpg
- Untuk gambar animasi menggunakan format .gif
- Gambar terdapat bagian yang transparant menggunakan format .png 8/24

Baca selengkapnya … Tugas Pertemuan Ketiga

Photoshop Dasar

• TUGAS :

 1.  Fungsi Crop Tool : berfungsi untuk memotong gambar dengan cara membuat seleksi berbentuk kotak dengan crop tool kemudian dieksekusi dengan menekan tombol enter.
 Shortcut: tombol "C".









2. Fungsi Magic Wand Tool : berfungsi untuk menyeleksi area objek yang memiliki kesamaan warna. Toleransi warna yang akan diseleksi dapat ditentukan dalam pilihan palet dari Magic Wand Tool.
Shortcut: tombol "W".









3. Fungsi Polygon Lasso Tool : digunakan untuk membuat area seleksi berbentuk poligon.

4. Magnetic Lasso Tool : berfungsi untuk membuat area selection dengan cara menempelkan tepi selection pada area tertentu pada image.









5. Pengertian Outer Glow pada Blending Option :
Outer : bagian luar
Glow : cahaya
Outer Glow : merupakan blending option untuk memberikan efek cahaya pada bagian luar.

6. Cara memasukkan foto ke kanvas :

1. Klik File->New->Ok
2. Klik File->Open->Pilih foto->Lalu open
3. Klik "Move Tool"->tarik foto yang tadi lalu geser ke Kanvas.
4. Lalu sesuaikan foto dengan kanvas (menggunakan Ctrl + T)

7. Cara menyimpan dengan save for web & devices :

1. Klik File->klik "save for web & devices->save
   atau dengan cara (Alt+Shift+Ctrl+S)

• Materi Photoshop Dasar

1. Pengertian Photoshop
Photoshop merupakan software yang digunakan untuk memodifikasi gambar atau
foto secara profesional baik meliputi modifikasi obyek yang sederhana maupun yang
sulit sekalipun.

Photoshop juga dapat digunakan untuk  membuat rancangan tampilan antarmuka web, dengan resolusi 1024px-768px.

2. Toolbox

1.  Move Tool : Digunakan untuk memindahkan gambar atau objek. 
2. Rectangular Marquee : Digunakan untuk menyeleksi sebuah objek berbentuk kotak.
3.  Lasso Tools : Digunakan untuk menyeleksi sebuah objek dengan bentuk sembarang.
4. Magic Wand : Digunakan meyeleksi sebuah objek bedasarkan warna tertentu.
5. Crop Tool : Digunakan untuk memotong sebuah objek.
6.  Slice Tool : Digunakan untuk memotong objek sesuai dengan bentuk garis lurus.
7.      Healing Brush Tool : Digunakan untuk menghilangkan bagian gambar terntentu pada image.
8.  Brush Tool : Untuk menghapus atau menggambar objek dengan sapuan kuas.
9. Clone Stamp Tool : Digunakan untuk menyalin sebuah warna untuk diaplikasikan pada objek lain.
10. History Brush Tool : Digunakan untuk menampilkan semua perintah Brush Tool.
11.  Eraser Tool : Digunakan untuk menghapus sebuah objek yang tidak digunakan.
12. Gradient Tool : Digunakan untuk membuat warna gradasi.
13. Dodge Tool : Untuk memberikan koreksi warna pada image agar terlihat terang atau cerah.
14.  Blur Tool : Digunakan untuk menggabungkan sebuah objek.
15. Pen Tool : Digunakan untuk membuat garis berbentuk kurva yang lebih variatif.
16. Horizontal Type Tool : Digunakan untuk membuat objek berupa teks.
17. Path Selection Tool :Untuk membuat seleksi gambar dengan menyambungkan titik-titik gambar agar menjadi sebuah kuva.
18. Rectangle Tools : Digunakan untuk membuat objek segi empat.
19. Eye Dropper Tool : Untuk mengambil sebuah sample background atau foreground.
20. Notes Tool : Untuk menambah sebuah catatan.
21. Hand Tool : Digunakan untuk menggeser stage atau bidang kanvas. Zoom Tool : Digunakan untuk memperbesar atau memperkecil tampilan image.

3. Layer Style
Layer style merupakan kumpulan dari efek-efek khusus untuk ditetapkan pada layer yang disediakan pada palet layer.

Beberapa menu-menu pada layer style :
- Drop shadow : membuat efek bayangan di bagian luar
- Inner shadow : membuat efek bayangan di bagian dalam objek
- Outer glow : Membuat efek bercahaya pada luar
- Inner glow : Membuat efek bercahaya pada dalam objek
- Bevel and emboss : Membuat efek timbul
- Satin : membuat pola-pola tertentu pada objek
- Color, gradient, dan pattern overlay : Sama-sama mengganti permukaan objek, masing-masing dengan warna, gradien, atau pattern
- Stroke : Memberi garis pinggir pada objek

Baca selengkapnya … Photoshop Dasar

TUGAS FUNGSI ATRIBUT-ATRIBUT CSS

• FUNGSI ATRIBUT-ATRIBUT CSS

1. Font-size : untuk mengganti ukuran
-contoh : {font-size : large}
 
2. Font-family : mengganti jenis tulisan
  -contoh : {font-family : Arial, "times roman"}
 
3. Line-height : menentukan line spacing
  -contoh : {line-height : 1.5 em}
 
4. Text-align : untuk membuat perataan pada text

5. Border : untuk memberi batas/garis pada suatu bidang/box/tag HTML

6. Width : untuk mengatur lebar bidang tag yang kita berikan style

7. Height : untuk mengatur tinggi bidang tag yang kita buat

8. Margin : untuk pemberian jarak atau batas (bagian luar) pada suatu tag/box/bidang HTML

9. Padding : untuk pemberian jarak atau batas (bagian dalam) pada suatu tag/box/bidang HTML

Baca selengkapnya … TUGAS FUNGSI ATRIBUT-ATRIBUT CSS

Materi Web Design

• MATERI WEB DESIGN

HTML : Hyper Text Markup Language
Adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web.

Ini adalah salah satu contoh HTML:

<!DOCTYPE html>
  <html>
     <head>
          <title>'''Selamat Malam''' HTML</title>
     </head>
     <body>
          <p>Halo saya Pande!</p>
     </body>
</html>

1. TAG :

Tag HTML biasanya dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>)
Contoh : halo saya pande
Untuk membuat teks miring seperti itu, kita harus menggunakan perintah <i>halo saya pande</i> pada HTML.
<i> : merupakan perintah untuk membuat text miring (italic).

Beberapa TAG HTML :
<br> : pindah baris
<body> Tag awal untuk melakukan berbagai pengaturan terhadap text
<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut

2. HEAD
Bagian header dari dokument HTML dinyatakan dengan tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.

3. Body
Body dinyatakan dengan tag <BODY></BODY>, di dalam bagian ini merupakan isi dari dokumen HTML dimana tempat untuk meletakan informasi yang akan ditampilkan pada browser.

CSS : Cascading Style Sheets
Kumpulan format/style sheets yang diterapkan pada halaman web untuk mengontrol tampilan kumpulan agar lebih terstruktur dan seragam.
CSS biasanya diaplikasikan ke dalam HTML.

Penulisan CSS biasanya berisi tanda {} (kurung kurawal)
Contoh :
#nama{ color : red ; }

Aplikasi yang digunakan untuk HTML dan CSS biasanya dengan Adobe Dreamweaver, bahkan Notepad pun juga bisa.

Penting

1. Tidak ada yang memiliki ID tag yang sama pada sebuah halaman HTML

2. ID tidak boleh berupa angka saja, melainkan harus kombinasi angka dan huruf atau huruf saja.

3. ID tidak boleh memiliki karakter spasi. Silahkan menggunakan underscore (_) atau dash (-) untuk mengganti karakter spasi.

Baca selengkapnya … Materi Web Design