টিউটোরিয়াল: অ্যাডোব ফটোশপ সহ একটি ওয়েব পৃষ্ঠা কীভাবে লেআউট করবেন

মডেল-ফটোশপ

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

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

আমাদের ওয়্যারফ্রেমের নকশা দিয়ে শুরু করছি

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

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

ওয়্যারফ্রেম -১

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

মোবাইল ফোনের জন্য পরিমাপ

আইফোন 4 এবং 4 এস: 320 এক্স 480

আইফোন 5 এবং 5 এস: 320 এক্স 568

আইফোন 6: 375 x 667

আইফোন 6+: 414 x 736

নেক্সাস 4: 384 x 598

নেক্সাস 5: 360 x 598

গ্যালাক্সি এস 3, এস 4, এস 5: 360 এক্স 640

এইচটিসি ওয়ান: 360 এক্স 640

ট্যাবলেট পরিমাপ

আইপ্যাড সমস্ত মডেলের পাশাপাশি আইপ্যাড মিনি: 1024 x 768

গ্যালাক্সি ট্যাব 2 এবং 3 (7.0 ইঞ্চি): 600 x 1024

গ্যালাক্সি ট্যাব 2 এবং 3 (10.1 ইঞ্চি): 800 x 1280

নেক্সাস 7: 603 x 966

নেক্সাস 10: 800 x 1280

মাইক্রোসফ্ট সারফেস ডাব্লু 8 আরটি: 768 x 1366

মাইক্রোসফ্ট সারফেস ডাব্লু 8 প্রো: 720 এক্স 1280

ডেস্কটপ কম্পিউটারগুলির জন্য পরিমাপ

ছোট পর্দা (নেটবুকগুলিতে উদাহরণস্বরূপ ব্যবহৃত): 1024 x 600

মাঝারি পর্দা: 1280 x 720/1280 x 800

বড় পর্দা: 1400 পিক্সেলের বেশি প্রস্থ, উদাহরণস্বরূপ 1400 x 900 বা 1600 x 1200।

ওয়্যারফ্রেম-গাইড

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

ওয়্যারফ্রেম -১ এ

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

ওয়্যারফ্রেম-ফাইনাল

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

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

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

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

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

ওয়েব

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

web2

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

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

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

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

  • আমাদের লোগো।
  • সমস্ত বোতাম (সেগুলি মূল মেনুর অংশ এবং বাকিগুলি)।
  • সব ছবি।

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

  • প্রথমত, আপনাকে অবশ্যই সেই ফোল্ডারে যেতে হবে যেখানে আমাদের ওয়্যারফ্রেম রয়েছে এমন পিএসডি ফাইলটি অবস্থিত এবং আপনি যে উপাদানগুলিতে রফতানি করতে চলেছেন ততবার নকল করুন। এই ক্ষেত্রে আমরা আসলটি থেকে 12 টি অনুলিপি তৈরি করেছি এবং সেগুলি একই ফোল্ডারে সংরক্ষণ করেছি। এরপরে, আপনি প্রতিটি অনুলিপিটির নতুন নামকরণ করবেন এবং তাদের প্রত্যেককে এটিতে থাকা উপাদানটির নাম নির্ধারণ করবেন। আমাদের 12 টি অনুলিপি নামকরণ করা হবে: লোগো, মেনু বোতাম 1, মেনু বোতাম 2, অনুসন্ধান বার, উপরের বোতাম 1, উপরের বোতাম 2, উপরের বোতাম 3 এবং উপরের বোতাম 4। বাকী চারটি নামকরণ করা হবে: চিত্র 1, চিত্র 2, চিত্র 3 এবং চিত্র 4।
  • এটি হয়ে গেলে আমরা লোগো নাম সহ ফাইলটি খুলব।
  • আমরা আমাদের লেয়ার প্যালেটে গিয়ে আমাদের লোগোটি ধারণ করে এমন স্তরটি সনাক্ত করব। তারপরে আমরা প্রেস করব will সিটিআরএল / সিএমডি যখন আমরা বলেন স্তরটির থাম্বনেইল ক্লিক করব। এইভাবে লোগোটি স্বয়ংক্রিয়ভাবে নির্বাচন করা হবে।
  • পরবর্তী পদক্ষেপটি ফটোশপকে জানানো হবে যে আমরা এটি চাই যে একটি সঠিক উপায়ে সেই লোগোটি কাটাতে চাই। এর জন্য আমাদের কেবল কী বা কমান্ড থেকে ক্রপিং সরঞ্জামটিতে কল করতে হবে C.
  • একবার এটি করা হয়ে গেলে আমরা কাটাটি নিশ্চিত করতে আমাদের এন্টার বোতামে ক্লিক করব।
  • এখন আমরা উপরের ফাইল মেনুতে যাব কীভাবে সেভ ক্লিক করুন। আমরা নামটি নির্বাচন করব, যা এই ক্ষেত্রে «লোগো be হবে এবং আমরা একটি ফর্ম্যাট নির্ধারণ করব পিএনজি, ওয়েবে সর্বোচ্চ মানের অফার করে এমন ফাইল হওয়ার জন্য।
  • আমরা সমস্ত অনুলিপি এবং উপাদানগুলি দিয়ে প্রক্রিয়াটি পুনরাবৃত্তি করব। আপনি ছাঁটাই হয়ে গেলে, নিশ্চিত হয়ে নিন যে আমাদের প্যালেটের বাকি স্তরগুলি রয়েছে অদৃশ্য বা নির্মূল। এইভাবে আমরা প্রতিটি উপাদান একটি স্বচ্ছ পটভূমি সহ সংরক্ষণ করতে পারি।

