Showing posts with label Graphics Design. Show all posts
Showing posts with label Graphics Design. Show all posts

Tuesday, February 14, 2017

Photoshop Tutorial - Part 001

Photoshop Tutorial - Photoshop Tools - Part 001




নিজেকে সৃষ্টিশীল কাজের সঙ্গে সম্পৃক্ত করতে এবং আপনার সৃজনশীলতাকে কাজে লাগিয়ে নিজেরে ক্যারিয়ার গড়তে বেছে নিতে পারেন গ্রাফিক্স ডিজাইন। দিন দিন বেড়েই চলেছে এর চাহিদা।Learn Photoshop Free

প্রশ্ন হচ্ছে, ফটোশপ কেন শিখবো ?


Photoshop learn the most popular because it is a design software. Word processing or database software or programming is not any alternative for each saw. Photo editing or image editing in Photoshop, but my eyes were the alternative. An artist or designer or multimedia computer with a cable or amateur aamkiye present, as well as other programming does not use Photoshop every day I've never seen one like this. If you are a computer user, I believe it opened in Photoshop seen at least a few times, but not if you've at least heard of.

ফটোশপ শিখবো কারণ এটি সর্বাধিক জনপ্রিয় একটি ডিজাইন সফটওয়ার। ওয়ার্ড প্রোসেসিং বা ডাটাবেজ বা প্রোগ্রামিং সফটওয়ারের ক্ষেত্রে প্রতিটির কোন না কোন বিকল্প দেখেছি। কিন্তু ফটো এডিটিং বা ইমেজ এডিটিং এর ক্ষেত্রে Photoshop এর বিকল্প আমার চোখে পড়েনি। একজন কম্পিউটার আর্টিস্ট বা ডিজাইনার বা মাল্টিমিডিয়া প্রেজেন্টর বা একজন কেবল সৌখিন অাঁকিয়ে, অন্যান্য  প্রোগ্রামিং এর পাশাপাশি প্রতিদিন Photoshop ব্যবহার করেন না এরকম একজনকেও দেখিনি। আপনি যদি কম্পিউটার ব্যবহারকারী হয়ে থাকেন তাহলে আমার বিশ্বাস ফটোশপ অন্তত কয়েকবার খুলে দেখেছেন, যদি তা নাও করে থাকেন অন্তত নাম শুনেছেন। 

দ্বিতীয়ত অন্যান্য সফটওয়ারের মতো প্রোগ্রামটি পরিপূর্ণ রপ্ত করার পরেই মজাটি পাওয়া যাবে এবং কাজ করা যাবে- এমন নয়, একবার শুরু করে দেখুন Photoshop-এ প্রতিটি মুহূর্তই উপভোগ্য এবং এটি দেখার সময় থেকে শুরু করে শেখার পর প্রোফেশনাল কাজ করার ক্ষেত্রেও প্রযোজ্য। আর একটি মজার ব্যাপার হলো গত কয়েক বছর ধরে ফটোশপের ক্ষেত্রে আমি নিয়তই নতুন জিনিস আবিষ্কার করছি এবং প্রতিটি মুহূর্তই উপভোগ করছি।

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

যারা ফটোশপ করেছেন তাদের অনেকেই ফটোশপের সব অপশন জানেন না, দরকারও নেই, তবে যেটুকু জানেন সেটুকু ভালোভাবে জানতে হবে।

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

And the last thing - Photoshop software is that you can enjoy while learning each moment of time form starting to ending.This may be the source of your income.
আর শেষ কথা হলো - Photoshop এমন একটি সফটওয়ার যেটি শেখার সময় থেকে শুরু করে কাজের সময় পর্যন্ত প্রতিটি মুহূর্ত হবে উপভোগ্য; আর এটিই হতে পারে আপনার আয়ের উৎস।

ও হ্যাঁ - ফটোশপই পেশা, এমন অনেককেই আমি চিনি এবং জানি যারা ফটোশপের সবগুলো অপশনের সাথে পরিচিত নন এবং দরকারও নাই। তবে যেটুকু জানেন সেটুকু ভালোভাবেই জানেন অর্থাৎ Details জানেন।

তো চলুন Photoshop এর বিস্তারিত জানার আগে প্রাথমিক বিষয়গুলো নিয়ে শুরু করা যাক। এখন আমরা ফটোশপের ওয়ার্ক এরিয়া এবং ফটোশপের ফাইল খোলার পদ্ধতি আলোচনা করবো।

Photoshop শুরু করা
অন্যান্য এ্যাপ্লিকেশন শুরুর নিয়মেই ফটোশপ শুরু করা যায়। ডেস্কটপে থাকা অবস্থায় নিচের কমান্ড দিন।



In          In Windows (Windows এর ক্ষেত্রে)
            Steps
1.         1.     Click on Start (Button)> All Progrms> Adobe Master Collection CC / CS6 / CS5 /> Adobe Photoshop CS- Photoshop CC / CS6 / CS5. Photoshop will begin...

1.       Start>All Progrms>Adobe Master Collection CC/CS6/CS5/>Adobe Photoshop CS- Photoshop CC/CS6/CS5 এর ক্ষেত্রে কমান্ড দিন। ফটোশপ শুরু হবে।

In Mac OS (Mac OS এর ক্ষেত্রে)
Steps
1. Double-click on the folder Adobe Photoshop and again  Double-click on  Adobe Photoshop CC / CS6 / CS5 / 7.0) icon. Photoshop will begin..

1.      ডাবল ক্লিক করে Adobe Photoshop ফোল্ডার খুলুন এবং Adobe Photoshop CC/CS6/ CS5/7.0) আইকনের উপর ডাবল ক্লিক করুন। ফটোশপ শুরু হবে।
.
  
ফটোশপ শুরু হওয়া মাত্র মেনুবার, টুল বক্স, টুল অপশনস বার এবং ৪টি প্যালেট ভেসে উঠবে। লক্ষ্য করুন, কোন ফাঁকা ফাইল বা ইমেজ Open হবে না। ফটোশপে স্বয়ংক্রিয়ভাবে কোন ফাইল খোলে না, যতক্ষণ পর্যন্তু না কমান্ড দিয়ে ফাইল খোলা হয়।

Tool Box এর ব্যবহার
টুল বক্সে Selection টুল, Painting টুল, Editing টুল, Foreground and Background কালারসিলেকশন বক্স এবং Viewing টুল থাকে। ধীরে ধীরে আমরা সমস্ত টুল নিয়ে প্রোজেক্টের মাধ্যমে    বিস্তারিত আলোচনা করবো। আপাতত এই অধ্যায়ে আমরা বহুল ব্যবহৃত কিছু টুল এবং মেনু নিয়ে সামান্য আলোচনা করছি। এই প্রাথমিক আলোচনা পরবর্তী আলোচনা বুঝতে এবং ব্যাখ্যা করতে সহজ হবে
ফাইল খোলা মাত্র বামদিকে লম্বা করে ১ কলামে টুলটি সাজানো থাকে। লক্ষ্য  করুন টুলের একদম উপরে ডানদিকে মুখ করা ছোট দুইটি ত্রিভূজ বাটন আছে। এটি সুইচের মত কাজ করে অর্থাৎ এটিতে ক্লিক করলে টুলবার ২টি কলামে প্রদর্শিত হয় আবার ক্লিক করলে টুলবার ১টি কলামে লম্বা  হয়ে প্রদর্শিত হয়। তীর দুটিতে ক্লিক করে টুলবারকে ২ কলামে প্রদর্শন করে নিন। এতে আলোচনা বুঝতে সুবিধা হবে।
                                  Photoshop Tool Box
Photoshop CC
Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।



Next Part 002    

                   Part 002  Part 003  Part 004   Part 005   Part 006 Part 007   Part 008   Part 009
                   Part 010 Part 011  Part 012 Part 013 Part 014  Part 015  Part 016   Part 017    Part 018
                   Part 019  Part020    Part021   Part 022   Part 023  Part 024 Part 025    Part 026
                   Part 027  Part 028 


Add caption



এক নজরে এডোবি ফটোশপ CC (স্পেশাল ইফেক্টসহ)
লেখক- বাপ্পি আশরাফ
প্রকাশক- জ্ঞানকোষ প্রকাশনী
পৃষ্ঠাসংখ্যা- বড় সাইজে ৬৩২ পৃষ্ঠা
বৈশিষ্ট- সম্পূর্ণ ব্যবহারিক ও প্রোজেক্ট ভিত্তিক এবং নিজে নিজে শেখার সুবিধা।
মূল্য- সিডি সহ ৪৫০ টাকা মাত্র
যোগাযোগ: 02-7118443, 8623251 বা 58616571 বা 01711271716 (Bappi Ashraf), 01711271718 (Syed Hasan), 01941494063 (Kashem Vai) বা
বা bappibd001@yahoo.com

এডোবি ফটোশপ সি সি
স্পেশাল ইফেক্টসহ
লেখক: বাপ্পি আশরাফ
কম্পিউটার গ্রাফিক্স এর ক্ষেত্রে ইমেজ বা ছবি এডিটিং করার জন্য বিশ্বের সবচেয়ে জনপ্রিয় সফটওয়্যারটির নাম এডোবি ফটোশপ। আর বর্তমানে ফটোশপের সর্বশেষ ভার্সনের নাম ফটোশপ সি সি । আর ফটোশপের উপর চমৎকার ব্যবহারিক একটি বই লিখেছেন জনপ্রিয় লেখক বাপ্পি আশরাফ। বইটি প্রকাশ করেছে জ্ঞানকোষ প্রকাশনী। বাপ্পি আশরাফ যে নিজস্ব একটি ভঙ্গিতে প্রোজেক্টের মাধ্যমে লিখে থাকেন, আলোচ্য বইটিতেও সেই স্বভাবসুলভ ভঙ্গিটি রয়েছে।
এক কথায় নবীন বা প্রফেশনাল যে কেউ বইটি ব্যবহার করলে বলতে হবে ‘চমৎকার’। বাপ্পি আশরাফ ফটোশপের এমন কিছু নতুন ফিল্টার দেখিয়েছেন যা অনেক প্রফেশনালকেও অবাক করবে। এরপর লেখক লিখেছেন “আমি ফটোশপে নিয়তই নতুন কিছু শিখে থাকি”। বইটি নবীন ব্যবহারকারী বা প্রফেশনাল- সবার জন্যই উপকারে আসবে। বড় সাইজের ৬৩২ পৃষ্ঠার বইটির দাম সিডিসহ মাত্র ৪৫০ টাকা। জ্ঞানকোষ প্রকাশনী ৩৮/২-ক বাংলা বাজারসহ বাংলাদেশ ও কোলকাতার সকল সম্ভ্রান্ত বইয়ের দোকানে বইটি পাওয়া যাচ্ছে। বইটির চমৎকার প্রচ্ছদ তৈরি করেছেন- বাপ্পি আশরাফ নিজেই।
লেখকের সাথে যোগাযোগ bappibd001@yahoo.com বা 0258616571, 01716171716
Public Comment 
With the motto of "teach yourself" Bangla graphics design book or Bangla Photoshop book named Adobe Photoshop CC Including Version CS1, CS2, CS3, CS4, CS5, CS6 has been written by the prominent Bangla computer books writer Bappi Ashraf and published by Gyankosh Prokashani which is a good, pioneer and leading book to learn Photoshop by understanding graphics and its tools in Bangla language in the Bangladeshi computer books market.
 
Frankly speaking, with lots of practice projects and systematic description of usage of important tools in Adobe Photoshop, such book can provide a lot of useful staffs to learn graphics design and the Adobe Photoshop software in Bangla language.

Basically, it is one of the pioneer books on Graphics design in Bangla language. So, if you want to learn Adobe Photoshop or graphics design following Bangla meaning, you should read the whole review of this Bangla graphics design book. Then you may decide to collect or purchase or check out the hard copy from a standard book library near by your location.

Note: We've a hard-copy of the book named ' Adobe Photoshop CC Including Version CS1, CS2, ...CD6 to make the book review on it. The hard-copy edition is '10th' Edition(February-2015)'. We'll make the review basis on this hard-copy edition. Future edition or upgrade version may be available on the market.

পরিবেশক/প্রাপ্তিস্থান
ঢাকা - বাংলাবাজার       - * সিসটেক পাবলিকেশনস্, * আজিজিয়া লাইব্রেরী, * সাহিত্য কোষ, *কাজী ট্রেডার্স                           
ঢাকা - নিউমার্কেট - * বুক ভিউ, * ঢাকা বুক কর্পোরেশন, *বাংলাদেশ লাইব্রেরী
ঢাকা -  ষ্টেডিয়াম মার্কেট - * অনুপম জ্ঞানভান্ডার,
ঢাকা - নীলক্ষেতঃ * ডলফিন* ফরিদা কর্পোরেশন,* রানা বুক সেন্টার, * সাকিব বুক সেন্টার,* মডার্ন বুক সেন্টার, *ফাহাদ বুকস্, *মুক্তা এন্টারপ্রাইজ, *ফারহান বুকস্, *হক লাইব্রেরী, পপুলার বুকস্,
ঢাকাঃ ফার্মগেট, * তোফাজ্জল বুক হাউস, * ছাওয়াল বুকস্, * সেলিম বুকস্,  * এম, জামান এন্টারপ্রাইজ, * আদর্শ কলেজ লাইব্রেরী, * বুক ম্যান, * ষ্টুডেন্ট লাইব্রেরী, * খান বুক সেন্টার   
খুলনাঃ * সোহাগ বুক সেন্টার, * নূর লাইব্রেরী, * সালেহিয়া লাইব্রেরী * আজিজিয়া লাইব্রেরী
রাজশাহীঃ  * বুক ওয়ার্ল্ড, * বুক মার্ট * আলীগড় লাইব্রেরী * সংলাপ, * রহমান বুক, * সূচীপত্র, * আব্দুলস্নাহ্ এন্ড ব্রাদার্স
চট্টগ্রামঃ * বুক ম্যান, নিউমার্কেট, * বুক এম্পোরিয়াম, আগ্রাবাদ, , * বুক লাইব্রেরী, আন্দরকিলা, * সিদ্দিকিয়া লাইব্রেরী, আন্দরকিলা,* বুক সেন্টার, আন্দরকিলা, * ন্যাশনাল বুক, আন্দরকিলা,* প্রাইম  বুক, আন্দরকিলা, *ফ্রেন্ডস  বুক, আন্দরকিলা, * প্রতিভা লাইব্রেরী, আন্দরকিলা, *আর আলম বুকস, আন্দরকিলা,*গুলিস্থান লাইবেরী, বিপনী বিতান নিউমার্কেট, *অমর বই ঘর, নূপুর মার্কেট, ষ্টেশন রোড, *নিউ বুক ল্যান্ড, চকবাজার *কারেন্ট বুক স্টোর, জলসা মার্কেট
কুষ্টিয়াঃ * বইমেলা, এন, এস, রোড
চুয়াডাঙ্গাঃ * পুথিঘর লাইব্রেরী, বড় বাজার
যশোরঃ * জনতা লাইব্রেরী, দড়াটানা
কুমিল্লাঃ * শাহীন লাইব্রেরী  
বরিশাল* বুকভিলা           
সিলেটঃ * বন্ধু লাইব্রেরী, * নিউ নেশন লাইব্রেরী, * অক্সফোর্ড লাইব্রেরী, * পপি লাইব্রেরী             
বগুড়াঃ * কোরান হাদীস মঞ্জিল (উত্তর বঙ্গের একমাত্র পরিবেশক)                                                                              


রংপুরঃ * বিপণী বিচিত্রা, * সাহিত্য ভান্ডার, * টাউন ষ্টোর লাইব্রেরী


জ্ঞানকোষ প্রকাশনী

৩৮/২-ক, বাংলাবাজার (২য় তলা), ঢাকা।

       ফোনঃ ৭১১৮৪৪৩, ৮১১২৪৪১, ৮৬২৩২৫১.         

                                                     

কলকাতায় পরিবেশক/প্রাপ্তিস্থান

রিতা ইন্টারন্যাশনাল

৩৬, পি.এন. ব্যানার্জি রোড, কলকাতা

ফোনঃ ২৫১৩৮৩৫৯, ৯৮৩০৪৩৯৬৭৯, +৯১৯৮৩০৪৩৯৬৭৯

Saturday, April 16, 2016

Total Graphics Design (Photoshop Part_40)


Photoshop WEB Mockup/Template
প্রথমে চলুন আমরা কি ধরণের Web Template তৈরী করবো সেটি দেখে নেওয়া যাক।
Step
1.  যে কোন একটি Web_Template File>Open কমান্ড দিয়ে  ফাইলটি খুলে দেখে নিন।  (প্রযোজনে আমাদের ব্যবহৃত ছবি টি ডাউনলোড করে নিতে পারেন।)। 


