artikel dan contoh 1

Folder Group

•       Untuk mempermudah meng”Hidden” layer pada saat pemotongan gambar, maka disarankan untuk mengelompokan beberapa layer

•       Fitur Group ada pada panel layer disebelah bawah disebelah kiri new layer yang berbentuk folder

•       Berikan group tersebut nama dengan men-double klik group tersebut. Lalu geser beberapa layer yang ingin dikelompokan dengan group tersebut

Seleksi Area Potongan Yang
bisa “Di Ulang”

•       Untuk menghasilkan website yang ringan, maka diwajibkan memaksimalkan fitur perulangan atau “repeat” pada css.

•       Repeat-x adalah suatu atribut css untuk mengulang gambar ke samping kanan-kiri saja

•       Repeat-y adalah suatu atribut css untuk mengulang gambar ke atas dan kebawah

Merge Visible Sebelum Memotong

•       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, diharap segera meng-Undo layer ke History dimana Layer Terpisah(sebelum di Merge Visible)

•       Hati-hati menggunakan Merge Visible, karena jika lupa meng-Undo, maka selamanya layer tidak dapat dipisahkan.

Crop dan Save For Web

•       Gunakan Image -> crop untuk memotong daerah seleksi

•       Gunakan File-> save for web untuk memunculkan fitur penyimpanan dengan konfigurasi web.

•       Aturlah kualitas gambar yang diinginkan

–      Perhatikan tingkat detail Gambar

–      Perhatikan Ukuran gambar

JPEG dan PNG 24

Pada pemrograman web, extensi gambar background yang sering digunakan ada 2

•       JPEG(Joint Photographic Experts Group)

–      Cocok untuk keperluan background dengan ukuran yang rendah. Karena converting ke JPEG mengakibatkan penurunan kualitas(lossy compression)

•       PNG(Portable Network Graphics)

–      Untuk keperluan background yang memiliki transparansi gambar. Converting ke PNG menjadikan sebuah gambar dapat di edit ulang tanpa penurunan kualitas namun ukuran yang dihasilkan besar

Div Class

• Div class digunakan untuk menggunakan fungsi div dan efek/content yang sama tanpa membuat style css ganda
• Hr digunakan untuk membuat garis pada html
• Br digunakan sebagai ganti fungsi enter halaman pada html
• Ol dan li digunakan untuk membuat kelas untuk angka
• A href digunakan untuk menambahkan link pada halaman teks
• H4 digunakan untuk memperbesar dan memberikan efek tulisan tebal

Css style

• Untuk type style class digunakan tanda titik (.)
• Untuk type style id digunakan tanda pagar
• Hover digunakan untuk memberikan efek pada tulisan ketika kursor diarahkan pada text

 ini contoh dari fungsi crop, index dan style css

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.