How to develop templeate using photoshop?

Author Topic: How to develop templeate using photoshop?  (Read 1194 times)

Offline BRE SALAM SONY

  • Hero Member
  • *****
  • Posts: 827
  • Alhamdulliha Allah Can makes Me A Muslim
    • View Profile
    • Special Discount For hajj and Umrah Guest
How to develop templeate using photoshop?
« on: July 22, 2010, 12:50:49 AM »




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
আল্লাহর রহমতে প্রতি বছর হজে যাওয়ার সুযোগ হচ্ছে।এভাবেই হাজীদের খেদমত করে যেতে চাই।
01711165606

আমার প্রতিষ্ঠান www.zilhajjgroup.com
www.corporatetourbd.com