ذخیره تصاویر برای وب در فتوشاپ

ذخیره تصاویر برای وب در فتوشاپ

همانطور که میدانیم یکی از قوی ترین و قدیمی ترین نرم افزارهای ویرایش تصاویر، نرم افزار فتوشاپ شرکت adobe میباشد. این نرم افزار رایج کاربردهای فراوانی در زمینه ویرایش تصاویر دارد که طراحان وب نیز بطور گسترده از این نرم افزار استفاده میکنند. از مزایای این نرم افزار در طراحی صفحات وب میتوان به تولید تصاویر با کیفیت و کم حجم اشاره نمود که در بخش Save for web & Devices… در منوی فایل قرار دارد. در این مقاله سعی داریم به معرفی این بخش از نرم افزار فتوشاپ بپردازیم که بسیار به وب مسترها در طراحی صفحات سبک و با تصاویر زیبا کمک مینماید.

پس از اتمام کار طراحی

بعد از اینکه کار طراحی و ویرایش شما بر روی تصویر در فتوشاپ تمام شد حال نوبت به ذخیره کردن تصویر و استفاده از آن در وب سایتتان است، اگر به شیوه مرسوم از منوی فایل گزینه Save را بزنید و تصویر را با فرمت دلخواه خود ذخیره کنید، میبینید که تصویر تولید شده بسیار حجیم است و قرار دادن آن در سایت باعث کند شدن صفحه میگردد. اما پیشنهاد ما این است که از گزینه Save for web & Devices… در منوی File (کلید میانبرAlt+shift+ctrl+s)استفاده کنید.

Save for web and Devices...

فرمت تصاویر

فتوشاپ از کلیه فرمتهای خروجی رایج برای صفحات وب پشتیبانی میکند (از جمله jpeg, gif, png8, png24 ) که از لیست کشویی بخش Preset میتوانید فرمت دلخواه خود را بسته به نوع کاربرد تصویر در طراحی وب سایتتان انتخاب کنید. برای آشنایی بیشتر با انواع فرمت ها میتوانید به مقاله ”
انتخاب بهینه فرمت تصاویر در طراحی وب

” که در همین سایت موجود است مراجعه کنید.

تنظیمات این بخش بسته به نوع فرمت تصویر تغییر خواهد کرد، که با دستکاری و تغییر این تنظیمات حجم و کیفت فایل خروجی تغییر می یابد و پیش نمایش این تغییرات را همان لحظه میتوانید ملاحظه کنید. در کادر زیر تصویر، مشخصاتی مانند فرمت تصویر، حجم تصویر، نرخ انتقال داده برحسب kb بر ثانیه و کیفیت انتخاب شده برای تصویر و بعضی خواص دیگر که بسته به نوع فرمت انتخاب شده متغییر هستند.

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

برای اینکه هیچ اطلاعات اضافی همراه با تصویر دخیره نشود، MetaData را روی none تنظیم کنید.

پالت رنگ

این بخش برای فرمت های Gif و PNG8 فعال میشود. در این فرمتها شما میتوانید تعداد رنگهای بکار رفته در تصویر را دستکاری کنید و حداکثر تا ۲۵۶ رنگ را میتوانید داشته باشید. به دلیل وجود این تعداد طیف رنگ کم است که در تصاویر دارای gradient (طیف رنگ از کمرنگ به پرنگ و یا از رنگی به رنگ دیگر)این خاصیت بخوبی نمایش داده نمیشود و ظاهری پلکانی از طیف رنگها بوجود می آید.

هرچه تعداد رنگهای بکار رفته در تصاویر کمتر باشد حجم فایل تصویر کمتر خواهد بود. تعداد رنگ در فرمتهای GIF و PNG8 را میتوان در بخش انتخاب فرمت تصاویر و لیست کشویی Color تعیین نمود.

سایز تصویر

بخش بعدی این فرم مربوط به تعیین سایز(طول و عرض) تصویر است. میتوان این مقدار را براساس pixcell یا براساس درصد تعیین نمود و با کلیک بر روی علامت زنجیر کنار طول و عرض میتوانید مقادیر این دو را بهم وابسته و یا هرکدام را به تنهایی تغییر دهید.

انیمیشن

این بخش مربوط به کنترل و کار بر روی تصاویر متحرک است (فرمت GIF) که البته خود نرم افزار فتوشاپ امکان تولید تصاویر متحرک را ندارد و با ابزارهای دیگر شرکت Adobe یعنی Adobe Firework, Adobe flash,… میتوان چنین تصاویری را تولید نمود.

ابزارهای این پنجره

  • save for web tool section
    جابجایی فضای دید تصویر هنگامی که تصویر را بزرگنمایی میکنیم و یا زمانیکه خود تصویر بزرگ است بکار میرود.
  • image zoom in photoshop این ابزار برای ویرایش قطعات بریده شده از تصویر اصلی بکار میرود. بوسیله ابزار برش میتوان قطعاتی از تصویر را بصورت دلخواه برید و جدا کرد. حتی میتوان هر تکه از تصویر را به برشهایی تقصیم نمود که در خروجی نهایی هرکدام دارای فرمت خاص خود باشند. و در نهایت هر برش خود به یک تصویر جداگانه تبدیل میشود.
  • کنترل بزرگنمایی تصویر
    با این ابزار میتوان بزرگنمایی تصویر را کنترل کرد. البته در پایین کادر پیش نمایش نیز میتوان برحسب درصد نمایش تصویر را کنترل نمود.
  • نمونه برداری از رنگ تصاویر
    با این ابزار میتوان از رنگ تصاویر نمونه برداری کرد.
  • پالت انتخاب محدوده رنگنمایش رنگ انتخاب شده توسط ابزار نمونه بردار.
  • سویچ در بین حالت نمایش قطعات بریده شده و حالت نمایش کل تصویر بدون برش ها
    جهت سویچ در بین حالت نمایش قطعات بریده شده و حالت نمایش کل تصویر بدون برش ها .

ذخیره تصویر و تولید خروجی

با کلیک بر روی دکمه save پنجره ی ذخیره سازی تصویر در محل مورد نظر ظاهر میشود البته به همراه یک سری تنظیمات بیشتر نسبت به ذخیره سازی عادی .

فرمت خروجی

  • HTML Only: ذخیره تصویر با فرمت صفحات وب
  • Image Only: ذخیره فقط تصویر
  • HTML & Images: ترکیبی از تصاویر و فایل صفحات وب

تنظیمات خروجی

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

خروجی بر اساس قطعات برش

  • All Slices: تولید همه برش ها حتی فضای مابین برش ها
  • All User Slices: فقط تولید برش هایی از تصویر که طراح خود بریده است یعنی بدون فضای مابین برش ها
  • Selected Slices: تولید بخش برش خورده که در حالت پیش نمایش توسط کاربر انتخاب شده است

 

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

با ما باشید