ফটোশপ দিয়েই তৈরি করি নিজের ওয়েব সাইটের হেডার।- (১ম অংশ)

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

 complite-header

 

প্রথমে  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   

 

অসীম কুমার

লেখক ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়(DUET)এ EEE তে লেখাপড়া করেন। তিনি টিউটোরিয়ালবিডি এবং টিউটোহোস্টের জন্য ইলেক্ট্রনিক্স, ওয়েব ডিজাইন ও ডেভলপমেন্ট এবং মাইক্রোকন্ট্রোলারের উপর টিউটরিয়াল এবং ই-বুক লিখেছেন।এছাড়া তিনি বিজ্ঞান প্রযুক্তি ডট কমে নিয়মিত লিখে থাকেন। তিনি তার প্রতিটা টিউটোরিয়াল এবং ব্লগে সৃজনশীলতাকে গুরুত্ব দিয়ে থাকেন।তার ভাষায় "আসুন আমরা আমাদের দেশীয় প্রযুক্তিকে সমৃদ্ধ করার চেষ্টা করি, উৎসাহিত করি সকল ভাল পদক্ষেপ এবং প্রচেষ্টাকে।উজ্জ্বল আগামি আমাদেরকে হাতছানি দিচ্ছে"।তাকে ফেসবুকে বন্ধু হিসেবে যোগ করতে পারেন। 

Tags:


ফেসবুকের মাধ্যমে মন্তব্য লিখুন

  2 comments for “ফটোশপ দিয়েই তৈরি করি নিজের ওয়েব সাইটের হেডার।- (১ম অংশ)

  1. ashim
    November 30, 2009 at 12:28 pm

    অনেক দিন হল Adobe Photoshop CS4 ব্যবহার করতেছি। তাই আসলে এটা সঠিক ভাবে বলতে পারব না । Adobe Photoshop CS দিয়ে একবার চেষ্টা করে দেখতে পারেন। তবে এটা নিশ্চিত যে Adobe Photoshop CS3 তে হবে।

    ধন্যবাদ।

  2. November 29, 2009 at 9:07 pm

    Adobe Photoshop CS, দিয়ে কি হবে?

Leave a Reply