CARA MEMBUTA WEBSITE DENGAN PHOTOSHOP

Assalamualikum wr wb
 
kembali lagi di Blog saya
Pada postingan kami ini saya inggin menjelas kan kepada kalian semua bagaimana cara membuat website di photoshop.
oke langsung aja.

sebelum kita masuk ke langkah awal maka sebelumnya untuk menginstal aplikasi Photoshop dan Dreamweaver

setelah itu , langsung saja kepembahasan yang pertama :
1) Buka aplikasi photoshop, buat layar baru dengan klik file => new atau ctrl + n
2) buat ukurannya dengan width 1000 dan height 900 pixel, resolusi 72 pixel/inch
3) dan buat garis bantu / guide dengan cara pilih view=> New Guide, lihat gambar dibawah .
     Horizontal : 150 px
     Horizontal : 200 px
     Horizontal : 850 px

akan tampil seperti di bawah ini :
4) untuk membuat header, caranya pada layar klik create a new layer

5). cara gambar untuk header dengan cara file => open . akan tampil seperti di bawah ini :


6). lalu masukkan gambar background yang sudah anda buat terlebih dahulu dengan cara : klik move  tool lalu drag foto . seperti gambar di bawah ini

7). lalu buatkan texts pada header dengan cara : klik  Horizontal type tool


  8). Buat garis bantu untuk menempatan menu
vertical : 200 px , 400 px , 600 px dan 800 px
9). buat texs dengan cara pada toolbax , klik create a new layar dan pada toolbox  klik horizontal type toll (T), lihat gambar cara penempatkan texs di kotak menu navigasi

10). beri warna background untuk footer dengan cara : klik new layer => Rectangular Marquee Tool kemudian buat seleksi pada menu yang akan diberi warna . kemudian pilih warna yang diinginkan => klik Paint Bucket Tool => klik di area yang telah diseleksi . klik CTRL + D untuk menghilangkan seleksi

dan hasil akhir pada desain website dengan photoshop , seperti gambar di bawah ini . jangan lupa di save / simpan dulu.

11). selanjutnya potong dengan Slite Tool (k) bagian -bagian seperti header , menu navigasi , body dan footer. dan hasilnya setelah di potong dengan Slice Tool seperti di bawah ini .

12 )  nah selanjutnya unutk mengeditnya di lakukan dengan adobe Dreamweaver pada tutorial di blog selanjutnya

                                                                       >.<   SELESAI  >.<

Sekian dari postingan sata semoga bermanfaat yaa .
dan selemat mencoba >.<




jangan lupa kunjungi
www.atmaluhur.ac.id
dan
ysetiawanj.atmaluhut.ac.id

Komentar

  1. Woww ...
    Ternyata mudah juga ya cara membuat Website dengan Photoshopnya, trimakasih icaa sangat bermanfaat. Dengan mudah saya mempraktekannya dirumah

    Kunjungi blog saya yaa
    http://aurelliafemilya.blogsopt.com/

    Dan Kunjungi juga
    www.atmaluhur.ac.id

    BalasHapus
  2. Boleh juga nih, mkin nambah pengetahuannya tentang Photoshop dan Web. Semoga kedepannya menjadi blogger yang handal. Ditunggu kelanjutannya ya dan bloger yan lain. :)


    Jangan lupa kunjungi bloggeer saya ya ica.
    http://andilauatmaluhur.blogspot.co.id/


    Dan kunjungi juga website
    www.atmaluhur.ac.id

    BalasHapus
  3. postingan sangat bermanfaat dan menambah pengetahuan saya dalam membuat website dengan photosop. Ditunggu kelanjutan postinganya yaaaaa mbak

    kunjungi blog saya
    http://dwipratamaariandy.blogspot.co.id/

    dan kunjungi juga
    www.atmaluhur.ac.id

    BalasHapus
  4. postingan yang sangat bermanfaat untuk para blogger newbie seperti saya, terima kasih kakak ica untuk sharing ilmunya... blogwalking and happy blogging

    BalasHapus
  5. Keren kak ica ^-^ tutornya sangat mudah dipahami untuk saya yang suka ngedesain di photoshop. Bolehlah untuk menambah ilmu desain web saya

    Jangan lupa kunjugi blog saya ya ^-^ di
    http://adityaramadhan74.blogspot.com

    Dan juga
    http://www.atmaluhur.ac.id/

    BalasHapus
  6. waaahhh... ini yang saya cari dari kemarin...
    karena kemarin saya cara membuat website dengan photoshop dan waktu itu nggak saya simpan di FlashDisk..
    Makasih banyak yaa kakak Ica udah membantu saya.. untuk aja ketemu sama blognya kakak Ica. Kalau gitu nggak bisa saya buat websitenya..

    Oiya Jangan Lupa Juga Kunjungi Blog Saya juga yaa... sisirizkyokta05.blogspot.co.id

    dan kunjungi ini juga www.atmaluhur.ac.id

    BalasHapus
  7. akhirnya ketemu juga artikel masalah ini..keren!
    kunjungi juga blog saya di brillianthdd.blogspot.com
    dan website kampus di www.atmaluhur.ac.id
    terimakasih~

    BalasHapus
  8. kerennn walaupun udah dipelajari. tapi saat lupa ada yg ngingetinnya yourBlog best.
    mksh ica bisa tambahan catatan dirumah.
    kunjungi blog saya di http://rezaerlinaa.blogspot.ac.id/
    dan ini juga www.atmaluhur.ac.id

    BalasHapus

Posting Komentar

Postingan Populer