Home > Desain Grafis, Photoshop, Web > Desain Website dengan Photoshop

Desain Website dengan Photoshop

tutorialcanggih_003

Untuk merancang sebuah layout website yang unik (dalam arti gak pasaran), saat ini kita dapat menggunakan berbagai Tools untuk memodifikasi layout website kita, nah salah satu Toolsnya antara lain adalah photoshop dan dreamweaver, mau tau cerita lengkapnya? Jadi begini ceritanya…

Adapun proyek yang menjadi bahan tutorial ini adalah merupakan proyek TA penulis yang saat ini sedang penulis garap.

  1. Untuk mempercepat proses editing, maka terlebih dahulu kita download templete2 yang saat ini sudah banyak tersedia di berbagai situs free templete.

tutorialcanggih_001

2.  Setelah anda mendownload, maka pastikan bahwa terdapat juga file dengan format psd, untuk editing layoutnya.

tutorialcanggih_029

3. Buka file psd-nya maka anda siap untuk meng-editnya.

tutorialcanggih_002

4. Sesuaikan tema website yang telah ada dengan tema website yang anda yang inginkan dengan mengklik pada layar yang sesuai.

tutorialcanggih_005

5. Untuk mengganti tema warna maka anda bisa menggantinya dengan menggunakan style2 seperti gambar berikut

tutorialcanggih_004

6. Lakukan editing untuk merubah bagian2 yang cukup penting dalam website.

tutorialcanggih_007

7. Tambahkan juga bagian2 yang menurut anda masih kurang dengan meng-klik pada layer yang akan diedit.

tutorialcanggih_008

8. Setelah proses editing selesai maka hasilnya akan tampak seperti berikut.

tutorialcanggih_0099. Proses selanjutnya adalah proses slicing layout, yaitu proses pemotongan gambar menjadi beberapa bagian agar dapat dengan mudah diisi kode2 html tertentu pada dreamweaver. Slicing merupakan teknik memotong objek gambar dengan menggunakan Slice Tool  pada Adobe Image Ready. Dalam proses ini kita dapat menentukan ukuran dan size gambar yang di potong.

10. OKE..masih dalam area Adobe Photoshop. Buat garis2 guide untuk membantu dalam slicing nantinya seperti pada gambar. Perhatikan jarak dan posisi guide untuk memperoleh hasil slice yang teratur.

tutorialcanggih_017

11. Garis Guide bisa dibuat dengan klik dan drag pada mistar sekeliling dokumen. Kalo mistarnya belum muncul tekan [CTRL+R]

12. Bagian yang dikasi garis guide adalah bagian2 yang akan dislice, seperti tombol, box konten dan header.

13. Selanjutnya perhatikan tombol Edit in ImageReady dibawah, Tekan untuk berpindah ke Adobe Image Ready, shortcut Keyboard nya [CTRL+SHIFT+M].

tutorialcanggih_018

14. Tunggu proses Loading dan File akan ditampilkan secara otomatis di ImageReady.

15. Sebelum melakukan slicing, pastikan terlebih dahulu, Pilihan Snap to Guide di centang, agar saat men-slice arah gerakan mouse akan mengikuti jalur guide yg udah dibuat di Photoshop. View-Snap To-Guide.

16. Kita mulai dengan bagian petak paling kiri atas pada gambar. Dengan Slice Tool (K) klik dan tarik mouse mulai dari ujung kanan bawah petak guide — > ke kiri atas.

tutorialcanggih_022 tutorialcanggih_023

17. Lakukan hal yang sama pada petak2 guide yang lainnya sehingga terbentuk slice pada semua petak guide nya.

tutorialcanggih_021

18. Terakhir Export file dokumen nya ke format HTML+IMAGES. Pilih File > Save As Optimize. Lalu OK

19. Maka secara otomatis, file slice (potongan gambar) akan diexport ke format Optimize yang dipilih (GIF) dalam sebuah folder “images”, beserta file HTML nya.

tutorialcanggih_030

20. Jadi dech punya index editing hasil sendiri. Haaah…

tutorialcanggih_03121. Nah… Karena ni udah jam 03.20 pagi, so… untuk proses editing di Macromedia Dreamweavernya, tunggu tutorial selanjutnya…

22. (-_-)   zZzz…Zzz…zzZZ…

About these ads
Categories: Desain Grafis, Photoshop, Web Tags: ,
  1. 13 June 2009 at 2:22 am | #1

    Bagus dan salam untuk semua rekan di WordPress
    Ayo terus maju untuk semua pengguna Blog berikan informasi untuk semua orang.
    Kita semua pasti sukses

    • tutorialcanggih
      13 June 2009 at 2:56 pm | #2

      ia sama2,, dengan wordpress hidup mnjadi fresh,

  2. 19 June 2009 at 1:10 am | #3

    salam….
    mba….klo bisa tampilkan source nya
    ato sediakan link untuk mendownload sourcenya

    source html n psdnya

  3. Chacha
    1 July 2009 at 7:02 am | #4

    Haah… akuh nggak ngerti yang ginian

  4. aji
    4 August 2009 at 9:00 am | #5

    mba…aku masih newbi itu bisa kata ma isinya bisa di ubah n gambar templetnya bisa diubah sesuai keinginan kita gax…
    ntu kan ngopy dari template yang udah jadi…lo bikin sendr gimann….

  5. 7 December 2009 at 4:42 am | #6

    huih hebat tutorialnya!!

  6. 7 December 2009 at 9:48 am | #7

    oya, mba, thank tutorialnya… leh belajar lebih g?
    thanks

  7. 25 May 2010 at 1:51 am | #8

    tips yang bermanfaat gan,..
    ada ga yah ebook nya yg bisa ane dunluds

  8. 11 March 2011 at 8:28 pm | #9

    woooow ide muantaaaap!, baru tau klo photoshop bisa juga bikin template.
    Tambah lagi deh wawasan ane sob. Thanks berat sob… lanjutkan berkarya.
    Eh iya lanjutannya jadi penasaran?!, bisa kirim ke email ga sob?, ditunggu ya?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: