Membuat Desain Web Menggunakan Photoshop

2.1 Langkah pertama buka adobe photoshop

1.1Klik File-New
Dengan Preset Web Width=1024px Height=768px, Resolution=72px,
Color Mode=RGB color, Background Contents=Transparent.

Lalu Klik Ok, setelah itu image rotation=90˚ maka akan uncul seperti berikut:

1.2 Langkah selanjutnya file open, lalu pilih template yang akan kita contoh,
maka akan muncul seperti ini.

1.3 Langkah selanjutnya kita akan memindahkan gambar.
-Pertama kita drag gambar,dengan menggunakan Move Tool.

setelah itu sesuaikan ukurannya menggunakan Free Transform, Setelah itu sesuaikan setelah sesuai meka klik tanda ceklis.

1.4 Selanjutnya kita akan membuat background.
    -Pertama kita sleksi menggunakan Rectangular Marquee Tool.
    -Buat Layer baru, dn jangan lupa beri nama layer tersebut

-Setelah itu beri warna menggunakan Paint Bucket, Sesuaikan warna yang akan kita pilih.
-Jika sudah maka hasilnya kurang lebih seperti berikut ini:

1.5 Langkah selanjutnya kita akan membuat baner.
-Pertama kita sleksi dengan menggunakan Rectanguler Marquee Tool.
-Lagkah selanjutnya kita membuat new layer dan beri nama.
-Kemudian Kita beri warna menggunakan Gradient Tool.
-Jika sudah kurang lebih hasilnya seperti di bawah ini:

1.6 Langkah selanjutnya adalah kita membuat baner menjadi lebih menarik.
    pertama kita pilih gambar kemudian kita seleksi.

-Langkah selanjutnya kita drag foto tersebut menggunakan Move Tool.
 -Lalu sesuaikan ukura foto tersebut  menggunakan free transform.
 -Jika sudah hasilnya kurang kebih seperti ini:

1.7  Setelah selesai membuat baner. Kita lanjutkan untuk membuat menu atas.
   -Langkah pertama kita seleksi menggunakan Marquee Tool.                                    

-Kemudian kita buat new layer dan beri nama.
-Setelah itu kita beri warna mengunakan Paint Bucket hasil yang tadi kita telah     seleksi menggunaka Marquee Tool
-Kurangi Opacity menjadi 71%.
-Kurang lebih hasilnya seperti dibawah ini.

1.8  Langkah selanjutnya buat garis persegi panjang di tengah seperti pada contoh, menggunakan Marquee Tool.
 -Lalu kita buat new layer dan beri nama.  
-Kemudian beri warna menggunakan paint bucket.
 -Lalu kita beri efek satin, dengan cara: Klik kanan pada layer yang tadi telah   kita buat»Blending Option»Klik satin»Kenudian sesuaikakan»klik ok.
-Kurang lebih hasilnya akan menjadi seperti ini:

1.9  Langkah slanjutnya adalah membuat menu-menu yang ada pada header tersebut.
-Pertama kita akan membuat menu home, caranya kita pilih Type Tool kemudian kita ketik ‘HOME’
-Dengan cara yang sama kita buat menu ‘ABOUT, NEWS,GALERY’.
-Juga kita herus membuat group untuk content-content tersebut dan meri nama group dengan nama ‘text,.
-Jika sudah maka hasilnya kurang lebih seperti ini.

1.10  Langkah selanjutnya kita buat content yang ada dikanan bawah.
-Pertama kita akan seleksi menggunakan Marquee Tool.
-Lalu kita buat laye baru dan beri nama.
-Jika sudah, beri warna dengan cara: menggunakan paint bucket.
-Jika sudah maka kurang lebih hasilnya akan menjadi seperti berikut ini

1.11 Untuk membuat isi contennya kita harus menyesuaikan dengan template yang kita contoh.
  -Jika sudah kita analisa seleksi menggunakan Marquee Tool.
  -Lalu kemudian sesuaikan warna, dan beri warna menggunakan paint bucket.
  -Jika sudah maka hasilnya kurang lebih akan menjadi seperti di bawah ini:

1.12 Kemudian kita akan membuat content selanjutnya.
 -Analisa bagian content yang akan kita seleksi.
 -Jika sudah kita analisa kita seleksi menggunakan marquee tool.
 -Kemudian buat layer bau dan beri nama layer tersebut.
 -Sesuaikan warna dan beri warna menggunakan paint bucket.
 -Beri efek shadow dengan cara: Klik kanan pada layer»Kemudian pilih Drop shadow»Sesuaikan»Lalu klik ok.
 -Jika sudah maka hasilnya kurang lebih akan menjadi seperti berikut ini:

