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 :) 

Comments

  1. AhmadSI2BJune 1, 2018 at 12:28 AM

    Mantap Tutorialnya, Ayu. Sangat Menarik dan lumayan buat nambah llmu baru dalam mendesain web. Di tunggu postingan tentang cara mengedit dan mendesain web dengan Dreamweavernya.
    Terima kasih banyak.


    Kunjungi blog sederhana saya ya di :
    https://ahmadsi2b.blogspot.co.id/

    dan kunjungi pula Website Resmi STMIK ATMALUHUR di :
    http://www.atmaluhur.ac.id/

    ReplyDelete
  2. Nova OsevaJune 1, 2018 at 3:56 AM

    waw keren sekali tutorialnya, sangat bermanfaat dan menambah pengetahuan saya..
    Trimakasih Ayu..

    jangan lupa kunjungi blog saya di http://novaosevadamanik.blogspot.com/
    dan website kampus kita di http://www.atmaluhur.ac.id/
    terimakasih. God Bless Us

    ReplyDelete
  3. Aditya RamadhanJune 2, 2018 at 7:17 AM

    Keren banget Kak Ayu tutornya ^-^ boleh nih untuk nambah-nambah ilmu tentang desain web di photoshop hehe

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

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

    ReplyDelete
  4. UnknownJune 2, 2018 at 8:52 AM

    Wissss,,,,,Keren sekali tutorialnya, sangat bermanfaat

    jangan lupa kunjungi blog saya di http://flaurenza.blogspot.com/
    dan website kampus kita di http://www.atmaluhur.ac.id/
    terimakasih.

    ReplyDelete
  5. Leni's BlogJune 2, 2018 at 11:18 PM

    Wahh mantap Ayu, akhirnya saya menemukan tutorial untuk mengerjakan tugas desain web saya.
    Jangan lupa kunjungi juga blog saya ya di https://lenijulianti081.blogspot.com
    Dan juga website kampus kita di www.atmaluhur.ac.id

    ReplyDelete
  6. Leni's BlogJune 2, 2018 at 11:18 PM

    Wahh mantap Ayu, akhirnya saya menemukan tutorial untuk mengerjakan tugas desain web saya.
    Jangan lupa kunjungi juga blog saya ya di https://lenijulianti081.blogspot.com
    Dan juga website kampus kita di www.atmaluhur.ac.id

    ReplyDelete
  7. AfdalJune 5, 2018 at 8:50 AM

    Mantap Tutorialnya, Ay. Sangat Menarik dan menambah llmu baru dalam mendesain web. Di tunggu postingan tentang cara mengedit Lain nya.
    Terima kasih banyak.


    Kunjungi blog sederhana saya ya di :
    https://afdal112.blogspot.com
    dan
    http://www.atmaluhur.ac.id/

    ReplyDelete
  8. Diaz AdityaJuly 3, 2018 at 11:45 PM

    Tutorial yang sangat berguna bagi seorang pemula seperti saya, terima kasih banyak

    kunjungi blog saya di
    https://diazaditya.blogspot.co.id/

    dan kunjungi juga
    www.atmaluhur.ac.id

    ReplyDelete
  9. Reza ErlinaJuly 10, 2018 at 4:10 AM

    wahhh... kerenn yuu penjelasannya rinci banget
    mudah dimengerti, tentunya bermanffat ..

    Kunjungi my blog di https://rezaerlinaa.blogspot.co.id/
    dan my kampus www.atmaluhur.ac.id
    mkshh

    ReplyDelete
  10. YunitaJuly 11, 2018 at 10:19 PM

    Mantep Ayu, sangat menarik
    ditunggu ya postingan selanjutnya.

    kunjungi juga blog saya di: https://juniayunita.blogspot.co.id
    dan website kampusnya juga di: http://www.atmaluhur.ac.id

    ReplyDelete

Post a Comment

Popular posts from this blog

TIPS AGAR MEMORI HP TIDAK CEPAT PENUH

Image
HAII kali ini aku mau kasih tips agar memori hp tidak cepat penuh padahal tidak banyak menginstal aplikasi , yeeeeey !! Cara terbaik untuk memperbanyak sisa memori internal di HP Android adalah dengan  menghapus  cache  tidak penting yang biasanya tersimpan di HP Android. Cara ini bisa dilakukan dengan masuk ke menu  Setting > Apps > All Apps .  oh ya WhatsApp, siapa si yang ga kenal dengan app satu ini whatsapp adalah salah satu aplikasi yang memeakai memori internal kita untuk menyimpan semua data yang pernah kita kirim dan kita terima. caranya : pergi ke File saya/File Manager, pilih Penyimpanan Perangkat, lalu pilih WhatsApp  , maka akan mucul banyak folder seperti Databases,.trash .shared , pilih folder tersebut dan hapus , selanjutka buka folder Media maka akan muncul banyak folder lagi seperti WhatsApp image, WhatsApp Document , WhatsApp video   dll.jika terdapat sesuatu file penting kalian bisa memindahkan file file tersebut ke dalam memory card, jika kalian ing
Read more

TUGAS KARAOKE SMULE / StarMaker

Image
Hai semuanyaa!! ini adalah salah satu tugas Mou untuk UAS kami loh, kami satu kelas ditugaskan untuk membuat video karaoke . Karaoke StarMaker !!! Diharapkan kepada kalian yang menonton untuk Tahan Tawa ya, dikarenakan suara dan musik agak kurang sinkron wkwkwk !!! Jangan lupa kunjungi web resmi kampus kami ya www.atmaluhur.ac.id Terimakasih :)❤❤☺
Read more

Pertemuan Minggu ke-11,12,& 13 Mata Kuliah Perancangan Basis Data

Image
Assalamualaikum wr.wb Hai semuanya Postingan kali ini saya akan mambahas tentang mengisi Query pada suatu Tabel Pembelian yang dibahas sebelumnya pada gambar di atas terdapat sebuah bentuk ERD dan sebuah FAKTUR pembelian di PT DUTA PUTRA LEXINDO pada pembahasan sebelumnya telah di buat query untuk tabel supplier pada mysql yaitu sebagai berikut: create table Supplier( KdSup varchar(4) not null, NmSup varchar(21), AlSup varchar (50), NoTelp varchar(15), Kota varchar (30),  primary key (KdSup)); lalu masukan Record untuk tabel Supplier sebagai berikit: contoh: insert into supplier values( 'S002','PT Indofood'  , 'Jl Selindung baru No.111' . '0717657640' , 'Pangkalpinang'); untuk melihat tabel yang telah berhasil dibuat maka show tables;   oke selanjutnya kita akan membuat query dan rancangan untuk tabel barang  use pembelian; (nama database yang digunakan) create table Barang( KdBrg varchar(5) not null, NmBrg varchar(3
Read more