কীভাবে একটি অ-ধ্বংসাত্মক এবং পুনরায় ব্যবহারযোগ্য অস্পষ্ট / হিমযুক্ত কাচের প্রভাব তৈরি করবেন?

Question

আমি কীভাবে জেনেরিকর অস্পষ্টতাযুক্ত পটভূমি তৈরি করতে পারি যা নীচের উদাহরণের মতো একাধিক চিত্রগুলিতে ব্যবহার করা যেতে পারে?

আমার একটি সাদা ফ্রস্টেড গ্লাস খুঁজছেন পিএনজি দরকার যা নিয়মিত চিত্রগুলিতে সবগুলি হিমায়িত কাচের চেহারা দেওয়ার জন্য আমি সেটগুলি ব্যবহার করতে পারি (যেমন আপনি এর পিছনে কী তৈরি করতে পারেন; সম্ভবত কিছু রঙ)।

উদাহরণ:

^{পূর্ণ রেজোলিউশনের জন্য ছবিতে ক্লিক করুন}

টেক্সচারের সাথে একটি সাদা পটভূমি (দানাদার টেক্সচার) তারপরে গাউসিয়ান এটি ঝাপসা করে এবং তারপরে এটি আমার সমস্ত চিত্রের উপরে একটি স্তর হিসাবে ব্যবহার করুন।

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

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

Comments

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

— হোরাটিও

সম্পাদনা সত্যিই প্রশ্ন পরিবর্তন করে না। উত্তরটি হোরটিও যেমন উল্লেখ করেছে: না, আপনার একটি পৃথক স্তরের অস্পষ্টতা থাকতে পারে না। আইওএস চিত্রটি আরও বড় অস্পষ্ট।

— ইয়িসেলা

আপনি আমাকে জিজ্ঞাসা করলে এটি কোডিং প্রশ্নে পূর্ণ। ছবি ব্যবহার করে আপনি আপনার দ্বিতীয় উদাহরণের মতো নিকটতম কিছু পেতে যাচ্ছেন এটি হ'ল: jsfiddle.net/lollero/DE4qn ... অবশ্যই এটি দুর্দান্ত স্থিতিশীল এবং আপনার একই চিত্রের দুটি সংস্করণ থাকতে হবে (অবশ্যই এটি CSS3 ফিল্টার পদ্ধতিতে একই জিনিস করা যেতে পারে)।

— জুনাস

Answer 1

আপনি কেবল এমন 'অস্পষ্ট' চিত্রটি ওভারলে করতে পারবেন না যা এর পিছনে র্যান্ডম চিত্রটি ঝাপসা করে। অস্পষ্ট প্রভাবটি পিক্সেল স্থানান্তর / ছড়িয়ে দিতে পিছনে চিত্রটির নমুনা নেওয়া দরকার, সুতরাং এটি সেখানে প্রয়োগ করা প্রয়োজন।

তবে আপনি বেলে / দানাদার টেক্সচারটি তৈরি করতে পারেন এবং দানাদার টেক্সচারের চেহারা পেতে এটি একটি বহুগুণ স্তর হিসাবে ব্যবহার করতে পারেন।

আপডেট - ডেরেক যেমন অন্য উত্তরে পরামর্শ দেয়, আপনি নিজের ইমেজ স্তরটিকে একটি স্মার্ট অবজেক্টে রূপান্তর করে একটি অ-ধ্বংসাত্মক ঝাপসা তৈরি করতে পারেন, তারপরে এই অস্পষ্টতাটি প্রয়োগ করুন। তারপরে আপনি স্মার্ট অবজেক্টটি প্রবেশ করতে এবং এটিকে অস্পষ্টভাবে স্বাধীনভাবে সম্পাদনা করতে পারেন।

Comments

আমি কিভাবে বেলে দানাদার জমিন করতে পারি? আমি এই একসাথে কাজ করবে ভাবছি। দুটি ঠিক একই, তবে প্রথমটির এক থেকে এক পিক্সেল আপ এবং ডানদিকে এক পিক্সেল এবং এটি দানাদার করে তুলবে (যদি আপনি করেন তবে স্তরযুক্ত)।

