স্ক্র্যাচ থেকে কোনও ওয়েবসাইট ডিজাইন করছেন - চিত্রক বা ফটোশপ?


11

যদি আমি স্ক্র্যাচ থেকে কোনও ওয়েবসাইট ডিজাইন করি এবং আমি এটিকে টুকরো টুকরো করার চেষ্টা করি এবং এটি পরে অ্যাডোব ড্রিমউইভারে কোড করি, তবে আমার কী ইলাস্ট্রেটর বা ফটোশপে ওয়েবসাইটের নকশা তৈরি করতে হবে? কেন?


1
আমি ফটোশপের ব্যাপক ব্যবহার এবং আরও টিউটোরিয়ালগুলির জন্য সুপারিশ করব।
জিচাও

6
শুরু করার জন্য আপনার পুরানো 'চিত্রের স্লাইস' পদ্ধতিটি ব্যবহার করে ওয়েবসাইটগুলি ডিজাইন করা উচিত নয়। আদর্শভাবে, আপনি এইচটিএমএল / সিএসএসে শুরু করতে এবং আপনার ইমেজ অ্যাপ্লিকেশনগুলি ব্যবহার করার সাথে সাথে ব্যবহার করবেন।
DA01

@ জিচাও: আপনার মন্তব্যটি একটি উত্তর করা উচিত।
ফিলিপ রেগান

2
@ DA01 "এইরকম বিষয়গত বিষয়টির জন্য খুব বেশি প্রয়োজনীয় হওয়া উচিত নয়"। সব কিছুর জন্য সেরা-অনুশীলন নেই।
জারি কেইনেনেন

2
@ কোইউ খুব সত্য। এটি বলেছিল, স্লাইস-এন-ডাইস এই দিনগুলিতে প্রায়শই সেরা অনুশীলন হয়। আমি একটি উত্তরে বিস্তারিত করব।
DA01

উত্তর:


26

দ্রুত আক্ষরিক উত্তর: ইলাস্ট্রেটর এবং ফটোশপের মধ্যে, ফটোশপ, এটি যেমন রাস্টার, তেমন ওয়েব সাইট।

সামান্য আরও বিশদ উত্তর: আপনি উভয় ব্যবহার করা চাই।

বিকল্প উত্তর: অ্যাডোব আতশবাজি ব্যবহার বিবেচনা করুন। ওয়েব গ্রাফিক্স উত্পাদনের জন্য আপনি যখন এটির হ্যাং পেয়ে যান তখন আতশবাজি ব্যবহার করা এত সহজ।

দীর্ঘ বিরক্তিকর বক্তৃতা উত্তর:

"স্লাইস-এন-ডাইস" পদ্ধতিটি কিছুটা তারিখযুক্ত। এক দশক আগে এটি জনপ্রিয় ছিল তবে আজকাল এটি সত্যিই প্রস্তাবিত পদ্ধতির নয়। আমি পরামর্শ দেব:

  • সাইটের 'স্কেচ' করতে যেকোন অ্যাপ (এআই / পিএসডি) ব্যবহার করুন। উচ্চ বিশ্বস্ততা নির্দ্বিধায় নির্দ্বিধায়, কিন্তু এটি কেবল একটি উপহাস হিসাবে বিবেচনা করুন।

  • একবার আপনি এটি প্রতিষ্ঠিত হয়ে গেলে সাইটটি তৈরি করা শুরু করুন। এইচটিএমএল / সিএসএস / জেএসে ডুব দিন।

  • আপনার প্রয়োজন মতো পৃথক গ্রাফিকাল উপাদান তৈরি করতে ফটোশপে লাফ দিন।

কেন? ঠিক আছে, ফটোশপ ডিজাইনের মাধ্যমে আপনি যে মাধ্যমটিতে কাজ করছেন তা দায়বদ্ধ নয় It's এটি একটি নির্দিষ্ট ক্যানভাস এবং ওয়েব কোনও স্থির ক্যানভাস নয়, এমনকি এটি এমনকি মানক ক্যানভাসও নয়। এটি দলটিকে একটি পিক্সেল-নিখুঁত ধারণার দিকে নিয়ে যায় এবং ওয়েব কেবল পিক্সেল নিখুঁত নয়।


সম্ভবত, আমরা কেবল ক্যানভাসের প্রস্থকে ঠিক করতে পারলাম, যেহেতু প্রচুর বিখ্যাত নির্দিষ্ট প্রস্থের ওয়েবসাইট রয়েছে। আরও তথ্যের জন্য, 960.gs দেখুন
জিচাও

আপনি সেখানে অর্ধেক পেতে হবে। কিছু পর্দার জন্য।
DA01

এটি একটি সমস্যা হওয়া উচিত। তবে, আমার কাছে বড় কোনও এলসিডি নেই, তাই এটি পরীক্ষা করার আমার কোনও সুযোগ নেই।
জিচাও

