Posted by : Unknown Monday, November 10, 2014


Teknik Slice di Photoshop
Aktifkan Ruler / Penggaris pada photoshop dengan cara klik menu View-Ruluers (Ctrl + R), tarik Ruler sehingga membuat baris panjang di lembar kerja, dan atur posisinya sehingga menjadi gambar seperti berikut
Membuat Website HTML Photoshop
Membuat Website HTML Photoshop
selanjutnya gunakan teknik yang sama seperti diatas yaitu menarik Ruler kedalam lembar kerja pada tiap bagian lembar kerja sehingga anda akan mendapatkan hasil kurang lebih seperti gambar di bawah ini
Membuat Website HTML dengan Photoshop
Membuat Website HTML dengan Photoshop
selanjutnya aktifkan “Slice Tool (C)” lalu potong / slice layer yang sudah di beri Ruler / garis, menjadi seperti ini
Membuat Website HTML dengan Slice Photoshop
Membuat Website HTML dengan Slice Photoshop
penjelasannya, warna biru kotak kecil dengan tanda nomor 01, menunjukkan teknik slice yang telah aktif atau agan telah memotong / men-slice bagian tersebut, sedangkan warna kotak yang berwarna coklat merupakan bagian yang harus di slice berikutnya, lakukan slice pada tiap garis dengan sabar dan teliti pada lembar kerja agan, sehingga lembar kerja photoshop agan akan menjadi seperti ini
Membuat Website HTML dengan Photosahop
Membuat Website HTML dengan Photosahop
setelah semuanya di slice seperti gambar diatas, selanjutnya klik menu File – Save for Web & Devices (Alt + Ctrl + Shift + S) tentukan jenis format imagenya dalam hal ini admin menggunakan format JPG dan preview posisi Original, lalu klik save, isi file name dengan nama index.html atau home.html pada pilihan format pilih HTML dan Images, lalu klik save pada foolder yang sudah anda siapkan sebelumnya, simak gambar di bawah ini
Tutorial Web Desain HTML
Tutorial Web Desain HTML
Tutorial Web Desain HTML
Tutorial Web Desain HTML
jika agan melakukan dengan benar maka jika dilihat di windows explorer akan nampak seperti ini
Tutorial Website HTM Photoshop
Tutorial Website HTM Photoshop
Tutorial Website HTM Photoshop
Tutorial Website HTM Photoshop
semua file yang di edit melalui photoshop sebelumnya menjadi bentuk image atau gambar, dan hasilnya jika kita buka file index.html akan menjadi website dengan tampilan seperti ini
Tutorial Membuat Website HTML
Tutorial Membuat Website HTML
selanjutnya tinggal di edit melalui dreamweaver, dengan sedikit improvisasi, tekun dan sabar maka akan menghasilkan webiste yang simple tetapi memiliki desain yang tidak kalah dengan website profesional lainnya.

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Popular Post

Blogger templates

Copyright @Danankzaputraz. Powered by Blogger.

- Copyright © Advance Horizon -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -