আপনারা নিশ্চয় অনেক excited। আমি ও :P কারন আমি এই প্রথম web template নিয়া টিউটরিয়াল দিতাছি এর আগে কখনো দেই নাই। ওয়েব template নিয়া টিউটরিয়াল দেয়া খুব সহজ কাজ না তাই একটু ভয়ে ভয়ে ও আছি :(   যাই হোক ঐটা কোন বেপার না। ওহ ! আপনাদের তো বলাও হয় না। শুরুতেই সবাইরে আমার সালাম এবং বিডিগিকস ওয়েবসাইট এর পক্ষ থেকে আমি ইরা আহমেদ আপনাদের টিউটরিয়ালে ওয়েলকাম জানাইতেছি :D

আমি ও নতুন এইসবে আপনারা ও হয়তো নতুন তাই আমি হয়তো আপনাদের best advise দিতে পারমু না ওয়েব ডিজাইন এ কিন্তু কিছু কিছু জিনিস আছে যা ওয়েব ডিজাইন করার জন্য অনেক উপকারী এবং করলে অনেক সময় বাইচা যায়। যেমন ধরুন,

১ – প্রথমে ভাবেন যে আপনি যে ওয়েব সাইট টা বানাবেন তার আসলে কি উদ্দেশে বানাইবেন। কেউ হয়তো বানাইতে চান ব্লগ, আবার কেউ প্রোফাইল, আবার কেউ গানের ওয়েবসাইট, নাচের ওয়েবসাইট, শিক্ষামূলক ওয়েবসাইট।ওয়েব সাইট এর মুল লক্ষ্য টা কি ??

২ – এখন গানের ওয়েবসাইট বানাইলে আপনারে মাথায় রাখতে হবে যে লোগো, ব্যাকগ্রাউন্ড, মেনু, পিকচার এগুলায় যাতে এক ধরনের হিন্ট থাকে যে এইটা একটা গানের ওয়েবসাইট। পাবলিক ঢুকার পড়ার যাতে না সাথে সাথেই বুঝতে পারে যে সাইট টা মিউজিক এর। আবার ধরেন শিক্ষামূলক কোন ওয়েবসাইট বানাইলেন আপনি যদি আইকন গুলাতে বই, কম্পিউটার, কলম, খাতা এইশব ব্যাবহার করেন তাইলে সাইট এর একটা শিক্ষামূলক ভাব থাকে। যাই হোক এইটা হইতেছে আমার মতামত। আপনারা যেরকম ইচ্ছা আপনাদের টা বানাইতে পারেন কোন সমস্যা নাই।

৩ – সাইট এর ডিজাইন কিরকম করবেন ?? কিছুই বুজতেছেন না, কেমনে শুরু করবেন কই থাইকা শুরু করবেন কিচ্ছু জানেন না। এক কাজ করলে কেমন হয় একটা খাতা কলম নিয়া আপনারা একটা ওয়েবসাইট এর স্কেচ আঁকতে পারেন। কারন কম্পিউটার এর থাইকা আমার মতে খাতা কলমে আমরা comfortable ফীল করি অনেক। তারপর যা যা ভাবছেন তা তা কম্পিউটার এর ফটোশপ এ করা শুরু করলেন।

৪ -   আমার ৪ নং advise হইলো যে সব সময় কালার গুলারে related রাখার ট্রায় করবেন। ধরেন আপনার ব্যাকগ্রাউন্ড কালার কালো, আপনার ব্যাকগ্রাউন্ড কালার কালো হইলে আপনি টেক্সট এর লাইগা গ্রেয় ব্যাবহার করতে পারেন কারন গ্রেয় আর কালো এর কালার কোড খুব কাছা কাছি। আপনি যদি ব্যাকগ্রাউন্ড কালার দেন লাল আর টেক্সট দেন নীল আমার মনে হয় না আপনার ওয়েবসাইট খুব একটা সুন্দর হবে। ওয়েবসাইট তখন খালি ঝক ঝক করবে যা আজকালকের ওয়েবসাইট এ খুব কম থাকে। আজকালকের professional ওয়েবসাইট গুলায় কালার খুবই কম থাকে।

৫ – কোন একটা জিনিস পুরা পুরি ডিজাইন করা শুরু করার আগে আপনাদের একটা simple look দরকার প্রথমে যাতে ওয়েবসাইট এর ইমেজ টা আপনার চোখে ভাসে। যেমন ধরুন নিচের ছবির !!!

 

 

উপরের এই template হইতেছে শুধু গ্রেয় কালার ব্যাবহার করে বানানো। এটা করার সুবিধা এই যে, আমরা ওয়েবসাইট এর দিকে তাকাইলেই বুঝতে পারতেছি যে, আমাদের কোন জায়গায় কি কি নিয়ে কাজ করতে হবে।

তারপর আমরা ডিজাইন করে আস্তে আস্তে নিচের ওয়েবসাইট template এর মতো একটা template ডিজাইন করতে পারি যা নিয়ে আমার আজকের এই টিউটরিয়াল :)

 

 

উপরের এই ওয়েব template কিভাবে তৈরি করবেন তার পুরাটা আমি আপনাদের দেখাবো কিন্তু তার আগে আমি আবারো বলে নেই যে আমি নিজে কিন্তু এই টিউটরিয়াল লেখতেছি না আমি ইংলিশ এর বাংলা কইরা দিতাছি। আমি নিজে এই টিউটরিয়াল বানানোর ট্রায় করছি। কয়েকটা স্টেপ আছে যা আমার কাছে মনে হইছে যে দরকার নাই হুদাই, আবার কয়েকটা আছে আমি নিজেও পারি নাই আবার কয়েকটা আছে যে বলা নাই কোন কালার ব্যাবহার করছে অথবা কোন টেক্সট ব্যাবহার করছে। তাই আমি যে যে ইনফর্মেশন গুলা নাই তা নিজে অ্যাড করবো এবং ঠিক ওরা যেরকম করতে বলছে সেরকম দেখিয়ে দিবো :) আশা করি আপনারা নিজে নিজে ট্রায় করে অবশ্যই বানাতে পারবেন এবং না পারলে আমি তো আছিই :)

 

 

উপরের ছবিটা বানাইছি আমি আমারটা হয়তো ওদের মতো same হয় নাই কিন্তু আপারা same বানাইতে পারবেন আশা করি :) তো আসুন শুরু করা যাক

আসেন তাইলে আমরা শুরু করি কি বলেন ??  আজকে আমি আপনাদের মাত্র ২ টি স্টেপ দেখাবো।

স্টেপ ১ -


প্রথমে নতুন একটা ফাইল অপেন করি আমরা ।  আমাদের layout টা হবে 960 pixel wide । আমি ঠিক জানি না আপনারা 960 grid system নামে কিছু জানেন নাকি আসলে আমি নিজেই ঠিক কইতে পারতেছি না এইটা আসলে কি কিন্তু আমার মনে হয় আপনার ওয়েব ডিজাইন এর layout width যদি ৯৬০ পিক্সেল হয় তাইলে PSD to HTML করতে সুবিধা অনেক আর ৯৬০ কেই এখন পর্যন্ত ওয়েব পেজের জন্য স্ট্যান্ডার্ড ধরা হয় (যদি না আপনি পেজটাকে রেসপনসিভ বানাতে চান)। হয়তো – আমি সত্যি জানি না এটা সম্বন্ধে ফয়সাল বাসায় আসার সাথে সাথে জিজ্ঞেসা করবো যদি মনে থাকে :) আর নাইলে আপনারা গুগল মামার কাছ থাইকা জাইনা নিন 960 pixel wide layout এর লগে  960 grid system রিলেটেড কিনা !!! যাই হোক,

