ফটোশপ দিয়েই তৈরি করি নিজের ওয়েব সাইটের হেডার।

পৃথিবীতে এমন কোন ওয়েব ডিজাইনার খুজে পাওয়া  বেশ কষ্টই হবে  যিনি ফটোশপ ব্যবহার করেন না। ওয়েব ডিজাইনারদের কাছে ফটোশপ ঠিক এতটাই জনপ্রিয়। যা হোক আমদের যে কেও নিজের জন্য হোক বা অন্যের জন্য হোক ওয়েব ডিজাইন করতে গিয়ে প্রথমেই যে বিষয়টি ভাবতে হয় তা হল ওয়েব সাইটের জন্য একটি আকর্ষনীয় হেডার তৈরি করা ।যা ওয়েবসাইটের প্রাথমিক পরিচয় বহন করে। এখন আমরা কিভাবে ফটোশপ ব্যবহার করে একটি আকর্ষনীয় হেডার তৈরি করা যায় তা দেখব।


প্রথমে  Adobe Photoshop CS4  ওপেন করে 1000 pixels by 175  pixels এর একটি নতুন ডকুমেন্ট তৈরি করতে হবে।  Background Contents  :   White     এবং Resolation :   72  রাখতে হবে।

new

এখন  একটি নতুন Layer নিয়ে  ground নাম দিতে হবে  এবং keyboard হতে U  press করে Rectangle Tool টি নির্বাচন করতে হবে। এরপর  সম্পূর্ণ ডকুমেন্ট জুড়ে একটি Rectangle তৈরি করতে হবে। তারপর ground   Layer টির উপর ডাবল ক্লিক করে Layer Style উইন্ডোতে প্রবেশ করে এখান থেকে Gradient Overlay তে টিক চিহ্ন দিয়ে Gradient লেখা কালার বক্সটিতে ক্লিক করে Gradient editor উইন্ডোতে প্রবেশ করতে হবে। Gradient editor এর বাম দিকের Color stop #333333 এবং ডান দিকের  Color stop #000000 নির্বাচন করি সব শেষে OK বাটনে ক্লিক করতে  হবে।

color-of-ground-copy

এখন  keyboard হতে   B  press করে  Brush Tool টি নির্বাচন করে এর Size:  900 pixels করে দিতে হবে। এরপর brush নামে একটা  Layer নিয়ে আমরা যে Rectangle  নিয়েছি তার ঠিক মাঝখানে একটা ক্লিক করতে হবে ।সবকিছু ঠিক থাকলে আমাদের কাজটি দেখতে নিচের ছবির মত হবে।
ractangle

এখন navigation নামে নতুন একটা Layer  নিয়ে সেখানে নিচের ছবির মত Rectangle  তৈরি করতে হবে।

navigation1

navigation Layer এর উপর ক্লিক করে Layer Style উইন্ডোতে প্রবেশ করে এখান থেকে  Blend Mode এর পাশের কালার বক্স  থেকে Color:  #000000  বা Black করে দিতে হবে। এরপর নিচের চিত্র অনুযায়ী Drop shadow ইফেক্টের জন্য সেটিংস নির্বাচন করে OK বাটনে ক্লিক করতে হবে।

nav-shadow

সব কিছু ঠিক থাকলে আমাদের করা কাজটি নিচের মত দেখাবে।

final-shadow

navigation Layer এ আমরা যে Rectangle  তৈরি  করেছিলাম glass নামে নতুন একটি layer নিয়ে তার অর্ধেক চওড়া এবং একই দৈর্ঘ্যের অপর একটি Rectangle  তৈরি  করতে হবে। এরপর  Glass Layer এর উপর ক্লিক করে Layer Style উইন্ডোতে প্রবেশ করে এখান থেকে Color Overlay তে color #ffffff বা White করে দিতে হবে এবং Opacity 25% করে দিতে হবে । এ অবস্হায় নিচের মত দেখাবে।

glass

Text নামে নতুন একটি Layer নিয়ে এখন  keyboard হতে   T  press করে  Type Tool টি নির্বাচন করে  আমাদের প্রয়োজন অনুযায়ী HOME,ABOUT US,CONTACT US,NEWS,SERVICE,PRODUCTS  ইত্যাদি প্রত্যেকটার মাঝে ২ টা করে Tab পরিমান Space  দিয়ে  F0nt :Times New Roman,  Font size: 22 Pixelএবং Font color: White  নির্বাচন করে লেখতে হবে। আমরা নিচের ছবির মত
দেখতে পাব।









