TUTORIAL MEMBUAT WEB DESIGN DENGAN PHOTOSHOP | BLC TELKOM

      TUTORIAL MEMBUAT WEB DESIGN DENGAN PHOTOSHOP

 Assalmualaikum Wr.Wb

Pendahuluan 

Hallo sahabat kembali lagi ya di blog sederhana saya ini , hehe . kali ini saya akan memberikan tutorial yang menarik , yaitu membuat design web dengan Photoshop.
di blog sebelumnya saya sudah menjelaskan tentang web design yah, langsung saja.

Manfaat Dan Tujuan

Untuk membuat situs web atau dokumen elektronik dan aplikasi yang berada pada web server dan menampilkan konten dan fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web. Seperti unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman menggunakan HTML / XHTML / tag XML. Menampilkan media yang lebih kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in seperti Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in juga dimasukkan ke dalam halaman web dengan menggunakan HTML / tag XHTML.

Alat dan Bahan

-Aplikasi Photoshop

-Referensi

Pembahasan 

Sekarang tambahkan gaya lapisan berikut ke persegi panjang.

Pilih "Pen Tool" (P) lalu tarik garis di tengah-tengah persegi panjang. Setelah Anda menarik garis, gunakan pengaturan berikut untuk mengubah garis menjadi garis-garis kecil.

Membuat header

Buat dokumen baru (Ctrl + N) 1200 x 1600 piksel dengan latar belakang hitam. Pilih "Rectangular Marquee Tool" (M) lalu buat persegi panjang tipis di bagian atas kanvas.

Sekarang tambahkan gaya lapisan berikut ke garis putus-putus.

Anda harus memiliki sesuatu seperti ini.

Sekarang akan mulai menambahkan lantai / dinding 3D menggunakan tekstur kayu.

Tekstur Kayu                                                        Unduh dan salin tekstur kayu ke kanvas lalu ubah ukuran dan letakkan di bawah kotak merah di bagian atas kanvas. Kemudian dengan lapisan tekstur kayu yang dipilih pergi ke "Image> Adjustments> Desaturate" (Shift + Ctrl + U).

Pilih "Rectangular Marquee Tool" (M) lalu buat seleksi di bagian bawah tekstur.

Pilih "Gradient Tool" (G) lalu seret latar depan ke gradien transparan dari bagian bawah tekstur ke bagian atas pilihan.

Setelah gradien ditambahkan, atur layer blend mode ke “Soft Light”.

Tempelkan salinan tekstur kayu lainnya ke kanvas, balikkan secara vertikal dengan pergi ke "Edit> Transform> Flip Vertical". Pindahkan (V) tekstur di bawah tekstur pertama lalu pilih "Edit> Transform> Perspective". Seret dua titik sudut bawah jangkar keluar sampai Anda memiliki sesuatu seperti milik saya. Anda mungkin perlu mengubah ukuran tekstur secara vertikal juga.

Sekarang tambahkan bayangan yang datang dari dinding ke lantai, cara yang sama kita lakukan bayangan untuk dinding hanya menyeret gradien ke arah yang berlawanan. Setelah menambahkan bayangan, tambahkan layer mask ke lapisan lantai lalu seret gradien linier di atas bawah untuk memadukannya ke latar belakang hitam.

Menambahkan Camera

Unduh gambar kamera dari daftar sumber daya, lalu hapus latar belakang dan salin ke kanvas.

• Cannon 60DA

Gandakan layer kamera kemudian tarik layer yang digandakan di bawah aslinya. Tambahkan hitam # 000000 “Color Overlay” ke layer duplikat, kemudian blur menggunakan blur guassian sekitar 1-3 piksel “Filter> Blur> Guassian Blur”. Pilih "Move Tool" (V) lalu pindahkan layer duplikat ke bawah sekitar 4 piksel.

Sekarang akan menambahkan dua bayangan lagi ke kamera, satu di bagian kiri bawah kamera dan satu lagi di kanan atasSekarang akan menambahkan dua bayangan lagi ke kamera, satu di bagian kiri bawah kamera dan satu lagi di kanan atas

.

Pilih "Gradient Tool" (G) dengan latar depan hitam ke gradien transparan. Muatkan pilihan di sekitar kamera dengan mengklik thumbnail layer sambil menekan tombol "Ctrl Key" pada keyboard. Setelah pemilihan telah dimuat, buat layer baru di atas kamera lalu seret gradien secara diagonal di bagian bawah kamera.

Setelah Anda melakukan gradien mengatur opacity gradien menjadi sekitar 65%

Repeat the same steps for the top right shadow only this time set the layer opacity to 100% and set the blend mode to “Soft Light”.

Membuat foto

Untuk bagian selanjutnya saya agak curang sedikit dengan menggunakan tindakan yang telah ditetapkan. Anda dapat mengunduh aksi dari sungai grafis menggunakan tautan di bawah ini

 

Setelah Anda mengunduh set tindakan, buka foto yang Anda inginkan lalu terapkan efek 27.