আমাদের ডকুমেন্ট এর সাইজ হবে height 1500 and width 1200 pixel………।। নিচের ছবি দেখে দেখে নতুন একটি ডকুমেন্ট অপেন করুন।

 

স্টেপ  -২


স্টেপ ২ – এখন আপনারা আমি যে গ্রেয় layout টা দিছি ঐটা দেখে দেখে একটা layout বানান ( layout টা হয়তো পরে কাজে লাগবে হয়তো না কিন্তু আমার মতে practice করাটা জরুরি) ।আমি আপনাদের বলবো না কোনটার কি সাইজ অথবা কতো পিক্সেল উপরে নিচে। আপনারা নিজের ইচ্ছা মতো এবং নিজে যা জানেন এবং শিখছেন ফটোশপে তা প্রয়োগ করে দেখে দেখে grey layout টার মতো একটা লেআউট তৈরি করুন। খেয়াল করেন যে কোন শেপ টা  দেখতে কিরকম, কোনটা বার বার তৈরি করতে হবে না শুধু কপি করে অন্য জায়গায় বসাতে হবে, কোনটার height ঠিকি থাকবে কিন্তু width একটু বেশি হবে এগুলা বিবেচনা করে একটা layout তৈরি করুন।

তারপর আজকের মতো আপনার এই PSD ফাইলটা সেভ করে রাখুন :)

আজকের টিউটরিয়াল এই পর্যন্তই। পরবর্তী টিউটরিয়ালের অপেক্ষায় থাকুন খুব শিঘ্রই দেয়া হবে ইনশাল্লাহ :)

 

 

 অন্যান্য পর্বসমূহ:

প্রথম পর্ব : ফটোশপ টিউটরিয়াল ৪৬ – ওয়েব টেমপ্লেট ১ [ শুরু করুন ওয়েব ডিজাইনিং ]

দ্বিতীয় পর্ব : ফটোশপ টিউটরিয়াল ৪৭ – ওয়েব টেমপ্লেট ২ [ওয়েব পেজের হেডার তৈরী করা]

তৃতীয় পর্ব : ফটোশপ টিউটরিয়াল ৪৮ – ওয়েব টেমপ্লেট ৩ [ওয়েব পেজের হেডার (২) + লোগো ]

চতুর্থ পর্ব : ফটোশপ টিউটরিয়াল ৪৯ – ওয়েব টেমপ্লেট ৪ [ নেভিগেসন ও স্লাইডার তৈরী]

পঞ্চম পর্ব : ফটোশপ টিউটরিয়াল ৫০ – ওয়েব টেমপ্লেট ৫ -[ স্লাইডার ২]

ষষ্ঠ পর্ব : ফটোশপ টিউটরিয়াল ৫১ – ওয়েব টেমপ্লেট ৬ [কন্টেন্ট ডিজাইন] 

সপ্তম পর্ব : ফটোশপ টিউটরিয়াল ৫২ – ওয়েব টেমপ্লেট ৭ [ফুটার ডিজাইন এবং সমাপ্তি]

ট্যাগসমূহ:

লেখক: ইরা আহমেদ

উনারে অনেক ভালোবাসি আর ভালোবাসি শিখাইতে...।। মানুষকে হাসাইতেও অনেক ভালো লাগে :) ফটোশপিং করা ব্লগ এ টিউটরিয়াল লেখা এবং উনার সাথে অনেক অনেক গল্প করা আমার শখ, অভ্যাস অথবা আমার দৈনন্দিন জীবন বলতে পারেন। ( University khular age porjonto :P )



