slicing image web template dengan photoshop

By : Education Department of HIMA IT EEPIS – ITS 2008 - 2009

Slicing Image Web Template Dengan Photoshop

PendahuluanSeringkali mungkin kita melihat berbagai situs dengan bermacam-macam style atau tampilan yang menarik. Nah apa sih yang pertama kali menarik perhatian kita pada saat melihat situs web yang sama sekali belum pernah kita jumpai, yups salah satunya adalah tampilan atau bisa juga disebut ‘template’.

Nah kali ini saya ingin berbagi pengetahuan dengan Anda tentang bagaimana membuat template sendiri menggunakan photoshop. Sebenernya sih nggak susah, cumin kita harus punya ide kreatif untuk membuat suatu template yang bisa menarik perhatian.

Oke pertama kali kita tentukan dulu tema web yang akan kita buat, apakah itu web pribadi, perusahaan, atau yang lainnya. Setelah itu kita tentukan bagian – bagiannya. Ada beberapa model template :

1. Two Column Left Navigation (Gambar 1)2. Two Column Right Navigation (Gambar 2)3. Three Colum Left Navigation (Gambar 3)4. Three Colum Rigth Navigation (Gambar 4)

Gambar 1 Two Column Left Navigation

HEADER

COLUMN 1

COLUMN 2


Gambar 2 Two Column Right Navigation

Gambar 3 Three Colum Left Navigation

HEADER

COLUMN 1

COLUMN 2

HEADER

COLUMN 1

COLUMN 2

COLUMN 3


Gambar 4 Three Colum Rigth Navigation

Mulai mendesain suatu web template

Contoh web template yang akan kita buat pada pelatihan kali ini :

HEADER

COLUMN 1

COLUMN 2

COLUMN 3


1. Jalankan software Adobe Photoshop

Gambar 1 : Interface Photoshop CS3

2. Klik file new atau CTRL+N untuk membuat file baru.


Maka akan muncul tampilan sebagai berikut :


Gambar 2 : Properties file baru

3. Jika tampilan yang Anda lihat tidak sama dengan gambar 2, ubahlah sedemikian rupa agar sama dengan apa yang Anda lihat pada gambar 2. Untuk nama file ’Untitled-1’ dapat Anda ubah sesuai dengan kemauan Anda. Setelah itu klik ’OK’. Maka jendela canvas akan muncul seperti ini :

4.

Gambar 3 : Canvas

5. Mengubah foreground color dengan mengklik Maka akan tampil seperti gambar berikut :


Gambar 4 : Color Picker

Ubah kode warna yang ada pada kotak merah pada gambar 4 menjadi ’00536d’. Lalu klik ’OK’.

6. Klik Paint Bucket tool. setelah itu arahkan pada canvas lalu klik sekali untuk mewarnai canvas. Maka akan terjadi perubahan seperti berikut :


7. Klik Filter Filter Gallery

Maka akan muncul tampilan sebagai berikut :


Pilih Sketch Water Paper, lalu atur propertiesnya sebagai berikut :

kemudian klik ’OK’, maka akan terjadi perubahan seperti berikut :

8. Selanjutnya dengan menggunakan garis bantu kita membuat bingkai content dengan menggunakan rounded rectangle tool

.


Create new layer, beri nama back

Pada saat layer back aktif, klik dan tahan hingga membuat kotak dengan ukuran yang kita mau.


Buat hingga menjadi seperti pada gambar berikut :

9. Berikan effect pada layer back, caranya klik kanan pada layer 1 pilih Blending Option.


Maka akan keluar tampilan :


Gambar 5 : Layer styleCentang Bevel and Emboss, atur structure dan shading seperti gambar 5 diatas.Klik ’OK’. Hasilnya seperti berikut :

10. Setelah itu kita membuat Header logo dengan menggunakan Elliptical

marquee tool . Create new layer beri nama headerContent, buat ellips pada layer tersebut, gunkan paint bucket tool untuk mewarnai ellips.


Copy layer style pada layer back paste ke layer headerContent.

Hasilnya seperti berikut :


11. Gunakan Horizontal type tool untuk membuat tulisan pada canvas.

klik gambar Set the text color

set kode warna seperti gambar berikut :


klik ‘OK’.

Untuk mengatur property tulisan :

Tuliskan Littlebro sites.

12. Buat 2 layer baru lagi beri nama layer navigasi dan layer content.13. Dengan menggunakan rounded rectangle tool, buat kotak kecil pada layer

navigasi dan kotak besar pada layer backContent.14. Dengan menggunakan Horizontal type tool buat tulisan navigasi dan content

letakkan tulisan navigasi di bagian kotak kecil dan tulisan content pada kotak besar.

15. Hasilnya sebagai berikut :


16. Selanjutnya kita akan membuat slice untuk disimpan sebagai halaman web.

Dengan menggunakan slice tool , lakukan slicing seperti gambar berikut :


17. Simpan File sebagai web template, klik File Save for web & Devices


klik Save


18. FIN

slicing image web template dengan photoshop

Documents