ওয়েব ডিজাইন কি? কিভাবে শিখবো?কি কি শিখব?কেনে শিখব? এর সব কডিং দেখুন?সেরা

ওয়েব ডিজাইন:

ওয়েব ডিজাইন হচ্ছে একটা ওয়েবসাইটের জন্য বাহ্যিক অবকাঠামো তৈরী করা । অর্থাৎ ওয়েবসাইট দেখতে কেমন হবে বা এর সাধারন রূপ কেমন হবে তা নির্ধারণ করা । ওয়েব ডিজাইনারের মুল কাজ একটা পূর্ণাঙ্গ ওয়েব সাইটের টেম্পলেট তৈরি করা, যেমন এটার লেয়াউট কেমন হবে, হেডারে কোথায় মেনু কেমন হবে, সাইডবার হবে কিনা এবং ইমেজগুলো কিভাবে প্রদর্শন করবে ইত্যাদি । ওয়েব ডিজাইনে কোন এপ্লিকেশন থাকবেনা । যেমন লগিন সিস্টেম, ফাইল আপলোড করে ডেটাবেসে সেভ করা, ইমেজ ম্যানিপুলেশন, যদি সাইটে বিজ্ঞাপন থাকে তাহলে প্রতিবার পেজ লোড হওয়ার সময় বিজ্ঞাপনের পরিবর্তন এগুলি এপ্লিকেশন বা ওয়েব এপ্লিকেশন । এসব তৈরী করতে হয় প্রোগ্রামিং ল্যাংগুয়েজ দিয়ে । কোন প্রকার এপ্লিকেশন ছাড়া ওয়েব সাইট তৈরী করাকে ওয়েব ডিজাইন, এধরনের ডিজাইনকে বলতে পারেন স্টাটিক ডিজাইন । ওয়েব ডিজাইনের জন্য এই ধারনাটি সাধারনত ব্যবহৃত হয়ে থাকে ।

কিভাবে শিখব:

ওয়েব ডিজাইন আপনি কয়েক ভাবেই শিখতে পারবেন । তবে অতি পরিচিত দুটি মাধ্যম হচ্ছে  প্রথমটি হলো প্রশিক্ষণের মাধ্যমে  আর দ্বিতীয়টি হলো  টিউটোরিয়াল দেখে ।

আপনি তিনটি জিনিসের মাধ্যমে যে একটা জিনিস কে খুব সহজে আয়ত্ত করে নিতে পারে ১. কানে শুনে ২. চোখে দেখে ৩. কাজ করার মাধ্যমে । এই ৩টি জিনিসের মাধ্যমে আপনি খুব সহজেই যে কোন কিছু কে নিজের মধ্যে আয়ত্ত করে নিতে পারে । আসলে ওয়েব ডিজাইন তেমন কোন কঠিন বিষয় নয় । আপনি যদি মনে করেন কঠিন তাহলে এটি আপনার কাছে কঠিন মনে হবে আর যদি মনে করেন যে সহজ তাহলে সহজ । মূল কথা হল সেটা কঠিন হক বা সহজ হক তাতে কিছু যায় আসে না । আপনার মনোভাব টা এমন হওয়া চাই যে আমাকে শিখতেই হবে, তাহলেই আপতি শিখতে পারবেন এবং সফল হবেন ।

কি কি শিখব:

ওয়েব ডিজাইন করতে হলে আপনাকে যা যা শিখতে হবে তাহল *HTML *CSS * JAVA SCRIPT  * PSD-HTML  *Twitter – Bootstrap *Less Framework ইত্যাদি । সবার প্রথমে আপনি শিখবেন HTML তারপর শিখবেন CSS তারপর JavaScript। আর এই গুলু শিখা শেষ হলে আপনি PSD টু HTML এর কাজ করা শুরু করবেন । Twitter – Bootstrap *Less Framework এই দুটো ব্যাবহার করা হয় ওয়েব সাইট কে রেস্পন্সিভ করার জন্য আগের ৩টি বিষয় ভাল করে না শিখে এই গুলু শুরু করবেন না । তাহলে আপনি কিছুই বুজবেন না  আর কাজও ঠিক মতো করতে পারবেন না । আমি আমার জিবনে এমন অনেক ডিজাইনার দের কে দেখেছি যারা অল্প একটু কাজ শিখেই কাজে নেমে পরেন । এটা কখনই করবেন না তাহলে শুরু তেই আপনার ক্যারিয়ার শেষ । আগে ভাল করে কাজ শিখুন তার পর প্রোফেসনাল কাজের জন্য মাঠে নামতে হবে । মূলত কাজ শুরু করতে এই কয়েকটি ল্যাঙ্গুয়েজে দক্ষতা এবং বাস্তব কাজে ব্যবহার করার যোগ্যতা অর্জন করলেই হবে। তবে এই ধরনের কাজে অভিজ্ঞতা একটি চলমান প্রক্রিয়া। উত্তরোত্তর নতুন অনেক কিছু শিখে নিজেকে আরও প্রফেশনাল আরও যোগ্য ওয়েব ডিজাইনার করে তুলতে হবে