2.   দেখা শেষে ফাইলটি Close করুন।
এখন আমরা সম্পূর্ণ নতুন একাটি ফাইল নিয়ে ধীরে ধীরে Template টি তৈরী করবো।
চলুন শুরু করা যাক
1.   আমরা কি ধরণের ফাইল তৈরী করবো প্রথমে এর নকশাটি দেখে নেওয়া যাক।


এখন একটি নতুন ফাইল নিয়ে কাজটি শুরু করতে হবে। আমরা  960 px width এর এবং 1200 px hight এর Background Color = Transparent , Resulation = 72 এবং Color Mode = RGB 8 bit এর একটি ফাইল নিয়ে কাজ করবো।  মনে রাখবেন Professional web site এর width হয় 960 থেকে 980 px. আপনি যদি বেশী নিয়ে থাকেন তবে গাইড দিয়ে পরে ইমেজের বাড়তি অংশ ক্রপ করে দিন।
2.   File>New কমান্ড দিয়ে নিচের মত সেটিং করুন।


3.  এখন আমরা রুলার সেটিং করবো। মেনু থেকে Edit>Preferences>Unit & Rulers কমান্ড দিন। এবং ডায়ালগ বক্স আসলে Unit অপশনের Rulers অপশনের ড্রপ ডাউন থেকে Plxels সিলেক্ট করুন এবং OK করুন। 


4.   Rulers দেখা না গেলে View>Rulers (Ctrl+R) কমান্ড দিন।
5.   ২টি Vertical ও ২টি Horizontal গাইড রম্নলারে থেকে ড্রাগ করে ডকোমেন্টর চার দিকে বসিয়ে দিন।


6.  এখন Status Bar , Header , Menu , Content ইত্যাদি অংশের জন্য আলাদা আলাদা গাইড সেটিং করে নেব। উপর থেকে 50 px দূরত্বে একটি Horizontal গাইড সেটিং করুন কারণ আমাদের Status Bar এর জন্য 50px পরিমান hight দরকার পড়বে।


7.   এখন 250px Vertical পজিশনে আরেকটি গাইড নিন। এখানে Header নির্ধারিত হলো। কাজেই এটির hight হবে 200px কারণ শুরম্ন হবে 51px থেকে অর্থ্যাৎ Status Bar এর পর থেকে।


8.   এভাবে 290px, 1100px 1150px পজিশনে আরও ৩টি গাইড নিন। এবং 48 px হরাইজেন্টাল পজিশনে একাটি ভার্টিক্যাল গাইড নিন। সেন্টার নির্ধারনের জন্য।


Status Bar তৈরী
আমরা ডিজাইন উপর থেকে শুরু করবো । মনে রাখতে হবে PSD ফাইলকে ঠিকমত সাজিয়ে রাখতে হবে যাতে পরবর্তীতে HTML বা CSS  কোডিং করতে সুবিধা হয়।  Status Bar তৈরীর জন্য আমরা আগেই 50 px পজিশনে একটি গাইড তৈরী করে রেখেছি।
এই অংশে Status Bar তৈরী করবো আমরা Status Bar নামে একটি লেয়ার গ্রুপ (layer Group)  তৈরী করে তারমধ্যে Status Bar এর সমসত্ম অবজেক্ট রাখবো।
1.   Layer Palete থেকে New layer Group বাটনে ক্লিক করে নাম দিন Status Bar.