1
দুঃখিত যদি আমি অভদ্রতা ছিল। আমার অর্থ হ'ল এটি একটি নির্দিষ্ট প্রস্থের সাইট ... সামগ্রী, মোবাইল ডিভাইস, সহায়ক প্রযুক্তি, এসইও, ব্রাউজারের
তাত্পর্য

2
আপনার উত্তরে আতশবাজি সুপারিশ করার জন্য +1। একটি খুব আন্ডাররেটেড তবে শক্তিশালী ওয়েব ডিজাইন অ্যাপ্লিকেশন।
ডোয়াইন চারিংটন

7

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

তবে, মনে রাখবেন:

  • পিএনজি সংকোচনের জন্য আতশবাজি আরও ভাল। ফাইলের আকারগুলি ফটোশপের চেয়ে 20% -30% ছোট থাকে।

  • যদি আপনি রাস্তাটি জানেন তবে আপনি সাইটের জন্য অন্যান্য অ-ওয়েব সামগ্রী ডিজাইন করবেন (টিশার্ট, পোস্টার, ফ্লাইয়ারস, ইত্যাদি) আপনি যদি ভেক্টর ভিত্তিক প্রোগ্রাম শুরু করেন তবে এটি আরও ভাল।


"আপনি যদি রাস্তাটি জানেন ..." এর জন্য +1, আসলে, আমি অন্যান্য ফর্ম্যাটে কী ভিজ্যুয়াল উপাদানগুলির প্রয়োজন হবে তা ধরে নিয়ে কাজ করা ভাল। গ্রাহকরা কখনই জানেন না যে তারা কিছু না দেখা পর্যন্ত তারা কী ব্যবহার করতে চান এবং কখনই বুঝতে পারবেন না যে কোনও আরজিবি ওয়েব চিত্র মুদ্রণের জন্য তৈরি করা তাদের প্রত্যাশার মতো সহজ নয় ... এর জন্য আপনার পিছনের পকেটে কিছু রাখা ভাল মাঝেমধ্যে "এটি দুর্দান্ত দেখাচ্ছে, আপনি কি সেই স্টাইলটি গ্রহণ করতে পারেন এবং আমরা আগামী মঙ্গলবার আমাদের বড় সম্মেলনের জন্য প্রিন্ট করা এই A0 প্রাচীর পোস্টারগুলিতে এটি প্রয়োগ করতে পারি? এটি করা সহজ, তাই না?"
ব্যবহারকারী56ininstatemonica8

দক্ষ চিত্রের সংকোচনের বিষয়টিতে, আমি অ্যাডোবের কোনও অ্যাপের উপর নির্ভর করি না। ইমেজঅપ્টিম , ম্যাক অ্যাপের মতো কিছু চেষ্টা করুন। অন্যান্য স্থানীয় এবং ওয়েব-ভিত্তিক সমাধান রয়েছে। কিছু ক্ষেত্রে আপনি আরও ছোট গ্রাফিক্স পাবেন।
সমভূমি 15

6

আমি DA01 এর সাথে একমত নই।

কোনও ওয়েব ডকুমেন্ট একটি স্থির চিত্র নয় এটি কোনও ওয়েবসাইটের নকশা বা ডিজাইনের জন্য গ্রাফিক্স সম্পাদকের দরকারীতার সাথে অপ্রাসঙ্গিক। আপনার ডিজাইনের মকআপটি আপনার ওয়েবসাইটের একটি ওয়ার্কিং প্রোটোটাইপ হওয়ার দরকার নেই (এবং হওয়া উচিত নয়)। ডিজাইন মকআপ হ'ল একটি নথি যা আপনাকে আপনার সাইটের নান্দনিক নকশাকে ভিজ্যুয়ালাইজ এবং ভাস্কর্য করতে সহায়তা করে।

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

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

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


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

3
যদিও আপনার শেষ অনুচ্ছেদে আমি একমত নই। ব্যবহারকারীর অভিজ্ঞতা সম্পূর্ণরূপে ডিজাইন করার জন্য আপনাকে কোডে প্রবেশ করতে হবে। এবং, প্রায়শই এটির চেয়ে বেশি, এটি নকশা প্রক্রিয়াটির মূল অংশ এবং উপযুক্ত পরিবেশে সেই সময়ে পরিবর্তন করা বেশ সহজ (চতুর শুরু করার জন্য ভাল জায়গা হওয়া)।
DA01

আমি আপনার উভয় মতামত ধরে থাকব, এবং সম্ভবত এটি প্রকল্পগুলির উপরও নির্ভর করে। আমি উভয় পয়েন্ট বুঝতে পারি, যদিও আমাকে বলতে হবে যে আমি প্রায়শই যথেষ্ট ধৈর্যশীল না বা আমি যদি পুরো পৃষ্ঠাটি পিএসে প্রথমে ডিজাইন করি তবে বিশদে হারিয়ে যাওয়া অনুভব করছি। এছাড়াও, সিএসএসে ডিজাইনগুলি পিএস থেকে আলাদা দেখায়। তদুপরি আমি দেখতে পেয়েছি যে আপনি কোডিংয়ের অভ্যস্ত হয়ে উঠলে আমার পক্ষে কমপক্ষে PS এ পরিবর্তন করার চেয়ে আমি দ্রুত। এবং সর্বশেষে তবে সর্বনিম্ন নয়, জিনিসগুলি পরিবর্তন করতে পারে (সাবধানে প্রতিটি বিশদ পরিকল্পনা করার পরেও), এবং কোডিংয়ের সময় আমি প্রায়শই ডিজাইনে চ্যালেঞ্জগুলি পাই (সিএসএস, ইত্যাদি থেকে) এবং আমাকে পরিবর্তন করতে হবে - পিএসে এটি খুব কমই ঘটে ... ।
ক্রিস

