In this tutorial you learn how to create web template (psd template) in photoshop.
প্রথমে Photoshop এ নতুন একটি ফাইল ওপেন করে নিচের
মত setting করতে হবে।
এবার foreground color box এ এই (0e4b7f) কোডটি লিখে paint bucket tool দিয়ে canvas টি fill করতে হবে।
port02
এবার নতুন একটি লেয়ার তৈরি করে এর নাম দিতে পারেন "header highlight". toolbar থেকে gradient tool select করে white to transparent color set করে Radial select করতে হবে। নিচের image টি দেখুন-
উপরের settings ঠিক করে এবার canvas এর উপরের ঠিক মধ্য -খানে click করে Drag করে নিচের দিকে অল্প একটু টেনে ছেড়ে দিলে নিচের ইমেজের এর মত দেখতে পাবেন।
এবার blend mode change করে overlay করতে হবে এবং opacity কমিয়ে 50% করে দিতে হবে। see below image-
এবার এই link(metal-image.jpg) এ click করে ইমেজটি ডাউনলোড করে canvas এ সেটিং করতে হবে। ইমেজটির সাইজ অবশ্যই যেন canvas এর সাইজের সমান হয়।
এবার চলে যেতে হবে image>adjustments>levels . নিচের ইমেজ দেখে সেটিং করে নিতে হবে।
এবার metal-image নামে যে লেয়ারটি আছে সে লেয়ারের opacity কমিয়ে 10% করে দিতে হবে। তাহলে canvas টি নিচের ইমেজের মত দেখা যাবে।
port08
এবার document কে Guide দেয়ার জন্য চলে যেতে হবে view>New Guide এ click করতে হবে। এবার vertical select থাকা অবস্থায় position box এ 50px লিখে দিতে হবে এবং পরে আবার একই ভাবে new guide select করে vertical position এ 950px লিখে দিতে হবে ।
আবার একইভাবে Horizontal select করে প্রথমে 100px এবং পরে 950px দিয়ে guide settings করে নিতে হবে। see the below image-
port09
Guideline এর মাঝখানের অংশটুকু white color এ fill করে দিতে হবে, নিচের চিত্রের মত-
port10
এবার logo and Menu তৈরি করতে হবে। এইগুলো অবশ্যই header অংশে লিখতে হবে এবং এখানে font color (#b7dbfe) দিতে হবে। নিচের ইমেজের মত-
port11
এখন white background এর উপরের ডান দিকে একটি laptop এর ইমেজ দিতে হবে। এবার চলে যেতে হবে image> adjustments>levels . নিচের ইমেজ দেখে সেটিং করে নিতে হবে।
port12
এবার laptop এর wallpaper এর জায়গায় অন্য একটি website এর ইমেজ আমরা আমাদের ইচ্ছে মত দিতে পারি। এটি অবশ্যই যেন laptop এর display এর চেয়ে বড় না হয়। এখন এই ইমেজটিতে stroke দেয়ার জন্য এই ইমেজ লেয়ারটির উপরে Right click করে blending option select করে নিচের ইমেজের মত সেটিং করে নিন।
port13
এখানে কিছু text add করতে পারেন। যেমন প্রথম লেখাটির জন্য font color (#408dd0) এবং নিচের ছোট লেখার জন্য font color (#8e8e8e) use করতে পারেন।
port14
এবার Rounded Ractangle tool select করে ছোট একটি বাটন বানিয়ে এই ইমেজ লেয়ারটির উপরে Right click করে blending option select করে নিচের ইমেজের মত সেটিং করে নিন এবং এর মধ্যে font color white select করে text লিখে দিতে হবে
port15
port16
port17
এবার white background এর নিচের অংশ Ractangular Marquee tool দিয়ে select করতে হবে এবং নতুন একটি layer তৈরি করে হালকা gray color এ fill করে নিচের ইমেজের মত Inner shadow দিতে পারি।
port18
port19
এখন কিছু content নিচের অংশে লিখে দিতে পারেন এবং ঐ প্রথম বাটনটিকে copy করে use করতে পারেন। নিচের ইমেজটি একটু দেখুন-
port20
সবশেষে যে কাজটি করতে হবে তা হচ্চে নিচে footer এ কিছু text লিখতে হবে । নিচের ছোট লেখার জন্য font color (#8e8e8e) use করতে পারেন।
port21
এবার Slice টুল দিয়ে প্রয়োজনীয় স্থানে লিংক তৈরি করে ওয়েব ফরম্যাটে সেভ করলেই হয়ে যাবে আকর্ষণীয় ওয়েব টেমপ্লেট, যা শুধুমাত্র ফটোশপ দিয়েই করা সম্ভব। আমাদের প্রকাশিত "ওয়েব ডিজাইন প্যাকেজ" টিউটোরিয়ালে ওয়েব টেমপ্লেটের উপর আরো অনেক ভিডিও টিউটোরিয়াল রয়েছে।
all the articale here 
