Bab 12 - Template Web Design

Presentasi berjudul: "Bab 12 - Template Web Design"— Transcript presentasi:

1 Bab 12 - Template Web Design
Teori Aplikasi Web – Team Dosen Politeknik Elektronika Negeri Surabaya (PENS)

2 Politeknik Elektronika Negeri Surabaya (PENS)
Tujuan Mengetahui teknik pembuatan template Web Design Dapat membuat template web design Politeknik Elektronika Negeri Surabaya (PENS)

3 Politeknik Elektronika Negeri Surabaya (PENS)
Topik Membuat Header dengan Photoshop Membuat Template Dengan Photoshop Menggunakan “slice tool ” photoshop Membuat template dengan dreamweaver Politeknik Elektronika Negeri Surabaya (PENS)

4 Politeknik Elektronika Negeri Surabaya (PENS)
Membuat Template Dengan Photoshop Membuat Template dengan dreamweaver Politeknik Elektronika Negeri Surabaya (PENS)

5 Banner using Photoshop
Image diatas yang berisi nama dan logo. Sesuatu yang pertama dilihat orang Harus atraktif dan informatif Politeknik Elektronika Negeri Surabaya (PENS)

6 Politeknik Elektronika Negeri Surabaya (PENS)
Example Banner Politeknik Elektronika Negeri Surabaya (PENS)

7 Politeknik Elektronika Negeri Surabaya (PENS)
Step to Create Banner Step 1: Membuat Ukuran Banner Buka new file File>Open. Buat ukuran lebar 780px dan tinggi 120px. Step 2: Memberikan warna background Membuat layer baru. Beri nama bgcolor. Beri wana seperti berikut : - rubah warna foreground ke #E4D1B8. - Klik Paint Bucket Tool. - Klik canva dengan mouse. Warna background akan berubah.. Politeknik Elektronika Negeri Surabaya (PENS)

8 Politeknik Elektronika Negeri Surabaya (PENS)
Step 3 : Membuat warna dalam background Buat layer baru. Beri nama insidecolor. Pilih Rectangular Marquee Tool. Buat rectangle size width 760px dan height of 100px didalam background. Beri warna # C64866 dengan paint bucket tool. Politeknik Elektronika Negeri Surabaya (PENS)

9 Politeknik Elektronika Negeri Surabaya (PENS)
Step 4 : Membuat background Logo Buat layer baru. Beri nama logobkg. Pilih Rectangular Marquee Tool. BUat rectangle ukuran width of 120px dan height of 100px. Beri warna black # Politeknik Elektronika Negeri Surabaya (PENS)

10 Politeknik Elektronika Negeri Surabaya (PENS)
Step 5 : Buat Logo dengan custom shape tool Buat layer baru. Beri nama logo. Pilih custom shape tool. Klik Shape drop down menu. Pilih arrow dan pilih Ornaments. Drag ke logo space dan letakkan posisi ditengah logo background. Sekarang kita punya ornament sementara sebagai logo dapat kita ganti dengan logo company yg kita punyai. Politeknik Elektronika Negeri Surabaya (PENS)

11 Politeknik Elektronika Negeri Surabaya (PENS)
Step 6 : Membuat vertical lines dalam banner Buat layer baru. Bari nama band. Select Rectangular Marquee Tool. Buat rectangle size width of 7px and height of 120px. Letakkan rectangle ditengah banner. Beri warna # E8B0BD. Buat empat copy dari layer band. untuk membuat copy, klik kanan layer klik pada duplicate. screen name Duplicate Layer akan terlihat. Beri nama hasil copyan tsb. Click OK. Lakukan hal sama pada copy2, band copy3, band copy4. Politeknik Elektronika Negeri Surabaya (PENS)

12 Politeknik Elektronika Negeri Surabaya (PENS)
Step 8 : Membuat Logo Border Buat layer baru. Beri nama border. Select Rectangular Marquee Tool. Buat rectangle size width of 20px dan height of 100px. Beri warna # A63D56. Letakkan rectangle pada sisi kiri logo background. Buat copy dan letakkan rectangle yang baru pada sisi kiri logo background. Politeknik Elektronika Negeri Surabaya (PENS)

13 Politeknik Elektronika Negeri Surabaya (PENS)
Step 9 : Membuat dashed lines Pilih Horizontal Type Tool (text tool). Type" _________". Letakkan diatas banner. Buat copy, klik kanan pada layer dan cuplicate. Letakkan diatas banner. Politeknik Elektronika Negeri Surabaya (PENS)

14 Politeknik Elektronika Negeri Surabaya (PENS)
Step 10 : Tambahkan nama Company Menggunakan text tool.Tuliskan nama company anda atau website dengan warna # FCF3E5. Politeknik Elektronika Negeri Surabaya (PENS)

15 Politeknik Elektronika Negeri Surabaya (PENS)
Result Politeknik Elektronika Negeri Surabaya (PENS)

16 Politeknik Elektronika Negeri Surabaya (PENS)
Resource Template Politeknik Elektronika Negeri Surabaya (PENS)

17 Politeknik Elektronika Negeri Surabaya (PENS)
Create Template Membuat Template dengan Photoshop Membuat Website dengan dreamweaver Politeknik Elektronika Negeri Surabaya (PENS)

18 Result Template from Photoshop
Politeknik Elektronika Negeri Surabaya (PENS)

19 Politeknik Elektronika Negeri Surabaya (PENS)
Setting Manage Site Untuk menentukan dimana letak file-file website kita diletakkan Bisa di lokal atau di server. Caranya : site – manage site Politeknik Elektronika Negeri Surabaya (PENS)

20 Template dengan dreamweaver
Masukkan menu navigasi Insert Editable Region pada bagian content (insert  template object  Editable Region ) Save as template Politeknik Elektronika Negeri Surabaya (PENS)

21 Politeknik Elektronika Negeri Surabaya (PENS)
Result Website Politeknik Elektronika Negeri Surabaya (PENS)

22 Tugas Pendahuluan Praktikum
Membuat Template Homepage pribadi dengan photoshop Gunakan “slice tool” untuk memotong gambar Save as sebagai web html. Politeknik Elektronika Negeri Surabaya (PENS)

23 Referensi from internet
Politeknik Elektronika Negeri Surabaya (PENS)