BLC TELKOM KLATEN - Be Creative,Innovative and Share Your Knowledge to Others

Thursday, February 25, 2016

Presentasi Cara Mendesign Web Dan Membuat Gallery Menggunakan Php

Design Dengan Photoshop dan Cara Membuat Gallery Php

Hari ini saya dan Yoga Presentasi Tentang Mendesign Web Menggunakan Photoshop dan Cara Membuat Gallery Melalui Php dan Mysql 

Membuat Backgroun Layout

Buat dokumen baru (Ctrl + N) dengan dimensi 1200 x 1.245 dengan background putih #ffffff.
Klik kanan pada layer background lalu pilih menu “Layer From Background”, berikan nama “Backgorund” pada layer, kemudian tambahkan “Gradient Overlay” ikuti pengaturan seperti gambar di bawah ini.
Tutorial Design Web Step 1
Tutorial Design Web Step 1
Select “Elliptical Marquee Tool” (M) kemudian tarik keluar elips besar ke atas kanvas.
Tutorial Desaign Web Photoshop 2
Buat layer baru di atas layer background kemudian beri nama “Background Jazz”. Sekarang pilih “Gradient Tool” dengan pengaturan berikut berikut.
Tutorial Design Web Photoshop 3
Tutorial Design Web Photoshop 3
Tarik gradien sedikit saja dari bagian atas elips ke bagian dalam elips / oval, kita tidak ingin mengisi elips keseluruhan.
Tutorial Design Web Photoshop 4
Tutorial Design Web Photoshop 4
Deselect the ellipse (Ctrl + D) maka anda akan mendapatkan hasil seperti berikut
Tutorial Design Web Photoshop 5
Tutorial Design Web Photoshop 5
Duplikat layer tersebut, putar serta menyesuaikan opacity dari setiap lapisan, atur posisi secara acak duplikat layer tersebut diatas kanvas. Saya hanya menduplikat layer ini sebanyak 3 kali.
Tutorial Design Web Photoshop 6
Tutorial Design Web Photoshop 6

Membuat Header

Di sisi kiri kanvas tambahkan judul portofolio dan slogan menggunakan “Type Tool” (T). Font yang digunakan disebut “Vijaya” dan dapat mendownload font vijaya disini
Tutorial Design Web Photoshop 7
Tutorial Design Web Photoshop 7
Select pada bagian judul layer kemudian berikan layer styles seperti dibawah ini.
Tutorial Design Web Photoshop 8
Tutorial Design Web Photoshop 8
Tutorial Design Web Photoshop 9
Tutorial Design Web Photoshop 9
Dan hasilnya kurang lebih seperti berikut
Tutorial Web Design Photoshop 10
Tutorial Web Design Photoshop 10
Pada sisi kanan judul dan slogan tambahkan navigasi tekstual sederhana dengan menggunakan font yang sama.
Tutorial Web design Photoshop 11
Tutorial Web design Photoshop 11
Tutorial Web design Photoshop 13
Tutorial Web design Photoshop 12

Foto Foto Saat Presentasi :






 
Share:

1 comment:

  1. bagus presentasinya lanjutkan lagi dengan materi yang bagus :)

    ReplyDelete

LUPA JAM DAN TANGGAL ???

ivansys66.blogspot.com

ADD MY FACEBOOK

Total Pageviews

About us

Electro
Ivansys. Powered by Blogger.

Like This Theme