1.13 Langkah berikutnya kita akan membuat menu tengah.
 -Langkah pertama analisa bagian mana yang akan kita buat, jika sudah kita analisa kita akan seleksi menggunakan marquee tool.
 -Kemudian kita buat layer baru, dan beri nama layer tersebut.
 -Jika sudah maka kita beri warna, pertama-tama kita harus menyesuaikan warna terlebih dahulu, jika sudah sesuai maka beri warna menggunakan pain bucket.
 -Jika sudah hasilnya kurang lebih seperti berikut ini:

1.14 Langkah berikutnya kita akan membuat bagian menu yang pertama.
 -Pertama kita akan seleksi menu tersebut menggunakan marquee tool.
 -Jika sudah maka kita buat layer baru dan kitaberi nama.
 -Berikutnya beri warna menu tersebut pada layer yang telah kita buat, dengan menggunakan paint bucket dan beri efek gradient dengan cara: Klik kanan pada layer yang akan kita beri gradient »Blending option»Lalu klik menu gradient overlay»Kemudian pilih»Lalu sesuaiakan»Jika sudah sesuai klik ok.
 -Hasilnya kurang kebih menjadi seperti ini:

1.15  Langkah selanjutnya kita akan membuat kotak content yang ada di dalamnya.

  -Langkah pertama analisa bagian yang akan kita buat content.
  -Jika sudah di analisa maka kita akan sleksi menggunakan Rounded Rectangle.
  -Jika sudah kita sleksi maka buat layer baru dan beri nama layer tersebut.
  -Langkah berikutnya beri warna menggunakan Paint bucket dan beri efek gradient, sesuaikan warna sesuai dengan contoh yang akan kita buat.
 -Jika sudah maka hasilnya kurang lebih akan seperti berikut:

 -Lakukan langkah seperti di atas sebanyak 2 kali, jika kita ingin lebih mudah maka copy langkah tersebut sebanyak 2 kali.
 -Maka hasilnya kurang lebih seperti berikut ini:

 1.16  Berikutnya kita akan membuat tombol buton yang ada di menu sebelah kanan.

-Pertama kita buat bulatan dengan menggunakan Ellipse tool.
 -Lalu sesuaikan ukuran sesuai dengan kebutuhan kita.
 -Lakukan cara tersebut sebanyak 2 kali, jika ingn lebih mudah maka kita copy layer tersebut sebanyak 2 kali juga.
 -Jika sudah maka kurang lebih hasilnya akan seperti berikut ini:

1.17  Berikutnya kita akan membuat isi content yang ada pada web tersebut.
 -Pertama kita akan membuat profil kepala sekolah smpn 12 depok.
 -Langkah pertama kita buka foto yang akan kita jadikan profil kepala sekolah.
-Lalu kita buat layer baru dan jangan lupa beri nama layer tersebut.
-Setelah itu kita drag foto tersebut mengguankan move tool.
-Setelah di drag sesuaikan ukuran foto tersebut menggunakan Free transform, lalu sesuaikan ukurnannya.
-Setelah sesuai maka aplay.
-Jika sudah maka kurang lebih hasilnya seperti berikut ini:

1.18 Beriktnya kita akan membuat isi content selanjtnya.
-Pertama kita akan menuliskan info dari kepala sekolah.
-Langkah selanjutnya tulisakan info tersebut menggunkan Horizontal Type Tool.
-Lalu tuliskan sesuai dengan kebutuhan.
-Jika sudah kurang lebih hasilnya seperti berikut ini:

1.19 Berikutnya kita akan membuat content selanjutnya.
-Pertama kita akan membuat content tentang kegiatan-kegiatan di sekolah.
-Langkag selanjutnya kita pilih gambar yang sesuai dengan kebuutuhan.
-Jika sudah kita drag gambar tersebut dengan menggunkan Move Tool.
-Langkah berikutnya jika kita sudah kita drag gambar kita tuliskan info gambar tersebut dengan menggunakan Horizontal Type Tool.
-Jika sudah maka hasilnya kurang lebih akan seperti berikut ini:

1.20 Berikutnya kita akan membuat content yang selanjutnya.
-Lakukan langkah yang sama seperti pada cara 1.19.
-Jika sudah dilalkukan maka kurang lebih hasilnya akan seperi berikut ini:

1.21 Berikutnya kita akan membuat content yang selanjutnya.
-Lakukan langkah yang sama seperti pada cara 1.19.
-Jika sudah dilalkukan maka kurang lebih hasilnya akan seperi berikut ini:

