Photoshop Design

tugas dreamweaver (div)

1.Float right digunakan untuk mengatur gambar dan text terletak di kanan

Berikut ini contoh penggunaan float right

2.Float left digunakan untuk mengatur gambar dan text terletak di kiri

Berikut ini adalah contoh penggunaan float left

3.Clear Both berfungsi untuk menghapus padding yang tidak berfungsi kembali

photoshop

Kegunaan :

•        Move Tool : untuk menggeser objek yang ada pada workspace.

•        Rectangular Marquee Tool (shortcut:M atau Shift + M) : untuk membuat area selection berbentuk segi empat pada image.

•        Elliptical Marquee Tool : untuk membuat area selection berbentuk elips atau lingkaran pada image.

•        Single Row Marquee Tool : untuk membuat area selection satu baris pada image.

•        Single Column Marquee Tool : untuk membuat area selection satu kolom pada image.

•        Gradient Tool : untuk memberi efek warna gradasi pada sebuah objek gambar.

•        Paint Bucket Tool : untuk memberi warna pada blok area tertentu.

•        Type Tool : untuk memberi teks, baik penulisan secara vertical maupun horizontal.

Kegunaan :

•        Crop Tool : untuk memotong gambar dan menampilkan objek yang sudah diseleksi pada layer serta membuang area image yang tidak diinginkan.

•        Magic Wand Tool : untuk menyeleksi dalam kawasan warna tertentu pada objek gambar.

•        Polygonal Lasso Tool : untukmembuat seleksi berbentuk poligonal ( banyak sudut  ) kayak macem segitiga, segiempat, segilima, segienam  dll. Cara pakenya lumayan gampang tinggal klik-klik aja disetiap sudutnya.

•        Magnetic Lasso Tool : untukmembuat 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.

•        Hue Saturation adalah

•        Hue  : menunjukkan sudut dari lingkaran warna primer yang dikenal oleh format HSL .

•        Saturation : menunjukkan jari-jari dari lingkaran warna yang menunjukkan level warna abu-abu terhadap warna

•        Outer Glow adalahEfek yang diciptakan dengan cara membuat sebuah layer di bawah layer lain, dan mengisi area yang sama pada layer di atasnya dengan opacity kuning bernilai 75%.

•        caranya adalah drag foto langsung ke kanvas photoshop

Cara menyimpan dengan mode save for web : dengan klik file > Safe for web & devices atau tekan shortcut : Alt + Shift + Ctrl + S pada keyboard, > pilih format gambar > Klik OK/save

dreamweaver

1.Font-size fungsinya adalah untuk memberi ukuran pada text.

     diatas merupakan rumus dari font-zise :

     inilah yg terjadi jika memakai font-size.

2. Font-Family berfungsi untuk menentukan jenis font pada suatu elemen

     inilah rumus mencari Font-family.

      inilah yg terjadi jika memakai font-family.

3. Border berfungsi untuk memberi batas/garis(seperti) pada suatu bidang/box

diatas merupakan rumus Border.

diatas merupakan hasil dari rumus border.

4.Padding berfungsi sebagai pemberian jarak atau batas pada suatu tag/box/bidang html.
   macam-macam padding yaitu ; 

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding(khusus shorthand).

5.Margin berfungsi sebagai pemberian jarak atau batas(bagian luar) pada suatu tag/box/bidang html.

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin(khusus shorthand)

6.Text-align berfungsi sebagai membuat perataan pada text.

Talue text-align

berikut value text-align

• left
• right
• center
• justify

-CONTOH PROPERTY TEXT-ALIGN DALAM INLINE STYLE

Text-align:left

fungsi value left adalah untuk membuat perataan kiri
contoh

<div style="clear:both;background-color:lime;width:500px;text-align:left;">
ini text align-left
ini text align-left
ini text align-left
ini text align-left
</div>

tampilanya seperti ini

ini text align-left
ini text align-left
ini text align-left
ini text align-left

Text-align:right

fungsi value right adalah untuk membuat perataan kanan
contoh

<div style="clear:both;background-color:lime;width:500px;text-align:right;">
ini text align-right
ini text align-right
ini text align-right
ini text align-right
</div>

tampilanya seperti ini

ini text align-right
ini text align-right
ini text align-right
ini text align-right

Text-align:center

fungsi value center adalah untuk membuat perataan tengah
contoh

<div style="clear:both;background-color:lime;width:500px;text-align:center;">
ini text align-center
ini text align-center
ini text align-center
ini text align-center
</div>

tampilanya seperti ini

ini text align-center
ini text align-center
ini text align-center
ini text align-center

Text-align:justifly

fungsi value justifly adalah untuk membuat perataan hingga ke ujung
contoh

<div style="clear:both;background-color:lime;width:500px;text-align:justifly;">
ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly
</div>

tampilanya seperti ini

ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly

7.   Line-height adalah salah satu property pada css, sedangkan fungsinya untuk mengatur tingkat antar baris paragraf.

Value line-height

berikut value line-height

• length/panjang angka dalam (px, em, in)

CONTOH PROPERTY LINE-HEIGHT DALAM INLINE STYLE

Line-height:20px

dengan line-height 20px ini kita membuat style dimana tinggi antar paragraf setinggi 20px
contoh

<div style="clear:both;background-color:lime;width:500px;line-height:20px;">
ini line height:20px
ini line height:20px
ini line height:20px
ini line height:20px
</div>

tampilanya seperti ini

ini line height:20px
ini line height:20px
ini line height:20px
ini line height:20px

Line-height:40px

dengan line-height 40px ini kita membuat style dimana tinggi antar paragraf setinggi 40px
contoh

<div style="clear:both;background-color:lime;width:500px;line-height:40px;">
ini line height:40px
ini line height:40px
ini line height:40px
ini line height:40px
</div>

tampilanya seperti ini

ini line height:40px
ini line height:40px
ini line height:40px
ini line height:40px

8. Width(ID LEBAR) adalah salah satu property dalam css, sedangkan fungsinya ialah mengatur lebar bidang_tag yang kita berikan style.

Value width

Value width antara lain

• Auto
• length(px, in, em)
• (percent)%
• inherit.

9.Height(ID tinggi) adalah salah satu property dalam css, sedangkan fungsinya ialah mengatur tinggi bidang_tag yang kita buat.

VALUE HEIGHT

Value height antara lain

• auto
• length(px, in, em)
• (percent)%
• inherit.