Transcript TemplateWebDesign - Politeknik Elektronika Negeri Surabaya

Bab 12 - Template Web
Design
Teori Aplikasi Web –
Team Dosen
Politeknik Elektronika Negeri Surabaya
(PENS)
1
Tujuan


Mengetahui teknik pembuatan template Web
Design
Dapat membuat template web design
Politeknik Elektronika Negeri Surabaya
(PENS)
2
Topik




Membuat Header dengan Photoshop
Membuat Template Dengan Photoshop
Menggunakan “slice tool ” photoshop
Membuat template dengan dreamweaver
Politeknik Elektronika Negeri Surabaya
(PENS)
3
Membuat Template


Dengan Photoshop
Membuat Template dengan dreamweaver
Politeknik Elektronika Negeri Surabaya
(PENS)
4
Banner using Photoshop



Image diatas yang berisi nama dan logo.
Sesuatu yang pertama dilihat orang
Harus atraktif dan informatif
Politeknik Elektronika Negeri Surabaya
(PENS)
5
Example Banner
Politeknik Elektronika Negeri Surabaya
(PENS)
6
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)
7

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)
8

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 # 000000.
Politeknik Elektronika Negeri Surabaya
(PENS)
9

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)
10

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)
11

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)
12

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)
13

Step 10 : Tambahkan nama Company
Menggunakan text tool.Tuliskan nama
company anda atau website dengan warna #
FCF3E5.
Politeknik Elektronika Negeri Surabaya
(PENS)
14
Result
Politeknik Elektronika Negeri Surabaya
(PENS)
15
Resource Template

http://www.templatemonster.com/freetemplates.php
Politeknik Elektronika Negeri Surabaya
(PENS)
16
Create Template


Membuat Template dengan Photoshop
Membuat Website dengan dreamweaver
Politeknik Elektronika Negeri Surabaya
(PENS)
17
Result Template from Photoshop
Politeknik Elektronika Negeri Surabaya
(PENS)
18
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)
19
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)
20
Result Website

www.umpn.info
Politeknik Elektronika Negeri Surabaya
(PENS)
21
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)
22
Referensi from internet



http://www.entheosweb.com/photoshop/slice.
asp
http://www.entheosweb.com/photoshop/websi
te.asp
http://www.templatemonster.com/freetemplates.php
Politeknik Elektronika Negeri Surabaya
(PENS)
23