1.22  Berikitnya kita akan membuat tentang smpn 12 depok.
-Petama kita pilih foto yang sesuai dengan keinginan kita.
-Jika sudah, lalu drag foto tersebut dengan menggunaka Move Tool.
-Langkah berikutnya sesuaikan ukuran gambra tersebut dengan menggunakan Free Transform,
lalu sesuaikan ukurannya sesuai dengan kebutuhan.
-Jika sudah membuat gambra, langkah selanjutnya kita membuat text tentang smpn 12 depok dengan menggunakan Horizontal Type Tool, tuliskan semua yang sesuai dengan smpn 12 Depok.
-Jika sudah kurang lebih hasilnya akan seperti berikut ini:

1.23 Berikutnya kita akan membuat content yang berada di sebelah kiri.
-Pertama kita akan membuat content yang berada dikiri atas.
-Kita akan membuat info tentang Guru, Pegawai, dan Kepala Sekolah.
-Langkah selanjutnya adalah kita menggunakan Horizontal Type Tool lalu tuliskan sesuai dengan kebutuhan kita.
-Lalu letakan text tersebut sesuai dengan yang telah kita buat.
-Jika sudah kita buat semuanya maka kurang lebih hasilnya akan seperti berikut ini:

1.24 Berikutnya kita akan membuat content yang berada dibawah content sebelumnya.
-Pertama kita akan membuat apa yang terbaru dari smpn 12 Depok.
-Langkah selanjutnya adalah dengan membuat kata news, dengan cara menggunakan Horizontal Type Tool.
-Jika sudah maka pilih foto yang sesuai dengan kebutuhan kita dengan cara File»Open.
-Langlah selanjutnya kita drag gambar tersebut dengan menggunkan Move Tool.
-Selanjutnya jika sudah kita drag kita sesuaikan ukuran gmabra tersebut dengan menggunakan Free Transform, lalu sesuaikan ukuran gambarnya.
-Selanjutnya jika sudah kita sesuaiakan maka kita akan membuat info dari foto yang kita pilih tersebut dengan menggunakan Horizontal Type Tool
-Jika sudah dilakukan langkah-langkah tersebut maka kurang lebih hasilnya akan seperi berikut:

1.25 Berkutnya kita akan membuat Logo.
-Langkah pertama kita pilih logo yang sesuai, jika sudah sesuai lalu klik open.
-Jika sudah kita open, lalu drag logo tersebut menggunakan Move Tool.

-Setelah kita drag lalu kita sesuaikan ukuran logo tersebut dengan menggunakan Free Transform, Jika sudah sesuai lalu klik Commit transform.
-Langkah selanjutnya kita sesuaikan dimana logo tersebut akan diletakkan, jika sudah sesuai maka kurang lebih hasilnya seperti berikut ini:

1.26 Berikutnya kita akan membuat text hover.
-Langkah pertama yang kita lakukan adalah dengan menduplicate group yang bernama ‘text’.
-Setelah itu ganti nama Group tersebut menjadi text_hover.
-Langkah selanjutnya adalah mengubah warna text dari ‘HOME, ABOUT, NEWS,GALERY’ agar terlihat berbeda dari text yang sebelumnya, dengan cara klik kanan pada layer masing-masing text»Blending option»Lalu sesuaikan warna apa yang menurut kamu menarik.
-Lakukan langkah tersebut satu persatu hingga text tersebut sudah berbeda dari text sebelmnya.
-Jika sudah kurang lebih hasilnya seperti berikut ini:

Design template webpun telah jadi, sempan di document dengan format .psd

BAB III Proses pembuatan web melalui adobe phptoshop dan gabungan Dreamweaver.

2.2 Sliceing Gambar.
1.1 Pertama kita buka kembali dsign web yang telah kita simpan sebelunya.
-Langkah selanjutnya kita slice bagian menu atas satu persatu.
-Jika sudah kita slice satu persatu, maka kurang lebih hasilnyaseperti berikut ini:

-Jika sudah kita slice satu persatu, kita akan edit slice option agar mempermudah kita nantinya.
-Langkah pertama kita klik kanan pada hasil slice lalu klik slice option lalu ganti nama menjadi
‘home’.

-Selanjutnya lakukan langkah berikut berulang sesuai dengan menu yang ada, dan ganti nama
sesuai dengan nama menunya.
-Jika semua telah kita beri nama, maka selanjutnya kita save for web template tersebut.

1.2 Langkah berikutnya ita akan save for web.
-Pertama kita klik file»Save for web & Devices.
-Lalu kita pilih PNG.
-Kemudian save.

-Lalu kita save pada xamp»htdocs»lalu pilih folder dimana kita akan menyimpan»lalu beri nama index.html

