جستجو برای:
  • خانه
  • مقالات
    • مقالات مشاوره‌ای/توضیحی
    • پایتون
    • HTML5
    • CSS3
    • PHP & MySQL
    • پایگاه داده (database)
  • شروع برنامه نویسی از صفر تا کسب درآمد
  • درباره ما
  • تماس
    • تماس با ما
    • پیشنهاد آموزش
یادیفای
  • خانه
  • مقالات
    • مقالات مشاوره‌ای/توضیحی
    • پایتون
    • HTML5
    • CSS3
    • PHP & MySQL
    • پایگاه داده (database)
  • شروع برنامه نویسی از صفر تا کسب درآمد
  • درباره ما
  • تماس
    • تماس با ما
    • پیشنهاد آموزش
0

ورود و ثبت نام

چطور عکس JPG را به PNG با پس زمینه‌ی Transparent تبدیل کنیم؟

16 ژانویه 2019
ارسال شده توسط مهدی خسروی
CSS3 ، طراحی وب ، فرانت اند (Front End)
8.34k بازدید

در گذشته آموزشی را منتشر کردیم که در آن دربار‌ه‌ی تفاوت PNG و JPG توضیح دادیم. در آن آموزش گفتیم که عکس های PNG به دلیل داشتن پس زمینه شفاف یا Transparet، برای طراحی وب بسیار مناسب هستند و در بسیاری از جاها ما از PNG در طراح هایمان استفاده میکنیم. 

اما یکی از کاربران یادیفای سوال بسیار خوبی را مطرح کرد: «چطور میتوانیم یک عکس JPG که Backround ساده دارد را به یک عکس PNG با بک گراند Transparent تبدیل کنیم. در این آموزش میخواهیم درباره‌ی روش انجام اینکار صحبت کنیم.

دانلود این فیلم آموزشی با کیفیت بالا و حجم ۱۸ مگ


تبدیل عکس JPG به PNG با پس زمینه‌ی Transparent

برای انجام اینکار ممکن است روش ها و نرم افزارهای مختلفی وجود داشته باشد. اما قطعا یکی از بهترین نرم افزارها برای انجام اینکار، نرم افزار فتوشاپ است. که در اینجا میخواهیم یاد بگیریم که چطور با کمک فتوشاپ میتوانیم پس زمینه‌ی یک عکس را حذف کنیم و از آن یک تصویر Transparet بسازیم.

نکته‌ای که در خصوص حذف پس زمینه‌ی عکس ها وجود دارد، این است که تصاویری که رنگ پس زمینه‌ی آن‌ها شباهت کمتری با رنگ المان های درون تصویر دارد، حذف پس زمینه یا background در آن‌ها بسیار راحت تر است. برای مثال اگر شما یک تصویر ماشین داشته باشید که پس زمینه‌ای سفید رنگ دارد، خیلی راحت میتوانید پس زمینه‌ی آن‌را حذف کنید، نسب به عکس ماشینی که در یک جاده یا طبیعت وجود دارد.

برای حذف پس زمینه‌ی عکس ها، از بزار Select در فتوشاپ استفاده میکنیم. البته چندین نوع مختلف از این ابزار در فتوشاپ برای کار وجود دارد، که برای دیدن روش دقیق کار هر ابزار، پیشنهاد میکنیم که فیلم ابتدای این مقاله را حتما مشاهده کنید. اما فرض کنید که میخواهیم در تصویر زیر، پس زمینه را حذف کنیم:

برای انجام اینکار:

مقاله‌ی مرتبط: CSS Reset چیست؟ راهنما و آموزش کامل CSS Reset

۱: در مرحله‌ی اول ابزار Magic Wand Tool را از منو انتخاب میکنیم. برای انجام اینکار میتوانیم کلید W را نیز روی کیبورد فشار دهیم.

۲: در مرحله‌ی دوم روی پس زمینه‌ای که میخواهیم آن‌را حذف کنیم کلیک میکنیم. این روش برای پس زمینه هایی جواب میدهد که مانند این عکس، یکدست و صاف هستند.

۳: در مرحله‌ی سوم، روی علامت قفل کنار عکس کلیک و سپس روی Ok کلیک میکنیم تا علامت قفل از بین برود.

۴: و نهایتا دکمه‌ی حذف یا Backspace را از روی کیبورد فشار میدهیم. و الان تصویر ما دارای پس زمینه‌ی شفاف یا Transparent است و  آماده است تا با فرمت PNG ذخیره شود.

برای عکس هایی که پس زمینه‌هایی به این یک دستی ندارند، روش متفاوتی برای استفاده از ابزار Select وجود دارد که در فیلم ابتدایی مقاله بیشتر درباره‌ی آن توضیح دادیم.

همینطور اگر درباره‌ی PNG و JPG دوست دارید اطلاعات بیشتری کسب کنید، پیشنهاد میکنیم حتما مقاله‌ی تفاوت PNG و JPG را مطالعه کنید. نکات بسیار ارزشمندی در آن آموزش مطرح شده است که حتما برای شما مفید خواهد بود.

اشتراک گذاری:
درباره مهدی خسروی

