কীভাবে আপনার ফটোশপ ডিজাইনটি এক মিনিটেরও কম সময়ে সিএসএস কোডে রূপান্তর করতে পারেন

সিএসএস-ফটোশপ

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

এটি একটি খুব ভাল বিকল্প বিশেষত কারণ এটি আমাদের ভিজ্যুয়াল শর্তে এবং বাস্তব সময়ে আমাদের ডিজাইনের বিবর্তন দেখতে দেয়। এই বিকল্পটি ব্যবহার করতে এবং পেতে এখানে কিছু টিপস রয়েছে সর্বাধিক কর্মক্ষমতা:

সুনির্দিষ্ট হওয়ার চেষ্টা করুন

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

গাইডগুলির ব্যবহার এবং ইন্টারফেসের নিয়মগুলি আপনাকে এর সমস্ত উপাদানগুলির পুরোপুরিভাবে সাজানো সহ একটি ঝরঝরে এবং পরিষ্কার টেম্পলেট তৈরি করতে সহায়তা করবে।

ওয়েব ফটোশপ

প্রতিটি উপাদানের সমস্ত বৈশিষ্ট্য কনফিগার করুন

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

  • আয়তন
  • অবস্থান
  • স্ট্রোক রঙ
  • রঙ পূরণ করুন (গ্রেডিয়েন্ট সহ)
  • ছায়া ড্রপ

পাঠ্য স্তর থেকে আমরা নিম্নলিখিত মানগুলি ক্যাপচার করতে পারি:

  • হরফ পরিবার
  • হরফ আকার
  • হরফ বেধ
  • লাইনের উচ্চতা
  • আন্ডারলাইনড
  • স্ট্রাইকথ্রু
  • সুপারস্ক্রিপ্ট
  • সাবস্ক্রিপ্ট
  • লিখার বিন্যাস

এটি মনে রাখবেন এবং আপনি যে শৈলীটি সন্ধান করছেন তা প্রদান করতে এই মানগুলির প্রতিটি সেট করুন।

স্তর গ্রুপগুলির সাথে কাজ করুন

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

রূপান্তর করার পদক্ষেপ

একবার আপনি আপনার মকআপটি তৈরি করার পরে, আপনি প্রতিটি উপাদানকে ব্যক্তিগতকৃত করেছেন এবং সেগুলি আপনি গোষ্ঠীভুক্ত করেছেন, আপনাকে কেবল এই পদক্ষেপগুলি অনুসরণ করতে হবে:

  • স্তর প্যানেলে যান এবং এই দুটি বিকল্পের মধ্যে একটি চয়ন করুন:
    • কোনও আকার বা পাঠ্য স্তর বা স্তরগুলির একটি গ্রুপে ডান ক্লিক করুন এবং চয়ন করুন সিএসএস অনুলিপি করুন প্রসঙ্গ মেনুতে।
    • একটি আকার বা পাঠ্য স্তর বা স্তরগুলির একটি গ্রুপ নির্বাচন করুন, তারপরে বিকল্পটি চয়ন করুন সিএসএস অনুলিপি করুন স্তর প্যানেল মেনুতে।
  • আপনার স্টাইলশীট নথিতে কোডটি আটকান এবং এটি এইচটিএমএল 5 এর মাধ্যমে আপনার পৃষ্ঠাগুলিতে প্রয়োগ করুন।

    সিএসএস-ফটোশপ 1

    সিএসএস-ফটোশপ 2


মন্তব্য করতে প্রথম হতে হবে

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

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

*

*

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