text
এখন home নামে নতুন একটি Layer নিয়ে নিচের ছবির মত Rectangle  তৈরি  করতে হবে। এবং এর color:   #119a02  বা Green করে দিতে হবে। আমরা এখন নিচের ছবির মত দেখতে পাব।

home

এখন আমাদেরকে home  Layer টিকে সবার উপর থেকে নামিয়ে glass Layer এবং navegation Layer দুটির ঠিক মাঝখানে স্থাপন করতে হবে। এরপর home Layer টিতে Outer glow ইফেক্ট দেওয়ার জন্য home Layer টির উপর ডাবল ক্লিক করে Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।

outer-glow

inner glow ইফেক্ট দেওয়ার জন্য   Layer Style  উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।

inner-glow

এর পর OK বাটনে ক্লিক করলে  আমাদের কাজটি নিচের ছবির মত দেখাবে।

এ পর্যায়ে আমাদেরকে name নামে নতুন একটি layer  নিয়ে এখন  keyboard হতে   T  press করে  Type Tool টি নির্বাচন করে  Site name টি লেখতে হবে যেখানে F0nt: Engravers MT ,  Font size: 72 Pixelএবং Font color: #000000 বা Black  নির্বাচন করে দিতে হবে। এ পর্যায় শেষে আমরা আমাদের সাইটের হেডারটি নিচের মত দেখাবে।

name

এখন name Layer টিতে Bevel and Emboss  ইফেক্ট দেওয়ার জন্য আমাদেরকে name  Layer  টির উপর ডাবল ক্লিক করে Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।

bevel

এবার Inner glow ইফেক্ট দেওয়ার জন্য  Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।

name-inner-glow1

এবার Outer glow ইফেক্ট দেওয়ার জন্য  Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।

name-outer-glow1

সবকিছু ঠিক থাকলে হেডারটা নিচের মত হবে।

এখন আমরা আমাদের Site name কে আরও আকর্ষণীয় করার জন্য name নামে যে Layer টি নিয়েছিলাম তার উপর মাউসের রাইট বাটন ক্লিক করে Duplicate layer  এ ক্লিক করতে হবে। Duplicate layer উইন্ডোতে Duplicate layer  এর নাম shadow name দিতে হবে।   shadow name  Layer টি সিলেক্ট থাকা অবস্থায় Keyboard হতে  ctrl + T  প্রেস করতে হবে এবং menu ber এর নিচে থাকা Option ber এ নিচের ছবির মত সেটিংস্ নির্বাচন করে Enter  প্রেস করতে  হবে। Layer এর Opacity  40% করে দিতে হবে।

option

এরপর Filter মেনু থেকে  Blur এবং এরপর  Gaussian Blur এ ক্লিক করলে  Gaussian Blur  উইন্ডো Open হবে এখান থেকে Radius : 1.0 করে OK  বাটনে ক্লিক করতে হবে। এরপর হেডারটি দেখতে নিচের চিত্রের মত হবে।

blur

এখন আমরা welcome নামে নতুন একটা Layer নামে নতুন একটি layer  নিয়ে এখন  keyboard হতে   T  press করে  Type Tool টি নির্বাচন করে  নিচের ছবির মত  Welcome to our web site. বা অন্য যে কোন একটি তথ্য লেখতে হবে যেখানে F0nt: Footlight MT Light ,  Font size: 30 Pixel এবং Font color: #000000 বা Black  নির্বাচন করে দিতে হবে।

welcome

welcome Layer টিতে Bevel   ইফেক্ট দেওয়ার জন্য আমাদেরকে welcome Layer  টির উপর ডাবল ক্লিক করে Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।

welcome-effect

Gradient Overlay , Bevel and Emboss, Drop shadow, Inner Shadow, Outer Glow ইফেক্ট গুলো দেওয়ার জন্য বারতি কোন পরিবর্তন করতে হবে না Selection Button গুলাতে শুধু টিক চিহ্ন দিয়ে দিলেই সুন্দর ইফেক্ট পরবে। কারো ইচ্ছা হলে একটু পরিবর্তন করে দিলেও ভালই হবে। যা হোক সব শেষে আমরা আমাদের পূর্ণাঙ্গ হেডারটিকে নিচের মত দেখতে পাব।


Like the Post? Do share with your Friends.

IconIconIconFollow Me on Pinterest