কেন শিখব:

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

বতর্মানে ফ্রিল্যান্স মার্কেটপ্লেসগুলোতে ক্রিয়েটিভ ওয়েবসাইট ডিজাইন করার জন্য প্রতিটি সাইটে ২০০ ডলার থেকে দুই হাজার ডলার পর্যন্ত পাওয়া যায়। আমাদের দেশে ওয়েবসাইট ডিজাইনের জন্য প্রচুর আগ্রহী শিক্ষার্থী থাকলেও প্রয়োজনীয়সংখ্যক এবং মানসম্মত প্রশিক্ষণ প্রতিষ্ঠান নেই।

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

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

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



দেখেনিন এভাবে এগুলো সব ভালো ভাবে দেখে করুন। দেখে নিন??

Adobe Photoshop CS6 Shortcuts

Selecting
Draw Marquee from Center	Alt-Marquee
Add to a Selection	Shift
Subtract from a Selection	Alt
Intersection with a Selection	Shift-Alt
Make Copy of Selection w/Move tool	Alt-Drag Selection
Make Copy of Selection when not in Move tool	Ctrl-Alt-Drag Selection
Move Selection (in 1-pixel Increments)	Arrow Keys
Move Selection (in 10-pixel Increments)	Shift-Arrow Keys
Select all Opaque Pixels on Layer	Ctrl-click on Layer Thumbnail (in Layers panel)
Restore Last Selection	Ctrl-Shift-D
Feather Selection	Shift-F6
Move Marquee while drawing selection	Hold Space while drawing marquee

Viewing
Fit on Screen	Double-click on Hand tool or Ctrl-0
100% View Level (Actual Pixels)	Double-Click on Zoom Tool or Ctrl-Alt-0
Zoom in	Ctrl-Space-Click or Ctrl-Plus(+)
Zoom out	Alt-Space-Click or Ctrl-Minus(–)
Hide all tools and panels	Tab
Hide all panels except Toolbox and Options bar	Shift-Tab
Rotate through full-screen modes	F
Scroll image left or right in window	Ctrl-Shift-Page Up/Down
Jump/Zoom to part of Image	Ctrl-drag in Navigator panel
Toggles layer mask on/off as rubylith	\

Layer Shortcuts
Create new layer	Ctrl-Shift-N
Select non-contiguous layers	Ctrl-Click layers
Select contiguous layers	Click one layer, then Shift-Click another layer
Delete Layer	Delete key (while in the Move tool)
View contents of layer mask	Alt-Click layer mask icon
Temporarily turn off layer mask	Shift-Click layer mask icon
Clone layer as you move it	Alt-Drag
Find/Select layer containing object	Right-Click on the object w/Move tool
Change layer opacity	Number pad keys (w/Move tool selected)
Cycle down or up through blend modes	Shift-Plus(+) or Minus(–)
Change to a specific blend mode	(w/Move tool) Shift-Alt-letter (ie: N=Normal, M=Multiply. etc.)
Switch to layer below/above current layer	Alt-[ or Alt-]

Type Shortcuts
Select all text on layer	Double-Click on T thumbnail in Layers panel
Increase/Decrease size of selected text by 2 pts	Ctrl-Shift->/<
Increase/Decrease size of selected text by 10 pts	Ctrl-Shift-Alt->/<
Increase/Decrease kerning/tracking	Alt-Right/Left Arrow
Align text left/center/right	Ctrl-Shift-L/C/R

