DESAIN WEB DENGAN PHOTOSHOP

Assalamualaikum wr.wb

Pada postingan kali ini saya akan membuat Tutorial Cara Membuat Desaon Web dengan PhotoShop

langsung aja yuukk

• Pertama yang pasti harus kita lakukan yaitu buka aplikasi Photoshop nya, buat sebuah layer baru caranya Pilih File>New
• Atur ukuran nya terserah ya

• Buat garis bantu / Guide dengan cara pilih View>New guide
• atur garis horizontal seperti contoh ini ya 
• Horizontal : 150 px
• Horizontal : 250 px
• Horizontal : 800 px

• Sehingga yang dihasikan akan seperti gambar di bawah ini

• Selanjutnya kita akan membuat Header, caranya pada Layer>New>Layer
• Carilah gambar untuk Headernya caranya File>Open (gambarnya boleh bebas yaa)
• Slanjutnya masukkan gambar background yang telah di pilih tadi dengan cara : pilih move tool kemudian drag foto .

• Buatlah teks pada Header dengan Horizontal type Tool sebagai contoh text (SELAMAT DATANG DI WEBSITE SAYA) 

• kllil New Layer>Rectangular Marquee Tool untuk memberi warna pada menu navigasi, kemudian buat seleksi pada menu yang akan di beri warna, pilih warna yang diinginkan> lalu klik Paint Bucket Tool klik di bagian yang telah di seleski . lalu CTRL+D agar menghilangkan seleksi area

• Buat garis bantu untuk penempatan menu caranya sama seperti di awal hanya yang diplih bentuk Vertical ya 
• vertical : 200 px
• vertical : 400 px
• vertical : 600 px
• vertical : 800 px

•     Untuk membuat text di kotak navigasi seperti contoh berikut, caranya layer>New>Layer dan pilih Horizontal Type Tool

•       Kemudian beri warna untuk Footer caranya sama dengan memberi warna pada Header ya

• 
  
•       Setelah selesai jangan lupa di Save/Simpan dulu ya. eeiiitttss belum selesai nih
•      Selanjutnya Potong dengan Slice Tool pada Bagian bagian seperti Header Body seperti gambar berikut:

•     Lalu pilih File > Save For Web And Device  lalu klik layoutr webnya, pilih Jpeg kemudian SIMPAN. pilih tempat penyimpanan dengan membuat Folder dan pilih save as type : HTML amd Images.
•       Langkah Selanjutnya untuk mengedit dilakukan dengan app Dreamweaver yaa 

Okee sekian dulu ya untuk langkah langkah mendesain Web dengan Photoshopnya semoga dapat membantu teman teman ya 

sekiaann dan terimaksih 

Jangan lupa kunjungi Web resmi kampus kita ya :

www.atmaluhur.ac.id :)