آموزش ذخیره کردن عکس و لوگو بدون پس زمینه در فتوشاپ

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

این موضوع راجع به لوگوهای مختلف نیز صدق می کند. شما باید لوگو خود را بدون پس زمینه ذخیره کنید( شفاف ) تا بتوانید از آن در هرکجای وبسایت بدون توجه به رنگ پس زمینه آن صفحه استفاده کنید. 

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

مراحل ذخیره کردن عکس بدون پس زمینه در فتوشاپ

1. تصویر خود را به یک لایه تبدیل کنید.
2. سلکشن خود را ایجاد کنید.
3. پس زمینه را حذف کنید.
4. تصویر خود را در قالب یک فرمت وب ذخیره کنید.
5. فایل خود را ذخیره کنید.

مرحله ۱: تصویر خود را به یک لایه تبدیل کنید

تصویر محصول خود را در فتوشاپ باز کنید! به احتمال زیاد فرمت فایل شما JPEG است. در این آموزش قرار است تا عکس این ساعت مچی را بدون پس زمینه در فتوشاپ ذخیره کنیم! 

سراغ پنل لایه ها بروید. به صورت پیش فرض این پنل در رابط کاربری فتوشاپ قرار گرفته است اما اگر نبود از نوار منو روی گزینه Windows بزنید و سپس تیک گزینه Layers را بزنید. با این کار پنل لایه ها در قسمت پایین و راست فتوشاپ باز خواهد شد!

در پنل لایه ها، روی لایه پس زمینه ( Background ) دوبار کلیک کنید. حالا یک پنجره جدید برایتان باز می شود که از شما می خواهد نام لایه خود را تغییر دهید. می توانید این لایه را با عنوان layer 0 به صورت پیش فرض نام گذاری کنید و روی OK کلیک کنید.

حالا شما قفل لایه خود را باز کرده اید ( اصطلاحا آن را آنلاک کرده اید ). حالا هرچیزی از آن پاک کنید به صورت شفاف خواهد بود.

مرحله ۲: سلکشن خود را ایجاد کنید

ابزار عصای جادویی ( Magic Wand Tool ) را از نوار ابزار سمت چپ فتوشاپ انتخاب کنید. سپس به نوارگزینه ابزار در قسمت بالایی فتوشاپ بروید. روی گزینه Select Subject بزنید. حالا فتوشاپ سعی می کند بدون توجه به پس زمینه شما، سوژه اصلی عکس ( ساعت ) را انتخاب کند. زمانیکه سلکشن شما ایجاد شد، افکتی شبیه به راه پیمایی مورچه ها دورتادور محصولتان مشاهده خواهید کرد!

اگر سلکشن ایجاد شده صحیح نبود و قسمت هایی جا افتاده بود، می توانید دوباره از ابزار Magic Wand برای حذف و یا اضافه کردن قسمت هایی از سلکشن اسفاده کنید. 

به طور مثال در عکس ما، فتوشاپ به صورت کامل سایه ساعت را از سلکشن حذف نکرده است. بنابراین سراغ نوارگزینه در فتوشاپ می رویم و گزینه  Subtract from selection  را انتخاب می کنیم. ( آیکون آن در تصویر زیر مشخص شده است )

حالا با ابزار Magic Wand روی قسمت هایی از سایه کلیک می کنیم تا حذف شود. این کار را تا زمانی انجام دهید که سلکشن شما فقط شامل ساعت باشد!

هنگامی که مشغول ساخت سلکشن خود هستید، مطمئن شوید مناطقی که به صورت سوراخ در محصول شما می باشد نیز انتخاب کرده اید! مانند این قسمت که صفحه ساعت با مچ بند برخورد می کند!

مرحله ۳: پس زمینه را حذف کنید

زمانیکه سلکشن خود را ایجاد کردید، به کمک دکمه های SHIFT+CTRL+I و یا رفتن به مسیر Select > Inverse در نوار منوی فتوشاپ، انتخاب خود را معکوس کنید! در این حالت دیگر ساعت شما انتخاب نشده است و بجای آن فضای اطراف آن انتخاب ( Select ) شده است.

بعد از اینکه سلکشن خود را معموس ( Inverse ) کردید، دکمه Delete را روی کیبورد خود فشار دهید. حالا عکس شما دارای یک پس زمینه شفاف است. در فتوشاپ، یک پس‌زمینه شفاف با طرح شطرنجی خاکستری و سفید نشان داده می‌شود.

حالا دکمه های CTRL+D را فشار دهید تا انتخاب شما کنسل شود. 

مرحله ۴: عکس خود را دز قالب یک فرمت وب ذخیره کنید.

خب، حذف کردن پس زمینه عکس در فتوشاپ تازه اولین قدم ماست! شما باید مطمئن شوید که تصویر محصول خود را با فرمت صحیح ذخیره کرده اید تا با پس زمینه ای شفاف در وب سایت تجاری شما نمایش داده شود! 

بهترین فرمتی که بتوانید عکس خودتان را ذخیره کنید، فرمت PNG-24 می باشد. این فرمت اجازه می دهد تا چندین لایه شفاف داشته باشید، به این معنی که تصویر شما وقتی روی پس زمینه رنگی متفاوت قرار می گیرد هرگز یک “هاله” پیکسلی نخواهد داشت. دیگر فرمت های پس زمینه شفاف مثل PNG-8 و GIF این افکت نامطلوب هاله را ایجاد می کنند، بنابراین بهتر است همیشه از فرمت PNG-24 استفاده کنید.

برای ذخیره کردن عکس ها با فرمت PNG-24 در فتوشاپ CC، دکمه های SHIFT+ALT+CTRL+W را فشار دهید و یا از نوار منو به مسیر File > Export > Export As بروید. 

در پنجره جدیدی که باز می شود، زیر گزینه File Setting در سمت راست ، مقدار Format را روی PNG قرار دهید و تیک گزینه Transparency را بزنید. تیک گزینه ( Smaller File (8-bit را نزنید چون با این کار عکس با فرمت PNG-8 ذخیره خواهد شد. 

در سمت چپ تصویر، اندازه فایل پیش بینی شده برای فایل PNG خود را مشاهده خواهید کرد. این بدین خاطر مهم است که اگر حجم فایل PNG بیش از حد بالا باشد، روی سرعت لود شدن صفحه شما تاثیر منفی خواهد گذاشت! اگر نظر ما را می خواهید، حجم عکس های اینترنتی باید کمتر از ۲۰۰ کیلوبایت باشند.

در سمت راست پنجره، زیر قسمت Image Size، می توانید ابعاد ( dimensions ) تصویر خود را تنظیم کنید. هرچقدر ابعاد عکس شما کوچکتر باشد، اندازه فایل شما نیز کاهش پیدا می کند. با این حال حواستان باشد ابعاد عکس خودتان را بیش از حد کوچک نکنید چون بعد از آپلود روی وبسایت حالت پیکسلی و تار پیدا خواهد کرد.

همچنین از آنجایی که اکثر مشتریان محصولات شما را روی صفحه نمایش رتینا ( Retina ) مشاهده می کنند، بهتر است تا تصویر محصول خود را ۵۰ الی ۱۰۰ درصد بزرگتر از آنچیزی که انتظار دارید ذخیره کنید! با این کار، عکس شما در تمام دستگاه ها شفاف و با کیفیت نمایش پیدا می کنند. به عبارت دیگر، اگر شما می‌دانید که عرض محصول شما حداکثر در ۴۰۰ پیکسل نمایش داده می‌شود، باید در اینجا عرض آن را حداقل ۶۰۰ پیکسل کنید.

سعی کنید در این مرحله تا حد لازم تعادل را بین حجم فایل و کیفیت آن ایجاد کنید. نه آن را بیش از حد کوچک کنید که روی وبسایت به صورت تار نمایش داده شود و نه آن را بیش از حد بزرگ کنید که روی سرعت سایت شما تاثیر منقی داشته باشد! 

مرحله ۵: فایل خود را ذخیره کنید

زمانیکه میزان ابعاد را در قسمت Image Size مشخص کردید، روی گزینه Export All بزنید. 

در پنجره Save، مسیر دلخواه خود را برای ذخیره کردن عکس مشخص کنید. بهتر است تا عکس های وب را از باقی تصاویر جدا نگه دارید تا در هنگام آپلود کردن آن ها روی وبسایت دچار اشتباه نشوید. نام دلخواه خود را برای عکس تایپ کنید و مطمئن باشید که Image Type روی گزینه PNG قرار گرفته است!

سپس روی گزینه Save بزنید.

تبریک میگم! پروسه ذخیره عکس بدون پس زمینه در فتوشاپ به اتمام رسید! حالا می توانید عکس شفاف خود را در هرجایی که دوست دارید آپلود کنید! از آنجایی که عکس شما فاقد پس زمینه است، هر کجا که آپلود شود رنگ و لعاب پس زمینه پشتی را به خودش جذب می کند!

ذخیره کردن لوگو با پس زمینه شفاف در فتوشاپ

لوگویی که قرار است در وبسایت خود استفاده کنید باید همیشه پس زمینه شفاف داشته باشد! به این ترتیب می توانید از آن در هر قسمت وبسایت بدون نگرانی از رنگ پس زمینه پشتی آن استفاده کنید. 

با این حال اگر لوگوی شما با فرمت JPEG ذخیره شده است باید در ابتدا پس زمینه آن را حذف کنید و مجددا فایل تصویری خود را با فرمت PNG-24 ذخیره کنید. ( درست مثل مراحل بالا که برای ساعت مچی انجام دادیم ) اگر خوش شانس باشید، شاید فایل لوگو خود را با فرمت وکتور ( AI ، EPS یا PDF ) ذخیره کرده اید که در این حالت فقط کافیست لوگو را در فتوشاپ باز کنید و پس از آن فایل تصویری را با فرمت PNG-24 ذخیره کنید. با این کار، لوگو شما در قالب فرمت وبسایت قرار خواهد گرفت!

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

1. لوگو خود را در فتوشاپ باز کنید!
2. پس زمینه خود را شفاف کنید!
3. تصویر خود را با فرمت PNG ذخیره کنید!

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

در برنامه فتوشاپ، از نوار منو به مسیر File > Open بروید. حالا در این پنجره به مسیر لوگو خود بروید و روی آن کلیک کنید. پس از آن روی گزینه Open کلیک کنید. 

با این کار، اگر عکس شما با فرمت JPEG ( و یا دیگر فرمت های رستر ) می باشد، بلافاصله در فتوشاپ باز خواهد شد. 

با این حال اگر یک فایل تصویری وکتور را باز می کنید، باید در ابتدا مطمئن شوید که تنظیمات آن به درستی وارد شده اند:

• گزینه Crop To را روی Bounding Box قرار دهید.
• تیک گزینه Constrain Proportions را بزنید.
• گزینه Mode را روی RGB قرار دهید.

سپس روی Ok کلیک کنید.

مرحله ۲: پس زمینه خود را شفاف کنید

اگر با یک فایل تصویری وکتور کار می کنید، می توانید این مرحله را رد کنید! با این حال اگر با فرمت JPEG سر و کار دارید، باید در ابتدا پس زمینه پشتی لوگو را به طور کامل حذف کنید.

همانطور که در مرحله ۱ برای ساعت مچی انجام دادیم، باید روی لایه پس‌زمینه ( Background )  در پنل لایه‌ها دوبار کلیک کنید و سپس اوکی کنید. با این کار اسم Background به Layer 0 تغییر پیدا می کند.

با این حال انتخاب کردن پس زمینه لوگو با انتخاب کردن پس زمینه یک محصول مقداری متفاوت است! این بدین خاطر است که در تصاویر لوگو، اغلب پس زمینه عکس سفید می باشد! دوباره ابزار عصای جادویی ( Magic Wand ) را از نوارابزار سمت چپ انتخاب کنید و سپس روی قسمت سفید روی لوگو کلیک کنید. اگر مجبور هستید چندین نقطه مختلف را انتخاب کنید، دکمه Shift را نگه دارید و سپس با ابزار عصای جادویی روی آن نقاط کلیک کنید تا به انتخاب ( سلکشن ) شما اضافه شوند. 

زمانیکه تمام پس زمینه سفید را انتخاب کردید، دکمه Delete روی کیبورد را فشار دهید. اکنون یک پس‌زمینه شفاف خواهید داشت که با یک الگوی شطرنجی خاکستری و سفید نشان داده شده است.

مرحله ۳: تصویر خود را با فرمت PNG ذخیره کنید

مراحل ۴ و ۵ را از قسمت حذف پس زمینه ساعت مچی که در بالاتر توضیح دادیم دنبال کنید! در پایان باید از عکس خود با فرمت PNG-24 خروجی بگیرید. تمام مراحل فارغ از اینکه با چه فرمتی شروع کرده اید ( چه JPEG و چه AI و … ) یکسان است.

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

ابعاد ( dimensions ) لوگو را در اندازه فایل اصلی که با آن کار کرده اید نگه دارید و روی گزینه Save کلیک کنید.

و تمام شد! حالا شما هرچیزی که راجع به ذخیره کردن عکس و لوگوهای مختلف بدون پس زمینه در فتوشاپ لازم باشد را می دانید! با این کار تصاویر شما برای استفاده در فضای وبسایت آماده هستند! 

کلام آخر و جمع بندی

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

اگر سوال و یا مشکلی در پروسه ذخیره عکس ها بدون پس زمینه در برنامه فتوشاپ داشتید، از قسمت نظرات با ما ارتباط بگیرید.

ممنون که تا انتهای این مقاله همراه ما بودید!

مطالب مشابه

آموزش قدم به قدم تغییر پس زمینه عکس در فتوشاپ ( دقیق ترین روش ! )

آموزش قدم به قدم تبدیل عکس به لوگو در فتوشاپ

آموزش جامع حذف لوگو و واترمارک از روی عکس با فتوشاپ

۴ روش آسان برای تبدیل فرمت PSD به JPG بدون نیاز به فتوشاپ!