Painting
Fill selection with background color	Ctrl-Backspace
Fill selection with foreground color	Alt-Backspace
Fill selection with foreground color using Lock Transparent Pixels	Shift-Alt-Backspace
Fill selection with source state in History panel	Ctrl-Alt-Backspace
Display Fill dialog box	Shift-Backspace
Sample as background color	Alt-Click w/Eyedropper tool
To get Move tool	While in any painting/editing tool-hold Ctrl
To get Eyedropper with Paint tools	Alt
Change paint opacity (with Airbrush OFF)	Number keys
Change paint opacity (with Airbrush ON)	Shift-Number keys
Change Airbrush flow (with Airbrush ON)	Number keys
Change Airbrush flow (with Airbrush OFF)	Shift-Number keys
Cross-Hair Cursor	Any painting/editing tool-turn Caps Lock on
Decrease/Increase Brush Size	[ or ]
Decrease/Increase Hardness of Brush	Shift-[ or Shift-]
Switch between preset Brushes	< or >
Open Brushes pop-up panel	Right-Click on Image window
Erase to History panel’s source state	Alt-Eraser
Cycle down or up through blend modes	Shift-Plus(+) or Minus(–)
Change to a specific blend mode	Shift-Alt-letter (ie: N=Normal, M=Multiply, etc.)
Create fixed color target from within a dialog box	Shift-Click in image window
Delete fixed color target	Alt-Click on target with Color Sampler tool
Create new spot-color channel from current selection	Ctrl-Click on New Channel button in Channels panel

Pen Tool Shortcuts
To get Direct Selection tool while using Pen	Ctrl
Switch between Add-Anchor and Delete-Anchor Point tools	Alt
Switch from Path Selection tool to Convert Point tool when pointer is over anchor point	Ctrl-Alt
To Select a whole path w/Direct Selection tool	Alt-click
Convert path to a selection	Ctrl-click on path name (in Paths panel)

Panel Shortcuts
Show/Hide Brushes panel	F5
Show/Hide Color panel	F6
Show/Hide Layers panel	F7
Show/Hide Info panel	F8
Show/Hide Actions panel	Alt-F9
Open Adobe Bridge	Ctrl-Alt-O

Other Shortcuts
Switch between open documents	Ctrl-Tab
Undo or Redo operations beyond last one	Ctrl-Alt-Z/Ctrl-Shift-Z
Apply Last Filter	Ctrl-F
Opens Last Filter Dialog Box	Ctrl-Alt-F
Hand Tool	Spacebar
Reset Dialog Box	Hold Alt, Cancel turns into Reset Button, Click it
Increase/Decrease value (in any option field) by 1 unit	Up/Down Arrow
Increase/Decrease value (in any option field) by 10 units	Shift-Up/Down Arrow
Replay last Transformation	Ctrl-Shift-T
Measure Angle between Lines (Protractor Function)	After ruler is drawn, Alt-Drag end of line with Ruler Tool
Move Crop Marquee while creating	Hold Space while drawing
Snap Guide to Ruler ticks	Hold Shift while dragging
Highlight Fields in Options bar (n/a for all tools)	Enter
Don’t Snap object edge while moving	Hold Control while dragging

Tools
V	Move
M	Marquee tools
L	Lasso tools
W	Quick Selection, Magic Wand
C	Crop and Slice Tools
I	Eyedropper, Color Sampler, Ruler, Note, Count
J	Spot Healing Brush, Healing Brush, Patch, RedEye
B	Brush, Pencil, Color Replacement, Mixer Brush
S	Clone Stamp, Pattern Stamp
Y	History Brush, Art History Brush
E	Eraser tools
G	Gradient, Paint Bucket
O	Dodge, Burn, Sponge
P	Pen tools
T	Type tools
A	Path Selection, Direct Selection
U	Rectangle, Rounded Rectangle, Ellipse, Polygon, Line, Custom Shape
K	3D Tools
N	3D Camera Tools
H	Hand
R	Rotate View
Z	Zoom
D	Default colors
X	Switch Foreground and Background colors
Q	Quick Mask Mode
To switch between all tools within groups, add the Shift key to the letters above
For example, to switch between rectangular and elliptical marquee hit Shift-M