2.   এই গ্রপের মধ্যে Box নামে হালকা গ্রে কালার ( #f8f8f8) সিলেক্ট করে  Rectangle টুলের মধ্যে Status Bar এলাকাতে 50 px hight ও সমসত্ম width জুড়ে একটি বক্স আকুন। নতুন লেয়ারের নাম দিন Box.


3.  এখন Border নামে আরও একটি লেয়ার নিন। এখন একটি Border তৈরী করবো। এটি বারের নিচের দিকে বসবে। Single Row Marquee টুল সিলেক্ট করে  সেপের নিচের দিকে ক্লিক করুন এবং #959595 কালার দিয়ে বর্ডারটি পূর্ণ হবে।


4.   Shadow নামে আরও একটি লেয়ার নিন। আনুমানিক 15 থেকে 20 px পরিমান Rectangle Marquee টুল দিয়ে সিলেশন তৈরী করুন এবং Gradient টুল সিলেক্ট করে Black to transpant গ্রেডিয়েন্ট সিলেক্ট করে নিচের দিকে লেয়ারটির অপাসিটি কমিয়ে কালার অ্যাডজাষ্ট করুন।




5.   বারটি তৈরী করা হলো এখন Welcome ম্যাসেজ দিব Type টুল সিলেক্ট করে Arial Regular, 12 pt এবং Color = #515151 সিলেক্ট করে 100 px পজিশনে লিখুন Welcome to our World.


6.  এখন একটি Action Bar তৈরী করবো । নতুন একটি লেয়ার গ্রপ নিয়ে নাম দিন Action. এখন Rounded Rectangle টুল সিলেক্ট করে 150 px থেকে 180 px এর মত wide এবং 30 px hight ও ডিপ গ্রে কালারের একটি Rectangle তৈরী করে মাঝের ভার্টিক্যাল গাইডের সাথে ডান Align করে বসিয়ে দিন। Stoke Color = None
7.   সাদা কালারের Text লিখুন Login | Register ( "|" চিহ্নটি কী-র্বোডের \ সস্নাস কীর  উপরে  অবস্থিত)


8.   এখন একটি র্সাচ বক্স তৈরী করবো । আরেকটি লেয়ার গ্রূপ নিয়ে Search Box নাম দিন। Rounded Rectangle টুল সিলেক্ট করে hight = 20px এবং  Radius রাখুন 10px। একটি আইকোন বসানোর মত এবং Search লেখার মত জায়গা রেখে আনুমানিক width (200 px), Color =  হালকা গ্রে কালারের বক্স তৈরী করুন।


9.   Layer Style এর Inner Shadow অপশনে Opacity = 75% , Angle = 120 , Distance = 2, Size = 4 সিলেক্ট করুন।


10.        Color Overlay অংশে সাদা কালার এবং Opacity = 100%. সিলেক্ট করুন।
11.Stroke অংশে Size = 1 px , Position = Outside, Opacity = 100%, Color = Gray.
12.        এখন Custom Shape টুল থেকে Magnifire Glass Shape সিলেক্ট করে বক্সের বাম দিকে একটি ছোট আইকোন তৈরী করুন ( Stoke Color = Black) এবং এর ডান দিকে গাঢ় গ্রে কালারের Search ওর্য়াডটি লিখুন।


আপাতত Status Bar তৈরী হলো। খুব জটিল মনে হলে এটি নাও তৈরী করে  সরাসরি Header থেকে শুরু করতে পারে। সব সাইটে এটি থাকে না এর পর আমরা Header তৈরী করবো।


Header তৈরী  করা
এখন আমরা Web Site এর জন্য Header তৈরী করবো এটি হচ্ছে Web Site এর জন্য সবচেয়ে  আকর্ষনীয় অংশ। এখানে আমরা ইমেজ ব্যানার, Logo আনবো এবং Logo বা Text লিখে Header টি সম্পূর্ণ করবো। আমরা এখানে Logo নামের একটি 160 w × 200 h Pixel এর একটি ইমেজ ব্যবহার করেছি Logo হিসাবে। এই সাইজের যে কোন ইমেজ নিয়ে আপনি কাজটি সারতে পারেন।  অপর দিকে Banner নামে  800×200 সাইজের আরেকটি ইমেজ ব্যবহার করেছি  Banner হিসাবে এই সাইজের যে কোন ইমেজ নিয়ে আপনি এটি করতে পারেন। ফাইল ২টি আমরা যে কোন দুইটি ইমেজ File>Open কমান্ড দিয়ে খুলুন। (প্রযোজনে আমাদের ব্যবহৃত ছবি টি ডাউনলোড করে নিতে পারেন।) 
1.   Logo Banner ইমেজ ২টি খুলুন।


2.   Header নামে একটি ফোল্ডার গ্রুপ তৈরী করুন। এখন Logo Banner নামের ইমেজ ২টিকে ড্রাগ করে Web-Template ফাইলের মধ্যে Header অংশের মধ্যে ড্রপ করুন। বাম দিকে থেকে প্রথমে Logo ও পরে Banner.

3.  লেয়ার ২টি নাম দিন যথাক্রমে Logo Banner.
4.   টেক্সট টুল ক্লিক করে সিলেক্ট করুন। Color = Red (C10a0a), Arial, Bold, Size = 80 pt এর Text সিলেক্ট করে  লিখুন Nova এবং আনুমানিক 250 px পজিশনে বসান।
5.   Layer Style থেকে Drop Shadow দিন।


6.  আলাদা লেয়ারে আবার লিখুন Computer Education , Color = White , Arial, Bold, Size = 40 pt এবং Drop Shadow দিন।


Menu  তৈরী
1.   এখন Menu  তৈরীর পালা Menu নামে লেয়ার গ্রূপ নিয়ে Menu অংশে 40 px hight এর এবং সমসত্ম Wide অংশ জুড়ে নীল কালারের একটি Rectangle তৈরী করুন। Status Bar  অপশনে এটির পূর্ণ প্রক্রিয়া দেখানো আছে। প্রয়োজনে  Status Bar লেয়ার গ্রূপটি কপি করে Welcome to our World টি ফেলে দিন এবং Box টির কালার Rectangle টুল সিলেক্ট করে Fill Color থেকে বদলিয়ে দিন ব্যাস।




2.   এখন মেনুতে বাটন তৈরী করবো। Rounded  Marquee টুল নিয়ে 30px hight, Radius=10px, Wide 150px এর একটি বক্স তৈরী করুন মেনু বারের ভিতরে এবং 300 px পজিশনে বসিয়ে দিন।


3.  এখন Alt + Selection টুল দিয়ে আরও ৩টি কপি করে পাশাপাশি বসিয়ে দিন।


4.   লেয়ার ৪টি Ctrl ধরে সিলেক্ট করে Distribute Horizantal Center কমান্ড দিয়ে দূরত্ব সমান করুন।


5.   এখন Text টুল করে বাটনগুলির উপর পর্যায় ক্রমে লিখে দিন। Home, Books, About Us , Contact Us. কালার দিন সাদা।   


Content তৈরী করা
Content এর মুলত তিনটি অংশ Background, Side bar এবং মুল Content. আমরা এগুলি আলাদা আলাদা ভাবে তৈরী করবো।
Background তৈরী করা
এখন Side bar Content সহ বাড়তি অংশের জন্য একটি ব্যাকগ্রাউন্ড তৈরী করবো।
1.   Background নামে একটি লেয়ার গ্রম্নপ তৈরী করুন এবং সেখানে আবারও Background নামে একটি লেয়ার তৈরী করুন।
2.   Rectangle Marquee টুল সিলেক্ট করে Menu-র নিচ থেকে এবং Footer এর আগ পর্যমত্ম সমগ্র এলাকা জুড়ে ( 290-1100) 810 px×960 px এর একটি সিলেকশন তৈরী করুন।


3.  এখন গ্রেডিয়েন্ট টুল সিলেক্ট কওে Black and White গ্রেডিয়েন্ট সিলেক্ট করে Black অংশকে গাঢ় নীল রঙ সিলেক্ট করে Blue and White গ্রেডিয়েন্ট তৈরী করুন।
4.   এখন সিলেক্টশনের মধ্যে নিচ থেকে উপরে ড্রাগ করে এবং Shift ধরে গ্রেডিয়েন্ট দিয়ে সিলেকশনটি পূর্ণ করুন  এবং বাইরে ক্লিক করে Deselect করুন ।


Side bar তৈরী করা
এখন Background এর উপর প্রথমে Sidebar ও পরে Content তৈরী করবো।
1.   Side bar নামে একটি লেয়ার গ্রম্নপ তৈরী করুন এবং left bar নামে একটি লেয়ার তৈরী করুন।   Rectangle Marquee টুল সিলেক্ট করে Width- 300 pxheight 810 px পরিমান একটি সিলেকশন left দিকে 40 px থেকে শুরু করে একটি সিলেকশন তৈরী করুন।
2.   এখন মাঝারি নীল (#boe9f9) কালার সিলেক্ট করে  এবং Alt+Delete কী প্রেস করে  পূর্ণ করুন এবং Opacity 50% করুন।


3.  এখন Text টুল সিলেক্ট করে Arial, Bold, 24 pt এবং Black কালার টাইটেল লিখুন Example. এবং উপরে দিকে Center করে বসান লেয়ারের নাম দিন  Example.


4.   আরেকটি নতুন লেয়ার নিয়ে নাম দিন Book এবং 175×225 সাইজের একটি ইমেজ যোগ করুন। আমরা Book.jpg ইমেজ যোগ করেছি। 
5.   এখন  Text টুল দিয়ে Link নামে হেডিং লিখুন এবং আরেকটি লেয়ার নিয়ে Text এর সাইজ একটু ছোট করে Microsoft Word, Microsoft Excel ইত্যাদি বিভিন্ন বইয়ের নাম পৃথক পৃথক লাইনে লিখুন।


Content তৈরী করা
ইতোমধ্যেই আমরা Background ও বামদিকে একটি Side bar তৈরী করেছি। এখন আমরা ডান দিকের Content তৈরী করবো।
1.   Content নামে একটি লেয়ার ফোল্ডার তৈরী করুন। আবারও এই লেয়ার ফোল্ডারের মধ্যে Content নামে একটি লেয়ার নিয়ে Side bar এর ডানদিকে Hight 810×Width 575 সাইজের একটি সিলেকশন তৈরী করে  হালকা আকাশী  কালার ( cdf2fb) দিয়ে fill করুন।


2.   এখন Text টুল নিয়ে Arial, Bold, 24 pt ও কালার Red নিয়ে একটি হেডিং লিখুন, আমরা ABOUT NOVA COMPUTER দিয়েছি। আবারও Text টুল নিয়ে সাইজ একটু ছোট করে  Product সমন্ধে কয়েক লাইন লিখুন এবং শেষে 350×480 সাইজের একটি ইমেজ আলাদা লেয়ারে  Product নাম দিয়ে ইমেজ যোগ করুন, আমরা Product.jpg ইমেজ ব্যবহার করেছি।
3.  একইভাবে এর নিচে একটি হেডিং দিয়ে Author সমন্ধে কিছু লিখুন এবং একটি ইমেজ সংযোজন করুন। ইমেজটি আনুমানিক 150×150 pixel করুন। আমরা Author.jpg ইমেজ সংযোজন করেছি।


Footer সংযোগ
এখন আমরা Footer সংযোগ করবো। এটি নিচের 100 pixel  Hight এর মধ্যে সংযোজন করবো।
1.   Footer নামে একটি লেয়ার ফোল্ডার নিন। Footer Head নামে একটি লেয়ার তৈরী করুন। এবং 50×960 সাইজের একটি ইমেজ সংযোজন করুন। আমরা  Footer head.jpg ইমেজ ব্যবহার করেছি।


2.   Rectangle Tool দ্বারা বাকী 50 px হাইটের একটি গাঢ় গ্রে কালারের Rectangle আঁকুন এবং Text টুল দিয়ে Rectangle এর মধ্যে লিখুন। ( আমরা copyright Bappi Ashraf@ Nova Computer লিখেছি )


Template টি তৈরী করা হল। এখন প্রশ্ন হচ্ছে কেন এরকম Template তৈরী করা হয়। প্রথমে Photoshopএ এই ধরণের Template তৈরী করা হয়। পরে ইমেজগুলি প্রত্যেক লেয়ার আলাদা আলাদা ফাইলের নাম দিয়ে Image নামে একটি ফোল্ডারে রাখা হয় এবং ইমেজ ফোল্ডারের rootIndex.html Style.css  ফাইল তৈরী করে কোড লেখা হয়।
*******************************************************************************

 বিস্তারিত জানতে  নিচের  বইটি সংগ্রহ করুন।







RELATED POST LINKS BELOW ********************************************
Next Part _ Coming Soon 41


             
             

Illustrator

Next Part _ Coming Soon 18
                  Part 001   Part 002 Part 003  Part 004  Part 006 Part 007  
                   Part 008   Part 009  Part 010   Part 011  Part 012  Part 013 Part_14  Part 015   Part_16   Part_17
Quark XPress
Next  _ part_ 6_ coming soon
            Part 001  Part 002  Part 003  Part 004   Part 005  
In design
 Next Part _ coming soon _ part_13
                  Part 001  Part 002  Part 003     Part 004   Part 005   Part 006 Part 007  

                       Part 008   Part 009  Part 010 Part 011 Part 012