معرفی ابزار Slice Tool
🎨 معرفی ابزار Slice Tool
نام ابزار: Slice Tool
تلفظ: سِلایس تول
محل قرارگیری: در جعبهابزار (Toolbox)، زیر ابزار Crop Tool
میانبر: وقتی Crop فعال است، با نگهداشتن کلیک روی آن میتونی Slice Tool رو انتخاب کنی.
📌 کاربرد اصلی
ابزار Slice برای تقسیم یک تصویر به چند بخش کوچکتر (تکه یا برش) استفاده میشود.
این ابزار بیشتر در طراحی وبسایتها و رابط کاربری (UI) کاربرد دارد، زمانی که میخواهیم قسمتهای مختلف یک تصویر را جدا ذخیره کنیم — مثلاً دکمهها، بنرها، لوگوها و غیره.
🧭 روش استفاده
- ابزار Slice Tool را انتخاب کن.
- روی تصویر کلیک و درگ (Drag) کن تا ناحیهای که میخواهی برش بخورد مشخص شود.
- میتوانی چند Slice مختلف در یک تصویر بسازی.
- برای تنظیم دقیقتر، از Slice Select Tool (ابزار انتخاب اسلایس) استفاده کن.
⚙️ گزینههای نوار تنظیمات (Options Bar)
وقتی ابزار Slice فعال است، در بالا گزینههای زیر دیده میشوند:
| گزینه | توضیح |
|---|---|
| Style | نوع اندازهگیری برش را تعیین میکند (Normal، Fixed Aspect Ratio، Fixed Size) |
| Width / Height | عرض و ارتفاع دقیق Slice را وارد میکنی |
| Slices From Guides | بر اساس خطوط راهنما (Guides) به طور خودکار برش میزند |
| Divide Slice… | تقسیم یک Slice به چند بخش مساوی افقی یا عمودی |
| Show Auto Slices | نمایش برشهای خودکار فتوشاپ |
| Select Slice Tool (C) | ابزار دوم برای انتخاب و ویرایش برشها |
💾 ذخیره کردن برشها
وقتی برشها آماده شدند:
- از منوی بالا برو به:
File → Export → Save for Web (Legacy) - هر Slice را با فرمت دلخواه (مثلاً PNG یا JPEG) ذخیره کن.
- فتوشاپ به طور خودکار هر بخش را جداگانه ذخیره میکند.
💡 کاربرد واقعی
- تقسیم تصویر وب به چند بخش قابل کلیک (مثلاً لینکدار)
- برش دادن بنر یا قالب سایت برای استفاده در HTML
- جدا کردن قسمتهای مختلف طراحی رابط کاربری
میریم سراغ مثالهای کاربردی مرحلهبهمرحله برای ابزار Slice Tool در فتوشاپ. هر مثال را با گامهای دقیق، نکات کاربردی و تنظیمات خروجی ارائه میدهیم تا بتوانید سریع در پروژهها پیادهسازی کنید.
مثال ۱ — برش و خروجی گرفتن یک بنر وب به چند قسمت (لوگو / منو / دکمهها / عکس)
هدف: تصویری که برای هدر سایت طراحی کردهای را به قطعات جدا تبدیل و هر کدام را بهصورت مستقل ذخیره کنی.
گامها:
- فایل PSD بنر را باز کن (مطابق سایز سایت؛ مثلاً 1200×300 px).
- در منوی View → Rulers را روشن کن (Ctrl+R) و بر اساس محلهایی که میخواهی برش بخورد، Guides (خطکشهای راهنما) بکش: کلیک و درگ از خطکش روی بوم.
- ابزار Slice Tool را انتخاب کن (کلیک راست روی Crop → Slice Tool).
- از گزینهی بالای صفحه اگر لازم است Style = Slices From Guides را انتخاب کن تا فتوشاپ برشها را بر اساس Guides بسازد (سریع و دقیق).
- اگر میخواهی به صورت دستی، هر بخش را با کلیک و درگ مستطیل بکش و رها کن (لوگو، منو، دکمهها، تصویر اصلی).
- برای اصلاح اندازه یا جابجایی هر برش، از Slice Select Tool (همانجا) استفاده کن: روی اسلایس کلیک کن و گوشهها را بکش.
- (اختیاری) برای تقسیم یک Slice به قطعات مساوی: راستکلیک روی آن → Divide Slice… → تعداد ردیف/ستون را تنظیم کن.
- از منوی File → Export → Save for Web (Legacy) را باز کن.
- در پنجره: هر Slice را انتخاب کن تا برایش فرمت و کیفیت را مشخص کنی.
- مثال تنظیمات: لوگو → PNG-24 (شفافیت)؛ عکس اصلی → JPEG quality = 60–80؛ دکمهها → PNG-24 (اگر نیاز به شفافیت است).
- اگر میخواهی همزمان تصاویر @1x و @2x تولید کنی: ابتدا تصویر را در اندازه 2× (مثلاً 2400×600) طراحی کن، در Save for Web اندازه Image Size را به 50% تغییر بده و خروجی 1x بگیر. (یا بالعکس برای تولید 2x در اندازه بزرگتر)
- در Save for Web از منوی Slices، میتوانی «All Slices» یا «Selected Slices» را انتخاب کنی. سپس Save بزنی — فتوشاپ هر Slice را جدا ذخیره میکند و اگر بخواهی یک فایل HTML ساده هم تولید میکند (گزینه HTML and Images).
نکات:
- قبل از Save نامگذاری اسلایسها: در Slice Select → راستکلیک → Edit Slice Options… → نام (Name) را وارد کن تا فایل خروجی با نام منطقی ذخیره شود.
- اگر لازم داری لینک در HTML باشد، Save for Web میتواند فایل HTML تولید کند (برای پروتوتایپ ساده).
مثال ۲ — خروجیگیری تکتک آیکونها و دکمههای UI از یک صفحه طراحی
هدف: گرفتن مجموعه آیکون/دکمه با کیفیت و فرمت مناسب برای توسعهدهنده.
گامها:
- همه آیکونها را روی یک سند مرتب کن (هر آیکون در یک کادر ثابت، مثلاً 64×64 یا 128×128 px).
- با Slice Tool دقیقاً اطراف هر آیکون برش بزن. سریعترین راه: Guides بکش تا شبکه 64px ساخته شود، سپس Style = Slices From Guides.
- برای آیتمهایی که پسزمینه شفاف نیاز دارند (آیکونها) فرمت PNG-24 انتخاب کن. برای آیکونهای فتوگرافیک، JPEG.
- برای رتینا: اگر طراحی را 2x انجام دادهای (مثلاً هر آیکون 256×256)، در Save for Web میتوانی اندازه خروجی را 50% بزنی تا هم 2x و هم 1x داشته باشی یا دوبار خروجی بگیری (یکبار 100% برای @2x و یکبار 50% برای @1x).
- Save → اسم پوشه «icons» → فایلها مرتب بر اساس نام اسلایس ذخیره میشوند.
نکته فنی:
- هنگام Export برای توسعهدهنده، معمولاً PNG-24 برای آیکونهای شفاف و SVG (اگر آیکون برداری است و نیاز به مقیاسپذیری دارد) بهتر است — برای SVG از مسیر Export → Export As → SVG استفاده کن (Slice برای SVG مناسب نیست).
مثال ۳ — تقسیم یک تصویر بزرگ برای لود سریع در وب (تصویر پسزمینه با بخشهای قابل کلیک)
هدف: تصویر بزرگی را به بخشهای کوچکتر تقسیم کنی تا هر بخش جدا لود شود یا لینک داشته باشد.
گامها:
- تصویر را باز کن و با Guides محل تقسیم را مشخص کن.
- Slice Tool → طراحی اسلایسها (یا Slices From Guides).
- برای قسمتهای متنی یا با جزئیات کم، از فرمت JPEG با کیفیت متوسط (50–70) استفاده کن تا حجم کم شود. برای قسمتهایی که نیاز به شفافیت دارند PNG.
- در Save for Web، گزینه Optimize to File Size را نداری ولی میتوانی کیفیت را تغییر دهی و Preview بگیری تا حجم کل را بررسی کنی.
- Save → HTML + Images اگر میخواهی یک HTML نمونه بسازی که هر Slice به عنوان تصویر جداگانه در آن قرار بگیرد (مربوط به پروتوتایپ یا ارسال به توسعهدهنده).
نکته کاربردی:
- تقسیم هوشمند باعث میشود کاربر کمکم بخشها را دریافت کند و UX بهتر شود؛ اما بیش از حد تقسیم نکن چون درخواستهای HTTP زیاد باعث افت کارایی میشود — تعادل برقرار کن.
ابزارها و ترفندهای مفید (چکلیست سریع)
- Toggle Guides: Ctrl+;
- Rulers: Ctrl+R
- نامگذاری Sliceها: Slice Select → راستکلیک → Edit Slice Options
- حذف Slice: Slice Select → انتخاب → Delete
- تقسیم مساوی: Divide Slice…
- Export فقط اسلایس انتخاب شده: Save for Web → Slices: Selected Slices
- برای تصاویر با شفافیت: PNG-24 + Transparency ON
- عکسهای بزرگ و رنگی: JPEG quality 60–80 (آزمایش کن)
- برای نمونه HTML ساده: Save for Web → Save → انتخاب HTML and Images
اشتباهات رایج
- برش زدن بدون تنظیم Guides → برشهای نامرتب.
- ذخیره آیکونها بهصورت JPEG و از دست رفتن شفافیت یا کیفیت.
- تقسیم خیلی زیاد تصاویر باعث کندی بارگذاری به خاطر زیاد شدن درخواستها.
- فراموش کردن نامگذاری اسلایس → فایلهای خروجی نامهای ناخوانا خواهند داشت.
در اینجا نکات تکمیلی و جمعبندی کامل ابزار Slice Tool (سِلایس تول) در فتوشاپ را ذکر کردیم — شامل مواردی که معمولاً در آموزشها کمتر گفته میشود.
🧩 جمعبندی کامل ابزار Slice Tool در فتوشاپ
🎯 هدف اصلی
ابزار Slice Tool برای تقسیم یک تصویر به چند بخش مجزا استفاده میشود، تا بتوانی هر بخش را بهصورت جدا ذخیره، بهینه یا لینکدار کنی.
بیشترین کاربرد آن در طراحی وب، رابط کاربری (UI) و خروجی گرفتن اجزای گرافیکی سایت یا اپلیکیشن است.
⚙️ ابزارهای مرتبط
در حقیقت این ابزار دو حالت دارد:
| ابزار | توضیح |
|---|---|
| Slice Tool | برای ایجاد و رسم برشهای جدید در تصویر |
| Slice Select Tool | برای انتخاب، جابجایی، ویرایش یا حذف برشها |
📏 روشهای ساخت Slice
۱. دستی: با درگ کردن ماوس روی تصویر (آزادانه).
۲. بر اساس خطوط راهنما:
از منوی بالا گزینه Slices from Guides را انتخاب کن تا فتوشاپ بر اساس خطوط راهنما بهصورت دقیق برشها را بسازد.
۳. تقسیم مساوی:
روی یک Slice راستکلیک → گزینه Divide Slice… → تعیین تعداد ردیف و ستون برای تقسیم مساوی.
💡 نکات حرفهای که معمولاً گفته نمیشود
🔹 ۱. نامگذاری Sliceها برای خروجی تمیز
قبل از خروجی گرفتن، با ابزار Slice Select روی هر برش راستکلیک کن → Edit Slice Options
در این بخش:
- Name = نام فایل خروجی
- URL = اگر بخواهی در HTML خروجی لینکدار باشد
- Target, Message Text = برای ساخت نمونه HTML (اختیاری)
این باعث میشود فایلهایت بهجای اسمهای نامرتب مثل slice_01.png، مثلاً logo.png یا button_contact.png ذخیره شوند.
🔹 ۲. تفاوت Sliceهای User, Auto و Layer-Based
- User Slices: برشهایی که خودت دستی ساختهای (آبی رنگ هستند).
- Auto Slices: برشهایی که فتوشاپ خودش برای پر کردن فضاهای خالی ایجاد میکند (خاکستری رنگ).
- Layer-Based Slices: اگر روی لایهای راستکلیک کنی → New Layer Based Slice، فتوشاپ دقیقاً دور همان لایه Slice میسازد (برای دکمهها یا آیکونها عالی است).
🔹 ۳. تنظیمات دقیق خروجی در Save for Web
در پنجرهی Save for Web (Legacy):
- میتوانی روی هر Slice کلیک کرده و فرمت جدا انتخاب کنی.
- اگر قسمتهایی پسزمینه شفاف دارند، PNG-24 + Transparency بزن.
- برای تصاویر معمولی یا عکسها: JPEG با کیفیت ۶۰ تا ۸۰ بهترین توازن بین کیفیت و حجم است.
- بخش Preview (پایین سمت چپ) حجم فایل را نشان میدهد — اگر زیاد است، Quality را کمتر کن تا بهینه شود.
🔹 ۴. حذف یا ویرایش Sliceها
- حذف Slice: با ابزار Slice Select روی آن کلیک کن → Delete
- جابجایی: انتخاب Slice → با ماوس بکش
- تغییر اندازه: گوشهها را بکش
- انتخاب چندتایی: Shift نگه دار و روی چند Slice کلیک کن
🔹 ۵. ترفند سرعتی برای طراحی وب
اگر در حال طراحی قالب سایت هستی، قبل از Slice کردن:
- همه بخشها را در لایههای جدا نامگذاری کن (مثلاً Header، Menu، Button، Footer).
- سپس روی هر لایه راستکلیک → New Layer Based Slice بزن.
فتوشاپ خودش برشها را دقیق دور محتوا ایجاد میکند — بدون دردسر دستی.
🔹 ۶. ترکیب با گزینه Export As
در پروژههای جدید، گاهی بهتر است بهجای Slice، از Export As یا Quick Export As PNG برای هر لایه استفاده کنی.
اما اگر طراحی تو یک تصویر بزرگ شامل چند ناحیه است (نه لایه جدا) Slice Tool بهترین گزینه است.
🔹 ۷. استفاده از Slice برای آموزش و رابطهای تعاملی
در برخی پروژههای آموزشی یا پرزنت طراحی (مثلاً ماکت سایت)، میتوانی از Slice برای ساخت HTML ساده با لینکهای واقعی استفاده کنی:
Save for Web → Format: HTML and Images
سپس فایل HTML خروجی را در مرورگر باز کن تا برشها بهصورت لینکدار و قابل مشاهده باشند.
🔹 ۸. نکات ظاهری
- User Slice → حاشیه آبی
- Auto Slice → حاشیه خاکستری
- Slice انتخاب شده → نارنجی
اگر خطوط Slice زیاد شد و دید را محدود کرد، از View → Show → Slices تیک آن را خاموش کن.
✅ جمعبندی نهایی (مرور سریع)
| ویژگی | توضیح |
|---|---|
| 🔧 ابزار | Slice Tool / Slice Select Tool |
| 🎯 کاربرد | تقسیم تصویر به قطعات برای خروجی جداگانه یا ساخت HTML |
| 🧠 روشها | دستی – بر اساس راهنما – لایهمحور – تقسیم مساوی |
| 💾 خروجی | Save for Web (Legacy) → HTML and Images یا فقط Images |
| 📦 فرمت مناسب | PNG برای شفافیت، JPEG برای عکسها |
| 🔠 نامگذاری | Edit Slice Options برای خروجی تمیز و سازمانیافته |
| ⚡ ترفند مهم | استفاده از Layer-Based Slice برای طراحیهای تمیز و دقیق |
| 💡 مورد استفاده | طراحی وب، رابط کاربری، آموزش، برش بنر و آیکونها |