এডোবি ফটোশপে ওয়েবপেজ ডিজাইন - Graphic School

Blog

এডোবি ফটোশপে ওয়েবপেজ ডিজাইন

হয়তো লক্ষ্য করেছেন ফ্রিল্যান্সিং সাইটে ফটোশপ ডিজাইনের অনেক কাজ চাওয়া হয় যেখানে উল্লেখ করা থাকে কোডিং প্রয়োজন নেই। ডিজাইনকে সরাসরি ফ্লাশ ওয়েব পেজ করা যায় বলেই এটা করা হয়। অবশ্য অনেকে এই ডিজাইনের ভিত্তিতে কোড লিখে নেন।

ক্যাটালিস্টে ফ্লাশ ওয়েব সাইট তৈরীর জন্য ফটোশপ বা ইলাস্ট্রেটরেরে ডিজাইন করার সময় কিছু নিয়ম মেনে ডিজাইন তৈরী করতে হয়। এখানে নিয়মগুলো  এবং ডিজাইন তৈরীর কিভাবে ক্যাটালিস্টে ইমপোর্ট করবেন উল্লেখ করা হচ্ছে।

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

ক্যাটালিষ্টে ডিজাইন ইমপোর্ট করা

আপনি কোন ফাইল ইমপোর্ট না করে ক্যাটালিস্টে ওয়েব সাইট তৈরী করতে পারেন। কিন্তু ক্যাটালিস্টের সত্যিকারের ক্ষমতা হচ্ছে ক্যাটালিস্ট ওপেন করার সময়ই ডিজাইন ওপেন করে তার ভিত্তিতে সাইট তৈরী করা।

  • ক্যাটালিস্ট ওপেন করুন।
  • ওয়েলকাম স্ক্রিনেCreate New Project from Design File থেকে ইলাস্ট্রেটরের অথবা ফটোশপ ডিজাইন কোনটি ব্যবহার করবেন সিলেক্ট করুন।
  • ডিজাইন ফাইলটি ব্রাউজ করুন।
  • ওয়েব পেজের মাপ এবং ব্যাকগ্রাউন্ড রং ঠিক করে দিন।
  • নন-ভিজিবল লেয়ারগুলো বাদ দিতে চাইলেImport non-visible layer অংশে টিক চিহ্ন ব্যবহার করুন। ইচ্ছে করলে এডভান্সড বাটন থেকে নির্দিষ্ট লেয়ার সিলেক্ট করতে পারেন বা বাদ দিতে পারেন।
  • বাটনে ক্লিক করুন।
    বেশি সংখ্যক বিটম্যাপ, ভেক্টর, পাথ ইত্যাদি অপটিমাইজ করার তথ্য দেখাতে পারে।
    কোন ফন্ট না থাকলে সে বিষয়ে শতর্কতা মেসেজ দেখাতে পারে।

ক্যাটালিষ্টে আপনার প্রথম কাজ ওয়েব সাইটের বিভিন্ন পেজ তৈরী। ঠিকভাবে ডিজাইন করলে বিভিন্ন পেজের সবকিছু সেখানেই থাকার কথা।

  • নতুন পেজ তৈরীর জন্যDuplicate State বাটনে ক্লিক করুন। Page2 নামে নতুন পেজ তৈরী হবে। যতগলি পেজ ব্যবহার করবেন ততগুলো পেজ তৈরী করে নিন। এখানে দুটি পেজ ব্যবহার করা হচ্ছে।
  • প্রতিটি পেজের জন্য ডাবল-ক্লি করে নাম পরিবর্তন করে নিন।
  • প্রথম পেজ সিলেক্ট করুন এবং লেয়ার প্যানেলে যে লেয়ারগুলো প্রথম পেজ থেকে বাদ দিতে চান তারজন্য চোখ চিহ্নিত আইকনে ক্লিক করে হাইড করুন।
  • প্রতিটি পেজের জন্য যাকিছু বাদ দেয়া প্রয়োজন সেগুলো এই পদ্ধতিতে বাদ দিন।

বাটন তৈরী

বাটনের জন্য যে ইমেজ/টেক্সট ইত্যাদি তৈরী করেছেন তাকে বাটন হিসেবে ব্যবহার করা পরবর্তী কাজ।

  • সিলেক্ট টুল ব্যবহার করে বাটনের ইমেজ এবং টেক্সট সিলেক্ট করুন। লেয়ার প্যানেল থেকে অথবা মুল ডিজাইনে সিলেক্ট করার কাজ করা যাবে।
  • Convert Artwork to Component অংশেChoose Component থেকে বাটন সিলেক্ট করুন। লেয়ার প্যানেলে বাটন নামে আরেকটি অবজেক্ট পাওয়া যাবে।
  • ডাবল ক্লিক করে বাটনের নাম পরিবর্তন করুন।

বাটনের স্টেট ঠিক করা