۸ سال پیش که یادگیری برنامه نویسی رو آغاز کردم، با یک مشکل بزرگ مواجه شدم: کمبود منابع آموزشی حرفه‌ای و کاربردی به زبان فارسی. به همین دلیل، بعد از چندین سال فعالیت حرفه‌ای در زمینه‌ی برنامه نویسی، تصمیم گرفتم دانسته‌ها و تجربیات خودم را با شما عزیزان به اشتراک بگذارم. پیشنهاد میکنم به آدرس yadify.com/gifts حتما سر بزنید :)

نوشته های بیشتر از مهدی خسروی

مطالب زیر را حتما مطالعه کنید

Full Stack چیست
Full Stack چیست و به چه کسی برنامه نویس فول استک میگویند؟
چرا HTML و CSS زبان برنامه نویسی نیستند؟
تفاوت فرانت اند و بک اند
راهنمای جامع تفاوت فرانت اند و بک اند (Front End vs Back End)
تفاوت استاتیک و داینامیک
همه چیز درباره‌ی تفاوت سایت های استاتیک و داینامیک
تفاوت جاوا و جاوا اسکریپت
تفاوت جاوا و جاوا اسکریپت – هرکدام چه کاربردی دارند؟
جی کوئری چیست
جی کوئری چیست؟ هر آن چیزی که باید درباره‌ی jQuery بدانید
قدیمی تر معرفی یک روش برای افزایش تمرکز هنگام کار و مطالعه
جدیدتر چگونه زبان های برنامه نویسی سایت های مختلف را کشف کنیم؟

3 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • حامد گفت:
    ۱۵ دی ۱۳۹۸ در ۰۰:۰۰

    کارتون عالی بود
    ممنونم

    پاسخ
  • علی گفت:
    ۱۰ فروردین ۱۳۹۹ در ۱۳:۳۱

    سلام ممنون از سایت مفید شما
    برای طراحی سایت بلد بودن کدوم ورژن از فتوشاپ کافیه؟

    پاسخ
    • مهدی خسروی گفت:
      ۱۷ فروردین ۱۳۹۹ در ۱۰:۵۵

      سلام علی جان
      ورژن خاصی مد نظر نیست. همینکه شما بتونید با فتوشاپ کار کنید کافیه. اما قطعا ورژن های جدیدتر امکانات بیشتری دارن. اما همون ورژن های قدیمی هم کار شمارو راه میندازن

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

This site uses Akismet to reduce spam. Learn how your comment data is processed.

مطالب مرتبط

Full Stack چیست و به چه کسی برنامه نویس فول استک میگویند؟

چرا HTML و CSS زبان برنامه نویسی نیستند؟

راهنمای جامع تفاوت فرانت اند و بک اند (Front End vs Back End)

همه چیز درباره‌ی تفاوت سایت های استاتیک و داینامیک

تفاوت جاوا و جاوا اسکریپت – هرکدام چه کاربردی دارند؟

جستجو برای:
.: روی یادگیری‌تان سرمایه‌گذاری کنید :.
  • مكان گيرنده
    دوره آموزش برنامه نویسی پی اچ پی
  • مكان گيرنده
    فول کورس مسترکلاس توسعه وب
.: نظرات کاربران :.
  • اکانت دمو در دوره آموزش برنامه نویسی پی اچ پی
  • مهدی خسروی در طراحی وب چیست؟ همه چیز درباره‌ی طراحی وب سایت (Web Design)
  • فاطمه در طراحی وب چیست؟ همه چیز درباره‌ی طراحی وب سایت (Web Design)
  • دوست در Stack Overflow چیست؟ همه چیز درباره‌ی استک اورفلو
  • مهدی خسروی در با ۱۴ پیش نیاز برنامه نویسی آشنا شوید! (+فیلم)
  • مهدی خسروی در PHP چیست؟ همه چیز درباره‌ی PHP و کاربرد آن
.: تماس با ما :.

ما به داشتن دوستان خوبی مثل شما افتخار میکنیم و بسیار خوشحال میشویم که پاسخگوی سوال‌هایتان باشیم. برای تماس با ما میتوانید از راه‌های زیر استفاده کنید:

+ آیدی پشتیبانی تلگرامی: yadify_support@

داستان یادیفای

از سال 1393 که فریلنسری برنامه نویسی رو شروع کردم، همیشه دوست داشتم که چیزهایی که یاد میگیرم رو با بقیه به اشتراک بذارم. که هم خودم بهتر یاد بگیرم و هم بتونم به بقیه کمکی کرده باشم.
مخصوصا اون موقع که محتوای تخصصی برنامه نویسی به زبان فارسی خیلی کم بود.
با xanbil.com شروع کردم به تولید محتوا و بعد از 3 سال به yadify.com رسیدیم.
جایی که در کنار هم سعی میکنیم برنامه نویسی رو به عنوان یه تخصص درآمدزا و خفن باهم یاد بگیریم و پیشرفت کنیم ...

دسترسی سریع
  • مقالات آموزشی
  • نقشه مسیر برنامه نویسی
  • مسترکلاس توسعه وب
  • درباره یادیفای
  • تماس با ما
چنل یوتوب برنامه نویسی پیج اینستاگرام
ساخته شده با و در یادیفای - از 1395

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت