* materi photosop dasar
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

cara menyimpan dengan mode save for web :

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

cara mamasukkan foto kekanvas photosop :

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)

Outer Glow adalah berfungsi untuk memberikan efek berkilau pada bagian luar objek tanpa mempengaruhi bentuk bagian objek. Othe glow juga memilki beberapa sub menu yaitu structure, elemen dan qualitydimana tiap su menu memilki karkteristik masing - masing untuk melakukan pengeditan.

Hue Saturation adalah salah satu dari fasilitas yang ada pada Adobe Photoshop, yang digunakan untuk melakukan penyesuaian warna. Dengan kata lain kita dapat mengubah warna yang diinginkan.

Untuk membuka Hue/Saturation

Klik Menu Image – Adjustment - Hue/Saturation.

1. Hue

Digunakan untuk melakukan pengaturan inti warna. Inti warna disini yang kumaksud adalah sesuatu yang membuat sebuah obyek nampak berwarna. Dengan menggeser posisi slider atau mengubah nilainya, maka akan mengubah keseluruhan inti warna dari gambar

2.Saturation

Saturation ini adalah sebuah nilai intensitas warna, dimana nilai Saturation minimal berarti gambar nampak hitam-putih, sedangkan Saturation dalam nilai maksimal membuat gambar nampak sangat berwarna-warni.

 magnetic lasso tool adalah untuk membuat seleksi bebas. Apa bedanya dengan Lasso tool. Bedanya kalo magnetic lasso tool lebih praktis dalam pemakaiannya. Cukup kamu deketin pointer kamu ke garis / daerah yang mau diseleksi trus klik. Arahkan pointernya melalui garis / daerah yang pengen kamu seleksi. Nanti garis seleksi bakalan nempel sendiri kayak magnet.

polygon lasso tool adalah untuk membuat seleksi berbentuk poligonal ( banyak sudut  ) kayak macem segitiga, segiempat, segilima, segienam  dll. Cara pakenya lumayan gampang tinggal klik-klik aja disetiap sudutnya. Cocok banget buat nyeleksi gambar-gambar yang bersudut atau berbentuk segi banyak.

 magic wend tool digunakan untuk menyeleksi bidang gambar yang mempunyai kemiripan warna, mirip dengan penggunaan Color Range. Cara penggunaannya mudah sekali, tinggal di klikkan pada bidang gambar yang akan diseleksi, yang mungkin agak rumit adalah cara untuk mengatur kepekaan tool ini.

crop tool berfungsi untuk memotong bagian gambar sesuai dengan resolusi atau ukuran yang anda inginkan, apabila anda mau membuat foto ukuran 2 X 3 cm berarti anda harus menggunakan crop tool, ketika sebuah foto atau gambar di crop maka bagian foto tersebut tak akan utuh, bagian yang tidak ter croping akan menghilang dan yang akan tampil adalah bagian yang tercropingnya saja.

Tugas Fungsi Atribut CSS

1. Font-size : untuk mengganti ukuran font 
-contoh : {font-size : 30px} 

2. Font-family : mengganti jenis tulisan
-contoh : {font-family : geordia, "times roman"}
 
3. Line-height : menentukan line spacing
-contoh : {line-height : 1 em}

4. Text-align : untuk membuat perataan/rata pada text
-contoh : {Text-align: center}

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

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

7. Height : untuk mengatur tinggi bidang tag

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

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

Materi Web Design

1. HTML : Hyper Text Markup Language

Sebuah jenis teks dokumen khusus yang digunakan oleh Web browser untuk mempresentasikan teks dan gambar. Di dalam teks tersebut terdapat tag markup seperti <p> untuk menandakan awal dari sebuah paragraf, dan </p> untuk menandakan akhir dari sebuah paragraf.

HTML  memiliki sebuah head dan body

Dokumen tersebut biasanya dimulai dengan sebuah tag <html> dikuti dengan tag <head> dan diakhiri dengan </html>. Tag <html> ... </html> berfungsi sebagai sebuah kontainer untuk dokumen tersebut. Tag <head> ... </head> mengandung judul, dan informasi style dan script, sementara <body> ... </body> mengandung markup dari isi yang terlihat.

 

Contoh :

<!DOCTYPE html>
<html>
   <head>
       <title>'''Selamat Malam''' HTML</title>
   </head>
   <body>
       <p>Nama saya Adrianus!</p>
   </body>
</html>

2. CSS (Cascading Style Sheets)

Merupakan salah satu bahasa pemrograman web  untuk mengendalikan
beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam.

CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel,
ukuran border, warna border, warna hyperlink, warna mouse over, spasi
antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan
parameter lainnya.

Contoh penulisan CSS :

#Contoh1 { color : blue ; }

Ingat :

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.