একটি বাটনের ৪টি ষ্টেট থাকে। সাধারন (Up), ওপরে মাউস আনার সময় (Over), মাউস চেপে ধরলে (Down) এবং বাটনটি ইন-একটিভ থাকলে (Disable)। ৪টি ষ্টেটের জন্য চার ধরনের ইমেজ ব্যবহার করতে পারেন।

বাটনের ষ্টেট পরিবর্তনের জন্য যা করবেন;

  • বাটন সিলেক্ট করুন এবংModify – Edit Component কমান্ড সিলেক্ট করুন।
  • যে ষ্টেটের পরিবর্তন করবেন সেটি ক্লিক করুন।
  • বাটনের যে অবস্থা ব্যবহার করতে চান পরিবর্তন করে সেই অবস্থা আনুন।
    Filter controlব্যবহার করে ড্রপস্যাডো বা অন্যান্য ফিল্টার ব্যবহার করতে পারেন। অথবা বিভিন্ন ষ্টেটের জন্য ভিন্ন ভিন্ন সাইজ ব্যবহার করতে পারেন।
  • কাজ শেষেModify – Exit Editing কমান্ড দিন।

বিভিন্ন ষ্টেটের জন্য নতুন ইমেজ ব্যবহার

কোন বিশেষ ষ্টেটের জন্য অন্য ইমেজ ইমপোর্ট করে ব্যবহার করতে পারেন।

  • বাটনটি সিলেক্ট করেModify – Edit Component কমান্ড দিন।
  • যে ষ্টেটের পরিবর্তন করবেন সেটি সিলেক্ট করুন।
  • বাটনের যে অংশ বাদ দিতে চান সেটি মুছে দিন।
  • File – Import – Image কমান্ড দিন।
  • যে ইমেজ ব্যবহার করবেন সেটি সিলেক্ট করে ইমপোর্ট করুন।
  • প্লে বাটনে ক্লিক করে বাটনটি দেখে নিন।
    File – Run Project কমান্ড দিয়ে প্রোজেক্ট পরীক্ষা করতে পারেন।
  • কাজ শেষেModify – Exit Editing কমান্ড দিন।

বাটনের ইন্টারএকটিভি যোগ করা

উদাহরনের প্রোজেক্টে About Us বাটণে ক্লিক করলে About পেজে যাওয়ার কথা। এজন্য যা করবেনঃ

  • About Us বাটনটি সিলেক্ট করুন।
  • ইন্টারএকশন প্যানেলেAdd Interaction বাটন ক্লিক করুন। একটি প্যানেল ওপেন হবে।
  • বাটনটি কখন কাজ করবে সিলেক্ট করুন। সবচেয়ে সাধারন হচ্ছেOnClick যেখানে বাটনের ওপর ক্লিক করলে কাজ হবে। অন্যান্য সময়ও বকাজ করার ব্যবস্থা রাখতে পারেন।
  • ড্রপ ডাউন লিষ্ট থেকে কি কাজ করবে সেটা সিলেক্ট করুন। একই ক্যাটালিষ্ট প্রোজেক্টে এক পেজ থেকে অন্য পেজে পাওয়ার জন্যPlay Transition to state সিলেক্ট করুন।
    ট্রানজিশন ব্যবহার পদ্ধতি সম্পর্কে পরে জানানো হবে।
  • Choose State থেকে কোন পেজে যাবে সেই পেজ সিলেক্ট করুন। ব্যবহার করলে সেই পেজের এড্রেস ব্যবহার করুন।
    সাধারনত কোন বাটনের ওপর মাউস পয়েন্টার আনলে আঙুলের ছবি দেখা যায়। Appearance প্যানেল ওপেন করে Hand cursor ক্লিক করুন। প্রতিটি বাটনের জন্য এই কাজ পৃথকভাবে করে নিতে হবে।

এই পদ্ধতিতে Home এবং About Us দুটি বাটনের জন্য এমন ব্যবস্থা করুন যেন Home বাটনে ক্লিক করলে Home পেজে যায় এবং About Us বাটনে ক্লিক করলে About পেজে যায়।

আপনার ওয়েব পেজ তৈরী। মেনু থেকে File – Run Project কমান্ড দিন। পেজটি ব্রাউজারে ওপন হবে।

File – Publisg to SWF/AIR  কমান্ড দিয়ে সার্ভারে আপলোড করার জন্য অথবা ডেস্কটপে ব্যবহারযোগ্য ভার্শন তৈরী করা যাবে।

আশা করি আমার এই ব্লগ থেকে এডোবি ফটোশপে ওয়েবপেজ তৈরি করার পদ্ধতি সম্পর্কে ভালভাবে জানতে পেরেছেন।

ব্লগটি পড়ার জন্য সবাইকে ধন্যবাদ জানিয়ে আজকের মতো এখানেই শেষ করছি। আসসালামু আলাইকুম।

 

লিখেছেন

মোঃ রিয়াদ আহম্মেদ

Facebook Comment