— jgervin

একটি শ্বেত ভরাট স্তর তৈরি করুন এবং ফিল্টার> শব্দ> শস্য যোগ করতে শব্দ যোগ করুন। সেখান থেকে এটিকে কিছুটা হালকা করার জন্য এটি একটি সামান্য বিটটি অস্পষ্ট করুন, স্তরটিকে বহুগুণ হিসাবে সেট করুন এবং अस्पष्टতাটিকে 10% এর মতো কিছুতে কম করুন।

— জন

Answer 2

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

---

এই সত্যিই আপনার প্রয়োজনীয়তা বাইরে যাচ্ছে তবে এই আছে আছে একটি ওভারলে সঙ্গে সম্পন্ন হবে? আমি নিশ্চিত নই যে আপনি সেই ধরণের পদ্ধতি ব্যবহার করে যে প্রভাবটি অর্জনের আশা করছেন তা পাবেন get আপনার যদি সামর্থ্য থাকে তবে আমি প্রোগ্রামের পরিবর্তে এটি করব।

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

.blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

[স্পষ্টতার জন্য নোট করুন: প্রক্রিয়াটি আলফা মাস্কযুক্ত পণ্যের অগ্রভাগের চিত্র এবং একটি সিএসএস ফিল্টার ব্যবহার করে অস্পষ্ট হওয়া একটি পটভূমি চিত্র]

আগে

পরে

^{চিত্র ক্রেডিট: ফিলিপ লিরা}

আপনি এখানে একটি লাইভ ডেমো চেক করতে পারেন

ভবিষ্যতে, এই অনেক সহজ প্রস্তাবিত ব্যবহার করা যেতে পারে backdrop-filterCSS স্টাইল, কিন্তু এই জন্য বর্তমান সমর্থন অবর্তমান পাশে ।

Comments

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

— হোরাটিও

কিছু লক্ষ্য করার বিষয় হ'ল এটি আইওএস ডিভাইস এবং সম্ভবত বেশিরভাগ মোবাইল ডিভাইসে কাজ করবে তবে এটি নন-মোবাইল ওয়েব ডিজাইনের জন্য একটি কার্যকর পন্থা নয় কারণ এর সমর্থনটি অত্যন্ত সীমাবদ্ধ। caniuse.com/css-filters

— এরিক

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

— jgervin

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

— জনবি

@ এরিক যদি এটি কোনও আইওএস অ্যাপ হয় তবে ওয়েব প্ল্যাটফর্ম কোনও বিষয় নয়।

— Ctrl Alt ডিজাইন

Answer 3

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

--- সম্পাদনা ---

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

private static Bitmap Blur(Bitmap image, Int32 blurSize)
{
    return Blur(image, new Rectangle(0, 0, image.Width, image.Height), blurSize);
}

এটি সম্পর্কে আরও তথ্য এখানে: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Answer 4

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

http://dribbble.com/shots/1210251-Live-Blur-Free-PSD

http://dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

Answer 5

যদি এটি এখনও প্রয়োজন হয়, আমি একই প্রভাব অর্জন করার চেষ্টা করছিলাম এবং আমি পারিনি।

আমি এটি এইচটিএমএল 2 ক্যানভাস এবং স্ট্যাকব্লুর নামে একটি প্লাগইন দিয়ে করেছি, যা আমি এটি এখানে পেয়েছি: http://jsfiddle.net/WtQjY/201/ ।

আমি প্লাগইনগুলির লেখক নই। এবং এটি কেবল কোডের স্নিপেট। আমি এটিকে সহজ ও দ্রুত হতে পরিবর্তন করেছি:

.blur {
    -উইবকিট-ফিল্টার: ঝাপসা (7px);
-মুজ-ফিল্টার: ঝাপসা (7px);
-o-ফিল্টার: অস্পষ্টতা (7px);
-এমএস-ফিল্টার: ঝাপসা (7px);
ফিল্টার: অস্পষ্ট (7px);

}

