در Photoshop می‌توانید حاشیه یا Stroke را به روش‌های مختلف بسازید. دو روش رایج، Stroke در Layer Style و Stroke روی Vector Shape هستند. نتیجه این دو در اندازه‌های کوچک ممکن است شبیه باشد، اما در Scale، گوشه‌ها، مسیرهای باز و کنترل‌های پیشرفته تفاوت‌هایی دارند.
یادداشت آرشیوی: این آموزش در سال 2018 تهیه شده است و رابط Photoshop از آن زمان تغییر کرده، اما تفاوت مفهومی بین Stroke مبتنی بر Shape و افکت Stroke همچنان برای درک رفتار لبه‌ها مفید است.
Vector Stroke و Layer Style چه تفاوتی دارند؟
Stroke یک Vector Shape بخشی از خصوصیات خود Shape است و بر اساس Path محاسبه می‌شود. Stroke در Layer Style یک افکت روی محتوای Layer است. همین تفاوت باعث می‌شود کنترل‌هایی مثل نوع Corner، Cap و Dash در حالت Vector طبیعی‌تر و انعطاف‌پذیرتر باشند.
کیفیت لبه در اندازه‌های بزرگ
در Strokeهای ضخیم، تفاوت لبه و انحنا بیشتر دیده می‌شود. Vector Stroke به‌دلیل وابستگی به Path معمولا شکل هندسی تمیزتری را حفظ می‌کند.
Strokeهای نازک و Scale
در اندازه‌های کوچک تفاوت بصری کمتر است. با این حال برای UI بهتر است ضخامت Stroke را با Scale و Pixel Grid خروجی هماهنگ کنید و نتیجه را در اندازه واقعی بررسی کنید، نه فقط در Zoom بالا.
Mask Feathering
وقتی Shape یا Mask را Feather می‌کنید، نتیجه Stroke بسته به روش ساخت آن متفاوت است. اگر افکت باید همراه با خود فرم تغییر کند، قبل از نهایی‌کردن طرح رفتار Vector Stroke و Layer Style را جداگانه تست کنید.
کنترل Corner
در Vector Stroke کنترل بیشتری روی نوع اتصال گوشه‌ها دارید؛ برای مثال حالت‌های گرد، تیز یا Bevel. این موضوع در آیکان‌ها، دکمه‌ها و Shapeهای هندسی اهمیت بیشتری پیدا می‌کند.
Pathهای باز و Cap
برای Pathهای باز، Vector Stroke امکان کنترل انتهای خط با Cap را فراهم می‌کند. این قابلیت برای Line، Divider، Icon و Illustration کاربردی است.
Dashed Stroke
Vector Stroke می‌تواند الگوی Dash و Gap داشته باشد؛ بنابراین برای ساخت Borderهای خط‌چین یا الگوهای مشابه، کنترل مستقیم‌تری نسبت به افکت ساده Stroke دارید.
برای طراحی UI کدام روش بهتر است؟
اگر Stroke بخشی از هندسه اصلی کامپوننت یا آیکان است، Vector Stroke معمولا انتخاب قابل‌کنترل‌تری است. اگر فقط یک افکت سریع روی یک Layer می‌خواهید، Layer Style می‌تواند ساده‌تر باشد. در هر دو حالت، نتیجه را در Scale واقعی و روی خروجی نهایی بررسی کنید.
مطالب مرتبط: تفاوت pt و px در طراحی رابط کاربری و Pixels، Points و Resolution در طراحی موبایل