কথোপকথন শুরু হয়ে গেছে! আপনিও যোগ দিন- ইতোমধ্যে 19 টি মন্তব্য করা হয়েছে :

  1. Ranjit Kumar Mandalon September 8, 2012, at 12:42 am Reply

    Hello,
    Didi Moni,
    Amar kono Personal Website nai aita amar Free hosting website & http://ranjit1.freehosting.com/ ami PSD to HTML,CSS a Convert korte try korsi tobe aponar ai tutorial gulo amar onek kaje debe ar aponader Webdesign Website gulo maje maje follow kori Ami kivabe Web Developer hote pari Faysal vai ar kaj teke aktu jene bolben. Aponader Ami maje maje Onek problem a pori Aponi or FAYSAL vai ki aktu help korben Tahole Ami Reeni takbo
    Amar PNG background image Internet Explorer a Show kore na Kivabe korbe??????????????
    Aponake Onek Dhonnobad
    Ranjit Kumar Mandal

    • ইরা আহমেদon September 20, 2012, at 3:38 pm Reply

      ধন্যবাদ ভাইয়া আপনার কমেন্ট এর জন্য। ফয়সাল রে অথবা আমারে কিছু জিজ্ঞাসা করতে চাইলে আপনি গ্রুপ এ অথবা পেজ এ জইন করতে পারেন। ওখানে ফয়সাল সহ অন্যান্য সবাই আপনাকে হেল্প করার ট্রায় করবে :)
      গ্রুপ – https://www.facebook.com/groups/bdgeeksGrp/
      পেজ – https://www.facebook.com/bdgeeks

  2. Abul Hasanathon September 8, 2012, at 4:08 am Reply

    Iraa Ahmed, ami dukkhito ami bangla type korte parina,tai banglish diye kaj calai. Apnar activities abong tutorials ami regular follow kori. Tuts gulo khub helpfull hoi. Thank you. Ekta suggestion, apnar tutorias e ‘kottho’ bhasa ( should I say ‘kacha’ bhasha ? ) bebohar na korle aro sundor hobe. Don’t mind for the suggestion. Thanks anyway.

  3. showkaton September 8, 2012, at 1:11 pm Reply

    jak after long time bd geeks e duklam.tnx Ira…..o valo kotha…amar kintu apnar kotto bashar tutorial guali valo lage.

  4. showkaton September 10, 2012, at 7:46 pm Reply

    baki tutorial ta kobe pabo?

    • ইরা আহমেদon September 10, 2012, at 8:25 pm Reply

      ভাইয়া আজকেই পাইবেন :) পোস্ট করা হইবো একটু পরে :)

  5. Motiurlawon February 4, 2013, at 3:34 pm Reply

    There is no mobile downloading system.please make change to your system that we can download from mobile.please….

    • ফয়সাল আহমেদon February 7, 2013, at 9:52 pm Reply

      what phone are you using? it works on most of the smartphone browsers. I tested on chrome, firefox and android’s default browser.

  6. Amnkhanon February 20, 2013, at 7:36 am Reply

    আমি কি পিএসডি ফাইল টা পেতে পারি??

    • ফয়সাল আহমেদon February 20, 2013, at 8:24 am Reply

      এই সিরিজের শেষ ভিডিওতে ডাউনলোড লিংক দেওয়া আছে। টিউটোরিয়ালের উপরে দেখবেন ডাউনলোড ফাইলস নামের একটা অপশন আছে ঐখানে পিএসডি ফাইলে ক্লিক করলেই ডাউনলোড হবে. http://wp.me/p32R6e-2bf

  7. Mithunon February 23, 2013, at 10:49 am Reply

    Onek valo ekta tune

  8. raz.2009on March 1, 2013, at 4:19 pm Reply

    banglai trutorial bananor jonno THANKS. atodin english tutorial dekese akhon bangla try korse. vi android parle den na sekher khub issa.

  9. imrantopuon April 20, 2013, at 9:38 pm Reply

    PSD to html korsilam, but PSD file ta kothai pabo? source link ta diben Plz?

  10. Husain Ahmmedon March 14, 2014, at 9:30 am Reply

    Apnar lekhar style ta darun. Foysal vai ke bolben je Magento nia tutorial akta series tutorial banate…

Leave a Reply

Your email address will not be published. Required fields are marked *