Reezluv.com-Blog,Blogging,BloggerBlogger, Blogging, Blog lah!

Tutorial:Design Fresh Web Layout Dengan Photoshop
Salam semua kepada pembaca setia yang tak jemu-jemu baca blog yang tak seberapa ni..hehe..Actually bukan taknak update blog ni, tapi agak penat dengan kerja di ofis, so rasa malas plak nak update.Ok, pada post kali ini aku akan tunjukkan step by step tutorial Design Fresh Web Layout Dengan Photoshop. Dalam tutorial ini aku hanya tunjukkan bagaimana korang boleh create simple and professional web layout dengan menggunakan software Adobe Photoshop. Cara nak transfer ke Xhtml tu korang pikir sendiri lah ye..slice lah sehabis baik dan cantikkan sekali dengan CSS..hehe..

Tutorial ini dibahagikan kepada beberapa peringkat iaitu Navigation,Header,Content,Footer.

Navigation
1.Perkara pertama yang harus dibuat adalah create satu file baru seperti gambarajah iaitu kita akan create file yang bersaiz 1200x1000px bagi saiz web layout ini.

2.Create guide untuk memudahkan kerja-kerja kita nanti dan supaya anda mudah meletakkan setiap elemen-elemen seperti disebutkan di atas tadi.
3.Klik View-New Guide dan hasilkan guide iaitu line biru yang dapat kita lihat seperti dalam gambarajah

4.Hasilkan kesemua guide seperti dalam gambarajah tersebut.

5.Create satu horizontal navigation bar ke dalam kotak yang telah kita create dengan menggunakan guide tersebut.Saya menggunakan Blending Properties-Gradient Overlay.Masukkan warna yang anda inginkan. Saya menggunakan warna seperti dalam gambarajah.

6.Klik text tools dan create text seperti di dalam rajah yang disediakan. Serta masukkan Blending Option Properties seperti berikut





7.Untuk create simple logo, klik pada Custom Shape Tool dan pilih custom shape seperti gambarajah.Masukkan teks di dalamnya seperti gambarajah serta masukkan effect Blending Properties seperti berikut

Header
1.Create satu lagi guide dan lukiskan satu lagi Horizontal Marquee Tool dan masukkan Blending Properties seperti gambarajah.


2.Kemudian kita akan align teks tersebut dengan menggunakan Custom Shape. Pilih Custom Shape dan pilih rectangle shape.Enable kan Path pada Custom shape tersebut seperti gambarajah dan lukiskannya berbentuk segiempat dibahagian ruangan hijau tersebut.

3.Pilih text tool untuk masukkan teks. Klik sekali didalam kotak tersebut dan anda sudah boleh mula menulis content yang anda inginkan.

4.Langkah seterusnya adalah memasukkan image yang menarik dibahagian header.
5.Saya masukkan image Kusyen RSS yang saya download di internet.Terpulang anda ingin gunakan image yang mana sekalipun asalkan bersesuaian.Letakkannya disebelah teks tersebut seperti dalam gambarajah.

6.Seterusnya saya akan create button untuk user click di header seperti gambarajah.
7.Pilih Custom Shape dan pilih Rounded Rectangle Shape. Tetapkan radius iaitu 30px sahaja.Lukiskannya dan tetapkan Blending Properties seperti gambarajah.

8.Akhir sekali masukkan teks serta custom shape seperti gambarajah.

Content
1.Content akan dimasukkan diruangan putih
2.Pergi ke layer teks pada header tadi, copy layer tersebut dengan menekan Ctrl+J atau Hold Mouse dan Drag, atau Layer-Duplicate Layer.
3.Masukkan juga icon-icon comel seperti dalam gambarajah.Anda bebas memilih jenis icon yang anda ingin masukkan.Align kan seperti gambarajah dengan menggunakan New Guide.

Footer
1.Copy semula layer navigation tadi serta Ctrl+T untuk resize objek tersebut kepada lebih kecil di footer.Pada Blending Properties set kan Gradient Overlay seperti gambarajah.

2.Anda sudah boleh save kan design anda tadi Shift+Ctrl+S untuk save atau File Save-As.

Download Psd

Related posts:

1. Tutorial : Design Ebook Cover Menawan dengan Photoshop
2. Tutorial: Menghasilkan Banner Design
3. Tutorial: Menghasilkan Order Button Menarik
4. Tempat Terbaik Photoshop Tutorials
5. Update Design Service Mulai 1 Oktober 2009