//////////////////////////////////
// jquery লাইব্রেরি অন্তর্ভুক্ত
// jQuery এর
$ (ডকুমেন্ট) .ready ({
$ ( '# YourButton')। ক্লিক করুন ({

$ ( '# YourContainer') toggleClass ( 'দাগ')।

});
});

এটি এখনও খুব ধীর কিন্তু এটি কাজ করে।

Answer 6

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

এখানে একটি ডেমো রয়েছে: http://www.palandforsale.us/frosted-glass/

Comments

ডেমো পৃষ্ঠাটি ডাউন মনে হচ্ছে। ডেমোটি অন্য কোনও জায়গায় পাওয়া যাবে, বা এটির কোনও জেএসফিডেল তৈরি করা সম্ভব?

— প্রক্সিস অ্যাসিলিন

Answer 7

আমি যদি আপনার প্রশ্নটি সঠিকভাবে বুঝতে পারি তবে আমি মনে করি না আপনি পারবেন। 'অস্পষ্টতা' একটি অপারেশন যা প্রতিটি সফটওয়্যারের টুকরোতে তাদের নিজস্ব উপায়ে কার্যকর করা হয়। স্কেচটি কীভাবে অস্পষ্ট প্রয়োগ করে তা ফটোশপ বা গুগল ক্রোম কী করে তার থেকে আলাদা উপায় হতে পারে।

সুতরাং, আপনি 'অস্পষ্টতা' দিয়ে কোনও চিত্র রফতানি করতে পারবেন না। এর পিছনে যা রয়েছে তার সাথে ঝাপসা সবসময় ইন্টারঅ্যাকশন থাকে এবং আপনি যে অ্যাপ্লিকেশনটি এটি তৈরি করছেন তা থেকে এটি রফতানি করা যায় না।

Comments

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

— দিলিপ

হ্যাঁ, প্রতিটি অ্যাপ্লিকেশন পৃথকভাবে। উদাহরণস্বরূপ, সিএসএসের আজকাল অস্পষ্ট বিকল্প রয়েছে।

— ভিনসেন্ট

Answer 8

1. ঝাপসা এবং হিমযুক্ত স্তরটি আপনি তৈরি করতে চান তার উপরে একটি 50% ধূসর স্তর করুন।
2. এটি আপনার শব্দের উপর নির্ভর করে, যা শব্দের সাথে পূরণ করুন
3. আপনার প্রয়োজন হিসাবে এটি গাউসিয়ান ব্লার দিয়ে ঝাপসা করুন।
4. এই স্তরটির উপরে আপনি একটি বক্ররেখার স্তর যুক্ত করতে পারেন এবং সাদা এবং কালো মানগুলিকে সাদা প্রান্তটি নীচে টেনে এনে বা বক্ররেখার স্তরটির শেষ প্রান্তটি চাপিয়ে সামঞ্জস্য করতে পারেন।

এই দুটি স্তর একটি তুষারপাত এবং ঝাপসা প্রভাব দেওয়া উচিত। এই দুটি স্তর ক্রম পরিবর্তন করা যেতে পারে।

Comments

হাই! যদি আপনি এটি চেষ্টা করে থাকেন, আপনি কি ফলাফলের ছবি যুক্ত করতে পারেন? ওপি ছবিটির

— রঙগুলিকে

এটি আপনাকে আসল তীক্ষ্ণ চিত্রের উপর ঝাপসা করে দিবে।

— DA01

এটা কাজ করছে না. তবে আমি এটি ভুল করেছি।

— jgervin

Answer 9

এমন একটি ক্রিয়া তৈরি করুন যা চিত্রটির সদৃশ হয় এবং একটি গাউসিয়ান অস্পষ্ট প্রয়োগ করে। এটি করার একমাত্র পিএস উপায় এটি আমি বিশ্বাস করি।