বাটন 1

এই ক্ষেত্রে আমরা স্তর প্যালেট থেকে আমাদের মেনু বোতাম 2 নির্বাচন করছি। স্ক্রিনশটে আপনি দেখতে পাবেন কীভাবে আমাদের বোতামের সীমাটি স্বয়ংক্রিয়ভাবে নির্বাচিত হয়েছে।

বাটন 2

একবার আমরা সি কী থেকে ক্রপিং সরঞ্জামটি নির্বাচন করি, আমাদের ক্যানভাসটি কেবলমাত্র আমাদের বোতামের মাত্রায় কমে যায়।

সেভ বোতাম

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

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

সারাংশ:

  1. ডিজাইন গঠন আপনি যে বিষয়বস্তু প্রেরণ করতে চান এবং যে ওয়েবসাইটগুলি আপনাকে অবশ্যই আপনার ওয়েবসাইটে তৈরি করতে হবে সেদিকে বিশেষ মনোযোগ দিচ্ছে ওয়েবসাইটটি।
  2. আপনার কঙ্কাল বা উপর কাজ wireframe অ্যাডোব ফটোশপ থেকে বিষয়বস্তুগুলি প্রদর্শিত হবে এবং তাদের ফর্ম্যাটটি নির্দেশ করবে indic
  3. আপনি পূর্বে বিকাশ করেছেন এমন ব্যবস্থা এবং ব্র্যান্ডগুলির উপর নির্ভর করে to নকশা ওয়েব পৃষ্ঠের। সমস্ত উপাদান (উভয় ভাসমান এবং স্থির) অন্তর্ভুক্ত। সংশ্লিষ্ট বোতাম, লোগো এবং চিত্রগুলি অন্তর্ভুক্ত করতে ভুলবেন না।
  4. একে একে প্রকল্পের অংশ থাকা সমস্ত উপাদানগুলি কেটে দিন। নিশ্চিত করুন যে তাদের সঠিক ব্যবস্থা রয়েছে এবং তারা আপনাকে পরে সমস্যা না ঘটায়।
  5. বিন্যাসে সমস্ত উপাদান সংরক্ষণ করুন পিএনজি প্রকল্প ফোল্ডারের ভিতরে চিত্র ফোল্ডারে এইচটিএমএল.
  6. মনে রাখবেন যে এই প্রকল্পটির ওয়েব উইন্ডোতে একটি আউটপুট থাকবে তাই এটি রঙিন মোডকে বিবেচনায় রেখে প্রয়োগ করা খুব জরুরি very আরজিবি.
  7. আপনি অন্যান্য ওয়েব পৃষ্ঠাগুলি দ্বারা অনুপ্রাণিত হন যা আপনি কাজ করার আগে প্রশংসিত হন এবং আপনার দলের সদস্যদের সাথে এটি আলোচনা করতে ভুলবেন না। যদি এটি কোনও ক্লায়েন্টের জন্য একটি প্রকল্প হয় তবে এটির সাথে লেগে থাকার চেষ্টা করুন ব্রিফিংয়ে যত দূর সম্ভব.

2 মন্তব্য, আপনার ছেড়ে

আপনার মন্তব্য দিন

আপনার ইমেল ঠিকানা প্রকাশিত হবে না। প্রয়োজনীয় ক্ষেত্রগুলি দিয়ে চিহ্নিত করা *

*

*

  1. ডেটার জন্য দায়বদ্ধ: মিগুয়েল অ্যাঞ্জেল গাটান
  2. ডেটার উদ্দেশ্য: নিয়ন্ত্রণ স্প্যাম, মন্তব্য পরিচালনা।
  3. আইনীকরণ: আপনার সম্মতি
  4. তথ্য যোগাযোগ: ডেটা আইনি বাধ্যবাধকতা ব্যতীত তৃতীয় পক্ষের কাছে জানানো হবে না।
  5. ডেটা স্টোরেজ: ওসেন্টাস নেটওয়ার্কস (ইইউ) দ্বারা হোস্ট করা ডেটাবেস
  6. অধিকার: যে কোনও সময় আপনি আপনার তথ্য সীমাবদ্ধ করতে, পুনরুদ্ধার করতে এবং মুছতে পারেন।

  1.   জলদস্যু জলদস্যু কিং তিনি বলেন

    হাহাহাহাহাহাহা এবং এই সবের শেষে আপনি স্টার্ট বাটনে যান, সরঞ্জামগুলি বন্ধ করে দিন এবং আপনি এমন একজন পেশাদার পেশাদারের কাছে যান যিনি আপনাকে এমন ওয়েবসাইট তৈরি করবেন যা কোনও ধোঁয়াশা নয়;)

  2.   রনি তিনি বলেন

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