1

মজার উপায়ে এটি ব্যাখ্যা করার জন্য একটি ভাল পোস্ট এখানে রয়েছে :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

এখানে একটি খুব নির্ভরযোগ্য উত্স থেকে আরও ভাল ব্যাখ্যা দেওয়া হয়েছে "http://99designs.com/help/whats-the-differences-between-photoshop-and-illustrator"

"পরিণামে, কোন সরঞ্জামটি ব্যবহার করবেন সে সম্পর্কে সিদ্ধান্তটি প্রতিযোগী ধারক দ্বারা নির্ধারিত করা উচিত, তবে সাধারণভাবে, চিত্রক লোগোগুলি এবং মুদ্রণ কাজের জন্য ব্যবহার করা উচিত, যেখানে ফটোশপটি ওয়েব ডিজাইন এবং কোনও ডিজাইনে ব্যবহার করা উচিত যা কেবল কম্পিউটারে দেখা যায় which পর্দা। "


4
99 ডিজাইনগুলি কোনও কিছুর নির্ভরযোগ্য উত্স নয়।
DA01

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

2
এবং কেবল আমার বক্তব্য প্রমাণ করার জন্য স্ট্যাক ওভার ফ্লো লোগোটি 99 ডিজাইন 99 ডিজাইনস / ইউজারস
বেদে

2
@ ডিএ01: দয়া করে সবসময় ব্যাখ্যা করুন কেন কিছু নির্ভরযোগ্য নয়, অন্যথায় আপনার মন্তব্যে গঠনমূলক কিছুই নেই।
লিটলম্যাড

1
ভিড়-সোর্সিংয়ের মাধ্যমে ডিজাইন প্রতিযোগিতা আমার পক্ষে কখনই ভাল নয় এবং পেশাদার ডিজাইনারদের দ্বারা প্রচার করা উচিত নয়। (প্লাস, এটি আমার দেশে কিছুটা অবৈধ: ডি)
শিকিরিউ

1

আপনার যদি "স্লাইসিং" প্রয়োজন হয় তবে আপনি ড্রিমউইভার ছাড়াই সরাসরি ফটোশপ ব্যবহার করতে পারেন।

ফটোশপটিতে স্লাইসের 2 টি উপায় রয়েছে, আপনার প্রয়োজনীয় গ্রাফিকের অংশটি স্বয়ংক্রিয়ভাবে এবং ম্যানুয়ালি নির্বাচন করে এবং এটি ওয়েবের জন্য সংরক্ষণ করা উচিত, এটি একবারে এক টুকরো।

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

ইমেলগুলির জন্য ডিজাইনিং করার সময় যখন আমাকে টেবিল কোড তৈরি করতে হয় কেবল তখনই আমি স্বয়ংক্রিয়ভাবে স্লাইসিংটি আরও দরকারী বলে মনে করি।


0

ফটোশপ ইমেজ প্রস্তুত। অর্থাত্ এটি সাইটের সামগ্রী সম্পর্কে। ক্লায়েন্ট আপনার পোর্টফোলিও বর্ধনের জন্য অর্থ প্রদান করছে না। কেএল


2
জিডিতে আপনাকে স্বাগতম। আমি মনে করি আপনি যা পেয়ে যাচ্ছেন তা আমি বুঝতে পেরেছি তবে আপনি কি দয়া করে এটি একটু বাড়িয়ে দিতে পারেন?
ফারে

0

এটি সম্পূর্ণরূপে সুস্পষ্ট যে আপনার বিস্তৃত ওয়েব ডিজাইন মকআপগুলির জন্য ফটোশপ ব্যবহার করা উচিত।

চিত্রশিল্প নকশাগুলি ফটোশপ ডিজাইনের তুলনায় ধীরে ধীরে প্রক্রিয়া করতে থাকে।

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

আপনি যদি ফটোশপটিতে মকআপগুলি তৈরি করেন তবে দ্রুত প্রোটোটাইপিংয়ের জন্য আপনি সহজেই সেই দস্তাবেজগুলিকে ফায়ারওয়ার্কে স্থানান্তর করতে পারেন।


-1

ফটোশপ আরও ভাল হবে। এটি ব্যবহারকারীদের টুকরো টুকরো করতে সহায়তা করবে।


4
এই উত্তরটি কিছুটা ছোট। আপনি কি বোঝাতে পারেন দয়া করে?
মেনশ

2
কে আর টুকরো?
স্কট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.