Salin dan tempel gambar yang baru dimodifikasi ke kanvas dan tempat di belakang kamera

Sekarang pergi ke bayangan tambahan untuk foto dengan cara yang sama kami lakukan ke kamera. Gandakan layer foto kemudian tambahkan hitam # 000000 "Color Overlay" ke layer duplikat. Tarik layer duplikat di bawah aslinya lalu pindahkan ke kiri sekitar 3-4 piksel menggunakan "Move Tool" (V)

.

Load a selection around the photo then drag a black foreground to transparent gradient from the bottom left corner of the photo on a new layer (Same as we did with the camera). Set the opacity of the gradient to 75%.

Make another duplicate of the photo then add a guassian blur “Filter > Blur > Guassian Blur” to the duplicated layer, blur the layer by around 3-5 pixels. Finally add a layer mask to the blurred layer, select the mask from within the layers window then using a black #000000 “Paint Brush” (B) brush around the edges and a bit of the face.

Melengkapi Header

Menggunakan tipografi yang bagus membangun sisa bagian header. Tambahkan judul yang terlihat bagus menggunakan font gaya penulisan, hilangkan tipografi dengan blok teks intro.

Akhirnya selesai bagian header dengan beberapa ikon sosial. Anda bisa ambil yang saya gunakan dari tautan di bawah ini ..

Bagian foto terbaru

Pilih "Rectangle Tool" (U) lalu buat 4 persegi panjang putih di samping satu sama lain di bawah bagian header. Sejajarkan segi empat di sebelah kanan kanvas.

Muatkan pilihan di sekitar salah satu persegi panjang kemudian pergi ke "Select> Modify> Contract", kontrak seleksi dengan 5 piksel kemudian salin dan tempel foto ke dalam seleksi dengan pergi ke "Edit> Paste Special> Paste Into".

Ulangi langkah di atas untuk 3 persegi panjang berikutnya

Di sisi paling kiri gambar thumbnail menambahkan beberapa teks terkait portofolio menggunakan "Type Tool" (T) meninggalkan sedikit ruang di bawah untuk tombol merah. Pilih "Rounded Rectangle Tool" (U) dan tarik persegi panjang kecil

Setelah Anda membuat persegi panjang, tambahkan gaya lapisan berikut

Label tombol Anda dengan portofolio kata, maka Anda harus memiliki sesuatu seperti ini.

Di bawah thumbnail foto kecil, buat blok teks yang dipisahkan dengan dua garis 1 piksel. Anda dapat mensimulasikan teks lorem ipsum dengan masuk ke “Ketik> Tempel Lorem Ipsum”. (Fitur baru di CS6)

Bagian Layanan

Untuk bagian layanan dimulai dengan blok teks kecil seperti yang kami lakukan untuk galeri kami, hanya saja kali ini tempatkan tombol merah di sebelah kanan teks dalam antrean.

Di bawah judul utama menambahkan thumbnail gambar, saya pergi untuk foto kamera yang bagus, ini khususnya karena memamerkan bagian kecil merah yang berlanjut dengan tema / warna tata letak.

Selesai dari bagian layanan dengan daftar sederhana, memisahkan dua daftar dengan pembagi 1px bagus kemudian menyelesaikannya dengan beberapa poin gaya panah berwarna merah.

Sejauh ini Anda harus memiliki sesuatu seperti ini

Bagian kontak

Mulai bagian ini dengan pernyataan besar yang bagus tepat di bawah pembagi akhir bagian terakhir.

Di sebelah kiri bagian ini tambahkan semua cara penting yang dapat dilakukan orang-orang. Nomor telepon, email dan alamat dll ...

Di sebelah kanan informasi kontak, buat mockup formulir sederhana. Pilih "Rectangle Tool" (U) lalu tarik persegi panjang putih sederhana seolah-olah itu adalah bidang formulir.

Beri label setiap bidang formulir di dalam persegi panjang.

Akhiri bagian dengan pembagi di bagian bawah dan satu memisahkan informasi kontak dan formulir. Terakhir beri label pada bagian formulir.

Terakhir

Gandakan tekstur kayu tajuk lalu seret ke bagian bawah kanvas. Tambahkan layer mask ke tekstur kayu belakang lalu seret gradien linier di atas bagian atas untuk memadukan tekstur dengan latar belakang hitam.

Terakhir, gandakan bar merah dan seret ini ke bagian paling bawah kanvas.

Akhiri area footer dengan informasi hak cipta Anda dan beberapa ikon sosial lainnya menggunakan set ikon "Just Social".

Kesimpulan

Terima kasih telah ikut serta dalam tutorial ini, jika Anda berhasil menyelesaikan tutorial ini, saya ingin melihat beberapa hasil Anda. Jangan ragu untuk mempostingnya di Halaman Penggemar Facebook kami atau menge-Tweetnya melalui twitter @photoshop_plus.

PENUTUP

Terimasih atas perhatiannya apabila ada salah kata saya mohon maaf yang sebesar besarnya.

Wassalamualaikum Wr.Wb