1.3  Selajutnya kita aka n slice pada menu hover.
-Pertama kita pilih layer yang terdapat text hover, dan hilangkan layer yang tidak terdapat text hover.

 

-Jika sudah kita pilih layer yang terdapat text hover maka kita klik kanan pada hasil slice,lalu klik slice option lalu ganti nama menjadi ‘home_hover’

-Selanjutnya lakukan langkah berikut berulang sesuai dengan menu yang ada, dan ganti nama
sesuai dengan nama menunya.
-Jika sudah semua maka kita save kembali dengan cara yang sama seperti langkah yang pertama tadi telah kita buat.
-Pertama kita klik file»Save for web & Devices.
-Lalu kita pilih PNG.
-Kemudian save.

-Lalu kita save pada xamp»htdocs»lalu pilih folder dimana kita akan menyimpan»lalu beri nama index.html

-Jika ada pemberitahuan seperti ini:
-Langkah selanjutnya adalah klik replace.

Langkah selanjutnya mengubah sorotan menu di dreamwever.

BAB IV Pembuatan Web melalui adobe Dreamwever.

2.1 Pembuatan web menggunakan adobe dreamweaver.
-Langkah pertama buka adobe Dreamweaver.
-Setelah itu kita buka file yang tadi telah kita buat.
-Jika sudah kita buka kurang lebih tampilan pada dreanweafer seperti ini:

-Setelah itu klik pada menu home, lalu delete.
-Langkah selajutnya klik Insert»Image Objects»Rollofer Image.
-Langkah berikutnya kita isi perintah dibawah ini,
-Pada kolom yang pertama isi dengan text yang bukan hover, lalu pada text yang kedua kita isi dengan text yang hover, seperti berikut ini:

-Jika sudah kita isi semuanya lalu klik OK.
-Jika sudah naka hasilnya kurang lebih akan seperti ini

1.1  Langkah berikutnya adalah membuat menu-menu  yang lainnya menjadi seperti yang terdapat pada langkah 1.1
  -Langkah pertama adalah klik menu about lalu delete.
  -Lalu klik insert Image Objects»Rollofer Image.
  -Kemudian isi perintah yang ada, contohnya seperti di bawah ini:
      
-Jika sudah kita isi semuanya lalu klik OK.
 -Jika sudah naka hasilnya kurang lebih akan seperti ini:
   

 1.2 Lakukan langkah seperti diatas secara berulang hingga semua menu-menu telah kita buat.
     -Jika semuanya telah kita buat maka hasilnya kurag lebih akan seperti di bawah ini:

       

1.3 Langkah selanjutnya adalah membuat menu-menu yang terdapat pada sebelah kiri.
       -Pertama kita klik menu Info lalu delete.
       -Setelah kita delete kita pilih menu Insert Image Objects»Rollofer Image.
       -Kemudian isi perintah yang ada, contohnya seperti di bawah ini:

      
       -Jika sudah kita isi semuanya lalu klik ok.
       -Selanjutnya kurang lebih hasilnya seperti di bawah ini:

     

1.4 Langkah berikutnya adalah lakukan cara yang terdapat pada langkah 1.4 secara setu persatu hingga semua menu telah kita buat.
 -Jika sudah kita buat semuanya, maka kurang lbih asilnya sepeti diberikut ini

    

1.5 Selanjutnya kita akan membuat menu profil kepala sekolah.
    -Pertama klik menu profil kepala sekolah, lalu setelah itu delete.
    -Setelah kita delete kita pilih menu Insert Image Objects»Rollofer Image.
    -Kemudian isi perintah yang ada, contohnya seperti di bawah ini:
   
    -Langkah selanjutnya klik ok.
    -Jika sudah kurang lebh hasilnya seperi ini:
  
   -Jika sudah maka langkah selanjutnya dalah kita save.

1.7 Langkah berikutnya adalah manyimpan hasil kerja kita kedalam htdocs.
    -Pertama klik file»save as»htdocs»lalu beri nama file tersebut.
  
   -Langkah berikutnya jika sudah kita beri nama lalu klik seve.

1.8 Selanjutnya kita akan memanggil hasil kerja kita menggunakan localhost.
     -Langkah pertama kita buka Mozilla Firevox.
     -Setelah itu kita tuliskan Localhost/diamana kita menyimpan file tersebut&/apa nama file
      kita tadi, misalnya menyimpan di folder belajarphp dan file kita beri nama index.html,
      maka kita tuliskan Localhost/belajarphp/index.html
          
      -Jika sudah lalu enter.
      -Maka akan muncul halaman web sepert berikut:
         
      -Jika salah satu menu tersebut kita klik maka akan berubah warna,
      contohnya seperti berikut ini: